muzical-ui 0.1.1

package/components/LibraryScanNotification.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import type { LibraryScanProgress } from '@/types/library-scan-progress'
+
+type LibraryScanNotificationProps = {
+  progress: LibraryScanProgress | null
+  onDismiss: () => void
+}
+
+/**
+ * Fixed toast with a determinate progress bar while the library is scanned.
+ */
+export default function LibraryScanNotification(props: LibraryScanNotificationProps) {
+  const { progress, onDismiss } = props
+  if (!progress) return null
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-busy={progress.percent < 100}
+      className="pointer-events-auto fixed bottom-4 right-4 z-50 w-[min(100vw-2rem,22rem)] rounded-xl border border-zinc-200/90 bg-white/95 p-4 pr-10 shadow-lg shadow-zinc-900/10 backdrop-blur-sm dark:border-zinc-700/80 dark:bg-zinc-900/95 dark:shadow-black/40"
+    >
+      <button
+        type="button"
+        onClick={onDismiss}
+        className="absolute right-2 top-2 flex h-7 w-7 cursor-pointer items-center justify-center rounded-full text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+        aria-label="Dismiss notification"
+      >
+        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+          <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
+        </svg>
+      </button>
+      <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+        {progress.percent >= 100 ? 'Library scan complete' : 'Scanning library'}
+      </p>
+      <p className="mt-1 truncate text-xs text-zinc-600 dark:text-zinc-400">{progress.label}</p>
+      <div
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={progress.percent}
+        aria-label="Library scan progress"
+        className="mt-3 h-1.5 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800"
+      >
+        <div
+          className="h-full rounded-full bg-amber-500 transition-[width] duration-200 ease-out dark:bg-amber-400"
+          style={{ width: `${progress.percent}%` }}
+        />
+      </div>
+      <p className="mt-2 text-right text-[11px] tabular-nums text-zinc-500 dark:text-zinc-500">
+        {progress.percent}%
+        {progress.filesTotal > 0 ? (
+          <span className="text-zinc-400">
+            {' '}
+            · {progress.filesDone}/{progress.filesTotal} files
+          </span>
+        ) : null}
+      </p>
+    </div>
+  )
+}

package/components/LibraryScanOptionsSection.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { useLibrary } from '@/components/LibraryProvider'
+import { LIBRARY_AUDIO_EXTENSIONS } from '@/lib/library/constants'
+import defaultLibraryScanPreferences from '@/lib/library/default-library-scan-preferences'
+import SettingsSwitchRow from '@/components/SettingsSwitchRow'
+import type { LibraryScanPreferences } from '@/types/library-scan-preferences'
+
+const DEPTH_OPTIONS: readonly { value: number; label: string }[] = [
+  { value: 0, label: 'Unlimited' },
+  { value: 1, label: '1 level' },
+  { value: 2, label: '2 levels' },
+  { value: 3, label: '3 levels' },
+  { value: 5, label: '5 levels' },
+  { value: 10, label: '10 levels' },
+]
+
+/**
+ * Scan depth, symlink follow, and per-extension include toggles.
+ */
+export default function LibraryScanOptionsSection() {
+  const { scanPreferences, setScanPreferences, isScanning } = useLibrary()
+
+  const patch = (partial: Partial<LibraryScanPreferences>): void => {
+    setScanPreferences({ ...scanPreferences, ...partial })
+  }
+
+  const toggleExtension = (ext: string): void => {
+    const enabled = new Set(scanPreferences.enabledExtensions)
+    if (enabled.has(ext)) {
+      if (enabled.size <= 1) return
+      enabled.delete(ext)
+    } else {
+      enabled.add(ext)
+    }
+    patch({ enabledExtensions: [...enabled].sort() })
+  }
+
+  const resetExtensions = (): void => {
+    patch({ enabledExtensions: defaultLibraryScanPreferences().enabledExtensions })
+  }
+
+  return (
+    <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">Scan options</h3>
+      <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+        Applied on the next rescan. Symlink handling depends on your browser; when enabled, Muzical skips
+        directory cycles it can detect.
+      </p>
+
+      <div className="mt-6 flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+        <label className="block min-w-0 flex-1">
+          <span className="text-xs font-medium uppercase tracking-wider text-zinc-500">Scan depth</span>
+          <select
+            value={scanPreferences.maxScanDepth}
+            disabled={isScanning}
+            onChange={(e) => patch({ maxScanDepth: Number.parseInt(e.target.value, 10) })}
+            className="mt-2 block w-full max-w-xs rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-100"
+            aria-label="Maximum subdirectory scan depth"
+          >
+            {DEPTH_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      <div className="mt-6 border-t border-zinc-200 pt-6 dark:border-zinc-800">
+        <SettingsSwitchRow
+          title="Follow symlinks"
+          description="Follow directory links when the browser exposes them as folders. May increase scan time."
+          checked={scanPreferences.followSymlinks}
+          onChange={(followSymlinks) => patch({ followSymlinks })}
+          ariaLabel="Follow directory symlinks when scanning"
+        />
+      </div>
+
+      <div className="mt-6 border-t border-zinc-200 pt-6 dark:border-zinc-800">
+        <div className="flex flex-wrap items-baseline justify-between gap-3">
+          <div>
+            <h4 className="text-xs font-medium uppercase tracking-wider text-zinc-500">File types</h4>
+            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+              Only checked extensions are included in library scans.
+            </p>
+          </div>
+          <button
+            type="button"
+            disabled={isScanning}
+            onClick={resetExtensions}
+            className="shrink-0 text-xs font-medium text-amber-700 hover:text-amber-600 disabled:opacity-50 dark:text-amber-400 dark:hover:text-amber-300"
+          >
+            Enable all
+          </button>
+        </div>
+        <ul
+          className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4"
+          role="group"
+          aria-label="Audio file extensions to scan"
+        >
+          {LIBRARY_AUDIO_EXTENSIONS.map((ext) => {
+            const on = scanPreferences.enabledExtensions.includes(ext)
+            return (
+              <li key={ext}>
+                <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-zinc-200 px-3 py-2 text-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60">
+                  <input
+                    type="checkbox"
+                    checked={on}
+                    disabled={isScanning}
+                    onChange={() => toggleExtension(ext)}
+                    className="h-4 w-4 rounded border-zinc-300 text-amber-500 focus:ring-2 focus:ring-amber-500/20 dark:border-zinc-700 dark:bg-zinc-900"
+                  />
+                  <span className="font-mono text-xs text-zinc-800 dark:text-zinc-200">{ext}</span>
+                </label>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}

package/components/LibrarySettingsPanel.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { useLibrary } from '@/components/LibraryProvider'
+import formatLibraryRootAdded from '@/components/format-library-root-added'
+import LibraryScanOptionsSection from '@/components/LibraryScanOptionsSection'
+import LibraryStatistics from '@/components/LibraryStatistics'
+import SettingsSwitchRow from '@/components/SettingsSwitchRow'
+
+/**
+ * Library settings: folders, rescan controls, and startup scan preference.
+ */
+export default function LibrarySettingsPanel() {
+  const {
+    roots,
+    libraryTracks,
+    isScanning,
+    scanError,
+    hasDirectoryPicker,
+    addLibraryFolder,
+    removeLibraryFolder,
+    rescanAll,
+    autoRescanOnStartup,
+    setAutoRescanOnStartup,
+  } = 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">Library</h2>
+        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+          Folders are read in the browser via the File System Access API.
+        </p>
+      </div>
+
+      <LibraryStatistics roots={roots} libraryTracks={libraryTracks} />
+
+      {scanError ? (
+        <p
+          className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-200"
+          role="alert"
+        >
+          {scanError}
+        </p>
+      ) : null}
+
+      <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">Scan directories</h3>
+        <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+          Pick one or more folders that contain your audio files. Subfolders are scanned. Handles are stored in
+          IndexedDB on this device so you do not have to pick them again on return visits.
+        </p>
+        {!hasDirectoryPicker ? (
+          <p className="mt-3 text-sm text-amber-800 dark:text-amber-300">
+            Folder selection is not available in this environment. Use Chrome or Edge on desktop.
+          </p>
+        ) : null}
+        <div className="mt-4 flex flex-wrap gap-2">
+          <button
+            type="button"
+            onClick={() => addLibraryFolder()}
+            disabled={!hasDirectoryPicker || isScanning}
+            className="rounded-full bg-amber-500 px-4 py-2 text-sm font-medium text-zinc-950 shadow-sm transition hover:bg-amber-400 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Add folder…
+          </button>
+          <button
+            type="button"
+            onClick={() => void rescanAll()}
+            disabled={roots.length === 0 || isScanning}
+            className="rounded-full border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-800 transition hover:bg-zinc-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
+          >
+            {isScanning ? 'Scanning…' : 'Rescan all'}
+          </button>
+        </div>
+      </section>
+
+      <LibraryScanOptionsSection />
+
+      <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">Configured folders</h3>
+        {roots.length === 0 ? (
+          <p className="mt-4 text-sm text-zinc-600 dark:text-zinc-400">No folders yet. Add a library folder above.</p>
+        ) : (
+          <ul className="mt-4 divide-y divide-zinc-200 dark:divide-zinc-800" role="list">
+            {roots.map((r) => (
+              <li key={r.id} className="flex flex-wrap items-center justify-between gap-3 py-4 first:pt-0">
+                <div className="min-w-0">
+                  <p className="truncate font-medium text-zinc-900 dark:text-zinc-100">{r.name}</p>
+                  <p className="truncate text-xs text-zinc-500">Added {formatLibraryRootAdded(r.addedAt)}</p>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => void removeLibraryFolder(r.id)}
+                  disabled={isScanning}
+                  className="shrink-0 rounded-full border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-700 transition hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                >
+                  Remove
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <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="Rescan on startup"
+          description="When enabled, Muzical rescans all configured folders each time you open the app (if the browser already has folder access). When disabled, the last saved catalog loads immediately."
+          checked={autoRescanOnStartup}
+          onChange={setAutoRescanOnStartup}
+          ariaLabel="Rescan library on startup"
+        />
+      </section>
+    </div>
+  )
+}

package/components/LibraryStatistics.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useMemo } from 'react'
+import computeLibraryStats from '@/lib/library/compute-library-stats'
+import formatTotalLibraryDuration from '@/lib/format-total-library-duration'
+import type { LibraryRootMeta } from '@/types/library-root-meta'
+import type { Track } from '@/types/track'
+
+type LibraryStatisticsProps = {
+  roots: readonly LibraryRootMeta[]
+  libraryTracks: readonly Track[]
+}
+
+type StatCard = {
+  label: string
+  value: string
+}
+
+/**
+ * Summary counts for the library settings page header area.
+ */
+export default function LibraryStatistics(props: LibraryStatisticsProps) {
+  const stats = useMemo(
+    () => computeLibraryStats(props.libraryTracks, props.roots.length),
+    [props.libraryTracks, props.roots.length],
+  )
+
+  const cards: StatCard[] = [
+    { label: 'Tracks', value: stats.trackCount.toLocaleString() },
+    { label: 'Folders', value: stats.folderCount.toLocaleString() },
+    { label: 'Artists', value: stats.artistCount.toLocaleString() },
+    { label: 'Albums', value: stats.albumCount.toLocaleString() },
+    { label: 'Playtime', value: formatTotalLibraryDuration(stats.totalDurationSec) },
+  ]
+
+  return (
+    <section
+      aria-label="Library statistics"
+      className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5"
+    >
+      {cards.map((card) => (
+        <div
+          key={card.label}
+          className="rounded-2xl border border-zinc-200 bg-white px-4 py-3 shadow-sm dark:border-zinc-800 dark:bg-zinc-900/40"
+        >
+          <p className="text-xs font-medium uppercase tracking-wider text-zinc-500">{card.label}</p>
+          <p className="mt-1 text-lg font-semibold tabular-nums tracking-tight text-zinc-900 dark:text-zinc-100">
+            {card.value}
+          </p>
+        </div>
+      ))}
+    </section>
+  )
+}