chore(desktop): release v0.10.2

v1 used to wrap the installer in a .nsis.zip and sign that wrapper.
v2 signs the .exe directly, so the updater url points at the .exe and
the .sig file sits next to it. Script was still looking for the
legacy .nsis.zip path and aborting after a successful build.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.env.release.example

@@ -0,0 +1,21 @@
+# Copy to .env.release (gitignored) and fill in.
+# Consumed by scripts/release.mjs.
+
+# Absolute path to the private key file produced by `tauri signer generate`.
+TAURI_SIGNING_PRIVATE_KEY_PATH=C:/Users/denni/.tauri/chatapp.key
+
+# Password set when generating the key. Leave empty if none.
+TAURI_SIGNING_PRIVATE_KEY_PASSWORD=
+
+# Host serving latest.json + installer artifacts over HTTPS.
+UPDATE_HOST=update.netralax.cloud
+
+# SSH user on UPDATE_HOST with write access to UPDATE_REMOTE_PATH.
+UPDATE_SSH_USER=chatapp-deploy
+
+# Optional: path to the SSH private key. Omit to fall back on ssh-agent or the
+# default id_rsa.
+UPDATE_SSH_KEY=
+
+# Absolute path on the server where windows/ artifacts + latest.json live.
+UPDATE_REMOTE_PATH=/var/www/updates/windows

.github/workflows/release.yml

@@ -1,35 +1,27 @@
-name: Release desktop app
+name: Release desktop app (manual backup)
 
-# Tag a version to trigger a release:
+# Self-hosted updates run from scripts/release.mjs on Dennis's Windows box.
-#   git tag v0.1.0 && git push --tags
+# This workflow is kept as a manual backup — trigger it from the Actions tab
-#
+# if the local build host is unavailable.
-# Produces signed Tauri bundles for macOS (arm + intel), Windows, and Linux,
-# uploads them to a GitHub Release, and publishes `latest.json` for the
-# updater plugin to discover.
 
 on:
-  push:
+  workflow_dispatch:
-    tags:
+    inputs:
-      - "v*"
+      tag:
+        description: "Tag to build (e.g. v0.10.2) — must already exist"
+        required: true
 
 permissions:
   contents: write
 
 jobs:
   build:
-    strategy:
+    runs-on: windows-latest
-      fail-fast: false
-      matrix:
-        include:
-          - platform: macos-14 # universal binary covers both Intel + Apple Silicon
-            args: "--target universal-apple-darwin --bundles app,updater"
-          - platform: windows-latest
-            args: ""
-
-    runs-on: ${{ matrix.platform }}
 
     steps:
       - uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.tag }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -42,8 +34,6 @@ jobs:
 
       - name: Setup Rust
         uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: ${{ matrix.platform == 'macos-14' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
 
       - name: Install JS deps
         run: pnpm install --frozen-lockfile
@@ -54,18 +44,16 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
-          # Client-side env vars baked into the bundle — paste your prod values
-          # into the repo's Actions → Secrets so releases point at prod.
           VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
           VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
           VITE_AUTH_REDIRECT_URL: ${{ secrets.VITE_AUTH_REDIRECT_URL }}
           VITE_LIVEKIT_URL: ${{ secrets.VITE_LIVEKIT_URL }}
         with:
           projectPath: apps/desktop
-          tagName: ${{ github.ref_name }}
+          tagName: ${{ inputs.tag }}
-          releaseName: "ChatApp ${{ github.ref_name }}"
+          releaseName: "ChatApp ${{ inputs.tag }}"
-          releaseBody: "See the assets below to download this version."
+          releaseBody: "Manual build — copy .nsis.zip/.sig/latest.json to the update host."
           releaseDraft: true
           prerelease: false
           tauriScript: pnpm exec tauri
-          args: ${{ matrix.args }}
+          args: "--bundles nsis"

.gitignore

@@ -15,7 +15,9 @@ out/
 .env
 .env.local
 .env.*.local
+.env.release
 !.env.example
+!.env.release.example
 
 # Expo
 .expo/

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chat-app/desktop",
-  "version": "0.1.0",
+  "version": "0.10.2",
   "private": true,
   "description": "Tauri v2 desktop client (Windows / macOS / Linux)",
   "type": "module",
@@ -21,6 +21,7 @@
     "@chat-app/shared": "workspace:*",
     "@chat-app/ui-web": "workspace:*",
     "@livekit/components-react": "^2.9.0",
+    "@livekit/track-processors": "^0.7.2",
     "@supabase/supabase-js": "^2.46.0",
     "@tauri-apps/api": "^2.1.1",
     "@tauri-apps/plugin-fs": "^2.5.0",
@@ -30,7 +31,7 @@
     "@tauri-apps/plugin-stronghold": "^2.0.1",
     "@tauri-apps/plugin-updater": "^2.10.1",
     "i18next": "^23.16.4",
-    "libsodium-wrappers": "0.7.15",
+    "libsodium-wrappers-sumo": "0.7.15",
     "livekit-client": "^2.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -41,6 +42,7 @@
   "devDependencies": {
     "@tauri-apps/cli": "^2.1.0",
     "@types/libsodium-wrappers": "^0.7.14",
+    "@types/libsodium-wrappers-sumo": "^0.8.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

apps/desktop/public/favicon.svg

@@ -1,14 +1,7 @@
 <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-        <defs>
+        <rect x="4" y="4" width="56" height="56" rx="20" fill="#a78bfa"/>
-          <clipPath id="cp02">
+        <path d="M18 46 V22 Q 18 18 22 18 Q 26 18 27 21 L 39 42 Q 40 45 44 45 V22 Q 44 18 40 18"
-            <polygon points="32,5 57,19 57,45 32,59 7,45 7,19"/>
+              fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" opacity="0"/>
-          </clipPath>
+        <path d="M20 46 V22 a3 3 0 0 1 5.5 -1.8 L 40 43 a2 2 0 0 0 4 -1.2 V22 a3 3 0 0 0 -6 0"
-        </defs>
+              fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-        <polygon points="32,5 57,19 57,45 32,59 7,45 7,19" fill="#2e1065"/>
-        <g clip-path="url(#cp02)">
-          <path d="M-4 32 Q 16 18 32 32 T 68 32 L 68 64 L -4 64 Z" fill="#7c4dff"/>
-          <path d="M-4 32 Q 16 18 32 32 T 68 32" stroke="#a78bfa" stroke-width="2" fill="none"/>
-        </g>
-        <polygon points="32,5 57,19 57,45 32,59 7,45 7,19"
-                 fill="none" stroke="#a78bfa" stroke-width="1.5" opacity="0.4"/>
       </svg>

apps/desktop/public/sw.js

@@ -0,0 +1,67 @@
+// Web Push service worker.
+//
+// Handles browser-delivered push events when the app tab is closed or in the
+// background. Tauri desktop does not install service workers; native OS
+// notifications are routed through the Tauri notification plugin instead
+// (see src/lib/osNotify.ts).
+//
+// Payload contract — server sends JSON of shape:
+//   { title: string, body?: string, conversationId?: string, kind?: 'message' | 'call' }
+// Body is intentionally generic; message ciphertext is never included.
+
+self.addEventListener('install', (event) => {
+  // Activate immediately so updates apply on next page load.
+  event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('push', (event) => {
+  let data = { title: 'Neue Nachricht', body: '' };
+  try {
+    if (event.data) {
+      data = { ...data, ...event.data.json() };
+    }
+  } catch (_err) {
+    /* malformed payload — fall back to defaults */
+  }
+
+  const opts = {
+    body: data.body || '',
+    icon: '/favicon.svg',
+    badge: '/favicon.svg',
+    tag: data.conversationId || 'default',
+    renotify: true,
+    data: {
+      conversationId: data.conversationId,
+      kind: data.kind,
+    },
+  };
+
+  event.waitUntil(self.registration.showNotification(data.title, opts));
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const conversationId = event.notification.data && event.notification.data.conversationId;
+  const target = conversationId ? '/chats/' + conversationId : '/';
+
+  event.waitUntil(
+    self.clients
+      .matchAll({ type: 'window', includeUncontrolled: true })
+      .then((clientList) => {
+        for (const client of clientList) {
+          if ('focus' in client) {
+            client.postMessage({ type: 'navigate', to: target });
+            return client.focus();
+          }
+        }
+        if (self.clients.openWindow) {
+          return self.clients.openWindow(target);
+        }
+        return undefined;
+      }),
+  );
+});

apps/desktop/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "chat-app-desktop"
-version = "0.1.0"
+version = "0.10.2"
 description = "ChatApp desktop client"
 authors = ["Dennis"]
 edition = "2021"
@@ -14,7 +14,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = ["devtools"] }
+tauri = { version = "2", features = ["devtools", "tray-icon"] }
 tauri-plugin-notification = "2"
 tauri-plugin-sql = { version = "2", features = ["sqlite"] }
 tauri-plugin-stronghold = "2"
@@ -22,11 +22,43 @@ tauri-plugin-fs = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 
+# Pure-rust libsodium-compatible primitives. No C toolchain required so
+# cross-compile for mobile stays clean. API output is bit-compatible with
+# libsodium-wrappers-sumo for the ops we use (secretbox, box, pwhash).
+dryoc = { version = "0.7", default-features = false, features = ["serde"] }
+base64 = "0.22"
+
 [target."cfg(not(any(target_os = \"android\", target_os = \"ios\")))".dependencies]
 tauri-plugin-global-shortcut = "2"
 tauri-plugin-updater = "2"
+tauri-plugin-window-state = "2"
+
+# LiveKit client SDK — lives behind the `rust-livekit` feature flag so the
+# baseline build stays unaffected while the JS-SDK path is still the
+# default. Pulls libwebrtc-rs which adds ~20MB to the binary and ~5-10min
+# to the first build. Tokio runtime is required; the rest of the crate
+# stays idle when the feature is off.
+livekit = { version = "0.7", default-features = false, features = ["tokio", "rustls-tls-native-roots"], optional = true }
+tokio = { version = "1", features = ["rt-multi-thread", "sync", "macros"], optional = true }
 
 [features]
 # This feature is used for production builds or when `devPath` points to the filesystem
 # and disables specific features relevant to the dev build.
 custom-protocol = ["tauri/custom-protocol"]
+
+# Enable the Rust LiveKit client. Off by default so CI + users stay on the
+# JS-SDK path until the rust bridge reaches feature parity. Turn on via:
+#   cargo build --features rust-livekit
+rust-livekit = ["dep:livekit", "dep:tokio"]
+
+# Release-profile tuned for ChatApp: whole-program LTO + single codegen unit
+# cuts binary size by ~20-30% and trims startup overhead. `strip = "symbols"`
+# removes debug + symbol tables (the updater already signs separately so
+# symbol-backed crash reports aren't the recovery path). `panic = "abort"`
+# skips unwinding metadata since the app doesn't use catch_unwind anywhere.
+[profile.release]
+lto = true
+codegen-units = 1
+strip = "symbols"
+panic = "abort"
+opt-level = "s"

apps/desktop/src-tauri/capabilities/default.json

@@ -9,6 +9,11 @@
     "notification:allow-notify",
     "notification:allow-is-permission-granted",
     "notification:allow-request-permission",
+    "sql:default",
+    "sql:allow-load",
+    "sql:allow-execute",
+    "sql:allow-select",
+    "sql:allow-close",
     "global-shortcut:allow-register",
     "global-shortcut:allow-unregister",
     "global-shortcut:allow-is-registered",
@@ -34,6 +39,7 @@
     {
       "identifier": "fs:scope",
       "allow": [
+        { "path": "$APPLOCALDATA" },
         { "path": "$APPLOCALDATA/**" }
       ]
     }

apps/desktop/src-tauri/icons/source.svg

@@ -1,14 +1,7 @@
 <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-        <defs>
+        <rect x="4" y="4" width="56" height="56" rx="20" fill="#a78bfa"/>
-          <clipPath id="cp02">
+        <path d="M18 46 V22 Q 18 18 22 18 Q 26 18 27 21 L 39 42 Q 40 45 44 45 V22 Q 44 18 40 18"
-            <polygon points="32,5 57,19 57,45 32,59 7,45 7,19"/>
+              fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" opacity="0"/>
-          </clipPath>
+        <path d="M20 46 V22 a3 3 0 0 1 5.5 -1.8 L 40 43 a2 2 0 0 0 4 -1.2 V22 a3 3 0 0 0 -6 0"
-        </defs>
+              fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-        <polygon points="32,5 57,19 57,45 32,59 7,45 7,19" fill="#2e1065"/>
-        <g clip-path="url(#cp02)">
-          <path d="M-4 32 Q 16 18 32 32 T 68 32 L 68 64 L -4 64 Z" fill="#7c4dff"/>
-          <path d="M-4 32 Q 16 18 32 32 T 68 32" stroke="#a78bfa" stroke-width="2" fill="none"/>
-        </g>
-        <polygon points="32,5 57,19 57,45 32,59 7,45 7,19"
-                 fill="none" stroke="#a78bfa" stroke-width="1.5" opacity="0.4"/>
       </svg>

apps/desktop/src-tauri/src/crypto.rs

@@ -0,0 +1,287 @@
+// Native crypto primitives exposed as Tauri commands. The JS side calls
+// these via `invoke('crypto_…', …)` through `lib/nativeCryptoBackend.ts`.
+//
+// All byte arrays cross the IPC boundary as base64 strings to sidestep
+// serde_json's lack of native bytes support; JS encodes/decodes at the
+// thin wrapper layer. The extra encode step costs a few µs per call —
+// negligible against Argon2id's ~200ms and acceptable for bulk AEAD ops
+// which still outperform the WASM backend after the round-trip.
+//
+// Semantics: bit-compatible with libsodium-wrappers-sumo for all inputs.
+// AEAD authentication failures surface as `Err(String)` so the JS layer
+// can re-throw a deterministic error that existing callers already handle.
+
+use base64::{engine::general_purpose::STANDARD as B64, Engine};
+use dryoc::classic::crypto_box;
+use dryoc::classic::crypto_pwhash::{self, PasswordHashAlgorithm};
+use dryoc::classic::crypto_secretbox;
+use dryoc::constants::{
+    CRYPTO_BOX_PUBLICKEYBYTES, CRYPTO_BOX_SECRETKEYBYTES, CRYPTO_PWHASH_MEMLIMIT_MODERATE,
+    CRYPTO_PWHASH_OPSLIMIT_MODERATE, CRYPTO_PWHASH_SALTBYTES,
+};
+use dryoc::rng::randombytes_buf;
+use serde::{Deserialize, Serialize};
+
+fn encode(bytes: &[u8]) -> String {
+    B64.encode(bytes)
+}
+
+fn decode(s: &str) -> Result<Vec<u8>, String> {
+    B64.decode(s).map_err(|e| format!("invalid base64: {}", e))
+}
+
+// ---------------------------------------------------------------------------
+// Random
+// ---------------------------------------------------------------------------
+
+#[tauri::command]
+pub fn crypto_random_bytes(len: usize) -> Result<String, String> {
+    if len == 0 || len > 1024 * 1024 {
+        return Err("invalid length".into());
+    }
+    let buf = randombytes_buf(len);
+    Ok(encode(&buf))
+}
+
+// ---------------------------------------------------------------------------
+// crypto_secretbox — XSalsa20-Poly1305
+// ---------------------------------------------------------------------------
+
+#[tauri::command]
+pub fn crypto_secretbox_encrypt(
+    plaintext_b64: String,
+    nonce_b64: String,
+    key_b64: String,
+) -> Result<String, String> {
+    let plaintext = decode(&plaintext_b64)?;
+    let nonce = decode(&nonce_b64)?;
+    let key = decode(&key_b64)?;
+    if nonce.len() != 24 {
+        return Err("nonce must be 24 bytes".into());
+    }
+    if key.len() != 32 {
+        return Err("key must be 32 bytes".into());
+    }
+    let mut ciphertext = vec![0u8; plaintext.len() + 16];
+    let nonce_arr: [u8; 24] = nonce.as_slice().try_into().unwrap();
+    let key_arr: [u8; 32] = key.as_slice().try_into().unwrap();
+    crypto_secretbox::crypto_secretbox_easy(
+        &mut ciphertext,
+        &plaintext,
+        &nonce_arr,
+        &key_arr,
+    )
+    .map_err(|e| format!("secretbox encrypt failed: {}", e))?;
+    Ok(encode(&ciphertext))
+}
+
+#[tauri::command]
+pub fn crypto_secretbox_decrypt(
+    ciphertext_b64: String,
+    nonce_b64: String,
+    key_b64: String,
+) -> Result<String, String> {
+    let ciphertext = decode(&ciphertext_b64)?;
+    let nonce = decode(&nonce_b64)?;
+    let key = decode(&key_b64)?;
+    if nonce.len() != 24 {
+        return Err("nonce must be 24 bytes".into());
+    }
+    if key.len() != 32 {
+        return Err("key must be 32 bytes".into());
+    }
+    if ciphertext.len() < 16 {
+        return Err("ciphertext too short".into());
+    }
+    let mut plaintext = vec![0u8; ciphertext.len() - 16];
+    let nonce_arr: [u8; 24] = nonce.as_slice().try_into().unwrap();
+    let key_arr: [u8; 32] = key.as_slice().try_into().unwrap();
+    crypto_secretbox::crypto_secretbox_open_easy(
+        &mut plaintext,
+        &ciphertext,
+        &nonce_arr,
+        &key_arr,
+    )
+    .map_err(|_| "secretbox auth failed".to_string())?;
+    Ok(encode(&plaintext))
+}
+
+// ---------------------------------------------------------------------------
+// crypto_box — X25519 + XSalsa20-Poly1305
+// ---------------------------------------------------------------------------
+
+#[derive(Serialize, Deserialize)]
+pub struct KeyPairB64 {
+    pub public_key: String,
+    pub private_key: String,
+}
+
+#[tauri::command]
+pub fn crypto_box_keypair() -> Result<KeyPairB64, String> {
+    let (pk, sk) = crypto_box::crypto_box_keypair();
+    Ok(KeyPairB64 {
+        public_key: encode(&pk),
+        private_key: encode(&sk),
+    })
+}
+
+#[tauri::command]
+pub fn crypto_box_encrypt(
+    plaintext_b64: String,
+    nonce_b64: String,
+    recipient_pk_b64: String,
+    sender_sk_b64: String,
+) -> Result<String, String> {
+    let plaintext = decode(&plaintext_b64)?;
+    let nonce = decode(&nonce_b64)?;
+    let pk = decode(&recipient_pk_b64)?;
+    let sk = decode(&sender_sk_b64)?;
+    if pk.len() != CRYPTO_BOX_PUBLICKEYBYTES {
+        return Err("pk must be 32 bytes".into());
+    }
+    if sk.len() != CRYPTO_BOX_SECRETKEYBYTES {
+        return Err("sk must be 32 bytes".into());
+    }
+    let mut ciphertext = vec![0u8; plaintext.len() + 16];
+    let nonce_arr: [u8; 24] = nonce.as_slice().try_into().map_err(|_| "bad nonce")?;
+    let pk_arr: [u8; 32] = pk.as_slice().try_into().unwrap();
+    let sk_arr: [u8; 32] = sk.as_slice().try_into().unwrap();
+    crypto_box::crypto_box_easy(&mut ciphertext, &plaintext, &nonce_arr, &pk_arr, &sk_arr)
+        .map_err(|e| format!("box encrypt failed: {}", e))?;
+    Ok(encode(&ciphertext))
+}
+
+#[tauri::command]
+pub fn crypto_box_decrypt(
+    ciphertext_b64: String,
+    nonce_b64: String,
+    sender_pk_b64: String,
+    recipient_sk_b64: String,
+) -> Result<String, String> {
+    let ciphertext = decode(&ciphertext_b64)?;
+    let nonce = decode(&nonce_b64)?;
+    let pk = decode(&sender_pk_b64)?;
+    let sk = decode(&recipient_sk_b64)?;
+    if pk.len() != CRYPTO_BOX_PUBLICKEYBYTES {
+        return Err("pk must be 32 bytes".into());
+    }
+    if sk.len() != CRYPTO_BOX_SECRETKEYBYTES {
+        return Err("sk must be 32 bytes".into());
+    }
+    if ciphertext.len() < 16 {
+        return Err("ciphertext too short".into());
+    }
+    let mut plaintext = vec![0u8; ciphertext.len() - 16];
+    let nonce_arr: [u8; 24] = nonce.as_slice().try_into().map_err(|_| "bad nonce")?;
+    let pk_arr: [u8; 32] = pk.as_slice().try_into().unwrap();
+    let sk_arr: [u8; 32] = sk.as_slice().try_into().unwrap();
+    crypto_box::crypto_box_open_easy(
+        &mut plaintext,
+        &ciphertext,
+        &nonce_arr,
+        &pk_arr,
+        &sk_arr,
+    )
+    .map_err(|_| "box auth failed".to_string())?;
+    Ok(encode(&plaintext))
+}
+
+// Sealed-box (anonymous) variant — sender identity not authenticated but
+// recipient still verified. Used by the conv-key wrapping flow.
+#[tauri::command]
+pub fn crypto_box_seal(
+    plaintext_b64: String,
+    recipient_pk_b64: String,
+) -> Result<String, String> {
+    let plaintext = decode(&plaintext_b64)?;
+    let pk = decode(&recipient_pk_b64)?;
+    if pk.len() != CRYPTO_BOX_PUBLICKEYBYTES {
+        return Err("pk must be 32 bytes".into());
+    }
+    let pk_arr: [u8; 32] = pk.as_slice().try_into().unwrap();
+    let mut ciphertext = vec![0u8; plaintext.len() + 48];
+    crypto_box::crypto_box_seal(&mut ciphertext, &plaintext, &pk_arr)
+        .map_err(|e| format!("seal failed: {}", e))?;
+    Ok(encode(&ciphertext))
+}
+
+#[tauri::command]
+pub fn crypto_box_seal_open(
+    ciphertext_b64: String,
+    recipient_pk_b64: String,
+    recipient_sk_b64: String,
+) -> Result<String, String> {
+    let ciphertext = decode(&ciphertext_b64)?;
+    let pk = decode(&recipient_pk_b64)?;
+    let sk = decode(&recipient_sk_b64)?;
+    if pk.len() != CRYPTO_BOX_PUBLICKEYBYTES {
+        return Err("pk must be 32 bytes".into());
+    }
+    if sk.len() != CRYPTO_BOX_SECRETKEYBYTES {
+        return Err("sk must be 32 bytes".into());
+    }
+    if ciphertext.len() < 48 {
+        return Err("ciphertext too short".into());
+    }
+    let pk_arr: [u8; 32] = pk.as_slice().try_into().unwrap();
+    let sk_arr: [u8; 32] = sk.as_slice().try_into().unwrap();
+    let mut plaintext = vec![0u8; ciphertext.len() - 48];
+    crypto_box::crypto_box_seal_open(&mut plaintext, &ciphertext, &pk_arr, &sk_arr)
+        .map_err(|_| "seal open failed".to_string())?;
+    Ok(encode(&plaintext))
+}
+
+// ---------------------------------------------------------------------------
+// crypto_pwhash — Argon2id
+// ---------------------------------------------------------------------------
+
+#[derive(Deserialize)]
+pub struct PwhashArgs {
+    pub password: String,
+    pub salt_b64: String,
+    pub out_len: usize,
+    // Opslimit / memlimit presets map to libsodium constants; callers pass
+    // one of "interactive" | "moderate" | "sensitive". We default to
+    // moderate which matches every current call-site.
+    #[serde(default)]
+    pub preset: Option<String>,
+}
+
+fn pwhash_limits(preset: Option<&str>) -> (u64, usize) {
+    match preset {
+        Some("interactive") => (2, 64 * 1024 * 1024),
+        Some("sensitive") => (4, 1024 * 1024 * 1024),
+        _ => (
+            CRYPTO_PWHASH_OPSLIMIT_MODERATE as u64,
+            CRYPTO_PWHASH_MEMLIMIT_MODERATE,
+        ),
+    }
+}
+
+#[tauri::command]
+pub fn crypto_pwhash(args: PwhashArgs) -> Result<String, String> {
+    let salt = decode(&args.salt_b64)?;
+    if salt.len() != CRYPTO_PWHASH_SALTBYTES {
+        return Err(format!(
+            "salt must be {} bytes",
+            CRYPTO_PWHASH_SALTBYTES
+        ));
+    }
+    if args.out_len < 16 || args.out_len > 64 {
+        return Err("out_len out of range (16..=64)".into());
+    }
+    let salt_arr: [u8; CRYPTO_PWHASH_SALTBYTES] =
+        salt.as_slice().try_into().unwrap();
+    let (opslimit, memlimit) = pwhash_limits(args.preset.as_deref());
+    let mut out = vec![0u8; args.out_len];
+    crypto_pwhash::crypto_pwhash(
+        &mut out,
+        args.password.as_bytes(),
+        &salt_arr,
+        opslimit,
+        memlimit,
+        PasswordHashAlgorithm::Argon2id13,
+    )
+    .map_err(|e| format!("pwhash failed: {}", e))?;
+    Ok(encode(&out))
+}

apps/desktop/src-tauri/src/lib.rs

@@ -1,7 +1,121 @@
+mod crypto;
+
+#[cfg(feature = "rust-livekit")]
+mod livekit_bridge;
+
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+use tauri::{
+    menu::{Menu, MenuEvent, MenuItem, PredefinedMenuItem},
+    tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
+    AppHandle, Listener, Manager,
+};
+
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+use serde::Deserialize;
+
+// Payload for the `tray-unread-update` event the JS layer emits whenever the
+// aggregate unread-count changes. 0 hides the badge / resets the tooltip;
+// non-zero sets a count indicator.
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+#[derive(Deserialize)]
+struct TrayUnreadPayload {
+    count: u32,
+}
+
+// Red-dot overlay icon for the Windows taskbar. Drawn as raw RGBA instead of
+// shipping a PNG so we don't add another resource to the bundle. Kept small
+// (32x32) since Windows scales the overlay down anyway.
+#[cfg(target_os = "windows")]
+fn unread_overlay_rgba() -> Vec<u8> {
+    const SIZE: u32 = 32;
+    let r = SIZE as f32 / 2.0;
+    let mut buf = Vec::with_capacity((SIZE * SIZE * 4) as usize);
+    for y in 0..SIZE {
+        for x in 0..SIZE {
+            let dx = x as f32 - r + 0.5;
+            let dy = y as f32 - r + 0.5;
+            let d = (dx * dx + dy * dy).sqrt();
+            let edge = r - 1.0;
+            if d <= edge {
+                buf.extend_from_slice(&[0xDC, 0x26, 0x26, 0xFF]);
+            } else if d <= r {
+                let alpha = (255.0 * (r - d)).clamp(0.0, 255.0) as u8;
+                buf.extend_from_slice(&[0xDC, 0x26, 0x26, alpha]);
+            } else {
+                buf.extend_from_slice(&[0, 0, 0, 0]);
+            }
+        }
+    }
+    buf
+}
+
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+fn show_main_window(app: &AppHandle) {
+    if let Some(win) = app.get_webview_window("main") {
+        let _ = win.show();
+        let _ = win.unminimize();
+        let _ = win.set_focus();
+    }
+}
+
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+fn hide_main_window(app: &AppHandle) {
+    if let Some(win) = app.get_webview_window("main") {
+        let _ = win.hide();
+    }
+}
+
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+fn handle_menu_event(app: &AppHandle, event: MenuEvent) {
+    match event.id.as_ref() {
+        "tray-show" => show_main_window(app),
+        "tray-hide" => hide_main_window(app),
+        "tray-quit" => {
+            app.exit(0);
+        }
+        _ => {}
+    }
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
+    #[cfg(not(feature = "rust-livekit"))]
     let mut builder = tauri::Builder::default()
-        .plugin(tauri_plugin_notification::init())
+        .invoke_handler(tauri::generate_handler![
+            crypto::crypto_random_bytes,
+            crypto::crypto_secretbox_encrypt,
+            crypto::crypto_secretbox_decrypt,
+            crypto::crypto_box_keypair,
+            crypto::crypto_box_encrypt,
+            crypto::crypto_box_decrypt,
+            crypto::crypto_box_seal,
+            crypto::crypto_box_seal_open,
+            crypto::crypto_pwhash,
+        ])
+        .plugin(tauri_plugin_notification::init());
+
+    #[cfg(feature = "rust-livekit")]
+    let mut builder = tauri::Builder::default()
+        .manage(livekit_bridge::LivekitState::new())
+        .invoke_handler(tauri::generate_handler![
+            crypto::crypto_random_bytes,
+            crypto::crypto_secretbox_encrypt,
+            crypto::crypto_secretbox_decrypt,
+            crypto::crypto_box_keypair,
+            crypto::crypto_box_encrypt,
+            crypto::crypto_box_decrypt,
+            crypto::crypto_box_seal,
+            crypto::crypto_box_seal_open,
+            crypto::crypto_pwhash,
+            livekit_bridge::livekit_connect,
+            livekit_bridge::livekit_disconnect,
+            livekit_bridge::livekit_send_data,
+            livekit_bridge::livekit_set_mic,
+            livekit_bridge::livekit_set_camera,
+        ])
+        .plugin(tauri_plugin_notification::init());
+
+    builder = builder
         .plugin(tauri_plugin_sql::Builder::default().build())
         .plugin(tauri_plugin_fs::init())
         .plugin(
@@ -13,12 +127,105 @@ pub fn run() {
             .build(),
         );
 
-    // Global shortcut + updater plugins are desktop-only (no mobile support).
+    // Global shortcut + updater + window-state plugins are desktop-only
+    // (no mobile support — mobile windows are OS-managed).
     #[cfg(not(any(target_os = "android", target_os = "ios")))]
     {
         builder = builder
             .plugin(tauri_plugin_global_shortcut::Builder::new().build())
-            .plugin(tauri_plugin_updater::Builder::new().build());
+            .plugin(tauri_plugin_updater::Builder::new().build())
+            .plugin(tauri_plugin_window_state::Builder::new().build());
+    }
+
+    #[cfg(not(any(target_os = "android", target_os = "ios")))]
+    {
+        builder = builder.setup(|app| {
+            // Tray icon with a minimal menu. Left-click toggles window
+            // visibility; right-click shows the menu. Badge / tooltip updates
+            // come from the JS side via `tray-unread-update` events.
+            let show = MenuItem::with_id(app, "tray-show", "Öffnen", true, None::<&str>)?;
+            let hide = MenuItem::with_id(app, "tray-hide", "Ausblenden", true, None::<&str>)?;
+            let sep = PredefinedMenuItem::separator(app)?;
+            let quit = MenuItem::with_id(app, "tray-quit", "Beenden", true, None::<&str>)?;
+            let menu = Menu::with_items(app, &[&show, &hide, &sep, &quit])?;
+
+            let mut tray_builder = TrayIconBuilder::with_id("chatapp-tray")
+                .menu(&menu)
+                .show_menu_on_left_click(false)
+                .tooltip("ChatApp")
+                .on_menu_event(|app, event| handle_menu_event(app, event))
+                .on_tray_icon_event(|tray, event| {
+                    if let TrayIconEvent::Click {
+                        button: MouseButton::Left,
+                        button_state: MouseButtonState::Up,
+                        ..
+                    } = event
+                    {
+                        let app = tray.app_handle();
+                        if let Some(win) = app.get_webview_window("main") {
+                            if win.is_visible().unwrap_or(false) {
+                                let _ = win.hide();
+                            } else {
+                                let _ = win.show();
+                                let _ = win.set_focus();
+                            }
+                        }
+                    }
+                });
+
+            // `default_window_icon` returns Option<&Image>; only attach if
+            // we actually have one bundled (should always be true via the
+            // tauri.conf.json icon list, but guard to stay typesafe).
+            if let Some(icon) = app.default_window_icon() {
+                tray_builder = tray_builder.icon(icon.clone());
+            }
+
+            let tray = tray_builder.build(app)?;
+
+            // Listen for JS-side unread updates and mirror them into the tray
+            // tooltip + macOS dock badge. `tray` is cheap to clone (internal
+            // Arc) so we can move it into the listener closure directly.
+            let tray_handle = tray.clone();
+            let badge_window = app.get_webview_window("main");
+            app.listen("tray-unread-update", move |event| {
+                let Ok(payload) = serde_json::from_str::<TrayUnreadPayload>(event.payload())
+                else {
+                    return;
+                };
+                let tooltip = if payload.count == 0 {
+                    "ChatApp".to_string()
+                } else {
+                    format!("ChatApp · {} neu", payload.count)
+                };
+                let _ = tray_handle.set_tooltip(Some(tooltip));
+                // Dock/taskbar badge. macOS uses a numeric label; Windows uses
+                // an overlay icon (red dot = unread). Linux has no cross-DE
+                // badge API — skip.
+                #[cfg(target_os = "macos")]
+                if let Some(win) = badge_window.as_ref() {
+                    let badge = if payload.count == 0 {
+                        None
+                    } else {
+                        Some(payload.count.to_string())
+                    };
+                    let _ = win.set_badge_label(badge);
+                }
+                #[cfg(target_os = "windows")]
+                if let Some(win) = badge_window.as_ref() {
+                    if payload.count == 0 {
+                        let _ = win.set_overlay_icon(None);
+                    } else {
+                        let rgba = unread_overlay_rgba();
+                        let img = tauri::image::Image::new_owned(rgba, 32, 32);
+                        let _ = win.set_overlay_icon(Some(img));
+                    }
+                }
+                #[cfg(not(any(target_os = "macos", target_os = "windows")))]
+                let _ = &badge_window;
+            });
+
+            Ok(())
+        });
     }
 
     builder

apps/desktop/src-tauri/src/livekit_bridge.rs

@@ -0,0 +1,227 @@
+// Rust LiveKit bridge — command/event glue between the JS CallContext and
+// the native livekit client. Feature-gated behind `rust-livekit` so the
+// baseline build doesn't pay the libwebrtc download / link cost while the
+// bridge is still evolving.
+//
+// Design contract (matches `lib/nativeLiveKit.ts` on the JS side):
+//   command: livekit_connect      { url, token, e2ee_key_b64? }
+//   command: livekit_disconnect
+//   command: livekit_set_mic      { enabled }
+//   command: livekit_set_camera   { enabled }
+//   command: livekit_start_share  {}
+//   command: livekit_stop_share   {}
+//   command: livekit_send_data    { payload_b64, reliable }
+//   event:   livekit:room_state           { state }
+//   event:   livekit:participant_joined   { identity, name? }
+//   event:   livekit:participant_left     { identity }
+//   event:   livekit:track_published      { identity, sid, kind, source }
+//   event:   livekit:track_unpublished    { identity, sid }
+//   event:   livekit:audio_level          { identity, level }
+//   event:   livekit:data_received        { identity, payload_b64 }
+//   event:   livekit:error                { message }
+//
+// Phase B.1 (this file) only wires connect/disconnect + room-state events
+// so the JS side can prove round-trip; mic/camera/video come later.
+
+#![cfg(feature = "rust-livekit")]
+
+use std::sync::Arc;
+
+use livekit::{
+    id::ParticipantIdentity, DataPacketKind, Room, RoomEvent, RoomOptions,
+};
+use serde::{Deserialize, Serialize};
+use tauri::{AppHandle, Emitter, State};
+use tokio::sync::{mpsc, Mutex};
+
+pub struct LivekitState {
+    room: Mutex<Option<Arc<Room>>>,
+}
+
+impl LivekitState {
+    pub fn new() -> Self {
+        Self {
+            room: Mutex::new(None),
+        }
+    }
+}
+
+#[derive(Deserialize)]
+pub struct ConnectArgs {
+    pub url: String,
+    pub token: String,
+}
+
+#[derive(Serialize, Clone)]
+struct RoomStatePayload {
+    state: &'static str,
+}
+
+#[derive(Serialize, Clone)]
+struct ParticipantPayload {
+    identity: String,
+}
+
+#[derive(Serialize, Clone)]
+struct DataPayload {
+    identity: String,
+    payload_b64: String,
+    reliable: bool,
+}
+
+#[tauri::command]
+pub async fn livekit_connect(
+    app: AppHandle,
+    state: State<'_, LivekitState>,
+    args: ConnectArgs,
+) -> Result<(), String> {
+    let mut guard = state.room.lock().await;
+    if guard.is_some() {
+        return Err("already connected".into());
+    }
+    let options = RoomOptions::default();
+    let (room, mut events) = Room::connect(&args.url, &args.token, options)
+        .await
+        .map_err(|e| format!("livekit connect failed: {}", e))?;
+    let room = Arc::new(room);
+    *guard = Some(room.clone());
+    drop(guard);
+
+    let _ = app.emit(
+        "livekit:room_state",
+        RoomStatePayload { state: "connected" },
+    );
+
+    // Spawn the event pump. Lives for the duration of the room connection;
+    // stops naturally when the channel closes (disconnect or crash).
+    let app_for_events = app.clone();
+    tokio::spawn(async move {
+        while let Some(event) = events.recv().await {
+            pump_event(&app_for_events, event);
+        }
+        let _ = app_for_events.emit(
+            "livekit:room_state",
+            RoomStatePayload {
+                state: "disconnected",
+            },
+        );
+    });
+
+    Ok(())
+}
+
+fn pump_event(app: &AppHandle, event: RoomEvent) {
+    match event {
+        RoomEvent::ParticipantConnected(p) => {
+            let _ = app.emit(
+                "livekit:participant_joined",
+                ParticipantPayload {
+                    identity: identity_string(p.identity()),
+                },
+            );
+        }
+        RoomEvent::ParticipantDisconnected(p) => {
+            let _ = app.emit(
+                "livekit:participant_left",
+                ParticipantPayload {
+                    identity: identity_string(p.identity()),
+                },
+            );
+        }
+        RoomEvent::DataReceived {
+            payload,
+            kind,
+            participant,
+            ..
+        } => {
+            use base64::engine::general_purpose::STANDARD;
+            use base64::Engine;
+            let identity = participant
+                .map(|p| identity_string(p.identity()))
+                .unwrap_or_default();
+            let _ = app.emit(
+                "livekit:data_received",
+                DataPayload {
+                    identity,
+                    payload_b64: STANDARD.encode(payload.as_ref()),
+                    reliable: matches!(kind, DataPacketKind::Reliable),
+                },
+            );
+        }
+        RoomEvent::Disconnected { .. } => {
+            let _ = app.emit(
+                "livekit:room_state",
+                RoomStatePayload {
+                    state: "disconnected",
+                },
+            );
+        }
+        _ => {
+            // Remaining events (TrackPublished, TrackSubscribed, etc.) land
+            // in later phases. Ignoring silently keeps the prototype small.
+        }
+    }
+}
+
+fn identity_string(id: ParticipantIdentity) -> String {
+    // ParticipantIdentity is a newtype around String in the livekit crate.
+    id.0
+}
+
+#[tauri::command]
+pub async fn livekit_disconnect(state: State<'_, LivekitState>) -> Result<(), String> {
+    let mut guard = state.room.lock().await;
+    if let Some(room) = guard.take() {
+        let _ = room.close().await;
+    }
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn livekit_send_data(
+    state: State<'_, LivekitState>,
+    payload_b64: String,
+    reliable: bool,
+) -> Result<(), String> {
+    use base64::engine::general_purpose::STANDARD;
+    use base64::Engine;
+    let room = state.room.lock().await;
+    let room = room.as_ref().ok_or_else(|| "not connected".to_string())?;
+    let payload = STANDARD
+        .decode(&payload_b64)
+        .map_err(|e| format!("bad base64: {}", e))?;
+    let kind = if reliable {
+        DataPacketKind::Reliable
+    } else {
+        DataPacketKind::Lossy
+    };
+    room.local_participant()
+        .publish_data(livekit::prelude::DataPacket {
+            payload,
+            topic: None,
+            reliable: matches!(kind, DataPacketKind::Reliable),
+            destination_identities: Vec::new(),
+        })
+        .await
+        .map_err(|e| format!("publish_data failed: {}", e))?;
+    Ok(())
+}
+
+// Placeholder — Phase B.2 will fill these in.
+#[tauri::command]
+pub async fn livekit_set_mic(_enabled: bool) -> Result<(), String> {
+    Err("livekit_set_mic not implemented — Phase B.2".into())
+}
+
+#[tauri::command]
+pub async fn livekit_set_camera(_enabled: bool) -> Result<(), String> {
+    Err("livekit_set_camera not implemented — Phase B.2".into())
+}
+
+// Unused-send bridge so `mpsc` doesn't get unused-import-warned when the
+// feature gate is off.
+#[allow(dead_code)]
+fn _mpsc_anchor() -> mpsc::Sender<()> {
+    let (tx, _rx) = mpsc::channel::<()>(1);
+    tx
+}

apps/desktop/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ChatApp",
-  "version": "0.6.0",
+  "version": "0.10.2",
   "identifier": "com.meinname.chatapp",
   "build": {
     "beforeDevCommand": "pnpm vite:dev",
@@ -42,8 +42,10 @@
   },
   "plugins": {
     "updater": {
-      "endpoints": ["https://github.com/byGalax/chat-app/releases/latest/download/latest.json"],
+      "endpoints": [
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDQ5N0U0RDcxOTU2OEQ0QUUKUldTdTFHaVZjVTErU1ZuMk1lWXBUbEcyS1RHYzJQN3k4VDdiUGRvRnVJYVJKR3BxWG1xcENpdlYK",
+        "https://update.netralax.cloud/windows/latest.json"
+      ],
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEI1Mzc0QjVBQUZEQTA3RUIKUldUckI5cXZXa3MzdGM3QkE4WWFPd3NnVzRZeXdpcUM0eUtjRDlGN09ySEdzNXhLNlo3azBPajYK",
       "windows": {
         "installMode": "passive"
       }

apps/desktop/src/App.tsx

@@ -1,6 +1,10 @@
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
+import { BrowserRouter, Navigate, Outlet, Route, Routes } from 'react-router-dom';
 
 import { AppShell } from './components/AppShell';
+import { CrashToast } from './components/CrashToast';
+import { ErrorBoundary } from './components/ErrorBoundary';
+import { SpinnerIcon } from './components/icons';
 import { UpdateToast } from './components/UpdateToast';
 import { RequireAdmin, RequireAuth, RequireDevice } from './components/guards';
 import { AuthProvider } from './context/AuthContext';
@@ -8,39 +12,141 @@ import { CallProvider } from './context/CallContext';
 import { ConversationsProvider } from './context/ConversationsContext';
 import { FriendshipsProvider } from './context/FriendshipsContext';
 import { ThemeProvider } from './context/ThemeContext';
-import { AdminPage } from './pages/AdminPage';
-import { AuthCallbackPage } from './pages/AuthCallbackPage';
 import { AuthPage } from './pages/AuthPage';
 import { ChatsEmptyState, ChatsPage } from './pages/ChatsPage';
 import { ConversationPage } from './pages/ConversationPage';
-import { DevicePage } from './pages/DevicePage';
+
-import { FriendsPage } from './pages/FriendsPage';
+// Routes rarely visited on first render are pulled out of the initial bundle.
-import { SettingsPage } from './pages/SettingsPage';
+// AuthPage stays eager because it's the first screen unauthenticated users
+// see; ChatsPage + ConversationPage stay eager because every authenticated
+// session renders them immediately.
+const AdminPage = lazy(() => import('./pages/AdminPage').then((m) => ({ default: m.AdminPage })));
+const AuthCallbackPage = lazy(() =>
+  import('./pages/AuthCallbackPage').then((m) => ({ default: m.AuthCallbackPage })),
+);
+const DevicePage = lazy(() => import('./pages/DevicePage').then((m) => ({ default: m.DevicePage })));
+const FriendsPage = lazy(() =>
+  import('./pages/FriendsPage').then((m) => ({ default: m.FriendsPage })),
+);
+const SettingsPage = lazy(() =>
+  import('./pages/SettingsPage').then((m) => ({ default: m.SettingsPage })),
+);
+
+function RouteSuspense({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-full w-full items-center justify-center bg-surface-3">
+          <SpinnerIcon className="h-5 w-5 text-accent" />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}
+
+// Isolates each top-level route so a crash in one page doesn't take the whole
+// shell down. The boundary auto-retries via `ErrorBoundary`'s backoff schedule.
+function RouteBoundary({ scope }: { scope: string }) {
+  return (
+    <ErrorBoundary scope={scope}>
+      <Outlet />
+    </ErrorBoundary>
+  );
+}
 
 export function App() {
   return (
+    <ErrorBoundary scope="root">
       <ThemeProvider>
         <AuthProvider>
           <FriendshipsProvider>
             <ConversationsProvider>
               <CallProvider>
-            <BrowserRouter>
+                <BrowserRouter
+                  future={{
+                    // Opt into v7 behaviour early so the upgrade is a no-op:
+                    // - `v7_startTransition` wraps navigations in startTransition
+                    //   so Suspense / concurrent rendering deal with the new tree
+                    // - `v7_relativeSplatPath` matches relative paths inside
+                    //   splat routes against the parent splat segment (not the
+                    //   full matched path). Our tree has no splat routes today
+                    //   but this kills the runtime warning and future-proofs.
+                    v7_startTransition: true,
+                    v7_relativeSplatPath: true,
+                  }}
+                >
                   <Routes>
+                    <Route element={<RouteBoundary scope="auth" />}>
                       <Route path="/auth" element={<AuthPage />} />
-              <Route path="/auth/callback" element={<AuthCallbackPage />} />
+                      <Route
+                        path="/auth/callback"
+                        element={
+                          <RouteSuspense>
+                            <AuthCallbackPage />
+                          </RouteSuspense>
+                        }
+                      />
+                    </Route>
                     <Route element={<RequireAuth />}>
-                <Route path="/device" element={<DevicePage />} />
+                      <Route element={<RouteBoundary scope="device" />}>
+                        <Route
+                          path="/device"
+                          element={
+                            <RouteSuspense>
+                              <DevicePage />
+                            </RouteSuspense>
+                          }
+                        />
+                      </Route>
                       <Route element={<RequireDevice />}>
                         <Route element={<AppShell />}>
                           <Route index element={<Navigate to="/chats" replace />} />
+                          <Route element={<RouteBoundary scope="chats" />}>
                             <Route path="/chats" element={<ChatsPage />}>
                               <Route index element={<ChatsEmptyState />} />
-                      <Route path=":id" element={<ConversationPage />} />
+                              <Route
+                                path=":id"
+                                element={
+                                  <ErrorBoundary scope="conversation">
+                                    <ConversationPage />
+                                  </ErrorBoundary>
+                                }
+                              />
+                            </Route>
+                          </Route>
+                          <Route element={<RouteBoundary scope="friends" />}>
+                            <Route
+                              path="/friends"
+                              element={
+                                <RouteSuspense>
+                                  <FriendsPage />
+                                </RouteSuspense>
+                              }
+                            />
+                          </Route>
+                          <Route element={<RouteBoundary scope="settings" />}>
+                            <Route
+                              path="/settings"
+                              element={
+                                <RouteSuspense>
+                                  <SettingsPage />
+                                </RouteSuspense>
+                              }
+                            />
                           </Route>
-                    <Route path="/friends" element={<FriendsPage />} />
-                    <Route path="/settings" element={<SettingsPage />} />
                           <Route element={<RequireAdmin />}>
-                      <Route path="/admin" element={<AdminPage />} />
+                            <Route element={<RouteBoundary scope="admin" />}>
+                              <Route
+                                path="/admin"
+                                element={
+                                  <RouteSuspense>
+                                    <AdminPage />
+                                  </RouteSuspense>
+                                }
+                              />
+                            </Route>
                           </Route>
                         </Route>
                       </Route>
@@ -48,11 +154,13 @@ export function App() {
                     <Route path="*" element={<Navigate to="/chats" replace />} />
                   </Routes>
                   <UpdateToast />
+                  <CrashToast />
                 </BrowserRouter>
               </CallProvider>
             </ConversationsProvider>
           </FriendshipsProvider>
         </AuthProvider>
       </ThemeProvider>
+    </ErrorBoundary>
   );
 }

apps/desktop/src/components/AppShell.tsx

@@ -4,6 +4,7 @@ import { Outlet } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { startConversationKeySync } from '../lib/conversationKeySync';
 import { ensureNotificationPermission } from '../lib/osNotify';
+import { BackupPromptBanner } from './BackupPromptBanner';
 import { CallUI } from './CallUI';
 import { Sidebar } from './Sidebar';
 
@@ -32,6 +33,7 @@ export function AppShell() {
         </main>
       </div>
       <CallUI />
+      <BackupPromptBanner />
     </div>
   );
 }

apps/desktop/src/components/AttachmentAudio.tsx

@@ -0,0 +1,251 @@
+import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
+import { supabase } from '../lib/supabase';
+import { AlertIcon, MicIcon, SpinnerIcon } from './icons';
+
+interface Props {
+  handle: AttachmentHandle;
+}
+
+const BAR_COUNT = 48;
+
+// Custom voice-message player with waveform visualisation. Decoded peaks are
+// computed once per blob via OfflineAudioContext so playback only carries the
+// rendered DOM. Falls back to a rectangular bar if decoding fails (e.g. the
+// blob mime is recognised by <audio> but not by AudioContext).
+export function AttachmentAudio({ handle }: Props) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [arrayBuf, setArrayBuf] = useState<ArrayBuffer | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [peaks, setPeaks] = useState<number[] | null>(null);
+  const [duration, setDuration] = useState<number>(0);
+  const [position, setPosition] = useState<number>(0);
+  const [playing, setPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    let url: string | null = null;
+    setError(null);
+    setBlobUrl(null);
+    setArrayBuf(null);
+
+    void (async () => {
+      const cached = await getCachedAttachment(handle.id);
+      if (cached) {
+        if (cancelled) return;
+        url = URL.createObjectURL(cached);
+        setBlobUrl(url);
+        const buf = await cached.arrayBuffer();
+        if (!cancelled) setArrayBuf(buf);
+        return;
+      }
+      try {
+        const blob = await downloadAndDecryptAttachment({ client: supabase, handle });
+        if (cancelled) return;
+        url = URL.createObjectURL(blob);
+        setBlobUrl(url);
+        const buf = await blob.arrayBuffer();
+        if (!cancelled) setArrayBuf(buf);
+        void putCachedAttachment(handle.id, blob);
+      } catch (err: unknown) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'download failed');
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [handle.id, handle.storagePath, handle.keyB64, handle.nonceB64]);
+
+  // Compute peaks via OfflineAudioContext. Cheap O(n) scan over PCM samples
+  // bucketed into BAR_COUNT bars. Done once per attachment.
+  useEffect(() => {
+    if (!arrayBuf) return;
+    let cancelled = false;
+    const Ctx =
+      window.AudioContext ||
+      (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+    const ctx = new Ctx();
+    ctx
+      .decodeAudioData(arrayBuf.slice(0))
+      .then((decoded) => {
+        if (cancelled) return;
+        setDuration(decoded.duration);
+        const channel = decoded.getChannelData(0);
+        const bucket = Math.max(1, Math.floor(channel.length / BAR_COUNT));
+        const out = new Array<number>(BAR_COUNT).fill(0);
+        for (let i = 0; i < BAR_COUNT; i++) {
+          let max = 0;
+          const start = i * bucket;
+          const end = Math.min(channel.length, start + bucket);
+          for (let j = start; j < end; j++) {
+            const v = Math.abs(channel[j]!);
+            if (v > max) max = v;
+          }
+          out[i] = max;
+        }
+        // Normalize so loudest peak is 1; keeps quiet recordings visible.
+        const peak = Math.max(...out, 0.001);
+        setPeaks(out.map((v) => v / peak));
+      })
+      .catch(() => {
+        // Fall through — UI shows a flat bar but playback still works.
+      })
+      .finally(() => {
+        void ctx.close().catch(() => {});
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [arrayBuf]);
+
+  const fallbackPeaks = useMemo(
+    () => (peaks ? null : Array.from({ length: BAR_COUNT }, () => 0.5)),
+    [peaks],
+  );
+  const visiblePeaks = peaks ?? fallbackPeaks!;
+  const progress = duration > 0 ? position / duration : 0;
+
+  const onTogglePlay = () => {
+    const el = audioRef.current;
+    if (!el || !blobUrl) return;
+    if (el.paused) void el.play();
+    else el.pause();
+  };
+
+  const onSeek = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = audioRef.current;
+    if (!el || duration === 0) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+    el.currentTime = ratio * duration;
+  };
+
+  if (error) {
+    return (
+      <div className="mt-2 inline-flex items-center gap-2 rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs text-rose-200">
+        <AlertIcon className="h-4 w-4" />
+        <span>{error}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-2 flex w-[280px] min-w-[280px] items-center gap-2 rounded-lg border border-line bg-surface-2 px-3 py-2">
+      <button
+        type="button"
+        onClick={onTogglePlay}
+        disabled={!blobUrl}
+        aria-label={playing ? 'Pause' : 'Wiedergabe'}
+        title={playing ? 'Pause' : 'Wiedergabe'}
+        className="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full bg-accent text-accent-fg transition hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        {!blobUrl ? (
+          <SpinnerIcon className="h-4 w-4" />
+        ) : playing ? (
+          <PauseGlyph />
+        ) : (
+          <PlayGlyph />
+        )}
+      </button>
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <div
+          role="slider"
+          aria-label="Position"
+          aria-valuemin={0}
+          aria-valuemax={Math.max(1, Math.floor(duration))}
+          aria-valuenow={Math.floor(position)}
+          tabIndex={0}
+          onClick={onSeek}
+          className="flex h-7 cursor-pointer items-center gap-[2px]"
+        >
+          {visiblePeaks.map((v, i) => {
+            const playedRatio = (i + 0.5) / BAR_COUNT;
+            const played = playedRatio <= progress;
+            const h = Math.max(2, Math.round(v * 22));
+            return (
+              <span
+                key={i}
+                style={{ height: h + 'px' }}
+                className={
+                  'w-[3px] rounded-full ' +
+                  (played ? 'bg-accent' : 'bg-fg-muted/40')
+                }
+              />
+            );
+          })}
+        </div>
+        <div className="flex items-center justify-between text-[10px] tabular-nums text-fg-muted">
+          <span className="inline-flex items-center gap-1">
+            <MicIcon className="h-3 w-3" />
+            <span>{formatSec(playing ? position : duration)}</span>
+          </span>
+        </div>
+      </div>
+      {blobUrl && (
+        <audio
+          ref={audioRef}
+          src={blobUrl}
+          preload="metadata"
+          onLoadedMetadata={(e) => {
+            // Some webm/opus blobs report Infinity until first seek (Chrome
+            // bug). Force a seek to flush real duration.
+            const el = e.currentTarget;
+            if (!Number.isFinite(el.duration)) {
+              el.currentTime = 1e9;
+              setTimeout(() => {
+                el.currentTime = 0;
+              }, 0);
+            } else if (duration === 0) {
+              setDuration(el.duration);
+            }
+          }}
+          onDurationChange={(e) => {
+            const d = e.currentTarget.duration;
+            if (Number.isFinite(d) && d > 0) setDuration(d);
+          }}
+          onTimeUpdate={(e) => setPosition(e.currentTarget.currentTime)}
+          onPlay={() => setPlaying(true)}
+          onPause={() => setPlaying(false)}
+          onEnded={() => {
+            setPlaying(false);
+            setPosition(0);
+          }}
+          className="hidden"
+        >
+          <track kind="captions" />
+        </audio>
+      )}
+    </div>
+  );
+}
+
+function PlayGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
+      <path d="M5 3.5l8 4.5-8 4.5z" />
+    </svg>
+  );
+}
+
+function PauseGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
+      <rect x="4" y="3" width="3" height="10" rx="1" />
+      <rect x="9" y="3" width="3" height="10" rx="1" />
+    </svg>
+  );
+}
+
+function formatSec(sec: number): string {
+  if (!Number.isFinite(sec) || sec < 0) sec = 0;
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return m + ':' + s.toString().padStart(2, '0');
+}

apps/desktop/src/components/AttachmentGeneric.tsx

@@ -0,0 +1,132 @@
+import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
+import { useState } from 'react';
+
+import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
+import { supabase } from '../lib/supabase';
+import { AlertIcon, SpinnerIcon } from './icons';
+
+interface Props {
+  handle: AttachmentHandle;
+}
+
+// Catch-all card for attachments without a richer renderer (zip, docx,
+// txt, etc). Decrypt is deferred to first download click — these can be
+// large and there's no inline preview to justify auto-fetching them.
+export function AttachmentGeneric({ handle }: Props) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const download = async () => {
+    if (busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      let blob = await getCachedAttachment(handle.id);
+      if (!blob) {
+        blob = await downloadAndDecryptAttachment({ client: supabase, handle });
+        void putCachedAttachment(handle.id, blob);
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filenameFor(handle);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      // Defer revoke so Safari has a chance to start the download.
+      setTimeout(() => URL.revokeObjectURL(url), 60_000);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'download failed');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="mt-2 inline-flex w-[280px] items-center gap-2.5 rounded-lg border border-line bg-surface-2 p-2.5">
+      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-accent/10 text-accent">
+        <FileGlyph />
+      </span>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-xs font-semibold text-fg">
+          {prettyMime(handle.mimeType)}
+        </p>
+        <p className="truncate text-[10px] text-fg-muted">
+          {formatSize(handle.sizeBytes)}
+        </p>
+        {error && (
+          <p className="mt-0.5 inline-flex items-center gap-1 text-[10px] text-rose-500">
+            <AlertIcon className="h-3 w-3" />
+            <span>{error}</span>
+          </p>
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={() => void download()}
+        disabled={busy}
+        aria-label="Download"
+        title="Download"
+        className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-line bg-surface-3 text-fg transition hover:brightness-95 disabled:opacity-60"
+      >
+        {busy ? <SpinnerIcon className="h-4 w-4" /> : <DownloadGlyph />}
+      </button>
+    </div>
+  );
+}
+
+function FileGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">
+      <path d="M3 2a1 1 0 011-1h6l3 3v10a1 1 0 01-1 1H4a1 1 0 01-1-1V2zm7 0v3h3l-3-3z" />
+    </svg>
+  );
+}
+
+function DownloadGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M8 2v8M4 7l4 4 4-4M3 13h10" />
+    </svg>
+  );
+}
+
+function filenameFor(handle: AttachmentHandle): string {
+  const ext = extFor(handle.mimeType);
+  return 'attachment-' + handle.id.slice(0, 8) + (ext ? '.' + ext : '');
+}
+
+function extFor(mime: string): string | null {
+  const map: Record<string, string> = {
+    'application/zip': 'zip',
+    'application/x-zip-compressed': 'zip',
+    'application/x-7z-compressed': '7z',
+    'application/x-tar': 'tar',
+    'application/gzip': 'gz',
+    'application/json': 'json',
+    'application/xml': 'xml',
+    'text/plain': 'txt',
+    'text/markdown': 'md',
+    'text/csv': 'csv',
+    'application/msword': 'doc',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
+    'application/vnd.ms-excel': 'xls',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',
+    'application/vnd.ms-powerpoint': 'ppt',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'pptx',
+  };
+  return map[mime] ?? null;
+}
+
+function prettyMime(mime: string): string {
+  const ext = extFor(mime);
+  if (ext) return ext.toUpperCase() + '-Datei';
+  if (mime.startsWith('text/')) return 'Textdatei';
+  return mime || 'Datei';
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' KB';
+  return (bytes / 1024 / 1024).toFixed(1) + ' MB';
+}

apps/desktop/src/components/AttachmentImage.tsx

@@ -1,6 +1,7 @@
 import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
 import { useEffect, useState } from 'react';
 
+import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
 import { supabase } from '../lib/supabase';
 import { AlertIcon, SpinnerIcon, XIcon } from './icons';
 
@@ -8,35 +9,95 @@ interface Props {
   handle: AttachmentHandle;
 }
 
+// Max inline-preview dimension. Full-resolution stays available for the
+// lightbox. Animated formats (gif/webp/apng) are passed through untouched
+// so animation isn't lost; everything else is downscaled to this box.
+const THUMB_MAX_DIM = 640;
+const ANIMATED_MIME = /^image\/(gif|apng|webp)/;
+
+async function makeThumbnail(blob: Blob): Promise<Blob | null> {
+  if (ANIMATED_MIME.test(blob.type)) return null;
+  if (typeof createImageBitmap !== 'function') return null;
+  if (typeof OffscreenCanvas !== 'function') return null;
+  try {
+    const bitmap = await createImageBitmap(blob);
+    const largest = Math.max(bitmap.width, bitmap.height);
+    if (largest <= THUMB_MAX_DIM) {
+      bitmap.close();
+      return null;
+    }
+    const scale = THUMB_MAX_DIM / largest;
+    const w = Math.max(1, Math.round(bitmap.width * scale));
+    const h = Math.max(1, Math.round(bitmap.height * scale));
+    const canvas = new OffscreenCanvas(w, h);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      bitmap.close();
+      return null;
+    }
+    ctx.drawImage(bitmap, 0, 0, w, h);
+    bitmap.close();
+    return await canvas.convertToBlob({ type: 'image/webp', quality: 0.8 });
+  } catch {
+    return null;
+  }
+}
+
 export function AttachmentImage({ handle }: Props) {
-  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [fullUrl, setFullUrl] = useState<string | null>(null);
+  const [thumbUrl, setThumbUrl] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [lightboxOpen, setLightboxOpen] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
-    let url: string | null = null;
+    const created: string[] = [];
     setError(null);
-    setBlobUrl(null);
+    setFullUrl(null);
+    setThumbUrl(null);
 
-    downloadAndDecryptAttachment({ client: supabase, handle })
+    const take = (blob: Blob): string => {
-      .then((blob) => {
+      const u = URL.createObjectURL(blob);
-        if (cancelled) return;
+      created.push(u);
-        url = URL.createObjectURL(blob);
+      return u;
-        setBlobUrl(url);
+    };
-      })
+
-      .catch((err: unknown) => {
+    // OPFS cache → decrypt → generate thumbnail for inline display.
+    // Lightbox swaps to the full blob when opened.
+    void (async () => {
+      const cached = await getCachedAttachment(handle.id);
+      let blob: Blob;
+      if (cached) {
+        blob = cached;
+      } else {
+        try {
+          blob = await downloadAndDecryptAttachment({ client: supabase, handle });
+          void putCachedAttachment(handle.id, blob);
+        } catch (err: unknown) {
           if (!cancelled) {
             setError(err instanceof Error ? err.message : 'download failed');
           }
-      });
+          return;
+        }
+      }
+      if (cancelled) return;
+      const full = take(blob);
+      setFullUrl(full);
+      const thumb = await makeThumbnail(blob);
+      if (cancelled) return;
+      if (thumb) {
+        setThumbUrl(take(thumb));
+      }
+    })();
 
     return () => {
       cancelled = true;
-      if (url) URL.revokeObjectURL(url);
+      for (const u of created) URL.revokeObjectURL(u);
     };
   }, [handle.id, handle.storagePath, handle.keyB64, handle.nonceB64]);
 
+  const blobUrl = thumbUrl ?? fullUrl;
+
   if (error) {
     return (
       <div className="mt-2 inline-flex items-center gap-2 rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs text-rose-200">
@@ -66,10 +127,11 @@ export function AttachmentImage({ handle }: Props) {
           src={blobUrl}
           alt="attachment"
           loading="lazy"
+          decoding="async"
           className="block h-auto max-h-80 w-auto max-w-full object-contain"
         />
       </button>
-      {lightboxOpen && <Lightbox url={blobUrl} onClose={() => setLightboxOpen(false)} />}
+      {lightboxOpen && fullUrl && <Lightbox url={fullUrl} onClose={() => setLightboxOpen(false)} />}
     </>
   );
 }

apps/desktop/src/components/AttachmentPdf.tsx

@@ -0,0 +1,120 @@
+import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
+import { useEffect, useState } from 'react';
+
+import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
+import { supabase } from '../lib/supabase';
+import { AlertIcon, SpinnerIcon } from './icons';
+
+interface Props {
+  handle: AttachmentHandle;
+}
+
+// PDF preview rendered via the browser's built-in PDF viewer (Chromium /
+// Safari both ship one). Embedding via <object> with a fallback link keeps
+// the implementation tiny — no pdf.js dependency.
+export function AttachmentPdf({ handle }: Props) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [expanded, setExpanded] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    let url: string | null = null;
+    setError(null);
+    setBlobUrl(null);
+
+    void (async () => {
+      const cached = await getCachedAttachment(handle.id);
+      if (cached) {
+        if (cancelled) return;
+        const typed = new Blob([cached], { type: 'application/pdf' });
+        url = URL.createObjectURL(typed);
+        setBlobUrl(url);
+        return;
+      }
+      try {
+        const blob = await downloadAndDecryptAttachment({ client: supabase, handle });
+        if (cancelled) return;
+        // Force the application/pdf type so the browser plugin engages.
+        const typed = new Blob([blob], { type: 'application/pdf' });
+        url = URL.createObjectURL(typed);
+        setBlobUrl(url);
+        void putCachedAttachment(handle.id, blob);
+      } catch (err: unknown) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'download failed');
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [handle.id, handle.storagePath, handle.keyB64, handle.nonceB64]);
+
+  if (error) {
+    return (
+      <div className="mt-2 inline-flex items-center gap-2 rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs text-rose-200">
+        <AlertIcon className="h-4 w-4" />
+        <span>{error}</span>
+      </div>
+    );
+  }
+
+  if (!blobUrl) {
+    return (
+      <div className="mt-2 flex h-24 w-[320px] items-center justify-center rounded-lg border border-line bg-surface-2 text-fg-muted">
+        <SpinnerIcon className="h-5 w-5" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-2 w-full max-w-[420px] overflow-hidden rounded-lg border border-line bg-surface-2">
+      <div className="flex items-center justify-between gap-2 border-b border-line bg-surface-3 px-3 py-2 text-xs">
+        <span className="flex items-center gap-2 truncate text-fg">
+          <PdfGlyph />
+          <span className="truncate">PDF · {formatSize(handle.sizeBytes)}</span>
+        </span>
+        <div className="flex gap-1">
+          <button
+            type="button"
+            onClick={() => setExpanded((v) => !v)}
+            className="cursor-pointer rounded-md border border-line bg-surface-2 px-2 py-0.5 text-[11px] text-fg hover:bg-surface-3"
+          >
+            {expanded ? 'Einklappen' : 'Vorschau'}
+          </button>
+          <a
+            href={blobUrl}
+            download={'attachment-' + handle.id.slice(0, 8) + '.pdf'}
+            className="cursor-pointer rounded-md border border-line bg-surface-2 px-2 py-0.5 text-[11px] text-fg no-underline hover:bg-surface-3"
+          >
+            Download
+          </a>
+        </div>
+      </div>
+      {expanded && (
+        <object data={blobUrl} type="application/pdf" className="block h-[420px] w-full">
+          <p className="p-4 text-xs text-fg-muted">
+            Vorschau nicht verfügbar — bitte herunterladen.
+          </p>
+        </object>
+      )}
+    </div>
+  );
+}
+
+function PdfGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
+      <path d="M3 2a1 1 0 011-1h6l3 3v10a1 1 0 01-1 1H4a1 1 0 01-1-1V2zm7 0v3h3l-3-3zM5 9h6v1H5V9zm0 2h6v1H5v-1zm0-4h2v1H5V7z" />
+    </svg>
+  );
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' KB';
+  return (bytes / 1024 / 1024).toFixed(1) + ' MB';
+}

apps/desktop/src/components/AttachmentVideo.tsx

@@ -0,0 +1,78 @@
+import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
+import { useEffect, useState } from 'react';
+
+import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
+import { supabase } from '../lib/supabase';
+import { AlertIcon, SpinnerIcon } from './icons';
+
+interface Props {
+  handle: AttachmentHandle;
+}
+
+// Decrypt the blob, render a native <video controls>. Loads on demand —
+// metadata-only preload so we don't burn bandwidth until the user hits play.
+export function AttachmentVideo({ handle }: Props) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    let url: string | null = null;
+    setError(null);
+    setBlobUrl(null);
+
+    void (async () => {
+      const cached = await getCachedAttachment(handle.id);
+      if (cached) {
+        if (cancelled) return;
+        url = URL.createObjectURL(cached);
+        setBlobUrl(url);
+        return;
+      }
+      try {
+        const blob = await downloadAndDecryptAttachment({ client: supabase, handle });
+        if (cancelled) return;
+        url = URL.createObjectURL(blob);
+        setBlobUrl(url);
+        void putCachedAttachment(handle.id, blob);
+      } catch (err: unknown) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'download failed');
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [handle.id, handle.storagePath, handle.keyB64, handle.nonceB64]);
+
+  if (error) {
+    return (
+      <div className="mt-2 inline-flex items-center gap-2 rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs text-rose-200">
+        <AlertIcon className="h-4 w-4" />
+        <span>{error}</span>
+      </div>
+    );
+  }
+
+  if (!blobUrl) {
+    return (
+      <div className="mt-2 flex h-32 w-[320px] items-center justify-center rounded-lg border border-line bg-surface-2 text-fg-muted">
+        <SpinnerIcon className="h-5 w-5" />
+      </div>
+    );
+  }
+
+  return (
+    <video
+      controls
+      preload="metadata"
+      src={blobUrl}
+      className="mt-2 block max-h-80 w-full max-w-[420px] rounded-lg border border-line bg-black"
+    >
+      <track kind="captions" />
+    </video>
+  );
+}

apps/desktop/src/components/Avatar.tsx

@@ -1,6 +1,8 @@
 // Reusable avatar that prefers an uploaded image and falls back to a coloured
 // letter circle. Use this everywhere the app needs to render a profile.
 
+import { useCachedAvatarUrl } from '../lib/avatarCache';
+
 interface Props {
   url?: string | null | undefined;
   displayName?: string | null | undefined;
@@ -18,10 +20,11 @@ export function Avatar({
   fallbackClass = 'bg-accent/20 text-accent',
   alt,
 }: Props) {
-  if (url) {
+  const effectiveUrl = useCachedAvatarUrl(url);
+  if (effectiveUrl) {
     return (
       <img
-        src={url}
+        src={effectiveUrl}
         alt={alt ?? displayName ?? ''}
         className={'shrink-0 rounded-full object-cover ' + className}
         draggable={false}

apps/desktop/src/components/BackupExportDialog.tsx

@@ -0,0 +1,306 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { type BackupBundle, exportDeviceBackupWithRecovery } from '../lib/deviceBackup';
+import { AlertIcon, CopyIcon, LockIcon, ShieldIcon, SpinnerIcon, XIcon } from './icons';
+
+interface Props {
+  open: boolean;
+  userId: string;
+  deviceId: string;
+  privateKey: Uint8Array;
+  onClose: () => void;
+}
+
+// Exports the device's private key + identity into a passphrase-protected
+// portable string. The user can store this string anywhere (password manager,
+// printed paper, encrypted file on a USB stick). Without it, losing local
+// storage on this install means losing all past conversation keys.
+export function BackupExportDialog({ open, userId, deviceId, privateKey, onClose }: Props) {
+  const { t } = useTranslation(['app']);
+  const [passphrase, setPassphrase] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [bundle, setBundle] = useState<BackupBundle | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [copiedRecovery, setCopiedRecovery] = useState(false);
+
+  const canGenerate = useMemo(() => {
+    return passphrase.length >= 8 && passphrase === confirm && !busy;
+  }, [passphrase, confirm, busy]);
+
+  const reset = useCallback(() => {
+    setPassphrase('');
+    setConfirm('');
+    setBundle(null);
+    setError(null);
+    setCopied(false);
+    setCopiedRecovery(false);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    reset();
+    onClose();
+  }, [reset, onClose]);
+
+  const handleGenerate = useCallback(async () => {
+    if (!canGenerate) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const b = await exportDeviceBackupWithRecovery({
+        userId,
+        deviceId,
+        privateKey,
+        passphrase,
+      });
+      setBundle(b);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }, [canGenerate, userId, deviceId, privateKey, passphrase]);
+
+  const copyText = async (text: string, marker: 'main' | 'recovery'): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(text);
+      if (marker === 'main') {
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+      } else {
+        setCopiedRecovery(true);
+        window.setTimeout(() => setCopiedRecovery(false), 1500);
+      }
+    } catch {
+      /* fall back — user can select manually */
+    }
+  };
+
+  const handleDownload = useCallback(() => {
+    if (!bundle) return;
+    const text =
+      '=== Passphrase backup ===\n' +
+      bundle.passphraseBackup +
+      '\n\n=== Recovery code ===\n' +
+      bundle.recoveryCode +
+      '\n\n=== Recovery backup (use with the recovery code) ===\n' +
+      bundle.recoveryBackup +
+      '\n';
+    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `chatapp-device-backup-${deviceId.slice(0, 8)}.txt`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [bundle, deviceId]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={t('app:backup.export_title', { defaultValue: 'Gerätesicherung erstellen' })}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={handleClose}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-line bg-surface-3 shadow-xl"
+      >
+        <header className="flex items-center justify-between border-b border-line px-5 py-3">
+          <div className="flex items-center gap-2">
+            <ShieldIcon className="h-4 w-4 text-accent" />
+            <h3 className="font-display text-sm font-semibold text-fg">
+              {t('app:backup.export_title', { defaultValue: 'Gerätesicherung erstellen' })}
+            </h3>
+          </div>
+          <button
+            type="button"
+            onClick={handleClose}
+            aria-label="Close"
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-fg-muted transition hover:bg-surface-2 hover:text-fg"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </header>
+
+        <div className="flex-1 overflow-y-auto p-5">
+          {!bundle ? (
+            <>
+              <p className="text-sm text-fg-muted">
+                {t('app:backup.export_explainer', {
+                  defaultValue:
+                    'Verschlüssele den Geräteschlüssel mit einer Passphrase. Ohne Passphrase UND Backup-String ist keine Wiederherstellung möglich.',
+                })}
+              </p>
+
+              <div className="mt-4 space-y-3">
+                <div className="space-y-1">
+                  <label className="block text-xs font-medium uppercase tracking-wide text-fg-muted">
+                    {t('app:backup.passphrase', { defaultValue: 'Passphrase' })}
+                  </label>
+                  <input
+                    type="password"
+                    autoFocus
+                    minLength={8}
+                    value={passphrase}
+                    onChange={(e) => setPassphrase(e.target.value)}
+                    placeholder="min. 8 Zeichen"
+                    className="w-full rounded-lg border border-line bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder-fg-muted transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <label className="block text-xs font-medium uppercase tracking-wide text-fg-muted">
+                    {t('app:backup.passphrase_confirm', { defaultValue: 'Passphrase wiederholen' })}
+                  </label>
+                  <input
+                    type="password"
+                    value={confirm}
+                    onChange={(e) => setConfirm(e.target.value)}
+                    className="w-full rounded-lg border border-line bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder-fg-muted transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
+                  />
+                </div>
+                {confirm.length > 0 && confirm !== passphrase && (
+                  <p className="text-xs text-rose-500 dark:text-rose-300">
+                    {t('app:backup.passphrase_mismatch', { defaultValue: 'Passphrasen stimmen nicht überein.' })}
+                  </p>
+                )}
+              </div>
+
+              <div className="mt-4 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-700 dark:text-amber-200">
+                <div className="flex items-start gap-2">
+                  <AlertIcon className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-300" />
+                  <span>
+                    {t('app:backup.export_warning', {
+                      defaultValue:
+                        'Anthropic: Backup + Passphrase sicher aufbewahren. Passphrase kann nicht wiederhergestellt werden.',
+                    })}
+                  </span>
+                </div>
+              </div>
+
+              {error && (
+                <p role="alert" className="mt-3 text-sm text-rose-600 dark:text-rose-200">
+                  {error}
+                </p>
+              )}
+            </>
+          ) : (
+            <>
+              <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-3 text-xs text-emerald-700 dark:text-emerald-200">
+                <div className="flex items-start gap-2">
+                  <LockIcon className="mt-0.5 h-4 w-4 shrink-0" />
+                  <span>
+                    {t('app:backup.export_success', {
+                      defaultValue:
+                        'Backup erstellt. Speichere diesen String + Passphrase in einem Passwortmanager oder drucke ihn aus.',
+                    })}
+                  </span>
+                </div>
+              </div>
+              <label className="mt-3 block text-xs font-medium uppercase tracking-wide text-fg-muted">
+                Backup-String
+              </label>
+              <textarea
+                readOnly
+                value={bundle.passphraseBackup}
+                rows={6}
+                onFocus={(e) => e.currentTarget.select()}
+                className="mt-1 w-full resize-none rounded-lg border border-line bg-surface-2 p-3 font-mono text-[11px] leading-relaxed text-fg"
+              />
+              <div className="mt-2 flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => void copyText(bundle.passphraseBackup, 'main')}
+                  className="inline-flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-line bg-surface-2 px-3 py-2 text-sm font-medium text-fg transition hover:bg-surface-3"
+                >
+                  <CopyIcon className="h-4 w-4" />
+                  <span>{copied ? 'Kopiert!' : 'Kopieren'}</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={handleDownload}
+                  className="inline-flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-line bg-surface-2 px-3 py-2 text-sm font-medium text-fg transition hover:bg-surface-3"
+                >
+                  Als Datei speichern (alles)
+                </button>
+              </div>
+
+              <div className="mt-5 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3">
+                <div className="flex items-start gap-2">
+                  <ShieldIcon className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-300" />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs font-semibold text-amber-700 dark:text-amber-200">
+                      Recovery-Code (Passphrase vergessen?)
+                    </p>
+                    <p className="mt-0.5 text-[11px] text-amber-700/80 dark:text-amber-200/80">
+                      Code separat aufbewahren. Mit dem Recovery-Backup unten lässt sich der Schlüssel
+                      ohne Passphrase wiederherstellen.
+                    </p>
+                    <p className="mt-2 select-all rounded bg-surface-3 px-2 py-1.5 font-mono text-sm tracking-widest text-fg">
+                      {bundle.recoveryCode}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <label className="mt-3 block text-xs font-medium uppercase tracking-wide text-fg-muted">
+                Recovery-Backup-String
+              </label>
+              <textarea
+                readOnly
+                value={bundle.recoveryBackup}
+                rows={6}
+                onFocus={(e) => e.currentTarget.select()}
+                className="mt-1 w-full resize-none rounded-lg border border-line bg-surface-2 p-3 font-mono text-[11px] leading-relaxed text-fg"
+              />
+              <button
+                type="button"
+                onClick={() => void copyText(bundle.recoveryBackup, 'recovery')}
+                className="mt-2 inline-flex w-full cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-line bg-surface-2 px-3 py-2 text-sm font-medium text-fg transition hover:bg-surface-3"
+              >
+                <CopyIcon className="h-4 w-4" />
+                <span>{copiedRecovery ? 'Kopiert!' : 'Recovery-Backup kopieren'}</span>
+              </button>
+            </>
+          )}
+        </div>
+
+        <footer className="flex items-center justify-end gap-2 border-t border-line bg-surface-2 px-5 py-3">
+          {!bundle ? (
+            <>
+              <button
+                type="button"
+                onClick={handleClose}
+                className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-2 text-sm text-fg transition hover:bg-surface-2"
+              >
+                {t('app:friends.action_cancel', { defaultValue: 'Abbrechen' })}
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleGenerate()}
+                disabled={!canGenerate}
+                className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-2 text-sm font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                {busy && <SpinnerIcon className="h-4 w-4" />}
+                <span>{t('app:backup.generate', { defaultValue: 'Backup erstellen' })}</span>
+              </button>
+            </>
+          ) : (
+            <button
+              type="button"
+              onClick={handleClose}
+              className="cursor-pointer rounded-md bg-accent px-3 py-2 text-sm font-semibold text-accent-fg transition hover:brightness-110"
+            >
+              {t('app:backup.done', { defaultValue: 'Fertig' })}
+            </button>
+          )}
+        </footer>
+      </div>
+    </div>
+  );
+}

apps/desktop/src/components/BackupPromptBanner.tsx

@@ -0,0 +1,122 @@
+import { loadDevicePrivateKey } from '@chat-app/shared/auth';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAuth } from '../context/AuthContext';
+import { devLocalSecretStore } from '../lib/secretStore';
+import { BackupExportDialog } from './BackupExportDialog';
+import { ShieldIcon, XIcon } from './icons';
+
+const DISMISS_KEY = 'chatapp.backup.prompt.dismissed';
+const SESSION_KEY = 'chatapp.backup.prompt';
+
+// Post-registration nudge: right after a fresh device provision we set
+// `chatapp.backup.prompt` in sessionStorage. This component reads it and
+// shows a floating "mach jetzt ein Backup" banner until the user either
+// creates one or explicitly dismisses (persisted in localStorage so we stop
+// nagging across reloads).
+export function BackupPromptBanner() {
+  const { t } = useTranslation(['app']);
+  const { profile, device } = useAuth();
+  const [visible, setVisible] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [privateKey, setPrivateKey] = useState<Uint8Array | null>(null);
+
+  useEffect(() => {
+    try {
+      if (window.localStorage.getItem(DISMISS_KEY) === '1') return;
+      if (window.sessionStorage.getItem(SESSION_KEY) !== '1') return;
+      setVisible(true);
+    } catch {
+      /* storage unavailable */
+    }
+  }, []);
+
+  const dismiss = useCallback((persist: boolean) => {
+    setVisible(false);
+    try {
+      window.sessionStorage.removeItem(SESSION_KEY);
+      if (persist) window.localStorage.setItem(DISMISS_KEY, '1');
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const openDialog = useCallback(async () => {
+    if (!profile?.userId || !device?.id) return;
+    const priv = await loadDevicePrivateKey(devLocalSecretStore, profile.userId, device.id);
+    if (!priv) return;
+    setPrivateKey(priv);
+    setDialogOpen(true);
+  }, [profile, device]);
+
+  const closeDialog = useCallback(() => {
+    setDialogOpen(false);
+    if (privateKey) {
+      for (let i = 0; i < privateKey.length; i++) privateKey[i] = 0;
+    }
+    setPrivateKey(null);
+    // After the user interacts with the dialog, drop the banner regardless
+    // of whether they actually completed the backup — they're aware now.
+    dismiss(true);
+  }, [privateKey, dismiss]);
+
+  if (!visible) return null;
+
+  return (
+    <>
+      <div
+        role="status"
+        className="fixed bottom-6 left-1/2 z-40 flex w-[min(92vw,520px)] -translate-x-1/2 items-start gap-3 rounded-2xl border border-amber-500/40 bg-amber-500/10 p-4 text-sm text-amber-800 shadow-xl backdrop-blur-md dark:text-amber-100"
+      >
+        <ShieldIcon className="mt-0.5 h-5 w-5 shrink-0 text-amber-600 dark:text-amber-300" />
+        <div className="min-w-0 flex-1">
+          <p className="font-semibold">
+            {t('app:backup.prompt_title', { defaultValue: 'Erstelle jetzt ein Geräte-Backup' })}
+          </p>
+          <p className="mt-0.5 text-xs text-amber-700/90 dark:text-amber-200/90">
+            {t('app:backup.prompt_body', {
+              defaultValue:
+                'Ohne Backup verlierst du Zugriff auf alte Nachrichten, wenn Browser oder Gerät ihren Speicher verlieren. Dauert 10 Sekunden.',
+            })}
+          </p>
+          <div className="mt-3 flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => void openDialog()}
+              className="cursor-pointer rounded-md bg-amber-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-amber-500"
+            >
+              {t('app:backup.prompt_create', { defaultValue: 'Jetzt erstellen' })}
+            </button>
+            <button
+              type="button"
+              onClick={() => dismiss(true)}
+              className="cursor-pointer rounded-md border border-amber-500/40 bg-transparent px-3 py-1.5 text-xs font-semibold text-amber-700 transition hover:bg-amber-500/15 dark:text-amber-200"
+            >
+              {t('app:backup.prompt_never', { defaultValue: 'Nicht mehr fragen' })}
+            </button>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={() => dismiss(false)}
+          aria-label={t('app:backup.prompt_dismiss', { defaultValue: 'Später' })}
+          className="cursor-pointer text-amber-600/70 transition hover:text-amber-600 dark:text-amber-200/70 dark:hover:text-amber-200"
+        >
+          <XIcon className="h-4 w-4" />
+        </button>
+      </div>
+
+      {dialogOpen && profile?.userId && device?.id && privateKey && (
+        <BackupExportDialog
+          open={dialogOpen}
+          userId={profile.userId}
+          deviceId={device.id}
+          privateKey={privateKey}
+          onClose={closeDialog}
+        />
+      )}
+    </>
+  );
+}
+

apps/desktop/src/components/BackupRestoreDialog.tsx

@@ -0,0 +1,86 @@
+import { useEffect } from 'react';
+
+import { DeviceRestore } from './DeviceRestore';
+import { AlertIcon, ShieldIcon, XIcon } from './icons';
+
+interface Props {
+  open: boolean;
+  userId: string;
+  onClose: () => void;
+}
+
+// Modal wrapper around DeviceRestore for the already-signed-in case. A
+// successful restore swaps the local device-identity for the one embedded
+// in the backup string — the app then hard-reloads so every hook
+// re-initialises against the restored keys (simpler than invalidating
+// supabase-realtime subscriptions, stronghold caches, livekit rooms, etc.
+// individually).
+export function BackupRestoreDialog({ open, userId, onClose }: Props) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Backup wiederherstellen"
+      className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/60 p-6 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="flex w-full max-w-md flex-col gap-4"
+      >
+        <div className="flex items-center justify-between rounded-lg border border-white/10 bg-ink-900/70 p-3 backdrop-blur-xl">
+          <div className="flex items-center gap-2">
+            <ShieldIcon className="h-4 w-4 text-brand-300" />
+            <h3 className="text-sm font-semibold text-white">
+              Gerät aus Backup wiederherstellen
+            </h3>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Schließen"
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-neutral-400 transition hover:bg-white/10 hover:text-white"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-100">
+          <AlertIcon className="mt-0.5 h-4 w-4 shrink-0 text-amber-300" />
+          <p className="min-w-0 flex-1">
+            Restore ersetzt das aktuelle Gerät durch das aus dem Backup.
+            Die App lädt danach neu. Nachrichten, die auf diesem Gerät seit
+            dem Backup eingegangen sind, sind erst wieder lesbar, nachdem
+            Peer-Geräte den Conversation-Key erneut für die wiederhergestellte
+            Device-ID wrappen.
+          </p>
+        </div>
+
+        <DeviceRestore
+          userId={userId}
+          onRestored={() => {
+            // Hard reload — cleanest way to reset every hook, supabase
+            // realtime channel, stronghold handle, and cached state.
+            window.location.reload();
+          }}
+        />
+      </div>
+    </div>
+  );
+}

apps/desktop/src/components/CallControls.tsx

@@ -1,10 +1,13 @@
 import { useTranslation } from 'react-i18next';
 
 import {
+  HeadphonesIcon,
+  HeadphonesOffIcon,
   MicIcon,
   MicOffIcon,
   MonitorShareIcon,
   MonitorStopIcon,
+  MusicIcon,
   PhoneOffIcon,
   UsersIcon,
   VideoIcon,
@@ -14,11 +17,16 @@ interface Props {
   muted: boolean;
   sharing: boolean;
   video: boolean;
+  deafened: boolean;
   onToggleMute: () => void;
   onToggleShare: () => void;
   onToggleVideo?: () => void;
+  onToggleDeafen: () => void;
   onHangup: () => void;
   onOpenParticipants?: () => void;
+  /** Toggle the in-call soundboard popover. Active = panel currently open. */
+  onToggleSoundboard?: () => void;
+  soundboardOpen?: boolean;
   /** Compact variant used inside the docked call (36px buttons). */
   compact?: boolean;
   /** Glass variant used when controls float on fullscreen cinema mode. */
@@ -31,11 +39,15 @@ export function CallControls({
   muted,
   sharing,
   video,
+  deafened,
   onToggleMute,
   onToggleShare,
   onToggleVideo,
+  onToggleDeafen,
   onHangup,
   onOpenParticipants,
+  onToggleSoundboard,
+  soundboardOpen = false,
   compact = false,
   glass = false,
   disabledMedia = false,
@@ -59,6 +71,24 @@ export function CallControls({
       >
         {muted ? <MicOffIcon className="h-5 w-5" /> : <MicIcon className="h-5 w-5" />}
       </CallButton>
+      <CallButton
+        label={
+          deafened
+            ? t('app:call.undeafen', { defaultValue: 'Ton wieder aktiv' })
+            : t('app:call.deafen', { defaultValue: 'Alle stumm' })
+        }
+        active={deafened}
+        activeTone="danger"
+        onClick={onToggleDeafen}
+        glass={glass}
+        className={btnSize}
+      >
+        {deafened ? (
+          <HeadphonesOffIcon className="h-5 w-5" />
+        ) : (
+          <HeadphonesIcon className="h-5 w-5" />
+        )}
+      </CallButton>
       {onToggleVideo && (
         <CallButton
           label={t('app:call.start_video', { defaultValue: 'Video' })}
@@ -91,6 +121,18 @@ export function CallControls({
           <MonitorShareIcon className="h-5 w-5" />
         )}
       </CallButton>
+      {onToggleSoundboard && (
+        <CallButton
+          label={t('app:soundboard.toggle', { defaultValue: 'Soundboard' })}
+          active={soundboardOpen}
+          activeTone="accent"
+          onClick={onToggleSoundboard}
+          glass={glass}
+          className={btnSize}
+        >
+          <MusicIcon className="h-5 w-5" />
+        </CallButton>
+      )}
       {onOpenParticipants && (
         <CallButton
           label={t('app:call.participants', { defaultValue: 'Teilnehmer' })}

apps/desktop/src/components/CallParticipantTile.tsx

@@ -1,4 +1,6 @@
-import { CrownIcon, LockIcon, MicOffIcon, MonitorShareIcon } from './icons';
+import { useEffect, useRef } from 'react';
+
+import { CrownIcon, HeadphonesOffIcon, LockIcon, MicOffIcon } from './icons';
 
 export type AvatarColorKey = 'violet' | 'amber' | 'rose' | 'teal';
 
@@ -41,14 +43,20 @@ export interface ParticipantTileProps {
   avatarUrl: string | null;
   me: boolean;
   muted: boolean;
+  /** Local-only: true when THIS user has muted everyone else via the deafen
+   *  toggle. Remote deafen state is not propagated, so only the own tile
+   *  ever carries a truthy value. */
+  deafened: boolean;
   speaking: boolean;
-  sharing: boolean;
   video: boolean;
   e2ee: boolean;
+  /** MediaStreamTrack for the participant's active camera, when `video` is
+   *  true. When null the tile falls back to the avatar placeholder. */
+  videoTrack?: MediaStreamTrack | null;
   size?: 'default' | 'small';
   focused?: boolean;
   onClick?: () => void;
-  onOpenScreenShare?: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
 }
 
 export function CallParticipantTile(props: ParticipantTileProps) {
@@ -56,14 +64,14 @@ export function CallParticipantTile(props: ParticipantTileProps) {
     displayName,
     me,
     muted,
+    deafened,
     speaking,
-    sharing,
     video,
     e2ee,
     size = 'default',
     focused = false,
     onClick,
-    onOpenScreenShare,
+    onContextMenu,
   } = props;
 
   const small = size === 'small';
@@ -76,6 +84,7 @@ export function CallParticipantTile(props: ParticipantTileProps) {
   return (
     <div
       onClick={onClick}
+      onContextMenu={onContextMenu}
       className={
         'relative flex flex-col overflow-hidden rounded-[14px] border bg-surface-3 transition ' +
         (onClick ? 'cursor-pointer ' : '') +
@@ -83,18 +92,21 @@ export function CallParticipantTile(props: ParticipantTileProps) {
         (small ? ' min-w-[140px]' : '')
       }
     >
-      {sharing ? (
+      {video ? (
-        <ScreenshareStub
-          displayName={displayName}
-          small={small}
-          onOpen={onOpenScreenShare}
-        />
-      ) : video ? (
         <VideoStub {...props} small={small} />
       ) : (
         <AudioContent {...props} small={small} />
       )}
 
+      {/* Speaking indicator visible regardless of content type (video or
+          audio). z-10 ensures it sits above the video element. */}
+      {speaking && (
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 z-10 rounded-[14px] border-[3px] border-emerald-400 shadow-[inset_0_0_18px_rgba(34,197,94,0.55)]"
+        />
+      )}
+
       <div className="pointer-events-none absolute inset-x-2 bottom-2 flex items-center justify-between gap-2 rounded-lg glass-chip px-2.5 py-1.5">
         <div className="flex min-w-0 items-center gap-1.5 text-xs font-semibold">
           {me && <CrownIcon className="h-3 w-3 shrink-0 text-amber-300" />}
@@ -114,13 +126,21 @@ export function CallParticipantTile(props: ParticipantTileProps) {
         </div>
         <div className="flex shrink-0 items-center gap-1">
           {muted && (
-            <span className="flex h-5 w-5 items-center justify-center rounded-md bg-rose-500/80 text-white">
+            <span
+              aria-label="Mikro stumm"
+              title="Mikro stumm"
+              className="flex h-5 w-5 items-center justify-center rounded-md bg-rose-500/80 text-white"
+            >
               <MicOffIcon className="h-3 w-3" />
             </span>
           )}
-          {sharing && (
+          {deafened && (
-            <span className="flex h-5 w-5 items-center justify-center rounded-md bg-emerald-500/80 text-white">
+            <span
-              <MonitorShareIcon className="h-3 w-3" />
+              aria-label="Ton aus"
+              title="Ton aus"
+              className="flex h-5 w-5 items-center justify-center rounded-md bg-rose-500/80 text-white"
+            >
+              <HeadphonesOffIcon className="h-3 w-3" />
             </span>
           )}
         </div>
@@ -179,11 +199,45 @@ function VideoStub({
   userId,
   displayName,
   avatarUrl,
+  videoTrack,
+  me,
   small,
 }: ParticipantTileProps & { small: boolean }) {
-  // Video capture playback is out of scope for this UI iteration — show the
+  const videoRef = useRef<HTMLVideoElement | null>(null);
-  // audio-avatar gradient background as a placeholder so the layout is stable
+  useEffect(() => {
-  // when a participant enables video.
+    const el = videoRef.current;
+    if (!el || !videoTrack) return;
+    el.srcObject = new MediaStream([videoTrack]);
+    return () => {
+      if (el.srcObject) {
+        (el.srcObject as MediaStream).getTracks().forEach((t) => {
+          // Don't stop the live track — other consumers may still need it.
+          // Just detach from this element.
+          void t;
+        });
+        el.srcObject = null;
+      }
+    };
+  }, [videoTrack]);
+
+  if (videoTrack) {
+    return (
+      <div className="relative flex min-h-0 flex-1 items-center justify-center bg-black">
+        <video
+          ref={videoRef}
+          autoPlay
+          playsInline
+          muted
+          className={
+            'h-full w-full object-cover ' +
+            (me ? 'scale-x-[-1]' : '') /* mirror local preview */
+          }
+        />
+      </div>
+    );
+  }
+
+  // Camera flag true but no track yet (publishing / subscribing race).
   const key = colorKeyFor(userId);
   const colors = AVATAR_COLORS[key];
   const letter = displayName.trim().charAt(0).toUpperCase() || '?';
@@ -206,49 +260,3 @@ function VideoStub({
   );
 }
 
-interface ScreenshareStubProps {
-  displayName: string;
-  small: boolean;
-  onOpen?: (() => void) | undefined;
-}
-
-// Fake browser window placeholder — click to open the real <video> viewer.
-// Matches the design spec's "screenshare-stub" look.
-function ScreenshareStub({ displayName, small, onOpen }: ScreenshareStubProps) {
-  return (
-    <button
-      type="button"
-      onClick={
-        onOpen
-          ? (e) => {
-              e.stopPropagation();
-              onOpen();
-            }
-          : undefined
-      }
-      aria-label={`${displayName} teilt Bildschirm`}
-      className="relative flex min-h-0 flex-1 cursor-pointer items-center justify-center bg-ink-900 p-3 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
-    >
-      <div className="h-[85%] w-[90%] overflow-hidden rounded-lg border border-white/10 bg-ink-700">
-        <div className="flex h-[20px] items-center gap-1 bg-ink-600 px-2">
-          <span className="h-1.5 w-1.5 rounded-full bg-ink-500" />
-          <span className="h-1.5 w-1.5 rounded-full bg-ink-500" />
-          <span className="h-1.5 w-1.5 rounded-full bg-ink-500" />
-        </div>
-        <div className={'flex flex-col gap-2 ' + (small ? 'gap-[3px] p-1.5' : 'p-3.5')}>
-          <div className={'w-[60%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
-          <div className={'w-[80%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
-          <div className={'w-[40%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
-          <div className={'my-1 rounded ' + (small ? 'h-[14px]' : 'h-10') + ' bg-accent/30'} />
-          <div className={'w-[70%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
-        </div>
-      </div>
-      {!small && (
-        <div className="absolute left-3 top-3 flex items-center gap-1.5 glass-chip rounded-lg px-2.5 py-1 text-[10px] font-medium">
-          <MonitorShareIcon className="h-3 w-3" />
-          <span>{displayName} teilt Bildschirm</span>
-        </div>
-      )}
-    </button>
-  );
-}

apps/desktop/src/components/CallUI.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { useAuth } from '../context/AuthContext';
 import { useCall } from '../context/CallContext';
 import { useConversationsContext } from '../context/ConversationsContext';
 import { useFriendshipsContext } from '../context/FriendshipsContext';
@@ -17,12 +18,17 @@ import { LockIcon, MonitorShareIcon, PhoneIcon, PhoneOffIcon } from './icons';
 //     different route.
 export function CallUI() {
   const { state } = useCall();
+  const { profile } = useAuth();
+  const dnd = profile?.presenceState === 'dnd';
 
   useEffect(() => {
+    // DND silences only the *incoming* ring — outgoing stays audible because
+    // the user initiated that call themselves. The incoming-call panel still
+    // appears visually; only the audible ring is suppressed.
     if (state.kind === 'outgoing') ringtone.start('outgoing');
-    else if (state.kind === 'incoming') ringtone.start('incoming');
+    else if (state.kind === 'incoming' && !dnd) ringtone.start('incoming');
     else ringtone.stop();
-  }, [state.kind]);
+  }, [state.kind, dnd]);
 
   useEffect(() => {
     return () => ringtone.stop();

apps/desktop/src/components/ConversationHeader.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useAuth } from '../context/AuthContext';
 import { useCall } from '../context/CallContext';
 import { useCallPresence } from '../lib/useCallPresence';
+import type { PeerPresence } from '../lib/usePeerPresence';
 import { Avatar } from './Avatar';
 import {
   InfoIcon,
@@ -26,11 +27,12 @@ const PRESENCE_DOT: Record<PresenceState, string> = {
 
 interface Props {
   conversation: ConversationSummary | null;
-  peerPresence: PresenceState | null;
+  peerPresence: PeerPresence | null;
   onInfoClick?: () => void;
+  onSearchClick?: () => void;
 }
 
-export function ConversationHeader({ conversation, peerPresence, onInfoClick }: Props) {
+export function ConversationHeader({ conversation, peerPresence, onInfoClick, onSearchClick }: Props) {
   if (!conversation) {
     return <header className="h-[57px] border-b border-line px-6 py-3" aria-busy="true" />;
   }
@@ -41,6 +43,7 @@ export function ConversationHeader({ conversation, peerPresence, onInfoClick }:
         conversation={conversation}
         peerPresence={peerPresence}
         {...(onInfoClick ? { onInfoClick } : {})}
+        {...(onSearchClick ? { onSearchClick } : {})}
       />
       <ActiveCallBanner conversationId={conversation.id} />
     </>
@@ -49,11 +52,12 @@ export function ConversationHeader({ conversation, peerPresence, onInfoClick }:
 
 interface HeaderBarProps {
   conversation: ConversationSummary;
-  peerPresence: PresenceState | null;
+  peerPresence: PeerPresence | null;
   onInfoClick?: () => void;
+  onSearchClick?: () => void;
 }
 
-function HeaderBar({ conversation, peerPresence, onInfoClick }: HeaderBarProps) {
+function HeaderBar({ conversation, peerPresence, onInfoClick, onSearchClick }: HeaderBarProps) {
   const { t } = useTranslation(['app']);
 
   const isDm = conversation.type === 'dm';
@@ -62,8 +66,18 @@ function HeaderBar({ conversation, peerPresence, onInfoClick }: HeaderBarProps)
   const peerAvatar = isDm ? (conversation.peer?.avatarUrl ?? null) : (conversation.avatarUrl ?? null);
 
   // Hide presence when peer chose invisible — reciprocal privacy.
-  const showPresence = isDm && peerPresence && peerPresence !== 'invisible';
+  const peerState = peerPresence?.state ?? null;
-  const presenceLabel = peerPresence ? t('app:presence.' + peerPresence) : '';
+  const showPresence = isDm && peerState && peerState !== 'invisible';
+  // Subtitle priority: custom status_message when online (or idle/dnd), else
+  // the localized presence label. Offline always wins → just "Offline".
+  const presenceLabel = (() => {
+    if (!peerState) return '';
+    if (peerState === 'offline') return t('app:presence.offline');
+    if (peerPresence?.statusMessage && peerPresence.statusMessage.trim().length > 0) {
+      return peerPresence.statusMessage.trim();
+    }
+    return t('app:presence.' + peerState);
+  })();
 
   return (
     <header className="flex items-center gap-3 border-b border-line bg-surface-3 px-6 py-3">
@@ -77,12 +91,12 @@ function HeaderBar({ conversation, peerPresence, onInfoClick }: HeaderBarProps)
             <UsersIcon className="h-5 w-5" />
           </div>
         )}
-        {showPresence && peerPresence && (
+        {showPresence && peerState && (
           <span
             aria-hidden="true"
             className={
               'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full ring-2 ring-surface-3 ' +
-              PRESENCE_DOT[peerPresence]
+              PRESENCE_DOT[peerState]
             }
           />
         )}
@@ -108,7 +122,11 @@ function HeaderBar({ conversation, peerPresence, onInfoClick }: HeaderBarProps)
         </p>
       </div>
 
-      <HeaderActionButton label={t('app:chats.search', { defaultValue: 'Suche' })} icon={SearchIcon} />
+      <HeaderActionButton
+        label={t('app:chats.search', { defaultValue: 'Suche' })}
+        icon={SearchIcon}
+        {...(onSearchClick ? { onClick: onSearchClick } : {})}
+      />
       <CallHeaderButton conversationId={conversation.id} kind="audio" />
       <CallHeaderButton conversationId={conversation.id} kind="video" />
       {!isDm && onInfoClick && (
@@ -203,17 +221,14 @@ function ActiveCallBanner({ conversationId }: { conversationId: string }) {
   const justLeft = state.kind === 'idle' && lastCallConversationId === conversationId;
 
   // Once presence confirms the room is empty, drop the "just left" hint so the
-  // banner hides cleanly instead of sticking forever.
+  // banner hides cleanly instead of sticking forever. Grace window handles the
+  // brief gap between hangup and presence re-sync so we don't flicker.
   useEffect(() => {
     if (!justLeft) return;
-    if (active.length === 0) return;
+    if (othersIn.length > 0) return; // still live — keep banner
-    if (othersIn.length === 0) {
-      // Active reports only us (or something stale) — wait, then dismiss.
     const id = window.setTimeout(() => dismissLastCall(), 3000);
     return () => window.clearTimeout(id);
-    }
+  }, [justLeft, othersIn.length, dismissLastCall]);
-    return undefined;
-  }, [justLeft, active.length, othersIn.length, dismissLastCall]);
 
   if (iAmIn) return null;
   if (othersIn.length === 0 && !justLeft) return null;

apps/desktop/src/components/ConversationRowMenu.tsx

@@ -0,0 +1,264 @@
+import {
+  muteDurationToIso,
+  setConversationArchived,
+  setConversationMutedUntil,
+} from '@chat-app/shared/chat';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+
+import { supabase } from '../lib/supabase';
+import { ArchiveIcon, BellIcon, BellOffIcon, MoreVerticalIcon } from './icons';
+
+interface Props {
+  conversationId: string;
+  archived: boolean;
+  mutedUntil: string | null;
+}
+
+interface MuteOption {
+  key: string;
+  labelKey: string;
+  labelDefault: string;
+  minutes: number | null;
+}
+
+// Muted-forever sentinel ≈ 100 years. UI treats any future timestamp as muted
+// until that moment; 100y is indistinguishable from "forever" at the UX level
+// without requiring a dedicated `bool muted_forever` column.
+const FOREVER_MINUTES = 100 * 365 * 24 * 60;
+
+const MUTE_OPTIONS: MuteOption[] = [
+  { key: '1h', labelKey: 'app:chats.mute_1h', labelDefault: '1 Stunde', minutes: 60 },
+  { key: '8h', labelKey: 'app:chats.mute_8h', labelDefault: '8 Stunden', minutes: 8 * 60 },
+  { key: '24h', labelKey: 'app:chats.mute_24h', labelDefault: '24 Stunden', minutes: 24 * 60 },
+  { key: '1w', labelKey: 'app:chats.mute_1w', labelDefault: '1 Woche', minutes: 7 * 24 * 60 },
+  {
+    key: 'forever',
+    labelKey: 'app:chats.mute_forever',
+    labelDefault: 'Bis auf Weiteres',
+    minutes: FOREVER_MINUTES,
+  },
+];
+
+interface MenuPos {
+  top: number;
+  left: number;
+}
+
+// Per-conversation row context-menu. Renders via portal so the submenu can
+// escape the sidebar's `overflow-y-auto` clipping context. Position is
+// computed from the trigger's bounding rect — menu anchors right-aligned
+// under the trigger so it doesn't push off-screen on narrow windows.
+export function ConversationRowMenu({ conversationId, archived, mutedUntil }: Props) {
+  const { t } = useTranslation(['app']);
+  const [open, setOpen] = useState(false);
+  const [submenuOpen, setSubmenuOpen] = useState<'mute' | null>(null);
+  const [menuPos, setMenuPos] = useState<MenuPos | null>(null);
+  const [submenuPos, setSubmenuPos] = useState<MenuPos | null>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const muteItemRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onDocClick(e: MouseEvent) {
+      const target = e.target as Node;
+      if (triggerRef.current?.contains(target)) return;
+      if (menuRef.current?.contains(target)) return;
+      setOpen(false);
+      setSubmenuOpen(null);
+    }
+    function onEsc(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        setSubmenuOpen(null);
+      }
+    }
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onEsc);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onEsc);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      setMenuPos(null);
+      setSubmenuPos(null);
+      return;
+    }
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    // Anchor: right edge aligns with trigger's right edge, menu hangs below.
+    const menuWidth = 208;
+    setMenuPos({
+      top: rect.bottom + 4,
+      left: Math.max(8, rect.right - menuWidth),
+    });
+  }, [open]);
+
+  useEffect(() => {
+    if (submenuOpen !== 'mute') {
+      setSubmenuPos(null);
+      return;
+    }
+    const rect = muteItemRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const submenuWidth = 192;
+    const viewportWidth = window.innerWidth;
+    // Prefer right of the item. Flip to left when it would overflow viewport.
+    const wantLeft = rect.right + 4;
+    const flip = wantLeft + submenuWidth > viewportWidth - 8;
+    setSubmenuPos({
+      top: rect.top,
+      left: flip ? rect.left - submenuWidth - 4 : wantLeft,
+    });
+  }, [submenuOpen]);
+
+  const isMuted =
+    mutedUntil !== null && new Date(mutedUntil).getTime() > Date.now();
+
+  const handleArchive = useCallback(
+    async (next: boolean) => {
+      setOpen(false);
+      try {
+        await setConversationArchived(supabase, conversationId, next);
+      } catch (err: unknown) {
+        console.error('archive toggle failed', err);
+      }
+    },
+    [conversationId],
+  );
+
+  const handleMute = useCallback(
+    async (minutes: number | null) => {
+      setOpen(false);
+      setSubmenuOpen(null);
+      try {
+        await setConversationMutedUntil(
+          supabase,
+          conversationId,
+          muteDurationToIso(minutes),
+        );
+      } catch (err: unknown) {
+        console.error('mute toggle failed', err);
+      }
+    },
+    [conversationId],
+  );
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-label={t('app:chats.row_menu', { defaultValue: 'Aktionen' })}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen((v) => !v);
+        }}
+        onMouseDown={(e) => e.stopPropagation()}
+        className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-fg-muted opacity-0 transition group-hover:opacity-100 hover:bg-surface-3 hover:text-fg focus:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+      >
+        <MoreVerticalIcon className="h-4 w-4" />
+      </button>
+
+      {open &&
+        menuPos &&
+        createPortal(
+          <div
+            ref={menuRef}
+            role="menu"
+            style={{ top: menuPos.top, left: menuPos.left }}
+            className="fixed z-50 w-52 rounded-lg border border-line bg-surface-3 p-1 shadow-xl"
+          >
+            <MenuItem
+              icon={<ArchiveIcon className="h-4 w-4" />}
+              label={
+                archived
+                  ? t('app:chats.unarchive', { defaultValue: 'Entarchivieren' })
+                  : t('app:chats.archive', { defaultValue: 'Archivieren' })
+              }
+              onClick={() => void handleArchive(!archived)}
+            />
+            <MenuItem
+              ref={muteItemRef}
+              icon={
+                isMuted ? (
+                  <BellOffIcon className="h-4 w-4" />
+                ) : (
+                  <BellIcon className="h-4 w-4" />
+                )
+              }
+              label={
+                isMuted
+                  ? t('app:chats.unmute', { defaultValue: 'Stummschaltung aufheben' })
+                  : t('app:chats.mute', { defaultValue: 'Stummschalten' })
+              }
+              onClick={() => {
+                if (isMuted) void handleMute(null);
+                else setSubmenuOpen((v) => (v === 'mute' ? null : 'mute'));
+              }}
+              hasSubmenu={!isMuted}
+            />
+          </div>,
+          document.body,
+        )}
+
+      {open &&
+        submenuOpen === 'mute' &&
+        submenuPos &&
+        createPortal(
+          <div
+            role="menu"
+            style={{ top: submenuPos.top, left: submenuPos.left }}
+            className="fixed z-50 w-48 rounded-lg border border-line bg-surface-3 p-1 shadow-xl"
+          >
+            {MUTE_OPTIONS.map((opt) => (
+              <MenuItem
+                key={opt.key}
+                label={t(opt.labelKey, { defaultValue: opt.labelDefault })}
+                onClick={() => void handleMute(opt.minutes)}
+              />
+            ))}
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}
+
+interface MenuItemProps {
+  icon?: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  hasSubmenu?: boolean;
+}
+
+// React 18 requires forwardRef for function components to receive refs —
+// without it the `ref` prop is stripped before reaching the component and
+// measurement-dependent submenus never position.
+const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(
+  ({ icon, label, onClick, hasSubmenu }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      role="menuitem"
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+      }}
+      onMouseDown={(e) => e.stopPropagation()}
+      className="flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm text-fg transition hover:bg-surface-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+    >
+      {icon && <span className="shrink-0 text-fg-muted">{icon}</span>}
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {hasSubmenu && <span className="shrink-0 text-xs text-fg-muted">›</span>}
+    </button>
+  ),
+);
+MenuItem.displayName = 'MenuItem';

apps/desktop/src/components/CrashToast.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { type CrashEntry, subscribeCrashes } from '../lib/crashRecovery';
+import { AlertIcon, XIcon } from './icons';
+
+const VISIBLE_MS = 7_000;
+const MAX_STACK = 3;
+
+// Bottom-right stack of toasts for uncaught errors. Auto-dismisses each
+// entry after VISIBLE_MS. The user can X-out earlier.
+export function CrashToast() {
+  const [entries, setEntries] = useState<CrashEntry[]>([]);
+
+  useEffect(
+    () =>
+      subscribeCrashes((entry) => {
+        setEntries((prev) => [...prev.slice(-(MAX_STACK - 1)), entry]);
+      }),
+    [],
+  );
+
+  useEffect(() => {
+    if (entries.length === 0) return;
+    const latest = entries[entries.length - 1]!;
+    const id = window.setTimeout(() => {
+      setEntries((prev) => prev.filter((e) => e.id !== latest.id));
+    }, VISIBLE_MS);
+    return () => window.clearTimeout(id);
+  }, [entries]);
+
+  if (entries.length === 0) return null;
+
+  return createPortal(
+    <div
+      role="region"
+      aria-label="Fehler"
+      className="pointer-events-none fixed bottom-4 right-4 z-[100] flex flex-col gap-2"
+    >
+      {entries.map((entry) => (
+        <div
+          key={entry.id}
+          role="alert"
+          className="pointer-events-auto flex max-w-sm items-start gap-2 rounded-lg border border-rose-500/40 bg-rose-500/10 p-3 text-sm text-rose-700 shadow-xl backdrop-blur-sm dark:text-rose-100"
+        >
+          <AlertIcon className="mt-0.5 h-4 w-4 shrink-0" />
+          <div className="min-w-0 flex-1">
+            <p className="text-xs font-semibold uppercase tracking-wider">
+              {entry.source === 'promise' ? 'Promise-Fehler' : 'Unerwarteter Fehler'}
+            </p>
+            <p className="mt-0.5 break-words text-xs">{entry.message}</p>
+          </div>
+          <button
+            type="button"
+            aria-label="Schließen"
+            onClick={() =>
+              setEntries((prev) => prev.filter((e) => e.id !== entry.id))
+            }
+            className="shrink-0 cursor-pointer rounded-md p-1 text-rose-700 transition hover:bg-rose-500/20 dark:text-rose-100"
+          >
+            <XIcon className="h-3 w-3" />
+          </button>
+        </div>
+      ))}
+    </div>,
+    document.body,
+  );
+}

apps/desktop/src/components/DeviceRestore.tsx

@@ -0,0 +1,190 @@
+import {
+  type DeviceRecord,
+  restoreDeviceFromServerRecord,
+} from '@chat-app/shared/auth';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  decodePrivateKeyFromBackup,
+  importDeviceBackup,
+  normalizeRecoveryCode,
+} from '../lib/deviceBackup';
+import { devLocalSecretStore } from '../lib/secretStore';
+import { supabase } from '../lib/supabase';
+import { writeLocalDeviceId } from '../lib/device';
+import { AlertIcon, ArrowRightIcon, LockIcon, ShieldIcon, SpinnerIcon } from './icons';
+
+interface Props {
+  userId: string;
+  onRestored: (device: DeviceRecord) => void;
+}
+
+// Restores a device from a user-provided backup string. The backup embeds
+// userId + deviceId + X25519 private key; we verify userId matches the current
+// session, confirm the device row still exists server-side, and then re-seed
+// the local vault + cached deviceId so the app treats this install as the
+// original device (conv-key bundles stay valid, no "awaiting" state).
+export function DeviceRestore({ userId, onRestored }: Props) {
+  const { t } = useTranslation(['app', 'errors']);
+  const [backup, setBackup] = useState('');
+  const [passphrase, setPassphrase] = useState('');
+  const [mode, setMode] = useState<'passphrase' | 'recovery'>('passphrase');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!backup.trim() || passphrase.length < 1 || busy) return;
+      setBusy(true);
+      setError(null);
+      let privateKey: Uint8Array | null = null;
+      try {
+        const secret =
+          mode === 'recovery' ? normalizeRecoveryCode(passphrase) : passphrase;
+        const payload = await importDeviceBackup(backup.trim(), secret);
+        privateKey = decodePrivateKeyFromBackup(payload);
+
+        const device = await restoreDeviceFromServerRecord({
+          client: supabase,
+          secretStore: devLocalSecretStore,
+          userId: payload.userId,
+          deviceId: payload.deviceId,
+          privateKey,
+        });
+
+        // Cache deviceId locally so findExistingDevice picks it up on next load.
+        writeLocalDeviceId(userId, device.id);
+
+        onRestored(device);
+      } catch (err: unknown) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        if (privateKey) {
+          for (let i = 0; i < privateKey.length; i++) privateKey[i] = 0;
+        }
+        setBusy(false);
+      }
+    },
+    [backup, passphrase, mode, userId, onRestored, busy],
+  );
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="w-full max-w-md animate-slide-up rounded-2xl border border-white/10 bg-ink-900/70 p-7 shadow-glow backdrop-blur-xl sm:p-8"
+    >
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/20 ring-1 ring-emerald-400/30">
+          <ShieldIcon className="h-5 w-5 text-emerald-300" />
+        </div>
+        <div>
+          <h2 className="font-display text-lg font-semibold text-white">
+            {t('app:backup.restore_title', { defaultValue: 'Backup wiederherstellen' })}
+          </h2>
+          <p className="text-xs text-neutral-400">
+            {t('app:backup.restore_subtitle', {
+              defaultValue: 'Bringe einen zuvor erstellten Backup-String + Passphrase mit.',
+            })}
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-6 space-y-3">
+        <div className="space-y-1">
+          <label className="block text-xs font-medium uppercase tracking-wide text-neutral-400">
+            {t('app:backup.backup_string', { defaultValue: 'Backup-String' })}
+          </label>
+          <textarea
+            required
+            rows={5}
+            value={backup}
+            onChange={(e) => setBackup(e.target.value)}
+            placeholder="chatapp-backup-v1…"
+            className="w-full resize-none rounded-lg border border-white/10 bg-ink-800 px-3 py-2.5 font-mono text-[11px] leading-relaxed text-white placeholder-neutral-500 transition focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/40"
+          />
+        </div>
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <label className="block text-xs font-medium uppercase tracking-wide text-neutral-400">
+              {mode === 'passphrase' ? 'Passphrase' : 'Recovery-Code'}
+            </label>
+            <button
+              type="button"
+              onClick={() => {
+                setMode((m) => (m === 'passphrase' ? 'recovery' : 'passphrase'));
+                setPassphrase('');
+                setError(null);
+              }}
+              className="cursor-pointer text-[11px] font-semibold text-brand-300 hover:underline"
+            >
+              {mode === 'passphrase'
+                ? 'Passphrase vergessen? Recovery-Code nutzen'
+                : 'Stattdessen Passphrase eingeben'}
+            </button>
+          </div>
+          <input
+            type={mode === 'passphrase' ? 'password' : 'text'}
+            required
+            value={passphrase}
+            onChange={(e) => setPassphrase(e.target.value)}
+            placeholder={mode === 'recovery' ? 'XXXXXX-XXXXXX-XXXXXX-XXXXXX' : ''}
+            spellCheck={false}
+            autoComplete={mode === 'recovery' ? 'off' : 'current-password'}
+            className={
+              'w-full rounded-lg border border-white/10 bg-ink-800 px-3 py-2.5 text-sm text-white placeholder-neutral-500 transition focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/40 ' +
+              (mode === 'recovery' ? 'font-mono tracking-widest' : '')
+            }
+          />
+          {mode === 'recovery' && (
+            <p className="text-[11px] text-neutral-500">
+              Stattdessen den Recovery-Backup-String oben einfügen.
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="mt-5 rounded-lg border border-brand-500/20 bg-brand-500/10 p-3 text-xs text-brand-100">
+        <div className="flex items-start gap-2">
+          <LockIcon className="mt-0.5 h-4 w-4 shrink-0 text-brand-300" />
+          <span className="min-w-0 flex-1 break-words">
+            {t('app:backup.restore_hint', {
+              defaultValue:
+                'Nach Wiederherstellung übernimmt dieses Gerät die alte Identität — existierende Nachrichten sind wieder entschlüsselbar.',
+            })}
+          </span>
+        </div>
+      </div>
+
+      <button
+        type="submit"
+        disabled={busy || backup.trim().length === 0 || passphrase.length === 0}
+        aria-busy={busy}
+        className="group mt-6 inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-gradient-to-br from-emerald-400 to-emerald-600 px-4 py-3 text-sm font-semibold text-white shadow-glow transition hover:from-emerald-300 hover:to-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400/60 focus:ring-offset-2 focus:ring-offset-ink-900 disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        {busy ? (
+          <>
+            <SpinnerIcon className="h-4 w-4" />
+            <span>{t('app:backup.restoring', { defaultValue: 'Wiederherstellen…' })}</span>
+          </>
+        ) : (
+          <>
+            <span>{t('app:backup.restore_cta', { defaultValue: 'Gerät wiederherstellen' })}</span>
+            <ArrowRightIcon className="h-4 w-4 transition group-hover:translate-x-0.5" />
+          </>
+        )}
+      </button>
+
+      {error && (
+        <div
+          role="alert"
+          className="mt-4 flex items-start gap-3 rounded-lg border border-rose-500/20 bg-rose-500/10 p-3 text-sm text-rose-100"
+        >
+          <AlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-rose-400" />
+          <p className="min-w-0 flex-1 break-words">{error}</p>
+        </div>
+      )}
+    </form>
+  );
+}

apps/desktop/src/components/EmojiPicker.tsx

@@ -0,0 +1,408 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+interface EmojiEntry {
+  e: string;
+  k: string[]; // search keywords (incl. name)
+}
+
+interface Category {
+  label: string;
+  entries: EmojiEntry[];
+}
+
+// Curated emoji set — small enough to stay fast without a dependency, wide
+// enough to cover everyday messaging. Keywords are the primary search
+// surface; the emoji character itself is also matched so a user typing ❤️
+// literally finds it.
+const CATEGORIES: Category[] = [
+  {
+    label: 'Smileys',
+    entries: [
+      { e: '😀', k: ['grin', 'smile', 'happy'] },
+      { e: '😃', k: ['smile', 'happy'] },
+      { e: '😄', k: ['smile', 'laugh'] },
+      { e: '😁', k: ['grin', 'smile'] },
+      { e: '😆', k: ['laugh', 'lol'] },
+      { e: '😅', k: ['sweat', 'nervous', 'laugh'] },
+      { e: '🤣', k: ['lol', 'rofl', 'laugh'] },
+      { e: '😂', k: ['joy', 'laugh', 'tears'] },
+      { e: '🙂', k: ['smile', 'slight'] },
+      { e: '🙃', k: ['upside', 'irony'] },
+      { e: '😉', k: ['wink'] },
+      { e: '😊', k: ['blush', 'smile'] },
+      { e: '😇', k: ['angel', 'innocent'] },
+      { e: '🥰', k: ['love', 'hearts'] },
+      { e: '😍', k: ['love', 'heart eyes'] },
+      { e: '🤩', k: ['star', 'excited'] },
+      { e: '😘', k: ['kiss'] },
+      { e: '😗', k: ['kiss'] },
+      { e: '😚', k: ['kiss'] },
+      { e: '😙', k: ['kiss'] },
+      { e: '🥲', k: ['tear', 'smile'] },
+      { e: '😋', k: ['yum', 'tasty'] },
+      { e: '😛', k: ['tongue'] },
+      { e: '😜', k: ['tongue', 'wink'] },
+      { e: '🤪', k: ['zany', 'silly'] },
+      { e: '😝', k: ['tongue'] },
+      { e: '🤑', k: ['money'] },
+      { e: '🤗', k: ['hug'] },
+      { e: '🤭', k: ['giggle', 'shy'] },
+      { e: '🤫', k: ['shush', 'quiet'] },
+      { e: '🤔', k: ['think'] },
+      { e: '🤐', k: ['zip', 'quiet'] },
+      { e: '🤨', k: ['raise brow'] },
+      { e: '😐', k: ['neutral'] },
+      { e: '😑', k: ['expressionless'] },
+      { e: '😶', k: ['speechless'] },
+      { e: '😏', k: ['smirk'] },
+      { e: '😒', k: ['unamused'] },
+      { e: '🙄', k: ['eye roll'] },
+      { e: '😬', k: ['grimace', 'awkward'] },
+      { e: '🤥', k: ['lying'] },
+      { e: '😔', k: ['sad', 'pensive'] },
+      { e: '😪', k: ['sleepy'] },
+      { e: '😴', k: ['sleep'] },
+      { e: '😷', k: ['mask', 'sick'] },
+      { e: '🤒', k: ['sick', 'fever'] },
+      { e: '🤕', k: ['injured'] },
+      { e: '🤢', k: ['nauseated'] },
+      { e: '🤮', k: ['vomit'] },
+      { e: '🤧', k: ['sneeze'] },
+      { e: '🥵', k: ['hot'] },
+      { e: '🥶', k: ['cold'] },
+      { e: '🥴', k: ['dizzy', 'woozy'] },
+      { e: '😵', k: ['dizzy'] },
+      { e: '🤯', k: ['mind blown'] },
+      { e: '🤠', k: ['cowboy'] },
+      { e: '🥳', k: ['party'] },
+      { e: '😎', k: ['cool', 'sunglasses'] },
+      { e: '🤓', k: ['nerd'] },
+      { e: '🧐', k: ['monocle'] },
+      { e: '😕', k: ['confused'] },
+      { e: '😟', k: ['worried'] },
+      { e: '🙁', k: ['frown'] },
+      { e: '☹️', k: ['frown'] },
+      { e: '😮', k: ['open mouth'] },
+      { e: '😯', k: ['hushed'] },
+      { e: '😲', k: ['astonished'] },
+      { e: '😳', k: ['flushed'] },
+      { e: '🥺', k: ['pleading'] },
+      { e: '😦', k: ['frowning'] },
+      { e: '😧', k: ['anguished'] },
+      { e: '😨', k: ['fear'] },
+      { e: '😰', k: ['anxious', 'sweat'] },
+      { e: '😥', k: ['sad', 'relieved'] },
+      { e: '😢', k: ['cry'] },
+      { e: '😭', k: ['cry', 'loud'] },
+      { e: '😱', k: ['scream', 'scared'] },
+      { e: '😖', k: ['confounded'] },
+      { e: '😣', k: ['persevere'] },
+      { e: '😞', k: ['disappointed'] },
+      { e: '😓', k: ['sweat'] },
+      { e: '😩', k: ['weary'] },
+      { e: '😫', k: ['tired'] },
+      { e: '🥱', k: ['yawn'] },
+      { e: '😤', k: ['triumph'] },
+      { e: '😡', k: ['angry', 'rage'] },
+      { e: '😠', k: ['angry'] },
+      { e: '🤬', k: ['swear', 'curse'] },
+      { e: '😈', k: ['devil'] },
+      { e: '👿', k: ['imp'] },
+      { e: '💀', k: ['skull', 'dead'] },
+      { e: '🤡', k: ['clown'] },
+      { e: '👻', k: ['ghost'] },
+      { e: '👽', k: ['alien'] },
+      { e: '🤖', k: ['robot'] },
+      { e: '💩', k: ['poop', 'shit'] },
+    ],
+  },
+  {
+    label: 'Gestures',
+    entries: [
+      { e: '👋', k: ['wave', 'hi'] },
+      { e: '🤚', k: ['hand'] },
+      { e: '🖐️', k: ['hand'] },
+      { e: '✋', k: ['stop', 'high five'] },
+      { e: '🖖', k: ['spock'] },
+      { e: '👌', k: ['ok'] },
+      { e: '🤌', k: ['pinch'] },
+      { e: '🤏', k: ['small'] },
+      { e: '✌️', k: ['peace', 'victory'] },
+      { e: '🤞', k: ['crossed fingers'] },
+      { e: '🤟', k: ['love you'] },
+      { e: '🤘', k: ['rock'] },
+      { e: '🤙', k: ['call me'] },
+      { e: '👈', k: ['point left'] },
+      { e: '👉', k: ['point right'] },
+      { e: '👆', k: ['point up'] },
+      { e: '🖕', k: ['middle finger', 'fuck'] },
+      { e: '👇', k: ['point down'] },
+      { e: '☝️', k: ['point up'] },
+      { e: '👍', k: ['thumbs up', 'like'] },
+      { e: '👎', k: ['thumbs down', 'dislike'] },
+      { e: '✊', k: ['fist'] },
+      { e: '👊', k: ['punch'] },
+      { e: '🤛', k: ['fist left'] },
+      { e: '🤜', k: ['fist right'] },
+      { e: '👏', k: ['clap'] },
+      { e: '🙌', k: ['raised hands'] },
+      { e: '👐', k: ['open hands'] },
+      { e: '🤲', k: ['palms'] },
+      { e: '🙏', k: ['pray', 'thanks'] },
+      { e: '✍️', k: ['write'] },
+      { e: '💪', k: ['flex', 'strong'] },
+    ],
+  },
+  {
+    label: 'Hearts',
+    entries: [
+      { e: '❤️', k: ['heart', 'love'] },
+      { e: '🧡', k: ['orange heart'] },
+      { e: '💛', k: ['yellow heart'] },
+      { e: '💚', k: ['green heart'] },
+      { e: '💙', k: ['blue heart'] },
+      { e: '💜', k: ['purple heart'] },
+      { e: '🖤', k: ['black heart'] },
+      { e: '🤍', k: ['white heart'] },
+      { e: '🤎', k: ['brown heart'] },
+      { e: '💔', k: ['broken heart'] },
+      { e: '❣️', k: ['heart exclamation'] },
+      { e: '💕', k: ['hearts'] },
+      { e: '💞', k: ['revolving hearts'] },
+      { e: '💓', k: ['beating heart'] },
+      { e: '💗', k: ['growing heart'] },
+      { e: '💖', k: ['sparkle heart'] },
+      { e: '💘', k: ['cupid'] },
+      { e: '💝', k: ['heart gift'] },
+    ],
+  },
+  {
+    label: 'Animals & Food',
+    entries: [
+      { e: '🐶', k: ['dog'] },
+      { e: '🐱', k: ['cat'] },
+      { e: '🐭', k: ['mouse'] },
+      { e: '🐹', k: ['hamster'] },
+      { e: '🐰', k: ['rabbit'] },
+      { e: '🦊', k: ['fox'] },
+      { e: '🐻', k: ['bear'] },
+      { e: '🐼', k: ['panda'] },
+      { e: '🐨', k: ['koala'] },
+      { e: '🐯', k: ['tiger'] },
+      { e: '🦁', k: ['lion'] },
+      { e: '🐸', k: ['frog'] },
+      { e: '🐵', k: ['monkey'] },
+      { e: '🐔', k: ['chicken'] },
+      { e: '🐧', k: ['penguin'] },
+      { e: '🐦', k: ['bird'] },
+      { e: '🦆', k: ['duck'] },
+      { e: '🍎', k: ['apple'] },
+      { e: '🍌', k: ['banana'] },
+      { e: '🍕', k: ['pizza'] },
+      { e: '🍔', k: ['burger'] },
+      { e: '🍟', k: ['fries'] },
+      { e: '🌭', k: ['hotdog'] },
+      { e: '🍿', k: ['popcorn'] },
+      { e: '🍣', k: ['sushi'] },
+      { e: '🍩', k: ['donut'] },
+      { e: '🍪', k: ['cookie'] },
+      { e: '🎂', k: ['cake', 'birthday'] },
+      { e: '🍰', k: ['cake'] },
+      { e: '🍫', k: ['chocolate'] },
+      { e: '🍺', k: ['beer'] },
+      { e: '🍷', k: ['wine'] },
+      { e: '🥂', k: ['cheers'] },
+      { e: '☕', k: ['coffee'] },
+    ],
+  },
+  {
+    label: 'Objects & Symbols',
+    entries: [
+      { e: '🔥', k: ['fire', 'lit'] },
+      { e: '✨', k: ['sparkle'] },
+      { e: '⭐', k: ['star'] },
+      { e: '🌟', k: ['star glowing'] },
+      { e: '💫', k: ['dizzy'] },
+      { e: '💥', k: ['boom', 'explosion'] },
+      { e: '⚡', k: ['lightning'] },
+      { e: '☀️', k: ['sun'] },
+      { e: '🌈', k: ['rainbow'] },
+      { e: '☁️', k: ['cloud'] },
+      { e: '🌧️', k: ['rain'] },
+      { e: '❄️', k: ['snow'] },
+      { e: '🎉', k: ['party', 'tada'] },
+      { e: '🎊', k: ['confetti'] },
+      { e: '🎁', k: ['gift'] },
+      { e: '🎈', k: ['balloon'] },
+      { e: '💯', k: ['100', 'perfect'] },
+      { e: '✅', k: ['check'] },
+      { e: '❌', k: ['x', 'no'] },
+      { e: '⚠️', k: ['warning'] },
+      { e: '❓', k: ['question'] },
+      { e: '❗', k: ['exclamation'] },
+      { e: '💬', k: ['speech'] },
+      { e: '💭', k: ['thought'] },
+      { e: '👀', k: ['eyes'] },
+      { e: '🚀', k: ['rocket'] },
+      { e: '🎵', k: ['music'] },
+      { e: '🎶', k: ['music'] },
+      { e: '🔔', k: ['bell'] },
+      { e: '💡', k: ['idea', 'bulb'] },
+    ],
+  },
+];
+
+const RECENT_KEY = 'chat.emoji.recents.v1';
+const RECENT_MAX = 24;
+
+function loadRecents(): string[] {
+  try {
+    const raw = localStorage.getItem(RECENT_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((x): x is string => typeof x === 'string').slice(0, RECENT_MAX);
+  } catch {
+    return [];
+  }
+}
+
+function saveRecents(list: string[]): void {
+  try {
+    localStorage.setItem(RECENT_KEY, JSON.stringify(list.slice(0, RECENT_MAX)));
+  } catch {
+    /* ignore quota */
+  }
+}
+
+interface Props {
+  open: boolean;
+  onPick: (emoji: string) => void;
+  onClose: () => void;
+}
+
+export function EmojiPicker({ open, onPick, onClose }: Props) {
+  const [query, setQuery] = useState('');
+  const [recents, setRecents] = useState<string[]>(() => loadRecents());
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    const onDown = (e: MouseEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (rootRef.current && t && !rootRef.current.contains(t) && !t.closest('[data-emoji-trigger]')) {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('mousedown', onDown);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('mousedown', onDown);
+    };
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (open) setQuery('');
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return CATEGORIES;
+    return CATEGORIES.map((cat) => ({
+      label: cat.label,
+      entries: cat.entries.filter(
+        (entry) =>
+          entry.e.includes(q) ||
+          entry.k.some((k) => k.includes(q)) ||
+          cat.label.toLowerCase().includes(q),
+      ),
+    })).filter((cat) => cat.entries.length > 0);
+  }, [query]);
+
+  if (!open) return null;
+
+  const handlePick = (emoji: string) => {
+    onPick(emoji);
+    const next = [emoji, ...recents.filter((e) => e !== emoji)].slice(0, RECENT_MAX);
+    setRecents(next);
+    saveRecents(next);
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      role="dialog"
+      aria-label="Emoji auswählen"
+      className="absolute bottom-full right-0 z-30 mb-2 flex w-[320px] flex-col rounded-xl border border-line bg-surface-2 shadow-xl"
+    >
+      <div className="border-b border-line p-2">
+        <input
+          type="search"
+          autoFocus
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Suchen…"
+          className="w-full rounded-md border border-line bg-surface-3 px-2.5 py-1.5 text-sm text-fg placeholder-fg-muted outline-none focus:border-accent"
+        />
+      </div>
+      <div className="max-h-[320px] overflow-y-auto p-2">
+        {recents.length > 0 && !query && (
+          <CategoryBlock
+            label="Zuletzt"
+            entries={recents.map((e) => ({ e, k: [] }))}
+            onPick={handlePick}
+          />
+        )}
+        {filtered.map((cat) => (
+          <CategoryBlock
+            key={cat.label}
+            label={cat.label}
+            entries={cat.entries}
+            onPick={handlePick}
+          />
+        ))}
+        {filtered.length === 0 && (
+          <p className="py-4 text-center text-xs text-fg-muted">Keine Treffer</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CategoryBlock({
+  label,
+  entries,
+  onPick,
+}: {
+  label: string;
+  entries: EmojiEntry[];
+  onPick: (emoji: string) => void;
+}) {
+  return (
+    <div className="mb-2">
+      <p className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
+        {label}
+      </p>
+      <div className="grid grid-cols-8 gap-0.5">
+        {entries.map((entry, idx) => (
+          <button
+            key={entry.e + ':' + idx}
+            type="button"
+            onClick={() => onPick(entry.e)}
+            aria-label={entry.k[0] ?? entry.e}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-lg transition hover:bg-surface-3"
+          >
+            {entry.e}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/desktop/src/components/ErrorBoundary.tsx

@@ -0,0 +1,133 @@
+import { Component, type ErrorInfo, Fragment, type ReactNode } from 'react';
+
+import { SpinnerIcon } from './icons';
+
+interface Props {
+  children: ReactNode;
+  /**
+   * Optional scope label shown in logs / devtools. Defaults to `root` — set
+   * per boundary (e.g. `route`, `conversation`) so multiple boundaries can be
+   * distinguished at a glance.
+   */
+  scope?: string;
+  /**
+   * If the retry count exceeds this, the boundary stops auto-retrying and
+   * shows a more helpful message (still without a button — Discord-style,
+   * the app keeps trying but hints the user to hold on or check network).
+   */
+  maxAutoRetries?: number;
+}
+
+interface State {
+  error: Error | null;
+  retryKey: number;
+  attempt: number;
+}
+
+const RETRY_DELAYS_MS = [2000, 4000, 8000, 15000, 30000];
+
+// Discord-style error boundary.
+//   - Catches render-time errors in its subtree.
+//   - Shows a centred spinner + status text. Never renders a manual "Reload"
+//     button; the boundary remounts its children on an exponential-backoff
+//     schedule so the UI self-heals once the underlying issue clears (typical
+//     causes: a realtime reconnect, a transient network blip, or a race that
+//     only fires once).
+//   - Escalates the label after each failed retry so the user sees that the
+//     app is trying, rather than silent infinite spinning.
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { error: null, retryKey: 0, attempt: 0 };
+
+  private retryTimer: number | null = null;
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { error };
+  }
+
+  override componentDidCatch(error: Error, info: ErrorInfo): void {
+    const scope = this.props.scope ?? 'root';
+    // We explicitly log here — the boundary itself swallows the error from
+    // React, so without this the failure would be invisible in production.
+    console.error('[ErrorBoundary:' + scope + '] caught render error', error, info);
+  }
+
+  override componentDidUpdate(_prev: Props, prevState: State): void {
+    if (this.state.error && !prevState.error) {
+      this.scheduleRetry();
+    }
+  }
+
+  override componentWillUnmount(): void {
+    if (this.retryTimer !== null) {
+      window.clearTimeout(this.retryTimer);
+      this.retryTimer = null;
+    }
+  }
+
+  private scheduleRetry(): void {
+    if (this.retryTimer !== null) return;
+    const attempt = this.state.attempt;
+    const delay =
+      RETRY_DELAYS_MS[Math.min(attempt, RETRY_DELAYS_MS.length - 1)] ??
+      RETRY_DELAYS_MS[RETRY_DELAYS_MS.length - 1] ??
+      30000;
+    this.retryTimer = window.setTimeout(() => {
+      this.retryTimer = null;
+      this.setState((prev) => ({
+        error: null,
+        retryKey: prev.retryKey + 1,
+        attempt: prev.attempt + 1,
+      }));
+    }, delay);
+  }
+
+  override render(): ReactNode {
+    if (this.state.error) {
+      const max = this.props.maxAutoRetries ?? RETRY_DELAYS_MS.length;
+      const escalated = this.state.attempt >= max;
+      return <RetryingScreen escalated={escalated} attempt={this.state.attempt} />;
+    }
+    // `retryKey` forces a remount of the subtree so hooks re-run cleanly after
+    // an error (otherwise stale state from the crashed tree can immediately
+    // re-throw). Use a keyed Fragment so the boundary doesn't inject an extra
+    // wrapper div — that would break `flex h-full` chains (e.g. AppShell →
+    // Outlet → page column).
+    return <Fragment key={this.state.retryKey}>{this.props.children}</Fragment>;
+  }
+}
+
+function RetryingScreen({ escalated, attempt }: { escalated: boolean; attempt: number }) {
+  const primary = escalated
+    ? 'Verbindungsprobleme…'
+    : attempt === 0
+      ? 'Einen Moment bitte'
+      : 'Versuche erneut zu laden…';
+  const secondary = escalated
+    ? 'Prüfe deine Internetverbindung. Wir versuchen es weiter.'
+    : 'Die App lädt sich gleich selbst neu.';
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="flex min-h-screen w-full items-center justify-center bg-surface-3 px-6"
+    >
+      <div className="flex flex-col items-center gap-4 text-center">
+        <div className="relative flex h-16 w-16 items-center justify-center">
+          <span
+            aria-hidden="true"
+            className="absolute inset-0 rounded-full border-2 border-accent/20"
+          />
+          <span
+            aria-hidden="true"
+            className="absolute inset-0 rounded-full border-2 border-accent border-r-transparent border-b-transparent animate-spin"
+          />
+          <SpinnerIcon className="hidden" />
+        </div>
+        <div className="max-w-sm space-y-1.5">
+          <p className="font-display text-lg font-semibold text-fg">{primary}</p>
+          <p className="text-sm text-fg-muted">{secondary}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/desktop/src/components/ForwardDialog.tsx

@@ -0,0 +1,315 @@
+import { loadDevicePrivateKey } from '@chat-app/shared/auth';
+import {
+  type AttachmentHandle,
+  type DecryptedMessage,
+  downloadAndDecryptAttachment,
+  encryptAndUploadAttachment,
+  insertAttachmentRow,
+  parseMessagePayload,
+  sendEncryptedMessage,
+} from '@chat-app/shared/chat';
+import { extractErrorCode } from '@chat-app/shared/i18n';
+import { bytesToPgHex } from '@chat-app/shared/supabase';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAuth } from '../context/AuthContext';
+import { useConversationsContext } from '../context/ConversationsContext';
+import { devLocalSecretStore } from '../lib/secretStore';
+import { supabase } from '../lib/supabase';
+import { Avatar } from './Avatar';
+import { ForwardIcon, SpinnerIcon, UsersIcon, XIcon } from './icons';
+
+interface Props {
+  open: boolean;
+  message: DecryptedMessage | null;
+  currentConversationId: string | null;
+  onClose: () => void;
+}
+
+// Forwards a message's plaintext to one or more conversations. Attachments are
+// NOT carried over yet (would require re-uploading + re-encrypting under the
+// new conversation key); only the text payload is forwarded for now and the
+// preview hints at the dropped attachment.
+export function ForwardDialog({ open, message, currentConversationId, onClose }: Props) {
+  const { t } = useTranslation(['app', 'errors']);
+  const { session, device } = useAuth();
+  const { conversations } = useConversationsContext();
+
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setSelected(new Set());
+    setError(null);
+    setDone(false);
+  }, [open, message?.id]);
+
+  const targets = useMemo(() => {
+    return conversations
+      .filter((c) => c.id !== currentConversationId && c.acceptedByMe)
+      .sort((a, b) => {
+        const ta = a.lastMessageAt ?? a.createdAt;
+        const tb = b.lastMessageAt ?? b.createdAt;
+        return tb.localeCompare(ta);
+      });
+  }, [conversations, currentConversationId]);
+
+  const preview = useMemo(() => {
+    if (!message?.plaintext) return '';
+    const p = parseMessagePayload(message.plaintext);
+    if (p.kind !== 'text') return '';
+    return p.text.length > 140 ? p.text.slice(0, 140) + '…' : p.text;
+  }, [message]);
+
+  const sourceAttachments = useMemo<AttachmentHandle[]>(() => {
+    if (!message?.plaintext) return [];
+    const p = parseMessagePayload(message.plaintext);
+    return p.kind === 'text' ? p.attachments : [];
+  }, [message]);
+
+  if (!open || !message) return null;
+
+  function toggle(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  async function handleSend() {
+    if (!session?.user.id || !device?.id || !message) return;
+    if (selected.size === 0) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const priv = await loadDevicePrivateKey(devLocalSecretStore, session.user.id, device.id);
+      if (!priv) throw new Error('private key not loaded');
+
+      const hasAttachments = sourceAttachments.length > 0;
+      const text = preview || (hasAttachments ? '' : '');
+      if (!text && !hasAttachments) throw new Error('nothing to forward');
+
+      // Download+decrypt source attachments ONCE (same plaintext goes to every
+      // target). For each target conv we re-encrypt under fresh per-attachment
+      // keys and re-upload under the target conv's storage folder — source and
+      // target conv-keys differ, so the bytes must actually move.
+      const decryptedBlobs: { mime: string; size: number; width?: number; height?: number; blob: Blob }[] =
+        [];
+      for (const h of sourceAttachments) {
+        const blob = await downloadAndDecryptAttachment({ client: supabase, handle: h });
+        const entry: {
+          mime: string;
+          size: number;
+          width?: number;
+          height?: number;
+          blob: Blob;
+        } = { mime: h.mimeType, size: h.sizeBytes, blob };
+        if (h.width !== undefined) entry.width = h.width;
+        if (h.height !== undefined) entry.height = h.height;
+        decryptedBlobs.push(entry);
+      }
+
+      for (const convId of selected) {
+        const newHandles: AttachmentHandle[] = [];
+        const blobNonceHex = new Map<string, string>();
+        for (const src of decryptedBlobs) {
+          const res = await encryptAndUploadAttachment({
+            client: supabase,
+            conversationId: convId,
+            file: src.blob,
+            mimeType: src.mime,
+            sizeBytes: src.size,
+            ...(src.width !== undefined ? { width: src.width } : {}),
+            ...(src.height !== undefined ? { height: src.height } : {}),
+          });
+          newHandles.push(res.handle);
+          blobNonceHex.set(res.handle.id, bytesToPgHex(res.nonce));
+        }
+
+        const msg = await sendEncryptedMessage({
+          client: supabase,
+          conversationId: convId,
+          plaintext: text,
+          senderUserId: session.user.id,
+          senderDeviceId: device.id,
+          senderPrivateKey: priv,
+          ...(newHandles.length > 0 ? { attachmentHandles: newHandles } : {}),
+        });
+
+        for (const h of newHandles) {
+          const bn = blobNonceHex.get(h.id) ?? '\\x';
+          await insertAttachmentRow(supabase, msg.id, h, bn);
+        }
+      }
+      setDone(true);
+      window.setTimeout(onClose, 700);
+    } catch (err: unknown) {
+      const code = extractErrorCode(err);
+      setError(
+        code
+          ? t('errors:' + code, { defaultValue: t('errors:generic') })
+          : err instanceof Error
+            ? err.message
+            : t('errors:generic'),
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={t('app:chats.forward', { defaultValue: 'Weiterleiten' })}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={onClose}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="flex max-h-[80vh] w-full max-w-md flex-col overflow-hidden rounded-2xl border border-line bg-surface-3 shadow-xl"
+      >
+        <header className="flex items-center justify-between border-b border-line px-5 py-3">
+          <div className="flex items-center gap-2">
+            <ForwardIcon className="h-4 w-4 text-accent" />
+            <h3 className="font-display text-sm font-semibold text-fg">
+              {t('app:chats.forward', { defaultValue: 'Weiterleiten' })}
+            </h3>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close"
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-fg-muted transition hover:bg-surface-2 hover:text-fg"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </header>
+
+        <div className="border-b border-line bg-surface-2 px-5 py-3">
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
+            {t('app:chats.forward_preview', { defaultValue: 'Vorschau' })}
+          </p>
+          <p className="mt-1 line-clamp-3 break-words text-sm text-fg">
+            {preview || (sourceAttachments.length > 0 ? '📎' : '…')}
+          </p>
+          {sourceAttachments.length > 0 && (
+            <p className="mt-1 text-[11px] text-fg-muted">
+              📎{' '}
+              {t('app:chats.forward_attachments_count', {
+                count: sourceAttachments.length,
+                defaultValue: '{{count}} Anhang wird mit weitergeleitet',
+              })}
+            </p>
+          )}
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-2">
+          {targets.length === 0 ? (
+            <p className="px-4 py-6 text-center text-sm text-fg-muted">
+              {t('app:chats.forward_no_targets', {
+                defaultValue: 'Keine anderen Unterhaltungen verfügbar.',
+              })}
+            </p>
+          ) : (
+            <ul className="space-y-0.5">
+              {targets.map((c) => {
+                const isGroup = c.type === 'group';
+                const title = isGroup ? c.name ?? '?' : c.peer?.displayName ?? '?';
+                const avatarUrl = isGroup ? c.avatarUrl ?? null : c.peer?.avatarUrl ?? null;
+                const checked = selected.has(c.id);
+                return (
+                  <li key={c.id}>
+                    <button
+                      type="button"
+                      onClick={() => toggle(c.id)}
+                      className={
+                        'flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
+                        (checked ? 'bg-accent/15' : 'hover:bg-surface-2')
+                      }
+                    >
+                      {avatarUrl ? (
+                        <Avatar
+                          url={avatarUrl}
+                          displayName={title}
+                          className="h-9 w-9 text-sm"
+                        />
+                      ) : isGroup ? (
+                        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent/20 text-accent">
+                          <UsersIcon className="h-4 w-4" />
+                        </div>
+                      ) : (
+                        <Avatar
+                          url={null}
+                          displayName={title}
+                          className="h-9 w-9 text-sm"
+                        />
+                      )}
+                      <span className="min-w-0 flex-1 truncate text-sm font-medium text-fg">
+                        {title}
+                      </span>
+                      <span
+                        aria-hidden="true"
+                        className={
+                          'flex h-5 w-5 shrink-0 items-center justify-center rounded border ' +
+                          (checked ? 'border-accent bg-accent text-accent-fg' : 'border-line bg-surface-2')
+                        }
+                      >
+                        {checked && (
+                          <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="20 6 9 17 4 12" />
+                          </svg>
+                        )}
+                      </span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+
+        {error && (
+          <p
+            role="alert"
+            className="border-t border-rose-500/30 bg-rose-500/10 px-5 py-2 text-xs text-rose-700 dark:text-rose-200"
+          >
+            {error}
+          </p>
+        )}
+
+        <footer className="flex items-center justify-end gap-2 border-t border-line bg-surface-2 px-5 py-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-2 text-sm text-fg transition hover:bg-surface-2"
+          >
+            {t('app:friends.action_cancel', { defaultValue: 'Abbrechen' })}
+          </button>
+          <button
+            type="button"
+            disabled={busy || selected.size === 0 || done}
+            onClick={() => void handleSend()}
+            className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-2 text-sm font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {busy && <SpinnerIcon className="h-4 w-4" />}
+            <span>
+              {done
+                ? t('app:chats.forward_done', { defaultValue: 'Gesendet' })
+                : t('app:chats.forward_send', {
+                    count: selected.size,
+                    defaultValue: 'An {{count}} senden',
+                  })}
+            </span>
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}

apps/desktop/src/components/InCallPanel.tsx

@@ -1,5 +1,7 @@
 import type { ConversationSummary } from '@chat-app/shared/chat';
-import { useEffect, useState } from 'react';
+import type { RemoteParticipant, Room } from 'livekit-client';
+import { Track } from 'livekit-client';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuth } from '../context/AuthContext';
@@ -13,7 +15,10 @@ import { useActiveSpeakers } from '../lib/useActiveSpeakers';
 import { CallControls } from './CallControls';
 import { CallParticipantTile } from './CallParticipantTile';
 import { FocusIcon, GridIcon, LockIcon, MaximizeIcon, SpinnerIcon, UsersIcon } from './icons';
+import { ParticipantVolumeMenu } from './ParticipantVolumeMenu';
+import { ScreenShareDialog } from './ScreenShareDialog';
 import { ScreenShareViewer } from './ScreenShareViewer';
+import { SoundboardPanel } from './SoundboardPanel';
 
 // Discord-style in-call dock rendered above the message list. Renders three
 // visual modes driven by CallContext.callMode: grid, focus, fullscreen.
@@ -24,13 +29,24 @@ interface Props {
 }
 
 interface Tile {
+  // `user` = person with avatar/video/mute info. Speaking ring applies here.
+  // `screen` = a separate screen-share window from a user. No speaking
+  //           indicator, no mute, no avatar — just the stream.
+  kind: 'user' | 'screen';
+  // Stable id used for focus tracking + React keys. `user:${userId}` or
+  // `screen:${userId}`.
+  id: string;
   userId: string;
   displayName: string;
   avatarUrl: string | null;
   self: boolean;
   muted: boolean;
+  deafened: boolean;
   video: boolean;
+  videoTrack: MediaStreamTrack | null;
+  // True iff this is the current user's own screen-share tile.
   sharing: boolean;
+  // True iff this is a remote user's screen-share tile.
   remoteSharing: boolean;
 }
 
@@ -43,11 +59,18 @@ export function InCallPanel({ conversation }: Props) {
     isMuted,
     isE2EEActive,
     isScreenSharing,
+    isCameraEnabled,
+    isDeafened,
+    remoteDeafen,
+    remoteMute,
     remoteScreenShares,
     callMode,
     focusedId,
     toggleMute,
-    toggleScreenShare,
+    startScreenShare,
+    stopScreenShare,
+    toggleCamera,
+    toggleDeafen,
     hangup,
     setCallMode,
     setFocusedId,
@@ -55,6 +78,23 @@ export function InCallPanel({ conversation }: Props) {
   const { session } = useAuth();
   const myId = session?.user.id ?? null;
   const activeSpeakers = useActiveSpeakers(room);
+  const [shareDialogOpen, setShareDialogOpen] = useState(false);
+  const [soundboardOpen, setSoundboardOpen] = useState(false);
+  const [volumeMenu, setVolumeMenu] = useState<
+    { userId: string; displayName: string; x: number; y: number } | null
+  >(null);
+
+  const openVolumeMenu = (tile: Tile, e: React.MouseEvent) => {
+    if (tile.self) return;
+    if (tile.kind !== 'user') return;
+    e.preventDefault();
+    setVolumeMenu({
+      userId: tile.userId,
+      displayName: tile.displayName,
+      x: e.clientX,
+      y: e.clientY,
+    });
+  };
 
   const active =
     (state.kind === 'connected' ||
@@ -66,9 +106,14 @@ export function InCallPanel({ conversation }: Props) {
   const tiles = buildTiles({
     conversation,
     myId,
-    remoteIdentities: remoteParticipants.map((p) => p.identity),
+    room,
+    remoteParticipants,
     isMuted,
+    isDeafened,
+    remoteDeafen,
+    remoteMute,
     isScreenSharing,
+    isCameraEnabled,
     remoteSharerIds: new Set(remoteScreenShares.map((s) => s.participantId)),
   });
 
@@ -86,17 +131,31 @@ export function InCallPanel({ conversation }: Props) {
           ? t('app:call.waiting_for_peers', { defaultValue: 'Warte auf andere…' })
           : t('app:call.connected');
 
-  const sharingTile = tiles.find((p) => p.sharing);
+  // A screen-share tile becomes the auto-focus target when no one explicitly
-  const effectiveFocusedId = focusedId ?? sharingTile?.userId ?? tiles[0]?.userId ?? null;
+  // picked a tile yet. Focus ids now use Tile.id (kind-prefixed) so we can
-  const speaker = tiles.find((p) => p.userId === effectiveFocusedId) ?? tiles[0];
+  // distinguish a user's own avatar tile from their screen tile.
+  const screenTile = tiles.find((p) => p.kind === 'screen');
+  const effectiveFocusedId = focusedId ?? screenTile?.id ?? tiles[0]?.id ?? null;
+  const speaker = tiles.find((p) => p.id === effectiveFocusedId) ?? tiles[0];
 
   const controls = (
     <CallControls
-      muted={isMuted}
+      muted={isMuted || !(room?.localParticipant?.isMicrophoneEnabled ?? false)}
       sharing={isScreenSharing}
-      video={false}
+      video={isCameraEnabled}
+      deafened={isDeafened}
       onToggleMute={toggleMute}
-      onToggleShare={() => void toggleScreenShare()}
+      onToggleShare={() => {
+        if (isScreenSharing) {
+          void stopScreenShare();
+        } else {
+          setShareDialogOpen(true);
+        }
+      }}
+      onToggleVideo={() => void toggleCamera()}
+      onToggleDeafen={toggleDeafen}
+      onToggleSoundboard={() => setSoundboardOpen((v) => !v)}
+      soundboardOpen={soundboardOpen}
       onHangup={() => void hangup()}
       compact={callMode !== 'fullscreen'}
       glass={callMode === 'fullscreen'}
@@ -105,20 +164,50 @@ export function InCallPanel({ conversation }: Props) {
   );
 
   if (callMode === 'fullscreen') {
+    // In fullscreen, a "manual focus" = user explicitly picked someone, OR
+    // someone is sharing a screen, OR exactly one non-self speaker is talking
+    // (auto-promote). Without that we show an even grid of all participants
+    // (Discord default). Clicking a tile switches to the big-speaker layout.
+    const speakingNonSelf = tiles.filter(
+      (t: Tile) => activeSpeakers.has(t.userId) && !t.self && t.kind === 'user',
+    );
+    const autoSpeaker =
+      focusedId === null && screenTile === undefined && speakingNonSelf.length === 1
+        ? speakingNonSelf[0]
+        : undefined;
+    const hasFocus = focusedId !== null || screenTile !== undefined || autoSpeaker !== undefined;
+    const effectiveSpeaker = hasFocus ? speaker ?? autoSpeaker : undefined;
     return (
+      <>
         <FullscreenCall
           tiles={tiles}
-        speaker={speaker}
+          speaker={effectiveSpeaker}
           remoteScreenShares={remoteScreenShares}
           conversationMembers={conversation.members}
           activeSpeakers={activeSpeakers}
           e2ee={isE2EEActive}
           onExit={() => setCallMode('grid')}
           onFocusTile={(id) => {
-          setFocusedId(id);
+            // Toggle: click the already-focused tile to return to grid.
+            setFocusedId(focusedId === id ? null : id);
           }}
+          onTileContextMenu={openVolumeMenu}
           controls={controls}
         />
+        {volumeMenu && (
+          <ParticipantVolumeMenu
+            userId={volumeMenu.userId}
+            displayName={volumeMenu.displayName}
+            x={volumeMenu.x}
+            y={volumeMenu.y}
+            onClose={() => setVolumeMenu(null)}
+          />
+        )}
+        <SoundboardPopover
+          open={soundboardOpen}
+          onClose={() => setSoundboardOpen(false)}
+        />
+      </>
     );
   }
 
@@ -127,11 +216,19 @@ export function InCallPanel({ conversation }: Props) {
       ? conversation.name ?? t('app:chats.new_group')
       : conversation.peer?.displayName ?? '—';
 
+  // Focus mode dedicates the entire call-panel vertical slot to the speaker so
+  // the tile can grow in height (grid mode's 420px cap leaves it squashed).
+  const sectionClass =
+    callMode === 'focus'
+      ? 'flex min-h-[420px] shrink-0 flex-col overflow-hidden border-b border-line bg-surface-2'
+      : 'flex min-h-[280px] max-h-[420px] shrink-0 flex-col overflow-hidden border-b border-line bg-surface-2';
+  const sectionHeight = callMode === 'focus' ? '75%' : '50%';
+
   return (
     <section
       aria-label={t('app:call.in_call', { defaultValue: 'Im Anruf' })}
-      className="flex min-h-[280px] max-h-[420px] shrink-0 flex-col overflow-hidden border-b border-line bg-surface-2"
+      className={sectionClass}
-      style={{ height: '50%' }}
+      style={{ height: sectionHeight }}
     >
       <div className="flex items-center justify-between border-b border-line bg-surface-3 px-4 py-2">
         <div className="flex min-w-0 flex-col gap-0.5">
@@ -168,16 +265,53 @@ export function InCallPanel({ conversation }: Props) {
           setFocusedId(id);
           if (callMode === 'grid') setCallMode('focus');
         }}
+        onTileContextMenu={openVolumeMenu}
         compact
       />
 
       {controls}
 
       <PttHint />
+
+      <ScreenShareDialog
+        open={shareDialogOpen}
+        onClose={() => setShareDialogOpen(false)}
+        onStart={async (opts) => {
+          await startScreenShare(opts);
+        }}
+      />
+
+      {volumeMenu && (
+        <ParticipantVolumeMenu
+          userId={volumeMenu.userId}
+          displayName={volumeMenu.displayName}
+          x={volumeMenu.x}
+          y={volumeMenu.y}
+          onClose={() => setVolumeMenu(null)}
+        />
+      )}
+
+      <SoundboardPopover
+        open={soundboardOpen}
+        onClose={() => setSoundboardOpen(false)}
+      />
     </section>
   );
 }
 
+// Fixed-position overlay so the popover sits above both docked + fullscreen
+// call modes without needing a portal or parent-relative anchoring.
+function SoundboardPopover({ open, onClose }: { open: boolean; onClose: () => void }) {
+  if (!open) return null;
+  return (
+    <div className="pointer-events-none fixed inset-x-0 bottom-24 z-50 flex justify-center px-4">
+      <div className="pointer-events-auto">
+        <SoundboardPanel onClose={onClose} />
+      </div>
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -185,49 +319,123 @@ export function InCallPanel({ conversation }: Props) {
 interface BuildArgs {
   conversation: ConversationSummary;
   myId: string | null;
-  remoteIdentities: string[];
+  room: Room | null;
+  remoteParticipants: RemoteParticipant[];
   isMuted: boolean;
+  isDeafened: boolean;
+  remoteDeafen: Record<string, boolean>;
+  remoteMute: Record<string, boolean>;
   isScreenSharing: boolean;
+  isCameraEnabled: boolean;
   remoteSharerIds: Set<string>;
 }
 
+function cameraTrackFor(
+  participant: { videoTrackPublications: Map<string, { source: Track.Source; track?: { mediaStreamTrack: MediaStreamTrack } | undefined }> } | null,
+): MediaStreamTrack | null {
+  if (!participant) return null;
+  for (const pub of participant.videoTrackPublications.values()) {
+    if (pub.source === Track.Source.Camera && pub.track) {
+      return pub.track.mediaStreamTrack ?? null;
+    }
+  }
+  return null;
+}
+
 function buildTiles({
   conversation,
   myId,
-  remoteIdentities,
+  room,
+  remoteParticipants,
   isMuted,
+  isDeafened,
+  remoteDeafen,
+  remoteMute,
   isScreenSharing,
+  isCameraEnabled,
   remoteSharerIds,
 }: BuildArgs): Tile[] {
-  const remoteSet = new Set(remoteIdentities);
+  const remoteById = new Map<string, RemoteParticipant>();
+  for (const p of remoteParticipants) {
+    if (p.identity) remoteById.set(p.identity, p);
+  }
   const out: Tile[] = [];
   if (myId) {
     const me = conversation.members.find((m) => m.userId === myId) ?? null;
+    // Source-of-truth for own mic: the LocalParticipant publication state.
+    // `isMuted` reflects the toggle button, but if mic never published (no
+    // device / permission denied) the toggle stays false while the real
+    // state is "muted". Combine both so the badge always matches reality.
+    const micLive = room?.localParticipant?.isMicrophoneEnabled ?? false;
     out.push({
+      kind: 'user',
+      id: 'user:' + myId,
       userId: myId,
       displayName: me?.profile?.displayName ?? '?',
       avatarUrl: me?.profile?.avatarUrl ?? null,
       self: true,
-      muted: isMuted,
+      muted: isMuted || !micLive,
+      deafened: isDeafened,
+      video: isCameraEnabled,
+      videoTrack: cameraTrackFor(room?.localParticipant ?? null),
+      sharing: false,
+      remoteSharing: false,
+    });
+    if (isScreenSharing) {
+      out.push({
+        kind: 'screen',
+        id: 'screen:' + myId,
+        userId: myId,
+        displayName: (me?.profile?.displayName ?? '?') + ' · Bildschirm',
+        avatarUrl: me?.profile?.avatarUrl ?? null,
+        self: true,
+        muted: false,
+        deafened: false,
         video: false,
-      sharing: isScreenSharing,
+        videoTrack: null,
+        sharing: true,
         remoteSharing: false,
       });
     }
+  }
   for (const m of conversation.members) {
     if (m.userId === myId) continue;
-    if (!remoteSet.has(m.userId)) continue;
+    const rp = remoteById.get(m.userId);
-    const sharing = remoteSharerIds.has(m.userId);
+    if (!rp) continue;
     out.push({
+      kind: 'user',
+      id: 'user:' + m.userId,
       userId: m.userId,
       displayName: m.profile?.displayName ?? '?',
       avatarUrl: m.profile?.avatarUrl ?? null,
       self: false,
-      muted: false,
+      // Peer's self-reported mute state via data channel. LiveKit's own
-      video: false,
+      // `isMicrophoneEnabled` no longer flips on mute since the pipeline
-      sharing,
+      // output track stays published. See remoteMute broadcast in CallContext.
-      remoteSharing: sharing,
+      muted: remoteMute[m.userId] ?? false,
+      // Deafen state arrives via LiveKit data channel; see CallContext.
+      deafened: remoteDeafen[m.userId] ?? false,
+      video: rp.isCameraEnabled,
+      videoTrack: cameraTrackFor(rp),
+      sharing: false,
+      remoteSharing: false,
     });
+    if (remoteSharerIds.has(m.userId)) {
+      out.push({
+        kind: 'screen',
+        id: 'screen:' + m.userId,
+        userId: m.userId,
+        displayName: (m.profile?.displayName ?? '?') + ' · Bildschirm',
+        avatarUrl: m.profile?.avatarUrl ?? null,
+        self: false,
+        muted: false,
+        deafened: false,
+        video: false,
+        videoTrack: null,
+        sharing: false,
+        remoteSharing: true,
+      });
+    }
   }
   return out;
 }
@@ -319,9 +527,92 @@ interface StageProps {
   }[];
   conversationMembers: ConversationSummary['members'];
   onFocusTile: (id: string) => void;
+  onTileContextMenu?: (tile: Tile, e: React.MouseEvent) => void;
   compact?: boolean;
 }
 
+// Dispatches a Tile to the right renderer. Screen-tiles show the screenshare
+// stream directly (no avatar, no speaking ring, no mic indicator); user-tiles
+// render via CallParticipantTile with all its chrome.
+function TileRender({
+  tile,
+  activeSpeakers,
+  e2ee,
+  remoteScreenShares,
+  conversationMembers,
+  size,
+  focused,
+  onClick,
+  onContextMenu,
+}: {
+  tile: Tile;
+  activeSpeakers: Set<string>;
+  e2ee: boolean;
+  remoteScreenShares: StageProps['remoteScreenShares'];
+  conversationMembers: StageProps['conversationMembers'];
+  size?: 'default' | 'small';
+  focused?: boolean;
+  onClick?: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
+}): JSX.Element {
+  if (tile.kind === 'screen') {
+    if (tile.self) {
+      // Local screenshare preview — we don't mirror a copy of the outgoing
+      // stream. Render a labelled placeholder card so the user knows their
+      // share is live without double-encoding the stream.
+      return (
+        <div
+          onClick={onClick}
+          className={
+            'relative flex h-full w-full items-center justify-center overflow-hidden rounded-[14px] border border-emerald-500/40 bg-emerald-500/5 text-emerald-700 dark:text-emerald-200 ' +
+            (onClick ? 'cursor-pointer' : '')
+          }
+        >
+          <div className="flex flex-col items-center gap-2 p-4 text-center">
+            <div className="text-xs font-semibold uppercase tracking-wider">
+              Live
+            </div>
+            <div className="text-sm">{tile.displayName}</div>
+          </div>
+        </div>
+      );
+    }
+    const share = remoteScreenShares.find((s) => s.participantId === tile.userId);
+    const member = conversationMembers.find((m) => m.userId === tile.userId);
+    if (!share) return <div className="h-full w-full" />;
+    return (
+      <div
+        onClick={onClick}
+        className={'h-full w-full [&>div]:h-full [&>div]:w-full ' + (onClick ? 'cursor-pointer' : '')}
+      >
+        <ScreenShareViewer
+          share={share}
+          avatarUrl={member?.profile?.avatarUrl ?? tile.avatarUrl}
+          displayName={member?.profile?.displayName ?? tile.displayName}
+        />
+      </div>
+    );
+  }
+  return (
+    <CallParticipantTile
+      userId={tile.userId}
+      displayName={tile.displayName}
+      avatarUrl={tile.avatarUrl}
+      me={tile.self}
+      muted={tile.muted}
+      deafened={tile.deafened}
+      speaking={activeSpeakers.has(tile.userId)}
+      video={tile.video}
+      videoTrack={tile.videoTrack}
+      e2ee={e2ee}
+      {...(size ? { size } : {})}
+      {...(focused ? { focused } : {})}
+      {...(onClick ? { onClick } : {})}
+      {...(onContextMenu ? { onContextMenu } : {})}
+    />
+  );
+}
+
 function CallStage({
   tiles,
   speaker,
@@ -331,37 +622,40 @@ function CallStage({
   remoteScreenShares,
   conversationMembers,
   onFocusTile,
+  onTileContextMenu,
   compact = false,
 }: StageProps) {
   if (mode === 'focus' && speaker) {
-    const others = tiles.filter((p) => p.userId !== speaker.userId);
+    const others = tiles.filter((p) => p.id !== speaker.id);
     return (
       <div className="flex min-h-0 flex-1 flex-col gap-2.5 p-3">
         <div className="min-h-0 flex-1">
           <FocusedTile
             tile={speaker}
             e2ee={e2ee}
-            speaking={activeSpeakers.has(speaker.userId)}
+            activeSpeakers={activeSpeakers}
             remoteScreenShares={remoteScreenShares}
             conversationMembers={conversationMembers}
           />
         </div>
         {others.length > 0 && (
-          <div className="flex h-[110px] gap-2.5 overflow-x-auto">
+          <div className="flex h-[180px] gap-2.5 overflow-x-auto">
             {others.map((p) => (
-              <div key={p.userId} className="h-full min-w-[160px]">
+              <div
-                <CallParticipantTile
+                key={p.id}
-                  userId={p.userId}
+                className="h-full w-[240px] shrink-0 [&>div]:h-full"
-                  displayName={p.displayName}
+              >
-                  avatarUrl={p.avatarUrl}
+                <TileRender
-                  me={p.self}
+                  tile={p}
-                  muted={p.muted}
+                  activeSpeakers={activeSpeakers}
-                  speaking={activeSpeakers.has(p.userId)}
-                  sharing={p.sharing}
-                  video={p.video}
                   e2ee={e2ee}
+                  remoteScreenShares={remoteScreenShares}
+                  conversationMembers={conversationMembers}
                   size="small"
-                  onClick={() => onFocusTile(p.userId)}
+                  onClick={() => onFocusTile(p.id)}
+                  {...(onTileContextMenu
+                    ? { onContextMenu: (e: React.MouseEvent) => onTileContextMenu(p, e) }
+                    : {})}
                 />
               </div>
             ))}
@@ -377,19 +671,19 @@ function CallStage({
     <div className={'min-h-0 flex-1 p-3 ' + (compact ? '' : 'p-4')}>
       <div className={'grid h-full gap-2 ' + gridClass}>
         {tiles.map((p) => (
-          <CallParticipantTile
+          <div key={p.id} className="[&>div]:h-full [&>div]:w-full">
-            key={p.userId}
+            <TileRender
-            userId={p.userId}
+              tile={p}
-            displayName={p.displayName}
+              activeSpeakers={activeSpeakers}
-            avatarUrl={p.avatarUrl}
-            me={p.self}
-            muted={p.muted}
-            speaking={activeSpeakers.has(p.userId)}
-            sharing={p.sharing}
-            video={p.video}
               e2ee={e2ee}
-            onClick={() => onFocusTile(p.userId)}
+              remoteScreenShares={remoteScreenShares}
+              conversationMembers={conversationMembers}
+              onClick={() => onFocusTile(p.id)}
+              {...(onTileContextMenu
+                ? { onContextMenu: (e: React.MouseEvent) => onTileContextMenu(p, e) }
+                : {})}
             />
+          </div>
         ))}
       </div>
     </div>
@@ -399,57 +693,57 @@ function CallStage({
 function FocusedTile({
   tile,
   e2ee,
-  speaking,
+  activeSpeakers,
   remoteScreenShares,
   conversationMembers,
 }: {
   tile: Tile;
   e2ee: boolean;
-  speaking: boolean;
+  activeSpeakers: Set<string>;
   remoteScreenShares: StageProps['remoteScreenShares'];
   conversationMembers: StageProps['conversationMembers'];
 }) {
-  // When the focused participant is remotely sharing their screen, embed the
-  // real video stream rather than the fake-window placeholder.
-  if (tile.remoteSharing) {
-    const share = remoteScreenShares.find((s) => s.participantId === tile.userId);
-    const member = conversationMembers.find((m) => m.userId === tile.userId);
-    if (share) {
   return (
-        <div className="h-full">
+    <div className="h-full [&>div]:h-full">
-          <ScreenShareViewer
+      <TileRender
-            share={share}
+        tile={tile}
-            avatarUrl={member?.profile?.avatarUrl ?? tile.avatarUrl}
+        activeSpeakers={activeSpeakers}
-            displayName={member?.profile?.displayName ?? tile.displayName}
-          />
-        </div>
-      );
-    }
-  }
-  return (
-    <div className="h-full">
-      <CallParticipantTile
-        userId={tile.userId}
-        displayName={tile.displayName}
-        avatarUrl={tile.avatarUrl}
-        me={tile.self}
-        muted={tile.muted}
-        speaking={speaking}
-        sharing={tile.sharing}
-        video={tile.video}
         e2ee={e2ee}
+        remoteScreenShares={remoteScreenShares}
+        conversationMembers={conversationMembers}
         focused
       />
     </div>
   );
 }
 
+const GRID_PAGE_SIZE = 12;
+
 function gridColsFor(n: number): string {
-  if (n <= 1) return 'grid-cols-1';
+  // Explicit `grid-rows-*` so cells get a defined height (1fr of available
-  if (n === 2) return 'grid-cols-2';
+  // space). Without this, implicit rows default to auto → they size to
-  if (n === 3) return 'grid-cols-3';
+  // content, and a video element's intrinsic size blows the tile past the
+  // container bounds (overlapping the toolbar below).
+  if (n <= 1) return 'grid-cols-1 grid-rows-1';
+  if (n === 2) return 'grid-cols-2 grid-rows-1';
+  if (n === 3) return 'grid-cols-3 grid-rows-1';
   if (n === 4) return 'grid-cols-2 grid-rows-2';
-  return 'grid-cols-3 grid-rows-2';
+  if (n <= 6) return 'grid-cols-3 grid-rows-2';
+  if (n <= 9) return 'grid-cols-3 grid-rows-3';
+  return 'grid-cols-4 grid-rows-3';
+}
+
+// Promote self + active speakers to the front of the tile list. Stable
+// otherwise. Used by both pagination (so page 1 always carries the most
+// "useful" tiles) and active-speaker promotion in fullscreen.
+function prioritizeTiles(tiles: Tile[], activeSpeakers: Set<string>): Tile[] {
+  const score = (t: Tile): number => {
+    if (t.self) return 3;
+    if (activeSpeakers.has(t.userId)) return 2;
+    if (t.kind === 'screen') return 1;
+    return 0;
+  };
+  return [...tiles].sort((a, b) => score(b) - score(a));
 }
 
 // ---------------------------------------------------------------------------
@@ -465,6 +759,7 @@ interface FullscreenProps {
   e2ee: boolean;
   onExit: () => void;
   onFocusTile: (id: string) => void;
+  onTileContextMenu?: (tile: Tile, e: React.MouseEvent) => void;
   controls: React.ReactNode;
 }
 
@@ -477,62 +772,129 @@ function FullscreenCall({
   e2ee,
   onExit: _onExit,
   onFocusTile,
+  onTileContextMenu,
   controls,
 }: FullscreenProps) {
-  const others = speaker ? tiles.filter((p) => p.userId !== speaker.userId) : tiles;
   const [hintGone, setHintGone] = useState(false);
+  const [page, setPage] = useState(0);
   useEffect(() => {
     const id = window.setTimeout(() => setHintGone(true), 3500);
     return () => window.clearTimeout(id);
   }, []);
 
+  const hasFocus = speaker !== undefined;
+  const others = hasFocus ? tiles.filter((p) => p.id !== speaker!.id) : [];
+
+  // Active-speaker reorder + paginate. When more than GRID_PAGE_SIZE tiles
+  // exist, slice them into pages. Reset to page 0 if the page count drops
+  // below the current page (someone left).
+  const sortedGridTiles = useMemo(
+    () => prioritizeTiles(tiles, activeSpeakers),
+    [tiles, activeSpeakers],
+  );
+  const pageCount = Math.max(1, Math.ceil(sortedGridTiles.length / GRID_PAGE_SIZE));
+  useEffect(() => {
+    if (page >= pageCount) setPage(0);
+  }, [pageCount, page]);
+  const visibleTiles = sortedGridTiles.slice(
+    page * GRID_PAGE_SIZE,
+    (page + 1) * GRID_PAGE_SIZE,
+  );
+  const gridClass = gridColsFor(visibleTiles.length);
+
   return (
-    <div className="absolute inset-0 z-40 flex flex-col overflow-hidden bg-surface">
+    <div className="fixed inset-0 z-[60] flex flex-col overflow-hidden bg-surface">
-      <div className="relative min-h-0 flex-1">
+      {/* Content area. pb-24 reserves ~96px space at the bottom for the
-        {speaker && (
+          floating controls bar so tiles never sit behind it. */}
-          <div className="absolute inset-0">
+      <div className="relative flex min-h-0 flex-1 flex-col pb-24">
-            {speaker.remoteSharing ? (
+        {hasFocus ? (
-              <FullscreenShare speaker={speaker} remoteScreenShares={remoteScreenShares} conversationMembers={conversationMembers} />
+          <>
-            ) : (
+            <div
-              <div className="h-full w-full [&>div]:rounded-none [&>div]:border-0">
+              className="relative min-h-0 flex-1 cursor-pointer p-4 pb-2 [&>div]:h-full [&>div]:w-full"
-                <CallParticipantTile
+              onClick={() => onFocusTile(speaker!.id)}
-                  userId={speaker.userId}
+              title="Zurück zur Übersicht"
-                  displayName={speaker.displayName}
+            >
-                  avatarUrl={speaker.avatarUrl}
+              <TileRender
-                  me={speaker.self}
+                tile={speaker!}
-                  muted={speaker.muted}
+                activeSpeakers={activeSpeakers}
-                  speaking={activeSpeakers.has(speaker.userId)}
-                  sharing={speaker.sharing}
-                  video={speaker.video}
                 e2ee={e2ee}
+                remoteScreenShares={remoteScreenShares}
+                conversationMembers={conversationMembers}
                 focused
+                {...(onTileContextMenu
+                  ? { onContextMenu: (e: React.MouseEvent) => onTileContextMenu(speaker!, e) }
+                  : {})}
               />
             </div>
-            )}
-          </div>
-        )}
-
             {others.length > 0 && (
-          <div className="absolute bottom-24 right-4 flex w-[180px] flex-col gap-2">
+              <div className="flex h-[160px] shrink-0 gap-2.5 overflow-x-auto px-4 pb-2">
-            {others.slice(0, 4).map((p) => (
+                {others.map((p) => (
-              <div key={p.userId} className="h-[100px] backdrop-blur-xl">
+                  <div
-                <CallParticipantTile
+                    key={p.id}
-                  userId={p.userId}
+                    className="h-full w-[220px] shrink-0 [&>div]:h-full [&>div]:w-full"
-                  displayName={p.displayName}
+                  >
-                  avatarUrl={p.avatarUrl}
+                    <TileRender
-                  me={p.self}
+                      tile={p}
-                  muted={p.muted}
+                      activeSpeakers={activeSpeakers}
-                  speaking={activeSpeakers.has(p.userId)}
-                  sharing={p.sharing}
-                  video={p.video}
                       e2ee={e2ee}
+                      remoteScreenShares={remoteScreenShares}
+                      conversationMembers={conversationMembers}
                       size="small"
-                  onClick={() => onFocusTile(p.userId)}
+                      onClick={() => onFocusTile(p.id)}
+                      {...(onTileContextMenu
+                        ? { onContextMenu: (e: React.MouseEvent) => onTileContextMenu(p, e) }
+                        : {})}
                     />
                   </div>
                 ))}
               </div>
             )}
+          </>
+        ) : (
+          <div className="min-h-0 flex-1 p-4">
+            <div className={'grid h-full gap-2 ' + gridClass}>
+              {visibleTiles.map((p) => (
+                <div key={p.id} className="min-h-0 min-w-0 [&>div]:h-full [&>div]:w-full">
+                  <TileRender
+                    tile={p}
+                    activeSpeakers={activeSpeakers}
+                    e2ee={e2ee}
+                    remoteScreenShares={remoteScreenShares}
+                    conversationMembers={conversationMembers}
+                    onClick={() => onFocusTile(p.id)}
+                    {...(onTileContextMenu
+                      ? { onContextMenu: (e: React.MouseEvent) => onTileContextMenu(p, e) }
+                      : {})}
+                  />
+                </div>
+              ))}
+            </div>
+            {pageCount > 1 && (
+              <div className="mt-2 flex items-center justify-center gap-3 text-xs text-fg-muted">
+                <button
+                  type="button"
+                  onClick={() => setPage((p) => (p === 0 ? pageCount - 1 : p - 1))}
+                  className="cursor-pointer rounded-md border border-line bg-surface-2 px-2 py-1 hover:bg-surface-3"
+                  aria-label="Vorherige Seite"
+                >
+                  ‹
+                </button>
+                <span className="tabular-nums">
+                  {page + 1} / {pageCount}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setPage((p) => (p + 1) % pageCount)}
+                  className="cursor-pointer rounded-md border border-line bg-surface-2 px-2 py-1 hover:bg-surface-3"
+                  aria-label="Nächste Seite"
+                >
+                  ›
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
 
       {!hintGone && (
         <div
@@ -547,30 +909,6 @@ function FullscreenCall({
         {controls}
       </div>
     </div>
-    </div>
-  );
-}
-
-function FullscreenShare({
-  speaker,
-  remoteScreenShares,
-  conversationMembers,
-}: {
-  speaker: Tile;
-  remoteScreenShares: StageProps['remoteScreenShares'];
-  conversationMembers: StageProps['conversationMembers'];
-}) {
-  const share = remoteScreenShares.find((s) => s.participantId === speaker.userId);
-  const member = conversationMembers.find((m) => m.userId === speaker.userId);
-  if (!share) return null;
-  return (
-    <div className="h-full w-full">
-      <ScreenShareViewer
-        share={share}
-        avatarUrl={member?.profile?.avatarUrl ?? speaker.avatarUrl}
-        displayName={member?.profile?.displayName ?? speaker.displayName}
-      />
-    </div>
   );
 }
 

apps/desktop/src/components/IncomingCallPanel.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useCall } from '../context/CallContext';
 import { useFriendshipsContext } from '../context/FriendshipsContext';
 import { AvatarColorKey, colorKeyFor } from './CallParticipantTile';
-import { LockIcon, PhoneIcon, PhoneOffIcon } from './icons';
+import { LockIcon, PhoneIcon, PhoneOffIcon, VideoIcon } from './icons';
 
 interface Props {
   conversation: ConversationSummary;
@@ -99,23 +99,37 @@ export function IncomingCallPanel({ conversation }: Props) {
             </>
           )}
         </p>
-        <div className="mt-5 flex w-full max-w-[360px] gap-3">
+        <div className="mt-5 flex w-full max-w-[440px] flex-wrap gap-3">
           <button
             type="button"
             onClick={rejectIncoming}
-            className="inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-[14px] border border-rose-500/40 bg-transparent px-5 py-3.5 text-sm font-semibold text-rose-600 transition hover:bg-rose-500/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/40 dark:text-rose-400"
+            className="inline-flex flex-1 basis-[30%] cursor-pointer items-center justify-center gap-2 rounded-[14px] border border-rose-500/40 bg-transparent px-4 py-3.5 text-sm font-semibold text-rose-600 transition hover:bg-rose-500/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/40 dark:text-rose-400"
           >
             <PhoneOffIcon className="h-4 w-4" />
             <span>{t('app:call.decline')}</span>
           </button>
           <button
             type="button"
-            onClick={() => void acceptIncoming()}
+            onClick={() => void acceptIncoming('audio')}
-            className="inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-[14px] bg-emerald-600 px-5 py-3.5 text-sm font-semibold text-white shadow-accept-btn transition hover:bg-emerald-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50"
+            className="inline-flex flex-1 basis-[30%] cursor-pointer items-center justify-center gap-2 rounded-[14px] bg-emerald-600 px-4 py-3.5 text-sm font-semibold text-white shadow-accept-btn transition hover:bg-emerald-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50"
           >
             <PhoneIcon className="h-4 w-4" />
-            <span>{t('app:call.accept')}</span>
+            <span>
+              {state.mediaKind === 'video'
+                ? t('app:call.accept_audio', { defaultValue: 'Nur Audio' })
+                : t('app:call.accept')}
+            </span>
           </button>
+          {state.mediaKind === 'video' && (
+            <button
+              type="button"
+              onClick={() => void acceptIncoming('video')}
+              className="inline-flex flex-1 basis-[30%] cursor-pointer items-center justify-center gap-2 rounded-[14px] bg-accent px-4 py-3.5 text-sm font-semibold text-accent-fg shadow-accept-btn transition hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            >
+              <VideoIcon className="h-4 w-4" />
+              <span>{t('app:call.accept_video', { defaultValue: 'Mit Video' })}</span>
+            </button>
+          )}
         </div>
       </div>
     </section>

apps/desktop/src/components/LinkPreviewCard.tsx

@@ -0,0 +1,49 @@
+import { useLinkPreview } from '../lib/useLinkPreview';
+
+interface Props {
+  url: string;
+}
+
+// Renders a compact OpenGraph preview card under a message bubble. Fetches
+// lazily through the edge function; silent when the URL returned no meta.
+export function LinkPreviewCard({ url }: Props) {
+  const preview = useLinkPreview(url);
+  if (!preview || !preview.ok) return null;
+  if (!preview.title && !preview.description && !preview.imageUrl) return null;
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noreferrer noopener"
+      className="mt-2 flex max-w-[320px] overflow-hidden rounded-lg border border-line bg-surface-2 text-sm no-underline transition hover:bg-surface-3"
+    >
+      {preview.imageUrl && (
+        <img
+          src={preview.imageUrl}
+          alt=""
+          loading="lazy"
+          className="h-20 w-20 shrink-0 object-cover"
+          onError={(e) => {
+            (e.currentTarget as HTMLImageElement).style.display = 'none';
+          }}
+        />
+      )}
+      <div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5 p-2.5">
+        {preview.siteName && (
+          <p className="truncate text-[10px] uppercase tracking-wider text-fg-muted">
+            {preview.siteName}
+          </p>
+        )}
+        {preview.title && (
+          <p className="line-clamp-2 text-sm font-semibold text-fg">
+            {preview.title}
+          </p>
+        )}
+        {preview.description && (
+          <p className="line-clamp-2 text-xs text-fg-muted">{preview.description}</p>
+        )}
+      </div>
+    </a>
+  );
+}

apps/desktop/src/components/MentionAutocomplete.tsx

@@ -0,0 +1,103 @@
+import type { ConversationSummary } from '@chat-app/shared/chat';
+import { useEffect, useState } from 'react';
+
+import { Avatar } from './Avatar';
+
+interface Props {
+  members: ConversationSummary['members'];
+  query: string;
+  excludeUserId: string | undefined;
+  onSelect: (username: string) => void;
+  onClose: () => void;
+}
+
+// Dropdown shown above the composer when the user has typed `@` followed
+// by the start of a member name. Keyboard-first — arrow keys move through,
+// enter/tab commits, escape cancels.
+export function MentionAutocomplete({
+  members,
+  query,
+  excludeUserId,
+  onSelect,
+  onClose,
+}: Props) {
+  const q = query.toLowerCase();
+  const matches = members
+    .filter((m) => m.userId !== excludeUserId)
+    .filter((m) => {
+      if (!q) return true;
+      const name = (m.profile?.displayName ?? '').toLowerCase();
+      const handle = (m.profile?.username ?? '').toLowerCase();
+      return name.includes(q) || handle.includes(q);
+    })
+    .slice(0, 8);
+
+  const [active, setActive] = useState(0);
+  useEffect(() => {
+    setActive(0);
+  }, [query]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (matches.length === 0) return;
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActive((i) => (i + 1) % matches.length);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActive((i) => (i - 1 + matches.length) % matches.length);
+      } else if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        const pick = matches[active];
+        if (pick?.profile?.username) onSelect(pick.profile.username);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => {
+      window.removeEventListener('keydown', onKey, true);
+    };
+  }, [matches, active, onSelect, onClose]);
+
+  if (matches.length === 0) return null;
+
+  return (
+    <div
+      role="listbox"
+      aria-label="Mitglieder"
+      className="absolute bottom-full left-0 right-0 z-20 mb-2 max-h-64 overflow-y-auto rounded-xl border border-line bg-surface-2 p-1 shadow-xl"
+    >
+      {matches.map((m, idx) => {
+        const name = m.profile?.displayName ?? m.profile?.username ?? '?';
+        const handle = m.profile?.username ?? '';
+        const isActive = idx === active;
+        return (
+          <button
+            key={m.userId}
+            type="button"
+            role="option"
+            aria-selected={isActive}
+            onMouseEnter={() => setActive(idx)}
+            onClick={() => {
+              if (m.profile?.username) onSelect(m.profile.username);
+            }}
+            className={
+              'flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition ' +
+              (isActive ? 'bg-accent/20 text-fg' : 'text-fg-muted hover:bg-surface-3')
+            }
+          >
+            <Avatar
+              displayName={name}
+              url={m.profile?.avatarUrl ?? null}
+              className="h-6 w-6 text-[10px]"
+            />
+            <span className="min-w-0 flex-1 truncate text-fg">{name}</span>
+            <span className="shrink-0 text-[10px] text-fg-muted">@{handle}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

apps/desktop/src/components/MessageBubble.tsx

@@ -13,13 +13,27 @@ import { useAuth } from '../context/AuthContext';
 import { devLocalSecretStore } from '../lib/secretStore';
 import { supabase } from '../lib/supabase';
 import type { AggregatedReaction } from '../lib/useMessageReactions';
+import { extractFirstUrl } from '../lib/useLinkPreview';
+import { AttachmentAudio } from './AttachmentAudio';
+import { AttachmentGeneric } from './AttachmentGeneric';
 import { AttachmentImage } from './AttachmentImage';
+import { AttachmentPdf } from './AttachmentPdf';
+import { AttachmentVideo } from './AttachmentVideo';
+import { LinkPreviewCard } from './LinkPreviewCard';
 import { Avatar } from './Avatar';
-import { PencilIcon, PhoneIcon, PhoneOffIcon, SmileIcon, SpinnerIcon, TrashIcon, XIcon } from './icons';
+import { ForwardIcon, PencilIcon, PhoneIcon, PhoneOffIcon, ReplyIcon, SmileIcon, SpinnerIcon, TrashIcon, XIcon } from './icons';
 
 const EMOJI_CHOICES = ['👍', '❤️', '😂', '🎉', '🔥', '😮', '😢', '🙏'];
 const EDIT_WINDOW_MS = 24 * 60 * 60 * 1000;
 
+export interface QuotedRef {
+  id: string;
+  senderName: string;
+  snippet: string;
+  isAttachment: boolean;
+  deleted: boolean;
+}
+
 interface Props {
   message: DecryptedMessage;
   mine: boolean;
@@ -32,6 +46,20 @@ interface Props {
   reactions: AggregatedReaction[];
   onToggleReaction: (emoji: string) => Promise<void>;
   showSeen?: boolean;
+  /** Delivery state for own messages: 'sent' / 'delivered' / 'read'. */
+  deliveryState?: 'sent' | 'delivered' | 'read';
+  /** Resolved quoted message info (parent does the lookup). */
+  quoted?: QuotedRef | null;
+  /** Tap-to-jump on quote bubble. Receives the quoted message's id. */
+  onJumpToMessage?: (id: string) => void;
+  /** Hover action: parent receives current message to start a reply. */
+  onReply?: (m: DecryptedMessage) => void;
+  /** Hover action: parent opens forward dialog for current message. */
+  onForward?: (m: DecryptedMessage) => void;
+  /** Click on the message's avatar surfaces the author's profile card. */
+  onAvatarClick?: (userId: string, ev: React.MouseEvent) => void;
+  /** Highlighted state — set briefly after a jump. */
+  highlighted?: boolean;
 }
 
 export function MessageBubble({
@@ -45,6 +73,13 @@ export function MessageBubble({
   reactions,
   onToggleReaction,
   showSeen = false,
+  deliveryState,
+  quoted = null,
+  onJumpToMessage,
+  onReply,
+  onForward,
+  onAvatarClick,
+  highlighted = false,
 }: Props) {
   const { t } = useTranslation(['app']);
   const { session, device } = useAuth();
@@ -65,6 +100,47 @@ export function MessageBubble({
   const withinEditWindow = age < EDIT_WINDOW_MS;
   const bodyText = initialText;
   const attachments = initialAttachments;
+
+  // /tempmsg ephemeral window. expireMs embedded in plaintext JSON; sender
+  // fires the soft-delete when the clock runs out. Receivers just watch
+  // the deletedAt flip via realtime.
+  const expireMs = parsed.kind === 'text' ? parsed.expireMs : undefined;
+  const [tickNow, setTickNow] = useState<number>(() => Date.now());
+  useEffect(() => {
+    if (expireMs === undefined) return;
+    const id = window.setInterval(() => setTickNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, [expireMs]);
+  const msLeft =
+    expireMs !== undefined
+      ? Math.max(0, expireMs - (tickNow - createdAt.getTime()))
+      : null;
+
+  useEffect(() => {
+    if (!mine) return;
+    if (expireMs === undefined) return;
+    if (message.deletedAt) return;
+    const remaining = Math.max(0, expireMs - age);
+    const timer = window.setTimeout(() => {
+      void softDeleteMessage(supabase, message.id).catch((err: unknown) => {
+        console.warn('ephemeral auto-delete failed', err);
+      });
+    }, remaining);
+    return () => window.clearTimeout(timer);
+  }, [mine, expireMs, age, message.id, message.deletedAt]);
+
+  // Receiver-side auto-hide when the expiry window elapses even if the
+  // sender's delete hasn't propagated yet (network hiccup, offline-sender).
+  const [localExpired, setLocalExpired] = useState<boolean>(
+    msLeft !== null && msLeft <= 0,
+  );
+  useEffect(() => {
+    if (expireMs === undefined) return;
+    if (localExpired) return;
+    const remaining = Math.max(0, expireMs - age);
+    const t = window.setTimeout(() => setLocalExpired(true), remaining);
+    return () => window.clearTimeout(t);
+  }, [expireMs, age, localExpired]);
   const canEdit =
     parsed.kind === 'text' &&
     mine &&
@@ -149,13 +225,16 @@ export function MessageBubble({
     [onToggleReaction],
   );
 
-  if (message.deletedAt) {
+  if (message.deletedAt || localExpired) {
     return (
       <div className={'flex items-end gap-2 ' + (mine ? 'flex-row-reverse' : '')}>
         <AvatarSlot
           show={isLastOfRun}
           url={senderAvatarUrl ?? null}
           displayName={senderDisplayName ?? null}
+          {...(onAvatarClick
+            ? { onClick: (ev: React.MouseEvent) => onAvatarClick(message.senderId, ev) }
+            : {})}
         />
         <div className="max-w-[calc(70%-2.5rem)] rounded-2xl border border-line bg-surface-2 px-3.5 py-1.5 text-xs italic text-fg-muted">
           {t('app:chats.deleted')}
@@ -228,21 +307,78 @@ export function MessageBubble({
           </div>
         ) : (
           <div
+            data-message-id={message.id}
             className={
-              'break-words px-3.5 py-2 text-sm ' +
+              'break-words px-3.5 py-2 text-sm transition ' +
+              (highlighted ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-surface-3 ' : '') +
               (mine
                 ? 'rounded-[18px_18px_4px_18px] bg-accent text-accent-fg'
                 : 'rounded-[18px_18px_18px_4px] border border-line text-fg')
             }
           >
+            {quoted && (
+              <button
+                type="button"
+                onClick={() => onJumpToMessage?.(quoted.id)}
+                className={
+                  'mb-1.5 flex w-full cursor-pointer items-stretch gap-2 rounded-md pl-2 pr-2.5 py-1.5 text-left text-xs transition hover:brightness-110 hover:shadow-sm ' +
+                  (mine
+                    ? 'bg-white/10 text-accent-fg/90'
+                    : 'bg-surface-2/80 text-fg-muted ring-1 ring-inset ring-line')
+                }
+              >
+                <span
+                  aria-hidden="true"
+                  className={
+                    '-ml-1 w-1 shrink-0 rounded-full ' +
+                    (mine ? 'bg-white/70' : 'bg-accent')
+                  }
+                />
+                <span className="min-w-0 flex-1 pl-1">
+                  <span
+                    className={
+                      'flex items-center gap-1 truncate text-[11px] font-semibold ' +
+                      (mine ? 'text-accent-fg' : 'text-accent')
+                    }
+                  >
+                    <ReplyIcon className="h-3 w-3 shrink-0" />
+                    <span className="truncate">{quoted.senderName}</span>
+                  </span>
+                  <span className="mt-0.5 block truncate opacity-80">
+                    {quoted.deleted
+                      ? t('app:chats.deleted')
+                      : quoted.isAttachment && !quoted.snippet
+                        ? '📎 ' + t('app:chats.attachment', { defaultValue: 'Anhang' })
+                        : quoted.snippet}
+                  </span>
+                </span>
+              </button>
+            )}
             {message.plaintext === null ? (
               <span className="italic opacity-70">…cannot decrypt</span>
             ) : (
               <>
-                {bodyText.length > 0 && <div>{bodyText}</div>}
+                {bodyText.length > 0 && <div>{renderBodyWithMentions(bodyText)}</div>}
-                {attachments.map((a) => (
+                {bodyText.length > 0 &&
-                  <AttachmentImage key={a.id} handle={a} />
+                  (() => {
-                ))}
+                    const url = extractFirstUrl(bodyText);
+                    return url ? <LinkPreviewCard url={url} /> : null;
+                  })()}
+                {attachments.map((a) => {
+                  if (a.mimeType.startsWith('audio/')) {
+                    return <AttachmentAudio key={a.id} handle={a} />;
+                  }
+                  if (a.mimeType.startsWith('image/')) {
+                    return <AttachmentImage key={a.id} handle={a} />;
+                  }
+                  if (a.mimeType.startsWith('video/')) {
+                    return <AttachmentVideo key={a.id} handle={a} />;
+                  }
+                  if (a.mimeType === 'application/pdf') {
+                    return <AttachmentPdf key={a.id} handle={a} />;
+                  }
+                  return <AttachmentGeneric key={a.id} handle={a} />;
+                })}
               </>
             )}
             <div
@@ -255,25 +391,39 @@ export function MessageBubble({
               {message.editedAt && !message.deletedAt && (
                 <span className="italic">· {t('app:chats.edited')}</span>
               )}
+              {msLeft !== null && msLeft > 0 && (
+                <span
+                  className={
+                    'inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider ' +
+                    (mine ? 'bg-white/20' : 'bg-rose-500/15 text-rose-600 dark:text-rose-300')
+                  }
+                  title="Selbstzerstörung"
+                >
+                  ⏱ {Math.ceil(msLeft / 1000)}s
+                </span>
+              )}
             </div>
           </div>
         )}
 
-        {showSeen && mine && !editing && !message.deletedAt && (
+        {mine && !editing && !message.deletedAt && deliveryState && (
-          <p className="mt-0.5 text-right text-[10px] text-fg-muted">
+          <div className="mt-0.5 flex items-center justify-end gap-1 text-[10px] text-fg-muted">
-            {t('app:chats.seen')}
+            <DeliveryTicks state={deliveryState} />
-          </p>
+            {showSeen && <span>{t('app:chats.seen')}</span>}
+          </div>
         )}
 
         {reactions.length > 0 && !editing && (
           <div className={'mt-1 flex flex-wrap gap-1 ' + (mine ? 'justify-end' : 'justify-start')}>
             {reactions.map((r) => (
               <button
-                key={r.emoji}
+                // Keying by emoji+count makes React remount the chip when the
+                // count flips, replaying the pop animation. Cheap visual cue.
+                key={r.emoji + ':' + r.count}
                 type="button"
                 onClick={() => void onToggleReaction(r.emoji)}
                 className={
-                  'inline-flex cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
+                  'inline-flex origin-bottom animate-reaction-pop cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
                   (r.mine
                     ? 'border-accent/40 bg-accent/20 text-accent'
                     : 'border-line bg-surface-2 text-fg hover:bg-surface-3')
@@ -299,6 +449,20 @@ export function MessageBubble({
                 onClick={() => setPickerOpen((v) => !v)}
                 icon={<SmileIcon className="h-4 w-4" />}
               />
+              {onReply && !message.deletedAt && (
+                <ActionButton
+                  label={t('app:chats.reply', { defaultValue: 'Antworten' })}
+                  onClick={() => onReply(message)}
+                  icon={<ReplyIcon className="h-4 w-4" />}
+                />
+              )}
+              {onForward && !message.deletedAt && (
+                <ActionButton
+                  label={t('app:chats.forward', { defaultValue: 'Weiterleiten' })}
+                  onClick={() => onForward(message)}
+                  icon={<ForwardIcon className="h-4 w-4" />}
+                />
+              )}
               {canEdit && (
                 <ActionButton
                   label="Edit"
@@ -358,14 +522,29 @@ function AvatarSlot({
   show,
   url,
   displayName,
+  onClick,
 }: {
   show: boolean;
   url: string | null;
   displayName: string | null;
+  onClick?: (ev: React.MouseEvent) => void;
 }) {
   if (!show) {
     return <div aria-hidden="true" className="h-8 w-8 shrink-0" />;
   }
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        data-user-popover-trigger
+        onClick={onClick}
+        className="shrink-0 cursor-pointer rounded-full transition hover:ring-2 hover:ring-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        aria-label={displayName ?? 'Profil'}
+      >
+        <Avatar url={url} displayName={displayName ?? ''} className="h-8 w-8 text-xs" />
+      </button>
+    );
+  }
   return (
     <Avatar
       url={url}
@@ -429,6 +608,72 @@ function formatDuration(totalSec: number): string {
   return m + ':' + s.toString().padStart(2, '0');
 }
 
+// Splits body text on `@username` tokens, rendering matches as highlighted
+// pills. Username alphabet matches Supabase citext usernames: alphanumerics
+// + underscores, length 1..32 (we don't bound here — regex is permissive
+// and keys off a leading `@` with an alnum/underscore follow).
+const MENTION_RE = /@([A-Za-z0-9_]{1,32})/g;
+
+function renderBodyWithMentions(text: string): React.ReactNode[] {
+  const out: React.ReactNode[] = [];
+  let lastIdx = 0;
+  let m: RegExpExecArray | null;
+  MENTION_RE.lastIndex = 0;
+  while ((m = MENTION_RE.exec(text)) !== null) {
+    if (m.index > lastIdx) out.push(text.slice(lastIdx, m.index));
+    out.push(
+      <span
+        key={m.index + ':' + m[1]}
+        className="rounded bg-accent/20 px-1 text-accent"
+      >
+        {m[0]}
+      </span>,
+    );
+    lastIdx = m.index + m[0].length;
+  }
+  if (lastIdx < text.length) out.push(text.slice(lastIdx));
+  return out;
+}
+
+function DeliveryTicks({ state }: { state: 'sent' | 'delivered' | 'read' }) {
+  // One checkmark for sent, two for delivered/read. Read shifts color to the
+  // accent to match WhatsApp/Telegram blue-tick convention.
+  const color =
+    state === 'read'
+      ? 'text-sky-500 dark:text-sky-400'
+      : 'text-fg-muted';
+  return (
+    <span
+      aria-label={
+        state === 'read'
+          ? 'Gelesen'
+          : state === 'delivered'
+            ? 'Zugestellt'
+            : 'Gesendet'
+      }
+      title={
+        state === 'read'
+          ? 'Gelesen'
+          : state === 'delivered'
+            ? 'Zugestellt'
+            : 'Gesendet'
+      }
+      className={'flex items-center ' + color}
+    >
+      <svg viewBox="0 0 16 12" width="14" height="10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        {state === 'sent' ? (
+          <polyline points="2 7 6 11 14 1" />
+        ) : (
+          <>
+            <polyline points="1 7 5 11 11 2" />
+            <polyline points="6 11 10 11 14 1" />
+          </>
+        )}
+      </svg>
+    </span>
+  );
+}
+
 function ActionButton({
   label,
   onClick,

apps/desktop/src/components/ParticipantVolumeMenu.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import {
+  getParticipantVolume,
+  setParticipantVolume,
+  subscribeParticipantVolumes,
+} from '../lib/participantVolumes';
+
+interface Props {
+  userId: string;
+  displayName: string;
+  x: number;
+  y: number;
+  onClose: () => void;
+}
+
+const MENU_W = 240;
+const MENU_H = 84;
+
+export function ParticipantVolumeMenu({
+  userId,
+  displayName,
+  x,
+  y,
+  onClose,
+}: Props) {
+  const [volume, setVolume] = useState<number>(() => getParticipantVolume(userId));
+
+  // Re-sync from store in case another menu instance changed the same user.
+  useEffect(() => subscribeParticipantVolumes(() => {
+    setVolume(getParticipantVolume(userId));
+  }), [userId]);
+
+  // Outside click + Esc to close.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    const onDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (target?.closest('[data-volume-menu]')) return;
+      onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('mousedown', onDown);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('mousedown', onDown);
+    };
+  }, [onClose]);
+
+  const left = Math.min(Math.max(8, x), window.innerWidth - MENU_W - 8);
+  const top = Math.min(Math.max(8, y), window.innerHeight - MENU_H - 8);
+
+  return createPortal(
+    <div
+      data-volume-menu
+      role="dialog"
+      aria-label={'Lautstärke ' + displayName}
+      style={{ left, top, width: MENU_W }}
+      className="fixed z-[80] rounded-xl border border-line bg-surface-2/95 p-3 shadow-xl backdrop-blur-md"
+    >
+      <div className="mb-2 flex items-center justify-between gap-2 text-xs">
+        <span className="truncate font-semibold text-fg">{displayName}</span>
+        <span className="tabular-nums text-fg-muted">
+          {Math.round(volume * 100)}%
+        </span>
+      </div>
+      <input
+        type="range"
+        min={0}
+        max={1}
+        step={0.01}
+        value={volume}
+        onChange={(e) => {
+          const v = Number(e.target.value);
+          setVolume(v);
+          setParticipantVolume(userId, v);
+        }}
+        aria-label={'Lautstärke ' + displayName}
+        className="w-full accent-accent"
+      />
+    </div>,
+    document.body,
+  );
+}

apps/desktop/src/components/RingtoneSettings.tsx

@@ -0,0 +1,244 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  clearIncomingRingtone,
+  getIncomingRingtone,
+  MAX_RINGTONE_BYTES,
+  saveIncomingRingtone,
+  type StoredRingtone,
+} from '../lib/ringtoneStorage';
+import { PhoneIcon, SpinnerIcon, TrashIcon } from './icons';
+
+interface Props {
+  /** Disable interactions while a parent action is in flight. */
+  disabled?: boolean;
+}
+
+const BYTES_PER_MB = 1024 * 1024;
+
+// UI for the custom incoming-call ringtone. Single file slot. Upload
+// validates size + mime and surfaces errors inline. Preview button plays
+// the stored blob through a local <audio> element without touching the
+// shared ringtone singleton so we don't interfere with a live call.
+export function RingtoneSettings({ disabled = false }: Props) {
+  const { t } = useTranslation(['app']);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const previewRef = useRef<HTMLAudioElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const [current, setCurrent] = useState<StoredRingtone | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [playing, setPlaying] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      const cur = await getIncomingRingtone();
+      setCurrent(cur);
+    } catch (err: unknown) {
+      console.error('getIncomingRingtone failed', err);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  useEffect(() => {
+    // Revoke any preview blob URL when the component unmounts so long-lived
+    // pages don't leak memory.
+    return () => {
+      stopPreview();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function stopPreview(): void {
+    const el = previewRef.current;
+    if (el) {
+      try {
+        el.pause();
+      } catch {
+        /* ignore */
+      }
+      el.src = '';
+    }
+    previewRef.current = null;
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    setPlaying(false);
+  }
+
+  async function handleFile(file: File): Promise<void> {
+    setError(null);
+    setBusy(true);
+    try {
+      await saveIncomingRingtone(file);
+      await refresh();
+    } catch (err: unknown) {
+      const code = err instanceof Error ? err.message : 'upload_failed';
+      if (code === 'ringtone_too_large') {
+        setError(
+          t('app:settings.ringtone_error_too_large', {
+            defaultValue: 'Datei zu groß (max {{max}} MB).',
+            max: MAX_RINGTONE_BYTES / BYTES_PER_MB,
+          }),
+        );
+      } else if (code === 'ringtone_not_audio') {
+        setError(
+          t('app:settings.ringtone_error_not_audio', {
+            defaultValue: 'Nur Audio-Dateien werden unterstützt.',
+          }),
+        );
+      } else {
+        setError(
+          t('app:settings.ringtone_error_generic', {
+            defaultValue: 'Ringtone konnte nicht gespeichert werden.',
+          }),
+        );
+      }
+    } finally {
+      setBusy(false);
+      if (inputRef.current) inputRef.current.value = '';
+    }
+  }
+
+  async function handleReset(): Promise<void> {
+    setError(null);
+    setBusy(true);
+    stopPreview();
+    try {
+      await clearIncomingRingtone();
+      await refresh();
+    } catch (err: unknown) {
+      console.error('clearIncomingRingtone failed', err);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function handlePreview(): void {
+    if (!current) return;
+    if (playing) {
+      stopPreview();
+      return;
+    }
+    const url = URL.createObjectURL(current.blob);
+    const el = new Audio(url);
+    el.loop = false;
+    el.volume = 0.85;
+    el.onended = () => stopPreview();
+    el.onerror = () => {
+      setError(
+        t('app:settings.ringtone_error_play', {
+          defaultValue: 'Ringtone konnte nicht abgespielt werden.',
+        }),
+      );
+      stopPreview();
+    };
+    el.play().catch(() => {
+      setError(
+        t('app:settings.ringtone_error_play', {
+          defaultValue: 'Ringtone konnte nicht abgespielt werden.',
+        }),
+      );
+      stopPreview();
+    });
+    previewRef.current = el;
+    previewUrlRef.current = url;
+    setPlaying(true);
+  }
+
+  const hasCustom = current !== null;
+  const sizeMb = current ? (current.blob.size / BYTES_PER_MB).toFixed(2) : null;
+  const interactionsDisabled = disabled || busy;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 text-sm font-medium text-fg">
+            <PhoneIcon className="h-4 w-4 text-fg-muted" />
+            {t('app:settings.ringtone_incoming', { defaultValue: 'Eingehender Anruf' })}
+          </div>
+          <div className="mt-1 text-xs text-fg-muted">
+            {hasCustom && current
+              ? t('app:settings.ringtone_custom_active', {
+                  defaultValue: '{{name}} · {{size}} MB',
+                  name: current.filename,
+                  size: sizeMb,
+                })
+              : t('app:settings.ringtone_default_active', {
+                  defaultValue: 'Standard-Klingelton (Doppelton)',
+                })}
+          </div>
+        </div>
+
+        <div className="flex shrink-0 items-center gap-2">
+          {hasCustom && (
+            <button
+              type="button"
+              onClick={handlePreview}
+              disabled={interactionsDisabled}
+              className="cursor-pointer rounded-lg border border-line bg-surface-3 px-3 py-1.5 text-xs font-semibold text-fg transition hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {playing
+                ? t('app:settings.ringtone_stop', { defaultValue: 'Stop' })
+                : t('app:settings.ringtone_preview', { defaultValue: 'Vorhören' })}
+            </button>
+          )}
+          <input
+            ref={inputRef}
+            type="file"
+            accept="audio/*"
+            className="hidden"
+            onChange={(e) => {
+              const f = e.target.files?.[0];
+              if (f) void handleFile(f);
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            disabled={interactionsDisabled}
+            className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {busy && <SpinnerIcon className="h-3.5 w-3.5" />}
+            <span>
+              {hasCustom
+                ? t('app:settings.ringtone_replace', { defaultValue: 'Ersetzen' })
+                : t('app:settings.ringtone_upload', { defaultValue: 'Hochladen' })}
+            </span>
+          </button>
+          {hasCustom && (
+            <button
+              type="button"
+              onClick={() => void handleReset()}
+              disabled={interactionsDisabled}
+              aria-label={t('app:settings.ringtone_reset', { defaultValue: 'Zurücksetzen' })}
+              title={t('app:settings.ringtone_reset', { defaultValue: 'Zurücksetzen' })}
+              className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border border-rose-500/40 bg-rose-500/10 text-rose-600 transition hover:bg-rose-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:text-rose-300"
+            >
+              <TrashIcon className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {error && (
+        <p className="rounded-md border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs text-rose-600 dark:text-rose-300">
+          {error}
+        </p>
+      )}
+
+      <p className="text-[11px] text-fg-muted">
+        {t('app:settings.ringtone_hint', {
+          defaultValue:
+            'MP3, WAV, OGG oder M4A bis 8 MB. Nur für eingehende Anrufe — ausgehend bleibt der Standard.',
+        })}
+      </p>
+    </div>
+  );
+}

apps/desktop/src/components/ScreenShareDialog.tsx

@@ -0,0 +1,262 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  type DisplaySurfaceHint,
+  getPresetParams,
+  getScreenShareSettings,
+  PRESET_ORDER,
+  type ScreenSharePreset,
+  updateScreenShareSettings,
+} from '../lib/screenShareSettings';
+import {
+  MonitorShareIcon,
+  SpinnerIcon,
+  XIcon,
+} from './icons';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onStart: (opts: {
+    preset: ScreenSharePreset;
+    displaySurface: DisplaySurfaceHint;
+    framerate: number | null;
+  }) => Promise<void>;
+}
+
+const FRAMERATE_OPTIONS: ReadonlyArray<{ value: number | null; label: string }> = [
+  { value: null, label: 'Preset-Standard' },
+  { value: 15, label: '15 fps' },
+  { value: 30, label: '30 fps' },
+  { value: 60, label: '60 fps' },
+];
+
+// Discord-style pre-share dialog. The OS still owns the final source picker
+// (browser/OS limitation — only Chrome/Edge plus a native plugin can enumerate
+// windows from JS), but we pre-filter with the `displaySurface` hint and lock
+// in quality + framerate up-front so the user doesn't have to re-open the
+// system picker to adjust them mid-call.
+export function ScreenShareDialog({ open, onClose, onStart }: Props) {
+  const { t } = useTranslation(['app']);
+  const initial = getScreenShareSettings();
+  const [surface, setSurface] = useState<DisplaySurfaceHint>(initial.displaySurface);
+  const [preset, setPreset] = useState<ScreenSharePreset>(initial.preset);
+  const [framerate, setFramerate] = useState<number | null>(initial.framerateOverride);
+  const [includeAudio, setIncludeAudio] = useState<boolean>(initial.includeSystemAudio);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!open) return null;
+
+  async function handleStart() {
+    setBusy(true);
+    setError(null);
+    try {
+      // Persist the audio choice alongside the other picker prefs so the
+      // upstream startScreenShare picks it up on its settings read.
+      updateScreenShareSettings({ includeSystemAudio: includeAudio });
+      await onStart({ preset, displaySurface: surface, framerate });
+      onClose();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'screenshare failed');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const presetParams = getPresetParams(preset);
+  const effectiveFps = framerate ?? presetParams.framerate;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={t('app:call.share_dialog_title', { defaultValue: 'Bildschirm teilen' })}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={onClose}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="flex w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-line bg-surface-3 shadow-xl"
+      >
+        <header className="flex items-center justify-between border-b border-line px-5 py-3">
+          <div className="flex items-center gap-2">
+            <MonitorShareIcon className="h-4 w-4 text-accent" />
+            <h3 className="font-display text-sm font-semibold text-fg">
+              {t('app:call.share_dialog_title', { defaultValue: 'Bildschirm teilen' })}
+            </h3>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close"
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-fg-muted transition hover:bg-surface-2 hover:text-fg"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </header>
+
+        <div className="space-y-5 p-5">
+          <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-fg-muted">
+              {t('app:call.share_surface', { defaultValue: 'Quelle' })}
+            </p>
+            <div className="grid grid-cols-3 gap-2">
+              <SurfaceOption
+                active={surface === null}
+                onClick={() => setSurface(null)}
+                label={t('app:call.share_any', { defaultValue: 'Alle anzeigen' })}
+                sub={t('app:call.share_any_sub', { defaultValue: 'Bildschirm + Fenster' })}
+              />
+              <SurfaceOption
+                active={surface === 'monitor'}
+                onClick={() => setSurface('monitor')}
+                label={t('app:call.share_monitor', { defaultValue: 'Bildschirm' })}
+                sub={t('app:call.share_monitor_sub', { defaultValue: 'Ganzer Monitor' })}
+              />
+              <SurfaceOption
+                active={surface === 'window'}
+                onClick={() => setSurface('window')}
+                label={t('app:call.share_window', { defaultValue: 'Fenster' })}
+                sub={t('app:call.share_window_sub', { defaultValue: 'Einzelnes Fenster' })}
+              />
+            </div>
+          </div>
+
+          <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-fg-muted">
+              {t('app:call.share_quality', { defaultValue: 'Qualität' })}
+            </p>
+            <select
+              value={preset}
+              onChange={(e) => setPreset(e.target.value as ScreenSharePreset)}
+              className="w-full rounded-lg border border-line bg-surface-2 px-3 py-2 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
+            >
+              {PRESET_ORDER.map((p) => (
+                <option key={p} value={p}>
+                  {getPresetParams(p).label} · ≤ {getPresetParams(p).bitrateKbps} kbps
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-fg-muted">
+              {t('app:call.share_fps', { defaultValue: 'Bildrate' })}
+            </p>
+            <div className="flex flex-wrap gap-2">
+              {FRAMERATE_OPTIONS.map((opt) => (
+                <button
+                  key={String(opt.value)}
+                  type="button"
+                  onClick={() => setFramerate(opt.value)}
+                  className={
+                    'cursor-pointer rounded-lg border px-3 py-1.5 text-xs font-medium transition ' +
+                    (framerate === opt.value
+                      ? 'border-accent bg-accent/15 text-accent'
+                      : 'border-line bg-surface-2 text-fg hover:bg-surface')
+                  }
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+            <p className="mt-2 text-[11px] text-fg-muted">
+              {t('app:call.share_fps_effective', {
+                defaultValue: 'Effektiv: {{fps}} fps',
+                fps: effectiveFps,
+              })}
+            </p>
+          </div>
+
+          <div>
+            <label className="flex cursor-pointer items-start gap-2 rounded-lg border border-line bg-surface-2 px-3 py-2 text-xs hover:bg-surface">
+              <input
+                type="checkbox"
+                checked={includeAudio}
+                onChange={(e) => setIncludeAudio(e.target.checked)}
+                className="mt-0.5 accent-accent"
+              />
+              <span className="min-w-0 flex-1">
+                <span className="block font-semibold text-fg">
+                  {t('app:call.share_system_audio', {
+                    defaultValue: 'System-Sound mit übertragen',
+                  })}
+                </span>
+                <span className="mt-0.5 block text-[11px] text-fg-muted">
+                  {t('app:call.share_system_audio_hint', {
+                    defaultValue:
+                      '"Go Live" — Systemsound wird mitgesendet. Auf macOS braucht das extra Berechtigungen; wird sonst stumm geteilt.',
+                  })}
+                </span>
+              </span>
+            </label>
+          </div>
+
+          {error && (
+            <p role="alert" className="text-sm text-rose-600 dark:text-rose-300">
+              {error}
+            </p>
+          )}
+
+          <p className="text-[11px] text-fg-muted">
+            {t('app:call.share_hint', {
+              defaultValue:
+                'Nach "Teilen starten" öffnet das Betriebssystem den Quellen-Picker. Qualität + Bildrate werden bereits angewendet.',
+            })}
+          </p>
+        </div>
+
+        <footer className="flex items-center justify-end gap-2 border-t border-line bg-surface-2 px-5 py-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-2 text-sm text-fg transition hover:bg-surface-2"
+          >
+            {t('app:friends.action_cancel', { defaultValue: 'Abbrechen' })}
+          </button>
+          <button
+            type="button"
+            onClick={() => void handleStart()}
+            disabled={busy}
+            className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-2 text-sm font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {busy && <SpinnerIcon className="h-4 w-4" />}
+            <span>
+              {t('app:call.share_start', { defaultValue: 'Teilen starten' })}
+            </span>
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+function SurfaceOption({
+  active,
+  onClick,
+  label,
+  sub,
+}: {
+  active: boolean;
+  onClick: () => void;
+  label: string;
+  sub: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={
+        'flex flex-col items-start gap-0.5 rounded-lg border p-2.5 text-left transition ' +
+        (active
+          ? 'border-accent bg-accent/10 text-fg'
+          : 'border-line bg-surface-2 text-fg hover:bg-surface')
+      }
+    >
+      <span className="text-xs font-semibold">{label}</span>
+      <span className="text-[10px] text-fg-muted">{sub}</span>
+    </button>
+  );
+}

apps/desktop/src/components/ScreenShareViewer.tsx

@@ -32,30 +32,31 @@ export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShare
     };
   }, [share.track, watching]);
 
+  // Esc exits CSS fullscreen.
   useEffect(() => {
-    const onChange = () => {
+    if (!isFullscreen) return;
-      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsFullscreen(false);
     };
-    document.addEventListener('fullscreenchange', onChange);
+    window.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('fullscreenchange', onChange);
+    return () => window.removeEventListener('keydown', onKey);
-  }, []);
+  }, [isFullscreen]);
 
+  // CSS-only "app fullscreen" — Discord-style: overlay the whole window
+  // including the left sidebar + chat list. Native Fullscreen API is
+  // unreliable in Tauri's WKWebView and doesn't add useful chrome-hiding
+  // beyond what `fixed inset-0 z-[60]` already gives us.
   const toggleFullscreen = () => {
-    const el = containerRef.current;
+    setIsFullscreen((v) => !v);
-    if (!el) return;
-    if (document.fullscreenElement === el) {
-      void document.exitFullscreen();
-    } else {
-      void el.requestFullscreen();
-    }
   };
 
   return (
     <div
       ref={containerRef}
       className={
-        'overflow-hidden rounded-xl border border-emerald-500/30 bg-black ' +
+        isFullscreen
-        (isFullscreen ? 'flex h-screen w-screen flex-col rounded-none' : '')
+          ? 'fixed inset-0 z-[60] flex h-screen w-screen flex-col overflow-hidden border-0 bg-black'
+          : 'flex h-full w-full flex-col overflow-hidden rounded-xl border border-emerald-500/30 bg-black'
       }
     >
       <div className="flex shrink-0 items-center gap-2 border-b border-emerald-500/20 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-700 dark:text-emerald-200">
@@ -102,10 +103,7 @@ export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShare
           playsInline
           muted
           onDoubleClick={toggleFullscreen}
-          className={
+          className="block h-full w-full flex-1 cursor-zoom-in bg-black object-contain"
-            'block cursor-zoom-in bg-black ' +
-            (isFullscreen ? 'h-full w-full flex-1 object-contain' : 'w-full')
-          }
         />
       ) : (
         <button

apps/desktop/src/components/SoundboardManagerDialog.tsx

@@ -0,0 +1,625 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { getPttSettings } from '../lib/pttSettings';
+import { codeToShortcut } from '../lib/globalShortcut';
+import { invalidate as invalidateSoundCache, preload } from '../lib/soundboardPlayback';
+import {
+  addSound,
+  deleteSound,
+  getSoundBlob,
+  listSounds,
+  MAX_SOUND_BYTES,
+  reorderCategory,
+  type SoundboardEntry,
+  subscribeSoundboardChanges,
+  updateSound,
+} from '../lib/soundboardStorage';
+import { Modal } from './Modal';
+import {
+  AlertIcon,
+  ChevronDownIcon,
+  PencilIcon,
+  PlusIcon,
+  SpinnerIcon,
+  TrashIcon,
+} from './icons';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+const BYTES_PER_MB = 1024 * 1024;
+const CATEGORY_LIST_ID = 'sb-category-list';
+
+// Admin UI for the soundboard. Users add, rename, categorise, reorder,
+// assign hotkeys, adjust per-sound volume, preview and delete clips here.
+// In-call panel only reads the resulting manifest.
+export function SoundboardManagerDialog({ open, onClose }: Props) {
+  const { t } = useTranslation(['app']);
+  const fileRef = useRef<HTMLInputElement | null>(null);
+  const previewRef = useRef<HTMLAudioElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const [entries, setEntries] = useState<SoundboardEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [previewingId, setPreviewingId] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      setEntries(await listSounds());
+    } catch (err: unknown) {
+      console.error('listSounds failed', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    void refresh();
+    // External mutations (hotkey fires, multi-tab edits) should reflect
+    // immediately while the dialog is open.
+    const unsub = subscribeSoundboardChanges(() => {
+      void refresh();
+    });
+    return () => {
+      unsub();
+      stopPreview();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, refresh]);
+
+  useEffect(() => {
+    return () => stopPreview();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const categories = useMemo(() => {
+    const set = new Set<string>();
+    for (const e of entries) if (e.category) set.add(e.category);
+    return Array.from(set).sort((a, b) => a.localeCompare(b));
+  }, [entries]);
+
+  const grouped = useMemo(() => {
+    const map = new Map<string, SoundboardEntry[]>();
+    for (const e of entries) {
+      const key = e.category ?? '';
+      const arr = map.get(key);
+      if (arr) arr.push(e);
+      else map.set(key, [e]);
+    }
+    return map;
+  }, [entries]);
+
+  function stopPreview(): void {
+    const el = previewRef.current;
+    if (el) {
+      try {
+        el.pause();
+      } catch {
+        /* ignore */
+      }
+      el.src = '';
+    }
+    previewRef.current = null;
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    setPreviewingId(null);
+  }
+
+  async function handleAdd(file: File): Promise<void> {
+    setError(null);
+    setBusyId('__add');
+    try {
+      await addSound({ file });
+      await refresh();
+    } catch (err: unknown) {
+      const code = err instanceof Error ? err.message : 'add_failed';
+      if (code === 'sound_too_large') {
+        setError(
+          t('app:soundboard.error_too_large', {
+            defaultValue: 'Datei zu groß (max {{max}} MB).',
+            max: MAX_SOUND_BYTES / BYTES_PER_MB,
+          }),
+        );
+      } else if (code === 'sound_not_audio') {
+        setError(
+          t('app:soundboard.error_not_audio', {
+            defaultValue: 'Nur Audio-Dateien werden unterstützt.',
+          }),
+        );
+      } else {
+        setError(
+          t('app:soundboard.error_generic', {
+            defaultValue: 'Sound konnte nicht gespeichert werden.',
+          }),
+        );
+      }
+    } finally {
+      setBusyId(null);
+      if (fileRef.current) fileRef.current.value = '';
+    }
+  }
+
+  async function handlePatch(
+    id: string,
+    patch: Parameters<typeof updateSound>[1],
+  ): Promise<void> {
+    setBusyId(id);
+    try {
+      await updateSound(id, patch);
+    } catch (err: unknown) {
+      console.error('updateSound failed', err);
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  async function handleDelete(id: string): Promise<void> {
+    if (!window.confirm(t('app:soundboard.delete_confirm', { defaultValue: 'Sound löschen?' }))) {
+      return;
+    }
+    setBusyId(id);
+    try {
+      await deleteSound(id);
+      invalidateSoundCache(id);
+      if (previewingId === id) stopPreview();
+    } catch (err: unknown) {
+      console.error('deleteSound failed', err);
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  async function handlePreview(entry: SoundboardEntry): Promise<void> {
+    if (previewingId === entry.id) {
+      stopPreview();
+      return;
+    }
+    stopPreview();
+    const blob = await getSoundBlob(entry.id);
+    if (!blob) return;
+    const url = URL.createObjectURL(blob);
+    const el = new Audio(url);
+    el.volume = entry.gain;
+    el.onended = () => stopPreview();
+    el.onerror = () => stopPreview();
+    el.play().catch(() => stopPreview());
+    previewRef.current = el;
+    previewUrlRef.current = url;
+    setPreviewingId(entry.id);
+    // Opportunistic warm-up of the AudioBuffer cache so the first in-call
+    // playback doesn't pause on decode.
+    void preload(entry.id);
+  }
+
+  async function handleReorder(
+    category: string | null,
+    idx: number,
+    dir: -1 | 1,
+  ): Promise<void> {
+    const bucket = grouped.get(category ?? '') ?? [];
+    const next = idx + dir;
+    if (next < 0 || next >= bucket.length) return;
+    const reordered = bucket.slice();
+    const tmp = reordered[idx]!;
+    reordered[idx] = reordered[next]!;
+    reordered[next] = tmp;
+    setBusyId('__reorder:' + (category ?? ''));
+    try {
+      await reorderCategory(
+        category,
+        reordered.map((e) => e.id),
+      );
+    } catch (err: unknown) {
+      console.error('reorderCategory failed', err);
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  if (!open) return null;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t('app:soundboard.manager_title', { defaultValue: 'Soundboard verwalten' })}
+      size="lg"
+    >
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-xs text-fg-muted">
+            {t('app:soundboard.manager_hint', {
+              defaultValue:
+                'Beliebig viele Sounds, kein Hotkey nötig. Hotkeys feuern nur während eines Anrufs.',
+            })}
+          </p>
+          <input
+            ref={fileRef}
+            type="file"
+            accept="audio/*"
+            className="hidden"
+            onChange={(e) => {
+              const f = e.target.files?.[0];
+              if (f) void handleAdd(f);
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => fileRef.current?.click()}
+            disabled={busyId !== null}
+            className="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {busyId === '__add' ? (
+              <SpinnerIcon className="h-3.5 w-3.5" />
+            ) : (
+              <PlusIcon className="h-3.5 w-3.5" />
+            )}
+            <span>{t('app:soundboard.add', { defaultValue: 'Sound hinzufügen' })}</span>
+          </button>
+        </div>
+
+        {error && (
+          <div className="flex items-start gap-2 rounded-md border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs text-rose-600 dark:text-rose-300">
+            <AlertIcon className="mt-0.5 h-4 w-4 shrink-0" />
+            <p className="min-w-0 flex-1 break-words">{error}</p>
+          </div>
+        )}
+
+        <datalist id={CATEGORY_LIST_ID}>
+          {categories.map((c) => (
+            <option key={c} value={c} />
+          ))}
+        </datalist>
+
+        {loading ? (
+          <div className="flex items-center gap-2 text-xs text-fg-muted">
+            <SpinnerIcon className="h-3.5 w-3.5 text-accent" />
+          </div>
+        ) : entries.length === 0 ? (
+          <p className="rounded-lg border border-line bg-surface-2 px-4 py-6 text-center text-sm text-fg-muted">
+            {t('app:soundboard.empty', {
+              defaultValue: 'Noch keine Sounds. Lade oben welche hoch.',
+            })}
+          </p>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {Array.from(grouped.entries()).map(([categoryKey, bucket]) => {
+              const category = categoryKey === '' ? null : categoryKey;
+              return (
+                <SoundboardCategoryGroup
+                  key={categoryKey || '__uncat'}
+                  category={category}
+                  entries={bucket}
+                  entriesTotal={entries}
+                  busyId={busyId}
+                  previewingId={previewingId}
+                  onPatch={handlePatch}
+                  onDelete={handleDelete}
+                  onPreview={handlePreview}
+                  onReorder={handleReorder}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+interface GroupProps {
+  category: string | null;
+  entries: SoundboardEntry[];
+  entriesTotal: SoundboardEntry[];
+  busyId: string | null;
+  previewingId: string | null;
+  onPatch: (id: string, patch: Parameters<typeof updateSound>[1]) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+  onPreview: (entry: SoundboardEntry) => Promise<void>;
+  onReorder: (category: string | null, idx: number, dir: -1 | 1) => Promise<void>;
+}
+
+function SoundboardCategoryGroup({
+  category,
+  entries,
+  entriesTotal,
+  busyId,
+  previewingId,
+  onPatch,
+  onDelete,
+  onPreview,
+  onReorder,
+}: GroupProps) {
+  const { t } = useTranslation(['app']);
+  const [open, setOpen] = useState(true);
+  const label =
+    category ??
+    t('app:soundboard.category_uncategorized', { defaultValue: '(Ohne Kategorie)' });
+  return (
+    <section className="rounded-lg border border-line bg-surface-2">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-2.5 text-left"
+      >
+        <span className="text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
+          {label} · {entries.length}
+        </span>
+        <ChevronDownIcon
+          className={'h-4 w-4 text-fg-muted transition ' + (open ? '' : '-rotate-90')}
+        />
+      </button>
+      {open && (
+        <ul className="flex flex-col gap-2 border-t border-line p-3">
+          {entries.map((entry, idx) => (
+            <SoundboardRow
+              key={entry.id}
+              entry={entry}
+              entriesTotal={entriesTotal}
+              isFirst={idx === 0}
+              isLast={idx === entries.length - 1}
+              busy={busyId === entry.id}
+              previewing={previewingId === entry.id}
+              onPatch={onPatch}
+              onDelete={onDelete}
+              onPreview={onPreview}
+              onReorderUp={() => onReorder(category, idx, -1)}
+              onReorderDown={() => onReorder(category, idx, 1)}
+            />
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+interface RowProps {
+  entry: SoundboardEntry;
+  entriesTotal: SoundboardEntry[];
+  isFirst: boolean;
+  isLast: boolean;
+  busy: boolean;
+  previewing: boolean;
+  onPatch: (id: string, patch: Parameters<typeof updateSound>[1]) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+  onPreview: (entry: SoundboardEntry) => Promise<void>;
+  onReorderUp: () => Promise<void>;
+  onReorderDown: () => Promise<void>;
+}
+
+function SoundboardRow({
+  entry,
+  entriesTotal,
+  isFirst,
+  isLast,
+  busy,
+  previewing,
+  onPatch,
+  onDelete,
+  onPreview,
+  onReorderUp,
+  onReorderDown,
+}: RowProps) {
+  const { t } = useTranslation(['app']);
+  const [editingName, setEditingName] = useState(false);
+  const [nameDraft, setNameDraft] = useState(entry.name);
+  const [categoryDraft, setCategoryDraft] = useState(entry.category ?? '');
+  const [capturingHotkey, setCapturingHotkey] = useState(false);
+  const [hotkeyError, setHotkeyError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setNameDraft(entry.name);
+    setCategoryDraft(entry.category ?? '');
+  }, [entry.name, entry.category]);
+
+  useEffect(() => {
+    if (!capturingHotkey) return;
+    const onKey = (e: KeyboardEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.code === 'Escape') {
+        setCapturingHotkey(false);
+        setHotkeyError(null);
+        return;
+      }
+      // Conflict checks: PTT + other soundboard entries with this code.
+      const ptt = getPttSettings();
+      if (ptt.enabled && ptt.key === e.code) {
+        setHotkeyError(
+          t('app:soundboard.hotkey_conflict_ptt', {
+            defaultValue: 'Konflikt mit Push-to-Talk.',
+          }),
+        );
+        return;
+      }
+      const taken = entriesTotal.find((s) => s.id !== entry.id && s.hotkey === e.code);
+      if (taken) {
+        setHotkeyError(
+          t('app:soundboard.hotkey_conflict_sound', {
+            defaultValue: 'Bereits von "{{name}}" belegt.',
+            name: taken.name,
+          }),
+        );
+        return;
+      }
+      setHotkeyError(null);
+      setCapturingHotkey(false);
+      void onPatch(entry.id, { hotkey: e.code });
+    };
+    window.addEventListener('keydown', onKey, { capture: true });
+    return () => window.removeEventListener('keydown', onKey, { capture: true });
+  }, [capturingHotkey, entriesTotal, entry.id, onPatch, t]);
+
+  const hotkeyLabel = entry.hotkey ? codeToShortcut(entry.hotkey) : null;
+
+  return (
+    <li className="flex flex-wrap items-center gap-3 rounded-md border border-line bg-surface-3 px-3 py-2">
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        {editingName ? (
+          <input
+            autoFocus
+            value={nameDraft}
+            onChange={(e) => setNameDraft(e.target.value)}
+            onBlur={() => {
+              setEditingName(false);
+              if (nameDraft.trim() && nameDraft !== entry.name) {
+                void onPatch(entry.id, { name: nameDraft });
+              } else {
+                setNameDraft(entry.name);
+              }
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                (e.target as HTMLInputElement).blur();
+              }
+              if (e.key === 'Escape') {
+                setNameDraft(entry.name);
+                setEditingName(false);
+              }
+            }}
+            className="w-full rounded border border-line bg-surface-2 px-2 py-1 text-sm text-fg focus:border-accent focus:outline-none"
+          />
+        ) : (
+          <button
+            type="button"
+            onClick={() => setEditingName(true)}
+            className="flex cursor-pointer items-center gap-1.5 self-start text-sm font-semibold text-fg hover:text-accent"
+          >
+            {entry.name}
+            <PencilIcon className="h-3 w-3 opacity-50" />
+          </button>
+        )}
+        <p className="text-[10px] text-fg-muted">
+          {(entry.size / BYTES_PER_MB).toFixed(2)} MB · {entry.mime}
+        </p>
+      </div>
+
+      <input
+        type="text"
+        value={categoryDraft}
+        onChange={(e) => setCategoryDraft(e.target.value)}
+        onBlur={() => {
+          const next = categoryDraft.trim() || null;
+          if (next !== (entry.category ?? null)) {
+            void onPatch(entry.id, { category: next });
+          }
+        }}
+        list={CATEGORY_LIST_ID}
+        placeholder={t('app:soundboard.category_placeholder', {
+          defaultValue: 'Kategorie…',
+        })}
+        className="w-32 shrink-0 rounded border border-line bg-surface-2 px-2 py-1 text-xs text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
+      />
+
+      <div className="flex shrink-0 items-center gap-1">
+        <button
+          type="button"
+          onClick={() => {
+            setHotkeyError(null);
+            setCapturingHotkey((v) => !v);
+          }}
+          className={
+            'inline-flex min-w-[5rem] cursor-pointer items-center justify-center rounded border px-2 py-1 text-[11px] font-mono font-semibold transition ' +
+            (capturingHotkey
+              ? 'animate-pulse border-accent bg-accent/20 text-fg'
+              : hotkeyLabel
+                ? 'border-accent/40 bg-accent/10 text-accent'
+                : 'border-line bg-surface-2 text-fg-muted hover:bg-surface')
+          }
+          title={t('app:soundboard.hotkey_capture', {
+            defaultValue: 'Hotkey binden (Esc = abbrechen)',
+          })}
+        >
+          {capturingHotkey
+            ? t('app:soundboard.hotkey_press', { defaultValue: 'Drücke…' })
+            : hotkeyLabel ??
+              t('app:soundboard.hotkey_none', { defaultValue: 'Kein Hotkey' })}
+        </button>
+        {entry.hotkey && !capturingHotkey && (
+          <button
+            type="button"
+            onClick={() => void onPatch(entry.id, { hotkey: null })}
+            aria-label={t('app:soundboard.hotkey_clear', { defaultValue: 'Hotkey entfernen' })}
+            title={t('app:soundboard.hotkey_clear', { defaultValue: 'Hotkey entfernen' })}
+            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-fg-muted hover:bg-surface-2 hover:text-fg"
+          >
+            ×
+          </button>
+        )}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-2">
+        <input
+          type="range"
+          min={0}
+          max={1}
+          step={0.05}
+          value={entry.gain}
+          onChange={(e) => void onPatch(entry.id, { gain: Number(e.target.value) })}
+          className="accent-accent w-20"
+          title={t('app:soundboard.gain_title', {
+            defaultValue: 'Lautstärke',
+          })}
+        />
+        <button
+          type="button"
+          onClick={() => void onPreview(entry)}
+          disabled={busy}
+          className="inline-flex cursor-pointer items-center gap-1 rounded border border-line bg-surface-2 px-2 py-1 text-[11px] font-medium text-fg transition hover:bg-surface disabled:opacity-50"
+        >
+          {previewing
+            ? t('app:soundboard.preview_stop', { defaultValue: 'Stop' })
+            : t('app:soundboard.preview', { defaultValue: 'Vorhören' })}
+        </button>
+        <button
+          type="button"
+          onClick={onReorderUp}
+          disabled={busy || isFirst}
+          aria-label={t('app:soundboard.move_up', { defaultValue: 'Nach oben' })}
+          title={t('app:soundboard.move_up', { defaultValue: 'Nach oben' })}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-fg-muted hover:bg-surface-2 hover:text-fg disabled:opacity-40"
+        >
+          ↑
+        </button>
+        <button
+          type="button"
+          onClick={onReorderDown}
+          disabled={busy || isLast}
+          aria-label={t('app:soundboard.move_down', { defaultValue: 'Nach unten' })}
+          title={t('app:soundboard.move_down', { defaultValue: 'Nach unten' })}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-fg-muted hover:bg-surface-2 hover:text-fg disabled:opacity-40"
+        >
+          ↓
+        </button>
+        <button
+          type="button"
+          onClick={() => void onDelete(entry.id)}
+          disabled={busy}
+          aria-label={t('app:soundboard.delete', { defaultValue: 'Löschen' })}
+          title={t('app:soundboard.delete', { defaultValue: 'Löschen' })}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded border border-rose-500/30 bg-rose-500/10 text-rose-600 hover:bg-rose-500/20 disabled:opacity-50 dark:text-rose-300"
+        >
+          <TrashIcon className="h-3 w-3" />
+        </button>
+      </div>
+
+      {hotkeyError && capturingHotkey && (
+        <p className="basis-full text-[11px] text-rose-600 dark:text-rose-300">
+          {hotkeyError}
+        </p>
+      )}
+    </li>
+  );
+}

apps/desktop/src/components/SoundboardPanel.tsx

@@ -0,0 +1,320 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCall } from '../context/CallContext';
+import { codeToShortcut } from '../lib/globalShortcut';
+import {
+  DEFAULT_PREFS,
+  getPrefs,
+  listSounds,
+  type SoundboardEntry,
+  type SoundboardPrefs,
+  subscribeSoundboardChanges,
+} from '../lib/soundboardStorage';
+import { ChevronDownIcon, XIcon } from './icons';
+
+interface Props {
+  onClose: () => void;
+}
+
+// In-call popover that lists every stored sound grouped by category. Click a
+// pad to play through the active pipeline. Hotkey-badge shows the bound
+// accelerator (if any). Master + monitor sliders adjust the pipeline gains.
+export function SoundboardPanel({ onClose }: Props) {
+  const { t } = useTranslation(['app']);
+  const {
+    playSoundboard,
+    stopSoundboard,
+    activeSoundboardIds,
+    setSoundboardMasterGain,
+    setSoundboardMonitorGain,
+  } = useCall();
+  const [entries, setEntries] = useState<SoundboardEntry[]>([]);
+  const [prefs, setPrefs] = useState<SoundboardPrefs>(() => ({ ...DEFAULT_PREFS }));
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  const [query, setQuery] = useState('');
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+
+  const refresh = useCallback(async () => {
+    try {
+      const [all, p] = await Promise.all([listSounds(), getPrefs()]);
+      setEntries(all);
+      setPrefs(p);
+    } catch (err: unknown) {
+      console.warn('soundboard panel refresh failed', err);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+    const unsub = subscribeSoundboardChanges(() => {
+      void refresh();
+    });
+    return unsub;
+  }, [refresh]);
+
+  // Close on Esc — tapping outside is handled by the trigger's parent.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeRef.current();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return entries;
+    return entries.filter(
+      (e) =>
+        e.name.toLowerCase().includes(q) ||
+        (e.category ?? '').toLowerCase().includes(q),
+    );
+  }, [entries, query]);
+
+  const grouped = useMemo(() => {
+    const map = new Map<string, SoundboardEntry[]>();
+    for (const e of filtered) {
+      const key = e.category ?? '';
+      const arr = map.get(key);
+      if (arr) arr.push(e);
+      else map.set(key, [e]);
+    }
+    return map;
+  }, [filtered]);
+
+  function toggleCategory(key: string): void {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  }
+
+  return (
+    <div
+      role="dialog"
+      aria-label={t('app:soundboard.panel_title', { defaultValue: 'Soundboard' })}
+      className="flex w-[360px] max-h-[70vh] flex-col overflow-hidden rounded-2xl border border-line bg-surface-3 shadow-2xl"
+    >
+      <header className="flex items-center justify-between border-b border-line px-4 py-2.5">
+        <h3 className="font-display text-sm font-semibold text-fg">
+          {t('app:soundboard.panel_title', { defaultValue: 'Soundboard' })}
+        </h3>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={t('app:soundboard.panel_close', { defaultValue: 'Schließen' })}
+          className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-fg-muted transition hover:bg-surface-2 hover:text-fg"
+        >
+          <XIcon className="h-4 w-4" />
+        </button>
+      </header>
+
+      {entries.length > 0 && (
+        <div className="border-b border-line px-3 pb-2 pt-2">
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t('app:soundboard.panel_search', { defaultValue: 'Suche…' })}
+            className="w-full rounded-md border border-line bg-surface-2 px-3 py-1.5 text-xs text-fg placeholder-fg-muted focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
+          />
+        </div>
+      )}
+
+      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+        {entries.length === 0 ? (
+          <p className="py-6 text-center text-xs text-fg-muted">
+            {t('app:soundboard.panel_empty', {
+              defaultValue:
+                'Keine Sounds gespeichert. Füge welche in den Einstellungen hinzu.',
+            })}
+          </p>
+        ) : filtered.length === 0 ? (
+          <p className="py-6 text-center text-xs text-fg-muted">
+            {t('app:soundboard.panel_no_matches', {
+              defaultValue: 'Keine Treffer.',
+            })}
+          </p>
+        ) : (
+          <div className="flex flex-col gap-3">
+            {Array.from(grouped.entries()).map(([key, bucket]) => (
+              <CategorySection
+                key={key || '__uncat'}
+                categoryKey={key}
+                entries={bucket}
+                collapsed={collapsed[key] ?? false}
+                activeIds={activeSoundboardIds}
+                onToggle={() => toggleCategory(key)}
+                onActivate={(id) => {
+                  if (activeSoundboardIds.has(id)) {
+                    stopSoundboard(id);
+                  } else {
+                    void playSoundboard(id);
+                  }
+                }}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <footer className="flex flex-col gap-2 border-t border-line bg-surface-2 px-4 py-3">
+        <VolumeSlider
+          label={t('app:soundboard.panel_master', { defaultValue: 'Master' })}
+          value={prefs.masterGain}
+          onChange={(v) => {
+            setPrefs((p) => ({ ...p, masterGain: v }));
+            void setSoundboardMasterGain(v);
+          }}
+        />
+        <VolumeSlider
+          label={t('app:soundboard.panel_monitor', { defaultValue: 'Mithören' })}
+          value={prefs.monitorGain}
+          onChange={(v) => {
+            setPrefs((p) => ({ ...p, monitorGain: v }));
+            void setSoundboardMonitorGain(v);
+          }}
+        />
+        <button
+          type="button"
+          onClick={() => stopSoundboard()}
+          className="mt-1 inline-flex cursor-pointer items-center justify-center rounded-md border border-line bg-surface-3 px-3 py-1.5 text-[11px] font-semibold text-fg transition hover:brightness-95"
+        >
+          {t('app:soundboard.panel_stop_all', { defaultValue: 'Alle stoppen' })}
+        </button>
+      </footer>
+    </div>
+  );
+}
+
+interface CategorySectionProps {
+  categoryKey: string;
+  entries: SoundboardEntry[];
+  collapsed: boolean;
+  activeIds: ReadonlySet<string>;
+  onToggle: () => void;
+  onActivate: (id: string) => void;
+}
+
+function CategorySection({
+  categoryKey,
+  entries,
+  collapsed,
+  activeIds,
+  onToggle,
+  onActivate,
+}: CategorySectionProps) {
+  const { t } = useTranslation(['app']);
+  const label =
+    categoryKey === ''
+      ? t('app:soundboard.category_uncategorized', { defaultValue: '(Ohne Kategorie)' })
+      : categoryKey;
+  return (
+    <section>
+      <button
+        type="button"
+        onClick={onToggle}
+        className="mb-1.5 flex w-full cursor-pointer items-center justify-between gap-2 text-left text-[10px] font-semibold uppercase tracking-[0.1em] text-fg-muted"
+      >
+        <span>
+          {label} · {entries.length}
+        </span>
+        <ChevronDownIcon
+          className={'h-3 w-3 transition ' + (collapsed ? '-rotate-90' : '')}
+        />
+      </button>
+      {!collapsed && (
+        <div className="grid grid-cols-2 gap-1.5">
+          {entries.map((entry) => (
+            <SoundPad
+              key={entry.id}
+              entry={entry}
+              active={activeIds.has(entry.id)}
+              onActivate={() => onActivate(entry.id)}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+interface PadProps {
+  entry: SoundboardEntry;
+  active: boolean;
+  onActivate: () => void;
+}
+
+function SoundPad({ entry, active, onActivate }: PadProps) {
+  const { t } = useTranslation(['app']);
+  const hotkey = entry.hotkey ? codeToShortcut(entry.hotkey) : null;
+  const base =
+    'group relative flex min-h-[54px] cursor-pointer flex-col justify-center gap-0.5 rounded-md border px-2.5 py-2 text-left text-xs font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40';
+  const toneClass = active
+    ? 'border-rose-500 bg-rose-500/20 text-fg hover:brightness-110'
+    : 'border-line bg-surface-2 text-fg hover:border-accent hover:bg-surface-3';
+  return (
+    <button
+      type="button"
+      onClick={onActivate}
+      className={`${base} ${toneClass}`}
+      title={
+        active
+          ? t('app:soundboard.pad_stop', { defaultValue: 'Stoppen' })
+          : entry.name
+      }
+      aria-pressed={active}
+    >
+      <span className="flex items-center gap-1.5 truncate">
+        {active && (
+          <span
+            aria-hidden="true"
+            className="h-2 w-2 shrink-0 rounded-full bg-rose-500 animate-live-dot"
+          />
+        )}
+        <span className="truncate">{entry.name}</span>
+      </span>
+      <div className="flex items-center justify-between gap-1.5">
+        {hotkey ? (
+          <span className="inline-flex w-fit items-center rounded border border-line bg-surface-3 px-1 py-0.5 font-mono text-[9px] text-fg-muted">
+            {hotkey}
+          </span>
+        ) : (
+          <span aria-hidden="true" />
+        )}
+        {active && (
+          <span className="text-[9px] font-semibold uppercase tracking-[0.08em] text-rose-500 dark:text-rose-300">
+            {t('app:soundboard.pad_stop', { defaultValue: 'Stoppen' })}
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}
+
+function VolumeSlider({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  onChange: (v: number) => void;
+}) {
+  return (
+    <label className="flex items-center gap-3 text-[11px] text-fg">
+      <span className="w-16 shrink-0 text-fg-muted">{label}</span>
+      <input
+        type="range"
+        min={0}
+        max={1}
+        step={0.02}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="accent-accent flex-1"
+      />
+      <span className="w-9 shrink-0 text-right tabular-nums text-fg-muted">
+        {Math.round(value * 100)}%
+      </span>
+    </label>
+  );
+}

apps/desktop/src/components/SoundboardSettings.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  listSounds,
+  subscribeSoundboardChanges,
+  type SoundboardEntry,
+} from '../lib/soundboardStorage';
+import { SoundboardManagerDialog } from './SoundboardManagerDialog';
+import { ArrowRightIcon } from './icons';
+
+// Entry point into the soundboard manager from the settings page. Shows a
+// tiny summary (count, category count) and opens the big dialog on click.
+export function SoundboardSettings() {
+  const { t } = useTranslation(['app']);
+  const [open, setOpen] = useState(false);
+  const [entries, setEntries] = useState<SoundboardEntry[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const refresh = async () => {
+      try {
+        const all = await listSounds();
+        if (!cancelled) setEntries(all);
+      } catch (err: unknown) {
+        console.warn('listSounds failed', err);
+      }
+    };
+    void refresh();
+    const unsub = subscribeSoundboardChanges(() => {
+      void refresh();
+    });
+    return () => {
+      cancelled = true;
+      unsub();
+    };
+  }, []);
+
+  const categoryCount = new Set(entries.map((e) => e.category ?? '__uncat')).size;
+  const withHotkey = entries.filter((e) => e.hotkey !== null).length;
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-fg">
+            {t('app:soundboard.summary_title', { defaultValue: 'Deine Sounds' })}
+          </p>
+          <p className="mt-1 text-xs text-fg-muted">
+            {entries.length === 0
+              ? t('app:soundboard.summary_empty', {
+                  defaultValue: 'Noch keine Sounds vorhanden.',
+                })
+              : t('app:soundboard.summary_counts', {
+                  defaultValue:
+                    '{{sounds}} Sounds · {{categories}} Kategorien · {{hotkeys}} mit Hotkey',
+                  sounds: entries.length,
+                  categories: categoryCount,
+                  hotkeys: withHotkey,
+                })}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110"
+        >
+          <span>
+            {t('app:soundboard.manage', { defaultValue: 'Verwalten' })}
+          </span>
+          <ArrowRightIcon className="h-3.5 w-3.5" />
+        </button>
+      </div>
+      <p className="text-[11px] text-fg-muted">
+        {t('app:soundboard.settings_hint', {
+          defaultValue:
+            'Hotkeys sind optional. Sounds lassen sich auch während eines Anrufs direkt im UI abspielen.',
+        })}
+      </p>
+      <SoundboardManagerDialog open={open} onClose={() => setOpen(false)} />
+    </>
+  );
+}

apps/desktop/src/components/UserBar.tsx

@@ -1,6 +1,6 @@
 import { updateOwnProfile } from '@chat-app/shared/auth';
 import type { PresenceState } from '@chat-app/shared/supabase';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuth } from '../context/AuthContext';
@@ -8,6 +8,8 @@ import { supabase } from '../lib/supabase';
 import { Avatar } from './Avatar';
 import { ChevronDownIcon } from './icons';
 
+const STATUS_MAX = 128;
+
 const PRESENCE_OPTIONS: PresenceState[] = ['online', 'idle', 'dnd', 'invisible', 'offline'];
 
 const PRESENCE_DOT: Record<PresenceState, string> = {
@@ -25,6 +27,23 @@ export function UserBar() {
   const [busy, setBusy] = useState(false);
 
   const presence = profile?.presenceState ?? 'offline';
+  const persistedStatus = profile?.statusMessage ?? '';
+  const [statusDraft, setStatusDraft] = useState(persistedStatus);
+
+  // Re-sync local draft with the server when the profile refreshes (e.g. after
+  // a successful save) — without this the input would forget any incoming
+  // updates from another device.
+  useEffect(() => {
+    setStatusDraft(persistedStatus);
+  }, [persistedStatus]);
+
+  // Subtitle priority: custom status when online and set, else label, else "Offline".
+  const subtitle =
+    presence === 'offline'
+      ? t('app:presence.offline')
+      : persistedStatus.trim().length > 0
+        ? persistedStatus.trim()
+        : t('app:presence.' + presence);
 
   async function changePresence(next: PresenceState) {
     if (busy || next === presence) {
@@ -43,6 +62,20 @@ export function UserBar() {
     }
   }
 
+  async function saveStatus() {
+    const next = statusDraft.trim().slice(0, STATUS_MAX);
+    if (next === persistedStatus) return;
+    setBusy(true);
+    try {
+      await updateOwnProfile(supabase, { statusMessage: next.length === 0 ? null : next });
+      await refreshProfile();
+    } catch (err: unknown) {
+      console.error('updateStatusMessage failed', err);
+    } finally {
+      setBusy(false);
+    }
+  }
+
   return (
     <div className="relative">
       <button
@@ -69,9 +102,7 @@ export function UserBar() {
           <p className="truncate text-sm font-medium text-fg">
             {profile?.displayName ?? '—'}
           </p>
-          <p className="truncate text-xs text-fg-muted">
+          <p className="truncate text-xs text-fg-muted">{subtitle}</p>
-            {t('app:presence.' + presence)}
-          </p>
         </div>
         <ChevronDownIcon
           className={'h-4 w-4 text-fg-muted transition ' + (open ? 'rotate-180' : '')}
@@ -83,6 +114,30 @@ export function UserBar() {
           role="menu"
           className="absolute bottom-full left-0 right-0 mb-2 overflow-hidden rounded-lg border border-line bg-surface-3 shadow-xl"
         >
+          <div className="border-b border-line p-2">
+            <input
+              type="text"
+              value={statusDraft}
+              onChange={(e) => setStatusDraft(e.target.value.slice(0, STATUS_MAX))}
+              onBlur={() => void saveStatus()}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  void saveStatus();
+                  setOpen(false);
+                }
+                if (e.key === 'Escape') {
+                  setStatusDraft(persistedStatus);
+                  setOpen(false);
+                }
+              }}
+              placeholder={t('app:presence.status_placeholder', {
+                defaultValue: 'Status setzen…',
+              })}
+              maxLength={STATUS_MAX}
+              className="w-full rounded-md border border-line bg-surface-2 px-2 py-1.5 text-sm text-fg placeholder-fg-muted outline-none focus:border-accent"
+            />
+          </div>
           {PRESENCE_OPTIONS.map((opt) => (
             <button
               key={opt}

apps/desktop/src/components/UserProfilePopover.tsx

@@ -0,0 +1,126 @@
+import type { ProfileBrief } from '@chat-app/shared/friends';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+import { usePeerPresence } from '../lib/usePeerPresence';
+import { Avatar } from './Avatar';
+
+interface Props {
+  userId: string;
+  profile: ProfileBrief | null;
+  x: number;
+  y: number;
+  onClose: () => void;
+  onStartDm?: (userId: string) => void;
+}
+
+const PRESENCE_DOT: Record<string, string> = {
+  online: 'bg-emerald-500',
+  idle: 'bg-amber-400',
+  dnd: 'bg-rose-500',
+  invisible: 'bg-neutral-500',
+  offline: 'bg-neutral-400 dark:bg-neutral-600',
+};
+
+const CARD_W = 280;
+const CARD_H = 180;
+
+// Hover/click card surfaced from avatars around the app. Shows display name,
+// @handle, presence state + status message, plus a DM-start button when
+// the clicked profile isn't the caller.
+export function UserProfilePopover({
+  userId,
+  profile,
+  x,
+  y,
+  onClose,
+  onStartDm,
+}: Props) {
+  // Subscribe to the same presence feed that the conversation header uses,
+  // so status updates flow in live.
+  const presence = usePeerPresence(userId);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    const onDown = (e: MouseEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (t?.closest('[data-user-popover]')) return;
+      if (t?.closest('[data-user-popover-trigger]')) return;
+      onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('mousedown', onDown);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('mousedown', onDown);
+    };
+  }, [onClose]);
+
+  const left = Math.min(Math.max(8, x), window.innerWidth - CARD_W - 8);
+  const top = Math.min(Math.max(8, y), window.innerHeight - CARD_H - 8);
+
+  const displayName = profile?.displayName ?? '?';
+  const username = profile?.username ?? '';
+  const state = presence?.state ?? 'offline';
+  const showPresence = state !== 'invisible';
+  const statusMessage = presence?.statusMessage?.trim() ?? '';
+
+  return createPortal(
+    <div
+      data-user-popover
+      role="dialog"
+      aria-label={displayName}
+      style={{ left, top, width: CARD_W }}
+      className="fixed z-[80] flex flex-col gap-3 rounded-xl border border-line bg-surface-2/95 p-4 shadow-xl backdrop-blur-md"
+    >
+      <div className="flex items-center gap-3">
+        <div className="relative">
+          <Avatar
+            url={profile?.avatarUrl ?? null}
+            displayName={displayName}
+            className="h-14 w-14 text-lg"
+          />
+          {showPresence && (
+            <span
+              aria-hidden="true"
+              className={
+                'absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full ring-2 ring-surface-2 ' +
+                (PRESENCE_DOT[state] ?? PRESENCE_DOT.offline)
+              }
+            />
+          )}
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate font-display text-base font-semibold text-fg">
+            {displayName}
+          </p>
+          {username && (
+            <p className="truncate text-xs text-fg-muted">@{username}</p>
+          )}
+        </div>
+      </div>
+
+      {statusMessage && state !== 'offline' && (
+        <p className="rounded-md bg-surface-3 px-2.5 py-1.5 text-xs italic text-fg-muted">
+          {statusMessage}
+        </p>
+      )}
+
+      {onStartDm && (
+        <button
+          type="button"
+          onClick={() => {
+            onStartDm(userId);
+            onClose();
+          }}
+          className="inline-flex cursor-pointer items-center justify-center rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110"
+        >
+          Nachricht senden
+        </button>
+      )}
+    </div>,
+    document.body,
+  );
+}

apps/desktop/src/components/VoiceRecorder.tsx

@@ -0,0 +1,252 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { MicIcon, SpinnerIcon, XIcon } from './icons';
+
+interface Props {
+  /** Called with the recorded audio file when the user confirms. The button
+   *  ships as a single-attachment message, so the parent can feed it into
+   *  the normal send flow. */
+  onComplete: (file: File) => Promise<void> | void;
+  disabled?: boolean;
+}
+
+// Single-button voice recorder. Click to start; shows an inline pill with
+// elapsed time + stop + cancel while recording. On stop, hands a File to the
+// parent. No in-place preview yet — we lean on the optimistic message bubble
+// to appear once the parent sends.
+const MAX_RECORD_SEC = 60;
+
+export function VoiceRecorder({ onComplete, disabled = false }: Props) {
+  const [state, setState] = useState<'idle' | 'recording' | 'finalizing'>('idle');
+  const [elapsedSec, setElapsedSec] = useState(0);
+  const [level, setLevel] = useState(0);
+  const recorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const streamRef = useRef<MediaStream | null>(null);
+  const startedAtRef = useRef<number>(0);
+  const cancelledRef = useRef(false);
+  const audioCtxRef = useRef<AudioContext | null>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const rafRef = useRef<number>(0);
+
+  // Tick elapsed + auto-stop at MAX_RECORD_SEC.
+  useEffect(() => {
+    if (state !== 'recording') return;
+    const id = window.setInterval(() => {
+      const sec = Math.floor((Date.now() - startedAtRef.current) / 1000);
+      setElapsedSec(sec);
+      if (sec >= MAX_RECORD_SEC) {
+        const rec = recorderRef.current;
+        if (rec && rec.state !== 'inactive') rec.stop();
+      }
+    }, 200);
+    return () => {
+      window.clearInterval(id);
+    };
+  }, [state]);
+
+  // Live mic level meter via Web Audio AnalyserNode. RMS on 0..1, smoothed.
+  useEffect(() => {
+    if (state !== 'recording') return;
+    const analyser = analyserRef.current;
+    if (!analyser) return;
+    const buf = new Uint8Array(analyser.frequencyBinCount);
+    let cancelled = false;
+    const tick = () => {
+      if (cancelled) return;
+      analyser.getByteFrequencyData(buf as Uint8Array<ArrayBuffer>);
+      let sum = 0;
+      for (let i = 0; i < buf.length; i++) sum += buf[i]!;
+      setLevel(sum / (buf.length * 255));
+      rafRef.current = window.requestAnimationFrame(tick);
+    };
+    rafRef.current = window.requestAnimationFrame(tick);
+    return () => {
+      cancelled = true;
+      window.cancelAnimationFrame(rafRef.current);
+    };
+  }, [state]);
+
+  const stopStream = () => {
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+    }
+    if (audioCtxRef.current) {
+      void audioCtxRef.current.close().catch(() => {});
+      audioCtxRef.current = null;
+    }
+    analyserRef.current = null;
+    setLevel(0);
+  };
+
+  const start = async () => {
+    if (disabled) return;
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+
+      try {
+        const ctx = new (window.AudioContext ||
+          (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)();
+        const source = ctx.createMediaStreamSource(stream);
+        const analyser = ctx.createAnalyser();
+        analyser.fftSize = 256;
+        analyser.smoothingTimeConstant = 0.4;
+        source.connect(analyser);
+        audioCtxRef.current = ctx;
+        analyserRef.current = analyser;
+      } catch {
+        /* Analyser is best-effort; recording still works without level meter. */
+      }
+
+      const mime = pickMime();
+      const rec = new MediaRecorder(stream, mime ? { mimeType: mime } : undefined);
+      recorderRef.current = rec;
+      chunksRef.current = [];
+      cancelledRef.current = false;
+
+      rec.ondataavailable = (ev: BlobEvent) => {
+        if (ev.data && ev.data.size > 0) chunksRef.current.push(ev.data);
+      };
+      rec.onstop = () => {
+        const blob = new Blob(chunksRef.current, { type: rec.mimeType || 'audio/webm' });
+        chunksRef.current = [];
+        stopStream();
+        if (cancelledRef.current || blob.size === 0) {
+          setState('idle');
+          setElapsedSec(0);
+          return;
+        }
+        setState('finalizing');
+        const ext = extFor(blob.type);
+        const filename = 'voice-' + new Date().toISOString().replace(/[:.]/g, '-') + '.' + ext;
+        const file = new File([blob], filename, { type: blob.type });
+        void Promise.resolve(onComplete(file)).finally(() => {
+          setState('idle');
+          setElapsedSec(0);
+        });
+      };
+
+      rec.start();
+      startedAtRef.current = Date.now();
+      setElapsedSec(0);
+      setState('recording');
+    } catch (err: unknown) {
+      stopStream();
+      // Surface device-permission denials or capture failures via console;
+      // the composer doesn't have space for inline errors here and the
+      // browser already shows a system-level permission prompt.
+      console.error('VoiceRecorder.start failed', err);
+    }
+  };
+
+  const confirm = () => {
+    const rec = recorderRef.current;
+    if (!rec) return;
+    if (rec.state !== 'inactive') rec.stop();
+  };
+
+  const cancel = () => {
+    cancelledRef.current = true;
+    const rec = recorderRef.current;
+    if (rec && rec.state !== 'inactive') rec.stop();
+    else {
+      stopStream();
+      setState('idle');
+      setElapsedSec(0);
+    }
+  };
+
+  if (state === 'idle') {
+    return (
+      <button
+        type="button"
+        onClick={() => void start()}
+        disabled={disabled}
+        aria-label="Sprachnachricht aufnehmen"
+        title="Sprachnachricht aufnehmen"
+        className="inline-flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-surface-2 text-fg transition hover:bg-surface-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        <MicIcon className="h-4 w-4" />
+      </button>
+    );
+  }
+
+  if (state === 'finalizing') {
+    return (
+      <div className="inline-flex h-11 items-center gap-2 rounded-lg bg-surface-2 px-3 text-xs text-fg-muted">
+        <SpinnerIcon className="h-4 w-4" />
+        <span>Wird gesendet…</span>
+      </div>
+    );
+  }
+
+  // Visual level: scale from 0..1 → 0..100% width. Floor at 4% so the bar
+  // stays visible when silent.
+  const levelPct = Math.max(4, Math.min(100, Math.round(level * 180)));
+  const remaining = Math.max(0, MAX_RECORD_SEC - elapsedSec);
+
+  return (
+    <div className="inline-flex h-11 items-center gap-2 rounded-lg border border-rose-500/40 bg-rose-500/10 px-3 text-xs font-semibold text-rose-700 dark:text-rose-200">
+      <span className="h-2 w-2 animate-pulse rounded-full bg-rose-500" />
+      <span className="tabular-nums">{formatTime(elapsedSec)}</span>
+      <div
+        aria-hidden="true"
+        className="relative h-1.5 w-20 overflow-hidden rounded-full bg-rose-500/20"
+      >
+        <span
+          className="absolute inset-y-0 left-0 rounded-full bg-rose-500 transition-[width] duration-75"
+          style={{ width: levelPct + '%' }}
+        />
+      </div>
+      <span className="tabular-nums text-[10px] text-rose-700/70 dark:text-rose-200/70">
+        −{remaining}s
+      </span>
+      <button
+        type="button"
+        onClick={cancel}
+        aria-label="Aufnahme abbrechen"
+        title="Abbrechen"
+        className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-fg-muted hover:bg-surface-3 hover:text-fg"
+      >
+        <XIcon className="h-3.5 w-3.5" />
+      </button>
+      <button
+        type="button"
+        onClick={confirm}
+        aria-label="Aufnahme senden"
+        title="Senden"
+        className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-accent text-accent-fg transition hover:brightness-110"
+      >
+        <MicIcon className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+}
+
+function pickMime(): string | null {
+  const candidates = [
+    'audio/webm;codecs=opus',
+    'audio/webm',
+    'audio/ogg;codecs=opus',
+    'audio/mp4',
+  ];
+  for (const c of candidates) {
+    if (typeof MediaRecorder !== 'undefined' && MediaRecorder.isTypeSupported(c)) return c;
+  }
+  return null;
+}
+
+function extFor(mime: string): string {
+  if (mime.includes('webm')) return 'webm';
+  if (mime.includes('ogg')) return 'ogg';
+  if (mime.includes('mp4')) return 'm4a';
+  return 'bin';
+}
+
+function formatTime(sec: number): string {
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return m + ':' + s.toString().padStart(2, '0');
+}