feat: persist composer drafts in memory across navigation

Co-authored-by: Matt Lorentz <mplorentz@noreply.coracle.social>
Co-committed-by: Matt Lorentz <mplorentz@noreply.coracle.social>

.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

@@ -0,0 +1,56 @@
+## 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,11 +16,13 @@ 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](AGENTS.md).
+See [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## Deployment
 

build.sh

@@ -2,11 +2,8 @@
 
 temp_env=$(declare -p -x)
 
-if [ -f .env.template ]; then
-  source .env.template
-fi
-if [ -f .env.local ]; then
-  source .env.local
+if [ -f .env ]; then
+  source .env
 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.5;
+				MARKETING_VERSION = 1.7.2;
 				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.template"})
+dotenv.config({path: ".env"})
 
 export default defineConfig({
   preset,

src/app/components/CalendarEventForm.svelte

@@ -20,6 +20,7 @@
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
+  import {getDraft, setDraft, clearDraft} from "@app/util/drafts"
   import {pushToast} from "@app/util/toast"
   import {canEnforceNip70} from "@app/core/commands"
 
@@ -37,7 +38,13 @@
     }
   }
 
-  const {url, h, header, initialValues}: Props = $props()
+  let {url, h, header, initialValues}: Props = $props()
+
+  const draftKey = `calendar:${url}:${h ?? ""}`
+  const draft = getDraft(draftKey)
+  if (!initialValues) {
+    initialValues = draft as unknown as typeof initialValues
+  }
 
   const shouldProtect = canEnforceNip70(url)
 
@@ -95,17 +102,34 @@
 
     pushToast({message: "Your event has been saved!"})
     publishThunk({event, relays: [url]})
+    clearDraft(draftKey)
     history.back()
   }
 
-  const content = initialValues?.content || ""
-  const editor = makeEditor({url, submit, uploading, content})
+  const onChange = (json: unknown) => {
+    setDraft(draftKey, {editorContent: json, title, location})
+  }
+  const editor = makeEditor({
+    url,
+    submit,
+    uploading,
+    onChange,
+    content: draft.editorContent ?? initialValues?.content ?? "",
+  })
 
-  let title = $state(initialValues?.title || "")
-  let location = $state(initialValues?.location || "")
+  let title = $state(initialValues?.title ?? "")
+  let location = $state(initialValues?.location ?? "")
   let start: number | undefined = $state(initialValues?.start)
   let end: number | undefined = $state(initialValues?.end)
-  let endDirty = Boolean(initialValues?.end)
+  let endDirty = $state(Boolean(initialValues?.end))
+
+  $effect(() => {
+    setDraft(draftKey, {
+      ...getDraft(draftKey),
+      title,
+      location,
+    })
+  })
 
   $effect(() => {
     if (!endDirty && start) {

src/app/components/Chat.svelte

@@ -66,6 +66,7 @@
   const {pubkeys, info}: Props = $props()
 
   const chat = deriveChat(pubkeys)
+  const draftKey = `dm:${$chat?.id}`
   const others = remove($pubkey!, pubkeys)
   const missingRelayLists = $derived(others.filter(pk => !$messagingRelayListsByPubkey.has(pk)))
 
@@ -353,6 +354,7 @@
       {onEscape}
       {onEditPrevious}
       content={eventToEdit?.content}
+      draftKey={eventToEdit ? undefined : draftKey}
       disabled={Boolean(missingRelayLists.length)} />
   {/key}
 </div>

src/app/components/ChatCompose.svelte

@@ -10,16 +10,20 @@
   import Button from "@lib/components/Button.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {makeEditor} from "@app/editor"
+  import {getDraft, setDraft, clearDraft} from "@app/util/drafts"
 
   type Props = {
     content?: string
     disabled?: boolean
+    draftKey?: string
     onEscape?: () => void
     onEditPrevious?: () => void
     onSubmit: (event: EventContent) => void
   }
 
-  const {content, disabled = false, onEscape, onEditPrevious, onSubmit}: Props = $props()
+  const {content, disabled = false, draftKey, onEscape, onEditPrevious, onSubmit}: Props = $props()
+
+  const draft = draftKey ? getDraft(draftKey) : {}
 
   const autofocus = !isMobile && !disabled
 
@@ -59,14 +63,20 @@
 
     onSubmit({content, tags})
 
+    if (draftKey) clearDraft(draftKey)
     ed.chain().clearContent().run()
   }
 
+  const onChange = (json: unknown) => {
+    if (draftKey) setDraft(draftKey, {content: json})
+  }
+
   const editor = makeEditor({
-    content,
+    content: content ?? (draft.content as string | object | undefined),
     autofocus,
     submit,
     uploading,
+    onChange,
     aggressive: true,
     encryptFiles: true,
   })

src/app/components/ClassifiedForm.svelte

@@ -20,6 +20,7 @@
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
+  import {getDraft, setDraft, clearDraft} from "@app/util/drafts"
   import {canEnforceNip70, uploadFile} from "@app/core/commands"
 
   type Props = {
@@ -38,7 +39,13 @@
     }
   }
 
-  const {url, h, header, initialValues}: Props = $props()
+  let {url, h, header, initialValues}: Props = $props()
+
+  const draftKey = `classified:${url}:${h ?? ""}`
+  const draft = getDraft(draftKey)
+  if (!initialValues) {
+    initialValues = draft as unknown as typeof initialValues
+  }
 
   const shouldProtect = canEnforceNip70(url)
 
@@ -110,22 +117,30 @@
         event: makeEvent(CLASSIFIED, {content, tags}),
       })
 
+      clearDraft(draftKey)
       history.back()
     } finally {
       loading = false
     }
   }
 
-  const content = initialValues?.content || ""
-  const editor = makeEditor({url, submit, content})
+  const initialContent = initialValues?.content || ""
+  const onChange = (json: unknown) => {
+    setDraft(draftKey, {editorContent: json, title, price, currency, topics, status})
+  }
+  const editor = makeEditor({url, submit, onChange, content: draft.editorContent ?? initialContent})
 
   let loading = $state(false)
-  let title = $state(initialValues?.title || "")
-  let status = $state(initialValues?.status || "active")
-  let price = $state(Number(initialValues?.price || 0))
-  let currency = $state(initialValues?.currency || "SAT")
-  let images = $state<(string | File)[]>(initialValues?.images || [])
-  let topics = $state(uniq(removeUndefined((initialValues?.topics || []).map(normalizeTopic))))
+  let title = $state(initialValues?.title ?? "")
+  let status = $state(initialValues?.status ?? "active")
+  let price = $state(Number(initialValues?.price ?? 0))
+  let currency = $state(initialValues?.currency ?? "SAT")
+  let images = $state<(string | File)[]>(initialValues?.images ?? [])
+  let topics = $state(uniq(removeUndefined((initialValues?.topics ?? []).map(normalizeTopic))))
+
+  $effect(() => {
+    setDraft(draftKey, {...getDraft(draftKey), title, price, currency, topics, status})
+  })
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>

src/app/components/EventReply.svelte

@@ -10,10 +10,14 @@
   import {publishComment, canEnforceNip70} from "@app/core/commands"
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
+  import {getDraft, setDraft, clearDraft} from "@app/util/drafts"
   import {pushToast} from "@app/util/toast"
 
   const {url, event, onClose, onSubmit} = $props()
 
+  const draftKey = `reply:${event.id}`
+  const draft = getDraft(draftKey)
+
   const shouldProtect = canEnforceNip70(url)
 
   const uploading = writable(false)
@@ -38,10 +42,20 @@
       })
     }
 
+    clearDraft(draftKey)
     onSubmit(publishComment({event, content, tags, relays: [url]}))
   }
 
-  const editor = makeEditor({url, submit, uploading, autofocus: !isMobile})
+  const onChange = (json: unknown) => setDraft(draftKey, {content: json})
+
+  const editor = makeEditor({
+    url,
+    submit,
+    uploading,
+    autofocus: !isMobile,
+    content: draft.content as string | object | undefined,
+    onChange,
+  })
 
   let form: HTMLElement
   let spacer: HTMLElement

src/app/components/GoalCreate.svelte

@@ -20,6 +20,7 @@
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
+  import {getDraft, setDraft, clearDraft} from "@app/util/drafts"
   import {canEnforceNip70} from "@app/core/commands"
 
   type Props = {
@@ -29,6 +30,9 @@
 
   const {url, h}: Props = $props()
 
+  const draftKey = `goal:${url}:${h ?? ""}`
+  const draft = getDraft(draftKey)
+
   const shouldProtect = canEnforceNip70(url)
 
   const uploading = writable(false)
@@ -77,13 +81,27 @@
       event: makeEvent(ZAP_GOAL, {content, tags}),
     })
 
+    clearDraft(draftKey)
     history.back()
   }
 
-  const editor = makeEditor({url, submit, uploading, placeholder: "What's on your mind?"})
+  const onChange = (json: unknown) => setDraft(draftKey, {editorContent: json, content, amount})
 
-  let content = $state("")
-  let amount = $state(1000)
+  const editor = makeEditor({
+    url,
+    submit,
+    uploading,
+    onChange,
+    placeholder: "What's on your mind?",
+    content: draft.editorContent as string | object | undefined,
+  })
+
+  let content = $state((draft.content as string | undefined) ?? "")
+  let amount = $state((draft.amount as number | undefined) ?? 1000)
+
+  $effect(() => {
+    setDraft(draftKey, {...getDraft(draftKey), content, amount})
+  })
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>

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

src/app/components/RelaySummary.svelte

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

src/app/components/RoomCompose.svelte

@@ -12,6 +12,7 @@
   import ComposeMenu from "@app/components/ComposeMenu.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {makeEditor} from "@app/editor"
+  import {getDraft, setDraft, clearDraft} from "@app/util/drafts"
   import {onDestroy, onMount} from "svelte"
 
   type Props = {
@@ -25,6 +26,9 @@
 
   const {url, h, content, onEscape, onEditPrevious, onSubmit}: Props = $props()
 
+  const draftKey = url || h ? `room:${url ?? ""}:${h ?? ""}` : undefined
+  const draft = draftKey ? getDraft(draftKey) : {}
+
   const autofocus = !isMobile
 
   const uploading = writable(false)
@@ -61,10 +65,23 @@
 
     onSubmit({content, tags})
 
+    if (draftKey) clearDraft(draftKey)
     ed.chain().clearContent().run()
   }
 
-  const editor = makeEditor({url, content, autofocus, submit, uploading, aggressive: true})
+  const onChange = (json: unknown) => {
+    if (draftKey) setDraft(draftKey, {content: json})
+  }
+
+  const editor = makeEditor({
+    url,
+    content: content ?? (draft.content as string | object | undefined),
+    autofocus,
+    submit,
+    uploading,
+    onChange,
+    aggressive: true,
+  })
 
   let popover: Instance | undefined = $state()
 

src/app/components/SpaceSearch.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
   import {tick} from "svelte"
-  import {createSearch} from "@welshman/app"
+  import {debounce} from "throttle-debounce"
+  import {request} from "@welshman/net"
   import {formatTimestampAsDate, groupBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
-  import type {TrustedEvent} from "@welshman/util"
-  import {MESSAGE} from "@welshman/util"
+  import type {TrustedEvent, Filter} from "@welshman/util"
+  import {sortEventsDesc} 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 {deriveEventsForUrl} from "@app/core/state"
+  import {CONTENT_KINDS} from "@app/core/state"
   import {goToEvent} from "@app/util/routes"
 
   type Props = {
@@ -19,14 +20,16 @@
 
   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
@@ -40,21 +43,53 @@
   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 = () => {
-    show = true
+    void search(term)
   }
 
-  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) => {
@@ -122,10 +157,13 @@
             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 messages in this room." : "Search for messages across this space."}
+              {h ? "Search for content in this room." : "Search for content in 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/ThreadCreate.svelte

@@ -18,6 +18,7 @@
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
+  import {getDraft, setDraft, clearDraft} from "@app/util/drafts"
   import {canEnforceNip70} from "@app/core/commands"
 
   type Props = {
@@ -27,6 +28,9 @@
 
   const {url, h}: Props = $props()
 
+  const draftKey = `thread:${url}:${h ?? ""}`
+  const draft = getDraft(draftKey)
+
   const shouldProtect = canEnforceNip70(url)
 
   const uploading = writable(false)
@@ -70,12 +74,26 @@
       event: makeEvent(THREAD, {content, tags}),
     })
 
+    clearDraft(draftKey)
     history.back()
   }
 
-  const editor = makeEditor({url, submit, uploading, placeholder: "What's on your mind?"})
+  const onChange = (json: unknown) => setDraft(draftKey, {content: json, title})
 
-  let title: string = $state("")
+  const editor = makeEditor({
+    url,
+    submit,
+    uploading,
+    onChange,
+    placeholder: "What's on your mind?",
+    content: draft.content as string | object | undefined,
+  })
+
+  let title: string = $state((draft.title as string | undefined) ?? "")
+
+  $effect(() => {
+    setDraft(draftKey, {...getDraft(draftKey), title})
+  })
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>

src/app/components/VoiceCallAudioSettingsDialog.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  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,
+    DeviceKind,
+    supportsAudioOutputSelection,
+    switchVoiceActiveDevice,
+    type VoiceSession,
+  } from "@app/voice"
+  import {popModal} from "@app/util/modal"
+
+  const selectValueForActiveDevice = (session: VoiceSession, kind: DeviceKind): string => {
+    const livekitDeviceId = session.room.getActiveDevice(kind)
+    if (livekitDeviceId === undefined || livekitDeviceId === "" || livekitDeviceId === "default") {
+      return ""
+    }
+    return livekitDeviceId
+  }
+
+  let audioInputs = $state<MediaDeviceInfo[]>([])
+  let audioOutputs = $state<MediaDeviceInfo[]>([])
+  let selectedInput = $state("")
+  let selectedOutput = $state("")
+
+  const loadDevices = async () => {
+    if (!navigator.mediaDevices?.enumerateDevices) return
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      audioInputs = devices.filter(d => d.kind === "audioinput")
+      audioOutputs = devices.filter(d => d.kind === "audiooutput")
+    } catch {
+      audioInputs = []
+      audioOutputs = []
+    }
+  }
+
+  $effect(() => {
+    loadDevices()
+    navigator.mediaDevices?.addEventListener?.("devicechange", loadDevices)
+    return () => navigator.mediaDevices?.removeEventListener?.("devicechange", loadDevices)
+  })
+
+  $effect(() => {
+    const session = $currentVoiceSession
+    if (!session) {
+      popModal()
+      return
+    }
+    selectedInput = selectValueForActiveDevice(session, DeviceKind.AudioInput)
+    selectedOutput = selectValueForActiveDevice(session, DeviceKind.AudioOutput)
+  })
+
+  const onInputChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.AudioInput, selectedInput)
+  }
+
+  const onOutputChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.AudioOutput, selectedOutput)
+  }
+
+  const onDone = () => {
+    popModal()
+  }
+
+  // Output not support in Safari
+  const canPickOutput = supportsAudioOutputSelection()
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Audio settings</ModalTitle>
+      <ModalSubtitle>Choose microphone and speaker for this call.</ModalSubtitle>
+    </ModalHeader>
+    <div class="flex flex-col gap-4 pt-2">
+      <FieldInline>
+        {#snippet label()}
+          <p>Microphone</p>
+        {/snippet}
+        {#snippet input()}
+          <select
+            class="select select-bordered w-full"
+            bind:value={selectedInput}
+            onchange={onInputChange}
+            aria-label="Microphone">
+            <option value="">Default microphone</option>
+            {#each audioInputs as d (d.deviceId)}
+              <option value={d.deviceId}>
+                {d.label || `Microphone ${d.deviceId.slice(0, 8)}…`}
+              </option>
+            {/each}
+          </select>
+        {/snippet}
+      </FieldInline>
+      {#if canPickOutput}
+        <FieldInline>
+          {#snippet label()}
+            <p>Speaker</p>
+          {/snippet}
+          {#snippet input()}
+            <select
+              class="select select-bordered w-full"
+              bind:value={selectedOutput}
+              onchange={onOutputChange}
+              aria-label="Speaker">
+              <option value="">Default speaker</option>
+              {#each audioOutputs as d (d.deviceId)}
+                <option value={d.deviceId}>
+                  {d.label || `Speaker ${d.deviceId.slice(0, 8)}…`}
+                </option>
+              {/each}
+            </select>
+          {/snippet}
+        </FieldInline>
+      {/if}
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-primary w-full" onclick={onDone}>Done</Button>
+  </ModalFooter>
+</Modal>

src/app/components/VoiceRoomJoinDialog.svelte

@@ -12,9 +12,11 @@
   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
@@ -45,6 +47,16 @@
 
   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(
@@ -52,7 +64,7 @@
       h,
       startWithoutMic,
       startWithoutMic ? undefined : selectedDeviceId || undefined,
-    )
+    ).catch(handleJoinError)
   }
 </script>
 

src/app/components/VoiceWidget.svelte

@@ -9,8 +9,10 @@
   import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import Settings from "@assets/icons/settings.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import VoiceCallAudioSettingsDialog from "@app/components/VoiceCallAudioSettingsDialog.svelte"
   import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
   import {
     decodeRelay,
@@ -63,6 +65,10 @@
     await goto(makeRoomPath(targetRoom.url, targetRoom.h))
     pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
+
+  const openAudioSettings = () => {
+    pushModal(VoiceCallAudioSettingsDialog)
+  }
 </script>
 
 {#if targetRoom}
@@ -100,6 +106,12 @@
           onclick={toggleMute}>
           <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
         </Button>
+        <Button
+          data-tip="Audio settings"
+          class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
+          onclick={openAudioSettings}>
+          <Icon icon={Settings} size={4} />
+        </Button>
         <Button
           data-tip="Leave room"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-error"

src/app/core/state.ts

@@ -191,7 +191,9 @@ export const PLATFORM_TERMS = import.meta.env.VITE_PLATFORM_TERMS
 
 export const PLATFORM_PRIVACY = import.meta.env.VITE_PLATFORM_PRIVACY
 
-export const PLATFORM_LOGO = PLATFORM_URL + "/logo.png"
+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_NAME = import.meta.env.VITE_PLATFORM_NAME
 

src/app/core/sync.ts

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

src/app/editor/EditorContent.svelte

@@ -11,13 +11,17 @@
   let element: HTMLElement
 
   onMount(() => {
-    editor.then(({options}) => {
-      if (options.element) {
-        element?.append(options.element)
+    editor.then(ed => {
+      if (ed.options.element) {
+        element?.append(ed.options.element)
       }
 
-      if (options.autofocus) {
-        ;(element?.querySelector("[contenteditable]") as HTMLElement)?.focus()
+      if ((ed as any)._shouldAutofocus) {
+        const hasContent = ed.getText().trim().length > 0
+
+        requestAnimationFrame(() => {
+          ed.commands.focus(hasContent ? "end" : "start")
+        })
       }
     })
   })

src/app/editor/index.ts

@@ -28,6 +28,7 @@ export const makeEditor = async ({
   autofocus = false,
   charCount,
   content = "",
+  onChange,
   placeholder = "",
   url,
   submit,
@@ -38,7 +39,8 @@ export const makeEditor = async ({
   aggressive?: boolean
   autofocus?: boolean
   charCount?: Writable<number>
-  content?: string
+  content?: string | object
+  onChange?: (json: unknown) => void
   placeholder?: string
   url?: string
   submit: () => void
@@ -82,9 +84,9 @@ export const makeEditor = async ({
     },
   )
 
-  return new Editor({
-    content: escapeHtml(content),
-    autofocus,
+  const ed = new Editor({
+    content: typeof content === "string" ? escapeHtml(content) : content,
+    autofocus: false,
     editorProps,
     element: document.createElement("div"),
     extensions: [
@@ -142,6 +144,11 @@ export const makeEditor = async ({
     onUpdate({editor}) {
       wordCount?.set(editor.storage.wordCount.words)
       charCount?.set(editor.storage.wordCount.chars)
+      onChange?.(editor.getJSON())
     },
   })
+
+  ;(ed as any)._shouldAutofocus = autofocus
+
+  return ed
 }

src/app/util/drafts.ts

@@ -0,0 +1,9 @@
+const store = new Map<string, Record<string, unknown>>()
+
+export const getDraft = (key: string): Record<string, unknown> => store.get(key) ?? {}
+
+export const setDraft = (key: string, draft: Record<string, unknown>) => store.set(key, draft)
+
+export const clearDraft = (key: string | undefined) => {
+  if (key !== undefined) store.delete(key)
+}

src/app/voice.ts

@@ -7,6 +7,7 @@ import {
   Room as LiveKitRoom,
   RoomEvent,
   Track,
+  supportsAudioOutputSelection,
   type AudioCaptureOptions,
   type LocalParticipant,
 } from "livekit-client"
@@ -24,6 +25,8 @@ export const LIVEKIT_PARTICIPANTS = 39004
 
 export {checkRelayHasLivekit} from "$lib/livekit"
 
+export {supportsAudioOutputSelection}
+
 export type VoiceSession = {
   url: string
   h: string
@@ -43,6 +46,36 @@ export enum VoiceState {
 
 export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
 
+const LIVEKIT_DEFAULT_DEVICE_ID = "default"
+
+export enum DeviceKind {
+  AudioInput = "audioinput",
+  AudioOutput = "audiooutput",
+}
+
+export const switchVoiceActiveDevice = async (
+  kind: DeviceKind,
+  targetDeviceId: string,
+): Promise<void> => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+  const id = targetDeviceId === "" ? LIVEKIT_DEFAULT_DEVICE_ID : targetDeviceId
+  try {
+    await session.room.switchActiveDevice(kind, id)
+  } catch {
+    let label: string
+    switch (kind) {
+      case DeviceKind.AudioInput:
+        label = "microphone"
+        break
+      case DeviceKind.AudioOutput:
+        label = "speaker"
+        break
+    }
+    pushToast({theme: "error", message: `Error changing ${label}`})
+  }
+}
+
 export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
 
 export const currentVoiceRoom = writable<Room | undefined>(undefined)

src/routes/spaces/+page.svelte

@@ -31,7 +31,8 @@
   } from "@app/core/state"
   import {setSpaceMembershipOrder} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
-  import {goToSpace} from "@app/util/routes"
+  import {goToSpace, makeSpacePath} from "@app/util/routes"
+  import {notifications} from "@app/util/notifications"
 
   const addSpace = () => pushModal(SpaceAdd)
 
@@ -254,9 +255,12 @@
                 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"
+                  class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative"
                   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}

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.template"})
+config({path: ".env"})
 
 /** @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.template"})
+config({path: ".env"})
 
 export default defineConfig({
   server: {