Skip to content
This repository was archived by the owner on Feb 28, 2026. It is now read-only.

Commit 08927c3

Browse files
nukeopnukeop
committed
Album page tweaks
1 parent c5495fb commit 08927c3

File tree

10 files changed

+312
-175
lines changed

10 files changed

+312
-175
lines changed

‎packages/player/src/views/Album/__snapshots__/Album.test.tsx.snap‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -373,11 +373,11 @@ exports[`Album view > (Snapshot) renders the album view 1`] = `
373373
style="scrollbar-width: none;"
374374
>
375375
<div
376-
class="bg-primary border-border relative flex flex-col gap-6 border-b-2 p-8 md:flex-row"
376+
class="border-border bg-primary shadow-shadow relative mx-6 mt-6 flex flex-col gap-6 rounded-md border-2 p-6 md:flex-row"
377377
>
378378
<button
379379
aria-label="Add to favorites"
380-
class="inline-flex cursor-pointer items-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center absolute top-4 right-4"
380+
class="inline-flex cursor-pointer items-center transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground size-10 justify-center bg-background border-border absolute top-4 right-4 z-10 rounded-md border-2"
381381
data-headlessui-state=""
382382
data-testid="album-favorite-button"
383383
type="button"
@@ -402,7 +402,7 @@ exports[`Album view > (Snapshot) renders the album view 1`] = `
402402
</button>
403403
<img
404404
alt="Prism"
405-
class="border-border h-60 w-60 border-2 object-cover select-none"
405+
class="border-border shadow-shadow h-60 w-60 rounded-md border-2 object-cover select-none"
406406
src="https://img/album-cover.jpg"
407407
/>
408408
<div
@@ -412,7 +412,7 @@ exports[`Album view > (Snapshot) renders the album view 1`] = `
412412
class="flex flex-col gap-2"
413413
>
414414
<h1
415-
class="text-5xl font-bold"
415+
class="font-heading text-5xl font-extrabold tracking-tight"
416416
>
417417
Prism
418418
</h1>
@@ -423,31 +423,49 @@ exports[`Album view > (Snapshot) renders the album view 1`] = `
423423
</div>
424424
</div>
425425
<div
426-
class="text-text-secondary flex flex-col flex-wrap gap-2 text-sm"
426+
class="flex flex-wrap gap-3"
427427
>
428-
<div>
428+
<div
429+
class="border-border bg-background shadow-shadow flex items-center gap-2 rounded-md border-2 px-3 py-2"
430+
>
431+
<span
432+
class="font-heading text-lg font-extrabold"
433+
>
434+
Folk, World, Country
435+
</span>
429436
<span
430-
class="text-text-primary font-semibold"
437+
class="text-foreground-secondary text-xs font-bold tracking-wide uppercase"
431438
>
432-
Genre:
439+
Genre
433440
</span>
434-
Folk, World, Country
435441
</div>
436-
<div>
442+
<div
443+
class="border-border bg-background shadow-shadow flex items-center gap-2 rounded-md border-2 px-3 py-2"
444+
>
437445
<span
438-
class="text-text-primary font-semibold"
446+
class="font-heading text-lg font-extrabold"
439447
>
440-
Year:
448+
2025
449+
</span>
450+
<span
451+
class="text-foreground-secondary text-xs font-bold tracking-wide uppercase"
452+
>
453+
Year
441454
</span>
442-
2025
443455
</div>
444-
<div>
456+
<div
457+
class="border-border bg-background shadow-shadow flex items-center gap-2 rounded-md border-2 px-3 py-2"
458+
>
459+
<span
460+
class="font-heading text-lg font-extrabold"
461+
>
462+
2
463+
</span>
445464
<span
446-
class="text-text-primary font-semibold"
465+
class="text-foreground-secondary text-xs font-bold tracking-wide uppercase"
447466
>
448-
Tracks:
467+
Tracks
449468
</span>
450-
2
451469
</div>
452470
</div>
453471
</div>

‎packages/player/src/views/Album/components/AlbumHeader.tsx‎

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC } from 'react';
22

33
import { useTranslation } from '@nuclearplayer/i18n';
44
import { pickArtwork } from '@nuclearplayer/model';
5-
import { Loader } from '@nuclearplayer/ui';
5+
import { Loader, StatChip } from '@nuclearplayer/ui';
66

77
import { ConnectedFavoriteButton } from '../../../components/ConnectedFavoriteButton';
88
import { useAlbumDetails } from '../hooks/useAlbumDetails';
@@ -47,53 +47,38 @@ export const AlbumHeader: FC<AlbumHeaderProps> = ({ providerId, albumId }) => {
4747
const trackCount = album.tracks?.length ?? 0;
4848

4949
return (
50-
<div className="bg-primary border-border relative flex flex-col gap-6 border-b-2 p-8 md:flex-row">
50+
<div className="border-border bg-primary shadow-shadow relative mx-6 mt-6 flex flex-col gap-6 rounded-md border-2 p-6 md:flex-row">
5151
<ConnectedFavoriteButton
5252
type="album"
5353
source={{ provider: providerId, id: albumId }}
5454
data={{ title: album.title, artwork: album.artwork }}
55-
className="absolute top-4 right-4"
55+
className="bg-background border-border absolute top-4 right-4 z-10 rounded-md border-2"
5656
data-testid="album-favorite-button"
5757
/>
5858
{cover && (
5959
<img
6060
src={cover.url}
6161
alt={album.title}
62-
className="border-border h-60 w-60 border-2 object-cover select-none"
62+
className="border-border shadow-shadow h-60 w-60 rounded-md border-2 object-cover select-none"
6363
/>
6464
)}
6565

6666
<div className="flex flex-1 flex-col gap-4">
6767
<div className="flex flex-col gap-2">
68-
<h1 className="text-5xl font-bold">{album.title}</h1>
68+
<h1 className="font-heading text-5xl font-extrabold tracking-tight">
69+
{album.title}
70+
</h1>
6971
<div className="text-text-secondary text-lg">
7072
by {album.artists.map((a) => a.name).join(', ')}
7173
</div>
7274
</div>
7375

74-
<div className="text-text-secondary flex flex-col flex-wrap gap-2 text-sm">
76+
<div className="flex flex-wrap gap-3">
7577
{album.genres && album.genres.length > 0 && (
76-
<div>
77-
<span className="text-text-primary font-semibold">
78-
{t('genre')}:
79-
</span>{' '}
80-
{album.genres.join(', ')}
81-
</div>
78+
<StatChip value={album.genres.join(', ')} label={t('genre')} />
8279
)}
83-
{releaseYear && (
84-
<div>
85-
<span className="text-text-primary font-semibold">
86-
{t('year')}:
87-
</span>{' '}
88-
{releaseYear}
89-
</div>
90-
)}
91-
<div>
92-
<span className="text-text-primary font-semibold">
93-
{t('tracks')}:
94-
</span>{' '}
95-
{trackCount}
96-
</div>
80+
{releaseYear && <StatChip value={releaseYear} label={t('year')} />}
81+
<StatChip value={trackCount} label={t('tracks')} />
9782
</div>
9883
</div>
9984
</div>

0 commit comments

Comments
 (0)