From cd0b9c97e105a11b99a54256caa423ac1758f430 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 4 May 2026 06:57:24 -0400
Subject: [PATCH] fix(web/m7-365): align /library/history with albums-page
 conventions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Code-quality review flagged convention drift from sibling library
pages. Aligning so the history page matches the same shape:

- queryStore + $derived($queryStore) pattern (single subscription
  point) instead of $query.X everywhere.
- h1 uses font-display text-2xl font-medium per FabledSword design
  system (weights 400/500 only — font-semibold drifted to 600).
- h2 uses font-medium + z-10 for sticky-header layering.
- InfiniteScrollSentinel uses its `enabled` prop (which exists; the
  earlier spec note claiming otherwise was wrong) so the observer
  isn't recreated on every fetch cycle.
- Loading more… / End of history footers added to match albums.
- onRetry passes query.refetch by reference, not wrapped.
- Dropped redundant `as HistoryEvent[]` cast.

Also fixed test case 4 which trivially passed regardless of the
conditional gate's correctness — now queries the sentinel's actual
DOM root (div[aria-hidden="true"].h-px) and asserts presence/absence.
Added a positive twin test for hasNextPage=true.
---
 web/src/routes/library/history/+page.svelte | 38 +++++++++++++--------
 web/src/routes/library/history/page.test.ts | 16 ++++++---
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/web/src/routes/library/history/+page.svelte b/web/src/routes/library/history/+page.svelte
index f6be6aff..789a4a3d 100644
--- a/web/src/routes/library/history/+page.svelte
+++ b/web/src/routes/library/history/+page.svelte
@@ -1,35 +1,35 @@
 <script lang="ts">
-  import { createHistoryQuery, type HistoryEvent } from '$lib/api/history';
-  import { groupByDay } from '$lib/utils/dayGroup';
   import { pageTitle } from '$lib/branding';
+  import { createHistoryQuery } from '$lib/api/history';
+  import { groupByDay } from '$lib/utils/dayGroup';
   import HistoryRow from '$lib/components/HistoryRow.svelte';
   import InfiniteScrollSentinel from '$lib/components/InfiniteScrollSentinel.svelte';
   import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
 
-  const query = createHistoryQuery();
-
-  const flatEvents = $derived(
-    ($query.data?.pages ?? []).flatMap((p) => p.events) as HistoryEvent[]
-  );
+  const queryStore = createHistoryQuery();
+  const query = $derived($queryStore);
+  const flatEvents = $derived(query.data?.pages?.flatMap((p) => p.events) ?? []);
   const grouped = $derived(groupByDay(flatEvents, new Date()));
 </script>
 
 <svelte:head><title>{pageTitle('Library · History')}</title></svelte:head>
 
-<div class="space-y-6">
-  <h1 class="text-2xl font-semibold">History</h1>
+<div class="space-y-4">
+  <header>
+    <h1 class="font-display text-2xl font-medium text-text-primary">History</h1>
+  </header>
 
-  {#if $query.isPending}
+  {#if query.isPending}
     <LibrarySkeleton variant="list" count={12} />
-  {:else if $query.isError}
-    <ApiErrorBanner error={$query.error} onRetry={() => $query.refetch()} />
+  {:else if query.isError}
+    <ApiErrorBanner error={query.error} onRetry={query.refetch} />
   {:else if flatEvents.length === 0}
     <p class="p-8 text-center text-text-secondary">No listening history yet.</p>
   {:else}
     {#each grouped as group (group.label)}
       <section>
-        <h2 class="sticky top-0 mb-2 bg-background py-1 text-lg font-semibold text-text-secondary">
+        <h2 class="sticky top-0 z-10 mb-2 bg-background py-1 text-lg font-medium text-text-secondary">
           {group.label}
         </h2>
         <div class="divide-y divide-border">
@@ -40,8 +40,16 @@
       </section>
     {/each}
 
-    {#if $query.hasNextPage && !$query.isFetchingNextPage}
-      <InfiniteScrollSentinel onIntersect={() => $query.fetchNextPage()} />
+    {#if query.hasNextPage}
+      <InfiniteScrollSentinel
+        enabled={!query.isFetchingNextPage}
+        onIntersect={() => query.fetchNextPage()}
+      />
+      {#if query.isFetchingNextPage}
+        <p class="py-2 text-center text-sm text-text-secondary">Loading more…</p>
+      {/if}
+    {:else if flatEvents.length > 0}
+      <p class="py-2 text-center text-sm text-text-secondary">End of history</p>
     {/if}
   {/if}
 </div>
diff --git a/web/src/routes/library/history/page.test.ts b/web/src/routes/library/history/page.test.ts
index 94090c94..5210ea6a 100644
--- a/web/src/routes/library/history/page.test.ts
+++ b/web/src/routes/library/history/page.test.ts
@@ -108,10 +108,18 @@ describe('library/history page', () => {
     mockData = { pages: [{ events: [mkEvent('a', new Date())], has_more: false }] };
     mockHasNextPage = false;
     const { container } = render(HistoryPage);
-    // Sentinel renders an empty <div ref> — assert by absence of the call.
-    // (We can't easily query for the sentinel itself in the DOM since it has
-    // no aria role; instead, verify the page renders the song without error.)
+    // InfiniteScrollSentinel renders <div aria-hidden="true" class="h-px">.
+    // When hasNextPage is false, no such div should be in the DOM.
+    expect(container.querySelector('div[aria-hidden="true"].h-px')).toBeNull();
+    // Confirm the page rendered the row so we know we hit the success branch.
     expect(screen.getByText('Song a')).toBeInTheDocument();
-    expect(container).toBeTruthy();
+  });
+
+  it('renders the InfiniteScrollSentinel when hasNextPage is true', () => {
+    mockData = { pages: [{ events: [mkEvent('a', new Date())], has_more: true }] };
+    mockHasNextPage = true;
+    mockIsFetchingNextPage = false;
+    const { container } = render(HistoryPage);
+    expect(container.querySelector('div[aria-hidden="true"].h-px')).not.toBeNull();
   });
 });