bvandeusenandClaude Opus 5.5
94a9c8cbe3
Merges Renovate's kit 3 (PR #149) and adapter-static 4 (PR #148) bumps, plus the migration they need. The mechanical part is `sv migrate sveltekit-3`, run one task at a time and reviewed: - svelte.config.js is gone. Its options move into sveltekit() in vite.config.ts, exported as kitOptions so vitest.config.ts runs the same kit setup, including the $test-utils alias the tests import. - $lib becomes #lib through package.json "imports". There is no src/lib/index, so only the "#lib/*" entry is kept. - tsconfig extends $app/tsconfig. - Peer floors raised to kit 3's requirements: svelte ^5.57.1, vite ^8.0.12, svelte-check ^4.7.5. By hand, from the codemod's list of non-automated tasks: - goto's replaceState option is now replace; keepFocus becomes reset: false. For the search typeahead, reset: false also stops the scroll-to-top, which is wanted while typing. - The test setup mocks drop pushState/replaceState and $app/paths base/assets, which kit 3 removed, and mock refreshAll in place of invalidateAll. - The other flagged files only read page.url or goto internal routes, so they needed no change. TypeScript goes to ^6, not the ^7 Renovate offers: kit 3 declares typescript ^6 as a peer and svelte-check 4.7 accepts ^5 || ^6. Move to 7 once both accept it. With Tailwind 4 and kit 3 in, `npm audit` on the whole tree reports 0, so the web lane now audits every dependency rather than only what ships to browsers. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
80 lines
2.7 KiB
Svelte
80 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { Plus } from 'lucide-svelte';
|
|
import type { TrackRef } from '#lib/api/types.js';
|
|
import { playQueue, enqueueTrack } from '#lib/player/store.svelte.js';
|
|
import { coverUrl } from '#lib/media/covers.js';
|
|
import TrackMenu from './TrackMenu.svelte';
|
|
import LikeButton from './LikeButton.svelte';
|
|
import Cover from './Cover.svelte';
|
|
|
|
// Horizontal compact track row — cover thumb on the left, title +
|
|
// artist on the right. Mirrors Android's CompactTrackTile so the
|
|
// Most Played section reads the same way across platforms (three
|
|
// narrow rows that scroll together).
|
|
|
|
let {
|
|
track,
|
|
sectionTracks,
|
|
index
|
|
}: {
|
|
track: TrackRef;
|
|
sectionTracks: TrackRef[];
|
|
index: number;
|
|
} = $props();
|
|
|
|
const cover = $derived(coverUrl(track.album_id));
|
|
|
|
function onClick() {
|
|
playQueue(sectionTracks, index);
|
|
}
|
|
|
|
function onAddToQueue(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
enqueueTrack(track);
|
|
}
|
|
</script>
|
|
|
|
<div class="card group relative w-72">
|
|
<button
|
|
type="button"
|
|
aria-label={`Play ${track.title}`}
|
|
onclick={onClick}
|
|
class="flex w-full items-center gap-2 rounded-md p-1 pr-24 text-left
|
|
hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent"
|
|
>
|
|
<div class="h-12 w-12 shrink-0 overflow-hidden rounded bg-surface-hover">
|
|
<Cover src={cover} />
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="truncate text-sm font-medium text-text-primary">{track.title}</div>
|
|
<div class="truncate text-xs text-text-secondary">{track.artist_name}</div>
|
|
</div>
|
|
</button>
|
|
<!-- Single inline cluster, vertically centred on the right. The shared
|
|
CardActionCluster splits Like+Add (top) and the menu (bottom) into
|
|
opposite corners — correct for the tall square Album/Artist cards but
|
|
it makes the two groups collide on this short one-line row. A compact
|
|
row keeps all three controls in one horizontal group instead. -->
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
class="absolute right-2 top-1/2 z-10 flex -translate-y-1/2 items-center gap-0.5
|
|
opacity-0 transition-opacity duration-150
|
|
group-hover:opacity-100 focus-within:opacity-100"
|
|
onclick={(e) => e.stopPropagation()}
|
|
>
|
|
<LikeButton entityType="track" entityId={track.id} size="sm" />
|
|
<button
|
|
type="button"
|
|
aria-label={`Add ${track.title} to queue`}
|
|
onclick={onAddToQueue}
|
|
class="rounded-full bg-surface p-1 text-text-secondary hover:text-text-primary
|
|
focus-visible:ring-2 focus-visible:ring-accent"
|
|
>
|
|
<Plus size={16} strokeWidth={1} />
|
|
</button>
|
|
<TrackMenu {track} />
|
|
</div>
|
|
</div>
|