From 30d2b0533684ed4dbb58e84cc5d9f4612ac84c2e Mon Sep 17 00:00:00 2001
From: Alex Lion <dev@alexandrelion.com>
Date: Wed, 29 Apr 2026 18:37:14 +0200
Subject: [PATCH] feat: enhance transcription features with global indicators
 and improved UI elements

---
 .../live/event_live/manage.html.heex          | 37 +++++++++-
 .../manage_interaction_list_component.ex      | 67 ++++++++++++++-----
 lib/claper_web/live/event_live/show.html.heex | 26 +++----
 .../form_component.html.heex                  |  5 +-
 4 files changed, 100 insertions(+), 35 deletions(-)

diff --git a/lib/claper_web/live/event_live/manage.html.heex b/lib/claper_web/live/event_live/manage.html.heex
index 213c863..d80bffb 100644
--- a/lib/claper_web/live/event_live/manage.html.heex
+++ b/lib/claper_web/live/event_live/manage.html.heex
@@ -179,6 +179,7 @@
             </li>
             <li :if={@transcription_globally_enabled} id="option-5" role="option" tabindex="-1">
               <a
+                :if={!(@transcription_config && @transcription_config.id)}
                 data-phx-link="patch"
                 data-phx-link-state="push"
                 href={~p"/e/#{@event.code}/manage/add/transcription"}
@@ -197,12 +198,46 @@
                   </svg>
                 </div>
                 <div class="ml-4 flex-auto text-left">
-                  <p class="font-medium text-gray-700">{gettext("Transcription")}</p>
+                  <div class="flex items-center gap-2">
+                    <p class="font-medium text-gray-700">{gettext("Transcription")}</p>
+                    <span class="badge badge-sm badge-soft badge-primary">
+                      {gettext("Global")}
+                    </span>
+                  </div>
                   <p class="text-gray-500">
                     {gettext("Add real-time subtitles from your microphone.")}
                   </p>
                 </div>
               </a>
+              <div
+                :if={@transcription_config && @transcription_config.id}
+                class="flex select-none rounded-xl p-3 w-full opacity-50 cursor-not-allowed"
+                aria-disabled="true"
+              >
+                <div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-linear-to-br from-primary-500 to-secondary-500">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    class="w-7 h-7"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z" /><path d="M5 10a7 7 0 0 0 14 0" /><path d="M8 21l8 0" /><path d="M12 17l0 4" />
+                  </svg>
+                </div>
+                <div class="ml-4 flex-auto text-left">
+                  <div class="flex items-center gap-2">
+                    <p class="font-medium text-gray-700">{gettext("Transcription")}</p>
+                    <span class="badge badge-sm badge-soft badge-primary">
+                      {gettext("Global")}
+                    </span>
+                  </div>
+                  <p class="text-gray-500">
+                    {gettext("Already added to this presentation.")}
+                  </p>
+                </div>
+              </div>
             </li>
           </ul>
         <% end %>
diff --git a/lib/claper_web/live/event_live/manage_interaction_list_component.ex b/lib/claper_web/live/event_live/manage_interaction_list_component.ex
index 124963e..2df6bd3 100644
--- a/lib/claper_web/live/event_live/manage_interaction_list_component.ex
+++ b/lib/claper_web/live/event_live/manage_interaction_list_component.ex
@@ -230,12 +230,14 @@ defmodule ClaperWeb.EventLive.ManageInteractionListComponent do
             <.popup_item
               :if={@transcription_globally_enabled}
               patch={transcription_patch(@event_code, @transcription_config)}
-              title={
+              disabled={transcription_persisted?(@transcription_config)}
+              badge={gettext("Global")}
+              title={gettext("Transcription")}
+              description={
                 if transcription_persisted?(@transcription_config),
-                  do: gettext("Edit transcription"),
-                  else: gettext("Add transcription")
+                  do: gettext("Already added to this presentation."),
+                  else: gettext("Live transcribe presenter audio for your audience.")
               }
-              description={gettext("Live transcribe presenter audio for your audience.")}
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -287,9 +289,12 @@ defmodule ClaperWeb.EventLive.ManageInteractionListComponent do
         </div>
 
         <div class="flex-1 min-w-0">
-          <p class="font-bold text-sm text-gray-800 leading-snug truncate">
-            {gettext("Transcription")}
-          </p>
+          <div class="flex items-center gap-2">
+            <p class="font-bold text-sm text-gray-800 leading-snug truncate">
+              {gettext("Transcription")}
+            </p>
+            <span class="badge badge-sm badge-soft badge-primary">{gettext("Global")}</span>
+          </div>
           <p class="text-xs text-gray-500 leading-tight truncate">
             {transcription_subtitle(@transcription_config)}
           </p>
@@ -574,19 +579,45 @@ defmodule ClaperWeb.EventLive.ManageInteractionListComponent do
   end
 
   defp popup_item(assigns) do
+    assigns =
+      assigns
+      |> assign_new(:disabled, fn -> false end)
+      |> assign_new(:badge, fn -> nil end)
+
     ~H"""
-    <.link
-      patch={@patch}
-      class="flex items-center gap-3 p-2 rounded-xl transition-colors hover:bg-primary-50"
-    >
-      <div class="flex items-center justify-center w-9 h-9 rounded-full bg-primary-50 text-primary-500 shrink-0">
-        {render_slot(@inner_block)}
+    <%= if @disabled do %>
+      <div
+        class="flex items-center gap-3 p-2 rounded-xl opacity-50 cursor-not-allowed"
+        aria-disabled="true"
+      >
+        <div class="flex items-center justify-center w-9 h-9 rounded-full bg-primary-50 text-primary-500 shrink-0">
+          {render_slot(@inner_block)}
+        </div>
+        <div class="min-w-0">
+          <div class="flex items-center gap-2">
+            <p class="font-bold text-sm text-gray-900 leading-snug">{@title}</p>
+            <span :if={@badge} class="badge badge-sm badge-soft badge-primary">{@badge}</span>
+          </div>
+          <p class="text-xs text-gray-500 leading-tight">{@description}</p>
+        </div>
       </div>
-      <div class="min-w-0">
-        <p class="font-bold text-sm text-gray-900 leading-snug">{@title}</p>
-        <p class="text-xs text-gray-500 leading-tight">{@description}</p>
-      </div>
-    </.link>
+    <% else %>
+      <.link
+        patch={@patch}
+        class="flex items-center gap-3 p-2 rounded-xl transition-colors hover:bg-primary-50"
+      >
+        <div class="flex items-center justify-center w-9 h-9 rounded-full bg-primary-50 text-primary-500 shrink-0">
+          {render_slot(@inner_block)}
+        </div>
+        <div class="min-w-0">
+          <div class="flex items-center gap-2">
+            <p class="font-bold text-sm text-gray-900 leading-snug">{@title}</p>
+            <span :if={@badge} class="badge badge-sm badge-soft badge-primary">{@badge}</span>
+          </div>
+          <p class="text-xs text-gray-500 leading-tight">{@description}</p>
+        </div>
+      </.link>
+    <% end %>
     """
   end
 end
diff --git a/lib/claper_web/live/event_live/show.html.heex b/lib/claper_web/live/event_live/show.html.heex
index 26549dc..12f115f 100644
--- a/lib/claper_web/live/event_live/show.html.heex
+++ b/lib/claper_web/live/event_live/show.html.heex
@@ -256,7 +256,19 @@
       </button>
     </div>
 
-    <div class={"fixed w-full " <> if @state.message_reaction_enabled, do: "bottom-12", else: "bottom-3"}>
+    <div class={"fixed z-30 w-full " <> if @state.message_reaction_enabled, do: "bottom-12", else: "bottom-3"}>
+      <div
+        :if={
+          @transcription_config && @transcription_config.enabled &&
+            @transcription_config.visibility in ["both", "attendee"] && @transcription_text != ""
+        }
+        class="w-full lg:w-1/3 lg:mx-auto px-5 mb-2"
+      >
+        <div class="bg-black/80 rounded-lg px-4 py-2 text-center">
+          <p class="text-sm text-white font-medium">{@transcription_text}</p>
+        </div>
+      </div>
+
       <%= if @state.chat_enabled do %>
         <%= if !@state.anonymous_chat_enabled && (@nickname && @nickname == "") do %>
           <.form
@@ -414,18 +426,6 @@
         <img class="h-6" src="/images/icons/raisehand.svg" />
       </a>
     </div>
-    <!-- TRANSCRIPTION SUBTITLES -->
-    <div
-      :if={
-        @transcription_config && @transcription_config.enabled &&
-          @transcription_config.visibility in ["both", "attendee"] && @transcription_text != ""
-      }
-      class="fixed bottom-14 left-1/2 transform -translate-x-1/2 max-w-lg w-full px-4 z-20"
-    >
-      <div class="bg-black/80 rounded-lg px-4 py-2 text-center">
-        <p class="text-sm text-white font-medium">{@transcription_text}</p>
-      </div>
-    </div>
   </div>
 <% else %>
   <div class="w-full">
diff --git a/lib/claper_web/live/transcription_live/form_component.html.heex b/lib/claper_web/live/transcription_live/form_component.html.heex
index 3f5d501..db7135c 100644
--- a/lib/claper_web/live/transcription_live/form_component.html.heex
+++ b/lib/claper_web/live/transcription_live/form_component.html.heex
@@ -52,7 +52,7 @@
       <button
         type="submit"
         phx_disable_with="Loading..."
-        class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
+        class="btn btn-primary w-full lg:w-auto"
       >
         {case @live_action do
           :new -> gettext("Create")
@@ -68,8 +68,7 @@
           data: [
             confirm: gettext("This will delete the transcription configuration, are you sure?")
           ],
-          class:
-            "w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
+          class: "btn btn-error w-full lg:w-auto"
         )}
       <% end %>
     </div>