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>
49 lines
1.3 KiB
Svelte
49 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { useQueryClient } from '@tanstack/svelte-query';
|
|
import { createLikedIdsQuery, likeEntity, unlikeEntity, type EntityKind } from '#lib/api/likes.js';
|
|
|
|
let {
|
|
entityType,
|
|
entityId,
|
|
size = 'md'
|
|
}: { entityType: EntityKind; entityId: string; size?: 'sm' | 'md' | 'lg' } = $props();
|
|
|
|
const sizeClass = $derived(
|
|
size === 'sm' ? 'text-base' : size === 'lg' ? 'text-3xl' : 'text-lg'
|
|
);
|
|
|
|
const SET_KEY = {
|
|
track: 'track_ids',
|
|
album: 'album_ids',
|
|
artist: 'artist_ids'
|
|
} as const;
|
|
|
|
const queryClient = useQueryClient();
|
|
const queryStore = $derived(createLikedIdsQuery());
|
|
const query = $derived($queryStore);
|
|
|
|
const liked = $derived.by(() => {
|
|
const data = query?.data;
|
|
if (!data) return false;
|
|
return data[SET_KEY[entityType]].includes(entityId);
|
|
});
|
|
|
|
async function onClick(e: MouseEvent) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
if (liked) {
|
|
await unlikeEntity(queryClient, entityType, entityId);
|
|
} else {
|
|
await likeEntity(queryClient, entityType, entityId);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
aria-label={liked ? 'Unlike' : 'Like'}
|
|
aria-pressed={liked}
|
|
onclick={onClick}
|
|
class="rounded p-1 {sizeClass} {liked ? 'text-accent-fg' : 'text-text-secondary hover:text-text-primary'}"
|
|
>{liked ? '♥' : '♡'}</button>
|