Drop camera settings from join room dialog

Resolve VoiceWidget conflict: keep camera, screen share, and call settings.
Extend join flow with optional camera on join and device picker.
Add camera to in-call settings; rename UI to Call settings.

Made-with: Cursor

.dockerignore

@@ -9,4 +9,4 @@ build
 
 # Env files (keep .env for build; exclude local overrides)
 .env.local
-.env.*.local
+.env.*.local

.gitignore

@@ -1,6 +1,6 @@
 # Env
+.env
 .env.local
-.env.*.local
 
 # Vite
 vite.config.js.timestamp-*

CONTRIBUTING.md

@@ -1,56 +0,0 @@
-## Project Overview
-
-Flotilla is a Nostr "relays as groups" community chat client. It implements NIP-29 (relay-based groups) to create Discord-like spaces (servers) and rooms (channels).
-
-Please visit our [issue tracker](https://gitea.coracle.social/coracle/flotilla/issues) to contribute. Any new issues should be opened without a milestone, label, or project and the project owners will triage them.
-
-### Milestones
-
-Milestones indicate how soon a given task should be tackled.
-
-- [Current](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&milestone=1) issues are immediately actionable.
-- [Next](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&milestone=2) means an issue is blocked.
-- [Future](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&milestone=3) means we're deferring work until a later date.
-
-### Labels
-
-- [Design](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&labels=15) issues need design work before being implemented. This might take the form of a high-quality mockup, wireframes, user flows, or just a couple notes about where things go, depending on the nature of the task.
-- [Dev](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&labels=16) issues are ready to be implemented. Most of the work will be related to architecting and writing code.
-- [Easy](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&labels=14) issues have no dependencies, and are scoped quite narrowly.
-- [Priority](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&labels=6) issues include bugs and urgent feature requests. These should get attention first if possible, although sometimes long-standing performance issues or subtle bugs might end up here for a while.
-- [Ideas](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&labels=13) are for things that aren't scoped out yet, or which need protocol work before getting designed or implemented.
-
-### Projects
-
-Issues may or may not have a project. Projects are used to group issues thematically just for organization.
-
-## Coding conventions
-
-There are a few conventions that are helpful to know right out of the gate.
-
-- Most nostr protocol functionality is implemented via the [welshman library](https://welshman.coracle.social/)
-- Use Svelte 4 **stores** rather than runes for all state outside UI components
-- Most global state flows through Welshman's `repository` (unidirectional)
-- Query state using `deriveEventsMapped` or `deriveProfile` etc
-- Events are published via `publishThunk`, which allows for optimistic UI updates during signing/pow generation.
-- Components should have minimal props - e.g. instead of passing a whole `relay` through, pass its `url`.
-- Use `AbortController` when possible instead of request ids
-- Use `undefined` or optional properties instead of `null`
-- Do not use `any`. If there are type errors related to `unknown`, they are likely because the upstream definition of the data is incorrect.
-- Avoid using `as`, except where necessary. Instead, annotate function parameters, and ensure upstream values are typed correctly.
-- When dynamically building classes, use `cx` from `classnames`.
-- Do not define svelte event handlers inline, instead name them and put them in the script section of templates.
-
-## Contributing Workflow
-
-To contribute, do the following:
-
-- Find or create an issue and assign yourself (comment instead if you're not able to self-assign)
-- If the issue is a design task, attach or link out to any mockups/wireframes/flowcharts
-- Once a design task is completed, a maintainer will remove the `design` label and add the `dev` label
-- If the issue is a development task, fork the repository and create a branch prefixed by the issue number, e.g. `105-deep-links`
-- Before requesting a review, be sure to review any agent-generated code, run the pre-commit hooks, and test the changes.
-- Open a PR and request a review. A maintainer will get back to you with requested changes, or will merge the PR.
-- Keep your PR up-to-date by rebasing frequently on `dev`. Avoid force-pushing to `dev`.
-- PRs are rebased, squashed, and merged to keep commit history simple.
-- An issue may have multiple PRs. Once complete, it can be closed.

README.md

@@ -16,13 +16,11 @@ You can also optionally create an `.env.local` file and populate it with the fol
 - `VITE_PLATFORM_ACCENT` - A hex color for the app's accent color
 - `VITE_PLATFORM_DESCRIPTION` - A description of the app
 
-These values **won't** be used for a built version. Instead, env variables should be provided to `build.sh` directly or to the built container.
-
 If you're deploying a custom version of flotilla, be sure to remove the `plausible.coracle.social` script from `app.html`. This sends analytics to a server hosted by the developer.
 
 ## Development
 
-See [CONTRIBUTING.md](CONTRIBUTING.md).
+See [CONTRIBUTING.md](AGENTS.md).
 
 ## Deployment
 

build.sh

@@ -2,8 +2,11 @@
 
 temp_env=$(declare -p -x)
 
-if [ -f .env ]; then
-  source .env
+if [ -f .env.template ]; then
+  source .env.template
+fi
+if [ -f .env.local ]; then
+  source .env.local
 fi
 
 # Avoid overwriting env vars provided directly

ios/App/App.xcodeproj/project.pbxproj

@@ -392,7 +392,7 @@
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.7.5;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

pwa-assets.config.js

@@ -2,7 +2,7 @@ import dotenv from "dotenv"
 import {defineConfig, minimalPreset as preset} from "@vite-pwa/assets-generator/config"
 
 dotenv.config({path: ".env.local"})
-dotenv.config({path: ".env"})
+dotenv.config({path: ".env.template"})
 
 export default defineConfig({
   preset,

src/app.css

@@ -50,7 +50,6 @@
   --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
   --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
   --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
-  --video-call-panel-bg: #181e24;
 }
 
 [data-theme] {

src/app/components/PrimaryNav.svelte

@@ -14,7 +14,7 @@
   import {userSpaceUrls, PLATFORM_RELAYS} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {notifications} from "@app/util/notifications"
-  import {goToChat, makeSpacePath} from "@app/util/routes"
+  import {goToChat} from "@app/util/routes"
 
   type Props = {
     children?: Snippet
@@ -26,9 +26,7 @@
 
   const showSettingsMenu = () => pushModal(MenuSettings)
 
-  const anySpaceNotifications = $derived(
-    $userSpaceUrls.some(p => $notifications.has(makeSpacePath(p))),
-  )
+  const anySpaceNotifications = $derived($userSpaceUrls.some(p => $notifications.has(p)))
 </script>
 
 <div

src/app/components/RelaySummary.svelte

@@ -35,7 +35,7 @@
           </div>
         {/if}
       </div>
-      <div class="min-w-0">
+      <div>
         <h2 class="ellipsize whitespace-nowrap text-xl">
           <RelayName {url} />
         </h2>

src/app/components/SpaceSearch.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
   import {tick} from "svelte"
-  import {debounce} from "throttle-debounce"
-  import {request} from "@welshman/net"
+  import {createSearch} from "@welshman/app"
   import {formatTimestampAsDate, groupBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
-  import type {TrustedEvent, Filter} from "@welshman/util"
-  import {sortEventsDesc} from "@welshman/util"
+  import type {TrustedEvent} from "@welshman/util"
+  import {MESSAGE} from "@welshman/util"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import {fly} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import {CONTENT_KINDS} from "@app/core/state"
+  import {deriveEventsForUrl} from "@app/core/state"
   import {goToEvent} from "@app/util/routes"
 
   type Props = {
@@ -20,16 +19,14 @@
 
   const {url, h}: Props = $props()
 
+  const spaceMessages = deriveEventsForUrl(
+    url,
+    h ? [{kinds: [MESSAGE], "#h": [h]}] : [{kinds: [MESSAGE]}],
+  )
+
   let term = $state("")
   let show = $state(false)
-  let results = $state<TrustedEvent[]>([])
-  let loading = $state(false)
   let input: HTMLInputElement | undefined = $state()
-  let controller: AbortController | undefined
-
-  const relayStatus = $derived(
-    h ? `Searching this room on relay: ${url}.` : `Searching this space on relay: ${url}.`,
-  )
 
   const open = () => {
     show = true
@@ -43,53 +40,21 @@
   const clear = () => {
     term = ""
     show = false
-    loading = false
-    results = []
-    controller?.abort()
-    controller = undefined
   }
 
-  const getRelayUrls = () => [url]
-
-  const getFilter = (searchTerm: string): Filter =>
-    h
-      ? {kinds: CONTENT_KINDS, "#h": [h], search: searchTerm}
-      : {kinds: CONTENT_KINDS, search: searchTerm}
-
-  const search = debounce(300, async (searchTerm: string) => {
-    controller?.abort()
-
-    if (!searchTerm.trim()) {
-      loading = false
-      results = []
-      return
-    }
-
-    controller = new AbortController()
-    loading = true
-
-    try {
-      const events = await request({
-        relays: getRelayUrls(),
-        autoClose: true,
-        signal: controller.signal,
-        filters: [getFilter(searchTerm.trim())],
-      })
-
-      results = sortEventsDesc(events)
-    } catch (error) {
-      if (!(error instanceof DOMException && error.name === "AbortError")) {
-        results = []
-      }
-    } finally {
-      loading = false
-    }
-  })
-
   const onInput = () => {
-    void search(term)
+    show = true
   }
 
+  const searchIndex = $derived.by(() =>
+    createSearch($spaceMessages, {
+      getValue: event => event.id,
+      fuseOptions: {keys: ["content"]},
+    }),
+  )
+
+  const results = $derived(term ? searchIndex.searchOptions(term) : [])
+
   const eventsByAge = $derived(groupBy(e => getAgeSection(e.created_at), results))
 
   const getAgeSection = (createdAt: number) => {
@@ -157,13 +122,10 @@
             oninput={onInput} />
         </label>
         <div class="max-h-[65vh] overflow-y-auto">
-          <p class="mb-2 text-xs opacity-70">{relayStatus}</p>
           {#if !term}
             <p class="text-sm opacity-70">
-              {h ? "Search for content in this room." : "Search for content in this space."}
+              {h ? "Search for messages in this room." : "Search for messages across this space."}
             </p>
-          {:else if loading}
-            <p class="text-sm opacity-70">Searching...</p>
           {:else if eventsByAge.size === 0}
             <p class="text-sm opacity-70">No results found.</p>
           {:else}

src/app/components/VideoCallContent.svelte

@@ -7,10 +7,10 @@
   import Icon from "@lib/components/Icon.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import VideoCallVideo from "@app/components/VideoCallVideo.svelte"
-  import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import {
     currentVoiceSession,
     currentVoiceRoom,
+    videoCallContentActive,
     videoCallLayoutRevision,
     videoPrimaryTileKey,
     toggleVideoPrimaryTile,
@@ -41,7 +41,13 @@
 
   const roomMatches = $derived($currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h)
 
-  const showPanel = $derived(visible && roomMatches)
+  const allowEmptyPanel = $derived(variant === "desktop-split" || variant === "desktop-full")
+
+  const showPanel = $derived(
+    visible &&
+      roomMatches &&
+      (variant === "mobile" ? $videoCallContentActive : $videoCallContentActive || allowEmptyPanel),
+  )
 
   const tiles = $derived.by(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- re-run when remote video subscribes
@@ -152,11 +158,11 @@
   const panelChrome = $derived(
     cx(
       variant === "mobile" &&
-        "cb top-[calc(var(--sait)+6rem)] cw z-compose bg-[var(--video-call-panel-bg)] fixed inset-x-0 flex min-h-0 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 pb-2 pt-1 md:hidden",
+        "cb ct cw z-compose bg-base-300/95 fixed inset-x-0 flex min-h-0 flex-col gap-2 overflow-hidden p-2 md:hidden",
       variant === "desktop-split" &&
-        "cb ct cw-split-video z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
+        "cb ct cw-split-video z-compose bg-base-300/95 fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
       variant === "desktop-full" &&
-        "cb ct cw z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
+        "cb ct cw z-compose bg-base-300/95 fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
       className,
     ),
   )
@@ -170,6 +176,8 @@
       layout === "default" && "aspect-video w-full min-h-0",
       layout === "strip" && "aspect-video w-44 shrink-0",
       tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
+      $videoPrimaryTileKey === tileKey(tile) &&
+        "ring-2 ring-primary ring-offset-2 ring-offset-base-300",
     )}>
     {#if tile.attachable}
       <VideoCallVideo
@@ -187,14 +195,9 @@
       {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
     </span>
     {#if tiles.length > 1}
-      {@const pinned = $videoPrimaryTileKey === tileKey(tile)}
       <Button
-        data-tip={pinned ? "Exit spotlight" : "Spotlight"}
-        aria-pressed={pinned}
-        class={cx(
-          "absolute right-1 top-1 z-20 btn btn-xs btn-square btn-ghost",
-          pinned ? "btn-active bg-primary/25 text-primary" : "bg-base-100/70",
-        )}
+        data-tip={$videoPrimaryTileKey === tileKey(tile) ? "Exit spotlight" : "Spotlight"}
+        class="absolute right-1 top-1 z-20 btn btn-xs btn-circle btn-ghost bg-base-100/70"
         onclick={spotlightHandlerFor(tileKey(tile))}>
         <Icon icon={Pin} size={3} />
       </Button>
@@ -202,56 +205,43 @@
   </div>
 {/snippet}
 
-{#snippet videoPanelBody()}
-  {#if showTileGrid}
-    {#if useSpotlightLayout && primaryTile}
-      <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
-        {@render videoTile(primaryTile, "spotlight")}
-        {#if secondaryTiles.length > 0}
-          <div
-            class="flex max-h-40 shrink-0 flex-row gap-2 overflow-x-auto overflow-y-hidden py-0.5">
-            {#each secondaryTiles as tile (tileKey(tile))}
-              {@render videoTile(tile, "strip")}
-            {/each}
-          </div>
-        {/if}
-      </div>
-    {:else if useMultiGrid}
-      <div
-        class="grid min-h-0 flex-1 grid-cols-1 content-start gap-2 overflow-y-auto sm:grid-cols-2">
-        {#each tiles as tile (tileKey(tile))}
-          {@render videoTile(tile, "default")}
-        {/each}
-      </div>
-    {:else}
-      <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
-        {#each tiles as tile (tileKey(tile))}
-          {@render videoTile(tile, "default")}
-        {/each}
-      </div>
-    {/if}
-  {:else}
-    <div
-      class="flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-2 rounded-box bg-base-200/50 p-4 text-center text-sm opacity-80">
-      <p>No camera or screen share yet.</p>
-      <p class="text-xs">Use the camera or screen share control to share video.</p>
-    </div>
-  {/if}
-{/snippet}
-
-{#if showPanel}
+{#if showPanel && (showTileGrid || allowEmptyPanel)}
   <div class={panelChrome}>
-    {#if variant === "mobile"}
-      <div class="flex min-h-0 flex-1 flex-col gap-2">
-        <div class="min-h-0 flex-1 overflow-hidden">
-          {@render videoPanelBody()}
+    {#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>
-        <div class="shrink-0">
-          <VoiceWidget />
+      {:else if useMultiGrid}
+        <div
+          class="grid min-h-0 flex-1 grid-cols-1 content-start gap-2 overflow-y-auto sm:grid-cols-2">
+          {#each tiles as tile (tileKey(tile))}
+            {@render videoTile(tile, "default")}
+          {/each}
         </div>
-      </div>
+      {:else}
+        <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
+          {#each tiles as tile (tileKey(tile))}
+            {@render videoTile(tile, "default")}
+          {/each}
+        </div>
+      {/if}
     {:else}
-      {@render videoPanelBody()}
+      <div
+        class="flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-2 rounded-box bg-base-100/50 p-4 text-center text-sm opacity-80">
+        <p>No camera or screen share yet.</p>
+        <p class="text-xs">
+          Use the camera or screen share control in the voice widget to share video.
+        </p>
+      </div>
     {/if}
   </div>
 {/if}

src/app/components/VoiceCallAudioSettingsDialog.svelte

@@ -5,7 +5,6 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import {
     currentVoiceSession,
@@ -85,7 +84,6 @@
     popModal()
   }
 
-  // Output not support in Safari
   const canPickOutput = supportsAudioOutputSelection()
 </script>
 
@@ -93,8 +91,8 @@
   <ModalBody>
     <ModalHeader>
       <ModalTitle>Call settings</ModalTitle>
-      <ModalSubtitle>Microphone, speaker, and camera for this call.</ModalSubtitle>
     </ModalHeader>
+    <p class="text-sm opacity-80">Microphone, speaker, and camera for this call.</p>
     <div class="flex flex-col gap-4 pt-2">
       <FieldInline>
         {#snippet label()}
@@ -158,6 +156,6 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-primary w-full" onclick={onDone}>Done</Button>
+    <Button class="btn btn-primary" onclick={onDone}>Done</Button>
   </ModalFooter>
 </Modal>

src/app/components/VoiceRoomJoinDialog.svelte

@@ -12,11 +12,9 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   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 {popModal} from "@app/util/modal"
-  import {pushToast} from "@app/util/toast"
 
   type Props = {
     url: string
@@ -47,16 +45,6 @@
 
   const goBack = () => history.back()
 
-  const handleJoinError = (e: unknown) => {
-    if (e instanceof AbortError) return
-    console.error("Failed to join voice room", e)
-    let message = "Failed to join voice room"
-    if (e instanceof TimeoutError)
-      message = "Connection timed out. Please check your network and try again."
-    else if (e instanceof Error) message = e.message
-    pushToast({theme: "error", message})
-  }
-
   const joinVoice = async () => {
     popModal()
     await joinVoiceRoom(
@@ -64,7 +52,7 @@
       h,
       startWithoutMic,
       startWithoutMic ? undefined : selectedDeviceId || undefined,
-    ).catch(handleJoinError)
+    )
   }
 </script>
 
@@ -89,7 +77,7 @@
           type="checkbox"
           class="checkbox"
           bind:checked={startWithoutMic} />
-        <label for="voice-start-without-mic" class="text-sm cursor-pointer">
+        <label for="voice-start-without-mic" class="cursor-pointer text-sm">
           Join without microphone (you can unmute later)
         </label>
       </div>

src/app/components/VoiceWidget.svelte

@@ -1,18 +1,16 @@
 <script lang="ts">
   import {readable} from "svelte/store"
-  import {fade, fly} from "svelte/transition"
-  import {browser} from "$app/environment"
+  import {fly} from "svelte/transition"
   import {goto} from "$app/navigation"
   import {page} from "$app/stores"
-  import cx from "classnames"
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
+  import 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 Icon from "@lib/components/Icon.svelte"
@@ -28,16 +26,12 @@
     type Room,
   } from "@app/core/state"
   import {pushModal} from "@app/util/modal"
-  import {notifications} from "@app/util/notifications"
   import {makeRoomPath} from "@app/util/routes"
   import {
     VoiceState,
     currentVoiceSession,
     currentVoiceRoom,
     voiceState,
-    voiceMobileRoomPanel,
-    voiceDesktopRoomPanel,
-    isLocalSpeaking,
     leaveVoiceRoom,
     toggleMute,
     toggleCamera,
@@ -77,121 +71,29 @@
     pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
 
-  const goToRoom = () => {
-    if (!targetRoom) return
-    const path = makeRoomPath(targetRoom.url, targetRoom.h)
-    if ($page.url.pathname !== path) {
-      void goto(path)
-    }
-  }
-
-  const openCallSettings = () => {
+  const openAudioSettings = () => {
     pushModal(VoiceCallAudioSettingsDialog)
   }
-
-  let isMd = $state(
-    typeof window !== "undefined" && window.matchMedia("(min-width: 768px)").matches,
-  )
-
-  $effect(() => {
-    if (!browser) return
-    const mq = window.matchMedia("(min-width: 768px)")
-    const sync = () => {
-      isMd = mq.matches
-    }
-    sync()
-    mq.addEventListener("change", sync)
-    return () => mq.removeEventListener("change", sync)
-  })
-
-  const showVoiceLayoutToggle = $derived(
-    $voiceState === VoiceState.Connected &&
-      targetRoom !== undefined &&
-      getRoomType(targetRoom) === RoomType.Voice &&
-      typeof h === "string" &&
-      relay !== undefined &&
-      decodeRelay(relay) === targetRoom.url &&
-      h === targetRoom.h,
-  )
-
-  const layoutToggleActive = $derived(
-    showVoiceLayoutToggle &&
-      ((!isMd && $voiceMobileRoomPanel === "chat") || (isMd && $voiceDesktopRoomPanel === "split")),
-  )
-
-  const onLayoutToggle = () => {
-    if (!showVoiceLayoutToggle) return
-    if (isMd) {
-      voiceDesktopRoomPanel.update(p => (p === "split" ? "chat" : "split"))
-    } else {
-      voiceMobileRoomPanel.update(p => (p === "chat" ? "video" : "chat"))
-    }
-  }
-
-  const chatUnread = $derived(
-    targetRoom !== undefined && $notifications.has(makeRoomPath(targetRoom.url, targetRoom.h)),
-  )
-
-  const mediaToggleClass = "center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
 </script>
 
-{#snippet mutedSlash(show: boolean)}
-  {#if show}
-    <span
-      class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
-      aria-hidden="true">
-      <span class="h-[1.3px] w-[150%] max-w-none shrink-0 -rotate-45 rounded-full bg-current"
-      ></span>
-    </span>
-  {/if}
-{/snippet}
-
 {#if targetRoom}
   <div
     in:fly={{y: 60, duration: 350}}
     out:fly={{y: 60, duration: 250}}
     class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
-    <div class="flex items-start justify-between gap-2">
-      <button
-        type="button"
-        class="min-w-0 flex-1 rounded-lg px-1 py-0.5 text-left outline-none hover:bg-base-200/60 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-base-100"
-        onclick={goToRoom}
-        aria-label="Open room {roomName}">
-        <div class="flex flex-col gap-0.5">
-          {#if $voiceState === VoiceState.Joining}
-            <span class="text-sm font-semibold text-warning">Joining...</span>
-          {:else if $voiceState === VoiceState.Connected}
-            <span class="text-sm font-semibold text-success">Voice Connected</span>
-          {:else}
-            <span class="text-sm font-semibold text-neutral-content">Disconnected</span>
-          {/if}
-          <span class="ellipsize text-xs opacity-70">
-            {roomName} / {spaceName}
-          </span>
-        </div>
-      </button>
-      {#if showVoiceLayoutToggle}
-        <Button
-          data-tip="Toggle Chat"
-          class={cx(
-            mediaToggleClass,
-            "relative shrink-0 overflow-visible",
-            layoutToggleActive && "text-primary",
-          )}
-          onclick={onLayoutToggle}>
-          <span class="relative inline-flex">
-            <Icon icon={ChatRound} size={4} />
-            {#if chatUnread}
-              <span
-                transition:fade={{duration: 150}}
-                class="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-primary ring-2 ring-base-100"
-                aria-hidden="true"></span>
-            {/if}
-          </span>
-        </Button>
+    <div class="flex flex-col gap-0.5">
+      {#if $voiceState === VoiceState.Joining}
+        <span class="text-sm font-semibold text-warning">Joining...</span>
+      {:else if $voiceState === VoiceState.Connected}
+        <span class="text-sm font-semibold text-success">Voice Connected</span>
+      {:else}
+        <span class="text-sm font-semibold text-neutral-content">Disconnected</span>
       {/if}
+      <span class="ellipsize text-xs opacity-70">
+        {roomName} / {spaceName}
+      </span>
     </div>
-    <div class="flex flex-wrap items-center gap-2">
+    <div class="flex items-center gap-1">
       {#if $voiceState === VoiceState.Joining}
         <span class="loading loading-spinner loading-sm"></span>
         <Button
@@ -203,35 +105,32 @@
       {:else if $voiceState === VoiceState.Connected && $currentVoiceSession}
         <Button
           data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
-          class={cx(
-            mediaToggleClass,
-            "overflow-visible",
-            !$currentVoiceSession.muted && $isLocalSpeaking && "text-primary",
-            $currentVoiceSession.muted &&
-              "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
-          )}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.muted
+            ? 'btn-error'
+            : 'btn-ghost'}"
           onclick={toggleMute}>
-          <span class="relative inline-flex items-center justify-center overflow-visible">
-            <Icon icon={Microphone} size={4} />
-            {@render mutedSlash($currentVoiceSession.muted)}
-          </span>
+          <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
         </Button>
         <Button
           data-tip={$currentVoiceSession.cameraOn ? "Turn off camera" : "Turn on camera"}
-          class={cx(mediaToggleClass, $currentVoiceSession.cameraOn && "text-primary")}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.cameraOn
+            ? 'btn-ghost'
+            : 'btn-error'}"
           onclick={toggleCamera}>
           <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
         </Button>
         <Button
           data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
-          class={cx(mediaToggleClass, $currentVoiceSession.screenShareOn && "text-primary")}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.screenShareOn
+            ? 'btn-ghost'
+            : 'btn-error'}"
           onclick={toggleScreenShare}>
           <Icon icon={Monitor} size={4} />
         </Button>
         <Button
           data-tip="Call settings"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
-          onclick={openCallSettings}>
+          onclick={openAudioSettings}>
           <Icon icon={Settings} size={4} />
         </Button>
         <Button

src/app/core/state.ts

@@ -191,9 +191,7 @@ export const PLATFORM_TERMS = import.meta.env.VITE_PLATFORM_TERMS
 
 export const PLATFORM_PRIVACY = import.meta.env.VITE_PLATFORM_PRIVACY
 
-export const PLATFORM_LOGO = import.meta.env.PROD
-  ? PLATFORM_URL + "/logo.png"
-  : import.meta.env.VITE_PLATFORM_LOGO.replace(/^static/, "") || PLATFORM_URL + "/logo.png"
+export const PLATFORM_LOGO = PLATFORM_URL + "/logo.png"
 
 export const PLATFORM_NAME = import.meta.env.VITE_PLATFORM_NAME
 

src/app/core/sync.ts

@@ -298,7 +298,10 @@ const syncSpace = (url: string, rooms: string[]) => {
     url,
     signal: controller.signal,
     filters: [
-      {kinds: [...relayKinds, ...roomMetaKinds, ...roomMemberKinds, ...MESSAGE_KINDS]},
+      {kinds: relayKinds},
+      {kinds: roomMetaKinds},
+      {kinds: roomMemberKinds},
+      {kinds: MESSAGE_KINDS, since},
       makeCommentFilter(CONTENT_KINDS, {since}),
     ],
     onEvent: event => {

src/app/voice.ts

@@ -87,17 +87,6 @@ export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
 
 export const currentVoiceRoom = writable<Room | undefined>(undefined)
 
-/** Mobile room UI: full-screen chat vs video (see VoiceWidget layout toggle). */
-export const voiceMobileRoomPanel = writable<"chat" | "video">("chat")
-
-/** Desktop room UI: messages only, video only, or split (see VoiceWidget layout toggle). */
-export const voiceDesktopRoomPanel = writable<"chat" | "video" | "split">("split")
-
-const resetVoiceRoomPanels = () => {
-  voiceMobileRoomPanel.set("chat")
-  voiceDesktopRoomPanel.set("chat")
-}
-
 export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
 
 /** Bumps when remote video is subscribed/unsubscribed so layout/video UI can react. */
@@ -146,16 +135,6 @@ export const isParticipantSpeaking = derived(
     $participants.some(sp => participantKey(sp) === participantKey(p)),
 )
 
-/** True when the local user is in LiveKit’s active-speakers list (currently talking). */
-export const isLocalSpeaking = derived(
-  [currentVoiceSession, speakingParticipants],
-  ([$session, $speaking]) => {
-    if (!$session?.room) return false
-    const local = participantFromLiveKitIdentity($session.room.localParticipant.identity)
-    return $speaking.some(sp => participantKey(sp) === participantKey(local))
-  },
-)
-
 const fetchLivekitToken = async (
   url: string,
   groupId: string,
@@ -240,7 +219,6 @@ const onRoomDisconnected = (reason?: DisconnectReason) => {
   videoCallLayoutRevision.set(0)
   videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
-  resetVoiceRoomPanels()
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
     voiceState.set(VoiceState.Disconnected)
     const message =
@@ -408,7 +386,6 @@ export const leaveVoiceRoom = async () => {
   videoCallLayoutRevision.set(0)
   videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
-  resetVoiceRoomPanels()
   session.room.disconnect()
   speakingParticipants.set([])
   participantPubkeyMap.set(new Map())
@@ -442,6 +419,26 @@ export const toggleMute = async () => {
 
 const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
 
+const roomHasSubscribedRemoteVisual = (room: LiveKitRoom): boolean => {
+  for (const p of room.remoteParticipants.values()) {
+    for (const source of VISUAL_SOURCES) {
+      const pub = p.getTrackPublication(source)
+      if (pub?.isSubscribed && pub.track) return true
+    }
+  }
+  return false
+}
+
+/** True when local camera/screen share is on or any subscribed remote camera/screen track. */
+export const videoCallContentActive = derived(
+  [currentVoiceSession, voiceState, videoCallLayoutRevision],
+  ([$session, $state, _rev]) => {
+    if ($state !== VoiceState.Connected || !$session) return false
+    if ($session.cameraOn || $session.screenShareOn) return true
+    return roomHasSubscribedRemoteVisual($session.room)
+  },
+)
+
 const countLiveVisualFeeds = (session: VoiceSession): number => {
   const room = session.room
   let n = 0

src/lib/components/Button.svelte

@@ -14,7 +14,6 @@
     style?: string
     disabled?: boolean
     "data-tip"?: string
-    "aria-pressed"?: boolean
   } = $props()
 
   const className = $derived(`text-left ${restProps.class}`)

src/routes/spaces/+page.svelte

@@ -31,8 +31,7 @@
   } from "@app/core/state"
   import {setSpaceMembershipOrder} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
-  import {goToSpace, makeSpacePath} from "@app/util/routes"
-  import {notifications} from "@app/util/notifications"
+  import {goToSpace} from "@app/util/routes"
 
   const addSpace = () => pushModal(SpaceAdd)
 
@@ -255,12 +254,9 @@
                 ondrop={e => onDrop(e, url)}
                 ondragend={onDragEnd}>
                 <Button
-                  class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative"
+                  class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full"
                   onclick={() => openSpace(url)}>
                   <RelaySummary hideFavorites {url} />
-                  {#if $notifications.has(makeSpacePath(url))}
-                    <div class="absolute right-3 top-3 h-2 w-2 rounded-full bg-primary"></div>
-                  {/if}
                 </Button>
               </div>
             {/each}

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -52,14 +52,7 @@
   } from "@app/core/state"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import VideoCallContent from "@app/components/VideoCallContent.svelte"
-  import {
-    VoiceState,
-    currentVoiceRoom,
-    videoTileCount,
-    voiceMobileRoomPanel,
-    voiceDesktopRoomPanel,
-    voiceState,
-  } from "@app/voice"
+  import {VoiceState, currentVoiceRoom, videoTileCount, voiceState} from "@app/voice"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
   import {checked} from "@app/util/notifications"
@@ -80,24 +73,27 @@
       $currentVoiceRoom?.h === h,
   )
 
+  let mobileRoomPanel = $state<"chat" | "video">("chat")
+  let voiceDesktopPanel = $state<"chat" | "video" | "split">("split")
+
   const showMobileVideoPanel = $derived(
-    isVoiceRoom && $voiceState === VoiceState.Connected && $voiceMobileRoomPanel === "video",
+    isVoiceRoom && $voiceState === VoiceState.Connected && mobileRoomPanel === "video",
   )
 
   const pageContentFrame = $derived<"default" | "split-right">(
-    voiceConnectedHere && $voiceDesktopRoomPanel === "split" ? "split-right" : "default",
+    voiceConnectedHere && voiceDesktopPanel === "split" ? "split-right" : "default",
   )
 
   const pageContentHiddenDesktopVideoOnly = $derived(
-    voiceConnectedHere && $voiceDesktopRoomPanel === "video",
+    voiceConnectedHere && voiceDesktopPanel === "video",
   )
 
   let prevVideoTileCount = $state(0)
 
   $effect(() => {
     if ($voiceState !== VoiceState.Connected) {
-      voiceMobileRoomPanel.set("chat")
-      voiceDesktopRoomPanel.set("chat")
+      mobileRoomPanel = "chat"
+      voiceDesktopPanel = "chat"
       prevVideoTileCount = 0
       return
     }
@@ -111,8 +107,8 @@
     }
 
     if (prevVideoTileCount === 0 && n >= 1) {
-      voiceDesktopRoomPanel.set("video")
-      voiceMobileRoomPanel.set("video")
+      voiceDesktopPanel = "video"
+      mobileRoomPanel = "video"
     }
     prevVideoTileCount = n
   })
@@ -422,6 +418,40 @@
     <RoomName {url} {h} />
   {/snippet}
   {#snippet action()}
+    {#if voiceConnectedHere}
+      <div class="flex gap-1 md:hidden">
+        <Button
+          class={cx("btn btn-sm", mobileRoomPanel === "chat" && "btn-primary")}
+          onclick={() => (mobileRoomPanel = "chat")}>
+          Chat
+        </Button>
+        <Button
+          class={cx("btn btn-sm", mobileRoomPanel === "video" && "btn-primary")}
+          onclick={() => (mobileRoomPanel = "video")}>
+          Video
+        </Button>
+      </div>
+      <div class="hidden flex-wrap gap-1 md:flex">
+        <Button
+          data-tip="Messages only"
+          class={cx("btn btn-sm", voiceDesktopPanel === "chat" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "chat")}>
+          Chat
+        </Button>
+        <Button
+          data-tip="Video only"
+          class={cx("btn btn-sm", voiceDesktopPanel === "video" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "video")}>
+          Video
+        </Button>
+        <Button
+          data-tip="Video and chat side by side"
+          class={cx("btn btn-sm", voiceDesktopPanel === "split" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "split")}>
+          Video + Chat
+        </Button>
+      </div>
+    {/if}
     <SpaceSearch {url} {h} />
     <Button class="btn btn-neutral btn-sm btn-square" onclick={showRoomDetail}>
       <Icon size={4} icon={InfoCircle} />
@@ -509,22 +539,18 @@
 </PageContent>
 
 {#if voiceConnectedHere}
-  <VideoCallContent
-    variant="desktop-split"
-    {url}
-    {h}
-    visible={$voiceDesktopRoomPanel === "split"} />
-  <VideoCallContent variant="desktop-full" {url} {h} visible={$voiceDesktopRoomPanel === "video"} />
+  <VideoCallContent variant="desktop-split" {url} {h} visible={voiceDesktopPanel === "split"} />
+  <VideoCallContent variant="desktop-full" {url} {h} visible={voiceDesktopPanel === "video"} />
 {/if}
 
 {#if isVoiceRoom && $voiceState === VoiceState.Connected}
-  <VideoCallContent variant="mobile" {url} {h} visible={$voiceMobileRoomPanel === "video"} />
+  <VideoCallContent variant="mobile" {url} {h} visible={mobileRoomPanel === "video"} />
 {/if}
 
 <div
   class={cx(
     "chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0",
-    voiceConnectedHere && $voiceDesktopRoomPanel === "split" && "cw-split-chat",
+    voiceConnectedHere && voiceDesktopPanel === "split" && "cw-split-chat",
     pageContentHiddenDesktopVideoOnly && "md:hidden",
     showMobileVideoPanel && "max-md:hidden",
   )}
@@ -576,8 +602,7 @@
     {/if}
   </div>
   {#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected}
-    <div
-      class={cx("hide-on-keyboard flex-shrink-0 p-2 md:hidden", showMobileVideoPanel && "hidden")}>
+    <div class="hide-on-keyboard flex-shrink-0 p-2 md:hidden">
       <VoiceWidget />
     </div>
   {/if}

tailwind.config.js

@@ -3,7 +3,7 @@ import daisyui from "daisyui"
 import themes from "daisyui/src/theming/themes"
 
 config({path: ".env.local"})
-config({path: ".env"})
+config({path: ".env.template"})
 
 /** @type {import('tailwindcss').Config} */
 export default {

vite.config.ts

@@ -5,7 +5,7 @@ import {sveltekit} from "@sveltejs/kit/vite"
 import svg from "@poppanator/sveltekit-svg"
 
 config({path: ".env.local"})
-config({path: ".env"})
+config({path: ".env.template"})
 
 export default defineConfig({
   server: {