Add hideAvailable filter and unified pagination

Add support for hiding audiobooks that are already available by introducing a hideAvailable query flag and excluding matching ASINs at the DB level. Implemented getAvailableAsins() in audiobook-matcher to gather ASINs from the library and completed requests, and wired it into the popular and new-releases API routes to apply a notIn filter. Propagated the hideAvailable flag through useAudiobooks so client requests include the parameter, and adjusted the homepage to reset pagination when the flag changes. Replaced two StickyPagination instances with a new UnifiedPagination component (new file) that provides a single context-aware floating paginator which tracks the dominant section and allows switching between Popular and New Releases. Also removed client-side filtering in favor of server-side exclusion and made small imports/cleanup in page.tsx.

tests/app/home.page.test.tsx

@@ -47,17 +47,22 @@ vi.mock('@/components/ui/CardSizeControls', () => ({
   CardSizeControls: ({ size }: { size: number }) => <div data-testid="card-size" data-size={size} />,
 }));
 
-vi.mock('@/components/ui/StickyPagination', () => ({
-  StickyPagination: ({
-    label,
-    onPageChange,
+vi.mock('@/components/ui/UnifiedPagination', () => ({
+  UnifiedPagination: ({
+    sections,
   }: {
-    label: string;
-    onPageChange: (page: number) => void;
+    sections: Array<{
+      label: string;
+      onPageChange: (page: number) => void;
+    }>;
   }) => (
-    <button type="button" onClick={() => onPageChange(2)}>
-      {label} next
-    </button>
+    <div>
+      {sections.map((s) => (
+        <button key={s.label} type="button" onClick={() => s.onPageChange(2)}>
+          {s.label} next
+        </button>
+      ))}
+    </div>
   ),
 }));
 
@@ -113,7 +118,7 @@ describe('HomePage', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Popular Audiobooks next' }));
 
     await waitFor(() => {
-      expect(useAudiobooksMock).toHaveBeenCalledWith('popular', 20, 2);
+      expect(useAudiobooksMock).toHaveBeenCalledWith('popular', 20, 2, undefined);
     });
   });
 });

tests/components/ui/StickyPagination.test.tsx

@@ -1,133 +0,0 @@
-/**
- * Component: Sticky Pagination Tests
- * Documentation: documentation/frontend/components.md
- */
-
-// @vitest-environment jsdom
-
-import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { StickyPagination } from '@/components/ui/StickyPagination';
-
-type ObserverEntry = {
-  isIntersecting: boolean;
-  intersectionRatio: number;
-  target: Element;
-};
-
-describe('StickyPagination', () => {
-  const observers: { callback: IntersectionObserverCallback }[] = [];
-
-  beforeEach(() => {
-    observers.length = 0;
-    class MockIntersectionObserver {
-      callback: IntersectionObserverCallback;
-      observe = vi.fn();
-      unobserve = vi.fn();
-      disconnect = vi.fn();
-      takeRecords = vi.fn();
-
-      constructor(callback: IntersectionObserverCallback) {
-        this.callback = callback;
-        observers.push(this);
-      }
-    }
-
-    (global as any).IntersectionObserver = MockIntersectionObserver;
-  });
-
-  it('returns null when there is only one page', () => {
-    const sectionRef = { current: document.createElement('div') };
-    const { container } = render(
-      <StickyPagination
-        currentPage={1}
-        totalPages={1}
-        onPageChange={vi.fn()}
-        sectionRef={sectionRef}
-        label="Popular"
-      />
-    );
-
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('shows and hides based on section and footer visibility', () => {
-    const sectionRef = { current: document.createElement('div') };
-    const footerRef = { current: document.createElement('div') };
-
-    const { container } = render(
-      <StickyPagination
-        currentPage={2}
-        totalPages={5}
-        onPageChange={vi.fn()}
-        sectionRef={sectionRef}
-        footerRef={footerRef}
-        label="Popular"
-      />
-    );
-
-    const root = container.querySelector('div.fixed') as HTMLElement;
-    expect(root).toHaveClass('opacity-0');
-
-    act(() => {
-      observers[0].callback(
-        [
-          {
-            isIntersecting: true,
-            intersectionRatio: 0.2,
-            target: sectionRef.current as Element,
-          } as ObserverEntry,
-        ],
-        observers[0] as unknown as IntersectionObserver
-      );
-    });
-
-    expect(root).toHaveClass('opacity-100');
-
-    act(() => {
-      observers[1].callback(
-        [
-          {
-            isIntersecting: true,
-            intersectionRatio: 0.2,
-            target: footerRef.current as Element,
-          } as ObserverEntry,
-        ],
-        observers[1] as unknown as IntersectionObserver
-      );
-    });
-
-    expect(root).toHaveClass('opacity-0');
-  });
-
-  it('handles navigation and jump input updates', () => {
-    const sectionRef = { current: document.createElement('div') };
-    const onPageChange = vi.fn();
-
-    render(
-      <StickyPagination
-        currentPage={2}
-        totalPages={4}
-        onPageChange={onPageChange}
-        sectionRef={sectionRef}
-        label="Popular"
-      />
-    );
-
-    fireEvent.click(screen.getByLabelText('Next page'));
-    expect(onPageChange).toHaveBeenCalledWith(3);
-
-    fireEvent.click(screen.getByLabelText('Previous page'));
-    expect(onPageChange).toHaveBeenCalledWith(1);
-
-    const input = screen.getByLabelText('Current page') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: '4' } });
-    fireEvent.blur(input);
-    expect(onPageChange).toHaveBeenCalledWith(4);
-
-    fireEvent.change(input, { target: { value: '99' } });
-    fireEvent.blur(input);
-    expect(input.value).toBe('2');
-  });
-});

tests/components/ui/UnifiedPagination.test.tsx

@@ -0,0 +1,203 @@
+/**
+ * Component: Unified Pagination Tests
+ * Documentation: documentation/frontend/components.md
+ */
+
+// @vitest-environment jsdom
+
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { UnifiedPagination, PaginationSection } from '@/components/ui/UnifiedPagination';
+
+type ObserverEntry = {
+  isIntersecting: boolean;
+  intersectionRatio: number;
+  target: Element;
+};
+
+function makeSections(
+  overrides?: Partial<PaginationSection>[]
+): [PaginationSection, PaginationSection] {
+  const defaults: [PaginationSection, PaginationSection] = [
+    {
+      label: 'Popular',
+      accentColor: 'bg-blue-500',
+      currentPage: 1,
+      totalPages: 3,
+      onPageChange: vi.fn(),
+      sectionRef: { current: document.createElement('section') },
+      onScrollToSection: vi.fn(),
+    },
+    {
+      label: 'New Releases',
+      accentColor: 'bg-emerald-500',
+      currentPage: 1,
+      totalPages: 2,
+      onPageChange: vi.fn(),
+      sectionRef: { current: document.createElement('section') },
+      onScrollToSection: vi.fn(),
+    },
+  ];
+
+  if (overrides) {
+    overrides.forEach((o, i) => {
+      if (o) Object.assign(defaults[i], o);
+    });
+  }
+
+  return defaults;
+}
+
+describe('UnifiedPagination', () => {
+  const observers: { callback: IntersectionObserverCallback; observe: ReturnType<typeof vi.fn>; disconnect: ReturnType<typeof vi.fn> }[] = [];
+
+  beforeEach(() => {
+    observers.length = 0;
+
+    class MockIntersectionObserver {
+      callback: IntersectionObserverCallback;
+      observe = vi.fn();
+      unobserve = vi.fn();
+      disconnect = vi.fn();
+      takeRecords = vi.fn();
+
+      constructor(callback: IntersectionObserverCallback) {
+        this.callback = callback;
+        observers.push(this);
+      }
+    }
+
+    (global as any).IntersectionObserver = MockIntersectionObserver;
+  });
+
+  it('renders nothing when both sections have only one page', () => {
+    const sections = makeSections([{ totalPages: 1 }, { totalPages: 1 }]);
+    const { container } = render(<UnifiedPagination sections={sections} />);
+    // The pill should be hidden (pointer-events-none, opacity-0)
+    const root = container.querySelector('div.fixed') as HTMLElement;
+    expect(root).toHaveClass('pointer-events-none');
+  });
+
+  it('shows pagination when the dominant section is visible and has pages', () => {
+    const sections = makeSections();
+    const { container } = render(<UnifiedPagination sections={sections} />);
+
+    const root = container.querySelector('div.fixed') as HTMLElement;
+    expect(root).toHaveClass('opacity-0');
+
+    // Simulate first section becoming visible with high ratio
+    act(() => {
+      observers[0].callback(
+        [
+          {
+            isIntersecting: true,
+            intersectionRatio: 0.5,
+            target: sections[0].sectionRef.current as Element,
+          } as ObserverEntry,
+        ],
+        observers[0] as unknown as IntersectionObserver
+      );
+    });
+
+    expect(root).toHaveClass('opacity-100');
+  });
+
+  it('hides when footer becomes visible', () => {
+    const sections = makeSections();
+    const footerRef = { current: document.createElement('footer') };
+    const { container } = render(
+      <UnifiedPagination sections={sections} footerRef={footerRef} />
+    );
+
+    const root = container.querySelector('div.fixed') as HTMLElement;
+
+    // Make section visible
+    act(() => {
+      observers[0].callback(
+        [
+          {
+            isIntersecting: true,
+            intersectionRatio: 0.5,
+            target: sections[0].sectionRef.current as Element,
+          } as ObserverEntry,
+        ],
+        observers[0] as unknown as IntersectionObserver
+      );
+    });
+
+    expect(root).toHaveClass('opacity-100');
+
+    // Footer observer is the 3rd (index 2): section0, section1, footer
+    act(() => {
+      observers[2].callback(
+        [
+          {
+            isIntersecting: true,
+            intersectionRatio: 0.1,
+            target: footerRef.current as Element,
+          } as ObserverEntry,
+        ],
+        observers[2] as unknown as IntersectionObserver
+      );
+    });
+
+    expect(root).toHaveClass('opacity-0');
+  });
+
+  it('calls onPageChange for prev/next buttons', () => {
+    const sections = makeSections([{ currentPage: 2, totalPages: 4 }]);
+    const { container } = render(<UnifiedPagination sections={sections} />);
+
+    // Make section visible so controls render interactably
+    act(() => {
+      observers[0].callback(
+        [
+          {
+            isIntersecting: true,
+            intersectionRatio: 0.5,
+            target: sections[0].sectionRef.current as Element,
+          } as ObserverEntry,
+        ],
+        observers[0] as unknown as IntersectionObserver
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('Next page'));
+    expect(sections[0].onPageChange).toHaveBeenCalledWith(3);
+
+    fireEvent.click(screen.getByLabelText('Previous page'));
+    expect(sections[0].onPageChange).toHaveBeenCalledWith(1);
+  });
+
+  it('handles page jump input', () => {
+    const sections = makeSections([{ currentPage: 2, totalPages: 5 }]);
+    render(<UnifiedPagination sections={sections} />);
+
+    // Make section visible
+    act(() => {
+      observers[0].callback(
+        [
+          {
+            isIntersecting: true,
+            intersectionRatio: 0.5,
+            target: sections[0].sectionRef.current as Element,
+          } as ObserverEntry,
+        ],
+        observers[0] as unknown as IntersectionObserver
+      );
+    });
+
+    const input = screen.getByLabelText('Jump to page') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: '4' } });
+    fireEvent.blur(input);
+    expect(sections[0].onPageChange).toHaveBeenCalledWith(4);
+  });
+
+  it('uses pointer-events-none when hidden', () => {
+    const sections = makeSections();
+    const { container } = render(<UnifiedPagination sections={sections} />);
+    const root = container.querySelector('div.fixed') as HTMLElement;
+    expect(root).toHaveClass('pointer-events-none');
+  });
+});