Refactor shelves UI and jobs

src/components/profile/ShelvesSection.tsx

@@ -0,0 +1,529 @@
+/**
+ * Component: Combined Shelves Section (Profile Page)
+ * Documentation: documentation/frontend/components.md
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { useShelves, GenericShelf } from '@/lib/hooks/useShelves';
+import { useDeleteGoodreadsShelf } from '@/lib/hooks/useGoodreadsShelves';
+import { useDeleteHardcoverShelf } from '@/lib/hooks/useHardcoverShelves';
+import { AddGoodreadsShelfModal } from '@/components/ui/AddGoodreadsShelfModal';
+import { AddHardcoverShelfModal } from '@/components/ui/AddHardcoverShelfModal';
+import { AudiobookDetailsModal } from '@/components/audiobooks/AudiobookDetailsModal';
+import { usePreferences } from '@/contexts/PreferencesContext';
+import { cn } from '@/lib/utils/cn';
+import { Modal } from '@/components/ui/Modal';
+import { ShelfBook } from '@/lib/hooks/useGoodreadsShelves';
+
+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 ShelvesSection() {
+  const { shelves, isLoading } = useShelves();
+  const { deleteShelf: deleteGoodreads, isLoading: isDeletingGoodreads } =
+    useDeleteGoodreadsShelf();
+  const { deleteShelf: deleteHardcover, isLoading: isDeletingHardcover } =
+    useDeleteHardcoverShelf();
+  const { squareCovers } = usePreferences();
+
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+  const [showProviderSelect, setShowProviderSelect] = useState(false);
+  const [showAddGoodreads, setShowAddGoodreads] = useState(false);
+  const [showAddHardcover, setShowAddHardcover] = useState(false);
+  const [selectedAsin, setSelectedAsin] = useState<string | null>(null);
+
+  const handleDelete = async (shelf: GenericShelf) => {
+    try {
+      if (shelf.type === 'goodreads') {
+        await deleteGoodreads(shelf.id);
+      } else {
+        await deleteHardcover(shelf.id);
+      }
+      setConfirmDeleteId(null);
+    } catch {
+      // Error handled by hook
+    }
+  };
+
+  const isDeleting = isDeletingGoodreads || isDeletingHardcover;
+
+  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-emerald-50 to-teal-50 dark:from-emerald-500/10 dark:to-teal-500/10 flex items-center justify-center ring-1 ring-emerald-200/50 dark:ring-emerald-500/10">
+            <svg
+              className="w-[18px] h-[18px] text-emerald-600 dark:text-emerald-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">
+              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>
+
+        {shelves.length > 0 && (
+          <button
+            onClick={() => setShowProviderSelect(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)}
+              onConfirmDelete={() => setConfirmDeleteId(shelf.id)}
+              onCancelDelete={() => setConfirmDeleteId(null)}
+              onBookClick={(asin) => setSelectedAsin(asin)}
+            />
+          ))}
+        </div>
+      ) : (
+        <EmptyState onAdd={() => setShowProviderSelect(true)} />
+      )}
+
+      {/* Modals */}
+      <ProviderSelectModal
+        isOpen={showProviderSelect}
+        onClose={() => setShowProviderSelect(false)}
+        onSelect={(provider) => {
+          setShowProviderSelect(false);
+          if (provider === 'goodreads') setShowAddGoodreads(true);
+          else if (provider === 'hardcover') setShowAddHardcover(true);
+        }}
+      />
+
+      <AddGoodreadsShelfModal
+        isOpen={showAddGoodreads}
+        onClose={() => setShowAddGoodreads(false)}
+      />
+
+      <AddHardcoverShelfModal
+        isOpen={showAddHardcover}
+        onClose={() => setShowAddHardcover(false)}
+      />
+
+      {selectedAsin && (
+        <AudiobookDetailsModal
+          asin={selectedAsin}
+          isOpen={true}
+          onClose={() => setSelectedAsin(null)}
+          hideRequestActions
+        />
+      )}
+    </section>
+  );
+}
+
+/* ─── Provider Select Modal ─── */
+
+function ProviderSelectModal({
+  isOpen,
+  onClose,
+  onSelect,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (provider: string) => void;
+}) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Select Provider" size="sm">
+      <div className="space-y-3">
+        <button
+          onClick={() => onSelect('goodreads')}
+          className="w-full flex items-center gap-4 p-4 text-left bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:border-amber-400 dark:hover:border-amber-500 hover:bg-amber-50 dark:hover:bg-amber-500/10 rounded-xl transition-all"
+        >
+          <div className="w-10 h-10 rounded-lg bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center flex-shrink-0">
+            <span className="text-amber-700 dark:text-amber-400 font-bold text-lg">
+              g
+            </span>
+          </div>
+          <div>
+            <h3 className="font-semibold text-gray-900 dark:text-white">
+              Goodreads
+            </h3>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+              Connect via RSS feed URL
+            </p>
+          </div>
+        </button>
+        <button
+          onClick={() => onSelect('hardcover')}
+          className="w-full flex items-center gap-4 p-4 text-left bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:border-indigo-400 dark:hover:border-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 rounded-xl transition-all"
+        >
+          <div className="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-500/20 flex items-center justify-center flex-shrink-0">
+            <span className="text-indigo-700 dark:text-indigo-400 font-bold text-lg">
+              H
+            </span>
+          </div>
+          <div>
+            <h3 className="font-semibold text-gray-900 dark:text-white">
+              Hardcover
+            </h3>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+              Connect via API token and List ID
+            </p>
+          </div>
+        </button>
+      </div>
+    </Modal>
+  );
+}
+
+/* ─── 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-emerald-50 to-teal-50 dark:from-emerald-500/10 dark:to-teal-500/10 flex items-center justify-center mb-5 ring-1 ring-emerald-200/50 dark:ring-emerald-500/10">
+        <svg
+          className="w-7 h-7 text-emerald-500 dark:text-emerald-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 or Hardcover shelf and we'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: GenericShelf;
+  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;
+
+  const providerIcon =
+    shelf.type === 'goodreads' ? (
+      <span className="text-amber-600 dark:text-amber-400 font-bold ml-2">
+        g
+      </span>
+    ) : (
+      <span className="text-indigo-600 dark:text-indigo-400 font-bold ml-2">
+        H
+      </span>
+    );
+
+  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 flex items-center">
+            {shelf.name} {providerIcon}
+          </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>
+  );
+}