Add reported-issues, Goodreads sync & notifs

Introduce user-reported-issues and Goodreads shelf sync features and wire them into notifications. Adds Prisma migrations and schema changes (ReportedIssue, GoodreadsShelf, GoodreadsBookMapping), API endpoints for reporting (POST /audiobooks/[asin]/report-issue) and admin management (list, resolve/dismiss, replace), and an admin UI section to view/dismiss/replace reported issues. Adds a new notification event (issue_reported) with updates to notification schemas, docs and provider handling, plus a notification-events constants file. Refactors request creation to use createRequestForUser service, adds a Goodreads sync processor/service/hooks/UI modals, a scrape-resilience util, and related tests and minor integration updates.
2026-06-03 21:00:09 +00:00 · 2026-02-11 16:49:55 -05:00
parent b013538b63
commit 20c8fb0898
69 changed files with 4167 additions and 766 deletions
@@ -244,6 +244,7 @@ export function AudiobookCard({
        requestStatus={audiobook.requestStatus}
        isAvailable={audiobook.isAvailable}
        requestedByUsername={audiobook.requestedByUsername}
+        hasReportedIssue={audiobook.hasReportedIssue}
      />
    </>
  );
@@ -16,6 +16,7 @@ import { useCreateRequest, useEbookStatus, useFetchEbookByAsin } from '@/lib/hoo
 import { useAuth } from '@/contexts/AuthContext';
 import { usePreferences } from '@/contexts/PreferencesContext';
 import { InteractiveTorrentSearchModal } from '@/components/requests/InteractiveTorrentSearchModal';
+import { ReportIssueModal } from '@/components/audiobooks/ReportIssueModal';

 interface AudiobookDetailsModalProps {
  asin: string;
@@ -27,6 +28,7 @@ interface AudiobookDetailsModalProps {
  isAvailable?: boolean;
  requestedByUsername?: string | null;
  hideRequestActions?: boolean;
+  hasReportedIssue?: boolean;
 }

 // Status helper
@@ -65,6 +67,7 @@ export function AudiobookDetailsModal({
  isAvailable = false,
  requestedByUsername = null,
  hideRequestActions = false,
+  hasReportedIssue = false,
 }: AudiobookDetailsModalProps) {
  const { user } = useAuth();
  const { squareCovers } = usePreferences();
@@ -79,6 +82,7 @@ export function AudiobookDetailsModal({
  const [mounted, setMounted] = useState(false);
  const [showInteractiveSearch, setShowInteractiveSearch] = useState(false);
  const [showInteractiveSearchEbook, setShowInteractiveSearchEbook] = useState(false);
+  const [showReportIssue, setShowReportIssue] = useState(false);
  const [asinCopied, setAsinCopied] = useState(false);

  const status = getStatusInfo(isAvailable, requestStatus, requestedByUsername);
@@ -316,6 +320,33 @@ export function AudiobookDetailsModal({
                    </div>
                  )}

+                  {/* Issue Reported Badge */}
+                  {isAvailable && hasReportedIssue && (
+                    <div className="mt-2 inline-flex">
+                      <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400">
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
+                        </svg>
+                        Issue Reported
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Report Issue Button - inline with metadata, not in action bar */}
+                  {isAvailable && !hasReportedIssue && user && (
+                    <div className="mt-2 inline-flex">
+                      <button
+                        onClick={() => setShowReportIssue(true)}
+                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 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="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
+                        </svg>
+                        Report Issue
+                      </button>
+                    </div>
+                  )}
+
                  {/* Quick Metadata */}
                  <div className="mt-4 flex flex-wrap items-center justify-center sm:justify-start gap-3 text-sm text-gray-500 dark:text-gray-400">
                    {audiobook.durationMinutes && (
@@ -526,6 +557,7 @@ export function AudiobookDetailsModal({
                  )}
                </>
              )}
+
            </div>
          </div>
        )}
@@ -594,6 +626,22 @@ export function AudiobookDetailsModal({
        </div>,
        document.body
      )}
+
+      {/* Report Issue Modal */}
+      {showReportIssue && audiobook && (
+        <ReportIssueModal
+          isOpen={showReportIssue}
+          onClose={() => setShowReportIssue(false)}
+          onSuccess={() => {
+            setShowReportIssue(false);
+            showNotification('Issue reported!');
+          }}
+          asin={asin}
+          bookTitle={audiobook.title}
+          bookAuthor={audiobook.author}
+          coverArtUrl={audiobook.coverArtUrl}
+        />
+      )}
    </>
  );
 }
@@ -0,0 +1,143 @@
+/**
+ * Component: Report Issue Modal
+ * Documentation: documentation/frontend/components.md
+ *
+ * Sub-modal for reporting problems with available audiobooks.
+ * Rendered via portal at z-[60] to layer above AudiobookDetailsModal.
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useReportIssue } from '@/lib/hooks/useReportedIssues';
+
+interface ReportIssueModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  asin: string;
+  bookTitle: string;
+  bookAuthor: string;
+  coverArtUrl?: string;
+}
+
+export function ReportIssueModal({
+  isOpen,
+  onClose,
+  onSuccess,
+  asin,
+  bookTitle,
+  bookAuthor,
+  coverArtUrl,
+}: ReportIssueModalProps) {
+  const { reportIssue, isLoading } = useReportIssue();
+  const [reason, setReason] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const maxChars = 250;
+  const canSubmit = reason.trim().length > 0 && reason.length <= maxChars && !isLoading;
+
+  const handleSubmit = async () => {
+    if (!canSubmit) return;
+
+    setError(null);
+    try {
+      await reportIssue(asin, reason.trim(), {
+        title: bookTitle,
+        author: bookAuthor,
+        coverArtUrl,
+      });
+      setReason('');
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to report issue');
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const modalContent = (
+    <div
+      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 dark:bg-black/60 backdrop-blur-sm animate-in fade-in duration-150"
+      onClick={() => !isLoading && onClose()}
+    >
+      <div
+        className="mx-5 w-full max-w-sm bg-white dark:bg-gray-800 rounded-2xl shadow-2xl shadow-black/20 overflow-hidden animate-in zoom-in-95 duration-200"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="px-5 pt-5 pb-4">
+          <div className="flex items-center gap-3 mb-3">
+            <div className="w-10 h-10 rounded-xl bg-orange-500/10 dark:bg-orange-400/15 flex items-center justify-center flex-shrink-0">
+              <svg className="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
+              </svg>
+            </div>
+            <div className="min-w-0">
+              <h3 className="text-[15px] font-semibold text-gray-900 dark:text-white">
+                Report Issue
+              </h3>
+              <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5 truncate">
+                {bookTitle}
+              </p>
+            </div>
+          </div>
+
+          {/* Reason Textarea */}
+          <div className="space-y-2">
+            <textarea
+              value={reason}
+              onChange={(e) => {
+                setReason(e.target.value);
+                if (error) setError(null);
+              }}
+              placeholder="Describe the problem (e.g., corrupted audio, wrong book, missing chapters...)"
+              rows={3}
+              maxLength={maxChars}
+              disabled={isLoading}
+              className="w-full px-3.5 py-2.5 bg-gray-50 dark:bg-white/[0.06] rounded-xl border border-gray-200 dark:border-gray-700 text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 resize-none focus:outline-none focus:border-orange-500/40 focus:ring-1 focus:ring-orange-500/20 transition-all disabled:opacity-50"
+            />
+            <div className="flex items-center justify-between px-1">
+              <div className="min-h-[1.25rem]">
+                {error && (
+                  <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
+                )}
+              </div>
+              <span className={`text-xs tabular-nums ${reason.length > maxChars ? 'text-red-500' : 'text-gray-400 dark:text-gray-500'}`}>
+                {reason.length}/{maxChars}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex border-t border-gray-200/80 dark:border-gray-700/50">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="flex-1 px-4 py-3 text-[15px] font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-white/[0.03] transition-colors disabled:opacity-40 border-r border-gray-200/80 dark:border-gray-700/50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={!canSubmit}
+            className="flex-1 px-4 py-3 text-[15px] font-semibold text-orange-600 dark:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-500/10 transition-colors disabled:opacity-40 disabled:pointer-events-none"
+          >
+            {isLoading ? (
+              <span className="flex items-center justify-center gap-2">
+                <div className="w-4 h-4 border-2 border-orange-300 dark:border-orange-600 border-t-orange-600 dark:border-t-orange-400 rounded-full animate-spin" />
+                Submitting...
+              </span>
+            ) : (
+              'Submit Report'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(modalContent, document.body);
+}
@@ -12,6 +12,7 @@ import { useAuth } from '@/contexts/AuthContext';
 import { Button } from '@/components/ui/Button';
 import { VersionBadge } from '@/components/ui/VersionBadge';
 import { ChangePasswordModal } from '@/components/ui/ChangePasswordModal';
+import { AddGoodreadsShelfModal } from '@/components/ui/AddGoodreadsShelfModal';
 import { useSmartDropdownPosition } from '@/hooks/useSmartDropdownPosition';

 export function Header() {
@@ -20,6 +21,7 @@ export function Header() {
  const [showMobileMenu, setShowMobileMenu] = useState(false);
  const [showBookDate, setShowBookDate] = useState(false);
  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
+  const [showAddGoodreadsModal, setShowAddGoodreadsModal] = useState(false);
  const { containerRef, dropdownRef, positionAbove, style } = useSmartDropdownPosition(showUserMenu);

  // Check if user can change password (local users only)
@@ -90,6 +92,15 @@ export function Header() {
      >
        Profile
      </Link>
+      <button
+        onClick={() => {
+          setShowUserMenu(false);
+          setShowAddGoodreadsModal(true);
+        }}
+        className="w-full text-left px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+      >
+        Add Goodreads Shelf
+      </button>
      {canChangePassword && (
        <button
          onClick={() => {
@@ -297,6 +308,12 @@ export function Header() {
        isOpen={showChangePasswordModal}
        onClose={() => setShowChangePasswordModal(false)}
      />
+
+      {/* Add Goodreads Shelf Modal */}
+      <AddGoodreadsShelfModal
+        isOpen={showAddGoodreadsModal}
+        onClose={() => setShowAddGoodreadsModal(false)}
+      />
    </header>
  );
 }
@@ -0,0 +1,360 @@
+/**
+ * Component: Goodreads Shelves Section (Profile Page)
+ * Documentation: documentation/frontend/components.md
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { useGoodreadsShelves, useDeleteGoodreadsShelf, GoodreadsShelf, ShelfBook } from '@/lib/hooks/useGoodreadsShelves';
+import { AddGoodreadsShelfModal } from '@/components/ui/AddGoodreadsShelfModal';
+import { AudiobookDetailsModal } from '@/components/audiobooks/AudiobookDetailsModal';
+import { usePreferences } from '@/contexts/PreferencesContext';
+import { cn } from '@/lib/utils/cn';
+
+function formatRelativeTime(dateStr: string | null): string {
+  if (!dateStr) return 'Never';
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  if (diffMins < 1) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  const diffHours = Math.floor(diffMins / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+  const diffDays = Math.floor(diffHours / 24);
+  return `${diffDays}d ago`;
+}
+
+export function GoodreadsShelvesSection() {
+  const { shelves, isLoading } = useGoodreadsShelves();
+  const { deleteShelf, isLoading: isDeleting } = useDeleteGoodreadsShelf();
+  const { squareCovers } = usePreferences();
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [selectedAsin, setSelectedAsin] = useState<string | null>(null);
+
+  const handleDelete = async (shelfId: string) => {
+    try {
+      await deleteShelf(shelfId);
+      setConfirmDeleteId(null);
+    } catch {
+      // Error handled by hook
+    }
+  };
+
+  return (
+    <section>
+      {/* Section Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-500/10 dark:to-orange-500/10 flex items-center justify-center ring-1 ring-amber-200/50 dark:ring-amber-500/10">
+            <svg className="w-[18px] h-[18px] text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
+            </svg>
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white leading-tight">
+              Goodreads Shelves
+            </h2>
+            {!isLoading && shelves.length > 0 && (
+              <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
+                {shelves.length} {shelves.length === 1 ? 'shelf' : 'shelves'} connected
+              </p>
+            )}
+          </div>
+        </div>
+
+        <button
+          onClick={() => setShowAddModal(true)}
+          className="inline-flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700/70 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 shadow-sm"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+          </svg>
+          Add Shelf
+        </button>
+      </div>
+
+      {/* Content */}
+      {isLoading ? (
+        <ShelfCardSkeleton squareCovers={squareCovers} />
+      ) : shelves.length > 0 ? (
+        <div className="space-y-4">
+          {shelves.map((shelf) => (
+            <ShelfCard
+              key={shelf.id}
+              shelf={shelf}
+              squareCovers={squareCovers}
+              isDeleting={isDeleting && confirmDeleteId === shelf.id}
+              isConfirmingDelete={confirmDeleteId === shelf.id}
+              onDelete={() => handleDelete(shelf.id)}
+              onConfirmDelete={() => setConfirmDeleteId(shelf.id)}
+              onCancelDelete={() => setConfirmDeleteId(null)}
+              onBookClick={(asin) => setSelectedAsin(asin)}
+            />
+          ))}
+        </div>
+      ) : (
+        <EmptyState onAdd={() => setShowAddModal(true)} />
+      )}
+
+      <AddGoodreadsShelfModal
+        isOpen={showAddModal}
+        onClose={() => setShowAddModal(false)}
+      />
+
+      {/* Audiobook Detail Modal (read-only) */}
+      {selectedAsin && (
+        <AudiobookDetailsModal
+          asin={selectedAsin}
+          isOpen={true}
+          onClose={() => setSelectedAsin(null)}
+          hideRequestActions
+        />
+      )}
+    </section>
+  );
+}
+
+/* ─── Empty State ─── */
+
+function EmptyState({ onAdd }: { onAdd: () => void }) {
+  return (
+    <div className="rounded-2xl border border-dashed border-gray-200 dark:border-gray-700/40 p-10 sm:p-14 text-center">
+      <div className="mx-auto w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-500/10 dark:to-orange-500/10 flex items-center justify-center mb-5 ring-1 ring-amber-200/50 dark:ring-amber-500/10">
+        <svg className="w-7 h-7 text-amber-500 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
+        </svg>
+      </div>
+
+      <h3 className="text-base font-semibold text-gray-700 dark:text-gray-200 mb-1.5">
+        Connect your reading list
+      </h3>
+      <p className="text-sm text-gray-400 dark:text-gray-500 max-w-xs mx-auto mb-7 leading-relaxed">
+        Link a Goodreads shelf and we&apos;ll automatically request the audiobook for every book you add.
+      </p>
+
+      <button
+        onClick={onAdd}
+        className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-xl transition-colors shadow-sm"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+        </svg>
+        Add Your First Shelf
+      </button>
+    </div>
+  );
+}
+
+/* ─── Loading Skeleton ─── */
+
+function ShelfCardSkeleton({ squareCovers }: { squareCovers: boolean }) {
+  return (
+    <div className="rounded-2xl bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700/30 p-6 sm:p-7">
+      <div className="mb-5">
+        <div className="h-[18px] w-52 bg-gray-100 dark:bg-gray-700/50 rounded-lg animate-pulse mb-2.5" />
+        <div className="flex items-center gap-2">
+          <div className="h-[22px] w-16 bg-gray-100 dark:bg-gray-700/50 rounded-md animate-pulse" />
+          <div className="h-3.5 w-24 bg-gray-100 dark:bg-gray-700/50 rounded-md animate-pulse" />
+        </div>
+      </div>
+      <div className="flex items-end">
+        {[...Array(5)].map((_, i) => (
+          <div
+            key={i}
+            className={cn(
+              'rounded-xl bg-gray-100 dark:bg-gray-700/40 animate-pulse flex-shrink-0 ring-2 ring-white dark:ring-gray-800',
+              squareCovers ? 'w-[80px] h-[80px]' : 'w-[72px] h-[108px]'
+            )}
+            style={{ marginLeft: i > 0 ? '-16px' : 0, zIndex: 5 - i }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ─── Shelf Card ─── */
+
+interface ShelfCardProps {
+  shelf: GoodreadsShelf;
+  squareCovers: boolean;
+  isDeleting: boolean;
+  isConfirmingDelete: boolean;
+  onDelete: () => void;
+  onConfirmDelete: () => void;
+  onCancelDelete: () => void;
+  onBookClick: (asin: string) => void;
+}
+
+function ShelfCard({
+  shelf,
+  squareCovers,
+  isDeleting,
+  isConfirmingDelete,
+  onDelete,
+  onConfirmDelete,
+  onCancelDelete,
+  onBookClick,
+}: ShelfCardProps) {
+  const displayBooks = shelf.books.slice(0, 6);
+  const hasCovers = displayBooks.length > 0;
+  const remainingCount = Math.max(0, (shelf.bookCount || 0) - displayBooks.length);
+  const isSyncing = !shelf.lastSyncAt;
+
+  return (
+    <div className="group rounded-2xl bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700/30 p-6 sm:p-7 transition-all duration-300 hover:shadow-lg hover:shadow-black/[0.04] dark:hover:shadow-black/20 hover:border-gray-200 dark:hover:border-gray-600/40">
+      {/* Top: Shelf info + actions */}
+      <div className={cn('flex items-start justify-between', (hasCovers || isSyncing) && 'mb-5')}>
+        <div className="min-w-0 flex-1">
+          <h3 className="font-semibold text-[15px] text-gray-900 dark:text-white truncate leading-snug">
+            {shelf.name}
+          </h3>
+          <div className="flex items-center gap-2 mt-2">
+            {shelf.bookCount != null && (
+              <span className="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-gray-100 dark:bg-gray-700/50 text-gray-500 dark:text-gray-400 tabular-nums">
+                {shelf.bookCount} {shelf.bookCount === 1 ? 'book' : 'books'}
+              </span>
+            )}
+            <span className="inline-flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500">
+              {isSyncing ? (
+                <>
+                  <span className="relative flex h-2 w-2">
+                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
+                    <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
+                  </span>
+                  Syncing&hellip;
+                </>
+              ) : shelf.lastSyncAt ? (
+                <>
+                  <span className="inline-block w-1.5 h-1.5 rounded-full bg-emerald-500" />
+                  Synced {formatRelativeTime(shelf.lastSyncAt)}
+                </>
+              ) : (
+                'Pending sync'
+              )}
+            </span>
+          </div>
+        </div>
+
+        {/* Delete action */}
+        <div className="flex-shrink-0 ml-4">
+          {isConfirmingDelete ? (
+            <div className="flex items-center gap-2">
+              <button
+                onClick={onDelete}
+                disabled={isDeleting}
+                className="px-3 py-1.5 text-xs font-semibold text-white bg-red-500 hover:bg-red-600 rounded-lg transition-colors disabled:opacity-50"
+              >
+                {isDeleting ? 'Removing\u2026' : 'Remove'}
+              </button>
+              <button
+                onClick={onCancelDelete}
+                disabled={isDeleting}
+                className="px-2 py-1.5 text-xs font-medium text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <button
+              onClick={onConfirmDelete}
+              className="p-2 text-gray-300 hover:text-red-400 dark:text-gray-600 dark:hover:text-red-400 transition-all duration-200 rounded-xl hover:bg-red-50 dark:hover:bg-red-500/10 opacity-0 group-hover:opacity-100 focus:opacity-100"
+              title="Remove shelf"
+            >
+              <svg className="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Bottom: Stacked book covers */}
+      {hasCovers ? (
+        <CoverStack books={displayBooks} remainingCount={remainingCount} squareCovers={squareCovers} onBookClick={onBookClick} />
+      ) : isSyncing ? (
+        <div className="flex items-end">
+          {[...Array(3)].map((_, i) => (
+            <div
+              key={i}
+              className={cn(
+                'rounded-xl bg-gray-50 dark:bg-gray-700/30 animate-pulse flex-shrink-0 ring-2 ring-white dark:ring-gray-800',
+                squareCovers ? 'w-[80px] h-[80px]' : 'w-[72px] h-[108px]'
+              )}
+              style={{ marginLeft: i > 0 ? '-16px' : 0, zIndex: 3 - i }}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/* ─── Stacked Cover Display ─── */
+
+function CoverStack({
+  books,
+  remainingCount,
+  squareCovers,
+  onBookClick,
+}: {
+  books: ShelfBook[];
+  remainingCount: number;
+  squareCovers: boolean;
+  onBookClick: (asin: string) => void;
+}) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const coverSize = squareCovers
+    ? 'w-[80px] aspect-square'
+    : 'w-[72px] aspect-[2/3]';
+
+  return (
+    <div className="flex items-end">
+      {books.map((book, i) => (
+        <div
+          key={i}
+          className={cn(
+            'relative rounded-xl overflow-hidden shadow-md flex-shrink-0',
+            'ring-2 ring-white dark:ring-gray-800',
+            'transition-all duration-300 ease-out',
+            hoveredIndex === i && 'scale-[1.18] shadow-xl',
+            coverSize,
+            book.asin ? 'cursor-pointer' : 'cursor-default'
+          )}
+          style={{
+            marginLeft: i > 0 ? '-16px' : 0,
+            zIndex: hoveredIndex === i ? 50 : books.length - i,
+          }}
+          onMouseEnter={() => setHoveredIndex(i)}
+          onMouseLeave={() => setHoveredIndex(null)}
+          onClick={() => book.asin && onBookClick(book.asin)}
+          title={book.asin ? `${book.title}${book.author ? ` by ${book.author}` : ''}` : undefined}
+        >
+          <img
+            src={book.coverUrl}
+            alt=""
+            className="w-full h-full object-cover"
+            loading="lazy"
+            draggable={false}
+          />
+        </div>
+      ))}
+      {remainingCount > 0 && (
+        <div
+          className={cn(
+            'rounded-xl flex items-center justify-center bg-gray-50 dark:bg-gray-700/30 border border-gray-100 dark:border-gray-700/40 flex-shrink-0 ring-2 ring-white dark:ring-gray-800',
+            coverSize
+          )}
+          style={{ marginLeft: '-16px', zIndex: 0 }}
+        >
+          <span className="text-sm font-semibold text-gray-400 dark:text-gray-500 tabular-nums">
+            +{remainingCount}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -22,6 +22,7 @@ import {
  useInteractiveSearchEbookByAsin,
  useSelectEbookByAsin,
 } from '@/lib/hooks/useRequests';
+import { useReplaceWithTorrent } from '@/lib/hooks/useReportedIssues';
 import { Audiobook } from '@/lib/hooks/useAudiobooks';

 interface InteractiveTorrentSearchModalProps {
@@ -36,6 +37,7 @@ interface InteractiveTorrentSearchModalProps {
  fullAudiobook?: Audiobook; // Optional - only provided when called from details modal
  onSuccess?: () => void;
  searchMode?: 'audiobook' | 'ebook'; // Search mode - defaults to audiobook
+  replaceIssueId?: string; // Optional - when set, confirm handler calls replace endpoint instead
 }

 // Format relative time from publish date
@@ -87,11 +89,15 @@ export function InteractiveTorrentSearchModal({
  fullAudiobook,
  onSuccess,
  searchMode = 'audiobook',
+  replaceIssueId,
 }: InteractiveTorrentSearchModalProps) {
  // Hooks for existing audiobook request flow
  const { searchTorrents: searchByRequestId, isLoading: isSearchingByRequest, error: searchByRequestError } = useInteractiveSearch();
  const { selectTorrent, isLoading: isSelectingTorrent, error: selectTorrentError } = useSelectTorrent();

+  // Hook for reported issue replacement flow
+  const { replaceWithTorrent, isLoading: isReplacing, error: replaceError } = useReplaceWithTorrent();
+
  // Hooks for new audiobook flow
  const { searchTorrents: searchByAudiobook, isLoading: isSearchingByAudiobook, error: searchByAudiobookError } = useSearchTorrents();
  const { requestWithTorrent, isLoading: isRequestingWithTorrent, error: requestWithTorrentError } = useRequestWithTorrent();
@@ -124,14 +130,18 @@ export function InteractiveTorrentSearchModal({
  const isSearching = isEbookMode
    ? (useAsinMode ? isSearchingEbooksByAsin : isSearchingEbooks)
    : (hasRequestId ? isSearchingByRequest : isSearchingByAudiobook);
-  const isDownloading = isEbookMode
-    ? (useAsinMode ? isSelectingEbookByAsin : isSelectingEbook)
-    : (hasRequestId ? isSelectingTorrent : isRequestingWithTorrent);
-  const error = isEbookMode
-    ? (useAsinMode ? (searchEbooksByAsinError || selectEbookByAsinError) : (searchEbooksError || selectEbookError))
-    : (hasRequestId
-        ? (searchByRequestError || selectTorrentError)
-        : (searchByAudiobookError || requestWithTorrentError));
+  const isDownloading = replaceIssueId
+    ? isReplacing
+    : isEbookMode
+      ? (useAsinMode ? isSelectingEbookByAsin : isSelectingEbook)
+      : (hasRequestId ? isSelectingTorrent : isRequestingWithTorrent);
+  const error = replaceIssueId
+    ? (replaceError || (hasRequestId ? searchByRequestError : searchByAudiobookError))
+    : isEbookMode
+      ? (useAsinMode ? (searchEbooksByAsinError || selectEbookByAsinError) : (searchEbooksError || selectEbookError))
+      : (hasRequestId
+          ? (searchByRequestError || selectTorrentError)
+          : (searchByAudiobookError || requestWithTorrentError));

  // Mount tracking for portal
  useEffect(() => { setMounted(true); }, []);
@@ -188,7 +198,7 @@ export function InteractiveTorrentSearchModal({
        const customTitle = searchTitle !== audiobook.title ? searchTitle : undefined;
        data = await searchByRequestId(requestId, customTitle);
      } else {
-        const audiobookAsin = fullAudiobook?.asin;
+        const audiobookAsin = fullAudiobook?.asin || asin;
        data = await searchByAudiobook(searchTitle, audiobook.author, audiobookAsin);
      }
      setResults(data || []);
@@ -208,7 +218,10 @@ export function InteractiveTorrentSearchModal({
  const handleConfirmDownload = async () => {
    if (!confirmTorrent) return;
    try {
-      if (isEbookMode) {
+      if (replaceIssueId) {
+        // Reported issue replacement flow
+        await replaceWithTorrent(replaceIssueId, confirmTorrent);
+      } else if (isEbookMode) {
        if (useAsinMode && asin) {
          await selectEbookByAsin(asin, confirmTorrent);
        } else if (requestId) {
@@ -0,0 +1,154 @@
+/**
+ * Component: Add Goodreads Shelf Modal
+ * Documentation: documentation/frontend/components.md
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { Modal } from './Modal';
+import { Input } from './Input';
+import { Button } from './Button';
+import { useAddGoodreadsShelf } from '@/lib/hooks/useGoodreadsShelves';
+
+interface AddGoodreadsShelfModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const GOODREADS_RSS_PATTERN = /goodreads\.com\/review\/list_rss\//;
+
+export function AddGoodreadsShelfModal({ isOpen, onClose }: AddGoodreadsShelfModalProps) {
+  const [rssUrl, setRssUrl] = useState('');
+  const [validationError, setValidationError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [successMessage, setSuccessMessage] = useState('');
+  const { addShelf, isLoading, error } = useAddGoodreadsShelf();
+
+  const validateUrl = (url: string): boolean => {
+    if (!url.trim()) {
+      setValidationError('RSS URL is required');
+      return false;
+    }
+    if (!GOODREADS_RSS_PATTERN.test(url)) {
+      setValidationError('Must be a Goodreads shelf RSS URL (goodreads.com/review/list_rss/...)');
+      return false;
+    }
+    setValidationError('');
+    return true;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateUrl(rssUrl)) return;
+
+    try {
+      const shelf = await addShelf(rssUrl);
+      setSuccess(true);
+      setSuccessMessage(`Added shelf "${shelf.name}" successfully!`);
+      setRssUrl('');
+
+      setTimeout(() => {
+        setSuccess(false);
+        onClose();
+      }, 2000);
+    } catch {
+      // Error is handled by the hook
+    }
+  };
+
+  const handleClose = () => {
+    setRssUrl('');
+    setValidationError('');
+    setSuccess(false);
+    setSuccessMessage('');
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} title="Add Goodreads Shelf" size="sm">
+      <div className="space-y-5">
+        {/* Visual header */}
+        <div className="flex items-center gap-4 pb-4 border-b border-gray-100 dark:border-gray-700/50">
+          <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-500/10 dark:to-orange-500/10 flex items-center justify-center ring-1 ring-amber-200/50 dark:ring-amber-500/10 flex-shrink-0">
+            <svg className="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-2.556a4.5 4.5 0 00-6.364-6.364L4.5 8.257a4.5 4.5 0 007.244 1.242" />
+            </svg>
+          </div>
+          <div className="min-w-0">
+            <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+              Paste your Goodreads shelf RSS URL. Books will be automatically requested as audiobooks during each sync.
+            </p>
+          </div>
+        </div>
+
+        {/* Success alert */}
+        {success && (
+          <div className="flex items-center gap-3 p-3.5 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 rounded-xl">
+            <div className="w-8 h-8 rounded-lg bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center flex-shrink-0">
+              <svg className="w-4 h-4 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <p className="text-sm font-medium text-emerald-700 dark:text-emerald-300">{successMessage}</p>
+          </div>
+        )}
+
+        {/* Error alert */}
+        {error && (
+          <div className="flex items-center gap-3 p-3.5 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 rounded-xl">
+            <div className="w-8 h-8 rounded-lg bg-red-100 dark:bg-red-500/20 flex items-center justify-center flex-shrink-0">
+              <svg className="w-4 h-4 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+              </svg>
+            </div>
+            <p className="text-sm font-medium text-red-700 dark:text-red-300">{error}</p>
+          </div>
+        )}
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div>
+            <Input
+              type="url"
+              label="Goodreads RSS URL"
+              value={rssUrl}
+              onChange={(e) => {
+                setRssUrl(e.target.value);
+                if (validationError) setValidationError('');
+              }}
+              placeholder="https://www.goodreads.com/review/list_rss/..."
+              error={validationError}
+              disabled={isLoading || success}
+            />
+            <p className="text-xs text-gray-400 dark:text-gray-500 mt-2 leading-relaxed">
+              Find it on Goodreads: My Books &rarr; select a shelf &rarr; RSS link at the bottom of the page.
+            </p>
+          </div>
+
+          <div className="flex justify-end gap-3 pt-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={handleClose}
+              disabled={isLoading || success}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="primary"
+              size="sm"
+              loading={isLoading}
+              disabled={isLoading || success}
+            >
+              Add Shelf
+            </Button>
+          </div>
+        </form>
+      </div>
+    </Modal>
+  );
+}