App settings upgrade + new themes
This commit is contained in:
Richard Roberson
parent
8b44001a47
commit
d839d3cfa4
10 changed files with 483 additions and 224 deletions
|
|
@ -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 });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
:root,
|
||||
html.light {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--base: #f5f5f5;
|
||||
--offbase: #dbdbdb;
|
||||
--foreground: #2d3748;
|
||||
--base: #f7fafc;
|
||||
--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);
|
||||
|
|
|
|||
110
src/components/ConfirmDialog.tsx
Normal file
110
src/components/ConfirmDialog.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
import Link from 'next/link';
|
||||
import { Button, Dialog } from '@headlessui/react';
|
||||
import { Transition, TransitionChild, DialogPanel, DialogTitle } from '@headlessui/react';
|
||||
import { Fragment, useState } from 'react';
|
||||
import { Button } from '@headlessui/react';
|
||||
import { Transition } from '@headlessui/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={() => {
|
||||
setDocumentToDelete({ id: doc.id, name: doc.name, type: doc.type });
|
||||
setIsDeleteDialogOpen(true);
|
||||
}}
|
||||
onClick={() => setDocumentToDelete({ id: doc.id, name: doc.name, type: doc.type })}
|
||||
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}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-50"
|
||||
onClose={() => setIsDeleteDialogOpen(false)}
|
||||
>
|
||||
<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 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>
|
||||
<ConfirmDialog
|
||||
isOpen={documentToDelete !== null}
|
||||
onClose={() => setDocumentToDelete(null)}
|
||||
onConfirm={handleDelete}
|
||||
title="Delete Document"
|
||||
message={`Are you sure you want to delete ${documentToDelete?.name ? documentToDelete.name : 'this document'}? This action cannot be undone.`}
|
||||
confirmText="Delete"
|
||||
isDangerous={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
{ id: 'light' as const, name: 'Light' },
|
||||
{ id: 'dark' as const, name: 'Dark' },
|
||||
{ id: 'system' as const, name: 'System' },
|
||||
];
|
||||
const themes = THEMES.map(id => ({
|
||||
id,
|
||||
name: id.charAt(0).toUpperCase() + id.slice(1)
|
||||
}));
|
||||
|
||||
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 (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-50" onClose={() => setIsOpen(false)}>
|
||||
<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>
|
||||
const handleClearLocal = async () => {
|
||||
await clearPDFs();
|
||||
await clearEPUBs();
|
||||
setShowClearLocalConfirm(false);
|
||||
};
|
||||
|
||||
<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="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)}>
|
||||
<div className="relative">
|
||||
const handleClearServer = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/documents', {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete server documents');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Delete failed:', error);
|
||||
}
|
||||
setShowClearServerConfirm(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-50" onClose={() => setIsOpen(false)}>
|
||||
<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"
|
||||
>
|
||||
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 ${
|
||||
active ? 'bg-accent/10 text-accent' : 'text-foreground'
|
||||
`cursor-pointer select-none py-2 pl-10 pr-4 ${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">
|
||||
<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 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 className="space-y-2">
|
||||
<label className="block text-sm font-medium text-foreground">Delete Documents</label>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => setShowClearLocalConfirm(true)}
|
||||
className="justify-center rounded-lg bg-red-600 px-3 py-1.5 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
|
||||
transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
|
||||
>
|
||||
Delete local docs
|
||||
</Button>
|
||||
{isDev && <Button
|
||||
onClick={() => setShowClearServerConfirm(true)}
|
||||
className="justify-center rounded-lg bg-red-600 px-3 py-1.5 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
|
||||
transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
|
||||
>
|
||||
Delete server docs
|
||||
</Button>}
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end space-x-3">
|
||||
<Button
|
||||
type="button"
|
||||
className="inline-flex justify-center rounded-lg bg-accent px-4 py-2 text-sm
|
||||
font-medium text-white hover:bg-accent/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-background"
|
||||
onClick={async () => {
|
||||
await updateConfig({
|
||||
apiKey: localApiKey,
|
||||
baseUrl: localBaseUrl
|
||||
});
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<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={() => {
|
||||
setLocalApiKey(apiKey);
|
||||
setLocalBaseUrl(baseUrl);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
<div className="mt-6 flex justify-end space-x-3">
|
||||
<Button
|
||||
type="button"
|
||||
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
|
||||
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"
|
||||
onClick={async () => {
|
||||
await updateConfig({
|
||||
apiKey: localApiKey,
|
||||
baseUrl: localBaseUrl
|
||||
});
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
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
|
||||
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={() => {
|
||||
setLocalApiKey(apiKey);
|
||||
setLocalBaseUrl(baseUrl);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</Dialog>
|
||||
</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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue