fix: turn on notification defaults and prompt on first DM visit

Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com>
Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>

.gitea/workflows/container-publish.yml

@@ -1,8 +1,13 @@
-name: Docker
+name: Container Image Build and Publish
 
 on:
   push:
     branches: [master]
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 
 env:
   REGISTRY: gitea.coracle.social
@@ -32,6 +37,7 @@ jobs:
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
+            type=sha
             type=raw,value=latest,enable=${{ github.ref == 'refs/heads/master' }}
 
       - name: Set up Docker Buildx
@@ -45,6 +51,7 @@ jobs:
         with:
           context: .
           push: true
+          target: production
           platforms: linux/amd64,linux/arm64
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -27,13 +27,10 @@ android/app/src/main/assets/public/
 node_modules/
 .pnpm-store/
 build/
+build-server/
 .svelte-kit/
 .next/
 
-# Rust/Tauri
-*target/
-src-tauri/binaries/
-
 # iOS
 ios/App/App/public
 ios/DerivedData

Dockerfile

@@ -6,22 +6,26 @@
 # Pass --build-arg VITE_BUILD_HASH=$(git rev-parse --short HEAD) to stamp the build.
 # A .env in the build context is picked up by build.sh for branding config.
 
-FROM node:22-bookworm
-
-RUN npm install -g pnpm@10.33.0
+# https://pnpm.io/docker#example-3-build-on-cicd
+FROM node:24-slim AS builder
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
 
 WORKDIR /app
-
-COPY package.json pnpm-lock.yaml ./
-
-RUN pnpm i --frozen-lockfile
-
 ENV NODE_OPTIONS=--max_old_space_size=16384
-
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm i --frozen-lockfile
 COPY . .
-
+ARG VITE_BUILD_HASH
 RUN pnpm run build
+RUN pnpm run build:server
 
+FROM node:24-slim AS production
+ENV NODE_ENV=production
+WORKDIR /app
+COPY --from=builder /app/build /app/build
+COPY --from=builder /app/build-server/server.js /app/server.js
 EXPOSE 3000
-
+USER node
 CMD ["node", "server.js"]

android/capacitor.settings.gradle

@@ -36,4 +36,4 @@ include ':capawesome-capacitor-badge'
 project(':capawesome-capacitor-badge').projectDir = new File('../node_modules/.pnpm/@capawesome+capacitor-badge@8.0.0_@capacitor+core@8.0.1/node_modules/@capawesome/capacitor-badge/android')
 
 include ':nostr-signer-capacitor-plugin'
-project(':nostr-signer-capacitor-plugin').projectDir = new File('../node_modules/.pnpm/nostr-signer-capacitor-plugin@https+++codeload.github.com+coracle-social+nostr-signer-c_2704ecccfd05fcfb1ad8852744422b7c/node_modules/nostr-signer-capacitor-plugin/android')
+project(':nostr-signer-capacitor-plugin').projectDir = new File('../node_modules/.pnpm/nostr-signer-capacitor-plugin@https+++codeload.github.com+coracle-social+nostr-signer-c_a3c0fb15d5bfa83f24d0070ca2583fc9/node_modules/nostr-signer-capacitor-plugin/android')

ios/App/Podfile

@@ -21,7 +21,7 @@ def capacitor_pods
   pod 'CapacitorPushNotifications', :path => '../../node_modules/.pnpm/@capacitor+push-notifications@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/push-notifications'
   pod 'CapacitorShare', :path => '../../node_modules/.pnpm/@capacitor+share@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/share'
   pod 'CapawesomeCapacitorBadge', :path => '../../node_modules/.pnpm/@capawesome+capacitor-badge@8.0.0_@capacitor+core@8.0.1/node_modules/@capawesome/capacitor-badge'
-  pod 'NostrSignerCapacitorPlugin', :path => '../../node_modules/.pnpm/nostr-signer-capacitor-plugin@https+++codeload.github.com+coracle-social+nostr-signer-c_2704ecccfd05fcfb1ad8852744422b7c/node_modules/nostr-signer-capacitor-plugin'
+  pod 'NostrSignerCapacitorPlugin', :path => '../../node_modules/.pnpm/nostr-signer-capacitor-plugin@https+++codeload.github.com+coracle-social+nostr-signer-c_a3c0fb15d5bfa83f24d0070ca2583fc9/node_modules/nostr-signer-capacitor-plugin'
 end
 
 target 'Flotilla Chat' do

package.json

@@ -5,12 +5,9 @@
   "scripts": {
     "dev": "vite dev",
     "build": "./build.sh",
+    "build:server": "vite build --config vite.config.server.ts",
     "start": "node server.js",
     "release:android": "./build.sh && cap build android --androidreleasetype APK --signing-type apksigner",
-    "tauri:dev": "tauri dev",
-    "tauri:build": "tauri build",
-    "tauri:info": "tauri info",
-    "tauri:icons": "tauri icon assets/logo.png --output src-tauri/icons",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check src && eslint src",
@@ -21,10 +18,9 @@
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",
     "@eslint/js": "^9.39.2",
-    "@sveltejs/kit": "^2.50.1",
-    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@sveltejs/kit": "^2.61.1",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "@tailwindcss/postcss": "^4.2.2",
-    "@tauri-apps/cli": "^2.9.6",
     "@types/eslint": "^9.6.1",
     "autoprefixer": "^10.4.23",
     "classnames": "^2.5.1",
@@ -32,15 +28,15 @@
     "eslint-config-prettier": "^9.1.2",
     "eslint-plugin-svelte": "^2.46.1",
     "globals": "^15.15.0",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.15",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
-    "svelte": "^5.48.0",
+    "svelte": "^5.55.9",
     "svelte-check": "^4.3.5",
     "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",
-    "vite": "^5.4.21"
+    "vite": "^6.4.2"
   },
   "type": "module",
   "dependencies": {
@@ -64,14 +60,14 @@
     "@hono/node-server": "^2.0.0",
     "@noble/curves": "^1.9.7",
     "@pomade/core": "^0.2.3",
-    "@poppanator/sveltekit-svg": "^4.2.1",
+    "@poppanator/sveltekit-svg": "^7.0.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@tiptap/core": "^2.27.2",
     "@tiptap/pm": "^2.27.2",
     "@types/qrcode": "^1.5.6",
     "@types/throttle-debounce": "^5.0.2",
-    "@vite-pwa/assets-generator": "^0.2.6",
-    "@vite-pwa/sveltekit": "^0.6.8",
+    "@vite-pwa/assets-generator": "^1.0.2",
+    "@vite-pwa/sveltekit": "^1.1.0",
     "@welshman/app": "^0.8.15",
     "@welshman/content": "^0.8.15",
     "@welshman/editor": "^0.8.15",
@@ -90,7 +86,7 @@
     "emoji-picker-element": "^1.28.1",
     "emoji-picker-element-data": "^1.8.0",
     "fuse.js": "^7.1.0",
-    "hono": "^4.12.15",
+    "hono": "^4.12.23",
     "husky": "^9.1.7",
     "idb": "^8.0.3",
     "livekit-client": "^2.17.2",

rust-toolchain.toml

@@ -1,2 +0,0 @@
-[toolchain]
-channel = "1.92.0"

src-tauri/Cargo.toml

@@ -1,18 +0,0 @@
-[package]
-name = "flotilla"
-version = "0.1.0"
-edition = "2021"
-
-[lib]
-name = "flotilla_lib"
-crate-type = ["staticlib", "cdylib", "rlib"]
-
-[build-dependencies]
-tauri-build = { version = "2.5.3", features = [] }
-
-[dependencies]
-tauri = { version = "2.9.5", features = [] }
-
-[features]
-default = ["custom-protocol"]
-custom-protocol = ["tauri/custom-protocol"]

src-tauri/build.rs

@@ -1,3 +0,0 @@
-fn main() {
-    tauri_build::build()
-}

src-tauri/capabilities/default.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../gen/schemas/desktop-schema.json",
-  "identifier": "default",
-  "description": "Default desktop capability for the main window",
-  "windows": ["main"],
-  "permissions": ["core:default"]
-}

src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-  <background android:drawable="@color/ic_launcher_background"/>
-</adaptive-icon>

src-tauri/icons/android/values/ic_launcher_background.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-  <color name="ic_launcher_background">#fff</color>
-</resources>

src-tauri/rust-toolchain.toml

@@ -1,2 +0,0 @@
-[toolchain]
-channel = "1.92.0"

src-tauri/src/lib.rs

@@ -1,6 +0,0 @@
-#[cfg_attr(mobile, tauri::mobile_entry_point)]
-pub fn run() {
-    tauri::Builder::default()
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
-}

src-tauri/src/main.rs

@@ -1,6 +0,0 @@
-// Prevents additional console window on Windows in release, DO NOT REMOVE!!
-#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
-
-fn main() {
-    flotilla_lib::run();
-}

src-tauri/tauri.conf.json

@@ -1,37 +0,0 @@
-{
-  "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
-  "productName": "Flotilla",
-  "mainBinaryName": "flotilla",
-  "identifier": "social.flotilla.app",
-  "build": {
-    "beforeDevCommand": "pnpm dev",
-    "beforeBuildCommand": "pnpm build",
-    "devUrl": "http://localhost:1847",
-    "frontendDist": "../build"
-  },
-  "app": {
-    "security": {
-      "capabilities": ["default"]
-    },
-    "windows": [
-      {
-        "label": "main",
-        "title": "Flotilla",
-        "width": 1240,
-        "height": 775,
-        "resizable": true
-      }
-    ]
-  },
-  "bundle": {
-    "active": false,
-    "targets": "all",
-    "icon": [
-      "icons/32x32.png",
-      "icons/128x128.png",
-      "icons/128x128@2x.png",
-      "icons/icon.icns",
-      "icons/icon.ico"
-    ]
-  }
-}

src/app/call/stores.ts

@@ -6,11 +6,13 @@ export type VoiceSession = {
   url: string
   h: string
   room: LiveKitRoom
-  muted: boolean
   cameraOn: boolean
   screenShareOn: boolean
 }
 
+/** Mic mute state is separate so toggling it does not re-render video tiles. */
+export const voiceMicMuted = writable(true)
+
 export type Pubkey = string
 
 export type VoiceParticipant = {pubkey?: Pubkey; identity: string}
@@ -27,8 +29,6 @@ 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
 
@@ -41,6 +41,21 @@ export const participantKey = (p: VoiceParticipant) => p.pubkey ?? p.identity
 
 export const speakingParticipants = writable<VoiceParticipant[]>([])
 
+export const participantMediaState = writable(
+  new Map<string, {muted: boolean; cameraOn: boolean}>(),
+)
+
+export const mediaStateByIdentity = derived(
+  [participantMediaState, currentVoiceSession, voiceMicMuted],
+  ([$media, $session, $micMuted]) =>
+    (identity: string) => {
+      if ($session?.room.localParticipant.identity === identity) {
+        return {muted: $micMuted, cameraOn: $session.cameraOn}
+      }
+      return $media.get(identity) ?? {muted: true, cameraOn: false}
+    },
+)
+
 export const isParticipantSpeaking = derived(
   speakingParticipants,
   $participants => (p: VoiceParticipant) =>

src/app/call/voice.ts

@@ -6,14 +6,16 @@ import {
   DisconnectReason,
   LocalParticipant,
   LocalTrackPublication,
+  Participant,
   Room as LiveKitRoom,
   RoomEvent,
   Track,
+  TrackPublication,
   supportsAudioOutputSelection,
   type AudioCaptureOptions,
 } from "livekit-client"
 import {derived, get} from "svelte/store"
-import {map, removeUndefined, uniqBy} from "@welshman/lib"
+import {map, not, nthEq, reject, removeUndefined, uniqBy} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {makeHttpAuth, makeHttpAuthHeader, getTags} from "@welshman/util"
 import {signer} from "@welshman/app"
@@ -22,10 +24,10 @@ import {AbortError, whenAborted, whenTimeout} from "$lib/util"
 import {
   currentVoiceRoom,
   currentVoiceSession,
+  voiceMicMuted,
   participantFromLiveKitIdentity,
   participantKey,
-  participantPubkeyMap,
-  pubkeyFromLiveKitIdentity,
+  participantMediaState,
   speakingParticipants,
   VoiceState,
   type VoiceParticipant,
@@ -75,20 +77,23 @@ export const switchVoiceActiveDevice = async (
   }
 }
 
-const addParticipant = (identity: string) => {
-  participantPubkeyMap.update(m => {
+const deleteParticipant = (identity: string) => {
+  participantMediaState.update(m => new Map(reject(nthEq(0, identity), [...m])))
+}
+
+const syncParticipantMedia = (participant: Participant) => {
+  const state = {muted: !participant.isMicrophoneEnabled, cameraOn: participant.isCameraEnabled}
+  participantMediaState.update(m => {
+    const prev = m.get(participant.identity)
+    if (prev?.muted === state.muted && prev?.cameraOn === state.cameraOn) return m
     const next = new Map(m)
-    next.set(identity, pubkeyFromLiveKitIdentity(identity) ?? "")
+    next.set(participant.identity, state)
     return next
   })
 }
 
-const deleteParticipant = (identity: string) => {
-  participantPubkeyMap.update(m => {
-    const next = new Map(m)
-    next.delete(identity)
-    return next
-  })
+const onParticipantMediaChanged = (_publication: TrackPublication, participant: Participant) => {
+  syncParticipantMedia(participant)
 }
 
 const fetchLivekitToken = async (
@@ -124,15 +129,15 @@ export const deriveVoiceParticipants = (url: string, h: string) =>
   // We use the livekit identity list while in a call, and fall back to the list in kind 39004.
   derived(
     [
-      participantPubkeyMap,
+      participantMediaState,
       currentVoiceRoom,
       deriveLatestEventForUrl(url, [{kinds: [LIVEKIT_PARTICIPANTS], "#d": [h]}]),
     ],
-    ([$participantPubkeyMap, $currentVoiceRoom, $publishedParticipantList]) => {
-      const inCall = $participantPubkeyMap.size > 0 && $currentVoiceRoom?.id === makeRoomId(url, h)
+    ([$participantMediaState, $currentVoiceRoom, $publishedParticipantList]) => {
+      const inCall = $participantMediaState.size > 0 && $currentVoiceRoom?.id === makeRoomId(url, h)
 
       if (inCall) {
-        const participants = [...$participantPubkeyMap.keys()].map(participantFromLiveKitIdentity)
+        const participants = [...$participantMediaState.keys()].map(participantFromLiveKitIdentity)
         return uniqBy((p: VoiceParticipant) => participantKey(p), participants)
       } else {
         const latestEvent = $publishedParticipantList as TrustedEvent | undefined
@@ -173,6 +178,7 @@ const setUpMicrophone = async (
 
 const onRoomDisconnected = (reason?: DisconnectReason) => {
   videoPrimaryTileKey.set(undefined)
+  voiceMicMuted.set(true)
   currentVoiceSession.set(undefined)
   resetVideoCallLayout()
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
@@ -184,7 +190,7 @@ const onRoomDisconnected = (reason?: DisconnectReason) => {
     pushToast({theme: "error", message})
   }
   speakingParticipants.set([])
-  participantPubkeyMap.set(new Map())
+  participantMediaState.set(new Map())
 }
 
 const onTrackSubscribed = (track: Track) => {
@@ -214,8 +220,8 @@ const playJoinSound = () => {
   audio.play().catch(() => {})
 }
 
-const onParticipantConnected = (participant: {identity: string}) => {
-  addParticipant(participant.identity)
+const onParticipantConnected = (participant: Participant) => {
+  syncParticipantMedia(participant)
   playJoinSound()
 }
 
@@ -273,6 +279,11 @@ export const joinVoiceRoom = async (
     liveKitRoom.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
     liveKitRoom.on(RoomEvent.LocalTrackUnpublished, onLocalTrackUnpublished)
     liveKitRoom.on(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
+    liveKitRoom.on(RoomEvent.TrackMuted, onParticipantMediaChanged)
+    liveKitRoom.on(RoomEvent.TrackUnmuted, onParticipantMediaChanged)
+    liveKitRoom.on(RoomEvent.TrackPublished, onParticipantMediaChanged)
+    liveKitRoom.on(RoomEvent.TrackUnpublished, onParticipantMediaChanged)
+    liveKitRoom.on(RoomEvent.LocalTrackPublished, onParticipantMediaChanged)
 
     try {
       await Promise.race([
@@ -287,19 +298,19 @@ export const joinVoiceRoom = async (
       throw e
     }
 
-    participantPubkeyMap.set(new Map())
-    addParticipant(liveKitRoom.localParticipant.identity)
+    participantMediaState.set(new Map())
+    syncParticipantMedia(liveKitRoom.localParticipant)
     for (const p of liveKitRoom.remoteParticipants.values()) {
-      addParticipant(p.identity)
+      syncParticipantMedia(p)
     }
 
     const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)
 
+    voiceMicMuted.set(muted)
     currentVoiceSession.set({
       url,
       h,
       room: liveKitRoom,
-      muted,
       cameraOn: false,
       screenShareOn: false,
     })
@@ -339,11 +350,12 @@ export const leaveVoiceRoom = async () => {
 
   voiceState.set(VoiceState.Disconnected)
   videoPrimaryTileKey.set(undefined)
+  voiceMicMuted.set(true)
   currentVoiceSession.set(undefined)
   resetVideoCallLayout()
   session.room.disconnect()
   speakingParticipants.set([])
-  participantPubkeyMap.set(new Map())
+  participantMediaState.set(new Map())
 }
 
 export const rejoinVoiceRoom = async (): Promise<void> => {
@@ -356,18 +368,17 @@ export const toggleMute = async () => {
   const session = get(currentVoiceSession)
   if (!session) return
 
-  const muted = !session.muted
-  if (muted) {
+  voiceMicMuted.update(not)
+  if (get(voiceMicMuted)) {
     // Disable and re-enable microphone to trigger permission prompt
     session.room.localParticipant.setMicrophoneEnabled(false)
-    currentVoiceSession.set({...session, muted})
     return
   }
 
   try {
     await session.room.localParticipant.setMicrophoneEnabled(true)
-    currentVoiceSession.set({...session, muted})
   } catch (e) {
+    voiceMicMuted.set(true)
     pushToast({theme: "error", message: "Could not access microphone"})
   }
 }

src/app/components/EnableNotificationsPrompt.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import Bell from "@assets/icons/bell.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import {enableNotifications} from "@app/util/notifications"
+  import {pushToast} from "@app/util/toast"
+
+  const dismiss = () => history.back()
+
+  const enable = async () => {
+    loading = true
+
+    try {
+      if (await enableNotifications()) {
+        pushToast({message: "Notifications enabled!"})
+        dismiss()
+      } else {
+        pushToast({
+          theme: "error",
+          message: "Failed to request notification permissions.",
+        })
+      }
+    } finally {
+      loading = false
+    }
+  }
+
+  let loading = $state(false)
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <div class="flex justify-center">
+        <Icon icon={Bell} size={6} />
+      </div>
+      <ModalTitle>Enable notifications</ModalTitle>
+      <ModalSubtitle>
+        Get notified when you receive new direct messages, even when Flotilla is in the background.
+      </ModalSubtitle>
+    </ModalHeader>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-ghost" onclick={dismiss} disabled={loading}>Not now</Button>
+    <Button class="btn btn-primary" onclick={enable} disabled={loading}>
+      <Spinner {loading}>Enable</Spinner>
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/SignUp.svelte

@@ -11,7 +11,6 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import LogIn from "@app/components/LogIn.svelte"
-  import InfoNostr from "@app/components/InfoNostr.svelte"
   import SignUpKey from "@app/components/SignUpKey.svelte"
   import SignUpEmail from "@app/components/SignUpEmail.svelte"
   import SignUpProfile from "@app/components/SignUpProfile.svelte"
@@ -91,11 +90,9 @@
 
 <Modal>
   <ModalBody>
-    <h1 class="heading">Sign up with Nostr</h1>
+    <h1 class="heading">Join {PLATFORM_NAME}</h1>
     <p class="m-auto max-w-sm text-center">
-      {PLATFORM_NAME} is built using the
-      <Button class="link" onclick={() => pushModal(InfoNostr)}>nostr protocol</Button>, which gives
-      users control over their digital identity using <strong>cryptographic key pairs</strong>.
+      Censorship resistant digital spaces for communities. Meet new people, own your identity.
     </p>
     {#if hasPomade}
       <Button onclick={flows.email.start} class="btn btn-primary">

src/app/components/SpaceBar.svelte

@@ -7,17 +7,19 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
   import {decodeRelay} from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
 
   interface Props {
     back?: () => unknown
+    leading?: Snippet
     title?: Snippet
     action?: Snippet
     [key: string]: any
   }
 
-  const {back = () => goto(makeSpacePath(url)), title, action, ...props}: Props = $props()
+  const {back = () => goto(makeSpacePath(url)), leading, title, action, ...props}: Props = $props()
 
   const url = decodeRelay($page.params.relay!)
 </script>
@@ -30,6 +32,10 @@
     <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">
+          <RelayIcon {url} size={5} class="rounded-full md:hidden" />
+          <div class="hidden md:contents">
+            {@render leading?.()}
+          </div>
           {@render title?.()}
         </div>
         <div class="text-xs text-primary md:hidden">

src/app/components/Toast.svelte

@@ -71,6 +71,7 @@
 
 {#if $toast}
   {@const theme = $toast.theme || "info"}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={containerEl}
     transition:fly={{y: -20}}

src/app/components/VideoCallContent.svelte

@@ -8,6 +8,7 @@
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import VideoCallTile from "@app/components/VideoCallTile.svelte"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
+  import VoiceParticipantMediaBadges from "@app/components/VoiceParticipantMediaBadges.svelte"
   import {get} from "svelte/store"
   import {
     VideoCallLayout,
@@ -18,7 +19,12 @@
     ViewportSize,
     videoPrimaryTileKey,
   } from "@app/call/video"
-  import {currentVoiceSession, currentVoiceRoom, pubkeyFromLiveKitIdentity} from "@app/call/stores"
+  import {
+    currentVoiceSession,
+    currentVoiceRoom,
+    mediaStateByIdentity,
+    pubkeyFromLiveKitIdentity,
+  } from "@app/call/stores"
 
   type Props = {
     layout: VideoCallLayout
@@ -121,6 +127,25 @@
           source: Track.Source.ScreenShare,
         })
       }
+      if (!videoTiles.some(t => t.identity === rp.identity)) {
+        videoTiles.push({
+          identity: rp.identity,
+          isLocal: false,
+          trackSid: `avatar-${rp.identity}`,
+          track: undefined,
+          source: Track.Source.Camera,
+        })
+      }
+    }
+
+    if (!videoTiles.some(t => t.identity === user.identity)) {
+      videoTiles.push({
+        identity: user.identity,
+        isLocal: true,
+        trackSid: "local-avatar",
+        track: undefined,
+        source: Track.Source.Camera,
+      })
     }
 
     return videoTiles
@@ -144,6 +169,9 @@
 
   const useSpotlightLayout = $derived(primaryTile !== undefined)
   const useMultiGrid = $derived(!useSpotlightLayout && videoTiles.length > 2)
+  const multiGridClass = $derived(
+    layout === VideoCallLayout.Split ? "grid-cols-1" : "grid-cols-1 sm:grid-cols-2",
+  )
 
   $effect(() => {
     const k = $videoPrimaryTileKey
@@ -184,6 +212,7 @@
 </script>
 
 {#snippet videoTile(tile: VideoTileData, layout: TileLayout)}
+  {@const media = $mediaStateByIdentity(tile.identity)}
   <div
     class={cx(
       "relative isolate overflow-hidden rounded-box shadow-sm",
@@ -203,6 +232,15 @@
         <ProfileCircle pubkey={pubkeyFromLiveKitIdentity(tile.identity)} {url} size={14} />
       </div>
     {/if}
+    {#if tile.track}
+      <div class="pointer-events-none absolute left-1 top-1 z-10">
+        <VoiceParticipantMediaBadges
+          muted={media.muted}
+          cameraOn={media.cameraOn}
+          showCamera={tile.source === Track.Source.Camera}
+          size={3} />
+      </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)" : ""}
@@ -213,8 +251,8 @@
         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",
+          "absolute right-1 top-1 z-20 btn btn-xs btn-square",
+          pinned ? "btn-primary" : "btn-ghost bg-base-100",
         )}
         onclick={spotlightHandlerFor(tileKey(tile))}>
         <Icon icon={Pin} size={3} />
@@ -238,8 +276,7 @@
         {/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">
+      <div class={cx("grid min-h-0 flex-1 content-start gap-2 overflow-y-auto", multiGridClass)}>
         {#each videoTiles as tile (tileKey(tile))}
           {@render videoTile(tile, "default")}
         {/each}
@@ -254,8 +291,10 @@
   {: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>
+      <p>No one is sharing video yet.</p>
+      <p class="text-xs">
+        Participants appear here when they turn on their camera or share their screen.
+      </p>
     </div>
   {/if}
 {/snippet}

src/app/components/VoiceParticipantMediaBadges.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import cx from "classnames"
+  import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
+  import VideocameraOff from "@assets/icons/videocamera-off.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+
+  type Props = {
+    muted: boolean
+    cameraOn: boolean
+    showCamera?: boolean
+    size?: number
+    class?: string
+  }
+
+  const {muted, cameraOn, showCamera = true, size = 3, class: className = ""}: Props = $props()
+
+  const badgeClass =
+    "inline-flex size-4 shrink-0 items-center justify-center rounded bg-base-100/80 p-0.5 text-error"
+</script>
+
+{#if muted || (showCamera && !cameraOn)}
+  <div class={cx("flex items-center gap-1", className)}>
+    {#if muted}
+      <span class={badgeClass} aria-label="Muted">
+        <Icon icon={MicrophoneOff} {size} />
+      </span>
+    {/if}
+    {#if showCamera && !cameraOn}
+      <span class={badgeClass} aria-label="Camera off">
+        <Icon icon={VideocameraOff} {size} />
+      </span>
+    {/if}
+  </div>
+{/if}

src/app/components/VoiceRoomItem.svelte

@@ -9,11 +9,13 @@
   import {makeRoomPath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
   import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
+  import VoiceParticipantMediaBadges from "@app/components/VoiceParticipantMediaBadges.svelte"
   import {makeRoomId} from "@app/core/state"
   import {
     VoiceState,
     currentVoiceRoom,
     isParticipantSpeaking,
+    mediaStateByIdentity,
     participantKey,
     voiceState,
     type VoiceParticipant,
@@ -83,9 +85,17 @@
             )}>
             <ProfileCircle pubkey={p.pubkey} size={5} class="h-5 w-5" />
           </div>
-          <span class="ellipsize text-xs opacity-70">
+          <span class="ellipsize min-w-0 flex-1 text-xs opacity-70">
             {p.pubkey ? displayProfileByPubkey(p.pubkey) : "Unknown"}
           </span>
+          {#if isActive}
+            {@const media = $mediaStateByIdentity(p.identity)}
+            <VoiceParticipantMediaBadges
+              muted={media.muted}
+              cameraOn={media.cameraOn}
+              size={3}
+              class="shrink-0" />
+          {/if}
         </div>
       {/each}
     {/if}

src/app/components/VoiceWidget.svelte

@@ -6,7 +6,7 @@
   import cx from "classnames"
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
-  import Videocamera from "@assets/icons/videocamera.svg?dataurl"
+  import VideocameraOff from "@assets/icons/videocamera-off.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"
@@ -41,8 +41,8 @@
     VoiceState,
     currentVoiceSession,
     currentVoiceRoom,
+    voiceMicMuted,
     voiceState,
-    isLocalSpeaking,
   } from "@app/call/stores"
   import {cancelJoinVoiceRoom, leaveVoiceRoom, toggleMute} from "@app/call/voice"
 
@@ -183,18 +183,16 @@
         </Button>
       {:else if $voiceState === VoiceState.Connected && $currentVoiceSession}
         <Button
-          data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
+          data-tip={$voiceMicMuted ? "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",
+            $voiceMicMuted && "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
           )}
           onclick={toggleMute}>
           <span class="relative inline-flex items-center justify-center overflow-visible">
             <Icon icon={Microphone} size={4} />
-            {#if $currentVoiceSession.muted}
+            {#if $voiceMicMuted}
               <span
                 class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
                 aria-hidden="true">
@@ -207,9 +205,17 @@
         </Button>
         <Button
           data-tip={$currentVoiceSession.cameraOn ? "Turn off camera" : "Turn on camera"}
-          class={cx(mediaToggleClass, $currentVoiceSession.cameraOn && "text-primary")}
+          class={cx(
+            mediaToggleClass,
+            "overflow-visible",
+            $currentVoiceSession.cameraOn && "text-primary",
+            !$currentVoiceSession.cameraOn &&
+              "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
+          )}
           onclick={toggleCamera}>
-          <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
+          <Icon
+            icon={$currentVoiceSession.cameraOn ? VideocameraRecord : VideocameraOff}
+            size={4} />
         </Button>
         {#if !Capacitor.isNativePlatform()}
           <Button

src/app/core/state.ts

@@ -417,9 +417,9 @@ export const device = withGetter(writable(randomId()))
 
 export const notificationSettings = withGetter(
   writable({
-    push: false,
-    sound: false,
-    badge: false,
+    push: true,
+    sound: true,
+    badge: true,
     spaces: true,
     mentions: true,
     messages: true,

src/app/util/notifications.ts

@@ -1,4 +1,5 @@
-import {derived} from "svelte/store"
+import {derived, get, writable} from "svelte/store"
+import {Capacitor} from "@capacitor/core"
 import {Badge} from "@capawesome/capacitor-badge"
 import {synced, throttled, withGetter} from "@welshman/store"
 import {pubkey, tracker, repository, relaysByUrl} from "@welshman/app"
@@ -10,6 +11,7 @@ import {makeSpacePath, makeRoomPath, makeSpaceChatPath, makeChatPath} from "@app
 import {
   CONTENT_KINDS,
   notificationSettings,
+  pushState,
   chatsById,
   userGroupList,
   getSpaceUrlsFromGroupList,
@@ -18,7 +20,49 @@ import {
 } from "@app/core/state"
 import {kv} from "@app/core/storage"
 import {page} from "$app/stores"
-export {Push} from "@app/util/push"
+import {Push} from "@app/util/push"
+
+export {Push}
+
+export const areNotificationsEnabled = () => {
+  const {push, messages} = notificationSettings.get()
+
+  if (!push || !messages) {
+    return false
+  }
+
+  if (Capacitor.isNativePlatform()) {
+    return Boolean(pushState.get().token)
+  }
+
+  return Notification?.permission === "granted"
+}
+
+export const enableNotifications = async () => {
+  const permission = await Push.request()
+
+  if (!permission.startsWith("granted")) {
+    return false
+  }
+
+  const current = notificationSettings.get()
+
+  notificationSettings.set({
+    ...current,
+    push: true,
+    badge: true,
+    sound: Capacitor.isNativePlatform() ? current.sound : true,
+    messages: true,
+  })
+
+  return true
+}
+
+export const dmNotificationsPrompted = synced({
+  key: "dmNotificationsPrompted",
+  defaultValue: false,
+  storage: kv,
+})
 
 // Checked state
 
@@ -36,6 +80,9 @@ export const deriveChecked = (key: string) => derived(checked, prop<number>(key)
 
 export const setChecked = (key: string) => checked.update(assoc(key, now()))
 
+/** Room path while video call UI hides chat; checked + badge stay active until chat is shown. */
+export const deferredRoomPath = writable<string | undefined>(undefined)
+
 export const syncChecked = () => {
   let prev = ""
 
@@ -57,8 +104,11 @@ export const syncChecked = () => {
 
     // Set checked when we visit a given page - but delay it a tad
     setTimeout(() => {
+      const defer = get(deferredRoomPath)
+
       checked.update($checked => {
         for (const path of getPaths($page.url.pathname)) {
+          if (defer && path === defer) continue
           $checked[path] = now()
         }
 
@@ -151,9 +201,17 @@ export const allNotifications = derived(
   },
 )
 
-export const notifications = derived([page, allNotifications], ([$page, $allNotifications]) => {
-  return new Set([...$allNotifications].filter(p => !$page.url.pathname.startsWith(p)))
-})
+export const notifications = derived(
+  [page, allNotifications, deferredRoomPath],
+  ([$page, $allNotifications, $deferredRoomPath]) =>
+    new Set(
+      [...$allNotifications].filter(p => {
+        if (!$page.url.pathname.startsWith(p)) return true
+        if ($deferredRoomPath && p === $deferredRoomPath) return true
+        return false
+      }),
+    ),
+)
 
 // Badges
 

src/assets/icons/videocamera-off.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 11.5C2 8.21252 2 6.56878 2.90796 5.46243C3.07418 5.25989 3.25989 5.07418 3.46243 4.90796C4.56878 4 6.21252 4 9.5 4C12.7875 4 14.4312 4 15.5376 4.90796C15.7401 5.07418 15.9258 5.25989 16.092 5.46243C17 6.56878 17 8.21252 17 11.5V12.5C17 15.7875 17 17.4312 16.092 18.5376C15.9258 18.7401 15.7401 18.9258 15.5376 19.092C14.4312 20 12.7875 20 9.5 20C6.21252 20 4.56878 20 3.46243 19.092C3.25989 18.9258 3.07418 18.7401 2.90796 18.5376C2 17.4312 2 15.7875 2 12.5V11.5Z" stroke="#000000" stroke-width="1.5"/>
+<path d="M17 9.50019L17.6584 9.17101C19.6042 8.19807 20.5772 7.7116 21.2886 8.15127C22 8.59094 22 9.67872 22 11.8543V12.1461C22 14.3217 22 15.4094 21.2886 15.8491C20.5772 16.2888 19.6042 15.8023 17.6584 14.8294L17 14.5002V9.50019Z" stroke="#000000" stroke-width="1.5"/>
+<path d="M22 2L2 22" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/lib/components/PageBar.svelte

@@ -9,8 +9,8 @@
   const {children, ...props}: Props = $props()
 </script>
 
-<div data-component="PageBar" class="relative z-nav p-2 -mb-4 {props.class}">
-  <div class="rounded-xl bg-base-100 p-4 shadow-md h-20 md:h-12 flex flex-col justify-center">
-    {@render children?.()}
-  </div>
+<div
+  data-component="PageBar"
+  class="relative bg-base-100 p-4 shadow-md h-20 md:h-12 flex flex-col justify-center z-nav {props.class}">
+  {@render children?.()}
 </div>

src/routes/chat/[chat]/+page.svelte

@@ -1,13 +1,25 @@
 <script lang="ts">
+  import {onMount} from "svelte"
+  import {get} from "svelte/store"
   import {page} from "$app/stores"
   import type {MakeNonOptional} from "@welshman/lib"
   import {append, uniq} from "@welshman/lib"
   import {pubkey} from "@welshman/app"
   import Chat from "@app/components/Chat.svelte"
+  import EnableNotificationsPrompt from "@app/components/EnableNotificationsPrompt.svelte"
   import {splitChatId} from "@app/core/state"
+  import {areNotificationsEnabled, dmNotificationsPrompted} from "@app/util/notifications"
+  import {pushModal} from "@app/util/modal"
 
   const {chat} = $page.params as MakeNonOptional<typeof $page.params>
   const pubkeys = uniq(append($pubkey!, splitChatId(chat)))
+
+  onMount(() => {
+    if (!areNotificationsEnabled() && !get(dmNotificationsPrompted)) {
+      dmNotificationsPrompted.set(true)
+      pushModal(EnableNotificationsPrompt)
+    }
+  })
 </script>
 
 <Chat {pubkeys} />

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {onMount} from "svelte"
+  import {onDestroy, onMount} from "svelte"
   import {readable} from "svelte/store"
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
@@ -49,7 +49,8 @@
   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"
+  import {checked, deferredRoomPath, setChecked} from "@app/util/notifications"
+  import {makeRoomPath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
 
@@ -77,6 +78,21 @@
     voiceConnectedHere && $videoCallLayout === VideoCallLayout.Video,
   )
 
+  const roomPath = makeRoomPath(url, h)
+
+  const videoCallChatHidden = $derived(
+    voiceConnectedHere && $videoCallLayout === VideoCallLayout.Video,
+  )
+
+  $effect(() => {
+    deferredRoomPath.set(videoCallChatHidden ? roomPath : undefined)
+    if (voiceConnectedHere && !videoCallChatHidden) {
+      setChecked(roomPath)
+    }
+  })
+
+  onDestroy(() => deferredRoomPath.set(undefined))
+
   let prevVideoTileCount = $state(0)
 
   $effect(() => {
@@ -414,8 +430,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <RoomImage {url} {h} />
+  {/snippet}
+  {#snippet title()}
     <RoomName {url} {h} />
   {/snippet}
   {#snippet action()}

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

@@ -111,8 +111,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={CalendarMinimalistic} />
+  {/snippet}
+  {#snippet title()}
     <strong>Calendar</strong>
   {/snippet}
   {#snippet action()}

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

@@ -307,8 +307,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={ChatRound} />
+  {/snippet}
+  {#snippet title()}
     <strong>Chat</strong>
   {/snippet}
   {#snippet action()}

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

@@ -63,8 +63,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={CaseMinimalistic} />
+  {/snippet}
+  {#snippet title()}
     <strong>Classifieds</strong>
   {/snippet}
   {#snippet action()}

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

@@ -62,8 +62,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={StarFallMinimalistic} />
+  {/snippet}
+  {#snippet title()}
     <strong>Goals</strong>
   {/snippet}
   {#snippet action()}

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

@@ -62,8 +62,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={PollIcon} />
+  {/snippet}
+  {#snippet title()}
     <strong>Polls</strong>
   {/snippet}
   {#snippet action()}

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

@@ -211,8 +211,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={History} />
+  {/snippet}
+  {#snippet title()}
     <strong>Recent Activity</strong>
   {/snippet}
   {#snippet action()}

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

@@ -63,8 +63,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={NotesMinimalistic} />
+  {/snippet}
+  {#snippet title()}
     <strong>Threads</strong>
   {/snippet}
   {#snippet action()}

vite.config.server.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from "vite"
+import { builtinModules } from 'module'
+
+export default defineConfig({
+  ssr: {
+    noExternal: true, // bundle every dependency
+  },
+  build: {
+    target: 'node24',           // match your Node.js version
+    outDir: 'build-server',
+    emptyOutDir: false,         // don't wipe the frontend build output
+    ssr: true,                  // tells Vite this is a server-side build
+    minify: 'esbuild',          // minify the output
+    lib: {
+      entry: 'server.js',       // your server entry point
+      formats: ['es'],
+      fileName: () => 'server.js',
+    },
+    rollupOptions: {
+      // Externalize only Node.js built-ins, bundle everything else
+      external: [
+        ...builtinModules,
+        ...builtinModules.map(m => `node:${m}`),
+      ],
+    },
+  },
+})

vite.config.ts

@@ -54,17 +54,7 @@ export default defineConfig({
     svg({
       svgoOptions: {
         multipass: true,
-        plugins: [
-          {
-            name: "preset-default",
-            params: {
-              overrides: {
-                removeViewBox: false,
-              },
-            },
-          },
-          "removeDimensions",
-        ],
+        plugins: ["preset-default", "removeDimensions"],
       },
     }),
   ],