fix(hub): give the Music flat list its own look instead of Videos' reskin

Two complaints against real use: the artist -> album -> track hierarchy
was invisible (every depth sat flush left, distinguishable only by which
chevron happened to be open — Videos' own flat list never needed more
than one level, so there was nothing to reuse for this), and a filled-in
album unfolded into a wall of identical little icon-box squares, one per
track, carrying no information a track row can actually use (unlike
Videos' per-episode thumbnail).

Track rows now reuse Mode A's own numbered tracklist style
(.music-track-row: number, title, duration, no icon box) instead of
Videos' boxy thumb-slot row. A folder's expanded contents get wrapped in a
new .music-flat-children indent + rule line, so nesting reads as visible
steps into the tree rather than same-level siblings. Folder rows
(artist/album headers) still reuse Videos' flat-row style, which fits them
fine — this is not a wholesale rewrite, only what didn't actually work.

1 files changed, 43 insertions, 30 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/music-app.js b/packages/meshbay-hub/src/meshbay_hub/static/music-app.js
index 7e16b53..cb14fb4 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/music-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/music-app.js
@@ -3,7 +3,6 @@ import {
 } from './vendor/htm-preact.js';
 import { t } from './i18n.js';
 import { Icon } from './icon.js';
-import { formatSize } from './file-utils.js';
 import { MediaThumb, LazyTile } from './video-app.js';
 import { formatTime } from './music-player.js';
 
@@ -279,17 +278,21 @@ function AlbumGrid({ artists, transportRef, gekRef, musicbrainzEnabled, onPlayQu
 
 // -- Mode B: flat, folder-based, no MusicBrainz ------------------------------
 
-function FlatTrackRow({ track, onPlay }) {
+// A track is not a folder — it was rendered with the same boxy thumbnail
+// slot as one anyway (borrowed wholesale from Videos' flat list), which
+// meant a big album unfolded into a wall of identical little squares, one
+// per row, carrying no information (no embedded-art-in-a-list-row concept
+// exists here, unlike Videos' per-episode thumbnail). Reuses the plain
+// numbered-row style Mode A's own tracklist already uses instead
+// (music-track-row) — track number, title, duration, no icon box.
+function FlatTrackRow({ track, index, onPlay }) {
+  const num = track.track_no || (index != null ? index + 1 : null);
   return html`
-    <div class="music-flat-row" onClick=${onPlay}>
-      <div class="music-flat-thumb video-thumb-empty"><${Icon} name="music" /></div>
-      <div class="video-flat-info">
-        <div class="video-flat-title">${track.display_title || track.name}</div>
-        <div class="video-flat-sub">
-          ${formatTime(track.duration || 0)} ${' - '}${formatSize(track.size)}
-        </div>
-      </div>
-    </div>
+    <button class="music-track-row music-flat-track" onClick=${onPlay}>
+      <span class="music-track-no">${num || ''}</span>
+      <span class="music-track-title">${track.display_title || track.name}</span>
+      <span class="music-track-duration">${formatTime(track.duration || 0)}</span>
+    </button>
   `;
 }
 
@@ -305,9 +308,14 @@ function FlatAlbumFolder({ album, onPlayQueue }) {
         </div>
         <${Icon} name="chevron" cls=${open ? 'video-flat-chevron open' : 'video-flat-chevron'} />
       </div>
-      ${open && album.tracks.map((tr, i) => html`
-        <${FlatTrackRow} key=${tr.id} track=${tr} onPlay=${() => onPlayQueue(album.tracks, i)} />
-      `)}
+      ${open && html`
+        <div class="music-flat-children">
+          ${album.tracks.map((tr, i) => html`
+            <${FlatTrackRow} key=${tr.id} track=${tr} index=${i}
+              onPlay=${() => onPlayQueue(album.tracks, i)} />
+          `)}
+        </div>
+      `}
     </div>
   `;
 }
@@ -329,22 +337,27 @@ function FlatArtistFolder({ artist, onPlayQueue }) {
         </div>
         <${Icon} name="chevron" cls=${open ? 'video-flat-chevron open' : 'video-flat-chevron'} />
       </div>
-      ${/* A real artist folder with no album layer at all is common here -- a
-            pile of loose singles, not one release (musicbay.md section 2.1's
-            "flat per-artist folder" case). Nesting them one more level behind
-            their own always-empty "Unknown album" row was exactly the
-            friction reported live: an extra, pointless expand before
-            reaching a track that's playable (with full previous/next across
-            the whole pile -- onPlayQueue already gets every track sharing
-            this bucket) at all. A real, named album still gets its own
-            foldable row. */
-        open && artist.albums.map((album) => (album.isUnknown
-          ? album.tracks.map((tr, i) => html`
-              <${FlatTrackRow} key=${tr.id} track=${tr}
-                onPlay=${() => onPlayQueue(album.tracks, i)} />
-            `)
-          : html`<${FlatAlbumFolder} key=${album.album} album=${album} onPlayQueue=${onPlayQueue} />`
-        ))}
+      ${open && html`
+        <div class="music-flat-children">
+          ${/* A real artist folder with no album layer at all is common here
+                -- a pile of loose singles, not one release (musicbay.md
+                section 2.1's "flat per-artist folder" case). Nesting them
+                one more level behind their own always-empty "Unknown album"
+                row was exactly the friction reported live: an extra,
+                pointless expand before reaching a track that's playable
+                (with full previous/next across the whole pile --
+                onPlayQueue already gets every track sharing this bucket) at
+                all. A real, named album still gets its own foldable row,
+                one indent level deeper than its loose siblings would be. */
+            artist.albums.map((album) => (album.isUnknown
+              ? album.tracks.map((tr, i) => html`
+                  <${FlatTrackRow} key=${tr.id} track=${tr} index=${i}
+                    onPlay=${() => onPlayQueue(album.tracks, i)} />
+                `)
+              : html`<${FlatAlbumFolder} key=${album.album} album=${album} onPlayQueue=${onPlayQueue} />`
+            ))}
+        </div>
+      `}
     </div>
   `;
 }