Cleanup remaining files

Factor video code and stores out of voice.ts
Clean up VideoCallContent
2026-04-08 11:17:23 -04:00 · 2026-04-08 11:17:23 -04:00 · 2026-04-08 11:17:23 -04:00 · 2026-04-08 11:17:23 -04:00 · 2026-04-08 11:17:23 -04:00 · 2026-04-08 11:16:07 -04:00
80 changed files with 1703 additions and 946 deletions
@@ -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>
@@ -24,8 +24,10 @@
 	<false/>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSCameraUsageDescription</key>
+	<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>
@@ -22,6 +22,7 @@
    "@eslint/js": "^9.39.2",
    "@sveltejs/kit": "^2.50.1",
    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@tailwindcss/postcss": "^4.2.2",
    "@tauri-apps/cli": "^2.9.6",
    "@types/eslint": "^9.6.1",
    "autoprefixer": "^10.4.23",
@@ -35,7 +36,7 @@
    "prettier-plugin-svelte": "^3.4.1",
    "svelte": "^5.48.0",
    "svelte-check": "^4.3.5",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.2.2",
    "typescript": "^5.9.3",
    "typescript-eslint": "^8.53.1",
    "vite": "^5.4.21"
@@ -77,7 +78,7 @@
    "@welshman/store": "^0.8.12",
    "@welshman/util": "^0.8.12",
    "compressorjs-next": "^1.1.2",
-    "daisyui": "^4.12.24",
+    "daisyui": "^5.5.19",
    "date-picker-svelte": "^2.17.0",
    "dotenv": "^16.6.1",
    "emoji-picker-element": "^1.28.1",
@@ -87,7 +88,7 @@
    "livekit-client": "^2.17.2",
    "nostr-signer-capacitor-plugin": "github:coracle-social/nostr-signer-capacitor-plugin#main",
    "nostr-tools": "^2.19.4",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.7.2",
    "qr-scanner": "^1.4.2",
    "qrcode": "^1.5.4",
    "throttle-debounce": "^5.0.2",
@@ -1,6 +1,5 @@
 export default {
  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
  },
 }
@@ -1,45 +1,25 @@
-@import "@welshman/editor/index.css";
+@import 'tailwindcss';

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@config "../tailwind.config.js";

-/* Fonts */
-
-@font-face {
-  font-family: "Satoshis";
-  font-style: normal;
-  font-weight: 400;
-  src:
-    local(""),
-    url("/fonts/Satoshi Symbol.ttf") format("truetype");
+@utility pt-sai {
+  padding-top: var(--sait);
 }

-@font-face {
-  font-family: "Lato";
-  font-style: normal;
-  font-weight: 400;
-  src:
-    local(""),
-    url("/fonts/Lato-Regular.ttf") format("truetype");
+@utility pr-sai {
+  padding-right: var(--sair);
 }

-@font-face {
-  font-family: "Lato";
-  font-style: bold;
-  font-weight: 600;
-  src:
-    local(""),
-    url("/fonts/Lato-Bold.ttf") format("truetype");
+@utility pb-sai {
+  padding-bottom: var(--saib);
 }

-@font-face {
-  font-family: "Lato";
-  font-style: italic;
-  font-weight: 400;
-  src:
-    local(""),
-    url("/fonts/Italic.ttf") format("truetype");
+@utility pl-sai {
+  padding-left: var(--sail);
+}
+
+@utility px-sai {
+  @apply pl-sai pr-sai;
 }

 /* root */
@@ -52,98 +32,224 @@
  --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
 }

-[data-theme] {
-  @apply bg-base-300;
-  --base-100: oklch(var(--b1));
-  --base-200: oklch(var(--b2));
-  --base-300: oklch(var(--b3));
-  --base-content: oklch(var(--bc));
-  --primary: oklch(var(--p));
-  --primary-content: oklch(var(--pc));
-  --secondary: oklch(var(--s));
-  --secondary-content: oklch(var(--sc));
-  --neutral: oklch(var(--n));
-  --neutral-content: oklch(var(--nc));
+@utility py-sai {
+  @apply pt-sai pb-sai;
 }

-.mobile [data-tip]::before {
-  display: none !important;
+@utility p-sai {
+  @apply py-sai px-sai;
 }

-/* safe area insets */
+@utility mt-sai {
+  margin-top: var(--sait);
+}

-@layer components {
-  .pt-sai {
-    padding-top: var(--sait);
+@utility mr-sai {
+  margin-right: var(--sair);
+}
+
+@utility mb-sai {
+  margin-bottom: var(--saib);
+}
+
+@utility ml-sai {
+  margin-left: var(--sail);
+}
+
+@utility mx-sai {
+  @apply ml-sai mr-sai;
+}
+
+@utility my-sai {
+  @apply mt-sai mb-sai;
+}
+
+@utility m-sai {
+  @apply my-sai mx-sai;
+}
+
+@utility top-sai {
+  top: var(--sait);
+}
+
+@utility right-sai {
+  right: var(--sair);
+}
+
+@utility bottom-sai {
+  bottom: var(--saib);
+}
+
+@utility left-sai {
+  left: var(--sail);
+}
+
+@utility card2 {
+  @apply rounded-box text-base-content p-4 sm:p-6;
+}
+
+@utility column {
+  @apply flex flex-col;
+}
+
+@utility center {
+  @apply flex items-center justify-center;
+}
+
+@utility row-2 {
+  @apply flex items-center gap-2;
+}
+
+@utility row-3 {
+  @apply flex items-center gap-3;
+}
+
+@utility row-4 {
+  @apply flex items-center gap-4;
+}
+
+@utility col-2 {
+  @apply flex flex-col gap-2;
+}
+
+@utility col-3 {
+  @apply flex flex-col gap-3;
+}
+
+@utility col-4 {
+  @apply flex flex-col gap-4;
+}
+
+@utility col-8 {
+  @apply flex flex-col gap-8;
+}
+
+@utility ellipsize {
+  @apply overflow-hidden text-ellipsis;
+}
+
+@utility content-padding-x {
+  @apply px-4 sm:px-8 md:px-12;
+}
+
+@utility content-padding-t {
+  @apply pt-4 sm:pt-8 md:pt-12;
+}
+
+@utility content-padding-b {
+  @apply pb-4 sm:pb-8 md:pb-12;
+}
+
+@utility content-padding-y {
+  @apply pt-4 sm:pt-8 md:pt-12 pb-4 sm:pb-8 md:pb-12;
+}
+
+@utility content-sizing {
+  @apply m-auto w-full max-w-3xl;
+}
+
+@utility content {
+  @apply m-auto w-full max-w-3xl px-4 sm:px-8 md:px-12 pt-4 sm:pt-8 md:pt-12 pb-4 sm:pb-8 md:pb-12;
+}
+
+@utility heading {
+  @apply text-center text-2xl;
+}
+
+@utility subheading {
+  @apply text-center text-xl;
+}
+
+@utility superheading {
+  @apply text-center text-4xl;
+}
+
+@utility link {
+  @apply text-primary cursor-pointer underline;
+}
+
+/* content visibility */
+
+@utility cv {
+  content-visibility: auto;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@layer utilities {
+  /* Fonts */
+
+  @font-face {
+    font-family: "Satoshis";
+    font-style: normal;
+    font-weight: 400;
+    src:
+      local(""),
+      url("/fonts/Satoshi Symbol.ttf") format("truetype");
  }

-  .pr-sai {
-    padding-right: var(--sair);
+  @font-face {
+    font-family: "Lato";
+    font-style: normal;
+    font-weight: 400;
+    src:
+      local(""),
+      url("/fonts/Lato-Regular.ttf") format("truetype");
  }

-  .pb-sai {
-    padding-bottom: var(--saib);
+  @font-face {
+    font-family: "Lato";
+    font-style: bold;
+    font-weight: 600;
+    src:
+      local(""),
+      url("/fonts/Lato-Bold.ttf") format("truetype");
  }

-  .pl-sai {
-    padding-left: var(--sail);
+  @font-face {
+    font-family: "Lato";
+    font-style: italic;
+    font-weight: 400;
+    src:
+      local(""),
+      url("/fonts/Italic.ttf") format("truetype");
  }

-  .px-sai {
-    @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));
  }

-  .py-sai {
-    @apply pt-sai pb-sai;
+  [data-theme] {
+    @apply bg-base-300;
  }

-  .p-sai {
-    @apply py-sai px-sai;
+  .mobile [data-tip]::before {
+    display: none !important;
  }

-  .mt-sai {
-    margin-top: var(--sait);
-  }
-
-  .mr-sai {
-    margin-right: var(--sair);
-  }
-
-  .mb-sai {
-    margin-bottom: var(--saib);
-  }
-
-  .ml-sai {
-    margin-left: var(--sail);
-  }
-
-  .mx-sai {
-    @apply ml-sai mr-sai;
-  }
-
-  .my-sai {
-    @apply mt-sai mb-sai;
-  }
-
-  .m-sai {
-    @apply my-sai mx-sai;
-  }
-
-  .top-sai {
-    top: var(--sait);
-  }
-
-  .right-sai {
-    right: var(--sair);
-  }
-
-  .bottom-sai {
-    bottom: var(--saib);
-  }
-
-  .left-sai {
-    left: var(--sail);
-  }
+  /* safe area insets */
 }

 /* utilities */
@@ -165,110 +271,18 @@
  @apply bg-base-300 text-base-content transition-colors;
 }

-.card2 {
-  @apply rounded-box p-4 text-base-content sm:p-6;
-}
-
 .card2.card2-sm {
-  @apply p-2 text-base-content sm:p-4;
-}
-
-.column {
-  @apply flex flex-col;
-}
-
-.center {
-  @apply flex items-center justify-center;
-}
-
-.row-2 {
-  @apply flex items-center gap-2;
-}
-
-.row-3 {
-  @apply flex items-center gap-3;
-}
-
-.row-4 {
-  @apply flex items-center gap-4;
-}
-
-.col-2 {
-  @apply flex flex-col gap-2;
-}
-
-.col-3 {
-  @apply flex flex-col gap-3;
-}
-
-.col-4 {
-  @apply flex flex-col gap-4;
-}
-
-.col-8 {
-  @apply flex flex-col gap-8;
-}
-
-.badge {
-  @apply justify-start overflow-hidden text-ellipsis whitespace-nowrap;
-}
-
-.ellipsize {
-  @apply overflow-hidden text-ellipsis;
+  @apply text-base-content p-2 sm:p-4;
 }

 [data-tip]::before {
-  @apply ellipsize;
-}
-
-.content-padding-x {
-  @apply px-4 sm:px-8 md:px-12;
-}
-
-.content-padding-t {
-  @apply pt-4 sm:pt-8 md:pt-12;
-}
-
-.content-padding-b {
-  @apply pb-4 sm:pb-8 md:pb-12;
-}
-
-.content-padding-y {
-  @apply content-padding-t content-padding-b;
-}
-
-.content-sizing {
-  @apply m-auto w-full max-w-3xl;
-}
-
-.content {
-  @apply content-sizing content-padding-x content-padding-y;
-}
-
-.heading {
-  @apply text-center text-2xl;
-}
-
-.subheading {
-  @apply text-center text-xl;
-}
-
-.superheading {
-  @apply text-center text-4xl;
-}
-
-.link {
-  @apply cursor-pointer text-primary underline;
+  @apply overflow-hidden text-ellipsis;
 }

 .input input::placeholder {
  opacity: 0.5;
 }

-.shadow-top-xl {
-  @apply shadow-[0_20px_25px_-5px_rgb(0,0,0,0.1)_0_8px_10px_-6px_rgb(0,0,0,0.1)];
-}
-
 /* tiptap */

 .input-editor,
@@ -278,21 +292,21 @@
 }

 .tiptap {
-  --tiptap-object-bg: var(--neutral);
-  --tiptap-object-fg: var(--neutral-content);
-  --tiptap-active-bg: var(--primary);
-  --tiptap-active-fg: var(--primary-content);
+  --tiptap-object-bg: var(--color-neutral);
+  --tiptap-object-fg: var(--color-neutral-content);
+  --tiptap-active-bg: var(--color-primary);
+  --tiptap-active-fg: var(--color-primary-content);
 }

 .tiptap-suggestions {
-  --tiptap-object-bg: var(--base-100);
-  --tiptap-object-fg: var(--base-content);
-  --tiptap-active-bg: var(--base-300);
-  --tiptap-active-fg: var(--base-content);
+  --tiptap-object-bg: var(--color-base-100);
+  --tiptap-object-fg: var(--color-base-content);
+  --tiptap-active-bg: var(--color-base-300);
+  --tiptap-active-fg: var(--color-base-content);
 }

 .tiptap-suggestions__item {
-  @apply border-l-2 border-solid border-base-100;
+  @apply border-base-100 border-l-2 border-solid;
 }

 .tiptap-suggestions__selected {
@@ -312,13 +326,13 @@
 }

 .note-editor .tiptap {
-  --tiptap-object-bg: var(--base-200);
-  @apply input input-bordered h-auto min-h-32 rounded-box p-[.65rem] pb-6;
+  --tiptap-object-bg: var(--color-base-200);
+  @apply input rounded-box h-auto min-h-32 p-[.65rem] pb-6;
 }

 .input-editor .tiptap {
-  --tiptap-object-bg: var(--base-200);
-  @apply input input-bordered h-auto p-[.65rem];
+  --tiptap-object-bg: var(--color-base-200);
+  @apply input h-auto p-[.65rem];
 }

 /* link-content, based on tiptap */
@@ -330,8 +344,8 @@
  white-space: nowrap;
  border-radius: 3px;
  padding: 0 0.25rem;
-  background-color: var(--base-100);
-  color: var(--base-content);
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
 }

 /* content rendered by welshman/content */
@@ -347,25 +361,25 @@
 /* date input */

 .picker {
-  --date-picker-foreground: var(--base-content);
-  --date-picker-background: var(--base-300);
-  --date-picker-highlight-border: var(--primary);
-  --date-picker-selected-color: var(--primary-content);
-  --date-picker-selected-background: var(--primary);
+  --date-picker-foreground: var(--color-base-content);
+  --date-picker-background: var(--color-base-300);
+  --date-picker-highlight-border: var(--color-primary);
+  --date-picker-selected-color: var(--color-primary-content);
+  --date-picker-selected-background: var(--color-primary);
 }

 .date-time-field {
-  @apply input input-bordered rounded-lg px-0;
+  @apply input rounded-lg px-0;
 }

 .date-time-field input {
-  @apply !h-full !w-full !rounded-lg !border-none !bg-inherit !px-4 !text-inherit;
+  @apply h-full! w-full! rounded-lg! border-none! bg-inherit! px-4! text-inherit!;
 }

 /* tippy popover */

 .tippy-target {
-  @apply pointer-events-none fixed inset-0 z-tooltip;
+  @apply z-tooltip pointer-events-none fixed inset-0;
 }

 .tippy-target > * {
@@ -379,15 +393,15 @@
 /* emoji picker */

 emoji-picker {
-  --background: var(--base-100);
-  --border-color: var(--base-100);
+  --background: var(--color-base-100);
+  --border-color: var(--color-base-100);
  --border-radius: var(--rounded-box);
-  --button-active-background: var(--base-content);
-  --button-hover-background: var(--base-content);
-  --indicator-color: var(--base-content);
-  --input-border-color: var(--base-100);
-  --input-font-color: var(--base-content);
-  --outline-color: var(--base-100);
+  --button-active-background: var(--color-base-content);
+  --button-hover-background: var(--color-base-content);
+  --indicator-color: var(--color-base-content);
+  --input-border-color: var(--color-base-100);
+  --input-font-color: var(--color-base-content);
+  --outline-color: var(--color-base-100);
 }

 /* progress */
@@ -411,7 +425,7 @@ body.keyboard-open .hide-on-keyboard {
 /* chat view */

 .chat__compose {
-  @apply relative z-compose mb-14 flex-grow md:mb-0;
+  @apply relative z-compose mb-14 shrink-0 md:mb-0;
 }

 .chat__compose .chat__compose-inner {
@@ -419,11 +433,5 @@ body.keyboard-open .hide-on-keyboard {
 }

 .chat__scroll-down {
-  @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
-}
-
-/* content visibility */
-
-.cv {
-  content-visibility: auto;
+  @apply pb-sai z-feature fixed right-4 bottom-28 md:bottom-16;
 }
@@ -0,0 +1,57 @@
+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)),
+)
+
+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))
+  },
+)
@@ -0,0 +1,99 @@
+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
+  try {
+    await session.room.localParticipant.setCameraEnabled(cameraOn)
+    currentVoiceSession.set({...session, cameraOn})
+  } catch {
+    pushToast({
+      theme: "error",
+      message: cameraOn ? "Could not access camera" : "Could not turn off camera",
+    })
+  }
+}
+
+export const toggleScreenShare = async () => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+
+  const screenShareOn = !session.screenShareOn
+  try {
+    await session.room.localParticipant.setScreenShareEnabled(screenShareOn)
+    currentVoiceSession.set({...session, screenShareOn})
+  } catch {
+    pushToast({
+      theme: "error",
+      message: screenShareOn ? "Could not start screen sharing" : "Could not stop screen sharing",
+    })
+  }
+}
@@ -4,21 +4,35 @@
 */
 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 {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
@@ -27,30 +41,12 @@ export {checkRelayHasLivekit} from "$lib/livekit"

 export {supportsAudioOutputSelection}

-export type VoiceSession = {
-  url: string
-  h: string
-  room: LiveKitRoom
-  muted: 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 {
  AudioInput = "audioinput",
  AudioOutput = "audiooutput",
+  VideoInput = "videoinput",
 }

 export const switchVoiceActiveDevice = async (
@@ -71,17 +67,14 @@ export const switchVoiceActiveDevice = async (
      case DeviceKind.AudioOutput:
        label = "speaker"
        break
+      case DeviceKind.VideoInput:
+        label = "camera"
+        break
    }
    pushToast({theme: "error", message: `Error changing ${label}`})
  }
 }

-export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
-
-export const currentVoiceRoom = writable<Room | undefined>(undefined)
-
-export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
-
 const addParticipant = (identity: string) => {
  participantPubkeyMap.update(m => {
    const next = new Map(m)
@@ -98,24 +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)),
-)
-
 const fetchLivekitToken = async (
  url: string,
  groupId: string,
@@ -197,7 +172,9 @@ const setUpMicrophone = async (
 }

 const onRoomDisconnected = (reason?: DisconnectReason) => {
+  videoPrimaryTileKey.set(undefined)
  currentVoiceSession.set(undefined)
+  resetVideoCallLayout()
  if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
    voiceState.set(VoiceState.Disconnected)
    const message =
@@ -216,11 +193,16 @@ const onTrackSubscribed = (track: Track) => {
    element.style.display = "none"
    document.body.appendChild(element)
    element.play().catch(() => {})
+  } else if (track.kind === Track.Kind.Video) {
+    triggerVideoFeedCount()
  }
 }

 const onTrackUnsubscribed = (track: Track) => {
  track.detach().forEach(el => el.remove())
+  if (track.kind === Track.Kind.Video) {
+    triggerVideoFeedCount()
+  }
 }

 const onActiveSpeakersChanged = (participants: {identity: string}[]) => {
@@ -241,6 +223,17 @@ 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})
+}
+
 let joinAbortController: AbortController | undefined

 export const cancelJoinVoiceRoom = () => {
@@ -278,6 +271,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 {
@@ -301,7 +295,14 @@ 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,
+      screenShareOn: false,
+    })
    voiceState.set(VoiceState.Connected)
    playJoinSound()
  } catch (e) {
@@ -320,8 +321,26 @@ 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 {
+      pushToast({theme: "error", message: "Error turning off camera."})
+    }
+  }
+
+  if (session.screenShareOn) {
+    try {
+      await session.room.localParticipant.setScreenShareEnabled(false)
+    } catch {
+      pushToast({theme: "error", message: "Error turning off screen sharing."})
+    }
+  }
+
  voiceState.set(VoiceState.Disconnected)
+  videoPrimaryTileKey.set(undefined)
  currentVoiceSession.set(undefined)
+  resetVideoCallLayout()
  session.room.disconnect()
  speakingParticipants.set([])
  participantPubkeyMap.set(new Map())
@@ -38,7 +38,7 @@
    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>

-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
  {#if h && showRoom}
    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
      Posted in #<RoomName {h} {url} />
@@ -155,7 +155,7 @@
      {#snippet input()}
        <div
          class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100">
-          <div class="input-editor flex-grow overflow-hidden">
+          <div class="input-editor grow overflow-hidden">
            <EditorContent {editor} />
          </div>
          <Button data-tip="Add an image" class="center btn tooltip" onclick={selectFiles}>
@@ -19,7 +19,7 @@
  const end = $derived(parseInt(meta.end))
 </script>

-<div class="flex flex-grow flex-wrap justify-between gap-2">
+<div class="flex grow flex-wrap justify-between gap-2">
  <p class="text-xl">{meta.title || meta.name}</p>
  {#if !isNaN(start) && !isNaN(end)}
    {@const startDateDisplay = formatTimestampAsDate(start)}
@@ -23,7 +23,7 @@
  {#if meta.location}
    <span class="flex items-start gap-1">
      <Icon icon={MapPoint} class="mt-[2px]" size={4} />
-      <span class="break-words">{meta.location}</span>
+      <span class="wrap-break-word">{meta.location}</span>
    </span>
  {/if}
 </div>
@@ -43,7 +43,7 @@
  const uploading = writable(false)

  const editorClass = $derived(
-    cx("chat-editor flex-grow overflow-hidden", {
+    cx("chat-editor grow overflow-hidden", {
      "pointer-events-none opacity-50": disabled,
    }),
  )
@@ -35,7 +35,7 @@

 <Button class="flex flex-col justify-start gap-1 w-full" onclick={openChat}>
  <div
-    class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100 {props.class}"
+    class="cursor-pointer border-t border-solid border-base-100 px-3 py-2 transition-colors hover:bg-base-100 {props.class}"
    class:bg-base-100={active}>
    <div class="flex flex-col justify-start gap-1">
      <div class="flex items-center justify-between gap-2">
@@ -42,7 +42,7 @@
    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>

-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
  {#if h && showRoom}
    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
      Posted in #<RoomName {h} {url} />
@@ -172,7 +172,7 @@
          <p>Description*</p>
        {/snippet}
        {#snippet input()}
-          <div class="note-editor flex-grow overflow-hidden">
+          <div class="note-editor grow overflow-hidden">
            <EditorContent {editor} />
          </div>
        {/snippet}
@@ -28,7 +28,7 @@
 </script>

 <div class="flex flex-wrap items-center justify-between gap-2">
-  <div class="flex flex-grow flex-wrap justify-end gap-2">
+  <div class="flex grow flex-wrap justify-end gap-2">
    <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
    <ThunkStatusOrDeleted {event} />
    {#if showActivity}
@@ -150,7 +150,7 @@
    </div>
  {:else}
    <div
-      class="overflow-hidden text-ellipsis break-words"
+      class="overflow-hidden text-ellipsis wrap-break-word"
      style={expandBlock ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
      {#each shortContent as parsed, i}
        {#if isNewline(parsed) && !isBlock(i - 1)}
@@ -101,7 +101,7 @@
      </p>
    </div>
  {:else}
-    <div class="overflow-hidden text-ellipsis break-words">
+    <div class="overflow-hidden text-ellipsis wrap-break-word">
      {#each shortContent as parsed, i}
        {#if isNewline(parsed)}
          <ContentNewline value={parsed.value} />
@@ -45,7 +45,7 @@
    {#if $quote.kind === MESSAGE}
      <div
        class="border-l-2 border-solid border-l-primary py-1 pl-2 opacity-90"
-        style="background-color: color-mix(in srgb, var(--primary) 10%, var(--base-300) 90%);">
+        style="background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-300) 90%);">
        <NoteContentMinimal trimParent {url} event={$quote} />
      </div>
    {:else}
@@ -101,7 +101,7 @@
    {/if}
    <div class="relative">
      <pre class="card2 card2-sm bg-alt overflow-auto text-xs"><code>{json}</code></pre>
-      <p class="absolute right-2 top-2 flex flex-grow items-center justify-between">
+      <p class="absolute right-2 top-2 flex grow items-center justify-between">
        <Button onclick={copyJson} class="btn btn-neutral btn-sm flex items-center">
          <Icon icon={Copy} /> Copy
        </Button>
@@ -109,6 +109,6 @@
    </div>
  </ModalBody>
  <ModalFooter>
-    <Button class="btn btn-primary flex-grow" onclick={() => history.back()}>Got it</Button>
+    <Button class="btn btn-primary grow" onclick={() => history.back()}>Got it</Button>
  </ModalFooter>
 </Modal>
@@ -87,7 +87,7 @@
  class="left-content bottom-sai right-sai ml-2 pl-2 fixed z-feature">
  <div class="card2 mx-2 my-2 bg-alt shadow-md">
    <div class="relative">
-      <div class="note-editor flex-grow overflow-hidden">
+      <div class="note-editor grow overflow-hidden">
        <EditorContent {autofocus} {editor} />
      </div>
      <Button
@@ -30,7 +30,7 @@
    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>

-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
  {#if h && showRoom}
    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
      Posted in #<RoomName {h} {url} />
@@ -146,7 +146,7 @@
            <p>Details*</p>
          {/snippet}
          {#snippet input()}
-            <div class="note-editor flex-grow overflow-hidden">
+            <div class="note-editor grow overflow-hidden">
              <EditorContent {editor} />
            </div>
          {/snippet}
@@ -168,7 +168,7 @@
            Goal Amount (sats)*
          {/snippet}
          {#snippet input()}
-            <div class="flex flex-grow justify-end">
+            <div class="flex grow justify-end">
              <label class="input input-bordered flex items-center gap-2">
                <Icon icon={Bolt} />
                <input bind:value={amount} type="number" class="w-28" />
@@ -23,7 +23,7 @@
      <ModalTitle>Unable to Zap</ModalTitle>
    </ModalHeader>
    <p>
-      Zapping <ProfileLink {pubkey} class="!text-primary" /> isn't possible right now because
+      Zapping <ProfileLink {pubkey} class="text-primary!" /> isn't possible right now because
      {#if $zapper}
        their zap receiver isn't correctly set up.
      {:else}
@@ -97,10 +97,10 @@
          tabindex="-1"
          onmousedown={stopPropagation(onClear)}
          ontouchstart={stopPropagation(onClear)}>
-          <Icon icon={CloseCircle} class="scale-150 !bg-base-300" />
+          <Icon icon={CloseCircle} class="scale-150 bg-base-300!" />
        </span>
      {:else}
-        <Icon icon={AddCircle} class="scale-150 !bg-base-300" />
+        <Icon icon={AddCircle} class="scale-150 bg-base-300!" />
      {/if}
    </div>
    {#if !url}
@@ -9,10 +9,10 @@

 <div class="flex items-start gap-4">
  <CalendarEventDate event={props.event} />
-  <div class="flex flex-grow flex-col">
+  <div class="flex grow flex-col">
    <CalendarEventHeader event={props.event} />
    <div class="flex py-2 opacity-50">
-      <div class="h-px flex-grow bg-base-content opacity-25"></div>
+      <div class="h-px grow bg-base-content opacity-25"></div>
    </div>
    <Content {...props} />
  </div>
@@ -17,7 +17,7 @@
 </script>

 <div class="flex flex-col">
-  <div class="flex flex-grow flex-wrap justify-between gap-2">
+  <div class="flex grow flex-wrap justify-between gap-2">
    <p class="text-sm">{meta.title || meta.name}</p>
    {#if !isNaN(start) && !isNaN(end)}
      {@const startDateDisplay = formatTimestampAsDate(start)}
@@ -43,7 +43,7 @@

 <div class="flex flex-col gap-2 card2 card2-sm bg-alt">
  <div class="flex items-center justify-between gap-2">
-    <label class="flex min-w-0 flex-grow items-center gap-2">
+    <label class="flex min-w-0 grow items-center gap-2">
      {#if !closed}
        {#if pollType === "singlechoice"}
          <input
@@ -32,7 +32,7 @@
 </script>

 <div
-  class="ml-sai mt-sai mb-sai relative z-popover isolate hidden w-14 flex-shrink-0 bg-base-200 pt-2 md:block">
+  class="ml-sai mt-sai mb-sai relative z-popover isolate hidden w-14 shrink-0 bg-base-200 pt-2 md:block">
  <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
    <PrimaryNavSpaces />
    {#if PLATFORM_RELAYS.length > 0}
@@ -63,7 +63,7 @@

 <!-- a little extra something for ios -->
 <div
-  class="hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden">
+  class="hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-(--saib) bg-base-100 md:hidden">
 </div>
 <div
  class="hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
@@ -25,10 +25,10 @@
 <div class="flex flex-col gap-2">
  {#each spaceUrls as url (url)}
    <div class="card2 bg-alt flex flex-row items-center gap-2">
-      <div class="flex-shrink-0">
+      <div class="shrink-0">
        <RelayIcon {url} size={12} />
      </div>
-      <div class="flex flex-grow flex-col">
+      <div class="flex grow flex-col">
        <RelayName {url} />
        <div class="text-sm opacity-75">
          {url}
@@ -121,6 +121,6 @@
    </div>
  </ModalBody>
  <ModalFooter>
-    <Button class="btn btn-primary flex-grow" onclick={back}>Done</Button>
+    <Button class="btn btn-primary grow" onclick={back}>Done</Button>
  </ModalFooter>
 </Modal>
@@ -26,8 +26,8 @@
  type="button"
  class="btn font-normal flex h-[unset] w-full flex-nowrap py-4 text-left items-start justify-between"
  {onclick}>
-  <div class="flex flex-grow flex-row items-start gap-4">
-    <div class="flex h-7 w-7 flex-shrink-0 items-center justify-center">
+  <div class="flex grow flex-row items-start gap-4">
+    <div class="flex h-7 w-7 shrink-0 items-center justify-center">
      <Icon {icon} />
    </div>
    <div class="flex flex-col gap-1">
@@ -23,7 +23,7 @@
      <div class="relative">
        <div class="avatar relative">
          <div
-            class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
+            class="center flex! h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
            <RelayIcon {url} />
          </div>
        </div>
@@ -132,7 +132,7 @@
      </Button>
    </Tippy>
  </div>
-  <div class="chat-editor flex-grow overflow-hidden">
+  <div class="chat-editor grow overflow-hidden">
    <EditorContent {autofocus} {editor} />
  </div>
  <Button
@@ -131,7 +131,7 @@
        <p>Icon</p>
      {/snippet}
      {#snippet input()}
-        <div class="flex flex-grow items-center justify-between gap-4">
+        <div class="flex grow items-center justify-between gap-4">
          {#if imagePreview}
            <div class="flex items-center gap-2">
              <span class="text-sm opacity-75">Selected:</span>
@@ -94,7 +94,7 @@
    {:else}
      <div class="w-8 shrink-0"></div>
    {/if}
-    <div class="min-w-0 flex-grow pr-1">
+    <div class="min-w-0 grow pr-1">
      {#if showPubkey}
        <div class="flex items-center gap-2">
          <Button onclick={openProfile} class="text-sm font-bold" style="color: {colorValue}">
@@ -11,7 +11,7 @@
  const {url, h, ...props}: Props = $props()
 </script>

-<div class="flex flex-grow items-center justify-between gap-4 {props.class}">
+<div class="flex grow items-center justify-between gap-4 {props.class}">
  <div class="flex items-center gap-3">
    <RoomImage {url} {h} />
    <div class="min-w-0 overflow-hidden text-ellipsis">
@@ -27,7 +27,7 @@
    <Button onclick={back} class="place-self-start pr-3 md:hidden">
      <Icon icon={ArrowLeft} size={7} />
    </Button>
-    <div class="ellipsize whitespace-nowrap flex flex-grow items-center justify-between gap-4">
+    <div class="ellipsize whitespace-nowrap flex grow items-center justify-between gap-4">
      <div class="flex flex-col">
        <div class="flex gap-2 items-center">
          {@render title?.()}
@@ -42,7 +42,7 @@
        <div class="relative">
          <div class="avatar relative">
            <div
-              class="center !flex h-16 w-16 min-w-16 rounded-full border-2 border-solid border-base-300 bg-base-300">
+              class="center flex! h-16 w-16 min-w-16 rounded-full border-2 border-solid border-base-300 bg-base-300">
              <RelayIcon {url} size={10} />
            </div>
          </div>
@@ -134,7 +134,7 @@
        <p>Icon</p>
      {/snippet}
      {#snippet input()}
-        <div class="flex items-center gap-4 justify-between flex-grow">
+        <div class="flex items-center gap-4 justify-between grow">
          {#if imagePreview}
            <div class="flex items-center gap-2">
              <span class="text-sm opacity-75">Selected:</span>
@@ -100,6 +100,6 @@
    </div>
  </ModalBody>
  <ModalFooter>
-    <Button class="btn btn-primary flex-grow" onclick={back}>Done</Button>
+    <Button class="btn btn-primary grow" onclick={back}>Done</Button>
  </ModalFooter>
 </Modal>
@@ -140,7 +140,7 @@

 <div bind:this={element} class="flex min-h-0 flex-1 flex-col">
  <SecondaryNavSection class="min-h-0 flex-1 flex flex-col overflow-hidden pb-0">
-    <div class="flex-shrink-0">
+    <div class="shrink-0">
      <Button
        class="relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100"
        onclick={openMenu}>
@@ -270,14 +270,14 @@
      {/if}
      {#if hasNip29($relay)}
        {#if $userRooms.length > 0}
-          <div class="h-2 flex-shrink-0"></div>
+          <div class="h-2 shrink-0"></div>
          <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
        {/if}
        {#each $userRooms as h (h)}
          <SpaceMenuRoomItem {url} {h} />
        {/each}
        {#if $otherRooms.length > 0}
-          <div class="h-2 flex-shrink-0"></div>
+          <div class="h-2 shrink-0"></div>
          <SecondaryNavHeader>
            {#if $userRooms.length > 0}
              Other Rooms
@@ -296,7 +296,7 @@
          <SpaceMenuRoomItem {url} {h} />
        {/each}
        {#if $otherVoiceRooms.length > 0}
-          <div class="h-2 flex-shrink-0"></div>
+          <div class="h-2 shrink-0"></div>
          <SecondaryNavHeader>Voice Rooms</SecondaryNavHeader>
          {#each $otherVoiceRooms as h (h)}
            <SpaceMenuRoomItem {url} {h} />
@@ -309,11 +309,11 @@
          </SecondaryNavItem>
        {/if}
      {/if}
-      <div class="h-5 flex-shrink-0"></div>
+      <div class="h-5 shrink-0"></div>
    </div>
  </SecondaryNavSection>
  <div
-    class="flex flex-shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+0.25rem)] md:pb-2 z-nav">
+    class="flex shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+0.25rem)] md:pb-2 z-nav">
    <VoiceWidget />
    <Button class="btn btn-neutral btn-sm h-10" onclick={showDetail}>
      <SocketStatusIndicator {url} />
@@ -30,7 +30,7 @@
    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>

-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
  {#if h && showRoom}
    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
      Posted in #<RoomName {h} {url} />
@@ -130,7 +130,7 @@
          <p>Message*</p>
        {/snippet}
        {#snippet input()}
-          <div class="note-editor flex-grow overflow-hidden">
+          <div class="note-editor grow overflow-hidden">
            <EditorContent {editor} />
          </div>
        {/snippet}
@@ -0,0 +1,278 @@
+<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 VideoCallTile from "@app/components/VideoCallTile.svelte"
+  import VoiceWidget from "@app/components/VoiceWidget.svelte"
+  import {get} from "svelte/store"
+  import {
+    VideoCallLayout,
+    isDesktopLayout,
+    toggleVideoPrimaryTile,
+    videoCallLayout,
+    videoCallViewportSync,
+    ViewportSize,
+    videoPrimaryTileKey,
+  } from "@app/call/video"
+  import {currentVoiceSession, currentVoiceRoom, pubkeyFromLiveKitIdentity} from "@app/call/stores"
+
+  type Props = {
+    layout: VideoCallLayout
+    mobile?: boolean
+    url: string
+    h: string
+    class?: string
+  }
+
+  type VideoTileData = {
+    identity: string
+    isLocal: boolean
+    trackSid: string
+    track: Track | undefined
+    source: Track.Source.Camera | Track.Source.ScreenShare
+  }
+
+  type TileLayout = "spotlight" | "default" | "strip"
+
+  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,
+  )
+
+  const showVideoContent = $derived(
+    isViewingCurrentCallRoom &&
+      (mobile
+        ? layout === VideoCallLayout.Video
+        : layout === VideoCallLayout.Split || layout === VideoCallLayout.Video),
+  )
+
+  const videoTiles = $derived.by(() => {
+    const session = $currentVoiceSession
+    if (!session || $currentVoiceRoom?.url !== url || $currentVoiceRoom?.h !== h) {
+      return []
+    }
+
+    const room = session.room
+    const videoTiles: VideoTileData[] = []
+    const user = room.localParticipant
+
+    if (session.cameraOn) {
+      const localPub = user.getTrackPublication(Track.Source.Camera)
+      videoTiles.push({
+        identity: user.identity,
+        isLocal: true,
+        trackSid: localPub?.trackSid ?? "local-camera",
+        track: localPub?.track,
+        source: Track.Source.Camera,
+      })
+    }
+
+    if (session.screenShareOn) {
+      const localPub = user.getTrackPublication(Track.Source.ScreenShare)
+      videoTiles.push({
+        identity: user.identity,
+        isLocal: true,
+        trackSid: localPub?.trackSid ?? "local-screen",
+        track: 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) {
+        videoTiles.push({
+          identity: rp.identity,
+          isLocal: false,
+          trackSid: camPub.trackSid,
+          track: camPub.track,
+          source: Track.Source.Camera,
+        })
+      }
+      const screenPub = rp.getTrackPublication(Track.Source.ScreenShare)
+      if (screenPub?.isSubscribed && screenPub.track) {
+        videoTiles.push({
+          identity: rp.identity,
+          isLocal: false,
+          trackSid: screenPub.trackSid,
+          track: screenPub.track,
+          source: Track.Source.ScreenShare,
+        })
+      }
+    }
+
+    return videoTiles
+  })
+
+  /** Identity + source only — LiveKit can change trackSid after publish, which broke spotlight + stale-key effect. */
+  const tileKey = (t: VideoTileData) => `${t.identity}\x1f${t.source}`
+
+  const primaryTile = $derived.by(() => {
+    const k = $videoPrimaryTileKey
+    if (k === undefined) return undefined
+    return videoTiles.find(t => tileKey(t) === k)
+  })
+
+  const secondaryTiles = $derived.by(() => {
+    const p = primaryTile
+    if (p === undefined) return videoTiles
+    const pk = tileKey(p)
+    return videoTiles.filter(t => tileKey(t) !== pk)
+  })
+
+  const useSpotlightLayout = $derived(primaryTile !== undefined)
+  const useMultiGrid = $derived(!useSpotlightLayout && videoTiles.length > 2)
+
+  $effect(() => {
+    const k = $videoPrimaryTileKey
+    if (k === undefined) return
+    if (!videoTiles.some(t => tileKey(t) === k)) {
+      videoPrimaryTileKey.set(undefined)
+    }
+  })
+
+  $effect(() => {
+    for (const t of videoTiles) {
+      const pk = pubkeyFromLiveKitIdentity(t.identity)
+      if (pk) loadProfile(pk)
+    }
+  })
+
+  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
+  }
+
+  const showTileGrid = $derived(videoTiles.length > 0)
+
+  const spotlightHandlerFor = (key: string) => () => {
+    toggleVideoPrimaryTile(key)
+  }
+
+  const panelChrome = $derived(
+    cx(
+      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))]",
+      !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: VideoTileData, 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.track}
+      <VideoCallTile
+        track={tile.track}
+        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 videoTiles.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 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 videoTiles 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 showVideoContent}
+  <div class={panelChrome}>
+    {#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()}
+        </div>
+        <div class="shrink-0 pb-2">
+          <VoiceWidget />
+        </div>
+      </div>
+    {:else}
+      {@render videoPanelBody()}
+    {/if}
+  </div>
+{/if}
@@ -0,0 +1,31 @@
+<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 videoElement = $state<HTMLVideoElement | undefined>()
+
+  $effect(() => {
+    const element = videoElement
+    const activeTrack = track
+    if (!element) return
+    activeTrack.attach(element)
+    return () => {
+      activeTrack.detach(element)
+    }
+  })
+</script>
+
+<video
+  bind:this={videoElement}
+  class={cx("h-full w-full", fit === "contain" ? "object-contain" : "object-cover", className)}
+  playsinline
+  {muted}></video>
@@ -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 => {
@@ -26,8 +21,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,9 +32,11 @@
      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 = []
    }
  }

@@ -55,6 +54,7 @@
    }
    selectedInput = selectValueForActiveDevice(session, DeviceKind.AudioInput)
    selectedOutput = selectValueForActiveDevice(session, DeviceKind.AudioOutput)
+    selectedVideo = selectValueForActiveDevice(session, DeviceKind.VideoInput)
  })

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

+  const onVideoChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.VideoInput, selectedVideo)
+  }
+
  const onDone = () => {
    popModal()
  }
@@ -76,8 +80,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 +124,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>
@@ -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
@@ -64,7 +63,7 @@
  {replaceState}
  {notification}
  onclick={handleClick}
-  class={cx("!items-start", isActive && "!bg-base-100 !text-base-content")}>
+  class={cx("items-start!", isActive && "bg-base-100! text-base-content!")}>
  <div class="flex w-full min-w-0 flex-col gap-2">
    <div class="flex gap-2 items-center">
      {#if isJoining}
@@ -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"

@@ -1,15 +1,20 @@
 <script lang="ts">
  import {readable} from "svelte/store"
-  import {fly} from "svelte/transition"
+  import {fade, 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"
  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 {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"
@@ -23,16 +28,23 @@
    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 {
+    VideoCallLayout,
+    isDesktopLayout,
+    toggleCamera,
+    toggleScreenShare,
+    videoCallLayout,
+  } from "@app/call/video"
  import {
    VoiceState,
    currentVoiceSession,
    currentVoiceRoom,
    voiceState,
-    leaveVoiceRoom,
-    toggleMute,
-    cancelJoinVoiceRoom,
-  } from "@app/voice"
+    isLocalSpeaking,
+  } 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)
@@ -41,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
@@ -66,9 +86,45 @@
    pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
  }

-  const openAudioSettings = () => {
+  const goToRoom = () => {
+    if (!targetRoom) return
+    const path = makeRoomPath(targetRoom.url, targetRoom.h)
+    if ($page.url.pathname !== path) {
+      void goto(path)
+    }
+  }
+
+  const openCallSettings = () => {
    pushModal(VoiceCallAudioSettingsDialog)
  }
+
+  const showChatButton = $derived($voiceState === VoiceState.Connected && isViewingCurrentVoiceRoom)
+
+  const isChatPanelActive = $derived(
+    showChatButton &&
+      (isDesktopLayout.current
+        ? $videoCallLayout === VideoCallLayout.Split
+        : $videoCallLayout === VideoCallLayout.Chat),
+  )
+
+  const onChatToggle = () => {
+    if (!showChatButton) return
+    if (isDesktopLayout.current) {
+      videoCallLayout.update(p =>
+        p === VideoCallLayout.Split ? VideoCallLayout.Video : VideoCallLayout.Split,
+      )
+    } else {
+      videoCallLayout.update(p =>
+        p === VideoCallLayout.Video ? VideoCallLayout.Chat : VideoCallLayout.Video,
+      )
+    }
+  }
+
+  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>

 {#if targetRoom}
@@ -76,19 +132,47 @@
    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">
-      {#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>
+    <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 showChatButton}
+        <Button
+          data-tip="Toggle Chat"
+          class={cx(
+            mediaToggleClass,
+            "relative shrink-0 overflow-visible",
+            isChatPanelActive && "text-primary",
+          )}
+          onclick={onChatToggle}>
+          <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}
-      <span class="ellipsize text-xs opacity-70">
-        {roomName} / {spaceName}
-      </span>
    </div>
-    <div class="flex items-center gap-1">
+    <div class="flex flex-wrap items-center gap-2">
      {#if $voiceState === VoiceState.Joining}
        <span class="loading loading-spinner loading-sm"></span>
        <Button
@@ -100,16 +184,45 @@
      {: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} />
+            {#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
-          data-tip="Audio settings"
+          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>
+        {#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"
-          onclick={openAudioSettings}>
+          onclick={openCallSettings}>
          <Icon icon={Settings} size={4} />
        </Button>
        <Button
@@ -70,7 +70,7 @@
            Amount (satoshis)
          {/snippet}
          {#snippet input()}
-            <div class="flex flex-grow justify-end">
+            <div class="flex grow justify-end">
              <label class="input input-bordered flex items-center gap-2">
                <Icon icon={Bolt} />
                <input
@@ -80,7 +80,7 @@
            Amount (satoshis)
          {/snippet}
          {#snippet input()}
-            <div class="flex flex-grow justify-end">
+            <div class="flex grow justify-end">
              <label class="input input-bordered flex items-center gap-2">
                <Icon icon={Bolt} />
                <input bind:value={sats} type="number" class="w-14" placeholder="0" />
@@ -1,7 +1,7 @@
 <style>
  .wot-background {
    fill: transparent;
-    stroke: var(--base-content);
+    stroke: var(--color-base-content);
    opacity: 30%;
  }

@@ -32,7 +32,7 @@
  const normalizedScore = $derived(clamp([0, max], $score) / max)
  const dashOffset = $derived(100 - 44 * normalizedScore)
  const style = $derived(`transform: rotate(${135 - normalizedScore * 180}deg)`)
-  const stroke = $derived(active ? "var(--primary)" : "var(--base-content)")
+  const stroke = $derived(active ? "var(--color-primary)" : "var(--color-base-content)")
 </script>

 <div class="relative h-[14px] w-[14px]">
@@ -118,26 +118,26 @@
  <ModalBody>
    <ModalHeader>
      <ModalTitle>Send a Zap</ModalTitle>
-      <ModalSubtitle>To <ProfileLink {pubkey} class="!text-primary" /></ModalSubtitle>
+      <ModalSubtitle>To <ProfileLink {pubkey} class="text-primary!" /></ModalSubtitle>
    </ModalHeader>
-    <FieldInline class="!grid-cols-3">
+    <FieldInline class="grid-cols-3!">
      {#snippet label()}
        Emoji Reaction
      {/snippet}
      {#snippet input()}
-        <div class="flex flex-grow items-center justify-end gap-4">
+        <div class="flex grow items-center justify-end gap-4">
          <EmojiButton {onEmoji} class="btn btn-neutral">
            {content}
          </EmojiButton>
        </div>
      {/snippet}
    </FieldInline>
-    <FieldInline class="!grid-cols-3">
+    <FieldInline class="grid-cols-3!">
      {#snippet label()}
        Amount
      {/snippet}
      {#snippet input()}
-        <div class="flex flex-grow justify-end">
+        <div class="flex grow justify-end">
          <label class="input input-bordered flex items-center gap-2">
            <Icon icon={Bolt} />
            <input bind:value={amount} type="number" class="w-24" />
@@ -147,7 +147,7 @@
  <ModalBody>
    <ModalHeader>
      <ModalTitle>Send a Zap</ModalTitle>
-      <ModalSubtitle>To <ProfileLink {pubkey} class="!text-primary" /></ModalSubtitle>
+      <ModalSubtitle>To <ProfileLink {pubkey} class="text-primary!" /></ModalSubtitle>
    </ModalHeader>

    {#if invoice}
@@ -158,30 +158,30 @@
        </p>
      </div>
      <label class="input input-bordered flex w-full items-center justify-between gap-2">
-        <input readonly class="ellipsize flex-grow" value={invoice} />
+        <input readonly class="ellipsize grow" value={invoice} />
        <Button class="flex items-center" onclick={copyInvoice}>
          <Icon icon={Copy} />
        </Button>
      </label>
    {:else}
-      <FieldInline class="!grid-cols-3">
+      <FieldInline class="grid-cols-3!">
        {#snippet label()}
          Emoji Reaction
        {/snippet}
        {#snippet input()}
-          <div class="flex flex-grow items-center justify-end gap-4">
+          <div class="flex grow items-center justify-end gap-4">
            <EmojiButton {onEmoji} class="btn btn-neutral">
              {content}
            </EmojiButton>
          </div>
        {/snippet}
      </FieldInline>
-      <FieldInline class="!grid-cols-3">
+      <FieldInline class="grid-cols-3!">
        {#snippet label()}
          Amount
        {/snippet}
        {#snippet input()}
-          <div class="flex flex-grow justify-end">
+          <div class="flex grow justify-end">
            <label class="input input-bordered flex items-center gap-2">
              <Icon icon={Bolt} />
              <input bind:value={amount} type="number" class="w-24" />
@@ -57,7 +57,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

@@ -14,6 +14,7 @@
    style?: string
    disabled?: boolean
    "data-tip"?: string
+    "aria-pressed"?: boolean
  } = $props()

  const className = $derived(`text-left ${restProps.class}`)
@@ -12,8 +12,8 @@
 </script>

 <div class="btn flex h-[unset] w-full flex-nowrap py-4 text-left {props.class}">
-  <div class="flex flex-grow flex-row items-start gap-4">
-    <div class="flex h-14 w-12 flex-shrink-0 items-center justify-center">
+  <div class="flex grow flex-row items-start gap-4">
+    <div class="flex h-14 w-12 shrink-0 items-center justify-center">
      {@render props.icon?.()}
    </div>
    <div class="flex flex-col gap-1">
@@ -29,7 +29,7 @@

  const innerClass = $derived(
    cx(
-      "relative text-base-content text-base-content flex-grow pointer-events-auto",
+      "relative text-base-content text-base-content grow pointer-events-auto",
      "rounded-t-box sm:rounded-box",
      {
        "bg-alt shadow-m max-h-[90vh] flex flex-col max-w-full pb-sai sm:pb-0": !fullscreen,
@@ -9,9 +9,9 @@
 </script>

 <div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50">
-  <div class="h-px flex-grow bg-base-content opacity-25"></div>
+  <div class="h-px grow bg-base-content opacity-25"></div>
  {#if children}
    <p>{@render children?.()}</p>
-    <div class="h-px flex-grow bg-base-content opacity-25"></div>
+    <div class="h-px grow bg-base-content opacity-25"></div>
  {/if}
 </div>
@@ -8,9 +8,9 @@
  const {children}: Props = $props()
 </script>

-<div class="h-20 flex-shrink-0"></div>
+<div class="h-20 shrink-0"></div>
 <div class="flex absolute bottom-sai left-0 right-0 p-6 py-4 rounded-b-box bg-base-200">
-  <div class="flex flex-grow gap-4 items-center justify-between">
+  <div class="flex grow gap-4 items-center justify-between">
    {@render children?.()}
  </div>
 </div>
@@ -9,6 +9,6 @@

 <div
  data-component="Page"
-  class="relative flex-grow flex flex-col min-w-0 ml-sai mb-sai mt-sai mr-sai bg-base-200 md:ml-0 md:mb-0 {props.class}">
+  class="relative grow flex flex-col min-w-0 ml-sai mb-sai mt-sai mr-sai bg-base-200 md:ml-0 md:mb-0 {props.class}">
  {@render props.children?.()}
 </div>
@@ -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}>
@@ -12,7 +12,7 @@

 <div
  class={cx(
-    "mt-sai mb-sai max-h-screen w-60 min-h-0 flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
+    "mt-sai mb-sai max-h-screen w-60 min-h-0 shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
    props.class,
  )}>
  {@render children?.()}
@@ -36,7 +36,7 @@

  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", {
+    cx(restProps.class, "relative 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,
@@ -1,7 +1,7 @@
 <style>
  :global(.tippy-box[data-theme~="tooltip"]) {
-    background-color: var(--neutral);
-    color: var(--neutral-content);
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
@@ -11,19 +11,19 @@
  }

  :global(.tippy-box[data-theme~="tooltip"][data-placement^="top"] > .tippy-arrow::before) {
-    border-top-color: var(--neutral);
+    border-top-color: var(--color-neutral);
  }

  :global(.tippy-box[data-theme~="tooltip"][data-placement^="bottom"] > .tippy-arrow::before) {
-    border-bottom-color: var(--neutral);
+    border-bottom-color: var(--color-neutral);
  }

  :global(.tippy-box[data-theme~="tooltip"][data-placement^="left"] > .tippy-arrow::before) {
-    border-left-color: var(--neutral);
+    border-left-color: var(--color-neutral);
  }

  :global(.tippy-box[data-theme~="tooltip"][data-placement^="right"] > .tippy-arrow::before) {
-    border-right-color: var(--neutral);
+    border-right-color: var(--color-neutral);
  }
 </style>

@@ -1,5 +1,6 @@
 <script lang="ts">
  import "@src/app.css"
+  import "@welshman/editor/index.css"
  import "@capacitor-community/safe-area"
  import * as nip19 from "nostr-tools/nip19"
  import type {Unsubscriber} from "svelte/store"
@@ -6,7 +6,6 @@
  import {shouldUnwrap} from "@welshman/app"
  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
  import ChatSquarePlus from "@assets/icons/chat-square-plus.svg?dataurl"
-  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Page from "@lib/components/Page.svelte"
@@ -51,8 +50,8 @@
        <Icon icon={MenuDots} />
      </Button>
    </SecondaryNavHeader>
-    <Button class="btn btn-primary w-full row-2 min-h-0 h-[30px]" onclick={startChat}>
-      <Icon icon={AddCircle} />
+    <Button class="btn btn-primary w-full btn-sm" onclick={startChat}>
+      <Icon icon={ChatSquarePlus} />
      Start New Chat
    </Button>
    <label class="input input-sm input-bordered flex items-center gap-2">
@@ -37,8 +37,8 @@

 <ContentSearch class="md:hidden">
  {#snippet input()}
-    <div class="row-2 min-w-0 flex-grow items-center">
-      <label class="input input-bordered flex flex-grow items-center gap-2">
+    <div class="row-2 min-w-0 grow items-center">
+      <label class="input input-bordered flex grow items-center gap-2">
        <Icon icon={Magnifier} />
        <input
          bind:value={term}
@@ -46,7 +46,7 @@
          type="text"
          placeholder="Search for conversations..." />
      </label>
-      <Button class="btn btn-primary" onclick={openMenu}>
+      <Button class="btn btn-neutral" onclick={openMenu}>
        <Icon icon={MenuDots} />
      </Button>
    </div>
@@ -12,6 +12,7 @@
  import Bell from "@assets/icons/bell.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Page from "@lib/components/Page.svelte"
+  import PageContent from "@lib/components/PageContent.svelte"
  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
@@ -32,7 +33,7 @@

 <SecondaryNav>
  <SecondaryNavSection>
-    <SecondaryNavItem class="w-full !justify-between">
+    <SecondaryNavItem class="w-full justify-between!">
      <strong class="ellipsize flex items-center gap-3"> Your Settings </strong>
    </SecondaryNavItem>
    <SecondaryNavItem href="/settings/profile">
@@ -68,5 +69,7 @@
 </SecondaryNav>

 <Page>
-  {@render children?.()}
+  <PageContent>
+    {@render children?.()}
+  </PageContent>
 </Page>
@@ -67,7 +67,7 @@
 </script>

 <div class="content column gap-4">
-  <div class="card2 bg-alt shadow-md">
+  <div class="card2 bg-alt shadow-md col-2">
    <div class="flex justify-between gap-2">
      <div class="flex max-w-full gap-3">
        <div class="py-1">
@@ -116,9 +116,9 @@
      {/snippet}
      {#snippet input()}
        <label class="input input-bordered flex w-full items-center justify-between gap-2">
-          <div class="row-2 flex-grow items-center">
+          <div class="row-2 grow items-center">
            <Icon icon={LinkRound} />
-            <input readonly class="ellipsize flex-grow" value={npub} />
+            <input readonly class="ellipsize grow" value={npub} />
          </div>
          <Button class="flex items-center" onclick={copyNpub}>
            <Icon icon={Copy} />
@@ -22,10 +22,10 @@
 <svelte:window bind:innerWidth={width} />

 {#if width <= md}
-  <div class="ml-sai mt-sai mb-sai relative z-nav w-14 flex-shrink-0 bg-base-200 pt-2">
+  <div class="ml-sai mt-sai mb-sai relative z-nav w-14 shrink-0 bg-base-200 pt-2">
    <PrimaryNavSpaces />
  </div>
-  <SecondaryNav class="!flex !w-auto flex-grow pb-16">
+  <SecondaryNav class="flex! w-auto! grow pb-16">
    <SpaceMenu {url} />
  </SecondaryNav>
 {/if}
@@ -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}
@@ -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,9 @@
    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, 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"
@@ -56,6 +59,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,
+  )
+
+  const showMobileVideoPanel = $derived(
+    isVoiceRoom &&
+      $voiceState === VoiceState.Connected &&
+      $videoCallLayout === VideoCallLayout.Video,
+  )
+
+  const pageContentHiddenDesktopVideoOnly = $derived(
+    voiceConnectedHere && $videoCallLayout === VideoCallLayout.Video,
+  )
+
+  let prevVideoTileCount = $state(0)
+
+  $effect(() => {
+    if ($voiceState !== VoiceState.Connected) {
+      videoCallLayout.set(VideoCallLayout.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) {
+      videoCallLayout.set(VideoCallLayout.Video)
+    }
+    if (prevVideoTileCount >= 1 && n === 0 && $videoCallLayout === VideoCallLayout.Split) {
+      videoCallLayout.set(VideoCallLayout.Chat)
+    }
+    prevVideoTileCount = n
+  })
  const shouldProtect = canEnforceNip70(url)
  const membershipStatus = deriveUserRoomMembershipStatus(url, h)
  const at = $derived(parseInt($page.url.searchParams.get("at")!))
@@ -364,127 +410,168 @@
  {/snippet}
 </SpaceBar>

-<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
-  {#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>
-            {:else}
-              <Icon icon={Login2} />
-            {/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 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>
+<div
+  class={cx(
+    "flex min-h-0 flex-1 flex-col",
+    voiceConnectedHere && $videoCallLayout === VideoCallLayout.Split && "md:flex-row",
+  )}>
+  {#if voiceConnectedHere}
+    <VideoCallContent
+      layout={$videoCallLayout}
+      {url}
+      {h}
+      class="hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex" />
  {/if}
-  <div class="h-screen"></div>
-</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">
-    {#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>
-            {:else}
-              <Icon icon={Login2} />
-            {/if}
-            Ask to Join
-          </Button>
-        {/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}
+  <div
+    class={cx(
+      "flex min-h-0 min-w-0 flex-1 flex-col",
+      voiceConnectedHere && $videoCallLayout === VideoCallLayout.Video && "md:hidden",
+    )}>
+    {#if isVoiceRoom && $voiceState === VoiceState.Connected}
+      <VideoCallContent layout={$videoCallLayout} mobile {url} {h} class="md:hidden" />
    {/if}
-  </div>
-  {#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected}
-    <div class="hide-on-keyboard flex-shrink-0 p-2 md:hidden">
-      <VoiceWidget />
+
+    <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">
+            <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>
+                {:else}
+                  <Icon icon={Login2} />
+                {/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 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}
+      <div class="h-screen"></div>
+    </PageContent>
+
+    <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}
+          <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>
+                {:else}
+                  <Icon icon={Login2} />
+                {/if}
+                Ask to Join
+              </Button>
+            {/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}
    </div>
-  {/if}
+  </div>
 </div>

 {#if showScrollButton}
@@ -128,9 +128,9 @@
    <div class={"calendar-event-" + event.id}>
      {#if isFirstFutureEvent}
        <div class="flex items-center gap-2 p-2">
-          <div class="h-px flex-grow bg-primary"></div>
+          <div class="h-px grow bg-primary"></div>
          <p class="text-xs uppercase text-primary">Today</p>
-          <div class="h-px flex-grow bg-primary"></div>
+          <div class="h-px grow bg-primary"></div>
        </div>
      {/if}
      {#if dateDisplay}
@@ -69,11 +69,11 @@
    <div class="card2 bg-alt col-3 z-feature">
      <div class="flex items-start gap-4">
        <CalendarEventDate event={$event} />
-        <div class="flex min-w-0 flex-grow flex-col gap-1">
+        <div class="flex min-w-0 grow flex-col gap-1">
          <CalendarEventHeader event={$event} />
          <CalendarEventMeta event={$event} {url} />
          <div class="flex py-2 opacity-50">
-            <div class="h-px flex-grow bg-base-content opacity-25"></div>
+            <div class="h-px grow bg-base-content opacity-25"></div>
          </div>
          <Content showEntire event={$event} {url} />
        </div>
@@ -311,9 +311,9 @@
        {id}
        class="flex items-center py-2 text-xs transition-colors"
        class:opacity-0={showFixedNewMessages}>
-        <div class="h-px flex-grow bg-primary"></div>
+        <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 flex-grow bg-primary"></div>
+        <div class="h-px grow bg-primary"></div>
      </div>
    {:else if type === "date"}
      <Divider>{value}</Divider>
@@ -1,6 +1,7 @@
 import {config} from "dotenv"
 import daisyui from "daisyui"
-import themes from "daisyui/src/theming/themes"
+import daisyTheme from "daisyui/theme"
+import themes from "daisyui/theme/object"

 config({path: ".env.local"})
 config({path: ".env"})
@@ -25,27 +26,29 @@ export default {
      toast: 9,
    },
  },
-  plugins: [daisyui],
-  daisyui: {
-    themes: [
-      {
-        dark: {
-          ...themes["dark"],
-          primary: process.env.VITE_PLATFORM_ACCENT,
-          "primary-content": process.env.VITE_PLATFORM_ACCENT_CONTENT || "#EAE7FF",
-          secondary: process.env.VITE_PLATFORM_SECONDARY,
-          "secondary-content": process.env.VITE_PLATFORM_SECONDARY_CONTENT || "#EAE7FF",
-        },
-        light: {
-          ...themes["winter"],
-          neutral: "#F2F7FF",
-          warning: "#FD8D0B",
-          primary: process.env.VITE_PLATFORM_ACCENT,
-          "primary-content": process.env.VITE_PLATFORM_ACCENT_CONTENT || "#EAE7FF",
-          secondary: process.env.VITE_PLATFORM_SECONDARY,
-          "secondary-content": process.env.VITE_PLATFORM_SECONDARY_CONTENT || "#EAE7FF",
-        },
-      },
-    ],
-  },
+  plugins: [
+    daisyui({
+      themes: ["light --default", "dark --prefersdark"],
+    }),
+    daisyTheme({
+      name: "dark",
+      ...themes["night"],
+      "--color-base-content": "oklch(75% 0.029 256.847)",
+      "--color-primary": process.env.VITE_PLATFORM_ACCENT,
+      "--color-primary-content": process.env.VITE_PLATFORM_ACCENT_CONTENT || "#EAE7FF",
+      "--color-secondary": process.env.VITE_PLATFORM_SECONDARY,
+      "--color-secondary-content": process.env.VITE_PLATFORM_SECONDARY_CONTENT || "#EAE7FF",
+    }),
+    daisyTheme({
+      name: "light",
+      ...themes["winter"],
+      "--color-neutral": "#F2F7FF",
+      "--color-neutral-content": "var(--color-base-content)",
+      "--color-warning": "#FD8D0B",
+      "--color-primary": process.env.VITE_PLATFORM_ACCENT,
+      "--color-primary-content": process.env.VITE_PLATFORM_ACCENT_CONTENT || "#EAE7FF",
+      "--color-secondary": process.env.VITE_PLATFORM_SECONDARY,
+      "--color-secondary-content": process.env.VITE_PLATFORM_SECONDARY_CONTENT || "#EAE7FF",
+    }),
+  ],
 }
Author	SHA1	Message	Date
mplorentz	288bcfe5d7	Cleanup remaining files	2026-04-08 11:17:23 -04:00
mplorentz	26069997b8	Factor video code and stores out of voice.ts	2026-04-08 11:17:23 -04:00
mplorentz	a14fef0672	Clean up VideoCallContent	2026-04-08 11:17:23 -04:00
mplorentz	117299b97b	Simplify how video call layout is stored	2026-04-08 11:17:23 -04:00
mplorentz	136b5f4a37	incorporate page layout changes from dev and other cleanup	2026-04-08 11:17:23 -04:00
mplorentz	e7703f37b4	Add permissions for cameras on mobile	2026-04-08 11:16:07 -04:00
mplorentz	fe090aff41	Hide screen share button on ios and android	2026-04-08 11:16:07 -04:00
mplorentz	c3ae3730b4	Show unread indicator on chat icon in VoiceWidget	2026-04-08 11:16:07 -04:00
mplorentz	9eeb6a45a6	Allow clicking voice widget to go back to call	2026-04-08 11:16:07 -04:00
mplorentz	f7fd557d96	rework video + text chat display controls	2026-04-08 11:16:07 -04:00
mplorentz	dff9abddf2	Style pin icon more better	2026-04-08 11:15:33 -04:00
mplorentz	54fb24ad29	Style voice widget icons to be less red	2026-04-08 11:15:33 -04:00
mplorentz	ec8a632f6a	Add video settings to VoiceCallAudioSettingsDialog	2026-04-08 11:15:33 -04:00
mplorentz	caf90b1167	Fix merge artifacts	2026-04-08 11:15:33 -04:00
mplorentz	30fd587f7e	Add settings button to configure audio devices in call	2026-04-08 11:15:33 -04:00
mplorentz	825c99a6b5	Change screen sharing icon	2026-04-08 11:15:33 -04:00
mplorentz	608f2f291e	Improve pinned video layout	2026-04-08 11:15:33 -04:00
mplorentz	ec176c2517	Add a button to spotlight a video feed	2026-04-08 11:15:33 -04:00
mplorentz	ad8e9ed802	Add basic screen sharing	2026-04-08 11:15:33 -04:00
mplorentz	fe04c4c52c	add video to livekit calls	2026-04-08 11:15:33 -04:00
Jon Staab	8e2dd8b278	Upgrade daisyui/tailwind	2026-04-07 15:31:35 -07:00
Jon Staab	8d35b3aad2	Chat tweaks	2026-04-07 10:40:45 -07:00