App settings upgrade + new themes

src/app/api/documents/route.ts

@@ -1,4 +1,4 @@
-import { writeFile, readFile, readdir, mkdir } from 'fs/promises';
+import { writeFile, readFile, readdir, mkdir, unlink } from 'fs/promises';
 import { NextRequest, NextResponse } from 'next/server';
 import path from 'path';
 
@@ -81,3 +81,20 @@ export async function GET() {
     return NextResponse.json({ error: 'Failed to load documents' }, { status: 500 });
   }
 }
+
+export async function DELETE() {
+  try {
+    await ensureDocsDir();
+    const files = await readdir(DOCS_DIR);
+    
+    for (const file of files) {
+      const filePath = path.join(DOCS_DIR, file);
+      await unlink(filePath);
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Error deleting documents:', error);
+    return NextResponse.json({ error: 'Failed to delete documents' }, { status: 500 });
+  }
+}

src/app/globals.css

@@ -5,11 +5,11 @@
 :root,
 html.light {
   --background: #ffffff;
-  --foreground: #171717;
+  --foreground: #2d3748;
-  --base: #f5f5f5;
+  --base: #f7fafc;
-  --offbase: #dbdbdb;
+  --offbase: #e2e8f0;
   --accent: #ef4444;
-  --muted: #737373;
+  --muted: #718096;
 }
 
 html.dark {
@@ -21,6 +21,33 @@ html.dark {
   --muted: #a3a3a3;
 }
 
+html.aqua {
+  --background: #020617;
+  --foreground: #e2e8f0;
+  --base: #0f172a;
+  --offbase: #1e293b;
+  --accent: #38bdf8;
+  --muted: #94a3b8;
+}
+
+html.forest {
+  --background: #0a0f0c;
+  --foreground: #d4e8d0;
+  --base: #111a15;
+  --offbase: #1a2820;
+  --accent: #4ade80;
+  --muted: #7c8f85;
+}
+
+html.vibrant {
+  --background: #090420;
+  --foreground: #ffffff;
+  --base: #1a0942;
+  --offbase: #2d1163;
+  --accent: #ff3d81;
+  --muted: #9d7dcc;
+}
+
 /* Ensure background color is set before content loads */
 html {
   background-color: var(--background);

src/components/ConfirmDialog.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { Fragment, useEffect } from 'react';
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  isDangerous?: boolean;
+}
+
+export function ConfirmDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  isDangerous = false,
+}: ConfirmDialogProps) {
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onConfirm();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onConfirm]);
+
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={onClose}>
+        <TransitionChild
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black/25 backdrop-blur-sm" />
+        </TransitionChild>
+
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <TransitionChild
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <DialogPanel className="w-full max-w-md transform rounded-2xl bg-base p-6 text-left align-middle shadow-xl transition-all">
+                <DialogTitle
+                  as="h3"
+                  className="text-lg font-semibold leading-6 text-foreground"
+                >
+                  {title}
+                </DialogTitle>
+                <div className="mt-2">
+                  <p className="text-sm text-foreground/90">{message}</p>
+                </div>
+
+                <div className="mt-6 flex justify-end space-x-3">
+                  <button
+                    type="button"
+                    className="inline-flex justify-center rounded-lg bg-background px-4 py-2 text-sm 
+                             font-medium text-foreground hover:bg-background/90 focus:outline-none 
+                             focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
+                             transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent"
+                    onClick={onClose}
+                  >
+                    {cancelText}
+                  </button>
+                  <button
+                    type="button"
+                    className={`inline-flex justify-center rounded-lg px-4 py-2 text-sm 
+                             font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
+                             transform transition-transform duration-200 ease-in-out hover:scale-[1.04]
+                             ${isDangerous 
+                               ? 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500 hover:text-white' 
+                               : 'bg-accent text-white hover:bg-accent/90 focus-visible:ring-accent hover:text-background'
+                             }`}
+                    onClick={onConfirm}
+                  >
+                    {confirmText}
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}

src/components/DocumentList.tsx

@@ -1,9 +1,10 @@
 import Link from 'next/link';
-import { Button, Dialog } from '@headlessui/react';
+import { Button } from '@headlessui/react';
-import { Transition, TransitionChild, DialogPanel, DialogTitle } from '@headlessui/react';
+import { Transition } from '@headlessui/react';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import { useDocuments } from '@/contexts/DocumentContext';
 import { PDFIcon, EPUBIcon } from '@/components/icons/Icons';
+import { ConfirmDialog } from '@/components/ConfirmDialog';
 
 type DocumentToDelete = {
   id: string;
@@ -21,7 +22,6 @@ export function DocumentList() {
     isEPUBLoading,
   } = useDocuments();
 
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [documentToDelete, setDocumentToDelete] = useState<DocumentToDelete | null>(null);
 
   const handleDelete = async () => {
@@ -33,7 +33,6 @@ export function DocumentList() {
       } else {
         await removeEPUB(documentToDelete.id);
       }
-      setIsDeleteDialogOpen(false);
       setDocumentToDelete(null);
     } catch (err) {
       console.error('Failed to remove document:', err);
@@ -101,10 +100,7 @@ export function DocumentList() {
                 </div>
               </Link>
               <Button
-                onClick={() => {
+                onClick={() => setDocumentToDelete({ id: doc.id, name: doc.name, type: doc.type })}
-                  setDocumentToDelete({ id: doc.id, name: doc.name, type: doc.type });
-                  setIsDeleteDialogOpen(true);
-                }}
                 className="ml-4 p-2 text-muted hover:text-red-500 rounded-lg hover:bg-red-50 transition-colors"
                 aria-label="Delete document"
               >
@@ -117,70 +113,15 @@ export function DocumentList() {
         ))}
       </div>
 
-      <Transition appear show={isDeleteDialogOpen} as={Fragment}>
+      <ConfirmDialog
-        <Dialog
+        isOpen={documentToDelete !== null}
-          as="div"
+        onClose={() => setDocumentToDelete(null)}
-          className="relative z-50"
+        onConfirm={handleDelete}
-          onClose={() => setIsDeleteDialogOpen(false)}
+        title="Delete Document"
-        >
+        message={`Are you sure you want to delete ${documentToDelete?.name ? documentToDelete.name : 'this document'}? This action cannot be undone.`}
-          <TransitionChild
+        confirmText="Delete"
-            as={Fragment}
+        isDangerous={true}
-            enter="ease-out duration-300"
+      />
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-25" />
-          </TransitionChild>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <TransitionChild
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <DialogPanel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-background p-6 text-left align-middle shadow-xl transition-all">
-                  <DialogTitle
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-foreground"
-                  >
-                    Delete Document
-                  </DialogTitle>
-                  <div className="mt-2">
-                    <p className="text-sm text-muted">
-                      Are you sure you want to delete <span className='font-bold'>{documentToDelete?.name}</span>? This action cannot be undone.
-                    </p>
-                  </div>
-
-                  <div className="mt-4 flex justify-end space-x-3">
-                    <Button
-                      type="button"
-                      className="inline-flex justify-center rounded-md border border-transparent bg-base px-4 py-2 text-sm font-medium text-foreground hover:bg-base/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
-                      onClick={() => setIsDeleteDialogOpen(false)}
-                    >
-                      Cancel
-                    </Button>
-                    <Button
-                      type="button"
-                      className="inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-                      onClick={handleDelete}
-                    >
-                      Delete
-                    </Button>
-                  </div>
-                </DialogPanel>
-              </TransitionChild>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
     </div>
   );
 }

src/components/SettingsModal.tsx

@@ -1,12 +1,15 @@
 'use client';
 
-import { Fragment, useState, useEffect } from 'react';
+import { Fragment, useState, useEffect, useCallback } from 'react';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild, Listbox, ListboxButton, ListboxOptions, ListboxOption, Button } from '@headlessui/react';
 import { useTheme } from '@/contexts/ThemeContext';
 import { useConfig } from '@/contexts/ConfigContext';
 import { ChevronUpDownIcon, CheckIcon } from './icons/Icons';
 import { indexedDBService } from '@/utils/indexedDB';
 import { useDocuments } from '@/contexts/DocumentContext';
+import { setItem, getItem } from '@/utils/indexedDB';
+import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { THEMES } from '@/contexts/ThemeContext';
 
 const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.NODE_ENV == null;
 
@@ -15,26 +18,38 @@ interface SettingsModalProps {
   setIsOpen: (isOpen: boolean) => void;
 }
 
-const themes = [
+const themes = THEMES.map(id => ({
-  { id: 'light' as const, name: 'Light' },
+  id,
-  { id: 'dark' as const, name: 'Dark' },
+  name: id.charAt(0).toUpperCase() + id.slice(1)
-  { id: 'system' as const, name: 'System' },
+}));
-];
 
 export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) {
   const { theme, setTheme } = useTheme();
   const { apiKey, baseUrl, updateConfig } = useConfig();
-  const { refreshPDFs, refreshEPUBs } = useDocuments();
+  const { refreshPDFs, refreshEPUBs, clearPDFs, clearEPUBs } = useDocuments();
   const [localApiKey, setLocalApiKey] = useState(apiKey);
   const [localBaseUrl, setLocalBaseUrl] = useState(baseUrl);
   const [isSyncing, setIsSyncing] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const selectedTheme = themes.find(t => t.id === theme) || themes[0];
+  const [showClearLocalConfirm, setShowClearLocalConfirm] = useState(false);
+  const [showClearServerConfirm, setShowClearServerConfirm] = useState(false);
+
+  // set firstVisit on initial load
+  const checkFirstVist = useCallback(async () => {
+    if (!isDev) return;
+    const firstVisit = await getItem('firstVisit');
+    if (firstVisit == null) {
+      await setItem('firstVisit', 'true');
+      setIsOpen(true);
+    }
+  }, [setIsOpen]);
 
   useEffect(() => {
+    checkFirstVist();
     setLocalApiKey(apiKey);
     setLocalBaseUrl(baseUrl);
-  }, [apiKey, baseUrl]);
+  }, [apiKey, baseUrl, checkFirstVist]);
 
   const handleSync = async () => {
     try {
@@ -59,45 +74,65 @@ export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) {
     }
   };
 
-  return (
+  const handleClearLocal = async () => {
-    <Transition appear show={isOpen} as={Fragment}>
+    await clearPDFs();
-      <Dialog as="div" className="relative z-50" onClose={() => setIsOpen(false)}>
+    await clearEPUBs();
-        <TransitionChild
+    setShowClearLocalConfirm(false);
-          as={Fragment}
+  };
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black/25 backdrop-blur-sm" />
-        </TransitionChild>
 
-        <div className="fixed inset-0 overflow-y-auto">
+  const handleClearServer = async () => {
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
+    try {
-            <TransitionChild
+      const response = await fetch('/api/documents', {
-              as={Fragment}
+        method: 'DELETE',
-              enter="ease-out duration-300"
+      });
-              enterFrom="opacity-0 scale-95"
+      if (!response.ok) {
-              enterTo="opacity-100 scale-100"
+        throw new Error('Failed to delete server documents');
-              leave="ease-in duration-200"
+      }
-              leaveFrom="opacity-100 scale-100"
+    } catch (error) {
-              leaveTo="opacity-0 scale-95"
+      console.error('Delete failed:', error);
-            >
+    }
-              <DialogPanel className="w-full max-w-md transform rounded-2xl bg-base p-6 text-left align-middle shadow-xl transition-all">
+    setShowClearServerConfirm(false);
-                <DialogTitle
+  };
-                  as="h3"
+
-                  className="text-lg font-semibold leading-6 text-foreground"
+  return (
-                >
+    <>
-                  Settings
+      <Transition appear show={isOpen} as={Fragment}>
-                </DialogTitle>
+        <Dialog as="div" className="relative z-50" onClose={() => setIsOpen(false)}>
-                <div className="mt-4">
+          <TransitionChild
-                  <div className="space-y-4">
+            as={Fragment}
-                    <div className="space-y-2">
+            enter="ease-out duration-300"
-                      <label className="block text-sm font-medium text-foreground">Theme</label>
+            enterFrom="opacity-0"
-                      <Listbox value={selectedTheme} onChange={(newTheme) => setTheme(newTheme.id)}>
+            enterTo="opacity-100"
-                        <div className="relative">
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black/25 backdrop-blur-sm" />
+          </TransitionChild>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <TransitionChild
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <DialogPanel className="w-full max-w-md transform rounded-2xl bg-base p-6 text-left align-middle shadow-xl transition-all">
+                  <DialogTitle
+                    as="h3"
+                    className="text-lg font-semibold leading-6 text-foreground"
+                  >
+                    Settings
+                  </DialogTitle>
+                  <div className="mt-4">
+                    <div className="relative space-y-4">
+                      <div className="space-y-2">
+                        <label className="block text-sm font-medium text-foreground">Theme</label>
+                        <Listbox value={selectedTheme} onChange={(newTheme) => setTheme(newTheme.id)}>
                           <ListboxButton className="relative w-full cursor-pointer rounded-lg bg-background py-2 pl-3 pr-10 text-left text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent transform transition-transform duration-200 ease-in-out hover:scale-[1.01] hover:text-accent">
                             <span className="block truncate">{selectedTheme.name}</span>
                             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -110,13 +145,12 @@ export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) {
                             leaveFrom="opacity-100"
                             leaveTo="opacity-0"
                           >
-                            <ListboxOptions className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 shadow-lg ring-1 ring-black/5 focus:outline-none">
+                            <ListboxOptions className="absolute mt-1 max-h-40 w-full overflow-auto rounded-md bg-background py-1 shadow-lg ring-1 ring-black/5 focus:outline-none">
                               {themes.map((theme) => (
                                 <ListboxOption
                                   key={theme.id}
                                   className={({ active }) =>
-                                    `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+                                    `cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-accent/10 text-accent' : 'text-foreground'
-                                      active ? 'bg-accent/10 text-accent' : 'text-foreground'
                                     }`
                                   }
                                   value={theme}
@@ -137,101 +171,141 @@ export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) {
                               ))}
                             </ListboxOptions>
                           </Transition>
+                        </Listbox>
+                      </div>
+
+                      <div className="space-y-2">
+                        <label className="block text-sm font-medium text-foreground">OpenAI API Key</label>
+                        <input
+                          type="password"
+                          value={localApiKey}
+                          onChange={(e) => setLocalApiKey(e.target.value)}
+                          className="w-full rounded-lg bg-background py-2 px-3 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent"
+                        />
+                      </div>
+
+                      <div className="space-y-2">
+                        <label className="block text-sm font-medium text-foreground">OpenAI API Base URL</label>
+                        <input
+                          type="text"
+                          value={localBaseUrl}
+                          onChange={(e) => setLocalBaseUrl(e.target.value)}
+                          className="w-full rounded-lg bg-background py-2 px-3 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent"
+                        />
+                      </div>
+
+                      {isDev && <div className="space-y-2">
+                        <label className="block text-sm font-medium text-foreground">Document Sync</label>
+                        <div className="flex gap-2">
+                          <Button
+                            onClick={handleSync}
+                            disabled={isSyncing || isLoading}
+                            className="justify-center rounded-lg bg-background px-3 py-1.5 text-sm 
+                                         font-medium text-foreground hover:bg-background/90 focus:outline-none 
+                                         focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
+                                         transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent
+                                         disabled:opacity-50"
+                          >
+                            {isSyncing ? 'Saving...' : 'Save to Server'}
+                          </Button>
+                          <Button
+                            onClick={handleLoad}
+                            disabled={isSyncing || isLoading}
+                            className="justify-center rounded-lg bg-background px-3 py-1.5 text-sm 
+                                         font-medium text-foreground hover:bg-background/90 focus:outline-none 
+                                         focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
+                                         transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent
+                                         disabled:opacity-50"
+                          >
+                            {isLoading ? 'Loading...' : 'Load from Server'}
+                          </Button>
                         </div>
-                      </Listbox>
+                      </div>}
-                    </div>
 
-                    <div className="space-y-2">
+                      <div className="space-y-2">
-                      <label className="block text-sm font-medium text-foreground">OpenAI API Key</label>
+                        <label className="block text-sm font-medium text-foreground">Delete Documents</label>
-                      <input
+                        <div className="flex gap-2">
-                        type="password"
+                          <Button
-                        value={localApiKey}
+                            onClick={() => setShowClearLocalConfirm(true)}
-                        onChange={(e) => setLocalApiKey(e.target.value)}
+                            className="justify-center rounded-lg bg-red-600 px-3 py-1.5 text-sm 
-                        className="w-full rounded-lg bg-background py-2 px-3 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent"
+                                     font-medium text-white hover:bg-red-700 focus:outline-none 
-                      />
+                                     focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2
-                    </div>
+                                     transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
-
+                          >
-                    <div className="space-y-2">
+                            Delete local docs
-                      <label className="block text-sm font-medium text-foreground">OpenAI API Base URL</label>
+                          </Button>
-                      <input
+                          {isDev && <Button
-                        type="text"
+                            onClick={() => setShowClearServerConfirm(true)}
-                        value={localBaseUrl}
+                            className="justify-center rounded-lg bg-red-600 px-3 py-1.5 text-sm 
-                        onChange={(e) => setLocalBaseUrl(e.target.value)}
+                                     font-medium text-white hover:bg-red-700 focus:outline-none 
-                        className="w-full rounded-lg bg-background py-2 px-3 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent"
+                                     focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2
-                      />
+                                     transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
-                    </div>
+                          >
-
+                            Delete server docs
-                    {isDev && <div className="space-y-2">
+                          </Button>}
-                      <label className="block text-sm font-medium text-foreground">Document Sync</label>
-                      <div className="flex items-center justify-between">
-                        <div className="space-y-2">
-                          <div className="flex gap-2">
-                            <button
-                              onClick={handleSync}
-                              disabled={isSyncing || isLoading}
-                              className="inline-flex justify-center rounded-lg bg-background px-4 py-2 text-sm 
-                                       font-medium text-foreground hover:bg-background/90 focus:outline-none 
-                                       focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-                                       transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent
-                                       disabled:opacity-50"
-                            >
-                              {isSyncing ? 'Saving...' : 'Save to Server'}
-                            </button>
-                            <button
-                              onClick={handleLoad}
-                              disabled={isSyncing || isLoading}
-                              className="inline-flex justify-center rounded-lg bg-background px-4 py-2 text-sm 
-                                       font-medium text-foreground hover:bg-background/90 focus:outline-none 
-                                       focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-                                       transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent
-                                       disabled:opacity-50"
-                            >
-                              {isLoading ? 'Loading...' : 'Load from Server'}
-                            </button>
-                          </div>
                         </div>
                       </div>
-                    </div>}
+                    </div>
                   </div>
-                </div>
 
-                <div className="mt-6 flex justify-end space-x-3">
+                  <div className="mt-6 flex justify-end space-x-3">
-                  <Button
+                    <Button
-                    type="button"
+                      type="button"
-                    className="inline-flex justify-center rounded-lg bg-accent px-4 py-2 text-sm 
+                      className="inline-flex justify-center rounded-lg bg-accent px-3 py-1.5 text-sm 
-                             font-medium text-white hover:bg-accent/90 focus:outline-none 
+                               font-medium text-white hover:bg-accent/90 focus:outline-none 
-                             focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
+                               focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-                             transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-background"
+                               transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-background"
-                    onClick={async () => {
+                      onClick={async () => {
-                      await updateConfig({
+                        await updateConfig({
-                        apiKey: localApiKey,
+                          apiKey: localApiKey,
-                        baseUrl: localBaseUrl
+                          baseUrl: localBaseUrl
-                      });
+                        });
-                      setIsOpen(false);
+                        setIsOpen(false);
-                    }}
+                      }}
-                  >
+                    >
-                    Save
+                      Save
-                  </Button>
+                    </Button>
-                  <Button
+                    <Button
-                    type="button"
+                      type="button"
-                    className="inline-flex justify-center rounded-lg bg-background px-4 py-2 text-sm 
+                      className="inline-flex justify-center rounded-lg bg-background px-3 py-1.5 text-sm 
-                             font-medium text-foreground hover:bg-background/90 focus:outline-none 
+                               font-medium text-foreground hover:bg-background/90 focus:outline-none 
-                             focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
+                               focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-                             transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent"
+                               transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent"
-                    onClick={() => {
+                      onClick={() => {
-                      setLocalApiKey(apiKey);
+                        setLocalApiKey(apiKey);
-                      setLocalBaseUrl(baseUrl);
+                        setLocalBaseUrl(baseUrl);
-                      setIsOpen(false);
+                        setIsOpen(false);
-                    }}
+                      }}
-                  >
+                    >
-                    Cancel
+                      Cancel
-                  </Button>
+                    </Button>
-                </div>
+                  </div>
-              </DialogPanel>
+                </DialogPanel>
-            </TransitionChild>
+              </TransitionChild>
+            </div>
           </div>
-        </div>
+        </Dialog>
-      </Dialog>
+      </Transition>
-    </Transition>
+
+      <ConfirmDialog
+        isOpen={showClearLocalConfirm}
+        onClose={() => setShowClearLocalConfirm(false)}
+        onConfirm={handleClearLocal}
+        title="Delete Local Documents"
+        message="Are you sure you want to delete all local documents? This action cannot be undone."
+        confirmText="Delete"
+        isDangerous={true}
+      />
+
+      <ConfirmDialog
+        isOpen={showClearServerConfirm}
+        onClose={() => setShowClearServerConfirm(false)}
+        onConfirm={handleClearServer}
+        title="Delete Server Documents"
+        message="Are you sure you want to delete all documents from the server? This action cannot be undone."
+        confirmText="Delete"
+        isDangerous={true}
+      />
+    </>
   );
 }

src/contexts/DocumentContext.tsx

@@ -20,6 +20,9 @@ interface DocumentContextType {
 
   refreshPDFs: () => Promise<void>;
   refreshEPUBs: () => Promise<void>;
+
+  clearPDFs: () => Promise<void>;
+  clearEPUBs: () => Promise<void>;
 }
 
 const DocumentContext = createContext<DocumentContextType | undefined>(undefined);
@@ -30,7 +33,8 @@ export function DocumentProvider({ children }: { children: ReactNode }) {
     addDocument: addPDFDocument,
     removeDocument: removePDFDocument,
     isLoading: isPDFLoading,
-    refresh: refreshPDFs
+    refresh: refreshPDFs,
+    clearDocuments: clearPDFs
   } = usePDFDocuments();
 
   const {
@@ -38,7 +42,8 @@ export function DocumentProvider({ children }: { children: ReactNode }) {
     addDocument: addEPUBDocument,
     removeDocument: removeEPUBDocument,
     isLoading: isEPUBLoading,
-    refresh: refreshEPUBs
+    refresh: refreshEPUBs,
+    clearDocuments: clearEPUBs
   } = useEPUBDocuments();
 
   return (
@@ -52,7 +57,9 @@ export function DocumentProvider({ children }: { children: ReactNode }) {
       removeEPUBDocument,
       isEPUBLoading,
       refreshPDFs,
-      refreshEPUBs
+      refreshEPUBs,
+      clearPDFs,
+      clearEPUBs
     }}>
       {children}
     </DocumentContext.Provider>

src/contexts/ThemeContext.tsx

@@ -2,7 +2,8 @@
 
 import { createContext, useContext, useEffect, useState } from 'react';
 
-type Theme = 'light' | 'dark' | 'system';
+const THEMES = ['system', 'light', 'dark', 'aqua', 'forest', 'vibrant'] as const;
+type Theme = (typeof THEMES)[number];
 
 interface ThemeContextType {
   theme: Theme;
@@ -16,7 +17,7 @@ const getSystemTheme = () => {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 };
 
-const getEffectiveTheme = (theme: Theme): 'light' | 'dark' => {
+const getEffectiveTheme = (theme: Theme): Theme => {
   if (theme === 'system') {
     return getSystemTheme();
   }
@@ -33,7 +34,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     const root = window.document.documentElement;
     const effectiveTheme = getEffectiveTheme(newTheme);
     
-    root.classList.remove('light', 'dark');
+    root.classList.remove(...THEMES);
     root.classList.add(effectiveTheme);
     root.style.colorScheme = effectiveTheme;
     
@@ -57,7 +58,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
       if (theme === 'system') {
         const effectiveTheme = getSystemTheme();
         const root = window.document.documentElement;
-        root.classList.remove('light', 'dark');
+        root.classList.remove(...THEMES);
         root.classList.add(effectiveTheme);
         root.style.colorScheme = effectiveTheme;
       }
@@ -81,3 +82,5 @@ export function useTheme() {
   }
   return context;
 }
+
+export { THEMES };

src/hooks/useEPUBDocuments.ts

@@ -76,11 +76,22 @@ export function useEPUBDocuments() {
     }
   }, [isDBReady]);
 
+  const clearDocuments = useCallback(async (): Promise<void> => {
+    try {
+      await indexedDBService.clearEPUBDocuments();
+      setDocuments([]);
+    } catch (error) {
+      console.error('Failed to clear EPUB documents:', error);
+      throw error;
+    }
+  }, []);
+
   return {
     documents,
     isLoading,
     addDocument,
     removeDocument,
     refresh,
+    clearDocuments,  // Add clearDocuments to return value
   };
 }

src/hooks/usePDFDocuments.ts

@@ -85,11 +85,22 @@ export function usePDFDocuments() {
     }
   }, [isDBReady]);
 
+  const clearDocuments = useCallback(async (): Promise<void> => {
+    try {
+      await indexedDBService.clearPDFDocuments();
+      setDocuments([]);
+    } catch (error) {
+      console.error('Failed to clear PDF documents:', error);
+      throw error;
+    }
+  }, []);
+
   return {
     documents,
     isLoading,
     addDocument,
     removeDocument,
-    refresh,  // Add refresh to return value
+    refresh,
+    clearDocuments,  // Add clearDocuments to return value
   };
 }

src/utils/indexedDB.ts

@@ -562,6 +562,64 @@ class IndexedDBService {
 
     return { lastSync: Date.now() };
   }
+
+  async clearPDFDocuments(): Promise<void> {
+    if (!this.db) {
+      await this.init();
+    }
+
+    return new Promise((resolve, reject) => {
+      try {
+        console.log('Clearing all PDF documents');
+        const transaction = this.db!.transaction([PDF_STORE_NAME], 'readwrite');
+        const store = transaction.objectStore(PDF_STORE_NAME);
+        const request = store.clear();
+
+        request.onerror = (event) => {
+          const error = (event.target as IDBRequest).error;
+          console.error('Error clearing PDF documents:', error);
+          reject(error);
+        };
+
+        transaction.oncomplete = () => {
+          console.log('All PDF documents cleared successfully');
+          resolve();
+        };
+      } catch (error) {
+        console.error('Error in clearPDFDocuments transaction:', error);
+        reject(error);
+      }
+    });
+  }
+
+  async clearEPUBDocuments(): Promise<void> {
+    if (!this.db) {
+      await this.init();
+    }
+
+    return new Promise((resolve, reject) => {
+      try {
+        console.log('Clearing all EPUB documents');
+        const transaction = this.db!.transaction([EPUB_STORE_NAME], 'readwrite');
+        const store = transaction.objectStore(EPUB_STORE_NAME);
+        const request = store.clear();
+
+        request.onerror = (event) => {
+          const error = (event.target as IDBRequest).error;
+          console.error('Error clearing EPUB documents:', error);
+          reject(error);
+        };
+
+        transaction.oncomplete = () => {
+          console.log('All EPUB documents cleared successfully');
+          resolve();
+        };
+      } catch (error) {
+        console.error('Error in clearEPUBDocuments transaction:', error);
+        reject(error);
+      }
+    });
+  }
 }
 
 // Make sure we export a singleton instance