officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
pastilhas
2026-07-27 13:40:33 +00:00
co-authored by Claude Opus 4.8
parent f887fb4679
commit ee6c7b0fdd
5 changed files with 232 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/workspaces/officerdev/src/apps/Music/FavoritesView.tsx
+188
View File
@@ -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
+24 -9
View File
@@ -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">
<button
type="button"
onClick={() => setCwd(null)}
className="flex items-center gap-2 px-2 pb-2 text-left text-foreground"
>
<Music2 size={20} className="text-primary" />
<span className="text-lg font-semibold">Music</span>
</button>
<div className="flex items-center gap-1 pb-2">
<button
type="button"
onClick={() => {
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
+11
View File
@@ -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
+8
View File
@@ -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
+1 -1
View File
@@ -48,5 +48,5 @@ export function useMusicFavorites() {
mutation.mutate({ on: !isFavorite(kind, key), kind, key });
};
return { isFavorite, toggle };
return { favorites: data ?? EMPTY, isFavorite, toggle };
}