Hardcover API support

2026-06-03 21:00:09 +00:00 · 2026-02-27 15:10:27 -07:00
parent 3ee67c8763
commit cfe780c6f0
14 changed files with 2086 additions and 162 deletions
@@ -0,0 +1,206 @@
+/**
+ * Component: Add Hardcover 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 { useAddHardcoverShelf } from '@/lib/hooks/useHardcoverShelves';
+
+interface AddHardcoverShelfModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function AddHardcoverShelfModal({
+  isOpen,
+  onClose,
+}: AddHardcoverShelfModalProps) {
+  const [apiToken, setApiToken] = useState('');
+  const [listId, setListId] = useState('');
+  const [validationError, setValidationError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [successMessage, setSuccessMessage] = useState('');
+  const { addShelf, isLoading, error } = useAddHardcoverShelf();
+
+  const validateInput = (): boolean => {
+    if (!apiToken.trim()) {
+      setValidationError('Hardcover API Token is required');
+      return false;
+    }
+    if (!listId.trim()) {
+      setValidationError('Hardcover List ID or Status ID is required');
+      return false;
+    }
+    setValidationError('');
+    return true;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateInput()) return;
+
+    try {
+      const shelf = await addShelf(apiToken.trim(), listId.trim());
+      setSuccess(true);
+      setSuccessMessage(`Added list "${shelf.name}" successfully!`);
+      setApiToken('');
+      setListId('');
+
+      setTimeout(() => {
+        setSuccess(false);
+        onClose();
+      }, 2000);
+    } catch {
+      // Error is handled by the hook
+    }
+  };
+
+  const handleClose = () => {
+    setApiToken('');
+    setListId('');
+    setValidationError('');
+    setSuccess(false);
+    setSuccessMessage('');
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Add Hardcover List"
+      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-indigo-50 to-blue-50 dark:from-indigo-500/10 dark:to-blue-500/10 flex items-center justify-center ring-1 ring-indigo-200/50 dark:ring-indigo-500/10 flex-shrink-0">
+            <svg
+              className="w-5 h-5 text-indigo-600 dark:text-indigo-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 className="min-w-0">
+            <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+              Provides your Hardcover API token and the ID of the list you want
+              to 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 className="space-y-3">
+            <Input
+              type="text"
+              label="API Token"
+              value={apiToken}
+              onChange={(e) => {
+                setApiToken(e.target.value);
+                if (validationError) setValidationError('');
+              }}
+              placeholder="eyJhb..."
+              disabled={isLoading || success}
+            />
+            <Input
+              type="text"
+              label="List ID or Status ID"
+              value={listId}
+              onChange={(e) => {
+                setListId(e.target.value);
+                if (validationError) setValidationError('');
+              }}
+              placeholder="1234 or uuid"
+              error={validationError}
+              disabled={isLoading || success}
+            />
+          </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 List
+            </Button>
+          </div>
+        </form>
+      </div>
+    </Modal>
+  );
+}