From 6ab1fef07edb5bfe6caec190abd467d0d7796c60 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 26 Apr 2026 16:47:51 -0400
Subject: [PATCH] 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.
---
 web/src/lib/components/LikeButton.svelte  | 43 ++++++++++++++
 web/src/lib/components/LikeButton.test.ts | 70 +++++++++++++++++++++++
 2 files changed, 113 insertions(+)
 create mode 100644 web/src/lib/components/LikeButton.svelte
 create mode 100644 web/src/lib/components/LikeButton.test.ts

diff --git a/web/src/lib/components/LikeButton.svelte b/web/src/lib/components/LikeButton.svelte
new file mode 100644
index 00000000..774a6887
--- /dev/null
+++ b/web/src/lib/components/LikeButton.svelte
@@ -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>
diff --git a/web/src/lib/components/LikeButton.test.ts b/web/src/lib/components/LikeButton.test.ts
new file mode 100644
index 00000000..90f724a6
--- /dev/null
+++ b/web/src/lib/components/LikeButton.test.ts
@@ -0,0 +1,70 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { readable } from 'svelte/store';
+
+const cacheState = vi.hoisted(() => ({
+  data: { track_ids: ['t1'] as string[], album_ids: [] as string[], artist_ids: [] as string[] }
+}));
+
+vi.mock('$lib/api/likes', () => ({
+  createLikedIdsQuery: () => readable({ data: cacheState.data, isPending: false, isError: false }),
+  likeEntity: vi.fn().mockResolvedValue(undefined),
+  unlikeEntity: vi.fn().mockResolvedValue(undefined)
+}));
+
+vi.mock('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return {
+    ...actual,
+    useQueryClient: () => ({})
+  };
+});
+
+import LikeButton from './LikeButton.svelte';
+import { likeEntity, unlikeEntity } from '$lib/api/likes';
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cacheState.data = { track_ids: ['t1'], album_ids: [], artist_ids: [] };
+});
+
+describe('LikeButton', () => {
+  test('renders filled heart when track id IS in the set', () => {
+    render(LikeButton, { props: { entityType: 'track', entityId: 't1' } });
+    const btn = screen.getByRole('button', { name: /unlike/i });
+    expect(btn.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  test('renders empty heart when track id is NOT in the set', () => {
+    render(LikeButton, { props: { entityType: 'track', entityId: 't2' } });
+    const btn = screen.getByRole('button', { name: /like/i });
+    expect(btn.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  test('click on empty heart calls likeEntity', async () => {
+    render(LikeButton, { props: { entityType: 'track', entityId: 't2' } });
+    await fireEvent.click(screen.getByRole('button', { name: /like/i }));
+    expect(likeEntity).toHaveBeenCalledWith(expect.anything(), 'track', 't2');
+  });
+
+  test('click on filled heart calls unlikeEntity', async () => {
+    render(LikeButton, { props: { entityType: 'track', entityId: 't1' } });
+    await fireEvent.click(screen.getByRole('button', { name: /unlike/i }));
+    expect(unlikeEntity).toHaveBeenCalledWith(expect.anything(), 'track', 't1');
+  });
+
+  test('click stops propagation', async () => {
+    const parentClick = vi.fn();
+    const { container } = render(LikeButton, { props: { entityType: 'track', entityId: 't2' } });
+    const wrapper = container.parentElement!;
+    wrapper.addEventListener('click', parentClick);
+    await fireEvent.click(screen.getByRole('button', { name: /like/i }));
+    expect(parentClick).not.toHaveBeenCalled();
+  });
+
+  test('album entityType reads from album_ids set', () => {
+    cacheState.data = { track_ids: [], album_ids: ['al1'], artist_ids: [] };
+    render(LikeButton, { props: { entityType: 'album', entityId: 'al1' } });
+    expect(screen.getByRole('button', { name: /unlike/i }).getAttribute('aria-pressed')).toBe('true');
+  });
+});