v3: chat mentions stop going missing, and live events get a light sound — the server skips a mention notification for anyone with the chatbox open, on the grounds that they're reading it, but "open" also meant a chatbox left open in a background tab, and the same modal cleared the unread badge on every arrival, so a mention there left no bell, no badge and no trace. Reading the chat now means open and on screen: the focus flag is re-announced on every visibilitychange, and the unread count only clears while the tab is visible. A reconnect with the chatbox open refetches the latest page, since whatever was said while the socket was down never reached the live buffer. The server's mention regex excluded a backslash and the letter w rather than word characters (\\w inside a class), so an email address mentioned its domain; it now matches the autocomplete's rule. On top of that, sounds synthesised with Web Audio — a soft blip for chat you aren't looking at, throttled, and a two-note chime for notifications and for a mention you're reading live, which gets no notification of its own — claimed through localStorage so several tabs chime once, with an on/off toggle under a new Notifications section in settings. The tab title carries the unread count, composed with the page title in useDocumentTitle so navigation doesn't drop it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/hooks/useDocumentTitle.ts

@@ -23,6 +23,19 @@ function readSiteEmoji(): string {
 
 export const SITE_EMOJI = readSiteEmoji();
 
+// The page title and the unread badge are set from different places (each
+// page, and the live-updates provider), so both are kept here and composed.
+// `null` base means no page has set one yet: keep the server-rendered title.
+let baseTitle: string | null = null;
+let badge = 0;
+
+function applyTitle() {
+  const base = baseTitle ?? document.title.replace(/^\(\d+\+?\) /, "");
+  document.title = badge > 0
+    ? `(${badge > 99 ? "99+" : badge}) ${base}`
+    : base;
+}
+
 /**
  * Keeps document.title in sync with the current page during client-side
  * navigation. Without this the tab title only ever reflects the server-rendered
@@ -37,6 +50,14 @@ export const SITE_EMOJI = readSiteEmoji();
 export function useDocumentTitle(title: string | null | undefined): void {
   useEffect(() => {
     if (title === undefined) return;
-    document.title = title ? `${title} · ${SITE_NAME}` : SITE_NAME;
+    baseTitle = title ? `${title} · ${SITE_NAME}` : SITE_NAME;
+    applyTitle();
   }, [title]);
 }
+
+/** Prefixes the tab title with an unread count, e.g. "(3) Chat · gerbeur". */
+export function setTitleBadge(count: number): void {
+  if (count === badge) return;
+  badge = count;
+  applyTitle();
+}

src/hooks/useSoundsEnabled.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from "react";
+import { readSoundsEnabled, writeSoundsEnabled } from "../utils/sound.ts";
+
+/**
+ * User preference for notification and chat sounds, persisted to localStorage
+ * (on by default). The chime itself reads the stored value at play time, so
+ * this hook only drives the settings toggle.
+ */
+export function useSoundsEnabled(): [boolean, (enabled: boolean) => void] {
+  const [enabled, setEnabledState] = useState(readSoundsEnabled);
+
+  const setEnabled = useCallback((next: boolean) => {
+    writeSoundsEnabled(next);
+    setEnabledState(next);
+  }, []);
+
+  return [enabled, setEnabled];
+}