feat(artist): functional Artist detail screen (§A3)
Docker Build & Publish / build (push) Has been cancelled
Docker Build & Publish / push (push) Has been cancelled
Docker Build & Publish / Prune old image versions (push) Has been cancelled

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:
Senko-san
2026-06-14 01:30:06 +03:00
parent 808c52484c
commit 45a624b642
4 changed files with 305 additions and 5 deletions
+14 -2
View File
@@ -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