From e46b28e14eee30a0baf0ae6d3cf55dbd7210d47a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Sun, 26 Jul 2026 13:05:30 +0000
Subject: [PATCH] music: left panel is a drill-down list navigator (never a
 grid)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MusicBrowser now lists a folder's children as single-column list items and drills
via the shared channel (libraries → artists → albums). When the current path is an
album leaf it lists the album's siblings and highlights it, so you can switch
albums from the left while the right shows the tracklist. Handles the non-uniform
library layouts via the manifest's tracks count.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/apps/Music/MusicBrowser.tsx           | 114 ++++++++++++++----
 1 file changed, 92 insertions(+), 22 deletions(-)

diff --git a/src/workspaces/officerdev/src/apps/Music/MusicBrowser.tsx b/src/workspaces/officerdev/src/apps/Music/MusicBrowser.tsx
index 943b96b9..bbd1d2e7 100644
--- a/src/workspaces/officerdev/src/apps/Music/MusicBrowser.tsx
+++ b/src/workspaces/officerdev/src/apps/Music/MusicBrowser.tsx
@@ -1,26 +1,68 @@
 import { useState, useEffect } from 'react';
 import { useClient } from 'hooks/useClient';
 import { usePanelChannel } from 'hooks/usePanelChannel';
-import { Library, Music2 } from 'lucide-react';
-import { MUSIC_ROOT, MUSIC_CWD_CHANNEL, type LsResult } from './shared';
+import { Library, Music2, ChevronLeft, Folder } from 'lucide-react';
+import {
+  MUSIC_ROOT,
+  MUSIC_CWD_CHANNEL,
+  toRel,
+  type LsResult,
+  type Manifest,
+  type ManifestAlbum,
+} from './shared';
 
-// Left panel of the /music workspace — the library selector. Publishes the chosen path to the
-// 'music:cwd' channel; MusicDetail (right panel) renders it.
+// Left panel of the /music workspace — a single-column drill-down LIST navigator (libraries →
+// artists → albums as list items; never a grid). Publishes the selected path to the 'music:cwd'
+// channel; MusicDetail (right panel) renders the rich detail (covers/grids/tracklist).
 export const MusicBrowser = () => {
   const { get } = useClient();
   const [cwd, setCwd] = usePanelChannel<string | null>(MUSIC_CWD_CHANNEL, null);
+  const [manifest, setManifest] = useState<Record<string, ManifestAlbum>>({});
   const [libraries, setLibraries] = useState<string[]>([]);
+  const [folders, setFolders] = useState<string[]>([]);
 
   useEffect(() => {
+    get<Manifest>('/music/manifest')
+      .then((m) => setManifest(m.albums))
+      .catch(() => setManifest({}));
     get<LsResult>(`/file-browser/ls?path=${encodeURIComponent(MUSIC_ROOT)}`)
       .then((r) => setLibraries(r.entries.filter((e) => e.type === 'directory').map((e) => e.name).sort()))
       .catch(() => setLibraries([]));
   }, []);
 
-  const currentLib = cwd ? cwd.split('/')[1] : null;
+  // The container folder whose children we list = the current folder, or its parent when the current
+  // path is an album leaf (so its siblings stay listed while the right shows the tracklist).
+  const rel = toRel(cwd);
+  const isAlbum = (manifest[rel]?.tracks ?? 0) > 0;
+  const navFolder = !cwd ? null : isAlbum ? cwd.split('/').slice(0, -1).join('/') : cwd;
+  const selected = cwd ? cwd.split('/').pop() : null;
+
+  useEffect(() => {
+    if (!navFolder) {
+      setFolders([]);
+      return;
+    }
+    let cancelled = false;
+    get<LsResult>(`/file-browser/ls?path=${encodeURIComponent(navFolder)}`)
+      .then((r) => {
+        if (!cancelled) setFolders(r.entries.filter((e) => e.type === 'directory').map((e) => e.name).sort());
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [navFolder]);
+
+  const up = () => {
+    if (!navFolder) return;
+    const parts = navFolder.split('/');
+    setCwd(parts.length <= 2 ? null : parts.slice(0, -1).join('/'));
+  };
+
+  const crumbs = navFolder ? navFolder.slice(MUSIC_ROOT.length + 1).split('/') : [];
 
   return (
-    <div className="flex h-full flex-col gap-1 overflow-y-auto p-3">
+    <div className="flex h-full flex-col overflow-y-auto p-3">
       <button
         type="button"
         onClick={() => setCwd(null)}
@@ -29,22 +71,50 @@ export const MusicBrowser = () => {
         <Music2 size={18} className="text-primary" />
         <span className="font-semibold">Music</span>
       </button>
-      <div className="flex items-center gap-2 px-2 pb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-        <Library size={13} /> Libraries
-      </div>
-      {libraries.map((lib) => (
-        <button
-          key={lib}
-          type="button"
-          onClick={() => setCwd(`${MUSIC_ROOT}/${lib}`)}
-          className={`truncate rounded-md px-2 py-1.5 text-left text-sm ${
-            currentLib === lib ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
-          }`}
-        >
-          {lib}
-        </button>
-      ))}
-      {!libraries.length && <span className="px-2 text-sm text-muted-foreground">No libraries</span>}
+
+      {!navFolder ? (
+        <>
+          <div className="flex items-center gap-2 px-2 pb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            <Library size={13} /> Libraries
+          </div>
+          {libraries.map((lib) => (
+            <button
+              key={lib}
+              type="button"
+              onClick={() => setCwd(`${MUSIC_ROOT}/${lib}`)}
+              className="truncate rounded-md px-2 py-1.5 text-left text-sm text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+            >
+              {lib}
+            </button>
+          ))}
+          {!libraries.length && <span className="px-2 text-sm text-muted-foreground">No libraries</span>}
+        </>
+      ) : (
+        <>
+          <button
+            type="button"
+            onClick={up}
+            className="mb-1 flex items-center gap-1 truncate px-2 py-1 text-left text-xs text-muted-foreground hover:text-foreground"
+          >
+            <ChevronLeft size={13} className="shrink-0" />
+            <span className="truncate">{crumbs.join(' / ')}</span>
+          </button>
+          {folders.map((f) => (
+            <button
+              key={f}
+              type="button"
+              onClick={() => setCwd(`${navFolder}/${f}`)}
+              className={`flex items-center gap-2 truncate rounded-md px-2 py-1.5 text-left text-sm ${
+                selected === f ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+              }`}
+            >
+              <Folder size={13} className="shrink-0 text-muted-foreground" />
+              <span className="truncate">{f}</span>
+            </button>
+          ))}
+          {!folders.length && <span className="px-2 py-2 text-sm text-muted-foreground">No subfolders</span>}
+        </>
+      )}
     </div>
   );
 };