style: Navigation tooltip improvements and Firefox fix

- Refactor PrimaryNavItem and SecondaryNavItem to use 'cx' utility. - Add tooltip support to SecondaryNavItem and SpaceMenu room items. - Remove hardcoded tooltip colors from app.css. - Fix Firefox PrimaryNav tooltip visibility by increasing z-index and adding isolation: isolate.
feat: robust navigation tooltips for Firefox/Zen compatibility (#129 )
2026-04-04 23:31:11 +05:30 · 2026-04-04 03:55:58 +05:30 · 2026-04-03 20:41:08 +05:30
17 changed files with 96 additions and 831 deletions
@@ -50,7 +50,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;
 }

 [data-theme] {
@@ -395,35 +394,6 @@ progress[value]::-webkit-progress-value {
  @apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))];
 }

-.cw-video-call-content {
-  @apply w-full md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))];
-}
-
-/* Voice: desktop split — plain CSS so / in calc is not parsed as Tailwind slash syntax */
-.cw-split-video {
-  width: 100%;
-}
-
-.cw-split-chat {
-  width: 100%;
-}
-
-@media (min-width: 768px) {
-  .cw-split-video {
-    left: 18.5rem;
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-
-  .cw-split-chat {
-    left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2);
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-}
-
 .cw-full {
  @apply w-full md:left-[4rem] md:w-[calc(100%-4rem-var(--sair))];
 }
@@ -460,19 +430,6 @@ body.keyboard-open .hide-on-keyboard {
  @apply min-w-0;
 }

-.chat__compose-zone.cw-video-call-content {
-  @apply md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))];
-}
-
-@media (min-width: 768px) {
-  .chat__compose-zone.cw-split-chat {
-    left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2);
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-}
-
 .chat__scroll-down {
  @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
 }
@@ -32,18 +32,14 @@
 </script>

 <div
-  class="ml-sai mt-sai mb-sai relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
+  class="ml-sai mt-sai mb-sai relative z-popover isolate hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
  <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
    <PrimaryNavSpaces />
    {#if PLATFORM_RELAYS.length > 0}
      <Divider />
    {/if}
-    <div>
-      <PrimaryNavItem
-        title="Settings"
-        href="/settings/profile"
-        prefix="/settings"
-        class="tooltip-right">
+    <div class="flex flex-col">
+      <PrimaryNavItem title="Settings" href="/settings/profile" prefix="/settings">
        {#if $userProfile?.picture}
          <ImageIcon alt="Settings" src={$userProfile?.picture} class="rounded-full" size={10} />
        {:else}
@@ -53,11 +49,10 @@
      <PrimaryNavItem
        title="Messages"
        onclick={chatHandler}
-        class="tooltip-right"
        notification={$notifications.has("/chat")}>
        <ImageIcon alt="Messages" src={Letter} size={8} />
      </PrimaryNavItem>
-      <PrimaryNavItem title="Search" href="/people" class="tooltip-right">
+      <PrimaryNavItem title="Search" href="/people">
        <ImageIcon alt="Search" src={Magnifier} size={8} />
      </PrimaryNavItem>
    </div>
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {displayRelayUrl} from "@welshman/util"
+  import {deriveRelayDisplay} from "@welshman/app"
  import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
  import RelayIcon from "@app/components/RelayIcon.svelte"
  import {makeSpacePath, goToSpace} from "@app/util/routes"
@@ -12,11 +12,13 @@
  const {url}: Props = $props()

  const onClick = () => goToSpace(url)
+
+  const display = $derived(deriveRelayDisplay(url))
 </script>

 <PrimaryNavItem
  onclick={onClick}
-  title={displayRelayUrl(url)}
+  title={$display}
  class="tooltip-right"
  notification={$notifications.has(makeSpacePath(url))}>
  <RelayIcon {url} size={10} class="rounded-full" />
@@ -23,7 +23,7 @@
  {#each PLATFORM_RELAYS as url (url)}
    <PrimaryNavItemSpace {url} />
  {:else}
-    <PrimaryNavItem title="Home" href="/home" class="tooltip-right">
+    <PrimaryNavItem title="Home" href="/home">
      <ImageIcon alt="Home" src={PLATFORM_LOGO} class="rounded-full" size={10} />
    </PrimaryNavItem>
    <Divider />
@@ -33,7 +33,6 @@
    <PrimaryNavItem
      href="/spaces"
      title="All Spaces"
-      class="tooltip-right"
      prefix="no-highlight"
      notification={otherSpaceNotifications}>
      <ImageIcon alt="All Spaces" src={Widget} size={8} />
@@ -1,7 +1,7 @@
 <script lang="ts">
  import {derived} from "svelte/store"
  import {displayRelayUrl, EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
-  import {deriveRelay, createSearch, pubkey} from "@welshman/app"
+  import {deriveRelay, deriveRelayDisplay, createSearch, pubkey} from "@welshman/app"
  import {fly} from "@lib/transition"
  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
@@ -64,6 +64,7 @@
  const {url} = $props()

  const relay = deriveRelay(url)
+  const display = deriveRelayDisplay(url)
  const chatPath = makeSpacePath(url, "chat")
  const goalsPath = makeSpacePath(url, "goals")
  const threadsPath = makeSpacePath(url, "threads")
@@ -141,7 +142,9 @@
        class="relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100"
        onclick={openMenu}>
        <div class="flex items-center justify-between">
-          <strong class="flex items-center gap-1 relative">
+          <strong
+            class="flex items-center gap-1 relative tooltip tooltip-right"
+            data-tip={$display}>
            <RelayName {url} class="ellipsize" />
            <div
              class="absolute -right-3 top-0 h-2 w-2 rounded-full bg-primary transition-all opacity-0"
@@ -24,12 +24,13 @@
  const shouldNotifyForRoom = deriveShouldNotify(url, h)
  const showDifferenceIcon = $derived($shouldNotifyForRoom !== $shouldNotifyForSpace)
  const notification = $derived($shouldNotifyForRoom ? $notifications.has(path) : false)
+  const roomName = $derived($room?.name || h)
 </script>

 {#if roomType === RoomType.Voice}
  <VoiceRoomItem {url} {h} {replaceState} {notification} />
 {:else}
-  <SecondaryNavItem href={path} {replaceState} {notification}>
+  <SecondaryNavItem href={path} title={roomName} {replaceState} {notification}>
    <RoomNameWithImage {url} {h} />
    {#if showDifferenceIcon}
      <Icon icon={$shouldNotifyForRoom ? Bell : BellOff} size={4} class="opacity-50" />
@@ -1,257 +0,0 @@
-<script lang="ts">
-  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 VoiceWidget from "@app/components/VoiceWidget.svelte"
-  import {
-    currentVoiceSession,
-    currentVoiceRoom,
-    videoCallLayoutRevision,
-    videoPrimaryTileKey,
-    toggleVideoPrimaryTile,
-    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
-    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)
-
-  const showPanel = $derived(visible && roomMatches)
-
-  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,
-        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 camPub = rp.getTrackPublication(Track.Source.Camera)
-      if (camPub?.isSubscribed && camPub.track) {
-        out.push({
-          identity: rp.identity,
-          isLocal: false,
-          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,
-        })
-      }
-    }
-
-    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)
-      if (pk) loadProfile(pk)
-    }
-  })
-
-  const labelFor = (identity: string, source: Tile["source"]) => {
-    const pk = pubkeyFromLiveKitIdentity(identity)
-    const name = pk ? displayProfileByPubkey(pk) : "Unknown"
-    return source === Track.Source.ScreenShare ? `${name} · screen` : name
-  }
-
-  const showTileGrid = $derived(tiles.length > 0)
-
-  const spotlightHandlerFor = (key: string) => () => {
-    toggleVideoPrimaryTile(key)
-  }
-
-  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",
-      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",
-      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",
-      className,
-    ),
-  )
-</script>
-
-{#snippet videoTile(tile: Tile, layout: TileLayout)}
-  <div
-    class={cx(
-      "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",
-    )}>
-    {#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}
-      {@const pinned = $videoPrimaryTileKey === tileKey(tile)}
-      <Button
-        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>
-    {/if}
-  </div>
-{/snippet}
-
-{#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}
@@ -1,31 +0,0 @@
-<script lang="ts">
-  import type {Track} from "livekit-client"
-  import cx from "classnames"
-
-  type Props = {
-    track: Track
-    muted?: boolean
-    fit?: "cover" | "contain"
-    class?: string
-  }
-
-  const {track, muted = true, fit = "cover", 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", fit === "contain" ? "object-contain" : "object-cover", className)}
-  playsinline
-  {muted}></video>
@@ -26,10 +26,8 @@

  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
@@ -37,25 +35,16 @@
      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(() => {
-    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(() => {
@@ -66,7 +55,6 @@
    }
    selectedInput = selectValueForActiveDevice(session, DeviceKind.AudioInput)
    selectedOutput = selectValueForActiveDevice(session, DeviceKind.AudioOutput)
-    selectedVideo = selectValueForActiveDevice(session, DeviceKind.VideoInput)
  })

  const onInputChange = () => {
@@ -77,10 +65,6 @@
    void switchVoiceActiveDevice(DeviceKind.AudioOutput, selectedOutput)
  }

-  const onVideoChange = () => {
-    void switchVoiceActiveDevice(DeviceKind.VideoInput, selectedVideo)
-  }
-
  const onDone = () => {
    popModal()
  }
@@ -92,8 +76,8 @@
 <Modal>
  <ModalBody>
    <ModalHeader>
-      <ModalTitle>Call settings</ModalTitle>
-      <ModalSubtitle>Microphone, speaker, and camera for this call.</ModalSubtitle>
+      <ModalTitle>Audio settings</ModalTitle>
+      <ModalSubtitle>Choose microphone and speaker for this call.</ModalSubtitle>
    </ModalHeader>
    <div class="flex flex-col gap-4 pt-2">
      <FieldInline>
@@ -136,25 +120,6 @@
          {/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>
@@ -1,18 +1,13 @@
 <script lang="ts">
  import {readable} from "svelte/store"
-  import {fade, fly} from "svelte/transition"
-  import {browser} from "$app/environment"
+  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 Videocamera from "@assets/icons/videocamera.svg?dataurl"
-  import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
-  import Monitor from "@assets/icons/monitor.svg?dataurl"
+  import MicrophoneOff from "@assets/icons/microphone-off.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"
@@ -28,20 +23,14 @@
    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,
    currentVoiceSession,
    currentVoiceRoom,
    voiceState,
-    voiceMobileRoomPanel,
-    voiceDesktopRoomPanel,
-    isLocalSpeaking,
    leaveVoiceRoom,
    toggleMute,
-    toggleCamera,
-    toggleScreenShare,
    cancelJoinVoiceRoom,
  } from "@app/voice"

@@ -77,121 +66,29 @@
    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 = () => {
+  const openAudioSettings = () => {
    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 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>

-{#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}}
    out:fly={{y: 60, duration: 250}}
    class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
-    <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 Chat"
-          class={cx(
-            mediaToggleClass,
-            "relative shrink-0 overflow-visible",
-            layoutToggleActive && "text-primary",
-          )}
-          onclick={onLayoutToggle}>
-          <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>
+    <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>
-    <div class="flex flex-wrap items-center gap-2">
+    <div class="flex items-center gap-1">
      {#if $voiceState === VoiceState.Joining}
        <span class="loading loading-spinner loading-sm"></span>
        <Button
@@ -203,35 +100,16 @@
      {:else if $voiceState === VoiceState.Connected && $currentVoiceSession}
        <Button
          data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
-          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",
-          )}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.muted
+            ? 'btn-error'
+            : 'btn-ghost'}"
          onclick={toggleMute}>
-          <span class="relative inline-flex items-center justify-center overflow-visible">
-            <Icon icon={Microphone} size={4} />
-            {@render mutedSlash($currentVoiceSession.muted)}
-          </span>
+          <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
        </Button>
        <Button
-          data-tip={$currentVoiceSession.cameraOn ? "Turn off camera" : "Turn on camera"}
-          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={cx(mediaToggleClass, $currentVoiceSession.screenShareOn && "text-primary")}
-          onclick={toggleScreenShare}>
-          <Icon icon={Monitor} size={4} />
-        </Button>
-        <Button
-          data-tip="Call settings"
+          data-tip="Audio settings"
          class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
-          onclick={openCallSettings}>
+          onclick={openAudioSettings}>
          <Icon icon={Settings} size={4} />
        </Button>
        <Button
@@ -4,13 +4,12 @@
 */
 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,8 +32,6 @@ export type VoiceSession = {
  h: string
  room: LiveKitRoom
  muted: boolean
-  cameraOn: boolean
-  screenShareOn: boolean
 }

 export type Pubkey = string
@@ -54,7 +51,6 @@ const LIVEKIT_DEFAULT_DEVICE_ID = "default"
 export enum DeviceKind {
  AudioInput = "audioinput",
  AudioOutput = "audiooutput",
-  VideoInput = "videoinput",
 }

 export const switchVoiceActiveDevice = async (
@@ -75,9 +71,6 @@ export const switchVoiceActiveDevice = async (
      case DeviceKind.AudioOutput:
        label = "speaker"
        break
-      case DeviceKind.VideoInput:
-        label = "camera"
-        break
    }
    pushToast({theme: "error", message: `Error changing ${label}`})
  }
@@ -87,31 +80,8 @@ 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. */
-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) => {
  participantPubkeyMap.update(m => {
    const next = new Map(m)
@@ -146,16 +116,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]) => {
-    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,
@@ -237,10 +197,7 @@ const setUpMicrophone = async (
 }

 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 =
@@ -259,16 +216,11 @@ 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}[]) => {
@@ -289,18 +241,6 @@ 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 = () => {
@@ -338,7 +278,6 @@ 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 {
@@ -362,14 +301,7 @@ export const joinVoiceRoom = async (

    const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)

-    currentVoiceSession.set({
-      url,
-      h,
-      room: liveKitRoom,
-      muted,
-      cameraOn: false,
-      screenShareOn: false,
-    })
+    currentVoiceSession.set({url, h, room: liveKitRoom, muted})
    voiceState.set(VoiceState.Connected)
    playJoinSound()
  } catch (e) {
@@ -388,27 +320,8 @@ 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 */
-    }
-  }
-
-  if (session.screenShareOn) {
-    try {
-      await session.room.localParticipant.setScreenShareEnabled(false)
-    } catch {
-      /* pass */
-    }
-  }
-
  voiceState.set(VoiceState.Disconnected)
-  videoCallLayoutRevision.set(0)
-  videoPrimaryTileKey.set(undefined)
  currentVoiceSession.set(undefined)
-  resetVoiceRoomPanels()
  session.room.disconnect()
  speakingParticipants.set([])
  participantPubkeyMap.set(new Map())
@@ -439,76 +352,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, videoCallLayoutRevision],
-  ([$session, $state, _rev]) => {
-    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})
-    bumpVideoCallLayoutRevision()
-    return
-  }
-
-  try {
-    await session.room.localParticipant.setCameraEnabled(true)
-    currentVoiceSession.set({...session, cameraOn})
-    bumpVideoCallLayoutRevision()
-  } 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})
-    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"})
-  }
-}
@@ -14,7 +14,6 @@
    style?: string
    disabled?: boolean
    "data-tip"?: string
-    "aria-pressed"?: boolean
  } = $props()

  const className = $derived(`text-left ${restProps.class}`)
@@ -5,19 +5,14 @@
  interface Props {
    element?: Element
    children?: Snippet
-    /** Desktop voice: chat occupies the right half in split view. */
-    contentFrame?: "default" | "split-right"
    [key: string]: any
  }

-  let {children, element = $bindable(), contentFrame = "default", ...props}: Props = $props()
+  let {children, element = $bindable(), ...props}: Props = $props()

-  const className = $derived(
-    cx(
-      props.class,
-      "scroll-container cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
-      contentFrame === "split-right" ? "cw-split-chat" : "cw",
-    ),
+  const className = cx(
+    props.class,
+    "scroll-container cw cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
  )
 </script>

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
  import {page} from "$app/stores"
  import Button from "@lib/components/Button.svelte"

@@ -13,32 +14,35 @@
  } = $props()

  const active = $derived($page.url?.pathname?.startsWith(prefix || href || "bogus"))
+
+  const wrapperClass = $derived(
+    cx("relative h-14 w-14 p-1", {
+      "tooltip tooltip-right": title,
+    }),
+  )
+
+  const innerClass = $derived(
+    cx(
+      "flex h-full w-full cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-base-300",
+      restProps.class,
+    ),
+  )
 </script>

-{#if onclick}
-  <Button {onclick} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
-      class:bg-base-300={active}
-      class:tooltip={title}
-      data-tip={title}>
+<div class={wrapperClass} data-tip={title}>
+  {#if onclick}
+    <Button {onclick} class={innerClass}>
      {@render children?.()}
      {#if !active && notification}
        <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
      {/if}
-    </div>
-  </Button>
-{:else}
-  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
-      class:bg-base-300={active}
-      class:tooltip={title}
-      data-tip={title}>
+    </Button>
+  {:else}
+    <a {href} class={innerClass}>
      {@render children?.()}
      {#if !active && notification}
        <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
      {/if}
-    </div>
-  </a>
-{/if}
+    </a>
+  {/if}
+</div>
@@ -21,37 +21,40 @@
 </style>

 <script lang="ts">
+  import cx from "classnames"
  import {fade} from "@lib/transition"
  import {page} from "$app/stores"

-  const {children, href = "", notification = false, replaceState = false, ...restProps} = $props()
+  const {
+    children,
+    href = "",
+    title = "",
+    notification = false,
+    replaceState = false,
+    ...restProps
+  } = $props()

  const active = $derived($page.url.pathname === href)
+  const wrapperClass = $derived(
+    cx(restProps.class, "relative flex flex-shrink-0 items-center gap-3 text-left transition-all", {
+      "hover:bg-base-100 hover:text-base-content": true,
+      "text-base-content bg-base-100": active,
+      "tooltip tooltip-right": title,
+    }),
+  )
 </script>

 {#if href}
-  <a
-    {href}
-    {...restProps}
-    data-sveltekit-replacestate={replaceState}
-    class="{restProps.class} relative flex flex-shrink-0 items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
-    class:text-base-content={active}
-    class:bg-base-100={active}>
+  <a {href} {...restProps} data-tip={title} data-sveltekit-replacestate={replaceState} class={wrapperClass}>
    {@render children?.()}
    {#if notification}
-      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
-      </div>
+      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
    {/if}
  </a>
 {:else}
-  <button
-    {...restProps}
-    class="{restProps.class} relative flex flex-shrink-0 w-full items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
-    class:text-base-content={active}
-    class:bg-base-100={active}>
+  <button {...restProps} data-tip={title} class={wrapperClass}>
    {#if notification}
-      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
-      </div>
+      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
    {/if}
    {@render children?.()}
  </button>
@@ -1,14 +1,7 @@
-<script lang="ts">
-  import type {Snippet} from "svelte"
+<script>
  import {page} from "$app/stores"
-
-  type Props = {
-    children?: Snippet
-  }
-
-  const {children}: Props = $props()
 </script>

 {#key $page.url.searchParams.get("at")}
-  {@render children?.()}
+  <slot />
 {/key}
@@ -19,7 +19,6 @@
  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"
@@ -51,15 +50,7 @@
    userSettingsValues,
  } from "@app/core/state"
  import VoiceWidget from "@app/components/VoiceWidget.svelte"
-  import VideoCallContent from "@app/components/VideoCallContent.svelte"
-  import {
-    VoiceState,
-    currentVoiceRoom,
-    videoTileCount,
-    voiceMobileRoomPanel,
-    voiceDesktopRoomPanel,
-    voiceState,
-  } from "@app/voice"
+  import {VoiceState, voiceState} from "@app/voice"
  import {makeFeed} from "@app/core/requests"
  import {popKey} from "@lib/implicit"
  import {checked} from "@app/util/notifications"
@@ -72,50 +63,6 @@
  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,
-  )
-
-  const showMobileVideoPanel = $derived(
-    isVoiceRoom && $voiceState === VoiceState.Connected && $voiceMobileRoomPanel === "video",
-  )
-
-  const pageContentFrame = $derived<"default" | "split-right">(
-    voiceConnectedHere && $voiceDesktopRoomPanel === "split" ? "split-right" : "default",
-  )
-
-  const pageContentHiddenDesktopVideoOnly = $derived(
-    voiceConnectedHere && $voiceDesktopRoomPanel === "video",
-  )
-
-  let prevVideoTileCount = $state(0)
-
-  $effect(() => {
-    if ($voiceState !== VoiceState.Connected) {
-      voiceMobileRoomPanel.set("chat")
-      voiceDesktopRoomPanel.set("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) {
-      voiceDesktopRoomPanel.set("video")
-      voiceMobileRoomPanel.set("video")
-    }
-    prevVideoTileCount = n
-  })
  const shouldProtect = canEnforceNip70(url)
  const membershipStatus = deriveUserRoomMembershipStatus(url, h)
  const at = $derived(parseInt($page.url.searchParams.get("at")!))
@@ -429,16 +376,7 @@
  {/snippet}
 </SpaceBar>

-<PageContent
-  bind:element
-  onscroll={onScroll}
-  contentFrame={pageContentFrame}
-  class={cx(
-    showMobileVideoPanel
-      ? "hidden flex-col-reverse pt-4 md:flex md:flex-col-reverse"
-      : "flex flex-col-reverse pt-4",
-    pageContentHiddenDesktopVideoOnly && "md:hidden",
-  )}>
+<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
  <div bind:this={dynamicPadding}></div>
  {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
    <div class="py-20">
@@ -508,26 +446,8 @@
  {/if}
 </PageContent>

-{#if voiceConnectedHere}
-  <VideoCallContent
-    variant="desktop-split"
-    {url}
-    {h}
-    visible={$voiceDesktopRoomPanel === "split"} />
-  <VideoCallContent variant="desktop-full" {url} {h} visible={$voiceDesktopRoomPanel === "video"} />
-{/if}
-
-{#if isVoiceRoom && $voiceState === VoiceState.Connected}
-  <VideoCallContent variant="mobile" {url} {h} visible={$voiceMobileRoomPanel === "video"} />
-{/if}
-
 <div
-  class={cx(
-    "chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0",
-    voiceConnectedHere && $voiceDesktopRoomPanel === "split" && "cw-split-chat",
-    pageContentHiddenDesktopVideoOnly && "md:hidden",
-    showMobileVideoPanel && "max-md:hidden",
-  )}
+  class="chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0"
  bind:this={chatCompose}>
  <div class="chat__compose-inner min-w-0 flex-1">
    {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
@@ -576,8 +496,7 @@
    {/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")}>
+    <div class="hide-on-keyboard flex-shrink-0 p-2 md:hidden">
      <VoiceWidget />
    </div>
  {/if}
Author	SHA1	Message	Date
priyanshu_bharti	28f691753b	style: Navigation tooltip improvements and Firefox fix - Refactor PrimaryNavItem and SecondaryNavItem to use 'cx' utility. - Add tooltip support to SecondaryNavItem and SpaceMenu room items. - Remove hardcoded tooltip colors from app.css. - Fix Firefox PrimaryNav tooltip visibility by increasing z-index and adding isolation: isolate.	2026-04-04 23:31:11 +05:30
priyanshu_bharti	89042f3e2a	feat: robust navigation tooltips for Firefox/Zen compatibility (#129 )	2026-04-04 03:55:58 +05:30
priyanshu_bharti	2c3e5b2130	feat: show space name on hover in primary nav (#129 )	2026-04-03 20:41:08 +05:30