feat(artist): functional Artist detail screen (§A3)
Replace the scaffold Placeholder with a real artist page wired to the
existing `/artists/{id}` (+ `/albums`, `/tracks`) endpoints: header with
procedural avatar / counts / "Play all" (queues with source=artist),
discography grid (cards → album detail), and the full track list. All
three list states per async section.
Also make the Library artists-tab rows clickable → `/artists/:id`,
closing the previous navigation dead-end.
i18n: new `artist.*` block (en + ru).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -216,7 +216,11 @@ export function LibraryPage() {
|
||||
{artistsQuery.data && (
|
||||
<div style={{ padding: '0.5rem 0' }}>
|
||||
{artistsQuery.data.items.map((artist) => (
|
||||
<ArtistRow key={artist.id} artist={artist} />
|
||||
<ArtistRow
|
||||
key={artist.id}
|
||||
artist={artist}
|
||||
onClick={() => void navigate(`/artists/${artist.id}`)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
@@ -302,15 +306,23 @@ function AlbumCard({ album, onClick }: { album: Album; onClick: () => void }) {
|
||||
);
|
||||
}
|
||||
|
||||
function ArtistRow({ artist }: { artist: Artist }) {
|
||||
function ArtistRow({
|
||||
artist,
|
||||
onClick,
|
||||
}: {
|
||||
artist: Artist;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.75rem',
|
||||
padding: '0.5rem 1.5rem',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user