web-player: big pages (Explore, Home) and tracks.ts cleanup
This pass also tackles the task deferred earlier: removing
tracks.ts's TrackTarget wrapper and its 8 accessors
(targetId/targetTitle/targetArtist/targetOwnerUserId/targetExplicit/
targetListensCount/isTargetCurrent/queueItemForTarget/
targetForQueueItem). Explore, Home, Mix, menus.svelte.ts and mixes.ts
now use track objects directly, with
toQueueItem/trackFromQueueItem (new, in player.svelte.ts) as the only
converters. Along the way, TypeScript revealed that isExplicit
doesn't exist in the real /tracks schema: Explore's "explicit" badge
was already a no-op before this refactor (always undefined ??
false); the binding is removed instead of pretending support that
never existed.
Explore: GENRE_INFO/genreTiles are extracted to src/lib/genres.ts;
the search logic
(showGroup/capped/matchPlaylists/searchCounts/searchChips/findTopResult)
is extracted to src/lib/search.ts as pure functions parameterized by
filter/query instead of closing over component state. "Top result"
unifies the duplicated button/link with <svelte:element>. Decision
made without blocking: the 4 group blocks (Tracks/Albums/Users/
Playlists) are not collapsed into a single {#each groups} — each
group has genuinely different snippets, context menu and ListRow
props, and a generic config would have added more indirection than it
removed.
Home: uses Page instead of a hand-rolled page-x; the 3 stats become
an {#each}; the hero/spotlight backgrounds (inline style= with CSS
variables) become the hero-surface/spotlight-surface utilities, and
gap-11.5 is replaced by the --spacing-section token (2.875rem) via
gap-section.
Verified with npm run check (0 errors) and npm run build. /explore
without a session redirects to /login because +layout.server.ts
requires allowAnonymousListening from the backend (unreachable
without Docker this session) — pre-existing behavior, not a
regression. No authenticated visual QA; smoke-tested /login with no
console errors.
This commit is contained in:
@@ -57,6 +57,7 @@
|
||||
--spacing-icon-md: 1.125rem;
|
||||
--spacing-icon-lg: 1.25rem;
|
||||
--spacing-icon-xl: 2.25rem;
|
||||
--spacing-section: 2.875rem;
|
||||
|
||||
--container-prose-sm: 26rem;
|
||||
--container-hero: 34rem;
|
||||
@@ -203,6 +204,19 @@
|
||||
oklch(var(--mf-tile-shade-l) var(--mf-tile-shade-c) var(--tile-hue))
|
||||
);
|
||||
}
|
||||
@utility hero-surface {
|
||||
background-image: var(--mf-hero-bg);
|
||||
}
|
||||
@utility spotlight-surface {
|
||||
background-image:
|
||||
var(--mf-spotlight-bg),
|
||||
linear-gradient(
|
||||
to right,
|
||||
transparent 50%,
|
||||
color-mix(in oklch, var(--mf-scrim) 22%, transparent) 61%,
|
||||
transparent 92.5%
|
||||
);
|
||||
}
|
||||
@utility field-control {
|
||||
@apply w-full rounded-control bg-surface py-3 text-sm text-fg transition placeholder:text-muted focus:bg-surface-2 focus:outline-none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user