add challenge banner (#34)

lib/algora/accounts/user.ex

@@ -16,6 +16,7 @@ defmodule Algora.Accounts.User do
     field :stream_key, :string
     field :visibility, Ecto.Enum, values: [public: 1, unlisted: 2]
     field :bounties_count, :integer
+    field :solving_challenge, :boolean, default: false
 
     embeds_many :tech, Tech do
       field :name, :string

lib/algora/library.ex

@@ -659,7 +659,8 @@ defmodule Algora.Library do
       is_live: user.is_live,
       bounties_count: user.bounties_count,
       orgs_contributed: user.orgs_contributed,
-      tech: user.tech
+      tech: user.tech,
+      solving_challenge: user.solving_challenge
     }
   end
 

lib/algora/library/channel.ex

@@ -8,5 +8,6 @@ defmodule Algora.Library.Channel do
             is_live: nil,
             bounties_count: nil,
             orgs_contributed: nil,
-            tech: nil
+            tech: nil,
+            solving_challenge: nil
 end

lib/algora_web/live/chat_live.ex

@@ -9,8 +9,59 @@ defmodule AlgoraWeb.ChatLive do
     assigns = assigns |> assign(tabs: [:chat])
 
     ~H"""
-    <aside id="side-panel">
-      <div class="p-4">
+    <aside id="side-panel" class="w-[400px] rounded ring-1 ring-purple-300 m-1 overflow-hidden">
+      <div>
+        <div :if={@channel.solving_challenge} class="bg-black px-4 py-4 rounded text-center">
+          <div class="font-medium text-base">
+            <.link
+              href="https://console.algora.io/challenges/tsperf"
+              class="font-semibold text-green-300 hover:underline"
+            >
+              Solving the $15,000 TSPerf Challenge
+            </.link>
+          </div>
+          <div class="pt-1.5 font-medium text-sm">
+            sponsored by
+          </div>
+          <div class="pt-2.5 mx-auto grid max-w-6xl gap-4 text-center grid-cols-3">
+            <a
+              target="_blank"
+              rel="noopener"
+              class="flex h-full flex-1 flex-col items-center text-white no-underline hover:no-underline"
+              href="https://unkey.com"
+            >
+              <img
+                src="https://console.algora.io/banners/unkey.png"
+                alt="Unkey"
+                class="-mt-1 h-8 w-auto saturate-0"
+              />
+            </a>
+            <a
+              target="_blank"
+              rel="noopener"
+              class="flex h-full flex-1 flex-col items-center text-white no-underline hover:no-underline"
+              href="https://scalar.com"
+            >
+              <img
+                src="https://console.algora.io/banners/scalar.png"
+                alt="Scalar"
+                class="h-6 w-auto saturate-0"
+              />
+            </a>
+            <a
+              target="_blank"
+              rel="noopener"
+              class="flex h-full flex-1 flex-col items-center text-white no-underline hover:no-underline"
+              href="https://tigrisdata.com"
+            >
+              <img
+                src="https://assets-global.website-files.com/657988158c7fb30f4d9ef37b/657990b61fd3a5d674cf2298_tigris-logo.svg"
+                alt="Tigris"
+                class="mt-1 h-6 w-auto saturate-0"
+              />
+            </a>
+          </div>
+        </div>
         <div>
           <div
             :for={{tab, i} <- Enum.with_index(@tabs)}
@@ -22,7 +73,7 @@ defmodule AlgoraWeb.ChatLive do
                 id="chat-messages"
                 phx-hook="Chat"
                 phx-update="stream"
-                class="text-sm break-words flex-1 m-1 scrollbar-thin overflow-y-auto inset-0 h-[400px] w-[400px] fixed overflow-hidden py-4 rounded ring-1 ring-purple-300"
+                class="text-sm break-words flex-1 scrollbar-thin overflow-y-auto inset-0 h-[400px] py-4"
               >
                 <div :for={{id, message} <- @streams.messages} id={id} class="px-4">
                   <span class={"font-semibold #{if(system_message?(message), do: "text-emerald-400", else: "text-indigo-400")}"}>

lib/algora_web/live/video_live.ex

@@ -174,9 +174,63 @@ defmodule AlgoraWeb.VideoLive do
         id="side-panel"
         class="lg:w-[24rem] lg:flex lg:fixed lg:top-[64px] lg:right-0 lg:pr-4 z-[1000]"
       >
-        <div class="py-4 bg-gray-800/40 w-screen lg:w-[23rem] lg:rounded-2xl shadow-inner shadow-white/[10%] lg:border border-white/[15%]">
+        <div class="pb-4 bg-gray-800/40 overflow-hidden w-screen lg:w-[23rem] lg:rounded-2xl shadow-inner shadow-white/[10%] lg:border border-white/[15%]">
+          <div
+            :if={@channel.solving_challenge}
+            class="hidden sm:block bg-gray-950 px-4 py-4 text-center"
+          >
+            <div class="font-medium text-base">
+              <.link
+                href="https://console.algora.io/challenges/tsperf"
+                class="font-semibold text-green-300 hover:underline"
+              >
+                Solving the $15,000 TSPerf Challenge
+              </.link>
+            </div>
+            <div class="pt-1.5 font-medium text-sm">
+              sponsored by
+            </div>
+            <div class="pt-2.5 mx-auto grid max-w-6xl gap-4 text-center grid-cols-3">
+              <a
+                target="_blank"
+                rel="noopener"
+                class="flex h-full flex-1 flex-col items-center text-white no-underline hover:no-underline"
+                href="https://unkey.com"
+              >
+                <img
+                  src="https://console.algora.io/banners/unkey.png"
+                  alt="Unkey"
+                  class="-mt-1 h-8 w-auto saturate-0"
+                />
+              </a>
+              <a
+                target="_blank"
+                rel="noopener"
+                class="flex h-full flex-1 flex-col items-center text-white no-underline hover:no-underline"
+                href="https://scalar.com"
+              >
+                <img
+                  src="https://console.algora.io/banners/scalar.png"
+                  alt="Scalar"
+                  class="h-6 w-auto saturate-0"
+                />
+              </a>
+              <a
+                target="_blank"
+                rel="noopener"
+                class="flex h-full flex-1 flex-col items-center text-white no-underline hover:no-underline"
+                href="https://tigrisdata.com"
+              >
+                <img
+                  src="https://assets-global.website-files.com/657988158c7fb30f4d9ef37b/657990b61fd3a5d674cf2298_tigris-logo.svg"
+                  alt="Tigris"
+                  class="mt-1 h-6 w-auto saturate-0"
+                />
+              </a>
+            </div>
+          </div>
           <div>
-            <ul class="pb-2 flex items-center justify-center gap-2 mx-auto text-gray-400">
+            <ul class="pt-4 pb-2 flex items-center justify-center gap-2 mx-auto text-gray-400">
               <li :for={{tab, i} <- Enum.with_index(@tabs)}>
                 <button
                   id={"side-panel-tab-#{tab}"}
@@ -194,7 +248,6 @@ defmodule AlgoraWeb.VideoLive do
               </li>
             </ul>
           </div>
-
           <div>
             <div
               :for={{tab, i} <- Enum.with_index(@tabs)}
@@ -282,7 +335,13 @@ defmodule AlgoraWeb.VideoLive do
                   id="chat-messages"
                   phx-hook="Chat"
                   phx-update="stream"
-                  class="text-sm break-words flex-1 scrollbar-thin overflow-y-auto sm:h-[calc(100vh-12rem)] h-[calc(100svh-56.25vw-392px)]"
+                  class={[
+                    "text-sm break-words flex-1 scrollbar-thin overflow-y-auto h-[calc(100svh-56.25vw-392px)]",
+                    if(@channel.solving_challenge,
+                      do: "sm:h-[calc(100vh-19.5rem)]",
+                      else: "sm:h-[calc(100vh-12rem)]"
+                    )
+                  ]}
                 >
                   <div
                     :for={{id, message} <- @streams.messages}

priv/repo/migrations/20240510083721_add_solving_challenge_to_user.exs

@@ -0,0 +1,9 @@
+defmodule Algora.Repo.Local.Migrations.AddSolvingChallengeToUser do
+  use Ecto.Migration
+
+  def change do
+    alter table("users") do
+      add :solving_challenge, :boolean, default: false
+    end
+  end
+end