web: add notification sound toggle and complete notifications module

web/src/components/SettingsPanel.tsx

@@ -448,6 +448,7 @@ export function SettingsPanel({ open, onClose }: Props) {
                     }
                   }}
                 />
+                <CheckboxOption checked={prefs.notificationSound} label="Notification Sound" onChange={(checked) => updatePrefs({ notificationSound: checked })} />
                 <CheckboxOption checked={prefs.messagePreview} label="Message Preview" onChange={(checked) => updatePrefs({ messagePreview: checked })} />
               </section>
 

web/src/hooks/useRealtime.ts

@@ -448,6 +448,9 @@ function maybeShowBrowserNotification(
   const titleBase = chat?.display_title || chat?.title || "New message";
   const title = isMention ? `@ Mention in ${titleBase}` : titleBase;
   const preview = buildNotificationPreview(message, prefs.messagePreview);
+  if (prefs.notificationSound) {
+    playNotificationSound();
+  }
 
   void (async () => {
     const shownViaSw = await showNotificationViaServiceWorker({
@@ -492,3 +495,34 @@ function hasMentionForUser(text: string | null, username: string | null): boolea
     }
   }
 }
+
+function playNotificationSound(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const AudioContextCtor =
+    window.AudioContext ||
+    (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+  if (!AudioContextCtor) {
+    return;
+  }
+  try {
+    const context = new AudioContextCtor();
+    const oscillator = context.createOscillator();
+    const gain = context.createGain();
+    oscillator.type = "sine";
+    oscillator.frequency.setValueAtTime(880, context.currentTime);
+    gain.gain.setValueAtTime(0.0001, context.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.08, context.currentTime + 0.01);
+    gain.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 0.16);
+    oscillator.connect(gain);
+    gain.connect(context.destination);
+    oscillator.start();
+    oscillator.stop(context.currentTime + 0.17);
+    oscillator.onended = () => {
+      void context.close();
+    };
+  } catch {
+    return;
+  }
+}

web/src/utils/preferences.ts

@@ -6,6 +6,7 @@ export interface AppPreferences {
   messageFontSize: number;
   sendMode: SendMode;
   webNotifications: boolean;
+  notificationSound: boolean;
   privateNotifications: boolean;
   groupNotifications: boolean;
   channelNotifications: boolean;
@@ -19,6 +20,7 @@ const DEFAULTS: AppPreferences = {
   messageFontSize: 16,
   sendMode: "enter",
   webNotifications: true,
+  notificationSound: true,
   privateNotifications: true,
   groupNotifications: true,
   channelNotifications: true,
@@ -40,6 +42,7 @@ export function getAppPreferences(): AppPreferences {
       messageFontSize: normalizeFontSize(parsed.messageFontSize),
       sendMode: parsed.sendMode === "ctrl_enter" ? "ctrl_enter" : "enter",
       webNotifications: typeof parsed.webNotifications === "boolean" ? parsed.webNotifications : DEFAULTS.webNotifications,
+      notificationSound: typeof parsed.notificationSound === "boolean" ? parsed.notificationSound : DEFAULTS.notificationSound,
       privateNotifications: typeof parsed.privateNotifications === "boolean" ? parsed.privateNotifications : DEFAULTS.privateNotifications,
       groupNotifications: typeof parsed.groupNotifications === "boolean" ? parsed.groupNotifications : DEFAULTS.groupNotifications,
       channelNotifications: typeof parsed.channelNotifications === "boolean" ? parsed.channelNotifications : DEFAULTS.channelNotifications,