feat(web): add LikeButton component

Heart icon reading from createLikedIdsQuery; click toggles via likeEntity/unlikeEntity. Click stops propagation so it can nest inside TrackRow's role=button div without triggering row activation.
2026-04-26 16:47:51 -04:00
parent dd2b9318a0
commit 6ab1fef07e
2 changed files with 113 additions and 0 deletions
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { useQueryClient } from '@tanstack/svelte-query';
+  import { createLikedIdsQuery, likeEntity, unlikeEntity, type EntityKind } from '$lib/api/likes';
+
+  let {
+    entityType,
+    entityId
+  }: { entityType: EntityKind; entityId: string } = $props();
+
+  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 {liked ? 'text-accent' : 'text-text-secondary hover:text-text-primary'}"
+>{liked ? '♥' : '♡'}</button>