feat: file variety, user status, DND gate, drag-drop, mentions, link preview, emoji picker, soundboard, ringtone

Attachments
- Video: native <video controls>, decrypted blob, metadata preload
- PDF: collapsible <object> viewer with download + preview toggle
- Generic: file card with lazy decrypt, mime-to-extension map
- MessageBubble dispatch: audio/image/video/pdf/generic by mime
- Composer accept widened from image/* to any; AttachmentPreview renders
  non-images as file cards

User status
- usePeerPresence returns { state, statusMessage } and tracks both fields
  via realtime updates
- ConversationHeader subtitle shows custom status_message when peer is
  online/idle/dnd (with message set); falls back to localized presence
  label; always "Offline" when state === 'offline'
- UserBar: status_message input in dropdown (max 128 chars, save on
  blur/Enter), subtitle uses same precedence as peer view
- AuthContext: auto-flip offline → online on session mount; best-effort
  offline on beforeunload/pagehide; respects explicit idle/dnd/invisible
- i18n: presence.status_placeholder (DE + EN)

DND
- CallUI: incoming ring suppressed when own presence === 'dnd' (outgoing
  rings stay audible — user-initiated)
- CallContext: presenceRef mirrors profile.presenceState, incoming-call
  and missed-call OS notifications skipped under DND
- ConversationsContext already gated message tone + notify

Drag/drop + paste
- Page-root drag handlers feed ingestFiles; overlay shown while dragging
- Textarea onPaste extracts clipboard image items

@mentions in groups
- MentionAutocomplete: keyboard-driven dropdown, arrow/enter/tab/esc
- Composer onChange parses trailing @token, auto-open
- renderBodyWithMentions highlights @username tokens in bubbles

Link previews
- Migration 20260421000003_link_previews.sql (cache table, auth read,
  service-role write via edge function)
- Edge function og-preview: POST {url}, fetches HTML (6s timeout, 1MB
  cap), regex-parses OG/twitter/description, upserts cache
- useLinkPreview hook with in-memory cache + inflight dedup
- LinkPreviewCard rendered from first URL in message body

Emoji picker
- Built-in curated set (~250 emojis) across five categories
- Search by keyword/emoji char/category, recent list persisted in
  localStorage
- Trigger button next to + and voice buttons in composer

Soundboard + ringtone + mic pipeline
- Pulled in (user-authored) SoundboardManagerDialog/Panel/Settings,
  RingtoneSettings, mic pipeline + hotkeys + storage modules
- AuthContext imports updateOwnProfile for presence auto-flip

Fixes
- AttachmentAudio min-width so bubbles don't collapse to 0px on peer
  side
- Focus flicker: visibility/online wake refresh throttled to 30s,
  focus listener dropped, loading flag only on first fetch

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">
-            {t('app:presence.' + presence)}
-          </p>
+          <p className="truncate text-xs text-fg-muted">{subtitle}</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}