music (web): Favorites view (inspired by the app's FavoritesScreen)

A heart button in the left panel header opens a Favorites view in the right
panel (coordinated via a new music:favorites panel channel). Grouped
Artists / Albums / Tracks, each row: cover thumb (indexed cover, icon fallback)
+ title/subtitle + a heart to un-favorite. Click an album/artist to navigate
the library there; click a track to play it in album context. Navigating
anywhere closes the view (cwd-change effect). Empty state prompts to heart
something.

useMusicFavorites now also returns the grouped `favorites`; shared gains the
channel + parseAlbumName.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/workspaces/officerdev/src/apps/Music/FavoritesView.tsx

@@ -0,0 +1,188 @@
+import { useState, type ReactNode } from 'react';
+import { useClient } from 'hooks/useClient';
+import { usePanelChannel } from 'hooks/usePanelChannel';
+import { Heart, User, Disc3, Music, ChevronRight, X } from 'lucide-react';
+import { useMusicPlayer, type PlayerTrack } from '../../MusicPlayer';
+import { MusicHeart } from './MusicHeart';
+import { useMusicFavorites } from './useMusicFavorites';
+import {
+  MUSIC_ROOT,
+  MUSIC_CWD_CHANNEL,
+  MUSIC_FAV_CHANNEL,
+  coverUrl,
+  parseAlbumName,
+  sortTracks,
+  toRel,
+  type AlbumMeta,
+  type FavoriteKind,
+} from './shared';
+
+// The user's favorited artists / albums / tracks, grouped — shown in the right panel. Keys follow the
+// favorites convention: album/artist are music-relative ("Albums/…"), tracks are home paths
+// ("Music/…/file"). Clicking an album/artist navigates the library there; clicking a track plays it.
+export const FavoritesView = () => {
+  const { get, token } = useClient();
+  const player = useMusicPlayer();
+  const { favorites } = useMusicFavorites();
+  const [, setCwd] = usePanelChannel<string | null>(MUSIC_CWD_CHANNEL, null);
+  const [, setFavOpen] = usePanelChannel<boolean>(MUSIC_FAV_CHANNEL, false);
+
+  const goToRel = (rel: string) => {
+    setCwd(`${MUSIC_ROOT}/${rel}`);
+    setFavOpen(false);
+  };
+
+  const playTrack = async (homePath: string) => {
+    const cut = homePath.lastIndexOf('/');
+    const albumHome = homePath.slice(0, cut);
+    const file = homePath.slice(cut + 1);
+    const albumRel = toRel(albumHome);
+    try {
+      const meta = await get<AlbumMeta>(`/music/meta?path=${encodeURIComponent(albumRel)}`);
+      const q: PlayerTrack[] = sortTracks(meta.tracks).map((t) => ({ albumRel, file: t.file, title: t.title, artist: t.artist }));
+      player.playQueue(q, Math.max(0, q.findIndex((t) => t.file === file)));
+    } catch {
+      player.playQueue([{ albumRel, file }], 0);
+    }
+    setCwd(albumHome);
+    setFavOpen(false);
+  };
+
+  const empty = !favorites.artists.length && !favorites.albums.length && !favorites.tracks.length;
+
+  return (
+    <div className="h-full overflow-y-auto p-4 md:p-6">
+      <div className="mb-4 flex items-center gap-2">
+        <Heart size={20} className="fill-red-500 text-red-500" />
+        <h1 className="flex-1 text-2xl font-bold text-foreground">Favorites</h1>
+        <button
+          type="button"
+          onClick={() => setFavOpen(false)}
+          className="cursor-pointer rounded p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <X size={18} />
+        </button>
+      </div>
+
+      {empty ? (
+        <div className="flex flex-col items-center justify-center gap-3 py-24 text-center">
+          <Heart size={44} className="text-muted-foreground/30" />
+          <p className="text-sm text-muted-foreground">No favorites yet. Click the heart on any artist, album or track.</p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-6">
+          <Section title="Artists" count={favorites.artists.length}>
+            {favorites.artists.map((key) => {
+              const segs = key.split('/');
+              return (
+                <FavRow
+                  key={key}
+                  kind="artist"
+                  favKey={key}
+                  cover={coverUrl(key, token)}
+                  fallback={<User size={18} className="text-muted-foreground" />}
+                  title={segs[segs.length - 1] ?? key}
+                  onClick={() => goToRel(key)}
+                  chevron
+                />
+              );
+            })}
+          </Section>
+
+          <Section title="Albums" count={favorites.albums.length}>
+            {favorites.albums.map((key) => {
+              const segs = key.split('/');
+              const { title, year } = parseAlbumName(segs[segs.length - 1] ?? key);
+              const artist = segs.length >= 3 ? segs[1] : '';
+              return (
+                <FavRow
+                  key={key}
+                  kind="album"
+                  favKey={key}
+                  cover={coverUrl(key, token)}
+                  fallback={<Disc3 size={18} className="text-muted-foreground" />}
+                  title={title}
+                  subtitle={[artist, year].filter(Boolean).join(' · ')}
+                  onClick={() => goToRel(key)}
+                  chevron
+                />
+              );
+            })}
+          </Section>
+
+          <Section title="Tracks" count={favorites.tracks.length}>
+            {favorites.tracks.map((key) => {
+              const segs = key.split('/');
+              const base = segs[segs.length - 1] ?? key;
+              const albumRel = toRel(key.slice(0, Math.max(0, key.lastIndexOf('/'))));
+              const album = segs.length >= 2 ? parseAlbumName(segs[segs.length - 2]!).title : '';
+              return (
+                <FavRow
+                  key={key}
+                  kind="track"
+                  favKey={key}
+                  cover={coverUrl(albumRel, token)}
+                  fallback={<Music size={18} className="text-muted-foreground" />}
+                  title={base.replace(/\.[^/.]+$/, '')}
+                  subtitle={album}
+                  onClick={() => playTrack(key)}
+                />
+              );
+            })}
+          </Section>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Section = ({ title, count, children }: { title: string; count: number; children: ReactNode }) =>
+  count ? (
+    <div>
+      <h2 className="mb-1 px-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+        {title} <span className="text-muted-foreground/60">{count}</span>
+      </h2>
+      <div className="flex flex-col">{children}</div>
+    </div>
+  ) : null;
+
+const FavRow = ({
+  kind,
+  favKey,
+  cover,
+  fallback,
+  title,
+  subtitle,
+  onClick,
+  chevron,
+}: {
+  kind: FavoriteKind;
+  favKey: string;
+  cover: string;
+  fallback: ReactNode;
+  title: string;
+  subtitle?: string;
+  onClick: () => void;
+  chevron?: boolean;
+}) => {
+  const [failed, setFailed] = useState(false);
+  return (
+    <div className="group flex items-center gap-3 rounded-md px-2 py-1.5 hover:bg-muted">
+      <button type="button" onClick={onClick} className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 text-left">
+        <div className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded bg-muted">
+          {cover && !failed ? (
+            <img src={cover} alt="" className="h-full w-full object-cover" onError={() => setFailed(true)} />
+          ) : (
+            fallback
+          )}
+        </div>
+        <div className="min-w-0 flex-1">
+          <span className="block truncate text-sm text-foreground">{title}</span>
+          {subtitle ? <span className="block truncate text-xs text-muted-foreground">{subtitle}</span> : null}
+        </div>
+      </button>
+      <MusicHeart kind={kind} favKey={favKey} size={16} className="shrink-0" />
+      {chevron ? <ChevronRight size={16} className="shrink-0 text-muted-foreground" /> : null}
+    </div>
+  );
+};

src/workspaces/officerdev/src/apps/Music/MusicBrowser.tsx

@@ -1,10 +1,11 @@
 import { useState, useEffect, type ReactNode } from 'react';
 import { useClient } from 'hooks/useClient';
 import { usePanelChannel } from 'hooks/usePanelChannel';
-import { Library, Music2, ChevronLeft, Folder, Search, X, RefreshCw } from 'lucide-react';
+import { Library, Music2, ChevronLeft, Folder, Search, X, RefreshCw, Heart } from 'lucide-react';
 import {
   MUSIC_ROOT,
   MUSIC_CWD_CHANNEL,
+  MUSIC_FAV_CHANNEL,
   coverUrl,
   fuzzyMatch,
   toRel,
@@ -39,6 +40,7 @@ const visibleDirs = (r: LsResult) =>
 export const MusicBrowser = () => {
   const { get, post, token } = useClient();
   const [cwd, setCwd] = usePanelChannel<string | null>(MUSIC_CWD_CHANNEL, null);
+  const [favOpen, setFavOpen] = usePanelChannel<boolean>(MUSIC_FAV_CHANNEL, false);
   const [manifest, setManifest] = useState<Record<string, ManifestAlbum>>({});
   const [libraries, setLibraries] = useState<string[]>([]);
   const [folders, setFolders] = useState<string[]>([]);
@@ -109,14 +111,27 @@ export const MusicBrowser = () => {
 
   return (
     <div className="flex h-full flex-col overflow-y-auto p-3">
+      <div className="flex items-center gap-1 pb-2">
         <button
           type="button"
-        onClick={() => setCwd(null)}
+          onClick={() => {
-        className="flex items-center gap-2 px-2 pb-2 text-left text-foreground"
+            setCwd(null);
+            setFavOpen(false);
+          }}
+          className="flex flex-1 cursor-pointer items-center gap-2 px-2 text-left text-foreground"
         >
           <Music2 size={20} className="text-primary" />
           <span className="text-lg font-semibold">Music</span>
         </button>
+        <button
+          type="button"
+          onClick={() => setFavOpen(!favOpen)}
+          title="Favorites"
+          className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md hover:bg-muted"
+        >
+          <Heart size={18} className={favOpen ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-foreground'} />
+        </button>
+      </div>
 
       <div className="mb-2 flex items-center gap-1.5 px-1">
         <div className="flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md border border-border bg-background px-2">

src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx

@@ -3,11 +3,13 @@ import { useClient } from 'hooks/useClient';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import { Play, ChevronLeft, Volume2 } from 'lucide-react';
 import { MusicHeart } from './MusicHeart';
+import { FavoritesView } from './FavoritesView';
 import { useMusicPlayer } from '../../MusicPlayer';
 import type { PlayerTrack } from '../../MusicPlayer';
 import {
   MUSIC_ROOT,
   MUSIC_CWD_CHANNEL,
+  MUSIC_FAV_CHANNEL,
   TYPE_ORDER,
   coverUrl,
   fmtDuration,
@@ -30,6 +32,7 @@ export const MusicDetail = () => {
   const { token, get } = useClient();
   const player = useMusicPlayer();
   const [cwd, setCwd] = usePanelChannel<string | null>(MUSIC_CWD_CHANNEL, null);
+  const [favOpen, setFavOpen] = usePanelChannel<boolean>(MUSIC_FAV_CHANNEL, false);
 
   const [manifest, setManifest] = useState<Record<string, ManifestAlbum>>({});
   const [libraries, setLibraries] = useState<string[]>([]);
@@ -54,6 +57,12 @@ export const MusicDetail = () => {
     }
   }, [player.current, cwd, setCwd]);
 
+  // Navigating anywhere (left panel or from within Favorites) closes the Favorites view.
+  useEffect(() => {
+    setFavOpen(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cwd]);
+
   useEffect(() => {
     get<Manifest>('/music/manifest')
       .then((m) => setManifest(m.albums))
@@ -169,6 +178,8 @@ export const MusicDetail = () => {
     </div>
   );
 
+  if (favOpen) return <FavoritesView />;
+
   return (
     <div className="h-full overflow-y-auto p-4 md:p-6">
       {cwd && (

src/workspaces/officerdev/src/apps/Music/shared.ts

@@ -3,6 +3,14 @@
 
 export const MUSIC_ROOT = 'Music';
 export const MUSIC_CWD_CHANNEL = 'music:cwd';
+export const MUSIC_FAV_CHANNEL = 'music:favorites';
+
+// Album folders are named "[year] Album Name" → display as "Album Name" + year.
+const ALBUM_NAME_RE = /^\[(\d{4})\]\s*(.+)$/;
+export const parseAlbumName = (name: string): { title: string; year?: string } => {
+  const m = ALBUM_NAME_RE.exec(name.trim());
+  return m ? { title: m[2]!.trim(), year: m[1] } : { title: name };
+};
 
 export type DirEntry = { name: string; type: 'directory' | 'file'; size: number; modifiedAt: number };
 export type LsResult = { entries: DirEntry[] };

src/workspaces/officerdev/src/apps/Music/useMusicFavorites.ts

@@ -48,5 +48,5 @@ export function useMusicFavorites() {
     mutation.mutate({ on: !isFavorite(kind, key), kind, key });
   };
 
-  return { isFavorite, toggle };
+  return { favorites: data ?? EMPTY, isFavorite, toggle };
 }