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/pages/UserPublicProfile.tsx

@@ -42,6 +42,8 @@ import { useAuth } from "../hooks/useAuth.ts";
 import { useDocumentTitle } from "../hooks/useDocumentTitle.ts";
 import { useTheme } from "../hooks/useTheme.ts";
 import { useDefaultFeedTab } from "../hooks/useDefaultFeedTab.ts";
+import { useSoundsEnabled } from "../hooks/useSoundsEnabled.ts";
+import { previewChime } from "../utils/sound.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { useDumpListSync } from "../hooks/useDumpListSync.ts";
 import { useFading } from "../hooks/useFading.ts";
@@ -235,6 +237,7 @@ export function UserPublicProfile() {
   const navigate = useNavigate();
   const { user: me, authFetch, login, logout, token } = useAuth();
   const { style, colorScheme, setStyle, setColorScheme } = useTheme();
+  const [soundsEnabled, setSoundsEnabled] = useSoundsEnabled();
   const [defaultFeedTab, setDefaultFeedTab] = useDefaultFeedTab();
   const {
     voteCounts,
@@ -1319,6 +1322,38 @@ export function UserPublicProfile() {
               </div>
             </div>
           </section>
+          <section className="profile-section">
+            <h2 className="profile-section-title">
+              <Trans>Notifications</Trans>
+            </h2>
+            <div className="profile-appearance-grid">
+              <div className="profile-appearance-row">
+                <span className="profile-appearance-label">
+                  <Trans>Sounds</Trans>
+                </span>
+                <div className="visibility-toggle">
+                  <button
+                    type="button"
+                    className={soundsEnabled ? "active" : ""}
+                    onClick={() => {
+                      setSoundsEnabled(true);
+                      // Let the user hear what they just turned on.
+                      previewChime("notify");
+                    }}
+                  >
+                    <Trans>On</Trans>
+                  </button>
+                  <button
+                    type="button"
+                    className={soundsEnabled ? "" : "active"}
+                    onClick={() => setSoundsEnabled(false)}
+                  >
+                    <Trans>Off</Trans>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </section>
         </>
       )}