Fix token handling, modal behavior, and pagination

Multiple fixes and improvements:

- src/app/api/user/hardcover-shelves/[id]/route.ts: Make token testing more robust by using the existing shelf.apiToken when no new token is provided, attempt decryption only when needed, and gracefully fall back on decryption errors.
- src/components/ui/AddShelfModal.tsx: Simplify token handling by passing the trimmed token directly to addHardcover (remove client-side 'Bearer ' stripping).
- src/components/ui/ManageShelfModal.tsx: Stabilize form reset effect by depending on shelf?.id to avoid unnecessary re-renders when the shelf object changes identity.
- src/components/ui/Modal.tsx: Simplify modal rendering by removing the mounted state and createPortal usage, cleaning up imports and rendering directly.
- src/lib/services/hardcover-api.service.ts: Add a logger, introduce a MAX_PAGES cap and page counters to prevent unbounded pagination loops, and log/break when the API returns errors during pagination.

These changes improve reliability (token handling and pagination safety), reduce unnecessary renders, and simplify modal lifecycle.

src/components/ui/AddShelfModal.tsx

@@ -77,11 +77,7 @@ export function AddShelfModal({ isOpen, onClose }: AddShelfModalProps) {
         setRssUrl('');
       } else {
         const finalId = listType === 'status' ? `status-${statusId}` : customListId.trim();
-        let cleanedToken = apiToken.trim();
-        if (cleanedToken.toLowerCase().startsWith('bearer ')) {
-          cleanedToken = cleanedToken.slice(7).trim();
-        }
-        const shelf = await addHardcover(cleanedToken, finalId);
+        const shelf = await addHardcover(apiToken.trim(), finalId);
         setSuccessMessage(`Added list "${shelf.name}" successfully!`);
         setApiToken('');
         setCustomListId('');

src/components/ui/ManageShelfModal.tsx

@@ -26,14 +26,14 @@ export function ManageShelfModal({ shelf, isOpen, onClose }: ManageShelfModalPro
   const { updateShelf: updateGoodreads, isLoading: isUpdatingGoodreads, error: goodreadsError } = useUpdateGoodreadsShelf();
   const { updateShelf: updateHardcover, isLoading: isUpdatingHardcover, error: hardcoverError } = useUpdateHardcoverShelf();
 
-  // Reset form when shelf changes
+  // Reset form when shelf changes (use shelf?.id for stable reference)
   React.useEffect(() => {
     if (shelf) {
       setRssUrl(shelf.type === 'goodreads' ? shelf.sourceId : '');
       setListId(shelf.type === 'hardcover' ? shelf.sourceId : '');
       setApiToken('');
     }
-  }, [shelf]);
+  }, [shelf?.id]);
 
   if (!shelf) return null;
 

src/components/ui/Modal.tsx

@@ -5,8 +5,7 @@
 
 'use client';
 
-import React, { useEffect, useRef, useCallback, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useEffect, useRef, useCallback } from 'react';
 import { cn } from '@/lib/utils/cn';
 
 interface ModalProps {
@@ -26,12 +25,6 @@ export function Modal({
   size = 'md',
   showCloseButton = true,
 }: ModalProps) {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   // Use ref to avoid re-running effect when onClose changes
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
@@ -60,7 +53,7 @@ export function Modal({
     };
   }, [isOpen, handleClose]);
 
-  if (!isOpen || !mounted) return null;
+  if (!isOpen) return null;
 
   const sizeClasses = {
     sm: 'max-w-md',
@@ -70,8 +63,8 @@ export function Modal({
     full: 'max-w-[95vw]',
   };
 
-  const content = (
-    <div className="fixed inset-0 z-[100] overflow-y-auto">
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
       {/* Backdrop */}
       <div
         className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
@@ -84,7 +77,7 @@ export function Modal({
           className={cn(
             'relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl',
             'transform transition-all',
-            sizeClasses[size],
+            sizeClasses[size]
           )}
           onClick={(e) => e.stopPropagation()}
         >
@@ -123,6 +116,4 @@ export function Modal({
       </div>
     </div>
   );
-
-  return createPortal(content, document.body);
 }