muzical-ui 0.1.1

package/components/PanelResizeHandle.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useCallback } from 'react'
+
+export type PanelResizeHandleProps = {
+  'aria-label': string
+  onSessionStart: () => void
+  onSessionMove: (deltaXFromStart: number) => void
+  onSessionEnd: () => void
+}
+
+/**
+ * Vertical drag handle for resizable flex columns (hide on small screens via parent).
+ */
+export default function PanelResizeHandle(props: PanelResizeHandleProps) {
+  const { 'aria-label': ariaLabel, onSessionStart, onSessionMove, onSessionEnd } = props
+
+  const onPointerDown = useCallback(
+    (e: { currentTarget: HTMLDivElement; clientX: number; pointerId: number; preventDefault: () => void }) => {
+      e.preventDefault()
+      const el = e.currentTarget
+      const startX = e.clientX
+      onSessionStart()
+      el.setPointerCapture(e.pointerId)
+      const move = (ev: PointerEvent): void => {
+        onSessionMove(ev.clientX - startX)
+      }
+      const up = (ev: PointerEvent): void => {
+        try {
+          el.releasePointerCapture(ev.pointerId)
+        } catch {
+          /* ignore */
+        }
+        window.removeEventListener('pointermove', move)
+        window.removeEventListener('pointerup', up)
+        window.removeEventListener('pointercancel', up)
+        onSessionEnd()
+      }
+      window.addEventListener('pointermove', move)
+      window.addEventListener('pointerup', up)
+      window.addEventListener('pointercancel', up)
+    },
+    [onSessionEnd, onSessionMove, onSessionStart],
+  )
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={ariaLabel}
+      tabIndex={0}
+      onPointerDown={onPointerDown}
+      className="group relative z-10 flex w-0 shrink-0 cursor-col-resize justify-center outline-none max-lg:hidden"
+    >
+      <div
+        className="absolute top-0 bottom-0 left-1/2 w-3 -translate-x-1/2 bg-transparent transition-colors group-hover:bg-amber-500/15 group-active:bg-amber-500/25"
+        aria-hidden
+      />
+      <div
+        className="pointer-events-none absolute top-0 bottom-0 left-1/2 w-px -translate-x-1/2 bg-zinc-200 dark:bg-zinc-700"
+        aria-hidden
+      />
+    </div>
+  )
+}

package/components/PlaybackSettingsPanel.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { useLibrary } from '@/components/LibraryProvider'
+import SettingsSwitchRow from '@/components/SettingsSwitchRow'
+
+/**
+ * Playback persistence and related options.
+ */
+export default function PlaybackSettingsPanel() {
+  const { rememberLastQueue, setRememberLastQueue } = useLibrary()
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div>
+        <h2 className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">Playback</h2>
+        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+          Control how Muzical resumes listening between sessions on this device.
+        </p>
+      </div>
+
+      <section className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900/40">
+        <SettingsSwitchRow
+          title="Remember last track and queue"
+          description="When enabled, your queue order, current track, and playhead position are restored the next time you open Muzical (tracks must still exist in the library)."
+          checked={rememberLastQueue}
+          onChange={setRememberLastQueue}
+          ariaLabel="Remember last track and queue"
+        />
+      </section>
+    </div>
+  )
+}

package/components/QueueLoadingSpinner.tsx

@@ -0,0 +1,19 @@
+/**
+ * Centered spinner shown while the playback queue is restored on startup.
+ */
+export default function QueueLoadingSpinner() {
+  return (
+    <div
+      className="flex h-full min-h-0 flex-1 flex-col items-center justify-center gap-3 px-4 py-12"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading queue"
+    >
+      <span
+        className="h-8 w-8 animate-spin rounded-full border-2 border-zinc-300 border-t-amber-500 dark:border-zinc-600 dark:border-t-amber-400"
+        aria-hidden
+      />
+      <p className="text-sm text-zinc-500 dark:text-zinc-400">Loading queue…</p>
+    </div>
+  )
+}

package/components/SettingsNav.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { SETTINGS_NAV_ITEMS } from '@/components/settings-nav-items'
+
+/**
+ * Sidebar navigation between settings subviews.
+ */
+export default function SettingsNav() {
+  const pathname = usePathname()
+
+  return (
+    <nav aria-label="Settings sections" className="flex flex-col gap-1">
+      {SETTINGS_NAV_ITEMS.map((item) => {
+        const active =
+          item.href === '/settings'
+            ? pathname === '/settings'
+            : pathname === item.href || pathname.startsWith(`${item.href}/`)
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            aria-current={active ? 'page' : undefined}
+            className={`rounded-xl px-3 py-2.5 text-sm font-medium transition ${
+              active
+                ? 'bg-amber-500/15 text-amber-900 dark:bg-amber-500/20 dark:text-amber-200'
+                : 'text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/80 dark:hover:text-zinc-100'
+            }`}
+          >
+            {item.label}
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}

package/components/SettingsOverview.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import Link from 'next/link'
+import { SETTINGS_SECTION_ITEMS } from '@/components/settings-nav-items'
+
+/**
+ * Settings landing page with links into each subsection.
+ */
+export default function SettingsOverview() {
+  return (
+    <div className="flex flex-col gap-8">
+      <div>
+        <h2 className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">Overview</h2>
+        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+          Choose a section to configure your library or how Muzical looks.
+        </p>
+      </div>
+
+      <ul className="flex flex-col gap-3" role="list">
+        {SETTINGS_SECTION_ITEMS.map((item) => (
+          <li key={item.href}>
+            <Link
+              href={item.href}
+              className="block rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm transition hover:border-amber-500/40 hover:bg-amber-50/30 dark:border-zinc-800 dark:bg-zinc-900/40 dark:hover:border-amber-500/30 dark:hover:bg-amber-500/5"
+            >
+              <span className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{item.label}</span>
+              <p className="mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{item.description}</p>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/components/SettingsShell.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import Link from 'next/link'
+import type { ReactNode } from 'react'
+import SettingsNav from '@/components/SettingsNav'
+import ThemeToggle from '@/components/ThemeToggle'
+
+type SettingsShellProps = {
+  children: ReactNode
+}
+
+/**
+ * Shared settings chrome: header, back link, and section navigation.
+ */
+export default function SettingsShell(props: SettingsShellProps) {
+  return (
+    <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden bg-zinc-100 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
+      <header className="flex shrink-0 items-center justify-between gap-4 border-b border-zinc-200 bg-white/90 px-6 py-4 backdrop-blur-sm dark:border-zinc-800/80 dark:bg-zinc-950/90">
+        <div className="flex min-w-0 items-center gap-3">
+          <Link
+            href="/"
+            className="shrink-0 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800"
+          >
+            ← Player
+          </Link>
+          <div className="min-w-0">
+            <h1 className="truncate text-sm font-semibold tracking-tight">Settings</h1>
+            <p className="truncate text-xs text-zinc-500">Configure Muzical on this device.</p>
+          </div>
+        </div>
+        <ThemeToggle />
+      </header>
+
+      <div className="flex min-h-0 w-full flex-1 overflow-hidden">
+        <aside className="hidden w-44 shrink-0 border-r border-zinc-200 px-4 py-8 dark:border-zinc-800/80 sm:block">
+          <SettingsNav />
+        </aside>
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overscroll-contain">
+          <div className="mb-6 px-6 pt-6 sm:hidden">
+            <SettingsNav />
+          </div>
+          <div className="px-6 pb-8 pt-2 sm:pt-8">{props.children}</div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/SettingsSwitchRow.tsx

@@ -0,0 +1,38 @@
+type SettingsSwitchRowProps = {
+  title: string
+  description: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+  ariaLabel: string
+}
+
+/**
+ * Labeled switch row for boolean settings.
+ */
+export default function SettingsSwitchRow(props: SettingsSwitchRowProps) {
+  return (
+    <div className="flex items-baseline justify-between gap-4">
+      <div className="min-w-0">
+        <h2 className="text-xs font-medium uppercase tracking-wider text-zinc-500">{props.title}</h2>
+        <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{props.description}</p>
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={props.checked}
+        aria-label={props.ariaLabel}
+        onClick={() => props.onChange(!props.checked)}
+        className={`relative inline-flex h-7 w-12 shrink-0 cursor-pointer rounded-full border-2 border-transparent p-0.5 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/30 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900 ${
+          props.checked ? 'bg-amber-500' : 'bg-zinc-300 dark:bg-zinc-600'
+        }`}
+      >
+        <span
+          aria-hidden
+          className={`block h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${
+            props.checked ? 'translate-x-5' : 'translate-x-0'
+          }`}
+        />
+      </button>
+    </div>
+  )
+}

package/components/ThemeProvider.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react'
+import type { ColorScheme } from '@/lib/theme-constants'
+import { THEME_STORAGE_KEY } from '@/lib/theme-constants'
+
+type ThemeContextValue = {
+  scheme: ColorScheme
+  setScheme: (next: ColorScheme) => void
+  toggleScheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null)
+
+function applySchemeToDocument(scheme: ColorScheme): void {
+  document.documentElement.classList.toggle('dark', scheme === 'dark')
+}
+
+/**
+ * Persists light/dark choice and keeps `document.documentElement` in sync with Tailwind `dark:` variants.
+ */
+export function ThemeProvider(props: { children: ReactNode }) {
+  const [scheme, setSchemeState] = useState<ColorScheme>('light')
+
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      const raw = localStorage.getItem(THEME_STORAGE_KEY)
+      const next: ColorScheme = raw === 'dark' ? 'dark' : 'light'
+      setSchemeState(next)
+      applySchemeToDocument(next)
+    })
+    return () => cancelAnimationFrame(id)
+  }, [])
+
+  const setScheme = useCallback((next: ColorScheme) => {
+    setSchemeState(next)
+    localStorage.setItem(THEME_STORAGE_KEY, next)
+    applySchemeToDocument(next)
+  }, [])
+
+  const toggleScheme = useCallback(() => {
+    setSchemeState((prev) => {
+      const next: ColorScheme = prev === 'light' ? 'dark' : 'light'
+      localStorage.setItem(THEME_STORAGE_KEY, next)
+      applySchemeToDocument(next)
+      return next
+    })
+  }, [])
+
+  const value = useMemo(
+    () => ({ scheme, setScheme, toggleScheme }),
+    [scheme, setScheme, toggleScheme],
+  )
+
+  return <ThemeContext.Provider value={value}>{props.children}</ThemeContext.Provider>
+}
+
+/**
+ * Access current theme and toggles from client components.
+ */
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext)
+  if (!ctx) {
+    throw new Error('useTheme must be used within ThemeProvider')
+  }
+  return ctx
+}

package/components/ThemeToggle.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useTheme } from '@/components/ThemeProvider'
+
+function IconSun(props: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={props.className}>
+      <path d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM2 13h2v-2H2v2zm18 0h2v-2h-2v2zM11 2v2h2V2h-2zm0 18v2h2v-2h-2zM4.22 19.78l1.42-1.42-1.42-1.42-1.42 1.42 1.42 1.42zm12.72-1.42 1.42 1.42 1.42-1.42-1.42-1.42-1.42 1.42zM19.78 4.22l-1.42 1.42 1.42 1.42 1.42-1.42-1.42-1.42zM7.05 5.64 5.64 4.22 4.22 5.64l1.42 1.42 1.41-1.42z" />
+    </svg>
+  )
+}
+
+function IconMoon(props: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={props.className}>
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  )
+}
+
+/**
+ * Cycles document color scheme between light and dark (persisted).
+ */
+export default function ThemeToggle() {
+  const { scheme, toggleScheme } = useTheme()
+  const isDark = scheme === 'dark'
+
+  return (
+    <button
+      type="button"
+      onClick={toggleScheme}
+      aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+      className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 shadow-sm transition hover:border-zinc-300 hover:bg-zinc-50 hover:text-zinc-900 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-300 dark:shadow-none dark:hover:border-zinc-500 dark:hover:bg-zinc-700 dark:hover:text-zinc-50"
+    >
+      {isDark ? <IconSun className="h-[18px] w-[18px]" /> : <IconMoon className="h-[18px] w-[18px]" />}
+    </button>
+  )
+}

package/components/YouTubeSettingsPanel.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import readStoredYoutubeApiKey from '@/lib/youtube/read-stored-youtube-api-key'
+import clearYoutubeDataApiBlocked from '@/lib/youtube/clear-youtube-data-api-blocked'
+import writeStoredYoutubeApiKey from '@/lib/youtube/write-stored-youtube-api-key'
+
+/**
+ * YouTube Data API key configuration for MusicBrainz playback.
+ */
+export default function YouTubeSettingsPanel() {
+  const [apiKey, setApiKey] = useState('')
+  const [saved, setSaved] = useState(false)
+
+  useEffect(() => {
+    setApiKey(readStoredYoutubeApiKey())
+  }, [])
+
+  const onSave = useCallback(() => {
+    writeStoredYoutubeApiKey(apiKey)
+    clearYoutubeDataApiBlocked()
+    setSaved(true)
+    window.setTimeout(() => setSaved(false), 2000)
+  }, [apiKey])
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div>
+        <h2 className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">YouTube</h2>
+        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+          MusicBrainz tracks stream via YouTube. An optional Data API key resolves videos reliably; without a key or if
+          quota is exceeded, Muzical falls back to in-player search.
+        </p>
+      </div>
+
+      <section className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900/40">
+        <h3 className="text-xs font-medium uppercase tracking-wider text-zinc-500">API key</h3>
+        <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+          Create a key in the{' '}
+          <a
+            href="https://console.cloud.google.com/apis/credentials"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-medium text-amber-700 underline decoration-amber-500/40 underline-offset-2 hover:text-amber-600 dark:text-amber-400"
+          >
+            Google Cloud Console
+          </a>{' '}
+          with the YouTube Data API v3 enabled. The key is stored only in this browser.
+        </p>
+        <label className="mt-4 block">
+          <span className="sr-only">YouTube Data API key</span>
+          <input
+            type="password"
+            autoComplete="off"
+            spellCheck={false}
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            placeholder="AIza…"
+            className="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-2.5 font-mono text-sm text-zinc-900 outline-none ring-amber-500/30 placeholder:text-zinc-400 focus:border-amber-500/50 focus:ring-2 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
+          />
+        </label>
+        <div className="mt-4 flex flex-wrap items-center gap-3">
+          <button
+            type="button"
+            onClick={onSave}
+            className="rounded-full bg-amber-500 px-4 py-2 text-sm font-medium text-zinc-950 shadow-sm transition hover:bg-amber-400"
+          >
+            Save key
+          </button>
+          {saved ? (
+            <span className="text-sm text-emerald-700 dark:text-emerald-400" role="status">
+              Saved
+            </span>
+          ) : null}
+        </div>
+      </section>
+    </div>
+  )
+}

package/components/YouTubeStreamNotification.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+type YouTubeStreamNotificationProps = {
+  visible: boolean
+  trackTitle?: string
+}
+
+/**
+ * Toast shown while a MusicBrainz track’s YouTube stream is being resolved.
+ */
+export default function YouTubeStreamNotification(props: YouTubeStreamNotificationProps) {
+  if (!props.visible) return null
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+      className="pointer-events-none fixed bottom-24 right-4 z-50 w-[min(100vw-2rem,22rem)] rounded-xl border border-zinc-200/90 bg-white/95 p-4 shadow-lg shadow-zinc-900/10 backdrop-blur-sm dark:border-zinc-700/80 dark:bg-zinc-900/95 dark:shadow-black/40"
+    >
+      <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">Resolving stream…</p>
+      {props.trackTitle ? (
+        <p className="mt-1 truncate text-xs text-zinc-600 dark:text-zinc-400">{props.trackTitle}</p>
+      ) : null}
+      <div className="mt-3 h-1 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800">
+        <div className="h-full w-1/3 animate-pulse rounded-full bg-amber-500 dark:bg-amber-400" />
+      </div>
+    </div>
+  )
+}

package/components/format-library-root-added.ts

@@ -0,0 +1,13 @@
+/**
+ * Formats when a library root folder was added for display in settings.
+ */
+export default function formatLibraryRootAdded(ts: number): string {
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      dateStyle: "medium",
+      timeStyle: "short",
+    }).format(new Date(ts));
+  } catch {
+    return new Date(ts).toLocaleString();
+  }
+}

package/components/settings-nav-items.ts

@@ -0,0 +1,40 @@
+export type SettingsNavItem = {
+  href: string;
+  label: string;
+  description: string;
+};
+
+/** Routes shown in the settings sidebar. */
+export const SETTINGS_NAV_ITEMS: readonly SettingsNavItem[] = [
+  {
+    href: "/settings",
+    label: "Overview",
+    description: "Summary and links to all settings sections.",
+  },
+  {
+    href: "/settings/library",
+    label: "Library",
+    description:
+      "Scan folders, rescan on startup, and manage configured directories.",
+  },
+  {
+    href: "/settings/youtube",
+    label: "YouTube",
+    description:
+      "YouTube Data API key for resolving MusicBrainz tracks to embeddable videos.",
+  },
+  {
+    href: "/settings/playback",
+    label: "Playback",
+    description: "Restore your queue and playhead between sessions.",
+  },
+  {
+    href: "/settings/display",
+    label: "Display",
+    description: "List density and other visual preferences in the player.",
+  },
+] as const;
+
+/** Subsections linked from the settings overview landing page. */
+export const SETTINGS_SECTION_ITEMS: readonly SettingsNavItem[] =
+  SETTINGS_NAV_ITEMS.filter((item) => item.href !== "/settings");

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/lib/format-duration.ts

@@ -0,0 +1,9 @@
+/**
+ * Formats seconds as `m:ss` for UI labels.
+ */
+export function formatDuration(totalSec: number): string {
+  const safe = Math.max(0, Math.floor(totalSec));
+  const m = Math.floor(safe / 60);
+  const s = safe % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}

package/lib/format-total-library-duration.ts

@@ -0,0 +1,14 @@
+import { formatDuration } from "@/lib/format-duration";
+
+/**
+ * Formats total library playtime for settings summary (hours when long).
+ */
+export default function formatTotalLibraryDuration(totalSec: number): string {
+  if (totalSec <= 0) return "—";
+  const hours = Math.floor(totalSec / 3600);
+  if (hours > 0) {
+    const minutes = Math.floor((totalSec % 3600) / 60);
+    return `${hours}h ${minutes}m`;
+  }
+  return formatDuration(totalSec);
+}

package/lib/library/audio-filename.ts

@@ -0,0 +1,31 @@
+import { LIBRARY_AUDIO_EXTENSIONS } from "@/lib/library/constants";
+
+const defaultExtSet = new Set(LIBRARY_AUDIO_EXTENSIONS);
+
+/**
+ * Returns true when the file name matches an enabled audio extension.
+ */
+export function isAudioFilename(
+  name: string,
+  enabledExtensions?: ReadonlySet<string>,
+): boolean {
+  const dot = name.lastIndexOf(".");
+  if (dot < 0) return false;
+  const ext = name.slice(dot).toLowerCase();
+  const set = enabledExtensions ?? defaultExtSet;
+  return set.has(ext);
+}
+
+/**
+ * Strips a known audio extension for display as a title.
+ */
+export function stripAudioExtension(
+  name: string,
+  enabledExtensions?: ReadonlySet<string>,
+): string {
+  const dot = name.lastIndexOf(".");
+  if (dot < 0) return name;
+  const ext = name.slice(dot).toLowerCase();
+  const set = enabledExtensions ?? defaultExtSet;
+  return set.has(ext) ? name.slice(0, dot) : name;
+}