rework video + text chat display controls

src/app/components/VideoCallContent.svelte

@@ -7,10 +7,10 @@
   import Icon from "@lib/components/Icon.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import VideoCallVideo from "@app/components/VideoCallVideo.svelte"
+  import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import {
     currentVoiceSession,
     currentVoiceRoom,
-    videoCallContentActive,
     videoCallLayoutRevision,
     videoPrimaryTileKey,
     toggleVideoPrimaryTile,
@@ -41,13 +41,7 @@
 
   const roomMatches = $derived($currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h)
 
-  const allowEmptyPanel = $derived(variant === "desktop-split" || variant === "desktop-full")
-
-  const showPanel = $derived(
-    visible &&
-      roomMatches &&
-      (variant === "mobile" ? $videoCallContentActive : $videoCallContentActive || allowEmptyPanel),
-  )
+  const showPanel = $derived(visible && roomMatches)
 
   const tiles = $derived.by(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- re-run when remote video subscribes
@@ -158,11 +152,11 @@
   const panelChrome = $derived(
     cx(
       variant === "mobile" &&
-        "cb ct cw z-compose bg-base-300/95 fixed inset-x-0 flex min-h-0 flex-col gap-2 overflow-hidden p-2 md:hidden",
+        "cb top-[calc(var(--sait)+6rem)] cw z-compose bg-[var(--video-call-panel-bg)] fixed inset-x-0 flex min-h-0 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 pb-2 pt-1 md:hidden",
       variant === "desktop-split" &&
-        "cb ct cw-split-video z-compose bg-base-300/95 fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
+        "cb ct cw-split-video z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
       variant === "desktop-full" &&
-        "cb ct cw z-compose bg-base-300/95 fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
+        "cb ct cw z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
       className,
     ),
   )
@@ -208,43 +202,56 @@
   </div>
 {/snippet}
 
-{#if showPanel && (showTileGrid || allowEmptyPanel)}
-  <div class={panelChrome}>
-    {#if showTileGrid}
-      {#if useSpotlightLayout && primaryTile}
-        <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
-          {@render videoTile(primaryTile, "spotlight")}
-          {#if secondaryTiles.length > 0}
-            <div
-              class="flex max-h-40 shrink-0 flex-row gap-2 overflow-x-auto overflow-y-hidden py-0.5">
-              {#each secondaryTiles as tile (tileKey(tile))}
-                {@render videoTile(tile, "strip")}
-              {/each}
-            </div>
-          {/if}
-        </div>
-      {:else if useMultiGrid}
-        <div
-          class="grid min-h-0 flex-1 grid-cols-1 content-start gap-2 overflow-y-auto sm:grid-cols-2">
-          {#each tiles as tile (tileKey(tile))}
-            {@render videoTile(tile, "default")}
-          {/each}
-        </div>
-      {:else}
-        <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
-          {#each tiles as tile (tileKey(tile))}
-            {@render videoTile(tile, "default")}
-          {/each}
-        </div>
-      {/if}
-    {:else}
-      <div
-        class="flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-2 rounded-box bg-base-100/50 p-4 text-center text-sm opacity-80">
-        <p>No camera or screen share yet.</p>
-        <p class="text-xs">
-          Use the camera or screen share control in the voice widget to share video.
-        </p>
+{#snippet videoPanelBody()}
+  {#if showTileGrid}
+    {#if useSpotlightLayout && primaryTile}
+      <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
+        {@render videoTile(primaryTile, "spotlight")}
+        {#if secondaryTiles.length > 0}
+          <div
+            class="flex max-h-40 shrink-0 flex-row gap-2 overflow-x-auto overflow-y-hidden py-0.5">
+            {#each secondaryTiles as tile (tileKey(tile))}
+              {@render videoTile(tile, "strip")}
+            {/each}
+          </div>
+        {/if}
       </div>
+    {:else if useMultiGrid}
+      <div
+        class="grid min-h-0 flex-1 grid-cols-1 content-start gap-2 overflow-y-auto sm:grid-cols-2">
+        {#each tiles as tile (tileKey(tile))}
+          {@render videoTile(tile, "default")}
+        {/each}
+      </div>
+    {:else}
+      <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
+        {#each tiles as tile (tileKey(tile))}
+          {@render videoTile(tile, "default")}
+        {/each}
+      </div>
+    {/if}
+  {:else}
+    <div
+      class="flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-2 rounded-box bg-base-200/50 p-4 text-center text-sm opacity-80">
+      <p>No camera or screen share yet.</p>
+      <p class="text-xs">Use the camera or screen share control to share video.</p>
+    </div>
+  {/if}
+{/snippet}
+
+{#if showPanel}
+  <div class={panelChrome}>
+    {#if variant === "mobile"}
+      <div class="flex min-h-0 flex-1 flex-col gap-2">
+        <div class="min-h-0 flex-1 overflow-hidden">
+          {@render videoPanelBody()}
+        </div>
+        <div class="shrink-0">
+          <VoiceWidget />
+        </div>
+      </div>
+    {:else}
+      {@render videoPanelBody()}
     {/if}
   </div>
 {/if}

src/app/components/VoiceWidget.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {readable} from "svelte/store"
   import {fly} from "svelte/transition"
+  import {browser} from "$app/environment"
   import {goto} from "$app/navigation"
   import {page} from "$app/stores"
   import cx from "classnames"
@@ -11,6 +12,7 @@
   import Monitor from "@assets/icons/monitor.svg?dataurl"
   import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
+  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Settings from "@assets/icons/settings.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
@@ -32,6 +34,8 @@
     currentVoiceSession,
     currentVoiceRoom,
     voiceState,
+    voiceMobileRoomPanel,
+    voiceDesktopRoomPanel,
     isLocalSpeaking,
     leaveVoiceRoom,
     toggleMute,
@@ -76,6 +80,45 @@
     pushModal(VoiceCallAudioSettingsDialog)
   }
 
+  let isMd = $state(
+    typeof window !== "undefined" && window.matchMedia("(min-width: 768px)").matches,
+  )
+
+  $effect(() => {
+    if (!browser) return
+    const mq = window.matchMedia("(min-width: 768px)")
+    const sync = () => {
+      isMd = mq.matches
+    }
+    sync()
+    mq.addEventListener("change", sync)
+    return () => mq.removeEventListener("change", sync)
+  })
+
+  const showVoiceLayoutToggle = $derived(
+    $voiceState === VoiceState.Connected &&
+      targetRoom !== undefined &&
+      getRoomType(targetRoom) === RoomType.Voice &&
+      typeof h === "string" &&
+      relay !== undefined &&
+      decodeRelay(relay) === targetRoom.url &&
+      h === targetRoom.h,
+  )
+
+  const layoutToggleActive = $derived(
+    showVoiceLayoutToggle &&
+      ((!isMd && $voiceMobileRoomPanel === "chat") || (isMd && $voiceDesktopRoomPanel === "split")),
+  )
+
+  const onLayoutToggle = () => {
+    if (!showVoiceLayoutToggle) return
+    if (isMd) {
+      voiceDesktopRoomPanel.update(p => (p === "split" ? "chat" : "split"))
+    } else {
+      voiceMobileRoomPanel.update(p => (p === "chat" ? "video" : "chat"))
+    }
+  }
+
   const mediaToggleClass = "center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
 </script>
 
@@ -96,18 +139,28 @@
     out:fly={{y: 60, duration: 250}}
     class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
     <div class="flex flex-col gap-0.5">
-      {#if $voiceState === VoiceState.Joining}
-        <span class="text-sm font-semibold text-warning">Joining...</span>
-      {:else if $voiceState === VoiceState.Connected}
-        <span class="text-sm font-semibold text-success">Voice Connected</span>
-      {:else}
-        <span class="text-sm font-semibold text-neutral-content">Disconnected</span>
-      {/if}
+      <div class="flex items-center justify-between gap-2">
+        {#if $voiceState === VoiceState.Joining}
+          <span class="text-sm font-semibold text-warning">Joining...</span>
+        {:else if $voiceState === VoiceState.Connected}
+          <span class="text-sm font-semibold text-success">Voice Connected</span>
+        {:else}
+          <span class="text-sm font-semibold text-neutral-content">Disconnected</span>
+        {/if}
+        {#if showVoiceLayoutToggle}
+          <Button
+            data-tip="Toggle full-screen chat ↔ video (mobile) or split view (desktop)"
+            class={cx(mediaToggleClass, "shrink-0", layoutToggleActive && "text-primary")}
+            onclick={onLayoutToggle}>
+            <Icon icon={ChatRound} size={4} />
+          </Button>
+        {/if}
+      </div>
       <span class="ellipsize text-xs opacity-70">
         {roomName} / {spaceName}
       </span>
     </div>
-    <div class="flex items-center gap-2">
+    <div class="flex flex-wrap items-center gap-2">
       {#if $voiceState === VoiceState.Joining}
         <span class="loading loading-spinner loading-sm"></span>
         <Button