From 1be43df75b1fddbb804422d2c7f7e2cfe261112a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 4 Aug 2026 16:39:23 +0000
Subject: [PATCH] library roots get cover art in the music grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

they are indexed like any other folder — all six carry cover:true and serve a
jpeg — so the root view uses the same card as the folder grid instead of flat
gradient tiles. a root that holds tracks directly gets the hover play button
for free.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../officerdev/src/apps/Music/MusicDetail.tsx | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx b/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx
index 72cdae9f..b1fa40e9 100644
--- a/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx
+++ b/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx
@@ -205,11 +205,11 @@ export const MusicDetail = () => {
 
   const crumbs = rel ? rel.split('/') : [];
 
-  const Card = ({ r, name, playable }: { r: string; name: string; playable: boolean }) => (
+  const Card = ({ r, name, playable, onOpen }: { r: string; name: string; playable: boolean; onOpen?: () => void }) => (
     <div className="group relative">
       <button
         type="button"
-        onClick={() => enter(name)}
+        onClick={onOpen ?? (() => enter(name))}
         className="flex w-full flex-col gap-2 rounded-lg bg-card/60 p-3 text-left transition-colors hover:bg-card"
       >
         <div className="aspect-square w-full overflow-hidden rounded-md bg-muted">
@@ -263,18 +263,18 @@ export const MusicDetail = () => {
 
       {loading && <p className="text-sm text-muted-foreground">Loading…</p>}
 
-      {/* Home */}
+      {/* Home — the library roots carry their own folder art (the manifest indexes them like any other
+          folder), so they get the same cards as everything else rather than a wall of flat tiles. */}
       {!cwd && (
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
           {libraries.map((lib) => (
-            <button
+            <Card
               key={lib}
-              type="button"
-              onClick={() => setCwd(`${MUSIC_ROOT}/${lib}`)}
-              className="flex aspect-video items-end rounded-lg bg-gradient-to-br from-primary/30 to-primary/5 p-3 text-left text-lg font-semibold text-foreground transition-transform hover:scale-[1.02]"
-            >
-              {lib}
-            </button>
+              r={lib}
+              name={lib}
+              playable={(manifest[lib]?.tracks ?? 0) > 0}
+              onOpen={() => setCwd(`${MUSIC_ROOT}/${lib}`)}
+            />
           ))}
         </div>
       )}