feat(settings): add random notification sound options

Add "Random (all)" and "Random (custom)" to the completion sound
dropdown. Random-all picks a fresh sound per notification from the
built-ins plus any installed custom sounds; random-custom draws from
custom sounds only and is offered once at least one is installed.
Removing the last custom sound while random-custom is active falls
back to silence, matching the existing deleted-sound behaviour.

Generated-By: PostHog Code
Task-Id: 2e7e511c-6b31-4480-8ac1-37863ddd7c3b

Author: pauldambra

packages/ui/src/features/settings/sections/NotificationsSettings.tsx

@@ -242,6 +242,10 @@ export function NotificationsSettings() {
             <Select.Trigger className="min-w-[100px]" />
             <Select.Content>
               <Select.Item value="none">None</Select.Item>
+              <Select.Item value="random-all">Random (all)</Select.Item>
+              {customSounds.length > 0 && (
+                <Select.Item value="random-custom">Random (custom)</Select.Item>
+              )}
               <Select.Item value="guitar">Guitar solo</Select.Item>
               <Select.Item value="danilo">I'm ready</Select.Item>
               <Select.Item value="revi">Cute noise</Select.Item>

packages/ui/src/features/settings/settingsStore.test.ts

@@ -195,6 +195,11 @@ describe("feature settingsStore custom sounds", () => {
       activeSound: "meep" as CompletionSound,
       expectedSound: "meep" as CompletionSound,
     },
+    {
+      label: "last sound feeding random-custom",
+      activeSound: "random-custom" as CompletionSound,
+      expectedSound: "none" as CompletionSound,
+    },
   ])(
     "removing the $label leaves completionSound as $expectedSound",
     ({ activeSound, expectedSound }) => {
@@ -206,6 +211,14 @@ describe("feature settingsStore custom sounds", () => {
     },
   );
 
+  it("keeps random-custom active while other custom sounds remain", () => {
+    useSettingsStore.getState().addCustomSound(sound);
+    useSettingsStore.getState().addCustomSound({ ...sound, id: "def" });
+    useSettingsStore.getState().setCompletionSound("random-custom");
+    useSettingsStore.getState().removeCustomSound("abc");
+    expect(useSettingsStore.getState().completionSound).toBe("random-custom");
+  });
+
   it("persists custom sounds", async () => {
     useSettingsStore.getState().addCustomSound(sound);
 

packages/ui/src/features/settings/settingsStore.ts

@@ -45,7 +45,11 @@ export type BuiltInCompletionSound =
   | "icq";
 
 // A user-installed sound is selected by referencing its id as `custom:<id>`.
-export type CompletionSound = BuiltInCompletionSound | `custom:${string}`;
+export type CompletionSound =
+  | BuiltInCompletionSound
+  | "random-all"
+  | "random-custom"
+  | `custom:${string}`;
 
 // A notification sound the user recorded or imported. The clip is stored inline
 // as a base64 data URL so it persists with the rest of the settings (no host
@@ -276,14 +280,21 @@ export const useSettingsStore = create<SettingsStore>()(
       addCustomSound: (sound) =>
         set((state) => ({ customSounds: [...state.customSounds, sound] })),
       removeCustomSound: (id) =>
-        set((state) => ({
-          customSounds: state.customSounds.filter((s) => s.id !== id),
-          // If the deleted sound was the active one, fall back to silence.
-          completionSound:
-            state.completionSound === `custom:${id}`
+        set((state) => {
+          const customSounds = state.customSounds.filter((s) => s.id !== id);
+          // If the deleted sound was the active one, or it was the last sound
+          // feeding "random-custom", fall back to silence.
+          const soundNowUnplayable =
+            state.completionSound === `custom:${id}` ||
+            (state.completionSound === "random-custom" &&
+              customSounds.length === 0);
+          return {
+            customSounds,
+            completionSound: soundNowUnplayable
               ? "none"
               : state.completionSound,
-        })),
+          };
+        }),
       renameCustomSound: (id, name) =>
         set((state) => ({
           customSounds: state.customSounds.map((s) =>

packages/ui/src/utils/sounds.test.ts

@@ -2,7 +2,7 @@ import type {
   CompletionSound,
   CustomSound,
 } from "@posthog/ui/features/settings/settingsStore";
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { playbackRateForTaskDuration, resolveSoundUrl } from "./sounds";
 
 const customs: CustomSound[] = [
@@ -39,6 +39,41 @@ describe("resolveSoundUrl", () => {
     // e.g. the active sound was deleted from the library.
     expect(resolveSoundUrl("custom:gone", customs)).toBeNull();
   });
+
+  describe("random modes", () => {
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    it("'random-all' with no custom sounds picks a built-in asset", () => {
+      const url = resolveSoundUrl("random-all", []);
+      expect(url).toBeTruthy();
+      expect(url).not.toMatch(/^data:/);
+    });
+
+    it("'random-custom' with a single custom sound picks it", () => {
+      expect(resolveSoundUrl("random-custom", customs)).toBe(
+        "data:audio/wav;base64,AAAA",
+      );
+    });
+
+    it("'random-custom' with no custom sounds returns null", () => {
+      expect(resolveSoundUrl("random-custom", [])).toBeNull();
+    });
+
+    it.each([
+      ["lowest roll picks a built-in", 0, false],
+      ["highest roll picks a custom sound", 0.999999, true],
+    ])(
+      "'random-all' spans built-ins and customs: %s",
+      (_label, roll, expectCustom) => {
+        vi.spyOn(Math, "random").mockReturnValue(roll);
+        const url = resolveSoundUrl("random-all", customs);
+        expect(url === "data:audio/wav;base64,AAAA").toBe(expectCustom);
+        expect(url).toBeTruthy();
+      },
+    );
+  });
 });
 
 describe("playbackRateForTaskDuration", () => {

packages/ui/src/utils/sounds.ts

@@ -68,15 +68,27 @@ export function playbackRateForTaskDuration(durationMs: number): number {
 
 let currentAudio: HTMLAudioElement | null = null;
 
+function pickRandom(pool: string[]): string | null {
+  if (pool.length === 0) return null;
+  return pool[Math.floor(Math.random() * pool.length)];
+}
+
 // Resolves the playable URL for a completion sound: a bundled asset URL for the
-// built-ins, or the inline data URL of a user-installed custom sound. Returns
-// null for `none`, an unknown built-in, or a `custom:` id no longer installed
-// (e.g. the active sound was deleted) — callers then play nothing.
+// built-ins, the inline data URL of a user-installed custom sound, or a fresh
+// random pick per call for the `random-*` modes. Returns null for `none`, an
+// unknown built-in, a `custom:` id no longer installed (e.g. the active sound
+// was deleted), or `random-custom` with no sounds installed — callers then
+// play nothing.
 export function resolveSoundUrl(
   sound: CompletionSound,
   customSounds: CustomSound[],
 ): string | null {
   if (sound === "none") return null;
+  const customUrls = customSounds.map((s) => s.dataUrl);
+  if (sound === "random-all") {
+    return pickRandom([...Object.values(SOUND_URLS), ...customUrls]);
+  }
+  if (sound === "random-custom") return pickRandom(customUrls);
   if (sound.startsWith(CUSTOM_SOUND_PREFIX)) {
     const id = sound.slice(CUSTOM_SOUND_PREFIX.length);
     return customSounds.find((s) => s.id === id)?.dataUrl ?? null;