fix: realtime updates for room members and admins (#178 )

Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com> Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>
make close button / backdrop work on direct invite link page (#177 )
2026-04-09 21:05:30 +00:00 · 2026-04-09 20:03:08 +00:00 · 2026-04-09 19:57:15 +00:00 · 2026-04-08 17:10:20 +00:00 · 2026-04-08 09:46:56 -07:00 · 2026-04-08 16:43:04 +00:00
85 changed files with 1917 additions and 1082 deletions
@@ -19,5 +19,6 @@ VITE_DEFAULT_SEARCH_RELAYS=relay.ditto.pub,antiprimal.net,relay.vertexlab.io
 VITE_DEFAULT_MESSAGING_RELAYS=auth.nostr1.com,relay.keychat.io,relay.ditto.pub
 VITE_SIGNER_RELAYS=relay.nsec.app,ephemeral.snowflare.cc,bucket.coracle.social
 VITE_VAPID_PUBLIC_KEY=BIt2D4BdgdbCowD_0d3Np6GbrIGHxd7aIEUeZNe3hQuRlHz02OhzvDaai0XSFoJYVzSzdMjdyW-QhvW9_yq8j4Y
+VITE_THUMBNAIL_URL=
 VITE_GLITCHTIP_API_KEY=
 GLITCHTIP_AUTH_TOKEN=
@@ -28,6 +28,7 @@ node_modules/
 .pnpm-store/
 build/
 .svelte-kit/
+.next/

 # Rust/Tauri
 *target/
@@ -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 pb-4 sm:pt-8 sm:pb-8 md:pt-12 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 pt-4 pb-4 sm:px-8 sm:pt-8 sm:pb-8 md:px-12 md:pt-12 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)}
@@ -1,12 +1,19 @@
 <script lang="ts">
  import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
  import {isRelayUrl, getTagValue} from "@welshman/util"
+  import {Capacitor} from "@capacitor/core"
  import {preventDefault, stopPropagation} from "@lib/html"
  import Link from "@lib/components/Link.svelte"
  import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
  import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
  import {pushModal} from "@app/util/modal"
-  import {dufflepud, PLATFORM_URL, IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/core/state"
+  import {
+    dufflepud,
+    PLATFORM_URL,
+    IMAGE_CONTENT_TYPES,
+    VIDEO_CONTENT_TYPES,
+    THUMBNAIL_URL,
+  } from "@app/core/state"
  import {makeSpacePath} from "@app/util/routes"

  const {value, event} = $props()
@@ -22,6 +29,14 @@
    return [url, true]
  })

+  const getVideoPoster = (videoUrl: string): string | undefined => {
+    if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) {
+      return `${THUMBNAIL_URL}/thumbnail?url=${encodeURIComponent(videoUrl)}`
+    }
+
+    return undefined
+  }
+
  const loadPreview = async () => {
    const json = await postJson(dufflepud("link/preview"), {url})

@@ -42,7 +57,12 @@
 <Link {external} {href} class="my-2 block">
  <div class="overflow-hidden rounded-box">
    {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
-      <video controls src={url} class="max-h-96 rounded-box object-contain object-center">
+      <video
+        controls
+        src={url}
+        poster={getVideoPoster(url)}
+        preload="metadata"
+        class="max-h-96 rounded-box object-contain object-center">
        <track kind="captions" />
      </video>
    {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
@@ -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}
@@ -62,8 +62,7 @@
 {@render children?.()}

 <!-- 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">
+<div 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" />
@@ -8,7 +8,6 @@ import {
  on,
  gt,
  max,
-  find,
  spec,
  call,
  first,
@@ -210,6 +209,8 @@ export const DEFAULT_PUBKEYS = import.meta.env.VITE_DEFAULT_PUBKEYS

 export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"

+export const THUMBNAIL_URL = import.meta.env.VITE_THUMBNAIL_URL
+
 export const NIP46_PERMS =
  "nip44_encrypt,nip44_decrypt," +
  [
@@ -813,36 +814,78 @@ export const deriveOtherRooms = (url: string) =>

 // Space/room memberships

+const getSpaceMembers = (_url: string, events: TrustedEvent[]) => {
+  const members = new Set<string>()
+
+  for (const event of sortEventsAsc(events)) {
+    if (event.kind === RELAY_MEMBERS) {
+      members.clear()
+
+      for (const pubkey of uniq(getTagValues("member", event.tags))) {
+        members.add(pubkey)
+      }
+
+      continue
+    }
+
+    const pubkeys = getPubkeyTagValues(event.tags)
+
+    if (event.kind === RELAY_ADD_MEMBER) {
+      for (const pubkey of pubkeys) {
+        members.add(pubkey)
+      }
+    }
+
+    if (event.kind === RELAY_REMOVE_MEMBER) {
+      for (const pubkey of pubkeys) {
+        members.delete(pubkey)
+      }
+    }
+  }
+
+  return Array.from(members)
+}
+
+const getRoomMembers = (_url: string, h: string, events: TrustedEvent[]) => {
+  const members = new Set<string>()
+
+  for (const event of sortEventsAsc(events)) {
+    if (event.kind === ROOM_MEMBERS && getTagValue("d", event.tags) === h) {
+      members.clear()
+
+      for (const pubkey of uniq(getPubkeyTagValues(event.tags))) {
+        members.add(pubkey)
+      }
+
+      continue
+    }
+
+    if (getTagValue("h", event.tags) !== h) {
+      continue
+    }
+
+    const pubkeys = getPubkeyTagValues(event.tags)
+
+    if (event.kind === ROOM_ADD_MEMBER) {
+      for (const pubkey of pubkeys) {
+        members.add(pubkey)
+      }
+    }
+
+    if (event.kind === ROOM_REMOVE_MEMBER) {
+      for (const pubkey of pubkeys) {
+        members.delete(pubkey)
+      }
+    }
+  }
+
+  return Array.from(members)
+}
+
 export const deriveSpaceMembers = (url: string) =>
  derived(
    deriveRelaySignedEvents(url, [{kinds: [RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER, RELAY_MEMBERS]}]),
-    $events => {
-      const membersEvent = $events.find(spec({kind: RELAY_MEMBERS}))
-
-      if (membersEvent) {
-        return uniq(getTagValues("member", membersEvent.tags))
-      }
-
-      const members = new Set<string>()
-
-      for (const event of sortBy(e => e.created_at, $events)) {
-        const pubkeys = getPubkeyTagValues(event.tags)
-
-        if (event.kind === RELAY_ADD_MEMBER) {
-          for (const pubkey of pubkeys) {
-            members.add(pubkey)
-          }
-        }
-
-        if (event.kind === RELAY_REMOVE_MEMBER) {
-          for (const pubkey of pubkeys) {
-            members.delete(pubkey)
-          }
-        }
-      }
-
-      return Array.from(members)
-    },
+    $events => getSpaceMembers(url, $events),
  )

 export type BannedPubkeyItem = {
@@ -869,33 +912,7 @@ export const deriveRoomMembers = (url: string, h: string) => {
    {kinds: [ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER], "#h": [h]},
  ]

-  return derived(deriveEventsForUrl(url, filters), $events => {
-    const membersEvent = find(spec({kind: ROOM_MEMBERS}), $events)
-
-    if (membersEvent) {
-      return uniq(getPubkeyTagValues(membersEvent.tags))
-    }
-
-    const members = new Set<string>()
-
-    for (const event of sortEventsAsc($events)) {
-      const pubkeys = getPubkeyTagValues(event.tags)
-
-      if (event.kind === ROOM_ADD_MEMBER) {
-        for (const pubkey of pubkeys) {
-          members.add(pubkey)
-        }
-      }
-
-      if (event.kind === ROOM_REMOVE_MEMBER) {
-        for (const pubkey of pubkeys) {
-          members.delete(pubkey)
-        }
-      }
-    }
-
-    return Array.from(members)
-  })
+  return derived(deriveEventsForUrl(url, filters), $events => getRoomMembers(url, h, $events))
 }

 export const deriveRoomAdmins = (url: string, h: string) => {
@@ -919,7 +936,7 @@ export const deriveSpaceActionItems = (url: string) =>
  derived(
    deriveEventsForUrl(url, [
      {
-        kinds: [REPORT, ROOM_JOIN, ROOM_LEAVE, ROOM_MEMBERS],
+        kinds: [REPORT, ROOM_JOIN, ROOM_LEAVE, ROOM_MEMBERS, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER],
      },
    ]),
    $events => {
@@ -934,8 +951,10 @@ export const deriveSpaceActionItems = (url: string) =>

        const roomJoins = roomEvents.filter(spec({kind: ROOM_JOIN}))
        const roomLeaves = roomEvents.filter(spec({kind: ROOM_LEAVE}))
-        const roomMembersEvent = roomEvents.find(spec({kind: ROOM_MEMBERS}))
-        const roomMembers = getTagValues("p", roomMembersEvent?.tags ?? [])
+        const roomMembershipEvents = roomEvents.filter(event =>
+          [ROOM_MEMBERS, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER].includes(event.kind),
+        )
+        const roomMembers = new Set(getRoomMembers(url, h, roomMembershipEvents))

        pendingJoins.push(
          ...removeUndefined(
@@ -943,8 +962,22 @@ export const deriveSpaceActionItems = (url: string) =>
              .map(sortEventsDesc)
              .map(first),
          ).filter(({pubkey, created_at}) => {
-            if (roomMembers.includes(pubkey)) return false
-            if (gt(roomMembersEvent?.created_at, created_at)) return false
+            if (roomMembers.has(pubkey)) return false
+            if (
+              roomMembershipEvents.some(event => {
+                if (event.created_at <= created_at) {
+                  return false
+                }
+
+                if (event.kind === ROOM_MEMBERS) {
+                  return true
+                }
+
+                return getPubkeyTagValues(event.tags).includes(pubkey)
+              })
+            ) {
+              return false
+            }
            if (roomLeaves.some(e => e.pubkey === pubkey && e.created_at > created_at)) return false

            return true
@@ -1,8 +1,8 @@
 import {page} from "$app/stores"
 import type {Unsubscriber} from "svelte/store"
-import {derived, get} from "svelte/store"
-import {last, call, ifLet, assoc, chunk, sleep, identity, WEEK, ago} from "@welshman/lib"
+import {last, call, ifLet, assoc, chunk, WEEK, ago} from "@welshman/lib"
 import {PollResponse} from "nostr-tools/kinds"
+import {merged} from "@welshman/store"
 import {
  getListTags,
  getRelayTagValues,
@@ -13,6 +13,8 @@ import {
  ROOM_MEMBERS,
  ROOM_ADD_MEMBER,
  ROOM_REMOVE_MEMBER,
+  ROOM_JOIN,
+  ROOM_LEAVE,
  ROOM_CREATE_PERMISSION,
  RELAY_MEMBERS,
  RELAY_ADD_MEMBER,
@@ -21,12 +23,11 @@ import {
  unionFilters,
  getTagValue,
 } from "@welshman/util"
-import type {Filter, TrustedEvent} from "@welshman/util"
+import type {Filter, List, PublishedList, TrustedEvent} from "@welshman/util"
 import {request, requestOne, Difference, DifferenceEvent} from "@welshman/net"
 import {
  pubkey,
  loadRelay,
-  userFollowList,
  userRelayList,
  userMessagingRelayList,
  loadRelayList,
@@ -49,7 +50,6 @@ import {
  loadGroupList,
  userSpaceUrls,
  userGroupList,
-  bootstrapPubkeys,
  decodeRelay,
  getSpaceUrlsFromGroupList,
  getSpaceRoomsFromGroupList,
@@ -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

@@ -74,6 +74,8 @@ const pullOneWithFallback = async (
  signal: AbortSignal,
  onEvent?: (event: TrustedEvent) => void,
 ) => {
+  if (signal.aborted) return
+
  const cachedEvents = repository.query([filter]).filter(isSignedEvent)
  const since = last(cachedEvents.slice(10))?.created_at || 0

@@ -86,6 +88,12 @@ const pullOneWithFallback = async (
  const shouldFallback =
    !hasNegentropy(url) ||
    (await new Promise(resolve => {
+      if (signal.aborted) {
+        resolve(false)
+        return
+      }
+
+      // If teardown wins while the diff is opening, skip the fallback path and let cleanup stay in control.
      const diff = new Difference({relay: url, filter, events: cachedEvents, signal})

      diff.on(DifferenceEvent.Error, () => {
@@ -111,9 +119,7 @@ export const pullWithFallback = async ({url, signal, filters, onEvent}: SyncOpts

  if (signal.aborted) return

-  for (const filter of filters) {
-    pullOneWithFallback(url, filter, signal, onEvent)
-  }
+  await Promise.all(filters.map(filter => pullOneWithFallback(url, filter, signal, onEvent)))
 }

 const listen = ({url, signal, filters, onEvent}: SyncOpts) => {
@@ -123,6 +129,8 @@ const listen = ({url, signal, filters, onEvent}: SyncOpts) => {
 }

 const pullAndListen = (options: SyncOpts) => {
+  if (options.signal.aborted) return
+
  pullWithFallback(options)
  listen(options)
 }
@@ -197,7 +205,7 @@ const syncUserRoomMembership = (url: string, h: string) => {
 const syncUserData = () => {
  const unsubscribersByKey = new Map<string, Unsubscriber>()

-  const unsubscribeGroupList = userGroupList.subscribe($userGroupList => {
+  const syncGroupList = ($userGroupList: List | undefined) => {
    if ($userGroupList) {
      const keys = new Set<string>()

@@ -226,43 +234,35 @@ const syncUserData = () => {
        }
      }
    }
+  }
+
+  const syncRelayList = ($userRelayList: PublishedList | undefined) => {
+    const pubkey = $userRelayList?.event?.pubkey
+
+    if (!pubkey) return
+
+    loadBlossomServerList(pubkey)
+    loadBlockedRelayList(pubkey)
+    loadFollowList(pubkey)
+    loadGroupList(pubkey)
+    loadMuteList(pubkey)
+    loadProfile(pubkey)
+    loadSettings(pubkey)
+    loadFeedsForPubkey(pubkey)
+  }
+
+  const unsubscribeGroupList = merged([userGroupList]).subscribe(([$userGroupList]) => {
+    syncGroupList($userGroupList)
  })

-  const unsubscribeRelayList = userRelayList.subscribe($userRelayList => {
-    if ($userRelayList) {
-      loadBlossomServerList($userRelayList.event.pubkey)
-      loadBlockedRelayList($userRelayList.event.pubkey)
-      loadFollowList($userRelayList.event.pubkey)
-      loadGroupList($userRelayList.event.pubkey)
-      loadMuteList($userRelayList.event.pubkey)
-      loadProfile($userRelayList.event.pubkey)
-      loadSettings($userRelayList.event.pubkey)
-      loadFeedsForPubkey($userRelayList.event.pubkey)
-    }
-  })
-
-  const unsubscribeFollows = userFollowList.subscribe(async $userFollowList => {
-    for (const pubkeys of chunk(10, get(bootstrapPubkeys))) {
-      // This isn't urgent, avoid clogging other stuff up
-      await sleep(1000)
-
-      await Promise.all(
-        pubkeys.flatMap(pk => [
-          loadRelayList(pk),
-          loadGroupList(pk),
-          loadProfile(pk),
-          loadFollowList(pk),
-          loadMuteList(pk),
-        ]),
-      )
-    }
+  const unsubscribeRelayList = merged([userRelayList]).subscribe(([$userRelayList]) => {
+    syncRelayList($userRelayList)
  })

  return () => {
    unsubscribersByKey.forEach(call)
    unsubscribeGroupList()
    unsubscribeRelayList()
-    unsubscribeFollows()
  }
 }

@@ -280,8 +280,13 @@ const syncSpace = (url: string, rooms: string[]) => {
        url,
        signal: controller.signal,
        filters: [
+          {kinds: [ROOM_META, ROOM_ADMINS, ROOM_MEMBERS], "#d": [room]},
          {kinds: MESSAGE_KINDS, since, "#h": [room]},
          makeCommentFilter(CONTENT_KINDS, {since, "#h": [room]}),
+          {
+            kinds: [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER],
+            "#h": [room],
+          },
          {kinds: [PollResponse], since},
        ],
      })
@@ -294,7 +299,7 @@ const syncSpace = (url: string, rooms: string[]) => {

  const relayKinds = [RELAY_MEMBERS, RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER]
  const roomMetaKinds = [ROOM_META, ROOM_ADMINS, ROOM_MEMBERS, LIVEKIT_PARTICIPANTS]
-  const roomMemberKinds = [ROOM_DELETE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER]
+  const roomMemberKinds = [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER]

  pullAndListen({
    url,
@@ -321,15 +326,16 @@ const syncSpace = (url: string, rooms: string[]) => {
 }

 const syncSpaces = () => {
-  const store = derived([userGroupList, page], identity)
+  const store = merged([userGroupList, page])
  const unsubscribersByUrl = new Map<string, Unsubscriber>()
  const roomsByUrl = new Map<string, string>()

  const unsubscribe = store.subscribe(([$userGroupList, $page]) => {
    const urls = new Set(getSpaceUrlsFromGroupList($userGroupList))
+    const currentUrl = $page.params.relay ? decodeRelay($page.params.relay) : undefined

-    if ($page.params.relay) {
-      urls.add(decodeRelay($page.params.relay))
+    if (currentUrl) {
+      urls.add(currentUrl)
    }

    // Stop syncing removed spaces
@@ -344,6 +350,11 @@ const syncSpaces = () => {
    // Start or restart syncing for each space
    for (const url of urls) {
      const rooms = getSpaceRoomsFromGroupList(url, $userGroupList)
+
+      if (currentUrl === url && $page.params.h && !rooms.includes($page.params.h)) {
+        rooms.push($page.params.h)
+      }
+
      const roomsKey = rooms.join(",")

      if (unsubscribersByUrl.has(url) && roomsByUrl.get(url) === roomsKey) continue
@@ -383,6 +394,7 @@ const syncDMs = () => {
  const unsubscribersByUrl = new Map<string, Unsubscriber>()

  let currentPubkey: string | undefined
+  let currentShouldUnwrap = false

  const unsubscribeAll = () => {
    for (const [url, unsubscribe] of unsubscribersByUrl.entries()) {
@@ -391,6 +403,34 @@ const syncDMs = () => {
    }
  }

+  const syncPubkey = ($pubkey: string | undefined, $shouldUnwrap: boolean) => {
+    if ($pubkey !== currentPubkey) {
+      unsubscribeAll()
+    }
+
+    if ($pubkey && $shouldUnwrap) {
+      loadRelayList($pubkey)
+        .then(() => loadMessagingRelayList($pubkey))
+        .then($l => {
+          if ($l && currentPubkey === $pubkey && currentShouldUnwrap === $shouldUnwrap) {
+            subscribeAll($pubkey, getRelayTagValues(getListTags($l)))
+          }
+        })
+    }
+
+    currentPubkey = $pubkey
+    currentShouldUnwrap = $shouldUnwrap
+  }
+
+  const syncList = ($userMessagingRelayList: List | undefined) => {
+    const $pubkey = pubkey.get()
+    const $shouldUnwrap = shouldUnwrap.get()
+
+    if ($pubkey && $shouldUnwrap) {
+      subscribeAll($pubkey, getRelayTagValues(getListTags($userMessagingRelayList)))
+    }
+  }
+
  const subscribeAll = (pubkey: string, urls: string[]) => {
    // Start syncing newly added relays
    for (const url of urls) {
@@ -408,33 +448,16 @@ const syncDMs = () => {
    }
  }

-  // When pubkey changes, re-sync
-  const unsubscribePubkey = derived([pubkey, shouldUnwrap], identity).subscribe(
-    ([$pubkey, $shouldUnwrap]) => {
-      if ($pubkey !== currentPubkey) {
-        unsubscribeAll()
-      }
-
-      // If we have a pubkey, refresh our user's relay list then sync our subscriptions
-      if ($pubkey && $shouldUnwrap) {
-        loadRelayList($pubkey)
-          .then(() => loadMessagingRelayList($pubkey))
-          .then($l => subscribeAll($pubkey, getRelayTagValues(getListTags($l))))
-      }
-
-      currentPubkey = $pubkey
-    },
-  )
+  const unsubscribePubkey = merged([pubkey, shouldUnwrap]).subscribe(([$pubkey, $shouldUnwrap]) => {
+    syncPubkey($pubkey, $shouldUnwrap)
+  })

  // When user messaging relays change, update synchronization
-  const unsubscribeList = userMessagingRelayList.subscribe($userMessagingRelayList => {
-    const $pubkey = pubkey.get()
-    const $shouldUnwrap = shouldUnwrap.get()
-
-    if ($pubkey && $shouldUnwrap) {
-      subscribeAll($pubkey, getRelayTagValues(getListTags($userMessagingRelayList)))
-    }
-  })
+  const unsubscribeList = merged([userMessagingRelayList]).subscribe(
+    ([$userMessagingRelayList]) => {
+      syncList($userMessagingRelayList)
+    },
+  )

  return () => {
    unsubscribeAll()
@@ -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">
@@ -6,7 +6,6 @@
  import Close from "@assets/icons/close.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
-  import {clearModals} from "@app/util/modal"

  type Props = {
    onClose?: any
@@ -29,7 +28,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,
@@ -56,7 +55,7 @@
  <div class={wrapperClass}>
    <div class={innerClass} transition:fly>
      {#if !noEscape}
-        <Button class={buttonClass} onclick={clearModals}>
+        <Button class={buttonClass} onclick={onClose}>
          <Icon icon={Close} size={6} />
        </Button>
      {/if}
@@ -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>
@@ -4,13 +4,15 @@
  import Dialog from "@lib/components/Dialog.svelte"
  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"

+  const close = () => goto("/home")
+
  const children = {
    component: SpaceInviteAccept,
    props: {
      invite: $page.url.href,
-      back: () => goto("/home"),
+      back: close,
    },
  }
 </script>

-<Dialog {children} />
+<Dialog {children} onClose={close} />
@@ -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} />
@@ -172,9 +172,9 @@
      </strong>
      <Button onclick={() => (showAdvanced = !showAdvanced)}>
        {#if showAdvanced}
-          <Icon icon={AltArrowDown} />
-        {:else}
          <Icon icon={AltArrowUp} />
+        {:else}
+          <Icon icon={AltArrowDown} />
        {/if}
      </Button>
    </div>
@@ -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
userAdityaa	1d5f91fb6c	fix: realtime updates for room members and admins (#178 ) Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com> Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>	2026-04-09 21:05:30 +00:00
userAdityaa	ef18655776	make close button / backdrop work on direct invite link page (#177 ) Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com> Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>	2026-04-09 20:03:08 +00:00
sakshamjain	b786e858d9	correct inverted arrow icon in advanced section toggle (#180 ) Co-authored-by: Saksham Jain <reach2saksham2004@gmail.com> Co-committed-by: Saksham Jain <reach2saksham2004@gmail.com>	2026-04-09 19:57:15 +00:00
mplorentz	f4ebc4e99e	Video in calls (#135 ) #135 This PR adds basic video functionality to our voice rooms. Again I followed the Discord UX for inspiration, so all video calls start as voice-only calls that gracefully upgrade (and downgrade) when someone turns on a video or starts screen sharing. When a video feed is detected the Room page will change to display a grid of feeds. The grid logic is very basic, that's definitely an area to improve in the future. You can open the chat part of the room with a new button on the VoiceWidget - on the desktop layout this creates a split view with video on the left and chat on the right, but on mobile it switches to chat fullscreen. I also added a little pin icon you can use to focus on a single video feed (useful for screen sharing). There is a lot of tailwind I don't understand here, but it seems to work well enough. I moved voice.ts into a new `call` folder and moved some of its stores into `call/stores.ts` which allowed me to keep most of the video logic in `call/video.ts`. It's not a perfect encapsulation as voice.ts does subscribe to some of the hooks for the livekit calls and passes some of the signals onto `video.ts`. This could probably be broken up better but for this PR I'd rather not focus on making it perfect if that's ok. Partly for the sake of time but also because I envision another PR that renames/reorganizes things and I think a larger UX evaluation is necessary and should include real user feedback. I'm not confident tha""t the Voice Room concept as a whole will stick going forward. Maybe all rooms in a livekit enabled server should be able to host a call (like a slack huddle), maybe users want to be able to schedule calls as events, or even have them start with an ad-hoc set of participants completely outside of a NIP-29 group, etc. Co-authored-by: mplorentz <mplorentz@noreply.gitea.coracle.social> Reviewed-on: coracle/flotilla#135 Co-authored-by: Matt Lorentz <mplorentz@noreply.coracle.social> Co-committed-by: Matt Lorentz <mplorentz@noreply.coracle.social>	2026-04-08 17:10:20 +00:00
Jon Staab	65ca8a7fd8	Remove follow graph building	2026-04-08 09:46:56 -07:00
nayan9617	7f1e98dcb2	Fix fallback pull race after abort (#167 ) Co-authored-by: nayan9617 <nayanp4925@gmail.com> Co-committed-by: nayan9617 <nayanp4925@gmail.com>	2026-04-08 16:43:04 +00:00
priyanshu_bharti	4c19ee823b	73-video-thumbnails (#142 ) This PR implements video thumbnails for `.mov`, `.webm`, and `.mp4` files in the `ContentLinkBlock` component. Changes: - Added the `poster` attribute to the `<video>` tag. - Set the poster source to `{url}#t=1` to capture a clear preview frame at the 1-second mark. - Verified locally that thumbnails are now correctly displayed instead of a black/empty box. Closes #73 Reviewed-on: coracle/flotilla#142 Co-authored-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com> Co-committed-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>	2026-04-08 16:07:11 +00: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