From 9f6b16089ba84f9c0e8a6d1a70ea3de2e84f42d7 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Thu, 26 Mar 2026 10:49:14 -0400
Subject: [PATCH 01/20] add video to livekit calls

---
 src/app.css                                  |   4 +-
 src/app/components/VideoCallContent.svelte   | 131 +++++++++++++++++
 src/app/components/VideoCallVideo.svelte     |  27 ++++
 src/app/components/VoiceWidget.svelte        |  16 ++-
 src/app/voice.ts                             |  86 ++++++++++-
 src/lib/components/PageContent.svelte        |   7 +-
 src/routes/spaces/[relay]/[h]/+layout.svelte |  11 +-
 src/routes/spaces/[relay]/[h]/+page.svelte   | 144 ++++++++++++++++++-
 8 files changed, 411 insertions(+), 15 deletions(-)
 create mode 100644 src/app/components/VideoCallContent.svelte
 create mode 100644 src/app/components/VideoCallVideo.svelte

diff --git a/src/app.css b/src/app.css
index c0a85c58..c854c9bd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -400,7 +400,7 @@ progress[value]::-webkit-progress-value {
   transition: width 0.5s;
 }
 
-/* content width for fixed elements */
+/* Anchors for fixed overlays (compose, search, reply) — main scroll lives in Page / PageContent flow */
 
 .left-content {
   @apply md:left-[calc(18.5rem+var(--sail))];
@@ -415,7 +415,7 @@ body.keyboard-open .hide-on-keyboard {
 /* chat view */
 
 .chat__compose {
-  @apply z-compose relative mb-14 grow md:mb-0;
+  @apply relative z-compose mb-14 shrink-0 md:mb-0;
 }
 
 .chat__compose .chat__compose-inner {
diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
new file mode 100644
index 00000000..1da29813
--- /dev/null
+++ b/src/app/components/VideoCallContent.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {Track} from "livekit-client"
+  import {displayProfileByPubkey, loadProfile} from "@welshman/app"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import VideoCallVideo from "@app/components/VideoCallVideo.svelte"
+  import {
+    currentVoiceSession,
+    currentVoiceRoom,
+    videoCallContentActive,
+    videoCallLayoutRevision,
+    pubkeyFromLiveKitIdentity,
+  } from "@app/voice"
+
+  type Variant = "mobile" | "desktop-split" | "desktop-full"
+
+  type Props = {
+    variant: Variant
+    url: string
+    h: string
+    visible?: boolean
+    class?: string
+  }
+
+  type Tile = {
+    identity: string
+    isLocal: boolean
+    trackSid: string
+    attachable: Track | undefined
+  }
+
+  const {variant, url, h, visible = true, class: className = ""}: Props = $props()
+
+  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 tiles = $derived.by(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- re-run when remote video subscribes
+    $videoCallLayoutRevision
+    const session = $currentVoiceSession
+    if (!session || $currentVoiceRoom?.url !== url || $currentVoiceRoom?.h !== h) {
+      return []
+    }
+
+    const room = session.room
+    const out: Tile[] = []
+    const lp = room.localParticipant
+
+    if (session.cameraOn) {
+      const localPub = lp.getTrackPublication(Track.Source.Camera)
+      out.push({
+        identity: lp.identity,
+        isLocal: true,
+        trackSid: localPub?.trackSid ?? "local-camera",
+        attachable: localPub?.track,
+      })
+    }
+
+    for (const rp of room.remoteParticipants.values()) {
+      const pub = rp.getTrackPublication(Track.Source.Camera)
+      if (pub?.isSubscribed && pub.track) {
+        out.push({
+          identity: rp.identity,
+          isLocal: false,
+          trackSid: pub.trackSid,
+          attachable: pub.track,
+        })
+      }
+    }
+
+    return out
+  })
+
+  $effect(() => {
+    for (const t of tiles) {
+      const pk = pubkeyFromLiveKitIdentity(t.identity)
+      if (pk) loadProfile(pk)
+    }
+  })
+
+  const labelFor = (identity: string) => {
+    const pk = pubkeyFromLiveKitIdentity(identity)
+    return pk ? displayProfileByPubkey(pk) : "Unknown"
+  }
+
+  const showTileGrid = $derived(tiles.length > 0)
+</script>
+
+{#if showPanel && (showTileGrid || allowEmptyPanel)}
+  <div
+    class={cx(
+      variant === "mobile" &&
+        "cb ct cw z-compose bg-base-300/95 fixed inset-x-0 flex flex-col gap-2 overflow-y-auto p-2 md:hidden",
+      variant === "desktop-split" &&
+        "cb ct cw-split-video z-compose bg-base-300/95 fixed hidden flex-col gap-2 overflow-y-auto p-2 md:flex",
+      variant === "desktop-full" &&
+        "cb ct cw z-compose bg-base-300/95 fixed hidden flex-col gap-2 overflow-y-auto p-2 md:flex",
+      className,
+    )}>
+    {#if showTileGrid}
+      {#each tiles as tile (tile.trackSid + tile.identity)}
+        <div class="relative aspect-video overflow-hidden rounded-box bg-base-100 shadow-sm">
+          {#if tile.attachable}
+            <VideoCallVideo track={tile.attachable} muted={tile.isLocal} class="absolute inset-0" />
+          {:else}
+            <div class="absolute inset-0 flex items-center justify-center">
+              <ProfileCircle pubkey={pubkeyFromLiveKitIdentity(tile.identity)} {url} size={14} />
+            </div>
+          {/if}
+          <span
+            class="absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs">
+            {labelFor(tile.identity)}{tile.isLocal ? " (you)" : ""}
+          </span>
+        </div>
+      {/each}
+    {: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 video yet.</p>
+        <p class="text-xs">Use the camera control in the voice widget to share video.</p>
+      </div>
+    {/if}
+  </div>
+{/if}
diff --git a/src/app/components/VideoCallVideo.svelte b/src/app/components/VideoCallVideo.svelte
new file mode 100644
index 00000000..fbc3af89
--- /dev/null
+++ b/src/app/components/VideoCallVideo.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type {Track} from "livekit-client"
+  import cx from "classnames"
+
+  type Props = {
+    track: Track
+    muted?: boolean
+    class?: string
+  }
+
+  const {track, muted = true, class: className = ""}: Props = $props()
+
+  let el = $state<HTMLVideoElement | undefined>()
+
+  $effect(() => {
+    const v = el
+    const t = track
+    if (!v) return
+    t.attach(v)
+    return () => {
+      t.detach(v)
+    }
+  })
+</script>
+
+<video bind:this={el} class={cx("h-full w-full object-cover", className)} playsinline {muted}
+></video>
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 1ed8356e..64375bc9 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -6,6 +6,8 @@
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
   import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
+  import Videocamera from "@assets/icons/videocamera.svg?dataurl"
+  import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
   import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
@@ -31,6 +33,7 @@
     voiceState,
     leaveVoiceRoom,
     toggleMute,
+    toggleCamera,
     cancelJoinVoiceRoom,
   } from "@app/voice"
 
@@ -107,9 +110,16 @@
           <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
         </Button>
         <Button
-          data-tip="Audio settings"
-          class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
-          onclick={openAudioSettings}>
+          data-tip={$currentVoiceSession.cameraOn ? "Turn off camera" : "Turn on camera"}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.cameraOn
+            ? 'btn-ghost'
+            : 'btn-error'}"
+          onclick={toggleCamera}>
+          <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
+        </Button>
+        <Button>
+          data-tip="Audio settings" class="center tooltip tooltip-top btn btn-sm btn-square
+          btn-ghost" onclick={openAudioSettings}>
           <Icon icon={Settings} size={4} />
         </Button>
         <Button
diff --git a/src/app/voice.ts b/src/app/voice.ts
index 7fb1f241..da679853 100644
--- a/src/app/voice.ts
+++ b/src/app/voice.ts
@@ -32,6 +32,7 @@ export type VoiceSession = {
   h: string
   room: LiveKitRoom
   muted: boolean
+  cameraOn: boolean
 }
 
 export type Pubkey = string
@@ -82,6 +83,11 @@ export const currentVoiceRoom = writable<Room | undefined>(undefined)
 
 export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
 
+/** Bumps when remote video is subscribed/unsubscribed so layout/video UI can react. */
+export const videoCallLayoutRevision = writable(0)
+
+const bumpVideoCallLayoutRevision = () => videoCallLayoutRevision.update(n => n + 1)
+
 const addParticipant = (identity: string) => {
   participantPubkeyMap.update(m => {
     const next = new Map(m)
@@ -197,6 +203,7 @@ const setUpMicrophone = async (
 }
 
 const onRoomDisconnected = (reason?: DisconnectReason) => {
+  videoCallLayoutRevision.set(0)
   currentVoiceSession.set(undefined)
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
     voiceState.set(VoiceState.Disconnected)
@@ -216,11 +223,16 @@ const onTrackSubscribed = (track: Track) => {
     element.style.display = "none"
     document.body.appendChild(element)
     element.play().catch(() => {})
+  } else if (track.kind === Track.Kind.Video) {
+    bumpVideoCallLayoutRevision()
   }
 }
 
 const onTrackUnsubscribed = (track: Track) => {
   track.detach().forEach(el => el.remove())
+  if (track.kind === Track.Kind.Video) {
+    bumpVideoCallLayoutRevision()
+  }
 }
 
 const onActiveSpeakersChanged = (participants: {identity: string}[]) => {
@@ -301,7 +313,7 @@ export const joinVoiceRoom = async (
 
     const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)
 
-    currentVoiceSession.set({url, h, room: liveKitRoom, muted})
+    currentVoiceSession.set({url, h, room: liveKitRoom, muted, cameraOn: false})
     voiceState.set(VoiceState.Connected)
     playJoinSound()
   } catch (e) {
@@ -320,7 +332,16 @@ export const leaveVoiceRoom = async () => {
   const audio = new Audio("/leave-voice-room.mp3")
   audio.play().catch(() => {})
 
+  if (session.cameraOn) {
+    try {
+      await session.room.localParticipant.setCameraEnabled(false)
+    } catch {
+      /* pass */
+    }
+  }
+
   voiceState.set(VoiceState.Disconnected)
+  videoCallLayoutRevision.set(0)
   currentVoiceSession.set(undefined)
   session.room.disconnect()
   speakingParticipants.set([])
@@ -352,3 +373,66 @@ export const toggleMute = async () => {
     pushToast({theme: "error", message: "Could not access microphone"})
   }
 }
+
+const roomHasSubscribedRemoteCamera = (room: LiveKitRoom): boolean => {
+  for (const p of room.remoteParticipants.values()) {
+    const pub = p.getTrackPublication(Track.Source.Camera)
+    if (pub?.isSubscribed && pub.track) return true
+  }
+  return false
+}
+
+/** True when the connected session has local camera on or any subscribed remote camera track. */
+export const videoCallContentActive = derived(
+  [currentVoiceSession, voiceState, videoCallLayoutRevision],
+  ([$session, $state, _rev]) => {
+    if ($state !== VoiceState.Connected || !$session) return false
+    if ($session.cameraOn) return true
+    return roomHasSubscribedRemoteCamera($session.room)
+  },
+)
+
+/** Live camera tracks (local + remote) for layout automation. */
+const countLiveCameraFeeds = (session: VoiceSession): number => {
+  const room = session.room
+  let n = 0
+  const lp = room.localParticipant
+  if (session.cameraOn) {
+    const pub = lp.getTrackPublication(Track.Source.Camera)
+    if (pub?.track) n += 1
+  }
+  for (const rp of room.remoteParticipants.values()) {
+    const pub = rp.getTrackPublication(Track.Source.Camera)
+    if (pub?.isSubscribed && pub.track) n += 1
+  }
+  return n
+}
+
+export const videoTileCount = derived(
+  [currentVoiceSession, voiceState, videoCallLayoutRevision],
+  ([$session, $state, _rev]) => {
+    if ($state !== VoiceState.Connected || !$session) return 0
+    return countLiveCameraFeeds($session)
+  },
+)
+
+export const toggleCamera = async () => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+
+  const cameraOn = !session.cameraOn
+  if (!cameraOn) {
+    session.room.localParticipant.setCameraEnabled(false)
+    currentVoiceSession.set({...session, cameraOn})
+    bumpVideoCallLayoutRevision()
+    return
+  }
+
+  try {
+    await session.room.localParticipant.setCameraEnabled(true)
+    currentVoiceSession.set({...session, cameraOn})
+    bumpVideoCallLayoutRevision()
+  } catch (e) {
+    pushToast({theme: "error", message: "Could not access camera"})
+  }
+}
diff --git a/src/lib/components/PageContent.svelte b/src/lib/components/PageContent.svelte
index d73eebcc..f8d021fe 100644
--- a/src/lib/components/PageContent.svelte
+++ b/src/lib/components/PageContent.svelte
@@ -10,7 +10,12 @@
 
   let {children, element = $bindable(), ...props}: Props = $props()
 
-  const className = cx(props.class, "scroll-container z-feature overflow-y-auto overflow-x-hidden")
+  const className = $derived(
+    cx(
+      props.class,
+      "scroll-container z-feature flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden",
+    ),
+  )
 </script>
 
 <div {...props} bind:this={element} data-component="PageContent" class={className}>
diff --git a/src/routes/spaces/[relay]/[h]/+layout.svelte b/src/routes/spaces/[relay]/[h]/+layout.svelte
index efbb3754..bc9b64e1 100644
--- a/src/routes/spaces/[relay]/[h]/+layout.svelte
+++ b/src/routes/spaces/[relay]/[h]/+layout.svelte
@@ -1,7 +1,14 @@
-<script>
+<script lang="ts">
+  import type {Snippet} from "svelte"
   import {page} from "$app/stores"
+
+  type Props = {
+    children?: Snippet
+  }
+
+  const {children}: Props = $props()
 </script>
 
 {#key $page.url.searchParams.get("at")}
-  <slot />
+  {@render children?.()}
 {/key}
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index 48b6c327..1072166f 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -13,6 +13,7 @@
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
   import Login2 from "@assets/icons/login-3.svg?dataurl"
+  import cx from "classnames"
   import {slide, fade, fly} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
   import Divider from "@lib/components/Divider.svelte"
@@ -43,7 +44,8 @@
     userSettingsValues,
   } from "@app/core/state"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
-  import {VoiceState, voiceState} from "@app/voice"
+  import VideoCallContent from "@app/components/VideoCallContent.svelte"
+  import {VoiceState, currentVoiceRoom, videoTileCount, voiceState} from "@app/voice"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
   import {checked} from "@app/util/notifications"
@@ -56,6 +58,49 @@
   const url = decodeRelay(relay)
   const room = deriveRoom(url, h)
   const isVoiceRoom = $derived(getRoomType($room) === RoomType.Voice)
+
+  const voiceConnectedHere = $derived(
+    isVoiceRoom &&
+      $voiceState === VoiceState.Connected &&
+      $currentVoiceRoom?.url === url &&
+      $currentVoiceRoom?.h === h,
+  )
+
+  let mobileRoomPanel = $state<"chat" | "video">("chat")
+  let voiceDesktopPanel = $state<"chat" | "video" | "split">("split")
+
+  const showMobileVideoPanel = $derived(
+    isVoiceRoom && $voiceState === VoiceState.Connected && mobileRoomPanel === "video",
+  )
+
+  const pageContentHiddenDesktopVideoOnly = $derived(
+    voiceConnectedHere && voiceDesktopPanel === "video",
+  )
+
+  let prevVideoTileCount = $state(0)
+
+  $effect(() => {
+    if ($voiceState !== VoiceState.Connected) {
+      mobileRoomPanel = "chat"
+      voiceDesktopPanel = "chat"
+      prevVideoTileCount = 0
+      return
+    }
+
+    const here = isVoiceRoom && $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h
+    const n = $videoTileCount
+
+    if (!here) {
+      prevVideoTileCount = 0
+      return
+    }
+
+    if (prevVideoTileCount === 0 && n >= 1) {
+      voiceDesktopPanel = "video"
+      mobileRoomPanel = "video"
+    }
+    prevVideoTileCount = n
+  })
   const shouldProtect = canEnforceNip70(url)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
@@ -357,6 +402,40 @@
     <RoomName {url} {h} />
   {/snippet}
   {#snippet action()}
+    {#if voiceConnectedHere}
+      <div class="flex gap-1 md:hidden">
+        <Button
+          class={cx("btn btn-sm", mobileRoomPanel === "chat" && "btn-primary")}
+          onclick={() => (mobileRoomPanel = "chat")}>
+          Chat
+        </Button>
+        <Button
+          class={cx("btn btn-sm", mobileRoomPanel === "video" && "btn-primary")}
+          onclick={() => (mobileRoomPanel = "video")}>
+          Video
+        </Button>
+      </div>
+      <div class="hidden flex-wrap gap-1 md:flex">
+        <Button
+          data-tip="Messages only"
+          class={cx("btn btn-sm", voiceDesktopPanel === "chat" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "chat")}>
+          Chat
+        </Button>
+        <Button
+          data-tip="Video only"
+          class={cx("btn btn-sm", voiceDesktopPanel === "video" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "video")}>
+          Video
+        </Button>
+        <Button
+          data-tip="Video and chat side by side"
+          class={cx("btn btn-sm", voiceDesktopPanel === "split" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "split")}>
+          Video + Chat
+        </Button>
+      </div>
+    {/if}
     <SpaceSearch {url} {h} />
     <Button class="btn btn-neutral btn-sm btn-square" onclick={showRoomDetail}>
       <Icon size={4} icon={InfoCircle} />
@@ -364,7 +443,49 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
+<div
+  class={cx(
+    "flex min-h-0 flex-1 flex-col",
+    voiceConnectedHere && voiceDesktopPanel === "split" && "md:flex-row",
+  )}>
+  {#if voiceConnectedHere}
+    <VideoCallContent
+      variant="desktop-split"
+      {url}
+      {h}
+      visible={voiceDesktopPanel === "split"}
+      class="hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex" />
+    <VideoCallContent
+      variant="desktop-full"
+      {url}
+      {h}
+      visible={voiceDesktopPanel === "video"}
+      class="hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex" />
+  {/if}
+
+  <div
+    class={cx(
+      "flex min-h-0 min-w-0 flex-1 flex-col",
+      voiceConnectedHere && voiceDesktopPanel === "video" && "md:hidden",
+    )}>
+    {#if isVoiceRoom && $voiceState === VoiceState.Connected}
+      <VideoCallContent
+        variant="mobile"
+        {url}
+        {h}
+        visible={mobileRoomPanel === "video"}
+        class="md:hidden" />
+    {/if}
+
+    <PageContent
+      bind:element
+      onscroll={onScroll}
+      class={cx(
+        showMobileVideoPanel
+          ? "hidden flex-col-reverse pt-4 md:flex md:flex-col-reverse"
+          : "flex flex-col-reverse pt-4",
+        pageContentHiddenDesktopVideoOnly && "md:hidden",
+      )}>
   {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
     <div class="py-20">
       <div class="card2 col-8 m-auto max-w-md items-center text-center">
@@ -431,10 +552,15 @@
     </p>
   {/if}
   <div class="h-screen"></div>
-</PageContent>
+    </PageContent>
 
-<div class="chat__compose flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0">
-  <div class="chat__compose-inner min-w-0 flex-1">
+    <div
+      class={cx(
+        "chat__compose-zone chat__compose flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0",
+        pageContentHiddenDesktopVideoOnly && "md:hidden",
+        showMobileVideoPanel && "max-md:hidden",
+      )}>
+      <div class="chat__compose-inner min-w-0 flex-1">
     {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
       <!-- pass -->
     {:else if $room.isRestricted && $membershipStatus !== MembershipStatus.Granted}
@@ -481,10 +607,16 @@
     {/if}
   </div>
   {#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected}
-    <div class="hide-on-keyboard shrink-0 p-2 md:hidden">
+    <div
+      class={cx(
+        "hide-on-keyboard flex-shrink-0 p-2 md:hidden",
+        showMobileVideoPanel && "hidden",
+      )}>
       <VoiceWidget />
     </div>
   {/if}
+    </div>
+  </div>
 </div>
 
 {#if showScrollButton}
-- 
2.52.0


From 4e23fb3bbaa6671122b79559e7f8a733b2e66b19 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Thu, 26 Mar 2026 10:59:50 -0400
Subject: [PATCH 02/20] Add basic screen sharing

---
 src/app/components/VideoCallContent.svelte | 57 +++++++++++---
 src/app/components/VideoCallVideo.svelte   | 10 ++-
 src/app/components/VoiceWidget.svelte      | 11 +++
 src/app/voice.ts                           | 86 ++++++++++++++++++----
 4 files changed, 137 insertions(+), 27 deletions(-)

diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 1da29813..45f82737 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -27,6 +27,7 @@
     isLocal: boolean
     trackSid: string
     attachable: Track | undefined
+    source: Track.Source.Camera | Track.Source.ScreenShare
   }
 
   const {variant, url, h, visible = true, class: className = ""}: Props = $props()
@@ -60,17 +61,40 @@
         isLocal: true,
         trackSid: localPub?.trackSid ?? "local-camera",
         attachable: localPub?.track,
+        source: Track.Source.Camera,
+      })
+    }
+
+    if (session.screenShareOn) {
+      const localPub = lp.getTrackPublication(Track.Source.ScreenShare)
+      out.push({
+        identity: lp.identity,
+        isLocal: true,
+        trackSid: localPub?.trackSid ?? "local-screen",
+        attachable: localPub?.track,
+        source: Track.Source.ScreenShare,
       })
     }
 
     for (const rp of room.remoteParticipants.values()) {
-      const pub = rp.getTrackPublication(Track.Source.Camera)
-      if (pub?.isSubscribed && pub.track) {
+      const camPub = rp.getTrackPublication(Track.Source.Camera)
+      if (camPub?.isSubscribed && camPub.track) {
         out.push({
           identity: rp.identity,
           isLocal: false,
-          trackSid: pub.trackSid,
-          attachable: pub.track,
+          trackSid: camPub.trackSid,
+          attachable: camPub.track,
+          source: Track.Source.Camera,
+        })
+      }
+      const screenPub = rp.getTrackPublication(Track.Source.ScreenShare)
+      if (screenPub?.isSubscribed && screenPub.track) {
+        out.push({
+          identity: rp.identity,
+          isLocal: false,
+          trackSid: screenPub.trackSid,
+          attachable: screenPub.track,
+          source: Track.Source.ScreenShare,
         })
       }
     }
@@ -85,9 +109,10 @@
     }
   })
 
-  const labelFor = (identity: string) => {
+  const labelFor = (identity: string, source: Tile["source"]) => {
     const pk = pubkeyFromLiveKitIdentity(identity)
-    return pk ? displayProfileByPubkey(pk) : "Unknown"
+    const name = pk ? displayProfileByPubkey(pk) : "Unknown"
+    return source === Track.Source.ScreenShare ? `${name} · screen` : name
   }
 
   const showTileGrid = $derived(tiles.length > 0)
@@ -106,9 +131,17 @@
     )}>
     {#if showTileGrid}
       {#each tiles as tile (tile.trackSid + tile.identity)}
-        <div class="relative aspect-video overflow-hidden rounded-box bg-base-100 shadow-sm">
+        <div
+          class={cx(
+            "relative aspect-video overflow-hidden rounded-box shadow-sm",
+            tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
+          )}>
           {#if tile.attachable}
-            <VideoCallVideo track={tile.attachable} muted={tile.isLocal} class="absolute inset-0" />
+            <VideoCallVideo
+              track={tile.attachable}
+              muted={tile.isLocal}
+              fit={tile.source === Track.Source.ScreenShare ? "contain" : "cover"}
+              class="absolute inset-0" />
           {:else}
             <div class="absolute inset-0 flex items-center justify-center">
               <ProfileCircle pubkey={pubkeyFromLiveKitIdentity(tile.identity)} {url} size={14} />
@@ -116,15 +149,17 @@
           {/if}
           <span
             class="absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs">
-            {labelFor(tile.identity)}{tile.isLocal ? " (you)" : ""}
+            {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
           </span>
         </div>
       {/each}
     {: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 video yet.</p>
-        <p class="text-xs">Use the camera control in the voice widget to share video.</p>
+        <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>
       </div>
     {/if}
   </div>
diff --git a/src/app/components/VideoCallVideo.svelte b/src/app/components/VideoCallVideo.svelte
index fbc3af89..ec42547e 100644
--- a/src/app/components/VideoCallVideo.svelte
+++ b/src/app/components/VideoCallVideo.svelte
@@ -5,10 +5,11 @@
   type Props = {
     track: Track
     muted?: boolean
+    fit?: "cover" | "contain"
     class?: string
   }
 
-  const {track, muted = true, class: className = ""}: Props = $props()
+  const {track, muted = true, fit = "cover", class: className = ""}: Props = $props()
 
   let el = $state<HTMLVideoElement | undefined>()
 
@@ -23,5 +24,8 @@
   })
 </script>
 
-<video bind:this={el} class={cx("h-full w-full object-cover", className)} playsinline {muted}
-></video>
+<video
+  bind:this={el}
+  class={cx("h-full w-full", fit === "contain" ? "object-contain" : "object-cover", className)}
+  playsinline
+  {muted}></video>
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 64375bc9..8877ad48 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -8,6 +8,8 @@
   import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
   import Videocamera from "@assets/icons/videocamera.svg?dataurl"
   import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
+  import ScreenShare from "@assets/icons/screen-share.svg?dataurl"
+  import Screencast from "@assets/icons/screencast.svg?dataurl"
   import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
@@ -34,6 +36,7 @@
     leaveVoiceRoom,
     toggleMute,
     toggleCamera,
+    toggleScreenShare,
     cancelJoinVoiceRoom,
   } from "@app/voice"
 
@@ -122,6 +125,14 @@
           btn-ghost" onclick={openAudioSettings}>
           <Icon icon={Settings} size={4} />
         </Button>
+        <Button
+          data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.screenShareOn
+            ? 'btn-ghost'
+            : 'btn-error'}"
+          onclick={toggleScreenShare}>
+          <Icon icon={$currentVoiceSession.screenShareOn ? Screencast : ScreenShare} size={4} />
+        </Button>
         <Button
           data-tip="Leave room"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-error"
diff --git a/src/app/voice.ts b/src/app/voice.ts
index da679853..e100c93b 100644
--- a/src/app/voice.ts
+++ b/src/app/voice.ts
@@ -4,12 +4,13 @@
  */
 import {
   DisconnectReason,
+  LocalParticipant,
+  LocalTrackPublication,
   Room as LiveKitRoom,
   RoomEvent,
   Track,
   supportsAudioOutputSelection,
   type AudioCaptureOptions,
-  type LocalParticipant,
 } from "livekit-client"
 import {derived, get, writable} from "svelte/store"
 import {map, removeUndefined, uniqBy} from "@welshman/lib"
@@ -33,6 +34,7 @@ export type VoiceSession = {
   room: LiveKitRoom
   muted: boolean
   cameraOn: boolean
+  screenShareOn: boolean
 }
 
 export type Pubkey = string
@@ -253,6 +255,18 @@ const onParticipantDisconnected = (participant: {identity: string}) => {
   deleteParticipant(participant.identity)
 }
 
+const onLocalTrackUnpublished = (
+  publication: LocalTrackPublication,
+  participant: LocalParticipant,
+) => {
+  if (publication.source !== Track.Source.ScreenShare) return
+  const session = get(currentVoiceSession)
+  if (!session || participant.identity !== session.room.localParticipant.identity) return
+  if (!session.screenShareOn) return
+  currentVoiceSession.set({...session, screenShareOn: false})
+  bumpVideoCallLayoutRevision()
+}
+
 let joinAbortController: AbortController | undefined
 
 export const cancelJoinVoiceRoom = () => {
@@ -290,6 +304,7 @@ export const joinVoiceRoom = async (
     liveKitRoom.on(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
     liveKitRoom.on(RoomEvent.TrackSubscribed, onTrackSubscribed)
     liveKitRoom.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
+    liveKitRoom.on(RoomEvent.LocalTrackUnpublished, onLocalTrackUnpublished)
     liveKitRoom.on(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
 
     try {
@@ -313,7 +328,14 @@ export const joinVoiceRoom = async (
 
     const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)
 
-    currentVoiceSession.set({url, h, room: liveKitRoom, muted, cameraOn: false})
+    currentVoiceSession.set({
+      url,
+      h,
+      room: liveKitRoom,
+      muted,
+      cameraOn: false,
+      screenShareOn: false,
+    })
     voiceState.set(VoiceState.Connected)
     playJoinSound()
   } catch (e) {
@@ -340,6 +362,14 @@ export const leaveVoiceRoom = async () => {
     }
   }
 
+  if (session.screenShareOn) {
+    try {
+      await session.room.localParticipant.setScreenShareEnabled(false)
+    } catch {
+      /* pass */
+    }
+  }
+
   voiceState.set(VoiceState.Disconnected)
   videoCallLayoutRevision.set(0)
   currentVoiceSession.set(undefined)
@@ -374,26 +404,29 @@ export const toggleMute = async () => {
   }
 }
 
-const roomHasSubscribedRemoteCamera = (room: LiveKitRoom): boolean => {
+const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
+
+const roomHasSubscribedRemoteVisual = (room: LiveKitRoom): boolean => {
   for (const p of room.remoteParticipants.values()) {
-    const pub = p.getTrackPublication(Track.Source.Camera)
-    if (pub?.isSubscribed && pub.track) return true
+    for (const source of VISUAL_SOURCES) {
+      const pub = p.getTrackPublication(source)
+      if (pub?.isSubscribed && pub.track) return true
+    }
   }
   return false
 }
 
-/** True when the connected session has local camera on or any subscribed remote camera track. */
+/** True when local camera/screen share is on or any subscribed remote camera/screen track. */
 export const videoCallContentActive = derived(
   [currentVoiceSession, voiceState, videoCallLayoutRevision],
   ([$session, $state, _rev]) => {
     if ($state !== VoiceState.Connected || !$session) return false
-    if ($session.cameraOn) return true
-    return roomHasSubscribedRemoteCamera($session.room)
+    if ($session.cameraOn || $session.screenShareOn) return true
+    return roomHasSubscribedRemoteVisual($session.room)
   },
 )
 
-/** Live camera tracks (local + remote) for layout automation. */
-const countLiveCameraFeeds = (session: VoiceSession): number => {
+const countLiveVisualFeeds = (session: VoiceSession): number => {
   const room = session.room
   let n = 0
   const lp = room.localParticipant
@@ -401,9 +434,15 @@ const countLiveCameraFeeds = (session: VoiceSession): number => {
     const pub = lp.getTrackPublication(Track.Source.Camera)
     if (pub?.track) n += 1
   }
+  if (session.screenShareOn) {
+    const pub = lp.getTrackPublication(Track.Source.ScreenShare)
+    if (pub?.track) n += 1
+  }
   for (const rp of room.remoteParticipants.values()) {
-    const pub = rp.getTrackPublication(Track.Source.Camera)
-    if (pub?.isSubscribed && pub.track) n += 1
+    for (const source of VISUAL_SOURCES) {
+      const pub = rp.getTrackPublication(source)
+      if (pub?.isSubscribed && pub.track) n += 1
+    }
   }
   return n
 }
@@ -412,7 +451,7 @@ export const videoTileCount = derived(
   [currentVoiceSession, voiceState, videoCallLayoutRevision],
   ([$session, $state, _rev]) => {
     if ($state !== VoiceState.Connected || !$session) return 0
-    return countLiveCameraFeeds($session)
+    return countLiveVisualFeeds($session)
   },
 )
 
@@ -436,3 +475,24 @@ export const toggleCamera = async () => {
     pushToast({theme: "error", message: "Could not access camera"})
   }
 }
+
+export const toggleScreenShare = async () => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+
+  const screenShareOn = !session.screenShareOn
+  if (!screenShareOn) {
+    session.room.localParticipant.setScreenShareEnabled(false)
+    currentVoiceSession.set({...session, screenShareOn})
+    bumpVideoCallLayoutRevision()
+    return
+  }
+
+  try {
+    await session.room.localParticipant.setScreenShareEnabled(true)
+    currentVoiceSession.set({...session, screenShareOn})
+    bumpVideoCallLayoutRevision()
+  } catch (e) {
+    pushToast({theme: "error", message: "Could not start screen sharing"})
+  }
+}
-- 
2.52.0


From 9b080996d0ea51c0ab8735d67394407819f4e9dd Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Thu, 26 Mar 2026 11:36:52 -0400
Subject: [PATCH 03/20] Add a button to spotlight a video feed

---
 src/app/components/VideoCallContent.svelte | 137 ++++++++++++++++-----
 src/app/voice.ts                           |   9 ++
 2 files changed, 118 insertions(+), 28 deletions(-)

diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 45f82737..46829f05 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -2,6 +2,9 @@
   import cx from "classnames"
   import {Track} from "livekit-client"
   import {displayProfileByPubkey, loadProfile} from "@welshman/app"
+  import Pin from "@assets/icons/pin.svg?dataurl"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import VideoCallVideo from "@app/components/VideoCallVideo.svelte"
   import {
@@ -9,6 +12,8 @@
     currentVoiceRoom,
     videoCallContentActive,
     videoCallLayoutRevision,
+    videoPrimaryTileKey,
+    toggleVideoPrimaryTile,
     pubkeyFromLiveKitIdentity,
   } from "@app/voice"
 
@@ -30,6 +35,8 @@
     source: Track.Source.Camera | Track.Source.ScreenShare
   }
 
+  type TileLayout = "spotlight" | "default" | "strip"
+
   const {variant, url, h, visible = true, class: className = ""}: Props = $props()
 
   const roomMatches = $derived($currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h)
@@ -102,6 +109,33 @@
     return out
   })
 
+  /** Identity + source only — LiveKit can change trackSid after publish, which broke spotlight + stale-key effect. */
+  const tileKey = (t: Tile) => `${t.identity}\x1f${t.source}`
+
+  const primaryTile = $derived.by(() => {
+    const k = $videoPrimaryTileKey
+    if (k === undefined) return undefined
+    return tiles.find(t => tileKey(t) === k)
+  })
+
+  const secondaryTiles = $derived.by(() => {
+    const p = primaryTile
+    if (p === undefined) return tiles
+    const pk = tileKey(p)
+    return tiles.filter(t => tileKey(t) !== pk)
+  })
+
+  const useSpotlightLayout = $derived(primaryTile !== undefined)
+  const useMultiGrid = $derived(!useSpotlightLayout && tiles.length > 2)
+
+  $effect(() => {
+    const k = $videoPrimaryTileKey
+    if (k === undefined) return
+    if (!tiles.some(t => tileKey(t) === k)) {
+      videoPrimaryTileKey.set(undefined)
+    }
+  })
+
   $effect(() => {
     for (const t of tiles) {
       const pk = pubkeyFromLiveKitIdentity(t.identity)
@@ -116,43 +150,90 @@
   }
 
   const showTileGrid = $derived(tiles.length > 0)
+
+  const spotlightHandlerFor = (key: string) => () => {
+    toggleVideoPrimaryTile(key)
+  }
+
+  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",
+      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",
+      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",
+      className,
+    ),
+  )
 </script>
 
-{#if showPanel && (showTileGrid || allowEmptyPanel)}
+{#snippet videoTile(tile: Tile, layout: TileLayout)}
   <div
     class={cx(
-      variant === "mobile" &&
-        "cb ct cw z-compose bg-base-300/95 fixed inset-x-0 flex flex-col gap-2 overflow-y-auto p-2 md:hidden",
-      variant === "desktop-split" &&
-        "cb ct cw-split-video z-compose bg-base-300/95 fixed hidden flex-col gap-2 overflow-y-auto p-2 md:flex",
-      variant === "desktop-full" &&
-        "cb ct cw z-compose bg-base-300/95 fixed hidden flex-col gap-2 overflow-y-auto p-2 md:flex",
-      className,
+      "relative isolate overflow-hidden rounded-box shadow-sm",
+      layout === "spotlight" && "min-h-0 flex-1",
+      layout === "default" && "aspect-video w-full min-h-0",
+      layout === "strip" && "aspect-video w-44 shrink-0",
+      tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
+      $videoPrimaryTileKey === tileKey(tile) &&
+        "ring-2 ring-primary ring-offset-2 ring-offset-base-300",
     )}>
+    {#if tile.attachable}
+      <VideoCallVideo
+        track={tile.attachable}
+        muted={tile.isLocal}
+        fit={tile.source === Track.Source.ScreenShare ? "contain" : "cover"}
+        class="pointer-events-none absolute inset-0" />
+    {:else}
+      <div class="absolute inset-0 flex items-center justify-center">
+        <ProfileCircle pubkey={pubkeyFromLiveKitIdentity(tile.identity)} {url} size={14} />
+      </div>
+    {/if}
+    <span
+      class="pointer-events-none absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs">
+      {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
+    </span>
+    {#if tiles.length > 1}
+      <Button
+        data-tip={$videoPrimaryTileKey === tileKey(tile) ? "Exit spotlight" : "Spotlight"}
+        class="absolute right-1 top-1 z-20 btn btn-xs btn-circle btn-ghost bg-base-100/70"
+        onclick={spotlightHandlerFor(tileKey(tile))}>
+        <Icon icon={Pin} size={3} />
+      </Button>
+    {/if}
+  </div>
+{/snippet}
+
+{#if showPanel && (showTileGrid || allowEmptyPanel)}
+  <div class={panelChrome}>
     {#if showTileGrid}
-      {#each tiles as tile (tile.trackSid + tile.identity)}
-        <div
-          class={cx(
-            "relative aspect-video overflow-hidden rounded-box shadow-sm",
-            tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
-          )}>
-          {#if tile.attachable}
-            <VideoCallVideo
-              track={tile.attachable}
-              muted={tile.isLocal}
-              fit={tile.source === Track.Source.ScreenShare ? "contain" : "cover"}
-              class="absolute inset-0" />
-          {:else}
-            <div class="absolute inset-0 flex items-center justify-center">
-              <ProfileCircle pubkey={pubkeyFromLiveKitIdentity(tile.identity)} {url} size={14} />
+      {#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}
-          <span
-            class="absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs">
-            {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
-          </span>
         </div>
-      {/each}
+      {:else if useMultiGrid}
+        <div
+          class="grid min-h-0 flex-1 auto-rows-fr grid-cols-1 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">
diff --git a/src/app/voice.ts b/src/app/voice.ts
index e100c93b..6fd60293 100644
--- a/src/app/voice.ts
+++ b/src/app/voice.ts
@@ -88,6 +88,13 @@ export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
 /** Bumps when remote video is subscribed/unsubscribed so layout/video UI can react. */
 export const videoCallLayoutRevision = writable(0)
 
+/** Spotlight tile id — must match VideoCallContent `tileKey` (identity + source, not trackSid). */
+export const videoPrimaryTileKey = writable<string | undefined>(undefined)
+
+export const toggleVideoPrimaryTile = (key: string) => {
+  videoPrimaryTileKey.update(k => (k === key ? undefined : key))
+}
+
 const bumpVideoCallLayoutRevision = () => videoCallLayoutRevision.update(n => n + 1)
 
 const addParticipant = (identity: string) => {
@@ -206,6 +213,7 @@ const setUpMicrophone = async (
 
 const onRoomDisconnected = (reason?: DisconnectReason) => {
   videoCallLayoutRevision.set(0)
+  videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
     voiceState.set(VoiceState.Disconnected)
@@ -372,6 +380,7 @@ export const leaveVoiceRoom = async () => {
 
   voiceState.set(VoiceState.Disconnected)
   videoCallLayoutRevision.set(0)
+  videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
   session.room.disconnect()
   speakingParticipants.set([])
-- 
2.52.0


From 7c27846d0d52c4f9e6751160178c7f3ff54badc7 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Thu, 26 Mar 2026 11:42:08 -0400
Subject: [PATCH 04/20] Improve pinned video layout

---
 src/app/components/VideoCallContent.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 46829f05..51114a05 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -222,7 +222,7 @@
         </div>
       {:else if useMultiGrid}
         <div
-          class="grid min-h-0 flex-1 auto-rows-fr grid-cols-1 gap-2 overflow-y-auto sm:grid-cols-2">
+          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}
-- 
2.52.0


From 8f6f628bd7652413c73716381656721fa6c8dac3 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Thu, 26 Mar 2026 11:44:01 -0400
Subject: [PATCH 05/20] Change screen sharing icon

---
 src/app/components/VoiceWidget.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 8877ad48..f4630e73 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -8,8 +8,7 @@
   import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
   import Videocamera from "@assets/icons/videocamera.svg?dataurl"
   import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
-  import ScreenShare from "@assets/icons/screen-share.svg?dataurl"
-  import Screencast from "@assets/icons/screencast.svg?dataurl"
+  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 CloseCircle from "@assets/icons/close-circle.svg?dataurl"
@@ -131,7 +130,7 @@
             ? 'btn-ghost'
             : 'btn-error'}"
           onclick={toggleScreenShare}>
-          <Icon icon={$currentVoiceSession.screenShareOn ? Screencast : ScreenShare} size={4} />
+          <Icon icon={Monitor} size={4} />
         </Button>
         <Button
           data-tip="Leave room"
-- 
2.52.0


From 236b9e011ef980c209705324b07811b5cfe66181 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Wed, 1 Apr 2026 14:22:14 -0400
Subject: [PATCH 06/20] Add settings button to configure audio devices in call

---
 src/app/components/VoiceCallAudioSettingsDialog.svelte | 3 +++
 src/app/components/VoiceWidget.svelte                  | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/src/app/components/VoiceCallAudioSettingsDialog.svelte b/src/app/components/VoiceCallAudioSettingsDialog.svelte
index c8afccc0..56c31d1e 100644
--- a/src/app/components/VoiceCallAudioSettingsDialog.svelte
+++ b/src/app/components/VoiceCallAudioSettingsDialog.svelte
@@ -5,7 +5,10 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+<<<<<<< HEAD
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+=======
+>>>>>>> 462086da (Add settings button to configure audio devices in call)
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import {
     currentVoiceSession,
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index f4630e73..8a2ff8b1 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -132,6 +132,12 @@
           onclick={toggleScreenShare}>
           <Icon icon={Monitor} size={4} />
         </Button>
+        <Button
+          data-tip="Audio settings"
+          class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
+          onclick={openAudioSettings}>
+          <Icon icon={Settings} size={4} />
+        </Button>
         <Button
           data-tip="Leave room"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-error"
-- 
2.52.0


From 9e4ac1667336eae1978f10c549bcef947fc0cfb7 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Fri, 3 Apr 2026 09:19:32 -0400
Subject: [PATCH 07/20] Fix merge artifacts

---
 src/app/components/VoiceCallAudioSettingsDialog.svelte | 3 ---
 src/app/components/VoiceWidget.svelte                  | 5 -----
 2 files changed, 8 deletions(-)

diff --git a/src/app/components/VoiceCallAudioSettingsDialog.svelte b/src/app/components/VoiceCallAudioSettingsDialog.svelte
index 56c31d1e..c8afccc0 100644
--- a/src/app/components/VoiceCallAudioSettingsDialog.svelte
+++ b/src/app/components/VoiceCallAudioSettingsDialog.svelte
@@ -5,10 +5,7 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
-<<<<<<< HEAD
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-=======
->>>>>>> 462086da (Add settings button to configure audio devices in call)
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import {
     currentVoiceSession,
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 8a2ff8b1..89d2c0b5 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -119,11 +119,6 @@
           onclick={toggleCamera}>
           <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
         </Button>
-        <Button>
-          data-tip="Audio settings" class="center tooltip tooltip-top btn btn-sm btn-square
-          btn-ghost" onclick={openAudioSettings}>
-          <Icon icon={Settings} size={4} />
-        </Button>
         <Button
           data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
           class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.screenShareOn
-- 
2.52.0


From 2661f449ddb1bb2745371a42dc451ee10107475b Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Fri, 3 Apr 2026 09:23:53 -0400
Subject: [PATCH 08/20] Add video settings to VoiceCallAudioSettingsDialog

---
 .../VoiceCallAudioSettingsDialog.svelte       | 45 ++++++++++++++++---
 src/app/components/VoiceWidget.svelte         |  6 +--
 src/app/voice.ts                              |  4 ++
 3 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/app/components/VoiceCallAudioSettingsDialog.svelte b/src/app/components/VoiceCallAudioSettingsDialog.svelte
index c8afccc0..5f86ec26 100644
--- a/src/app/components/VoiceCallAudioSettingsDialog.svelte
+++ b/src/app/components/VoiceCallAudioSettingsDialog.svelte
@@ -26,8 +26,10 @@
 
   let audioInputs = $state<MediaDeviceInfo[]>([])
   let audioOutputs = $state<MediaDeviceInfo[]>([])
+  let videoInputs = $state<MediaDeviceInfo[]>([])
   let selectedInput = $state("")
   let selectedOutput = $state("")
+  let selectedVideo = $state("")
 
   const loadDevices = async () => {
     if (!navigator.mediaDevices?.enumerateDevices) return
@@ -35,16 +37,25 @@
       const devices = await navigator.mediaDevices.enumerateDevices()
       audioInputs = devices.filter(d => d.kind === "audioinput")
       audioOutputs = devices.filter(d => d.kind === "audiooutput")
+      videoInputs = devices.filter(d => d.kind === "videoinput")
     } catch {
       audioInputs = []
       audioOutputs = []
+      videoInputs = []
     }
   }
 
   $effect(() => {
-    loadDevices()
-    navigator.mediaDevices?.addEventListener?.("devicechange", loadDevices)
-    return () => navigator.mediaDevices?.removeEventListener?.("devicechange", loadDevices)
+    void loadDevices()
+    const md = navigator.mediaDevices
+    if (!md?.addEventListener) return
+    const onDeviceChange = () => {
+      void loadDevices()
+    }
+    md.addEventListener("devicechange", onDeviceChange)
+    return () => {
+      md.removeEventListener("devicechange", onDeviceChange)
+    }
   })
 
   $effect(() => {
@@ -55,6 +66,7 @@
     }
     selectedInput = selectValueForActiveDevice(session, DeviceKind.AudioInput)
     selectedOutput = selectValueForActiveDevice(session, DeviceKind.AudioOutput)
+    selectedVideo = selectValueForActiveDevice(session, DeviceKind.VideoInput)
   })
 
   const onInputChange = () => {
@@ -65,6 +77,10 @@
     void switchVoiceActiveDevice(DeviceKind.AudioOutput, selectedOutput)
   }
 
+  const onVideoChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.VideoInput, selectedVideo)
+  }
+
   const onDone = () => {
     popModal()
   }
@@ -76,8 +92,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      <ModalTitle>Audio settings</ModalTitle>
-      <ModalSubtitle>Choose microphone and speaker for this call.</ModalSubtitle>
+      <ModalTitle>Call settings</ModalTitle>
+      <ModalSubtitle>Microphone, speaker, and camera for this call.</ModalSubtitle>
     </ModalHeader>
     <div class="flex flex-col gap-4 pt-2">
       <FieldInline>
@@ -120,6 +136,25 @@
           {/snippet}
         </FieldInline>
       {/if}
+      <FieldInline>
+        {#snippet label()}
+          <p>Camera</p>
+        {/snippet}
+        {#snippet input()}
+          <select
+            class="select select-bordered w-full"
+            bind:value={selectedVideo}
+            onchange={onVideoChange}
+            aria-label="Camera">
+            <option value="">Default camera</option>
+            {#each videoInputs as d (d.deviceId)}
+              <option value={d.deviceId}>
+                {d.label || `Camera ${d.deviceId.slice(0, 8)}…`}
+              </option>
+            {/each}
+          </select>
+        {/snippet}
+      </FieldInline>
     </div>
   </ModalBody>
   <ModalFooter>
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 89d2c0b5..aa2b995c 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -71,7 +71,7 @@
     pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
 
-  const openAudioSettings = () => {
+  const openCallSettings = () => {
     pushModal(VoiceCallAudioSettingsDialog)
   }
 </script>
@@ -128,9 +128,9 @@
           <Icon icon={Monitor} size={4} />
         </Button>
         <Button
-          data-tip="Audio settings"
+          data-tip="Call settings"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
-          onclick={openAudioSettings}>
+          onclick={openCallSettings}>
           <Icon icon={Settings} size={4} />
         </Button>
         <Button
diff --git a/src/app/voice.ts b/src/app/voice.ts
index 6fd60293..81e7e510 100644
--- a/src/app/voice.ts
+++ b/src/app/voice.ts
@@ -54,6 +54,7 @@ const LIVEKIT_DEFAULT_DEVICE_ID = "default"
 export enum DeviceKind {
   AudioInput = "audioinput",
   AudioOutput = "audiooutput",
+  VideoInput = "videoinput",
 }
 
 export const switchVoiceActiveDevice = async (
@@ -74,6 +75,9 @@ export const switchVoiceActiveDevice = async (
       case DeviceKind.AudioOutput:
         label = "speaker"
         break
+      case DeviceKind.VideoInput:
+        label = "camera"
+        break
     }
     pushToast({theme: "error", message: `Error changing ${label}`})
   }
-- 
2.52.0


From 1ccd6070dfcba5281670c14d1f71653851e8bf6a Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Fri, 3 Apr 2026 09:58:00 -0400
Subject: [PATCH 09/20] Style voice widget icons to be less red

---
 src/app/components/VoiceWidget.svelte | 41 +++++++++++++++++++--------
 src/app/voice.ts                      | 10 +++++++
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index aa2b995c..7270b930 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -3,9 +3,9 @@
   import {fly} from "svelte/transition"
   import {goto} from "$app/navigation"
   import {page} from "$app/stores"
+  import cx from "classnames"
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
-  import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
   import Videocamera from "@assets/icons/videocamera.svg?dataurl"
   import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
   import Monitor from "@assets/icons/monitor.svg?dataurl"
@@ -32,6 +32,7 @@
     currentVoiceSession,
     currentVoiceRoom,
     voiceState,
+    isLocalSpeaking,
     leaveVoiceRoom,
     toggleMute,
     toggleCamera,
@@ -74,8 +75,21 @@
   const openCallSettings = () => {
     pushModal(VoiceCallAudioSettingsDialog)
   }
+
+  const mediaToggleClass = "center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
 </script>
 
+{#snippet mutedSlash(show: boolean)}
+  {#if show}
+    <span
+      class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
+      aria-hidden="true">
+      <span class="h-[1.3px] w-[150%] max-w-none shrink-0 -rotate-45 rounded-full bg-current"
+      ></span>
+    </span>
+  {/if}
+{/snippet}
+
 {#if targetRoom}
   <div
     in:fly={{y: 60, duration: 350}}
@@ -93,7 +107,7 @@
         {roomName} / {spaceName}
       </span>
     </div>
-    <div class="flex items-center gap-1">
+    <div class="flex items-center gap-2">
       {#if $voiceState === VoiceState.Joining}
         <span class="loading loading-spinner loading-sm"></span>
         <Button
@@ -105,25 +119,28 @@
       {:else if $voiceState === VoiceState.Connected && $currentVoiceSession}
         <Button
           data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
-          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.muted
-            ? 'btn-error'
-            : 'btn-ghost'}"
+          class={cx(
+            mediaToggleClass,
+            "overflow-visible",
+            !$currentVoiceSession.muted && $isLocalSpeaking && "text-primary",
+            $currentVoiceSession.muted &&
+              "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
+          )}
           onclick={toggleMute}>
-          <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
+          <span class="relative inline-flex items-center justify-center overflow-visible">
+            <Icon icon={Microphone} size={4} />
+            {@render mutedSlash($currentVoiceSession.muted)}
+          </span>
         </Button>
         <Button
           data-tip={$currentVoiceSession.cameraOn ? "Turn off camera" : "Turn on camera"}
-          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.cameraOn
-            ? 'btn-ghost'
-            : 'btn-error'}"
+          class={cx(mediaToggleClass, $currentVoiceSession.cameraOn && "text-primary")}
           onclick={toggleCamera}>
           <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
         </Button>
         <Button
           data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
-          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.screenShareOn
-            ? 'btn-ghost'
-            : 'btn-error'}"
+          class={cx(mediaToggleClass, $currentVoiceSession.screenShareOn && "text-primary")}
           onclick={toggleScreenShare}>
           <Icon icon={Monitor} size={4} />
         </Button>
diff --git a/src/app/voice.ts b/src/app/voice.ts
index 81e7e510..60248ed9 100644
--- a/src/app/voice.ts
+++ b/src/app/voice.ts
@@ -135,6 +135,16 @@ export const isParticipantSpeaking = derived(
     $participants.some(sp => participantKey(sp) === participantKey(p)),
 )
 
+/** True when the local user is in LiveKit’s active-speakers list (currently talking). */
+export const isLocalSpeaking = derived(
+  [currentVoiceSession, speakingParticipants],
+  ([$session, $speaking]) => {
+    if (!$session?.room) return false
+    const local = participantFromLiveKitIdentity($session.room.localParticipant.identity)
+    return $speaking.some(sp => participantKey(sp) === participantKey(local))
+  },
+)
+
 const fetchLivekitToken = async (
   url: string,
   groupId: string,
-- 
2.52.0


From b545f225a5a901eb489c4a658ebf64b2ffe1a8d6 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Fri, 3 Apr 2026 10:01:13 -0400
Subject: [PATCH 10/20] Style pin icon more better

---
 src/app/components/VideoCallContent.svelte | 11 +++++++----
 src/lib/components/Button.svelte           |  1 +
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 51114a05..ca1eaa82 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -176,8 +176,6 @@
       layout === "default" && "aspect-video w-full min-h-0",
       layout === "strip" && "aspect-video w-44 shrink-0",
       tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
-      $videoPrimaryTileKey === tileKey(tile) &&
-        "ring-2 ring-primary ring-offset-2 ring-offset-base-300",
     )}>
     {#if tile.attachable}
       <VideoCallVideo
@@ -195,9 +193,14 @@
       {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
     </span>
     {#if tiles.length > 1}
+      {@const pinned = $videoPrimaryTileKey === tileKey(tile)}
       <Button
-        data-tip={$videoPrimaryTileKey === tileKey(tile) ? "Exit spotlight" : "Spotlight"}
-        class="absolute right-1 top-1 z-20 btn btn-xs btn-circle btn-ghost bg-base-100/70"
+        data-tip={pinned ? "Exit spotlight" : "Spotlight"}
+        aria-pressed={pinned}
+        class={cx(
+          "absolute right-1 top-1 z-20 btn btn-xs btn-square btn-ghost",
+          pinned ? "btn-active bg-primary/25 text-primary" : "bg-base-100/70",
+        )}
         onclick={spotlightHandlerFor(tileKey(tile))}>
         <Icon icon={Pin} size={3} />
       </Button>
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 4184b172..21f35430 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -14,6 +14,7 @@
     style?: string
     disabled?: boolean
     "data-tip"?: string
+    "aria-pressed"?: boolean
   } = $props()
 
   const className = $derived(`text-left ${restProps.class}`)
-- 
2.52.0


From 31d7041e5c5f67889aa9b4ff1d8c0b544ef786a4 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Fri, 3 Apr 2026 10:36:14 -0400
Subject: [PATCH 11/20] rework video + text chat display controls

---
 src/app.css                                |  11 +++
 src/app/components/VideoCallContent.svelte | 101 +++++++++++----------
 src/app/components/VoiceWidget.svelte      |  69 ++++++++++++--
 src/app/voice.ts                           |  33 +++----
 src/routes/spaces/[relay]/[h]/+page.svelte |  68 ++++----------
 5 files changed, 158 insertions(+), 124 deletions(-)

diff --git a/src/app.css b/src/app.css
index c854c9bd..412b4232 100644
--- a/src/app.css
+++ b/src/app.css
@@ -22,6 +22,17 @@
   @apply pl-sai pr-sai;
 }
 
+/* root */
+
+:root {
+  font-family: Lato;
+  --sait: var(--safe-area-inset-top, env(safe-area-inset-top));
+  --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
+  --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
+  --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
+  --video-call-panel-bg: #181e24;
+}
+
 @utility py-sai {
   @apply pt-sai pb-sai;
 }
diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index ca1eaa82..6fda6390 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/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}
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 7270b930..dfcdebb6 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/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
diff --git a/src/app/voice.ts b/src/app/voice.ts
index 60248ed9..2e35ac61 100644
--- a/src/app/voice.ts
+++ b/src/app/voice.ts
@@ -87,6 +87,17 @@ export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
 
 export const currentVoiceRoom = writable<Room | undefined>(undefined)
 
+/** Mobile room UI: full-screen chat vs video (see VoiceWidget layout toggle). */
+export const voiceMobileRoomPanel = writable<"chat" | "video">("chat")
+
+/** Desktop room UI: messages only, video only, or split (see VoiceWidget layout toggle). */
+export const voiceDesktopRoomPanel = writable<"chat" | "video" | "split">("split")
+
+const resetVoiceRoomPanels = () => {
+  voiceMobileRoomPanel.set("chat")
+  voiceDesktopRoomPanel.set("chat")
+}
+
 export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
 
 /** Bumps when remote video is subscribed/unsubscribed so layout/video UI can react. */
@@ -229,6 +240,7 @@ const onRoomDisconnected = (reason?: DisconnectReason) => {
   videoCallLayoutRevision.set(0)
   videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
+  resetVoiceRoomPanels()
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
     voiceState.set(VoiceState.Disconnected)
     const message =
@@ -396,6 +408,7 @@ export const leaveVoiceRoom = async () => {
   videoCallLayoutRevision.set(0)
   videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
+  resetVoiceRoomPanels()
   session.room.disconnect()
   speakingParticipants.set([])
   participantPubkeyMap.set(new Map())
@@ -429,26 +442,6 @@ export const toggleMute = async () => {
 
 const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
 
-const roomHasSubscribedRemoteVisual = (room: LiveKitRoom): boolean => {
-  for (const p of room.remoteParticipants.values()) {
-    for (const source of VISUAL_SOURCES) {
-      const pub = p.getTrackPublication(source)
-      if (pub?.isSubscribed && pub.track) return true
-    }
-  }
-  return false
-}
-
-/** True when local camera/screen share is on or any subscribed remote camera/screen track. */
-export const videoCallContentActive = derived(
-  [currentVoiceSession, voiceState, videoCallLayoutRevision],
-  ([$session, $state, _rev]) => {
-    if ($state !== VoiceState.Connected || !$session) return false
-    if ($session.cameraOn || $session.screenShareOn) return true
-    return roomHasSubscribedRemoteVisual($session.room)
-  },
-)
-
 const countLiveVisualFeeds = (session: VoiceSession): number => {
   const room = session.room
   let n = 0
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index 1072166f..5fefdc54 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -45,7 +45,14 @@
   } from "@app/core/state"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import VideoCallContent from "@app/components/VideoCallContent.svelte"
-  import {VoiceState, currentVoiceRoom, videoTileCount, voiceState} from "@app/voice"
+  import {
+    VoiceState,
+    currentVoiceRoom,
+    videoTileCount,
+    voiceMobileRoomPanel,
+    voiceDesktopRoomPanel,
+    voiceState,
+  } from "@app/voice"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
   import {checked} from "@app/util/notifications"
@@ -66,23 +73,20 @@
       $currentVoiceRoom?.h === h,
   )
 
-  let mobileRoomPanel = $state<"chat" | "video">("chat")
-  let voiceDesktopPanel = $state<"chat" | "video" | "split">("split")
-
   const showMobileVideoPanel = $derived(
-    isVoiceRoom && $voiceState === VoiceState.Connected && mobileRoomPanel === "video",
+    isVoiceRoom && $voiceState === VoiceState.Connected && $voiceMobileRoomPanel === "video",
   )
 
   const pageContentHiddenDesktopVideoOnly = $derived(
-    voiceConnectedHere && voiceDesktopPanel === "video",
+    voiceConnectedHere && $voiceDesktopRoomPanel === "video",
   )
 
   let prevVideoTileCount = $state(0)
 
   $effect(() => {
     if ($voiceState !== VoiceState.Connected) {
-      mobileRoomPanel = "chat"
-      voiceDesktopPanel = "chat"
+      voiceMobileRoomPanel.set("chat")
+      voiceDesktopRoomPanel.set("chat")
       prevVideoTileCount = 0
       return
     }
@@ -96,8 +100,8 @@
     }
 
     if (prevVideoTileCount === 0 && n >= 1) {
-      voiceDesktopPanel = "video"
-      mobileRoomPanel = "video"
+      voiceDesktopRoomPanel.set("video")
+      voiceMobileRoomPanel.set("video")
     }
     prevVideoTileCount = n
   })
@@ -402,40 +406,6 @@
     <RoomName {url} {h} />
   {/snippet}
   {#snippet action()}
-    {#if voiceConnectedHere}
-      <div class="flex gap-1 md:hidden">
-        <Button
-          class={cx("btn btn-sm", mobileRoomPanel === "chat" && "btn-primary")}
-          onclick={() => (mobileRoomPanel = "chat")}>
-          Chat
-        </Button>
-        <Button
-          class={cx("btn btn-sm", mobileRoomPanel === "video" && "btn-primary")}
-          onclick={() => (mobileRoomPanel = "video")}>
-          Video
-        </Button>
-      </div>
-      <div class="hidden flex-wrap gap-1 md:flex">
-        <Button
-          data-tip="Messages only"
-          class={cx("btn btn-sm", voiceDesktopPanel === "chat" && "btn-primary")}
-          onclick={() => (voiceDesktopPanel = "chat")}>
-          Chat
-        </Button>
-        <Button
-          data-tip="Video only"
-          class={cx("btn btn-sm", voiceDesktopPanel === "video" && "btn-primary")}
-          onclick={() => (voiceDesktopPanel = "video")}>
-          Video
-        </Button>
-        <Button
-          data-tip="Video and chat side by side"
-          class={cx("btn btn-sm", voiceDesktopPanel === "split" && "btn-primary")}
-          onclick={() => (voiceDesktopPanel = "split")}>
-          Video + Chat
-        </Button>
-      </div>
-    {/if}
     <SpaceSearch {url} {h} />
     <Button class="btn btn-neutral btn-sm btn-square" onclick={showRoomDetail}>
       <Icon size={4} icon={InfoCircle} />
@@ -446,34 +416,34 @@
 <div
   class={cx(
     "flex min-h-0 flex-1 flex-col",
-    voiceConnectedHere && voiceDesktopPanel === "split" && "md:flex-row",
+    voiceConnectedHere && $voiceDesktopRoomPanel === "split" && "md:flex-row",
   )}>
   {#if voiceConnectedHere}
     <VideoCallContent
       variant="desktop-split"
       {url}
       {h}
-      visible={voiceDesktopPanel === "split"}
+      visible={$voiceDesktopRoomPanel === "split"}
       class="hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex" />
     <VideoCallContent
       variant="desktop-full"
       {url}
       {h}
-      visible={voiceDesktopPanel === "video"}
+      visible={$voiceDesktopRoomPanel === "video"}
       class="hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex" />
   {/if}
 
   <div
     class={cx(
       "flex min-h-0 min-w-0 flex-1 flex-col",
-      voiceConnectedHere && voiceDesktopPanel === "video" && "md:hidden",
+      voiceConnectedHere && $voiceDesktopRoomPanel === "video" && "md:hidden",
     )}>
     {#if isVoiceRoom && $voiceState === VoiceState.Connected}
       <VideoCallContent
         variant="mobile"
         {url}
         {h}
-        visible={mobileRoomPanel === "video"}
+        visible={$voiceMobileRoomPanel === "video"}
         class="md:hidden" />
     {/if}
 
-- 
2.52.0


From 7353dab8c2fda3c98b39e4a0203b075b01ba82c5 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Fri, 3 Apr 2026 10:41:05 -0400
Subject: [PATCH 12/20] Allow clicking voice widget to go back to call

---
 src/app/components/VoiceWidget.svelte | 56 +++++++++++++++++----------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index dfcdebb6..41664f4d 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -76,6 +76,14 @@
     pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
 
+  const goToRoom = () => {
+    if (!targetRoom) return
+    const path = makeRoomPath(targetRoom.url, targetRoom.h)
+    if ($page.url.pathname !== path) {
+      void goto(path)
+    }
+  }
+
   const openCallSettings = () => {
     pushModal(VoiceCallAudioSettingsDialog)
   }
@@ -138,27 +146,33 @@
     in:fly={{y: 60, duration: 350}}
     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">
-      <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 class="flex items-start justify-between gap-2">
+      <button
+        type="button"
+        class="min-w-0 flex-1 rounded-lg px-1 py-0.5 text-left outline-none hover:bg-base-200/60 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-base-100"
+        onclick={goToRoom}
+        aria-label="Open room {roomName}">
+        <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}
+          <span class="ellipsize text-xs opacity-70">
+            {roomName} / {spaceName}
+          </span>
+        </div>
+      </button>
+      {#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>
     <div class="flex flex-wrap items-center gap-2">
       {#if $voiceState === VoiceState.Joining}
-- 
2.52.0


From ceca21e867881d065dc0dda4631a435dbc573e0d Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Fri, 3 Apr 2026 10:51:28 -0400
Subject: [PATCH 13/20] Show unread indicator on chat icon in VoiceWidget

---
 src/app/components/VoiceWidget.svelte | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 41664f4d..96ea123f 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {readable} from "svelte/store"
-  import {fly} from "svelte/transition"
+  import {fade, fly} from "svelte/transition"
   import {browser} from "$app/environment"
   import {goto} from "$app/navigation"
   import {page} from "$app/stores"
@@ -28,6 +28,7 @@
     type Room,
   } from "@app/core/state"
   import {pushModal} from "@app/util/modal"
+  import {notifications} from "@app/util/notifications"
   import {makeRoomPath} from "@app/util/routes"
   import {
     VoiceState,
@@ -127,6 +128,10 @@
     }
   }
 
+  const chatUnread = $derived(
+    targetRoom !== undefined && $notifications.has(makeRoomPath(targetRoom.url, targetRoom.h)),
+  )
+
   const mediaToggleClass = "center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
 </script>
 
@@ -167,10 +172,22 @@
       </button>
       {#if showVoiceLayoutToggle}
         <Button
-          data-tip="Toggle full-screen chat ↔ video (mobile) or split view (desktop)"
-          class={cx(mediaToggleClass, "shrink-0", layoutToggleActive && "text-primary")}
+          data-tip="Toggle Chat"
+          class={cx(
+            mediaToggleClass,
+            "relative shrink-0 overflow-visible",
+            layoutToggleActive && "text-primary",
+          )}
           onclick={onLayoutToggle}>
-          <Icon icon={ChatRound} size={4} />
+          <span class="relative inline-flex">
+            <Icon icon={ChatRound} size={4} />
+            {#if chatUnread}
+              <span
+                transition:fade={{duration: 150}}
+                class="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-primary ring-2 ring-base-100"
+                aria-hidden="true"></span>
+            {/if}
+          </span>
         </Button>
       {/if}
     </div>
-- 
2.52.0


From 4d90092f4b495bc478a4aa1b2394a54c8a258d03 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Mon, 6 Apr 2026 10:46:02 -0400
Subject: [PATCH 14/20] Hide screen share button on ios and android

---
 src/app/components/VoiceWidget.svelte | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 96ea123f..6287f106 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -15,6 +15,7 @@
   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 {Capacitor} from "@capacitor/core"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import VoiceCallAudioSettingsDialog from "@app/components/VoiceCallAudioSettingsDialog.svelte"
@@ -222,12 +223,14 @@
           onclick={toggleCamera}>
           <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
         </Button>
-        <Button
-          data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
-          class={cx(mediaToggleClass, $currentVoiceSession.screenShareOn && "text-primary")}
-          onclick={toggleScreenShare}>
-          <Icon icon={Monitor} size={4} />
-        </Button>
+        {#if !Capacitor.isNativePlatform()}
+          <Button
+            data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
+            class={cx(mediaToggleClass, $currentVoiceSession.screenShareOn && "text-primary")}
+            onclick={toggleScreenShare}>
+            <Icon icon={Monitor} size={4} />
+          </Button>
+        {/if}
         <Button
           data-tip="Call settings"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
-- 
2.52.0


From 39ce62d903a0c2c805a5d5625ae64587a5161ecd Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Mon, 6 Apr 2026 11:10:53 -0400
Subject: [PATCH 15/20] Add permissions for cameras on mobile

---
 android/app/src/main/AndroidManifest.xml | 3 +++
 ios/App/App/Info.plist                   | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 243166be..bafccd40 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -44,4 +44,7 @@
     <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+    <uses-permission android:name="android.permission.CAMERA" />
+
+    <uses-feature android:name="android.hardware.camera.any" android:required="false" />
 </manifest>
diff --git a/ios/App/App/Info.plist b/ios/App/App/Info.plist
index 6d05083f..e69b5747 100644
--- a/ios/App/App/Info.plist
+++ b/ios/App/App/Info.plist
@@ -24,6 +24,8 @@
 	<false/>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSCameraUsageDescription</key>
+	<string>Flotilla uses the camera for video in voice rooms.</string>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>Flotilla uses the microphone for voice chat in rooms.</string>
 	<key>UIBackgroundModes</key>
-- 
2.52.0


From fb60d493b9b8b125f8eb96ae1c918018b1da09fa Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Mon, 6 Apr 2026 13:23:32 -0400
Subject: [PATCH 16/20] incorporate page layout changes from dev and other
 cleanup

---
 ios/App/App/Info.plist                     |   4 +-
 src/app.css                                |   1 -
 src/app/components/VideoCallContent.svelte |   8 +-
 src/app/components/VoiceWidget.svelte      |   2 +-
 src/routes/spaces/[relay]/[h]/+page.svelte | 222 ++++++++++-----------
 5 files changed, 118 insertions(+), 119 deletions(-)

diff --git a/ios/App/App/Info.plist b/ios/App/App/Info.plist
index e69b5747..a4078e58 100644
--- a/ios/App/App/Info.plist
+++ b/ios/App/App/Info.plist
@@ -25,9 +25,9 @@
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSCameraUsageDescription</key>
-	<string>Flotilla uses the camera for video in voice rooms.</string>
+	<string>Flotilla uses the camera when you enable it in a voice room.</string>
 	<key>NSMicrophoneUsageDescription</key>
-	<string>Flotilla uses the microphone for voice chat in rooms.</string>
+	<string>Flotilla uses the microphone when you enable it in a voice room.</string>
 	<key>UIBackgroundModes</key>
 	<array>
 		<string>remote-notification</string>
diff --git a/src/app.css b/src/app.css
index 412b4232..7ed78c07 100644
--- a/src/app.css
+++ b/src/app.css
@@ -30,7 +30,6 @@
   --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
   --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
   --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
-  --video-call-panel-bg: #181e24;
 }
 
 @utility py-sai {
diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 6fda6390..b947ce03 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -152,11 +152,11 @@
   const panelChrome = $derived(
     cx(
       variant === "mobile" &&
-        "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",
+        "flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden bg-base-200 px-2 pt-4 md:hidden pb-[calc(3.5rem+var(--saib))]",
       variant === "desktop-split" &&
-        "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",
+        "flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-base-200 px-2 pb-2 pt-4",
       variant === "desktop-full" &&
-        "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",
+        "flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-base-200 px-2 pb-2 pt-4",
       className,
     ),
   )
@@ -246,7 +246,7 @@
         <div class="min-h-0 flex-1 overflow-hidden">
           {@render videoPanelBody()}
         </div>
-        <div class="shrink-0">
+        <div class="shrink-0 pb-2">
           <VoiceWidget />
         </div>
       </div>
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 6287f106..ec9afd81 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -123,7 +123,7 @@
   const onLayoutToggle = () => {
     if (!showVoiceLayoutToggle) return
     if (isMd) {
-      voiceDesktopRoomPanel.update(p => (p === "split" ? "chat" : "split"))
+      voiceDesktopRoomPanel.update(p => (p === "split" ? "video" : "split"))
     } else {
       voiceMobileRoomPanel.update(p => (p === "chat" ? "video" : "chat"))
     }
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index 5fefdc54..3febac72 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -456,72 +456,72 @@
           : "flex flex-col-reverse pt-4",
         pageContentHiddenDesktopVideoOnly && "md:hidden",
       )}>
-  {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
-    <div class="py-20">
-      <div class="card2 col-8 m-auto max-w-md items-center text-center">
-        <p class="opacity-75">You aren't currently a member of this room.</p>
-        {#if $membershipStatus === MembershipStatus.Pending}
-          <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
-            <Icon icon={ClockCircle} />
-            Access Pending
-          </Button>
-        {:else}
-          <Button class="btn btn-neutral btn-sm" disabled={joining} onclick={join}>
-            {#if joining}
-              <span class="loading loading-spinner loading-sm"></span>
+      {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
+        <div class="py-20">
+          <div class="card2 col-8 m-auto max-w-md items-center text-center">
+            <p class="opacity-75">You aren't currently a member of this room.</p>
+            {#if $membershipStatus === MembershipStatus.Pending}
+              <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
+                <Icon icon={ClockCircle} />
+                Access Pending
+              </Button>
             {:else}
-              <Icon icon={Login2} />
+              <Button class="btn btn-neutral btn-sm" disabled={joining} onclick={join}>
+                {#if joining}
+                  <span class="loading loading-spinner loading-sm"></span>
+                {:else}
+                  <Icon icon={Login2} />
+                {/if}
+                Join Room
+              </Button>
             {/if}
-            Join Room
-          </Button>
-        {/if}
-      </div>
-    </div>
-  {:else}
-    {#if loadingForward}
-      <p class="py-20 flex justify-center">
-        <Spinner loading={loadingForward}>Looking for messages...</Spinner>
-      </p>
-    {/if}
-    {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
-      {#if type === "new-messages"}
-        <div
-          {id}
-          class="flex items-center py-2 text-xs transition-colors"
-          class:opacity-0={showFixedNewMessages}>
-          <div class="h-px grow bg-primary"></div>
-          <p class="rounded-full bg-primary px-2 py-1 text-primary-content">New Messages</p>
-          <div class="h-px grow bg-primary"></div>
-        </div>
-      {:else if type === "date"}
-        <Divider>{value}</Divider>
-      {:else}
-        {@const event = $state.snapshot(value as TrustedEvent)}
-        {#if event.kind === ROOM_ADD_MEMBER}
-          <RoomItemAddMember {url} {event} />
-        {:else}
-          <div in:slide class="cv">
-            <RoomItem
-              {url}
-              {event}
-              {replyTo}
-              {showPubkey}
-              {addSpaceBelow}
-              canEdit={canEditEvent}
-              onEdit={onEditEvent} />
           </div>
-        {/if}
-      {/if}
-    {/each}
-    <p class="flex h-10 items-center justify-center py-20">
-      {#if loadingBackward}
-        <Spinner loading={loadingBackward}>Looking for messages...</Spinner>
+        </div>
       {:else}
-        <Spinner>End of message history</Spinner>
+        {#if loadingForward}
+          <p class="py-20 flex justify-center">
+            <Spinner loading={loadingForward}>Looking for messages...</Spinner>
+          </p>
+        {/if}
+        {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
+          {#if type === "new-messages"}
+            <div
+              {id}
+              class="flex items-center py-2 text-xs transition-colors"
+              class:opacity-0={showFixedNewMessages}>
+              <div class="h-px flex-grow bg-primary"></div>
+              <p class="rounded-full bg-primary px-2 py-1 text-primary-content">New Messages</p>
+              <div class="h-px flex-grow bg-primary"></div>
+            </div>
+          {:else if type === "date"}
+            <Divider>{value}</Divider>
+          {:else}
+            {@const event = $state.snapshot(value as TrustedEvent)}
+            {#if event.kind === ROOM_ADD_MEMBER}
+              <RoomItemAddMember {url} {event} />
+            {:else}
+              <div in:slide class="cv">
+                <RoomItem
+                  {url}
+                  {event}
+                  {replyTo}
+                  {showPubkey}
+                  {addSpaceBelow}
+                  canEdit={canEditEvent}
+                  onEdit={onEditEvent} />
+              </div>
+            {/if}
+          {/if}
+        {/each}
+        <p class="flex h-10 items-center justify-center py-20">
+          {#if loadingBackward}
+            <Spinner loading={loadingBackward}>Looking for messages...</Spinner>
+          {:else}
+            <Spinner>End of message history</Spinner>
+          {/if}
+        </p>
       {/if}
-    </p>
-  {/if}
-  <div class="h-screen"></div>
+      <div class="h-screen"></div>
     </PageContent>
 
     <div
@@ -531,60 +531,60 @@
         showMobileVideoPanel && "max-md:hidden",
       )}>
       <div class="chat__compose-inner min-w-0 flex-1">
-    {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
-      <!-- pass -->
-    {:else if $room.isRestricted && $membershipStatus !== MembershipStatus.Granted}
-      <div class="bg-alt card m-4 flex flex-row items-center justify-between px-4 py-3">
-        <p class="opacity-75">Only members are allowed to post to this room.</p>
-        {#if $membershipStatus === MembershipStatus.Pending}
-          <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
-            <Icon icon={ClockCircle} />
-            Access Pending
-          </Button>
-        {:else}
-          <Button class="btn btn-neutral btn-sm" disabled={joining} onclick={join}>
-            {#if joining}
-              <span class="loading loading-spinner loading-sm"></span>
+        {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
+          <!-- pass -->
+        {:else if $room.isRestricted && $membershipStatus !== MembershipStatus.Granted}
+          <div class="bg-alt card m-4 flex flex-row items-center justify-between px-4 py-3">
+            <p class="opacity-75">Only members are allowed to post to this room.</p>
+            {#if $membershipStatus === MembershipStatus.Pending}
+              <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
+                <Icon icon={ClockCircle} />
+                Access Pending
+              </Button>
             {:else}
-              <Icon icon={Login2} />
+              <Button class="btn btn-neutral btn-sm" disabled={joining} onclick={join}>
+                {#if joining}
+                  <span class="loading loading-spinner loading-sm"></span>
+                {:else}
+                  <Icon icon={Login2} />
+                {/if}
+                Ask to Join
+              </Button>
             {/if}
-            Ask to Join
-          </Button>
+          </div>
+        {:else}
+          <div>
+            {#if parent}
+              <RoomComposeParent event={parent} clear={clearParent} verb="Replying to" />
+            {/if}
+            {#if share}
+              <RoomComposeParent event={share} clear={clearShare} verb="Sharing" />
+            {/if}
+            {#if eventToEdit}
+              <RoomComposeEdit clear={clearEventToEdit} />
+            {/if}
+          </div>
+          {#key eventToEdit}
+            <RoomCompose
+              {url}
+              {h}
+              {onSubmit}
+              {onEscape}
+              {onEditPrevious}
+              initialValues={eventToEdit}
+              bind:this={compose} />
+          {/key}
         {/if}
       </div>
-    {:else}
-      <div>
-        {#if parent}
-          <RoomComposeParent event={parent} clear={clearParent} verb="Replying to" />
-        {/if}
-        {#if share}
-          <RoomComposeParent event={share} clear={clearShare} verb="Sharing" />
-        {/if}
-        {#if eventToEdit}
-          <RoomComposeEdit clear={clearEventToEdit} />
-        {/if}
-      </div>
-      {#key eventToEdit}
-        <RoomCompose
-          {url}
-          {h}
-          {onSubmit}
-          {onEscape}
-          {onEditPrevious}
-          initialValues={eventToEdit}
-          bind:this={compose} />
-      {/key}
-    {/if}
-  </div>
-  {#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected}
-    <div
-      class={cx(
-        "hide-on-keyboard flex-shrink-0 p-2 md:hidden",
-        showMobileVideoPanel && "hidden",
-      )}>
-      <VoiceWidget />
-    </div>
-  {/if}
+      {#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected}
+        <div
+          class={cx(
+            "hide-on-keyboard flex-shrink-0 p-2 md:hidden",
+            showMobileVideoPanel && "hidden",
+          )}>
+          <VoiceWidget />
+        </div>
+      {/if}
     </div>
   </div>
 </div>
-- 
2.52.0


From 2c4fe7bcf37003d1a64da44b205d13e943beefcc Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Tue, 7 Apr 2026 14:57:24 -0400
Subject: [PATCH 17/20] Simplify how video call layout is stored

---
 src/app.css                                   |  2 +-
 src/app/components/VideoCallContent.svelte    | 38 +++++++++-------
 .../VideoCallLayoutViewportSync.svelte        | 28 ++++++++++++
 src/app/components/VoiceWidget.svelte         | 44 ++++++++-----------
 src/app/voice.ts                              | 20 +++++----
 src/routes/+layout.svelte                     |  2 +
 src/routes/spaces/[relay]/[h]/+page.svelte    | 36 +++++----------
 7 files changed, 93 insertions(+), 77 deletions(-)
 create mode 100644 src/app/components/VideoCallLayoutViewportSync.svelte

diff --git a/src/app.css b/src/app.css
index 7ed78c07..54c39834 100644
--- a/src/app.css
+++ b/src/app.css
@@ -410,7 +410,7 @@ progress[value]::-webkit-progress-value {
   transition: width 0.5s;
 }
 
-/* Anchors for fixed overlays (compose, search, reply) — main scroll lives in Page / PageContent flow */
+/* content width for fixed elements */
 
 .left-content {
   @apply md:left-[calc(18.5rem+var(--sail))];
diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index b947ce03..35217cb7 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -11,23 +11,22 @@
   import {
     currentVoiceSession,
     currentVoiceRoom,
+    VideoCallLayout,
     videoCallLayoutRevision,
     videoPrimaryTileKey,
     toggleVideoPrimaryTile,
     pubkeyFromLiveKitIdentity,
   } from "@app/voice"
 
-  type Variant = "mobile" | "desktop-split" | "desktop-full"
-
   type Props = {
-    variant: Variant
+    layout: VideoCallLayout
+    mobile?: boolean
     url: string
     h: string
-    visible?: boolean
     class?: string
   }
 
-  type Tile = {
+  type VideoTile = {
     identity: string
     isLocal: boolean
     trackSid: string
@@ -37,11 +36,18 @@
 
   type TileLayout = "spotlight" | "default" | "strip"
 
-  const {variant, url, h, visible = true, class: className = ""}: Props = $props()
+  const {layout, mobile = false, url, h, class: className = ""}: Props = $props()
 
-  const roomMatches = $derived($currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h)
+  const isViewingCurrentCallRoom = $derived(
+    $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h,
+  )
 
-  const showPanel = $derived(visible && roomMatches)
+  const showPanel = $derived(
+    isViewingCurrentCallRoom &&
+      (mobile
+        ? layout === VideoCallLayout.Video
+        : layout === VideoCallLayout.Split || layout === VideoCallLayout.Video),
+  )
 
   const tiles = $derived.by(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- re-run when remote video subscribes
@@ -52,7 +58,7 @@
     }
 
     const room = session.room
-    const out: Tile[] = []
+    const out: VideoTile[] = []
     const lp = room.localParticipant
 
     if (session.cameraOn) {
@@ -104,7 +110,7 @@
   })
 
   /** Identity + source only — LiveKit can change trackSid after publish, which broke spotlight + stale-key effect. */
-  const tileKey = (t: Tile) => `${t.identity}\x1f${t.source}`
+  const tileKey = (t: VideoTile) => `${t.identity}\x1f${t.source}`
 
   const primaryTile = $derived.by(() => {
     const k = $videoPrimaryTileKey
@@ -137,7 +143,7 @@
     }
   })
 
-  const labelFor = (identity: string, source: Tile["source"]) => {
+  const labelFor = (identity: string, source: VideoTile["source"]) => {
     const pk = pubkeyFromLiveKitIdentity(identity)
     const name = pk ? displayProfileByPubkey(pk) : "Unknown"
     return source === Track.Source.ScreenShare ? `${name} · screen` : name
@@ -151,18 +157,16 @@
 
   const panelChrome = $derived(
     cx(
-      variant === "mobile" &&
+      mobile &&
         "flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden bg-base-200 px-2 pt-4 md:hidden pb-[calc(3.5rem+var(--saib))]",
-      variant === "desktop-split" &&
-        "flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-base-200 px-2 pb-2 pt-4",
-      variant === "desktop-full" &&
+      !mobile &&
         "flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-base-200 px-2 pb-2 pt-4",
       className,
     ),
   )
 </script>
 
-{#snippet videoTile(tile: Tile, layout: TileLayout)}
+{#snippet videoTile(tile: VideoTile, layout: TileLayout)}
   <div
     class={cx(
       "relative isolate overflow-hidden rounded-box shadow-sm",
@@ -241,7 +245,7 @@
 
 {#if showPanel}
   <div class={panelChrome}>
-    {#if variant === "mobile"}
+    {#if mobile}
       <div class="flex min-h-0 flex-1 flex-col gap-2">
         <div class="min-h-0 flex-1 overflow-hidden">
           {@render videoPanelBody()}
diff --git a/src/app/components/VideoCallLayoutViewportSync.svelte b/src/app/components/VideoCallLayoutViewportSync.svelte
new file mode 100644
index 00000000..6fb1fc3d
--- /dev/null
+++ b/src/app/components/VideoCallLayoutViewportSync.svelte
@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import {MediaQuery} from "svelte/reactivity"
+
+  export const isDesktopLayout = new MediaQuery("min-width: 768px", false)
+</script>
+
+<script lang="ts">
+  import {get} from "svelte/store"
+  import {VideoCallLayout, videoCallLayout} from "@app/voice"
+
+  let prevLayout = $state<boolean | undefined>(undefined)
+
+  $effect(() => {
+    const currentLayout = isDesktopLayout.current
+    if (prevLayout === undefined) {
+      prevLayout = currentLayout
+      return
+    }
+    if (prevLayout === currentLayout) return
+    const p = get(videoCallLayout)
+    if (prevLayout && !currentLayout) {
+      if (p === VideoCallLayout.Split) videoCallLayout.set(VideoCallLayout.Video)
+    } else if (!prevLayout && currentLayout) {
+      if (p === VideoCallLayout.Chat) videoCallLayout.set(VideoCallLayout.Split)
+    }
+    prevLayout = currentLayout
+  })
+</script>
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index ec9afd81..40a888bb 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import {readable} from "svelte/store"
   import {fade, fly} from "svelte/transition"
-  import {browser} from "$app/environment"
   import {goto} from "$app/navigation"
   import {page} from "$app/stores"
   import cx from "classnames"
@@ -20,6 +19,7 @@
   import Button from "@lib/components/Button.svelte"
   import VoiceCallAudioSettingsDialog from "@app/components/VoiceCallAudioSettingsDialog.svelte"
   import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
+  import {isDesktopLayout} from "@app/components/VideoCallLayoutViewportSync.svelte"
   import {
     decodeRelay,
     deriveRoom,
@@ -33,11 +33,11 @@
   import {makeRoomPath} from "@app/util/routes"
   import {
     VoiceState,
+    VideoCallLayout,
     currentVoiceSession,
     currentVoiceRoom,
     voiceState,
-    voiceMobileRoomPanel,
-    voiceDesktopRoomPanel,
+    videoCallLayout,
     isLocalSpeaking,
     leaveVoiceRoom,
     toggleMute,
@@ -90,21 +90,6 @@
     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 &&
@@ -115,17 +100,24 @@
       h === targetRoom.h,
   )
 
-  const layoutToggleActive = $derived(
+  const isChatPanelActive = $derived(
     showVoiceLayoutToggle &&
-      ((!isMd && $voiceMobileRoomPanel === "chat") || (isMd && $voiceDesktopRoomPanel === "split")),
+      ((!isDesktopLayout.current &&
+        ($videoCallLayout === VideoCallLayout.Chat ||
+          $videoCallLayout === VideoCallLayout.Split)) ||
+        (isDesktopLayout.current && $videoCallLayout === VideoCallLayout.Split)),
   )
 
-  const onLayoutToggle = () => {
+  const onChatToggle = () => {
     if (!showVoiceLayoutToggle) return
-    if (isMd) {
-      voiceDesktopRoomPanel.update(p => (p === "split" ? "video" : "split"))
+    if (isDesktopLayout.current) {
+      videoCallLayout.update(p =>
+        p === VideoCallLayout.Split ? VideoCallLayout.Video : VideoCallLayout.Split,
+      )
     } else {
-      voiceMobileRoomPanel.update(p => (p === "chat" ? "video" : "chat"))
+      videoCallLayout.update(p =>
+        p === VideoCallLayout.Video ? VideoCallLayout.Chat : VideoCallLayout.Video,
+      )
     }
   }
 
@@ -177,9 +169,9 @@
           class={cx(
             mediaToggleClass,
             "relative shrink-0 overflow-visible",
-            layoutToggleActive && "text-primary",
+            isChatPanelActive && "text-primary",
           )}
-          onclick={onLayoutToggle}>
+          onclick={onChatToggle}>
           <span class="relative inline-flex">
             <Icon icon={ChatRound} size={4} />
             {#if chatUnread}
diff --git a/src/app/voice.ts b/src/app/voice.ts
index 2e35ac61..6e86db9a 100644
--- a/src/app/voice.ts
+++ b/src/app/voice.ts
@@ -87,15 +87,17 @@ export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
 
 export const currentVoiceRoom = writable<Room | undefined>(undefined)
 
-/** Mobile room UI: full-screen chat vs video (see VoiceWidget layout toggle). */
-export const voiceMobileRoomPanel = writable<"chat" | "video">("chat")
+/** Chat-only, full-width video, or split (desktop). On narrow viewports, `split` shows as chat until resize remaps it. */
+export enum VideoCallLayout {
+  Chat = "chat",
+  Video = "video",
+  Split = "split",
+}
 
-/** Desktop room UI: messages only, video only, or split (see VoiceWidget layout toggle). */
-export const voiceDesktopRoomPanel = writable<"chat" | "video" | "split">("split")
+export const videoCallLayout = writable<VideoCallLayout>(VideoCallLayout.Split)
 
-const resetVoiceRoomPanels = () => {
-  voiceMobileRoomPanel.set("chat")
-  voiceDesktopRoomPanel.set("chat")
+const resetVideoCallLayout = () => {
+  videoCallLayout.set(VideoCallLayout.Chat)
 }
 
 export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
@@ -240,7 +242,7 @@ const onRoomDisconnected = (reason?: DisconnectReason) => {
   videoCallLayoutRevision.set(0)
   videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
-  resetVoiceRoomPanels()
+  resetVideoCallLayout()
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
     voiceState.set(VoiceState.Disconnected)
     const message =
@@ -408,7 +410,7 @@ export const leaveVoiceRoom = async () => {
   videoCallLayoutRevision.set(0)
   videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
-  resetVoiceRoomPanels()
+  resetVideoCallLayout()
   session.room.disconnect()
   speakingParticipants.set([])
   participantPubkeyMap.set(new Map())
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9085728f..c38febcf 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -42,6 +42,7 @@
   import {syncKeyboard} from "@app/util/keyboard"
   import {getPageTitle} from "@app/util/title"
   import NewNotificationSound from "@src/app/components/NewNotificationSound.svelte"
+  import VideoCallLayoutViewportSync from "@app/components/VideoCallLayoutViewportSync.svelte"
 
   const {children} = $props()
 
@@ -229,5 +230,6 @@
     <ModalContainer />
     <div class="tippy-target"></div>
     <NewNotificationSound />
+    <VideoCallLayoutViewportSync />
   </div>
 {/await}
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index 3febac72..75fc43df 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -47,10 +47,10 @@
   import VideoCallContent from "@app/components/VideoCallContent.svelte"
   import {
     VoiceState,
+    VideoCallLayout,
     currentVoiceRoom,
     videoTileCount,
-    voiceMobileRoomPanel,
-    voiceDesktopRoomPanel,
+    videoCallLayout,
     voiceState,
   } from "@app/voice"
   import {makeFeed} from "@app/core/requests"
@@ -74,19 +74,20 @@
   )
 
   const showMobileVideoPanel = $derived(
-    isVoiceRoom && $voiceState === VoiceState.Connected && $voiceMobileRoomPanel === "video",
+    isVoiceRoom &&
+      $voiceState === VoiceState.Connected &&
+      $videoCallLayout === VideoCallLayout.Video,
   )
 
   const pageContentHiddenDesktopVideoOnly = $derived(
-    voiceConnectedHere && $voiceDesktopRoomPanel === "video",
+    voiceConnectedHere && $videoCallLayout === VideoCallLayout.Video,
   )
 
   let prevVideoTileCount = $state(0)
 
   $effect(() => {
     if ($voiceState !== VoiceState.Connected) {
-      voiceMobileRoomPanel.set("chat")
-      voiceDesktopRoomPanel.set("chat")
+      videoCallLayout.set(VideoCallLayout.Chat)
       prevVideoTileCount = 0
       return
     }
@@ -100,8 +101,7 @@
     }
 
     if (prevVideoTileCount === 0 && n >= 1) {
-      voiceDesktopRoomPanel.set("video")
-      voiceMobileRoomPanel.set("video")
+      videoCallLayout.set(VideoCallLayout.Video)
     }
     prevVideoTileCount = n
   })
@@ -416,35 +416,23 @@
 <div
   class={cx(
     "flex min-h-0 flex-1 flex-col",
-    voiceConnectedHere && $voiceDesktopRoomPanel === "split" && "md:flex-row",
+    voiceConnectedHere && $videoCallLayout === VideoCallLayout.Split && "md:flex-row",
   )}>
   {#if voiceConnectedHere}
     <VideoCallContent
-      variant="desktop-split"
+      layout={$videoCallLayout}
       {url}
       {h}
-      visible={$voiceDesktopRoomPanel === "split"}
-      class="hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex" />
-    <VideoCallContent
-      variant="desktop-full"
-      {url}
-      {h}
-      visible={$voiceDesktopRoomPanel === "video"}
       class="hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex" />
   {/if}
 
   <div
     class={cx(
       "flex min-h-0 min-w-0 flex-1 flex-col",
-      voiceConnectedHere && $voiceDesktopRoomPanel === "video" && "md:hidden",
+      voiceConnectedHere && $videoCallLayout === VideoCallLayout.Video && "md:hidden",
     )}>
     {#if isVoiceRoom && $voiceState === VoiceState.Connected}
-      <VideoCallContent
-        variant="mobile"
-        {url}
-        {h}
-        visible={$voiceMobileRoomPanel === "video"}
-        class="md:hidden" />
+      <VideoCallContent layout={$videoCallLayout} mobile {url} {h} class="md:hidden" />
     {/if}
 
     <PageContent
-- 
2.52.0


From 3cff8271e6b6ffd608eeeda6118226e833bbdb0a Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Wed, 8 Apr 2026 09:46:33 -0400
Subject: [PATCH 18/20] Clean up VideoCallContent

---
 src/app/components/VideoCallContent.svelte | 51 ++++++++++------------
 src/app/voice.ts                           | 29 ++++--------
 src/routes/spaces/[relay]/[h]/+page.svelte |  3 ++
 3 files changed, 36 insertions(+), 47 deletions(-)

diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 35217cb7..7a50bdcf 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -12,7 +12,6 @@
     currentVoiceSession,
     currentVoiceRoom,
     VideoCallLayout,
-    videoCallLayoutRevision,
     videoPrimaryTileKey,
     toggleVideoPrimaryTile,
     pubkeyFromLiveKitIdentity,
@@ -42,29 +41,27 @@
     $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h,
   )
 
-  const showPanel = $derived(
+  const showVideoContent = $derived(
     isViewingCurrentCallRoom &&
       (mobile
         ? layout === VideoCallLayout.Video
         : layout === VideoCallLayout.Split || layout === VideoCallLayout.Video),
   )
 
-  const tiles = $derived.by(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- re-run when remote video subscribes
-    $videoCallLayoutRevision
+  const videoTiles = $derived.by(() => {
     const session = $currentVoiceSession
     if (!session || $currentVoiceRoom?.url !== url || $currentVoiceRoom?.h !== h) {
       return []
     }
 
     const room = session.room
-    const out: VideoTile[] = []
-    const lp = room.localParticipant
+    const videoTiles: VideoTile[] = []
+    const user = room.localParticipant
 
     if (session.cameraOn) {
-      const localPub = lp.getTrackPublication(Track.Source.Camera)
-      out.push({
-        identity: lp.identity,
+      const localPub = user.getTrackPublication(Track.Source.Camera)
+      videoTiles.push({
+        identity: user.identity,
         isLocal: true,
         trackSid: localPub?.trackSid ?? "local-camera",
         attachable: localPub?.track,
@@ -73,9 +70,9 @@
     }
 
     if (session.screenShareOn) {
-      const localPub = lp.getTrackPublication(Track.Source.ScreenShare)
-      out.push({
-        identity: lp.identity,
+      const localPub = user.getTrackPublication(Track.Source.ScreenShare)
+      videoTiles.push({
+        identity: user.identity,
         isLocal: true,
         trackSid: localPub?.trackSid ?? "local-screen",
         attachable: localPub?.track,
@@ -86,7 +83,7 @@
     for (const rp of room.remoteParticipants.values()) {
       const camPub = rp.getTrackPublication(Track.Source.Camera)
       if (camPub?.isSubscribed && camPub.track) {
-        out.push({
+        videoTiles.push({
           identity: rp.identity,
           isLocal: false,
           trackSid: camPub.trackSid,
@@ -96,7 +93,7 @@
       }
       const screenPub = rp.getTrackPublication(Track.Source.ScreenShare)
       if (screenPub?.isSubscribed && screenPub.track) {
-        out.push({
+        videoTiles.push({
           identity: rp.identity,
           isLocal: false,
           trackSid: screenPub.trackSid,
@@ -106,7 +103,7 @@
       }
     }
 
-    return out
+    return videoTiles
   })
 
   /** Identity + source only — LiveKit can change trackSid after publish, which broke spotlight + stale-key effect. */
@@ -115,29 +112,29 @@
   const primaryTile = $derived.by(() => {
     const k = $videoPrimaryTileKey
     if (k === undefined) return undefined
-    return tiles.find(t => tileKey(t) === k)
+    return videoTiles.find(t => tileKey(t) === k)
   })
 
   const secondaryTiles = $derived.by(() => {
     const p = primaryTile
-    if (p === undefined) return tiles
+    if (p === undefined) return videoTiles
     const pk = tileKey(p)
-    return tiles.filter(t => tileKey(t) !== pk)
+    return videoTiles.filter(t => tileKey(t) !== pk)
   })
 
   const useSpotlightLayout = $derived(primaryTile !== undefined)
-  const useMultiGrid = $derived(!useSpotlightLayout && tiles.length > 2)
+  const useMultiGrid = $derived(!useSpotlightLayout && videoTiles.length > 2)
 
   $effect(() => {
     const k = $videoPrimaryTileKey
     if (k === undefined) return
-    if (!tiles.some(t => tileKey(t) === k)) {
+    if (!videoTiles.some(t => tileKey(t) === k)) {
       videoPrimaryTileKey.set(undefined)
     }
   })
 
   $effect(() => {
-    for (const t of tiles) {
+    for (const t of videoTiles) {
       const pk = pubkeyFromLiveKitIdentity(t.identity)
       if (pk) loadProfile(pk)
     }
@@ -149,7 +146,7 @@
     return source === Track.Source.ScreenShare ? `${name} · screen` : name
   }
 
-  const showTileGrid = $derived(tiles.length > 0)
+  const showTileGrid = $derived(videoTiles.length > 0)
 
   const spotlightHandlerFor = (key: string) => () => {
     toggleVideoPrimaryTile(key)
@@ -190,7 +187,7 @@
       class="pointer-events-none absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs">
       {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
     </span>
-    {#if tiles.length > 1}
+    {#if videoTiles.length > 1}
       {@const pinned = $videoPrimaryTileKey === tileKey(tile)}
       <Button
         data-tip={pinned ? "Exit spotlight" : "Spotlight"}
@@ -223,13 +220,13 @@
     {: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))}
+        {#each videoTiles 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))}
+        {#each videoTiles as tile (tileKey(tile))}
           {@render videoTile(tile, "default")}
         {/each}
       </div>
@@ -243,7 +240,7 @@
   {/if}
 {/snippet}
 
-{#if showPanel}
+{#if showVideoContent}
   <div class={panelChrome}>
     {#if mobile}
       <div class="flex min-h-0 flex-1 flex-col gap-2">
diff --git a/src/app/voice.ts b/src/app/voice.ts
index 6e86db9a..ff84c8d0 100644
--- a/src/app/voice.ts
+++ b/src/app/voice.ts
@@ -102,9 +102,6 @@ const resetVideoCallLayout = () => {
 
 export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
 
-/** Bumps when remote video is subscribed/unsubscribed so layout/video UI can react. */
-export const videoCallLayoutRevision = writable(0)
-
 /** Spotlight tile id — must match VideoCallContent `tileKey` (identity + source, not trackSid). */
 export const videoPrimaryTileKey = writable<string | undefined>(undefined)
 
@@ -112,7 +109,9 @@ export const toggleVideoPrimaryTile = (key: string) => {
   videoPrimaryTileKey.update(k => (k === key ? undefined : key))
 }
 
-const bumpVideoCallLayoutRevision = () => videoCallLayoutRevision.update(n => n + 1)
+const triggerVideoTileCount = () => {
+  currentVoiceSession.update(s => (s ? {...s} : s))
+}
 
 const addParticipant = (identity: string) => {
   participantPubkeyMap.update(m => {
@@ -239,7 +238,6 @@ const setUpMicrophone = async (
 }
 
 const onRoomDisconnected = (reason?: DisconnectReason) => {
-  videoCallLayoutRevision.set(0)
   videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
   resetVideoCallLayout()
@@ -262,14 +260,14 @@ const onTrackSubscribed = (track: Track) => {
     document.body.appendChild(element)
     element.play().catch(() => {})
   } else if (track.kind === Track.Kind.Video) {
-    bumpVideoCallLayoutRevision()
+    triggerVideoTileCount()
   }
 }
 
 const onTrackUnsubscribed = (track: Track) => {
   track.detach().forEach(el => el.remove())
   if (track.kind === Track.Kind.Video) {
-    bumpVideoCallLayoutRevision()
+    triggerVideoTileCount()
   }
 }
 
@@ -300,7 +298,6 @@ const onLocalTrackUnpublished = (
   if (!session || participant.identity !== session.room.localParticipant.identity) return
   if (!session.screenShareOn) return
   currentVoiceSession.set({...session, screenShareOn: false})
-  bumpVideoCallLayoutRevision()
 }
 
 let joinAbortController: AbortController | undefined
@@ -407,7 +404,6 @@ export const leaveVoiceRoom = async () => {
   }
 
   voiceState.set(VoiceState.Disconnected)
-  videoCallLayoutRevision.set(0)
   videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
   resetVideoCallLayout()
@@ -465,13 +461,10 @@ const countLiveVisualFeeds = (session: VoiceSession): number => {
   return n
 }
 
-export const videoTileCount = derived(
-  [currentVoiceSession, voiceState, videoCallLayoutRevision],
-  ([$session, $state, _rev]) => {
-    if ($state !== VoiceState.Connected || !$session) return 0
-    return countLiveVisualFeeds($session)
-  },
-)
+export const videoTileCount = derived([currentVoiceSession, voiceState], ([$session, $state]) => {
+  if ($state !== VoiceState.Connected || !$session) return 0
+  return countLiveVisualFeeds($session)
+})
 
 export const toggleCamera = async () => {
   const session = get(currentVoiceSession)
@@ -481,14 +474,12 @@ export const toggleCamera = async () => {
   if (!cameraOn) {
     session.room.localParticipant.setCameraEnabled(false)
     currentVoiceSession.set({...session, cameraOn})
-    bumpVideoCallLayoutRevision()
     return
   }
 
   try {
     await session.room.localParticipant.setCameraEnabled(true)
     currentVoiceSession.set({...session, cameraOn})
-    bumpVideoCallLayoutRevision()
   } catch (e) {
     pushToast({theme: "error", message: "Could not access camera"})
   }
@@ -502,14 +493,12 @@ export const toggleScreenShare = async () => {
   if (!screenShareOn) {
     session.room.localParticipant.setScreenShareEnabled(false)
     currentVoiceSession.set({...session, screenShareOn})
-    bumpVideoCallLayoutRevision()
     return
   }
 
   try {
     await session.room.localParticipant.setScreenShareEnabled(true)
     currentVoiceSession.set({...session, screenShareOn})
-    bumpVideoCallLayoutRevision()
   } catch (e) {
     pushToast({theme: "error", message: "Could not start screen sharing"})
   }
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index 75fc43df..7f067506 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -103,6 +103,9 @@
     if (prevVideoTileCount === 0 && n >= 1) {
       videoCallLayout.set(VideoCallLayout.Video)
     }
+    if (prevVideoTileCount >= 1 && n === 0 && $videoCallLayout === VideoCallLayout.Split) {
+      videoCallLayout.set(VideoCallLayout.Chat)
+    }
     prevVideoTileCount = n
   })
   const shouldProtect = canEnforceNip70(url)
-- 
2.52.0


From 11fa8fd7207b34067aaed2bfb663731a471f98ec Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Wed, 8 Apr 2026 10:30:22 -0400
Subject: [PATCH 19/20] Factor video code and stores out of voice.ts

---
 src/app/call/stores.ts                        |  58 ++++++
 src/app/call/video.ts                         | 105 +++++++++++
 src/app/{ => call}/voice.ts                   | 166 ++----------------
 src/app/components/VideoCallContent.svelte    |  30 +++-
 .../VideoCallLayoutViewportSync.svelte        |  28 ---
 .../VoiceCallAudioSettingsDialog.svelte       |   9 +-
 src/app/components/VoiceRoomItem.svelte       |   7 +-
 src/app/components/VoiceRoomJoinDialog.svelte |   2 +-
 src/app/components/VoiceWidget.svelte         |  18 +-
 src/app/core/sync.ts                          |   2 +-
 src/routes/+layout.svelte                     |   2 -
 src/routes/spaces/[relay]/[h]/+page.svelte    |  10 +-
 12 files changed, 223 insertions(+), 214 deletions(-)
 create mode 100644 src/app/call/stores.ts
 create mode 100644 src/app/call/video.ts
 rename src/app/{ => call}/voice.ts (69%)
 delete mode 100644 src/app/components/VideoCallLayoutViewportSync.svelte

diff --git a/src/app/call/stores.ts b/src/app/call/stores.ts
new file mode 100644
index 00000000..95ccc0b8
--- /dev/null
+++ b/src/app/call/stores.ts
@@ -0,0 +1,58 @@
+import {Room as LiveKitRoom} from "livekit-client"
+import {derived, writable} from "svelte/store"
+import {type Room} from "@app/core/state"
+
+export type VoiceSession = {
+  url: string
+  h: string
+  room: LiveKitRoom
+  muted: boolean
+  cameraOn: boolean
+  screenShareOn: boolean
+}
+
+export type Pubkey = string
+
+export type VoiceParticipant = {pubkey?: Pubkey; identity: string}
+
+export enum VoiceState {
+  Joining = "joining",
+  Connected = "connected",
+  Disconnected = "disconnected",
+}
+
+export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
+
+export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
+
+export const currentVoiceRoom = writable<Room | undefined>(undefined)
+
+export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
+
+export const pubkeyFromLiveKitIdentity = (identity: string): string | undefined =>
+  /^[a-f0-9]{64}$/.test(identity.slice(0, 64)) ? identity.slice(0, 64) : undefined
+
+export const participantFromLiveKitIdentity = (identity: string): VoiceParticipant => {
+  const pk = pubkeyFromLiveKitIdentity(identity)
+  return pk ? {pubkey: pk, identity} : {identity}
+}
+
+export const participantKey = (p: VoiceParticipant) => p.pubkey ?? p.identity
+
+export const speakingParticipants = writable<VoiceParticipant[]>([])
+
+export const isParticipantSpeaking = derived(
+  speakingParticipants,
+  $participants => (p: VoiceParticipant) =>
+    $participants.some(sp => participantKey(sp) === participantKey(p)),
+)
+
+/** True when the local user is in LiveKit’s active-speakers list (currently talking). */
+export const isLocalSpeaking = derived(
+  [currentVoiceSession, speakingParticipants],
+  ([$session, $speaking]) => {
+    if (!$session?.room) return false
+    const local = participantFromLiveKitIdentity($session.room.localParticipant.identity)
+    return $speaking.some(sp => participantKey(sp) === participantKey(local))
+  },
+)
diff --git a/src/app/call/video.ts b/src/app/call/video.ts
new file mode 100644
index 00000000..3a420005
--- /dev/null
+++ b/src/app/call/video.ts
@@ -0,0 +1,105 @@
+import {Track} from "livekit-client"
+import {MediaQuery} from "svelte/reactivity"
+import {derived, get, writable} from "svelte/store"
+import {currentVoiceSession, VoiceState, type VoiceSession, voiceState} from "@app/call/stores"
+import {pushToast} from "@app/util/toast"
+
+export enum VideoCallLayout {
+  Chat = "chat",
+  Video = "video",
+  Split = "split",
+}
+
+export const isDesktopLayout = new MediaQuery("min-width: 768px", false)
+
+export enum ViewportSize {
+  Desktop = "desktop",
+  Mobile = "mobile",
+}
+
+export const videoCallViewportSync = {
+  previousLayout: undefined as ViewportSize | undefined,
+}
+
+export const videoCallLayout = writable<VideoCallLayout>(VideoCallLayout.Split)
+
+export const resetVideoCallLayout = () => {
+  videoCallViewportSync.previousLayout = undefined
+  videoCallLayout.set(VideoCallLayout.Chat)
+}
+
+export const videoPrimaryTileKey = writable<string | undefined>(undefined)
+
+export const toggleVideoPrimaryTile = (key: string) => {
+  videoPrimaryTileKey.update(k => (k === key ? undefined : key))
+}
+
+const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
+
+const countLiveVisualFeeds = (session: VoiceSession): number => {
+  const room = session.room
+  let n = 0
+  const lp = room.localParticipant
+  if (session.cameraOn) {
+    const pub = lp.getTrackPublication(Track.Source.Camera)
+    if (pub?.track) n += 1
+  }
+  if (session.screenShareOn) {
+    const pub = lp.getTrackPublication(Track.Source.ScreenShare)
+    if (pub?.track) n += 1
+  }
+  for (const rp of room.remoteParticipants.values()) {
+    for (const source of VISUAL_SOURCES) {
+      const pub = rp.getTrackPublication(source)
+      if (pub?.isSubscribed && pub.track) n += 1
+    }
+  }
+  return n
+}
+
+export const triggerVideoFeedCount = () => {
+  currentVoiceSession.update(s => (s ? {...s} : s))
+}
+
+export const videoTileCount = derived([currentVoiceSession, voiceState], ([$session, $state]) => {
+  if ($state !== VoiceState.Connected || !$session) return 0
+  return countLiveVisualFeeds($session)
+})
+
+export const toggleCamera = async () => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+
+  const cameraOn = !session.cameraOn
+  if (!cameraOn) {
+    session.room.localParticipant.setCameraEnabled(false)
+    currentVoiceSession.set({...session, cameraOn})
+    return
+  }
+
+  try {
+    await session.room.localParticipant.setCameraEnabled(true)
+    currentVoiceSession.set({...session, cameraOn})
+  } catch (e) {
+    pushToast({theme: "error", message: "Could not access camera"})
+  }
+}
+
+export const toggleScreenShare = async () => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+
+  const screenShareOn = !session.screenShareOn
+  if (!screenShareOn) {
+    session.room.localParticipant.setScreenShareEnabled(false)
+    currentVoiceSession.set({...session, screenShareOn})
+    return
+  }
+
+  try {
+    await session.room.localParticipant.setScreenShareEnabled(true)
+    currentVoiceSession.set({...session, screenShareOn})
+  } catch (e) {
+    pushToast({theme: "error", message: "Could not start screen sharing"})
+  }
+}
diff --git a/src/app/voice.ts b/src/app/call/voice.ts
similarity index 69%
rename from src/app/voice.ts
rename to src/app/call/voice.ts
index ff84c8d0..33449ebc 100644
--- a/src/app/voice.ts
+++ b/src/app/call/voice.ts
@@ -12,14 +12,27 @@ import {
   supportsAudioOutputSelection,
   type AudioCaptureOptions,
 } from "livekit-client"
-import {derived, get, writable} from "svelte/store"
+import {derived, get} from "svelte/store"
 import {map, removeUndefined, uniqBy} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {makeHttpAuth, makeHttpAuthHeader, getTags} from "@welshman/util"
 import {signer} from "@welshman/app"
 import {getLivekitEndpoint} from "$lib/livekit"
 import {AbortError, whenAborted, whenTimeout} from "$lib/util"
-import {deriveLatestEventForUrl, deriveRoom, makeRoomId, type Room} from "@app/core/state"
+import {
+  currentVoiceRoom,
+  currentVoiceSession,
+  participantFromLiveKitIdentity,
+  participantKey,
+  participantPubkeyMap,
+  pubkeyFromLiveKitIdentity,
+  speakingParticipants,
+  VoiceState,
+  type VoiceParticipant,
+  voiceState,
+} from "@app/call/stores"
+import {resetVideoCallLayout, triggerVideoFeedCount, videoPrimaryTileKey} from "@app/call/video"
+import {deriveLatestEventForUrl, deriveRoom, makeRoomId} from "@app/core/state"
 import {pushToast} from "@app/util/toast"
 
 export const LIVEKIT_PARTICIPANTS = 39004
@@ -28,27 +41,6 @@ export {checkRelayHasLivekit} from "$lib/livekit"
 
 export {supportsAudioOutputSelection}
 
-export type VoiceSession = {
-  url: string
-  h: string
-  room: LiveKitRoom
-  muted: boolean
-  cameraOn: boolean
-  screenShareOn: boolean
-}
-
-export type Pubkey = string
-
-export type VoiceParticipant = {pubkey?: Pubkey; identity: string}
-
-export enum VoiceState {
-  Joining = "joining",
-  Connected = "connected",
-  Disconnected = "disconnected",
-}
-
-export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
-
 const LIVEKIT_DEFAULT_DEVICE_ID = "default"
 
 export enum DeviceKind {
@@ -83,36 +75,6 @@ export const switchVoiceActiveDevice = async (
   }
 }
 
-export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
-
-export const currentVoiceRoom = writable<Room | undefined>(undefined)
-
-/** Chat-only, full-width video, or split (desktop). On narrow viewports, `split` shows as chat until resize remaps it. */
-export enum VideoCallLayout {
-  Chat = "chat",
-  Video = "video",
-  Split = "split",
-}
-
-export const videoCallLayout = writable<VideoCallLayout>(VideoCallLayout.Split)
-
-const resetVideoCallLayout = () => {
-  videoCallLayout.set(VideoCallLayout.Chat)
-}
-
-export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
-
-/** Spotlight tile id — must match VideoCallContent `tileKey` (identity + source, not trackSid). */
-export const videoPrimaryTileKey = writable<string | undefined>(undefined)
-
-export const toggleVideoPrimaryTile = (key: string) => {
-  videoPrimaryTileKey.update(k => (k === key ? undefined : key))
-}
-
-const triggerVideoTileCount = () => {
-  currentVoiceSession.update(s => (s ? {...s} : s))
-}
-
 const addParticipant = (identity: string) => {
   participantPubkeyMap.update(m => {
     const next = new Map(m)
@@ -129,34 +91,6 @@ const deleteParticipant = (identity: string) => {
   })
 }
 
-export const pubkeyFromLiveKitIdentity = (identity: string): string | undefined =>
-  /^[a-f0-9]{64}$/.test(identity.slice(0, 64)) ? identity.slice(0, 64) : undefined
-
-export const participantFromLiveKitIdentity = (identity: string): VoiceParticipant => {
-  const pk = pubkeyFromLiveKitIdentity(identity)
-  return pk ? {pubkey: pk, identity} : {identity}
-}
-
-export const participantKey = (p: VoiceParticipant) => p.pubkey ?? p.identity
-
-export const speakingParticipants = writable<VoiceParticipant[]>([])
-
-export const isParticipantSpeaking = derived(
-  speakingParticipants,
-  $participants => (p: VoiceParticipant) =>
-    $participants.some(sp => participantKey(sp) === participantKey(p)),
-)
-
-/** True when the local user is in LiveKit’s active-speakers list (currently talking). */
-export const isLocalSpeaking = derived(
-  [currentVoiceSession, speakingParticipants],
-  ([$session, $speaking]) => {
-    if (!$session?.room) return false
-    const local = participantFromLiveKitIdentity($session.room.localParticipant.identity)
-    return $speaking.some(sp => participantKey(sp) === participantKey(local))
-  },
-)
-
 const fetchLivekitToken = async (
   url: string,
   groupId: string,
@@ -260,14 +194,14 @@ const onTrackSubscribed = (track: Track) => {
     document.body.appendChild(element)
     element.play().catch(() => {})
   } else if (track.kind === Track.Kind.Video) {
-    triggerVideoTileCount()
+    triggerVideoFeedCount()
   }
 }
 
 const onTrackUnsubscribed = (track: Track) => {
   track.detach().forEach(el => el.remove())
   if (track.kind === Track.Kind.Video) {
-    triggerVideoTileCount()
+    triggerVideoFeedCount()
   }
 }
 
@@ -437,69 +371,3 @@ export const toggleMute = async () => {
     pushToast({theme: "error", message: "Could not access microphone"})
   }
 }
-
-const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
-
-const countLiveVisualFeeds = (session: VoiceSession): number => {
-  const room = session.room
-  let n = 0
-  const lp = room.localParticipant
-  if (session.cameraOn) {
-    const pub = lp.getTrackPublication(Track.Source.Camera)
-    if (pub?.track) n += 1
-  }
-  if (session.screenShareOn) {
-    const pub = lp.getTrackPublication(Track.Source.ScreenShare)
-    if (pub?.track) n += 1
-  }
-  for (const rp of room.remoteParticipants.values()) {
-    for (const source of VISUAL_SOURCES) {
-      const pub = rp.getTrackPublication(source)
-      if (pub?.isSubscribed && pub.track) n += 1
-    }
-  }
-  return n
-}
-
-export const videoTileCount = derived([currentVoiceSession, voiceState], ([$session, $state]) => {
-  if ($state !== VoiceState.Connected || !$session) return 0
-  return countLiveVisualFeeds($session)
-})
-
-export const toggleCamera = async () => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-
-  const cameraOn = !session.cameraOn
-  if (!cameraOn) {
-    session.room.localParticipant.setCameraEnabled(false)
-    currentVoiceSession.set({...session, cameraOn})
-    return
-  }
-
-  try {
-    await session.room.localParticipant.setCameraEnabled(true)
-    currentVoiceSession.set({...session, cameraOn})
-  } catch (e) {
-    pushToast({theme: "error", message: "Could not access camera"})
-  }
-}
-
-export const toggleScreenShare = async () => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-
-  const screenShareOn = !session.screenShareOn
-  if (!screenShareOn) {
-    session.room.localParticipant.setScreenShareEnabled(false)
-    currentVoiceSession.set({...session, screenShareOn})
-    return
-  }
-
-  try {
-    await session.room.localParticipant.setScreenShareEnabled(true)
-    currentVoiceSession.set({...session, screenShareOn})
-  } catch (e) {
-    pushToast({theme: "error", message: "Could not start screen sharing"})
-  }
-}
diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 7a50bdcf..1f69da7a 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -8,14 +8,17 @@
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import VideoCallVideo from "@app/components/VideoCallVideo.svelte"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
+  import {get} from "svelte/store"
   import {
-    currentVoiceSession,
-    currentVoiceRoom,
     VideoCallLayout,
-    videoPrimaryTileKey,
+    isDesktopLayout,
     toggleVideoPrimaryTile,
-    pubkeyFromLiveKitIdentity,
-  } from "@app/voice"
+    videoCallLayout,
+    videoCallViewportSync,
+    ViewportSize,
+    videoPrimaryTileKey,
+  } from "@app/call/video"
+  import {currentVoiceSession, currentVoiceRoom, pubkeyFromLiveKitIdentity} from "@app/call/stores"
 
   type Props = {
     layout: VideoCallLayout
@@ -37,6 +40,23 @@
 
   const {layout, mobile = false, url, h, class: className = ""}: Props = $props()
 
+  $effect(() => {
+    const currentLayout = isDesktopLayout.current ? ViewportSize.Desktop : ViewportSize.Mobile
+    const {previousLayout} = videoCallViewportSync
+    if (previousLayout === undefined) {
+      videoCallViewportSync.previousLayout = currentLayout
+      return
+    }
+    if (previousLayout === currentLayout) return
+    const p = get(videoCallLayout)
+    if (previousLayout === ViewportSize.Desktop && currentLayout === ViewportSize.Mobile) {
+      if (p === VideoCallLayout.Split) videoCallLayout.set(VideoCallLayout.Video)
+    } else if (previousLayout === ViewportSize.Mobile && currentLayout === ViewportSize.Desktop) {
+      if (p === VideoCallLayout.Chat) videoCallLayout.set(VideoCallLayout.Split)
+    }
+    videoCallViewportSync.previousLayout = currentLayout
+  })
+
   const isViewingCurrentCallRoom = $derived(
     $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h,
   )
diff --git a/src/app/components/VideoCallLayoutViewportSync.svelte b/src/app/components/VideoCallLayoutViewportSync.svelte
deleted file mode 100644
index 6fb1fc3d..00000000
--- a/src/app/components/VideoCallLayoutViewportSync.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script module lang="ts">
-  import {MediaQuery} from "svelte/reactivity"
-
-  export const isDesktopLayout = new MediaQuery("min-width: 768px", false)
-</script>
-
-<script lang="ts">
-  import {get} from "svelte/store"
-  import {VideoCallLayout, videoCallLayout} from "@app/voice"
-
-  let prevLayout = $state<boolean | undefined>(undefined)
-
-  $effect(() => {
-    const currentLayout = isDesktopLayout.current
-    if (prevLayout === undefined) {
-      prevLayout = currentLayout
-      return
-    }
-    if (prevLayout === currentLayout) return
-    const p = get(videoCallLayout)
-    if (prevLayout && !currentLayout) {
-      if (p === VideoCallLayout.Split) videoCallLayout.set(VideoCallLayout.Video)
-    } else if (!prevLayout && currentLayout) {
-      if (p === VideoCallLayout.Chat) videoCallLayout.set(VideoCallLayout.Split)
-    }
-    prevLayout = currentLayout
-  })
-</script>
diff --git a/src/app/components/VoiceCallAudioSettingsDialog.svelte b/src/app/components/VoiceCallAudioSettingsDialog.svelte
index 5f86ec26..003d6814 100644
--- a/src/app/components/VoiceCallAudioSettingsDialog.svelte
+++ b/src/app/components/VoiceCallAudioSettingsDialog.svelte
@@ -7,13 +7,8 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import {
-    currentVoiceSession,
-    DeviceKind,
-    supportsAudioOutputSelection,
-    switchVoiceActiveDevice,
-    type VoiceSession,
-  } from "@app/voice"
+  import {currentVoiceSession, type VoiceSession} from "@app/call/stores"
+  import {DeviceKind, supportsAudioOutputSelection, switchVoiceActiveDevice} from "@app/call/voice"
   import {popModal} from "@app/util/modal"
 
   const selectValueForActiveDevice = (session: VoiceSession, kind: DeviceKind): string => {
diff --git a/src/app/components/VoiceRoomItem.svelte b/src/app/components/VoiceRoomItem.svelte
index 26b7f709..965d1ba4 100644
--- a/src/app/components/VoiceRoomItem.svelte
+++ b/src/app/components/VoiceRoomItem.svelte
@@ -12,14 +12,13 @@
   import {makeRoomId} from "@app/core/state"
   import {
     VoiceState,
-    deriveVoiceParticipants,
-    cancelJoinVoiceRoom,
     currentVoiceRoom,
-    voiceState,
     isParticipantSpeaking,
     participantKey,
+    voiceState,
     type VoiceParticipant,
-  } from "@app/voice"
+  } from "@app/call/stores"
+  import {cancelJoinVoiceRoom, deriveVoiceParticipants} from "@app/call/voice"
 
   interface Props {
     url: string
diff --git a/src/app/components/VoiceRoomJoinDialog.svelte b/src/app/components/VoiceRoomJoinDialog.svelte
index 8bba88b5..7da58f63 100644
--- a/src/app/components/VoiceRoomJoinDialog.svelte
+++ b/src/app/components/VoiceRoomJoinDialog.svelte
@@ -14,7 +14,7 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import {AbortError, TimeoutError} from "$lib/util"
   import {displayRoom} from "@app/core/state"
-  import {joinVoiceRoom} from "@app/voice"
+  import {joinVoiceRoom} from "@app/call/voice"
   import {popModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
 
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 40a888bb..56f33e1a 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -19,7 +19,6 @@
   import Button from "@lib/components/Button.svelte"
   import VoiceCallAudioSettingsDialog from "@app/components/VoiceCallAudioSettingsDialog.svelte"
   import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
-  import {isDesktopLayout} from "@app/components/VideoCallLayoutViewportSync.svelte"
   import {
     decodeRelay,
     deriveRoom,
@@ -32,19 +31,20 @@
   import {notifications} from "@app/util/notifications"
   import {makeRoomPath} from "@app/util/routes"
   import {
-    VoiceState,
     VideoCallLayout,
+    isDesktopLayout,
+    toggleCamera,
+    toggleScreenShare,
+    videoCallLayout,
+  } from "@app/call/video"
+  import {
+    VoiceState,
     currentVoiceSession,
     currentVoiceRoom,
     voiceState,
-    videoCallLayout,
     isLocalSpeaking,
-    leaveVoiceRoom,
-    toggleMute,
-    toggleCamera,
-    toggleScreenShare,
-    cancelJoinVoiceRoom,
-  } from "@app/voice"
+  } from "@app/call/stores"
+  import {cancelJoinVoiceRoom, leaveVoiceRoom, toggleMute} from "@app/call/voice"
 
   const {relay, h} = $derived($page.params)
   const url = $derived(relay ? decodeRelay(relay) : undefined)
diff --git a/src/app/core/sync.ts b/src/app/core/sync.ts
index af1651a7..e3a0125a 100644
--- a/src/app/core/sync.ts
+++ b/src/app/core/sync.ts
@@ -55,7 +55,7 @@ import {
   loadFeedsForPubkey,
 } from "@app/core/state"
 import {hasBlossomSupport} from "@app/core/commands"
-import {LIVEKIT_PARTICIPANTS} from "@app/voice"
+import {LIVEKIT_PARTICIPANTS} from "@app/call/voice"
 
 // Utils
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c38febcf..9085728f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -42,7 +42,6 @@
   import {syncKeyboard} from "@app/util/keyboard"
   import {getPageTitle} from "@app/util/title"
   import NewNotificationSound from "@src/app/components/NewNotificationSound.svelte"
-  import VideoCallLayoutViewportSync from "@app/components/VideoCallLayoutViewportSync.svelte"
 
   const {children} = $props()
 
@@ -230,6 +229,5 @@
     <ModalContainer />
     <div class="tippy-target"></div>
     <NewNotificationSound />
-    <VideoCallLayoutViewportSync />
   </div>
 {/await}
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index 7f067506..a3648ef4 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -45,14 +45,8 @@
   } from "@app/core/state"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import VideoCallContent from "@app/components/VideoCallContent.svelte"
-  import {
-    VoiceState,
-    VideoCallLayout,
-    currentVoiceRoom,
-    videoTileCount,
-    videoCallLayout,
-    voiceState,
-  } from "@app/voice"
+  import {VoiceState, currentVoiceRoom, voiceState} from "@app/call/stores"
+  import {VideoCallLayout, videoCallLayout, videoTileCount} from "@app/call/video"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
   import {checked} from "@app/util/notifications"
-- 
2.52.0


From 81ab03311abff0a70c35bb02bb3e9ff83466fd68 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Wed, 8 Apr 2026 11:09:52 -0400
Subject: [PATCH 20/20] Cleanup remaining files

---
 src/app/call/stores.ts                        |  1 -
 src/app/call/video.ts                         | 30 +++++------
 src/app/call/voice.ts                         |  4 +-
 src/app/components/VideoCallContent.svelte    | 28 +++++-----
 ...oCallVideo.svelte => VideoCallTile.svelte} | 14 ++---
 .../VoiceCallAudioSettingsDialog.svelte       | 13 ++---
 src/app/components/VoiceWidget.svelte         | 52 +++++++++----------
 7 files changed, 62 insertions(+), 80 deletions(-)
 rename src/app/components/{VideoCallVideo.svelte => VideoCallTile.svelte} (66%)

diff --git a/src/app/call/stores.ts b/src/app/call/stores.ts
index 95ccc0b8..abe4084e 100644
--- a/src/app/call/stores.ts
+++ b/src/app/call/stores.ts
@@ -47,7 +47,6 @@ export const isParticipantSpeaking = derived(
     $participants.some(sp => participantKey(sp) === participantKey(p)),
 )
 
-/** True when the local user is in LiveKit’s active-speakers list (currently talking). */
 export const isLocalSpeaking = derived(
   [currentVoiceSession, speakingParticipants],
   ([$session, $speaking]) => {
diff --git a/src/app/call/video.ts b/src/app/call/video.ts
index 3a420005..eccd4397 100644
--- a/src/app/call/video.ts
+++ b/src/app/call/video.ts
@@ -71,17 +71,14 @@ export const toggleCamera = async () => {
   if (!session) return
 
   const cameraOn = !session.cameraOn
-  if (!cameraOn) {
-    session.room.localParticipant.setCameraEnabled(false)
-    currentVoiceSession.set({...session, cameraOn})
-    return
-  }
-
   try {
-    await session.room.localParticipant.setCameraEnabled(true)
+    await session.room.localParticipant.setCameraEnabled(cameraOn)
     currentVoiceSession.set({...session, cameraOn})
-  } catch (e) {
-    pushToast({theme: "error", message: "Could not access camera"})
+  } catch {
+    pushToast({
+      theme: "error",
+      message: cameraOn ? "Could not access camera" : "Could not turn off camera",
+    })
   }
 }
 
@@ -90,16 +87,13 @@ export const toggleScreenShare = async () => {
   if (!session) return
 
   const screenShareOn = !session.screenShareOn
-  if (!screenShareOn) {
-    session.room.localParticipant.setScreenShareEnabled(false)
-    currentVoiceSession.set({...session, screenShareOn})
-    return
-  }
-
   try {
-    await session.room.localParticipant.setScreenShareEnabled(true)
+    await session.room.localParticipant.setScreenShareEnabled(screenShareOn)
     currentVoiceSession.set({...session, screenShareOn})
-  } catch (e) {
-    pushToast({theme: "error", message: "Could not start screen sharing"})
+  } catch {
+    pushToast({
+      theme: "error",
+      message: screenShareOn ? "Could not start screen sharing" : "Could not stop screen sharing",
+    })
   }
 }
diff --git a/src/app/call/voice.ts b/src/app/call/voice.ts
index 33449ebc..95cab6a5 100644
--- a/src/app/call/voice.ts
+++ b/src/app/call/voice.ts
@@ -325,7 +325,7 @@ export const leaveVoiceRoom = async () => {
     try {
       await session.room.localParticipant.setCameraEnabled(false)
     } catch {
-      /* pass */
+      pushToast({theme: "error", message: "Error turning off camera."})
     }
   }
 
@@ -333,7 +333,7 @@ export const leaveVoiceRoom = async () => {
     try {
       await session.room.localParticipant.setScreenShareEnabled(false)
     } catch {
-      /* pass */
+      pushToast({theme: "error", message: "Error turning off screen sharing."})
     }
   }
 
diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 1f69da7a..ce65a7ed 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -6,7 +6,7 @@
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
-  import VideoCallVideo from "@app/components/VideoCallVideo.svelte"
+  import VideoCallTile from "@app/components/VideoCallTile.svelte"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import {get} from "svelte/store"
   import {
@@ -28,11 +28,11 @@
     class?: string
   }
 
-  type VideoTile = {
+  type VideoTileData = {
     identity: string
     isLocal: boolean
     trackSid: string
-    attachable: Track | undefined
+    track: Track | undefined
     source: Track.Source.Camera | Track.Source.ScreenShare
   }
 
@@ -75,7 +75,7 @@
     }
 
     const room = session.room
-    const videoTiles: VideoTile[] = []
+    const videoTiles: VideoTileData[] = []
     const user = room.localParticipant
 
     if (session.cameraOn) {
@@ -84,7 +84,7 @@
         identity: user.identity,
         isLocal: true,
         trackSid: localPub?.trackSid ?? "local-camera",
-        attachable: localPub?.track,
+        track: localPub?.track,
         source: Track.Source.Camera,
       })
     }
@@ -95,7 +95,7 @@
         identity: user.identity,
         isLocal: true,
         trackSid: localPub?.trackSid ?? "local-screen",
-        attachable: localPub?.track,
+        track: localPub?.track,
         source: Track.Source.ScreenShare,
       })
     }
@@ -107,7 +107,7 @@
           identity: rp.identity,
           isLocal: false,
           trackSid: camPub.trackSid,
-          attachable: camPub.track,
+          track: camPub.track,
           source: Track.Source.Camera,
         })
       }
@@ -117,7 +117,7 @@
           identity: rp.identity,
           isLocal: false,
           trackSid: screenPub.trackSid,
-          attachable: screenPub.track,
+          track: screenPub.track,
           source: Track.Source.ScreenShare,
         })
       }
@@ -127,7 +127,7 @@
   })
 
   /** Identity + source only — LiveKit can change trackSid after publish, which broke spotlight + stale-key effect. */
-  const tileKey = (t: VideoTile) => `${t.identity}\x1f${t.source}`
+  const tileKey = (t: VideoTileData) => `${t.identity}\x1f${t.source}`
 
   const primaryTile = $derived.by(() => {
     const k = $videoPrimaryTileKey
@@ -160,7 +160,7 @@
     }
   })
 
-  const labelFor = (identity: string, source: VideoTile["source"]) => {
+  const labelFor = (identity: string, source: VideoTileData["source"]) => {
     const pk = pubkeyFromLiveKitIdentity(identity)
     const name = pk ? displayProfileByPubkey(pk) : "Unknown"
     return source === Track.Source.ScreenShare ? `${name} · screen` : name
@@ -183,7 +183,7 @@
   )
 </script>
 
-{#snippet videoTile(tile: VideoTile, layout: TileLayout)}
+{#snippet videoTile(tile: VideoTileData, layout: TileLayout)}
   <div
     class={cx(
       "relative isolate overflow-hidden rounded-box shadow-sm",
@@ -192,9 +192,9 @@
       layout === "strip" && "aspect-video w-44 shrink-0",
       tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
     )}>
-    {#if tile.attachable}
-      <VideoCallVideo
-        track={tile.attachable}
+    {#if tile.track}
+      <VideoCallTile
+        track={tile.track}
         muted={tile.isLocal}
         fit={tile.source === Track.Source.ScreenShare ? "contain" : "cover"}
         class="pointer-events-none absolute inset-0" />
diff --git a/src/app/components/VideoCallVideo.svelte b/src/app/components/VideoCallTile.svelte
similarity index 66%
rename from src/app/components/VideoCallVideo.svelte
rename to src/app/components/VideoCallTile.svelte
index ec42547e..6f8db1f9 100644
--- a/src/app/components/VideoCallVideo.svelte
+++ b/src/app/components/VideoCallTile.svelte
@@ -11,21 +11,21 @@
 
   const {track, muted = true, fit = "cover", class: className = ""}: Props = $props()
 
-  let el = $state<HTMLVideoElement | undefined>()
+  let videoElement = $state<HTMLVideoElement | undefined>()
 
   $effect(() => {
-    const v = el
-    const t = track
-    if (!v) return
-    t.attach(v)
+    const element = videoElement
+    const activeTrack = track
+    if (!element) return
+    activeTrack.attach(element)
     return () => {
-      t.detach(v)
+      activeTrack.detach(element)
     }
   })
 </script>
 
 <video
-  bind:this={el}
+  bind:this={videoElement}
   class={cx("h-full w-full", fit === "contain" ? "object-contain" : "object-cover", className)}
   playsinline
   {muted}></video>
diff --git a/src/app/components/VoiceCallAudioSettingsDialog.svelte b/src/app/components/VoiceCallAudioSettingsDialog.svelte
index 003d6814..a5fab918 100644
--- a/src/app/components/VoiceCallAudioSettingsDialog.svelte
+++ b/src/app/components/VoiceCallAudioSettingsDialog.svelte
@@ -41,16 +41,9 @@
   }
 
   $effect(() => {
-    void loadDevices()
-    const md = navigator.mediaDevices
-    if (!md?.addEventListener) return
-    const onDeviceChange = () => {
-      void loadDevices()
-    }
-    md.addEventListener("devicechange", onDeviceChange)
-    return () => {
-      md.removeEventListener("devicechange", onDeviceChange)
-    }
+    loadDevices()
+    navigator.mediaDevices?.addEventListener?.("devicechange", loadDevices)
+    return () => navigator.mediaDevices?.removeEventListener?.("devicechange", loadDevices)
   })
 
   $effect(() => {
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 56f33e1a..c8601644 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -53,6 +53,14 @@
   )
   const routeDisplayedRoom = $derived($displayedRoomStore)
 
+  const isViewingCurrentVoiceRoom = $derived(
+    $currentVoiceRoom !== undefined &&
+      url !== undefined &&
+      typeof h === "string" &&
+      $currentVoiceRoom.url === url &&
+      $currentVoiceRoom.h === h,
+  )
+
   const targetRoom = $derived.by((): Room | undefined => {
     if ($voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected) {
       return $currentVoiceRoom
@@ -90,26 +98,17 @@
     pushModal(VoiceCallAudioSettingsDialog)
   }
 
-  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 showChatButton = $derived($voiceState === VoiceState.Connected && isViewingCurrentVoiceRoom)
 
   const isChatPanelActive = $derived(
-    showVoiceLayoutToggle &&
-      ((!isDesktopLayout.current &&
-        ($videoCallLayout === VideoCallLayout.Chat ||
-          $videoCallLayout === VideoCallLayout.Split)) ||
-        (isDesktopLayout.current && $videoCallLayout === VideoCallLayout.Split)),
+    showChatButton &&
+      (isDesktopLayout.current
+        ? $videoCallLayout === VideoCallLayout.Split
+        : $videoCallLayout === VideoCallLayout.Chat),
   )
 
   const onChatToggle = () => {
-    if (!showVoiceLayoutToggle) return
+    if (!showChatButton) return
     if (isDesktopLayout.current) {
       videoCallLayout.update(p =>
         p === VideoCallLayout.Split ? VideoCallLayout.Video : VideoCallLayout.Split,
@@ -128,17 +127,6 @@
   const mediaToggleClass = "center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
 </script>
 
-{#snippet mutedSlash(show: boolean)}
-  {#if show}
-    <span
-      class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
-      aria-hidden="true">
-      <span class="h-[1.3px] w-[150%] max-w-none shrink-0 -rotate-45 rounded-full bg-current"
-      ></span>
-    </span>
-  {/if}
-{/snippet}
-
 {#if targetRoom}
   <div
     in:fly={{y: 60, duration: 350}}
@@ -163,7 +151,7 @@
           </span>
         </div>
       </button>
-      {#if showVoiceLayoutToggle}
+      {#if showChatButton}
         <Button
           data-tip="Toggle Chat"
           class={cx(
@@ -206,7 +194,15 @@
           onclick={toggleMute}>
           <span class="relative inline-flex items-center justify-center overflow-visible">
             <Icon icon={Microphone} size={4} />
-            {@render mutedSlash($currentVoiceSession.muted)}
+            {#if $currentVoiceSession.muted}
+              <span
+                class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
+                aria-hidden="true">
+                <span
+                  class="h-[1.3px] w-[150%] max-w-none shrink-0 -rotate-45 rounded-full bg-current"
+                ></span>
+              </span>
+            {/if}
           </span>
         </Button>
         <Button
-- 
2.52.0