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>
72 lines
2.2 KiB
Svelte
72 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import type { AlbumRef, AlbumDetail } from '#lib/api/types.js';
|
|
import { api } from '#lib/api/client.js';
|
|
import { enqueueTracks, playQueue } from '#lib/player/store.svelte.js';
|
|
import { Play } from 'lucide-svelte';
|
|
import AlbumMenu from './AlbumMenu.svelte';
|
|
import CardActionCluster from './CardActionCluster.svelte';
|
|
import Cover from './Cover.svelte';
|
|
|
|
let { album }: { album: AlbumRef } = $props();
|
|
|
|
async function onAddClick(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const detail = await api.get<AlbumDetail>(`/api/albums/${album.id}`);
|
|
enqueueTracks(detail.tracks);
|
|
}
|
|
|
|
async function onPlayClick(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const detail = await api.get<AlbumDetail>(`/api/albums/${album.id}`);
|
|
playQueue(detail.tracks, 0);
|
|
}
|
|
</script>
|
|
|
|
<div class="card group relative">
|
|
<a
|
|
href={`/albums/${album.id}`}
|
|
class="block rounded focus-visible:ring-2 focus-visible:ring-accent"
|
|
>
|
|
<div
|
|
class="art-wrap relative aspect-square w-full overflow-hidden rounded-md
|
|
shadow-xs transition-all duration-150
|
|
group-hover:shadow-lg group-hover:ring-1 group-hover:ring-accent/40"
|
|
>
|
|
<Cover
|
|
src={album.cover_url}
|
|
class="transition-transform group-hover:scale-[1.03]"
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label={`Play ${album.title}`}
|
|
onclick={onPlayClick}
|
|
class="play-overlay absolute inset-0 m-auto flex h-12 w-12 items-center justify-center rounded-full"
|
|
>
|
|
<Play size={24} strokeWidth={1.5} fill="currentColor" />
|
|
</button>
|
|
</div>
|
|
<div class="mt-2 truncate text-sm font-medium text-text-primary">{album.title}</div>
|
|
{#if album.artist_name}
|
|
<div class="truncate text-xs text-text-secondary">{album.artist_name}</div>
|
|
{/if}
|
|
</a>
|
|
<CardActionCluster
|
|
likeEntityType="album"
|
|
likeEntityId={album.id}
|
|
onAdd={onAddClick}
|
|
addLabel="Add to queue"
|
|
>
|
|
{#snippet menu()}
|
|
<AlbumMenu
|
|
albumId={album.id}
|
|
albumTitle={album.title}
|
|
artistId={album.artist_id}
|
|
artistName={album.artist_name}
|
|
/>
|
|
{/snippet}
|
|
</CardActionCluster>
|
|
</div>
|
|
|