Add authors pages and requestType notifications

Introduce full authors browsing/detail feature and enhance notifications to support type-specific titles. - Add server APIs: authors search, author detail, and author books routes (audnexus integration) that require auth and enrich results with library matches. - Add frontend pages/components: /authors listing and /authors/[asin] detail pages; AuthorCard, AuthorGrid, AuthorDetailCard, SimilarAuthorsRow, and related skeletons. - Add hook and integration stubs: new useAuthors hook and audnexus-authors integration; update audible service to expose audibleBaseUrl. - Update AudiobookDetailsModal to use audibleBaseUrl and link author names to author detail pages. - Add header navigation link to Authors. - Notifications: extend docs and code to include requestType (audiobook|ebook), add getEventTitle/getEventMeta helpers, update queue signature and providers/processors/tests to pass/handle requestType so titles can be resolved per request type. - Misc: job queue, processors, provider tests and notification tests updated to reflect new behavior. This change enables browsing authors and provides type-aware notification titles without per-provider changes.
2026-06-03 04:40:09 +00:00 · 2026-02-12 15:21:42 -05:00
parent e40e77c8fe
commit 89422fc77a
33 changed files with 1629 additions and 40 deletions
@@ -0,0 +1,121 @@
+/**
+ * Component: Author Detail Page
+ * Documentation: documentation/frontend/components.md
+ */
+
+'use client';
+
+import { use, useCallback } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Header } from '@/components/layout/Header';
+import { AudiobookGrid } from '@/components/audiobooks/AudiobookGrid';
+import { AuthorDetailCard, AuthorDetailSkeleton } from '@/components/authors/AuthorDetailCard';
+import { SimilarAuthorsRow, SimilarAuthorsSkeleton } from '@/components/authors/SimilarAuthorsRow';
+import { useAuthorDetail, useAuthorBooks } from '@/lib/hooks/useAuthors';
+import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
+import { CardSizeControls } from '@/components/ui/CardSizeControls';
+import { SquareCoversToggle } from '@/components/ui/SquareCoversToggle';
+import { usePreferences } from '@/contexts/PreferencesContext';
+
+export default function AuthorDetailPage({
+  params,
+}: {
+  params: Promise<{ asin: string }>;
+}) {
+  const { asin } = use(params);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const fromAuthorName = searchParams.get('from');
+  const { author, isLoading: authorLoading } = useAuthorDetail(asin);
+  const { books, totalBooks, isLoading: booksLoading } = useAuthorBooks(
+    asin,
+    author?.name || null
+  );
+  const { cardSize, setCardSize, squareCovers, setSquareCovers } = usePreferences();
+
+  const handleBack = useCallback(() => {
+    // Use browser back if we came from within the app, otherwise fallback to /authors
+    if (window.history.length > 1) {
+      router.back();
+    } else {
+      router.push('/authors');
+    }
+  }, [router]);
+
+  return (
+    <ProtectedRoute>
+      <div className="min-h-screen">
+        <Header />
+
+        <main className="container mx-auto px-4 py-6 sm:py-8 max-w-7xl space-y-8">
+          {/* Back navigation */}
+          <button
+            onClick={handleBack}
+            className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            {fromAuthorName ? `Back to ${fromAuthorName}` : 'Back to Authors'}
+          </button>
+
+          {/* Author Detail Card */}
+          {authorLoading ? (
+            <AuthorDetailSkeleton />
+          ) : author ? (
+            <AuthorDetailCard author={author} />
+          ) : (
+            <div className="text-center py-16 space-y-4">
+              <svg className="mx-auto h-16 w-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+              <p className="text-xl text-gray-600 dark:text-gray-400">Author not found</p>
+            </div>
+          )}
+
+          {/* Similar Authors */}
+          {authorLoading ? (
+            <SimilarAuthorsSkeleton />
+          ) : author && author.similar.length > 0 ? (
+            <SimilarAuthorsRow authors={author.similar} currentAuthorName={author.name} />
+          ) : null}
+
+          {/* Books Section */}
+          {author && (
+            <div className="space-y-6">
+              {/* Sticky Books Header */}
+              <div className="sticky top-14 sm:top-16 z-30">
+                <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl px-4 sm:px-6 py-3 border border-gray-200/50 dark:border-gray-700/50 shadow-sm">
+                  <div className="flex items-center gap-3">
+                    <div className="w-1 h-6 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full" />
+                    <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 truncate">
+                      Books
+                    </h2>
+                    {!booksLoading && totalBooks > 0 && (
+                      <span className="text-sm text-gray-600 dark:text-gray-400 hidden sm:inline whitespace-nowrap">
+                        ({totalBooks} title{totalBooks !== 1 ? 's' : ''})
+                      </span>
+                    )}
+                    <div className="ml-auto flex items-center gap-1">
+                      <SquareCoversToggle enabled={squareCovers} onToggle={setSquareCovers} />
+                      <CardSizeControls size={cardSize} onSizeChange={setCardSize} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Books Grid */}
+              <AudiobookGrid
+                audiobooks={books}
+                isLoading={booksLoading}
+                emptyMessage={`No books found for ${author.name}`}
+                cardSize={cardSize}
+                squareCovers={squareCovers}
+              />
+            </div>
+          )}
+        </main>
+      </div>
+    </ProtectedRoute>
+  );
+}
@@ -0,0 +1,176 @@
+/**
+ * Component: Authors Page
+ * Documentation: documentation/frontend/components.md
+ */
+
+'use client';
+
+import { Suspense, useState, useEffect, useCallback } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import { Header } from '@/components/layout/Header';
+import { AuthorGrid } from '@/components/authors/AuthorGrid';
+import { useAuthorSearch } from '@/lib/hooks/useAuthors';
+import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
+import { CardSizeControls } from '@/components/ui/CardSizeControls';
+import { usePreferences } from '@/contexts/PreferencesContext';
+
+function AuthorsPageContent() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const initialQuery = searchParams.get('q') || '';
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const { cardSize, setCardSize } = usePreferences();
+
+  // Debounce search query and sync to URL
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedQuery(query);
+      // Update URL without adding history entries
+      const trimmed = query.trim();
+      if (trimmed) {
+        router.replace(`/authors?q=${encodeURIComponent(trimmed)}`, { scroll: false });
+      } else {
+        router.replace('/authors', { scroll: false });
+      }
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [query, router]);
+
+  const { authors, isLoading } = useAuthorSearch(debouncedQuery);
+
+  const handleSearch = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+  }, []);
+
+  return (
+    <ProtectedRoute>
+      <div className="min-h-screen">
+        <Header />
+
+        <main className="container mx-auto px-4 py-8 max-w-7xl space-y-8">
+          {/* Page Header */}
+          <div className="text-center space-y-4">
+            <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100">
+              Browse Authors
+            </h1>
+            <p className="text-gray-600 dark:text-gray-400">
+              Search for your favorite audiobook authors
+            </p>
+          </div>
+
+          {/* Search Form */}
+          <form onSubmit={handleSearch} className="max-w-3xl mx-auto">
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                <svg
+                  className="h-5 w-5 text-gray-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  />
+                </svg>
+              </div>
+              <input
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search by author name..."
+                className="w-full pl-12 pr-12 py-4 text-lg border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400"
+                autoFocus
+              />
+              {query && (
+                <button
+                  type="button"
+                  onClick={() => setQuery('')}
+                  className="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                >
+                  <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              )}
+            </div>
+          </form>
+
+          {/* Results */}
+          {debouncedQuery ? (
+            <div className="space-y-6">
+              {/* Sticky Results Header */}
+              <div className="sticky top-14 sm:top-16 z-30 mb-4 sm:mb-6">
+                <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl px-4 sm:px-6 py-3 border border-gray-200/50 dark:border-gray-700/50 shadow-sm">
+                  <div className="flex items-center gap-3">
+                    <div className="w-1 h-6 bg-gradient-to-b from-indigo-500 to-purple-500 rounded-full" />
+                    <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 truncate">
+                      Authors
+                    </h2>
+                    {!isLoading && authors.length > 0 && (
+                      <span className="text-sm text-gray-600 dark:text-gray-400 hidden sm:inline whitespace-nowrap">
+                        ({authors.length} result{authors.length !== 1 ? 's' : ''})
+                      </span>
+                    )}
+                    <div className="ml-auto flex items-center gap-1">
+                      <CardSizeControls size={cardSize} onSizeChange={setCardSize} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Author Grid */}
+              <AuthorGrid
+                authors={authors}
+                isLoading={!!isLoading}
+                emptyMessage={`No authors found for "${debouncedQuery}"`}
+                cardSize={cardSize}
+              />
+            </div>
+          ) : (
+            /* Empty State */
+            <div className="text-center py-16 space-y-4">
+              <svg
+                className="mx-auto h-16 w-16 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+                />
+              </svg>
+              <p className="text-xl text-gray-600 dark:text-gray-400">
+                Start typing to search for authors
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-500">
+                Search by author name to discover their works
+              </p>
+            </div>
+          )}
+        </main>
+      </div>
+    </ProtectedRoute>
+  );
+}
+
+export default function AuthorsPage() {
+  return (
+    <Suspense>
+      <AuthorsPageContent />
+    </Suspense>
+  );
+}