evan/AnthoLume
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

theme draft 2 (done?)

Browse Source
This commit is contained in:
Evan Reichard
2026-03-22 13:36:02 -04:00
parent 6c2c4f6b8b
commit b13f9b362c
18 changed files with 257 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/auth/ProtectedRoute.tsx
View File

@@ -9,13 +9,11 @@ export function ProtectedRoute({ children }: ProtectedRouteProps) {
const { isAuthenticated, isCheckingAuth } = useAuth();
const location = useLocation();
// Show loading while checking authentication status
if (isCheckingAuth) {
return <div className="text-gray-500 dark:text-white">Loading...</div>;
return <div className="text-content-muted">Loading...</div>;
}
if (!isAuthenticated) {
// Redirect to login with the current location saved
return <Navigate to="/login" state={{ from: location }} replace />;
}

2
frontend/src/components/Field.tsx
View File

@@ -9,7 +9,7 @@ interface FieldProps {
export function Field({ label, children, isEditing: _isEditing = false }: FieldProps) {
return (
<div className="relative rounded">
<div className="relative inline-flex gap-2 text-gray-500">{label}</div>
<div className="relative inline-flex gap-2 text-content-muted">{label}</div>
{children}
</div>
);

2
frontend/src/components/Layout.tsx
View File

@@ -90,7 +90,7 @@ export default function Layout() {
{isUserDropdownOpen && (
<div className="absolute right-4 top-16 z-20 pt-4 transition duration-200">
<div className="w-64 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black/5 dark:shadow-gray-800">
<div className="w-64 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-border/30">
<div
className="border-b border-border px-4 py-3"
role="group"

16
frontend/src/components/ReadingHistoryGraph.tsx
View File

@@ -124,10 +124,7 @@ export function getSVGGraphData(
const itemY = svgHeight - itemSize;
const lineX = (idx + 1) * blockOffset;
linePoints.push({
x: lineX,
y: itemY,
});
linePoints.push({ x: lineX, y: itemY });
if (lineX > maxBX) {
maxBX = lineX;
@@ -164,8 +161,8 @@ export default function ReadingHistoryGraph({ data }: ReadingHistoryGraphProps)
if (!data || data.length < 2) {
return (
<div className="relative flex h-24 items-center justify-center bg-gray-100 dark:bg-gray-600">
<p className="text-gray-400 dark:text-gray-300">No data available</p>
<div className="relative flex h-24 items-center justify-center bg-surface-muted">
<p className="text-content-subtle">No data available</p>
</div>
);
}
@@ -175,8 +172,8 @@ export default function ReadingHistoryGraph({ data }: ReadingHistoryGraphProps)
return (
<div className="relative">
<svg viewBox={`26 0 755 ${svgHeight}`} preserveAspectRatio="none" width="100%" height="6em">
<path fill="#316BBE" fillOpacity="0.5" stroke="none" d={`${BezierPath} ${BezierFill}`} />
<path fill="none" stroke="#316BBE" d={BezierPath} />
<path fill="rgb(var(--secondary-600))" fillOpacity="0.5" stroke="none" d={`${BezierPath} ${BezierFill}`} />
<path fill="none" stroke="rgb(var(--secondary-600))" d={BezierPath} />
</svg>
<div
className="absolute top-0 flex size-full"
@@ -196,11 +193,10 @@ export default function ReadingHistoryGraph({ data }: ReadingHistoryGraphProps)
}}
>
<div
className="pointer-events-none absolute top-3 flex flex-col items-center rounded p-2 text-xs dark:text-white"
className="pointer-events-none absolute top-3 flex flex-col items-center rounded bg-surface/80 p-2 text-xs text-content"
style={{
transform: 'translateX(-50%)',
left: '50%',
backgroundColor: 'rgba(128, 128, 128, 0.2)',
}}
>
<span>{formatDate(point.date)}</span>

6
frontend/src/components/Skeleton.tsx
View File

@@ -15,7 +15,7 @@ export function Skeleton({
height,
animation = 'pulse',
}: SkeletonProps) {
const baseClasses = 'bg-gray-200 dark:bg-gray-600';
const baseClasses = 'bg-surface-strong';
const variantClasses = {
default: 'rounded',
@@ -184,7 +184,7 @@ export function PageLoader({ message = 'Loading...', className = '' }: PageLoade
return (
<div className={cn('flex min-h-[400px] flex-col items-center justify-center gap-4', className)}>
<div className="relative">
<div className="size-12 animate-spin rounded-full border-4 border-gray-200 border-t-secondary-500 dark:border-gray-600" />
<div className="size-12 animate-spin rounded-full border-4 border-surface-strong border-t-secondary-500" />
</div>
<p className="text-sm font-medium text-content-muted">{message}</p>
</div>
@@ -206,7 +206,7 @@ export function InlineLoader({ size = 'md', className = '' }: InlineLoaderProps)
return (
<div className={cn('flex items-center justify-center', className)}>
<div
className={`${sizeMap[size]} animate-spin rounded-full border-gray-200 border-t-secondary-500 dark:border-gray-600`}
className={`${sizeMap[size]} animate-spin rounded-full border-surface-strong border-t-secondary-500`}
/>
</div>
);

9
frontend/src/pages/ActivityPage.tsx
View File

@@ -13,10 +13,7 @@ export default function ActivityPage() {
key: 'document_id' as const,
header: 'Document',
render: (_value, row) => (
<Link
to={`/documents/${row.document_id}`}
className="text-blue-600 hover:underline dark:text-blue-400"
>
<Link to={`/documents/${row.document_id}`} className="text-secondary-600 hover:underline">
{row.author || 'Unknown'} - {row.title || 'Unknown'}
</Link>
),
@@ -29,9 +26,7 @@ export default function ActivityPage() {
{
key: 'duration' as const,
header: 'Duration',
render: value => {
return formatDuration(typeof value === 'number' ? value : 0);
},
render: value => formatDuration(typeof value === 'number' ? value : 0),
},
{
key: 'end_percentage' as const,

29
frontend/src/pages/AdminImportPage.tsx
View File

@@ -48,7 +48,6 @@ export default function AdminImportPage() {
{
onSuccess: _response => {
showInfo('Import completed successfully');
// Redirect to import results page after a short delay
setTimeout(() => {
window.location.href = '/admin/import-results';
}, 1500);
@@ -65,22 +64,22 @@ export default function AdminImportPage() {
};
if (isLoading && !currentPath) {
return <div className="text-gray-500 dark:text-white">Loading...</div>;
return <div className="text-content-muted">Loading...</div>;
}
if (selectedDirectory) {
return (
<div className="overflow-x-auto">
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
<p className="text-lg font-semibold text-gray-500">Selected Import Directory</p>
<div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
<p className="text-lg font-semibold text-content">Selected Import Directory</p>
<form className="flex flex-col gap-4" onSubmit={handleImport}>
<div className="flex w-full justify-between gap-4">
<div className="flex items-center gap-4">
<div className="flex items-center gap-4 text-content">
<FolderOpenIcon size={20} />
<p className="break-all text-lg font-medium">{selectedDirectory}</p>
</div>
<div className="mr-4 flex flex-col justify-around gap-2">
<div className="mr-4 flex flex-col justify-around gap-2 text-content">
<div className="inline-flex items-center gap-2">
<input
type="radio"
@@ -124,20 +123,20 @@ export default function AdminImportPage() {
return (
<div className="overflow-x-auto">
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
<thead className="text-gray-800 dark:text-gray-400">
<table className="min-w-full bg-surface text-sm leading-normal text-content">
<thead className="text-content-muted">
<tr>
<th className="w-12 border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"></th>
<th className="break-all border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800">
<th className="w-12 border-b border-border p-3 text-left font-normal"></th>
<th className="break-all border-b border-border p-3 text-left font-normal">
{currentPath}
</th>
</tr>
</thead>
<tbody className="text-black dark:text-white">
<tbody>
{currentPath !== '/' && (
<tr>
<td className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"></td>
<td className="border-b border-gray-200 p-3">
<td className="border-b border-border p-3 text-content-muted"></td>
<td className="border-b border-border p-3">
<button onClick={handleNavigateUp}>
<p>../</p>
</button>
@@ -153,12 +152,12 @@ export default function AdminImportPage() {
) : (
directories.map((item: DirectoryItem) => (
<tr key={item.name}>
<td className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400">
<td className="border-b border-border p-3 text-content-muted">
<button onClick={() => item.name && handleSelectDirectory(item.name)}>
<FolderOpenIcon size={20} />
</button>
</td>
<td className="border-b border-gray-200 p-3">
<td className="border-b border-border p-3">
<button onClick={() => item.name && handleSelectDirectory(item.name)}>
<p>{item.name ?? ''}</p>
</button>

28
frontend/src/pages/AdminImportResultsPage.tsx
View File

@@ -8,27 +8,27 @@ export default function AdminImportResultsPage() {
resultsData?.status === 200 ? (resultsData.data as ImportResultsResponse).results || [] : [];
if (isLoading) {
return <div className="text-gray-500 dark:text-white">Loading...</div>;
return <div className="text-content-muted">Loading...</div>;
}
return (
<div className="overflow-x-auto">
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
<thead className="text-gray-800 dark:text-gray-400">
<table className="min-w-full bg-surface text-sm leading-normal text-content">
<thead className="text-content-muted">
<tr>
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<th className="border-b border-border p-3 text-left font-normal uppercase">
Document
</th>
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<th className="border-b border-border p-3 text-left font-normal uppercase">
Status
</th>
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<th className="border-b border-border p-3 text-left font-normal uppercase">
Error
</th>
</tr>
</thead>
<tbody className="text-black dark:text-white">
<tbody>
{results.length === 0 ? (
<tr>
<td className="p-3 text-center" colSpan={3}>
@@ -39,22 +39,24 @@ export default function AdminImportResultsPage() {
results.map((result: ImportResult, index: number) => (
<tr key={index}>
<td
className="grid border-b border-gray-200 p-3"
className="grid border-b border-border p-3"
style={{ gridTemplateColumns: '4rem auto' }}
>
<span className="text-gray-800 dark:text-gray-400">Name:</span>
<span className="text-content-muted">Name:</span>
{result.id ? (
<Link to={`/documents/${result.id}`}>{result.name}</Link>
<Link to={`/documents/${result.id}`} className="text-secondary-600 hover:underline">
{result.name}
</Link>
) : (
<span>N/A</span>
)}
<span className="text-gray-800 dark:text-gray-400">File:</span>
<span className="text-content-muted">File:</span>
<span>{result.path}</span>
</td>
<td className="border-b border-gray-200 p-3">
<td className="border-b border-border p-3">
<p>{result.status}</p>
</td>
<td className="border-b border-gray-200 p-3">
<td className="border-b border-border p-3">
<p>{result.error || ''}</p>
</td>
</tr>

8
frontend/src/pages/AdminLogsPage.tsx
View File

@@ -26,18 +26,18 @@ export default function AdminLogsPage() {
return (
<div>
<div className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
<div className="mb-4 flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
<form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleFilterSubmit}>
<div className="flex w-full grow flex-col">
<div className="relative flex">
<span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
<span className="inline-flex items-center border-y border-l border-border bg-surface px-3 text-sm text-content-muted shadow-sm">
<Search2Icon size={15} hoverable={false} />
</span>
<input
type="text"
value={filter}
onChange={e => setFilter(e.target.value)}
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white p-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
className="w-full flex-1 appearance-none rounded-none border border-border bg-surface p-2 text-base text-content shadow-sm placeholder:text-content-subtle focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600"
placeholder="JQ Filter"
/>
</div>
@@ -51,7 +51,7 @@ export default function AdminLogsPage() {
</div>
<div
className="flex w-full flex-col-reverse overflow-scroll text-black dark:text-white"
className="flex w-full flex-col-reverse overflow-scroll text-content"
style={{ fontFamily: 'monospace' }}
>
{isLoading ? (

57
frontend/src/pages/AdminPage.tsx
View File

@@ -42,19 +42,14 @@ export default function AdminPage() {
const filename = `AnthoLumeBackup_${new Date().toISOString().replace(/[:.]/g, '')}.zip`;
// Stream the response directly to disk using File System Access API
// This avoids loading multi-GB files into browser memory
if ('showSaveFilePicker' in window && typeof window.showSaveFilePicker === 'function') {
try {
// Modern browsers: Use File System Access API for direct disk writes
const handle = await window.showSaveFilePicker({
suggestedName: filename,
types: [{ description: 'ZIP Archive', accept: { 'application/zip': ['.zip'] } }],
});
const writable = await handle.createWritable();
// Stream response body directly to file without buffering
const reader = response.body?.getReader();
if (!reader) throw new Error('Unable to read response');
@@ -67,13 +62,11 @@ export default function AdminPage() {
await writable.close();
showInfo('Backup completed successfully');
} catch (err) {
// User cancelled or error
if ((err as Error).name !== 'AbortError') {
showError('Backup failed: ' + (err as Error).message);
}
}
} else {
// Fallback for older browsers
showError(
'Your browser does not support large file downloads. Please use Chrome, Edge, or Safari.'
);
@@ -113,52 +106,34 @@ export default function AdminPage() {
const handleMetadataMatch = () => {
postAdminAction.mutate(
{ data: { action: 'METADATA_MATCH' } },
{
data: {
action: 'METADATA_MATCH',
},
},
{
onSuccess: () => {
showInfo('Metadata matching started');
},
onError: error => {
showError('Metadata matching failed: ' + getErrorMessage(error));
},
onSuccess: () => showInfo('Metadata matching started'),
onError: error => showError('Metadata matching failed: ' + getErrorMessage(error)),
}
);
};
const handleCacheTables = () => {
postAdminAction.mutate(
{ data: { action: 'CACHE_TABLES' } },
{
data: {
action: 'CACHE_TABLES',
},
},
{
onSuccess: () => {
showInfo('Cache tables started');
},
onError: error => {
showError('Cache tables failed: ' + getErrorMessage(error));
},
onSuccess: () => showInfo('Cache tables started'),
onError: error => showError('Cache tables failed: ' + getErrorMessage(error)),
}
);
};
if (isLoading) {
return <div className="text-gray-500 dark:text-white">Loading...</div>;
return <div className="text-content-muted">Loading...</div>;
}
return (
<div className="flex w-full grow flex-col gap-4">
{/* Backup & Restore Card */}
<div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
<p className="mb-2 text-lg font-semibold">Backup & Restore</p>
<div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
<p className="mb-2 text-lg font-semibold text-content">Backup & Restore</p>
<div className="flex flex-col gap-4">
{/* Backup Form */}
<form className="flex justify-between" onSubmit={handleBackupSubmit}>
<form className="flex justify-between text-content" onSubmit={handleBackupSubmit}>
<div className="flex items-center gap-8">
<div>
<input
@@ -186,8 +161,7 @@ export default function AdminPage() {
</div>
</form>
{/* Restore Form */}
<form onSubmit={handleRestoreSubmit} className="flex grow justify-between">
<form onSubmit={handleRestoreSubmit} className="flex grow justify-between text-content">
<div className="flex w-1/2 items-center">
<input
type="file"
@@ -205,11 +179,10 @@ export default function AdminPage() {
</div>
</div>
{/* Tasks Card */}
<div className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
<p className="text-lg font-semibold">Tasks</p>
<table className="min-w-full bg-white text-sm dark:bg-gray-700">
<tbody className="text-black dark:text-white">
<div className="flex grow flex-col rounded bg-surface p-4 text-content-muted shadow-lg">
<p className="text-lg font-semibold text-content">Tasks</p>
<table className="min-w-full bg-surface text-sm text-content">
<tbody>
<tr>
<td className="pl-0">
<p>Metadata Matching</p>

95
frontend/src/pages/AdminUsersPage.tsx
View File

@@ -39,9 +39,7 @@ export default function AdminUsersPage() {
setNewIsAdmin(false);
refetch();
},
onError: error => {
showError('Failed to create user: ' + getErrorMessage(error));
},
onError: error => showError('Failed to create user: ' + getErrorMessage(error)),
}
);
};
@@ -49,19 +47,14 @@ export default function AdminUsersPage() {
const handleDeleteUser = (userId: string) => {
updateUser.mutate(
{
data: {
operation: 'DELETE',
user: userId,
},
data: { operation: 'DELETE', user: userId },
},
{
onSuccess: () => {
showInfo('User deleted successfully');
refetch();
},
onError: error => {
showError('Failed to delete user: ' + getErrorMessage(error));
},
onError: error => showError('Failed to delete user: ' + getErrorMessage(error)),
}
);
};
@@ -71,20 +64,14 @@ export default function AdminUsersPage() {
updateUser.mutate(
{
data: {
operation: 'UPDATE',
user: userId,
password,
},
data: { operation: 'UPDATE', user: userId, password },
},
{
onSuccess: () => {
showInfo('Password updated successfully');
refetch();
},
onError: error => {
showError('Failed to update password: ' + getErrorMessage(error));
},
onError: error => showError('Failed to update password: ' + getErrorMessage(error)),
}
);
};
@@ -92,50 +79,40 @@ export default function AdminUsersPage() {
const handleToggleAdmin = (userId: string, isAdmin: boolean) => {
updateUser.mutate(
{
data: {
operation: 'UPDATE',
user: userId,
is_admin: isAdmin,
},
data: { operation: 'UPDATE', user: userId, is_admin: isAdmin },
},
{
onSuccess: () => {
const role = isAdmin ? 'admin' : 'user';
showInfo(`User permissions updated to ${role}`);
showInfo(`User permissions updated to ${isAdmin ? 'admin' : 'user'}`);
refetch();
},
onError: error => {
showError('Failed to update admin status: ' + getErrorMessage(error));
},
onError: error => showError('Failed to update admin status: ' + getErrorMessage(error)),
}
);
};
if (isLoading) {
return <div className="text-gray-500 dark:text-white">Loading...</div>;
return <div className="text-content-muted">Loading...</div>;
}
return (
<div className="relative h-full overflow-x-auto">
{showAddForm && (
<div className="absolute left-10 top-10 rounded bg-gray-200 p-3 shadow-lg shadow-gray-500 transition-all duration-200 dark:bg-gray-600 dark:shadow-gray-900">
<form
onSubmit={handleCreateUser}
className="flex flex-col gap-2 text-sm text-black dark:text-white"
>
<div className="absolute left-10 top-10 rounded bg-surface-strong p-3 shadow-lg transition-all duration-200">
<form onSubmit={handleCreateUser} className="flex flex-col gap-2 text-sm text-content">
<input
type="text"
value={newUsername}
onChange={e => setNewUsername(e.target.value)}
placeholder="Username"
className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
className="bg-surface p-2 text-content"
/>
<input
type="password"
value={newPassword}
onChange={e => setNewPassword(e.target.value)}
placeholder="Password"
className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
className="bg-surface p-2 text-content"
/>
<div className="flex items-center gap-2">
<input
@@ -147,7 +124,7 @@ export default function AdminUsersPage() {
<label htmlFor="new_is_admin">Admin</label>
</div>
<button
className="bg-gray-500 px-2 py-1 font-medium text-white hover:bg-gray-800 dark:text-gray-800 dark:hover:bg-gray-100"
className="bg-primary-500 px-2 py-1 font-medium text-primary-foreground hover:bg-primary-700"
type="submit"
>
Create
@@ -157,29 +134,25 @@ export default function AdminUsersPage() {
)}
<div className="min-w-full overflow-scroll rounded shadow">
<table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
<thead className="text-gray-800 dark:text-gray-400">
<table className="min-w-full bg-surface text-sm leading-normal text-content">
<thead className="text-content-muted">
<tr>
<th className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<th className="w-12 border-b border-border p-3 text-left font-normal uppercase">
<button onClick={() => setShowAddForm(!showAddForm)}>
<AddIcon size={20} />
</button>
</th>
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
User
</th>
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
Password
</th>
<th className="border-b border-gray-200 p-3 text-center font-normal uppercase dark:border-gray-800">
<th className="border-b border-border p-3 text-left font-normal uppercase">User</th>
<th className="border-b border-border p-3 text-left font-normal uppercase">Password</th>
<th className="border-b border-border p-3 text-center font-normal uppercase">
Permissions
</th>
<th className="w-48 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<th className="w-48 border-b border-border p-3 text-left font-normal uppercase">
Created
</th>
</tr>
</thead>
<tbody className="text-black dark:text-white">
<tbody>
{users.length === 0 ? (
<tr>
<td className="p-3 text-center" colSpan={5}>
@@ -189,33 +162,33 @@ export default function AdminUsersPage() {
) : (
users.map((user: User) => (
<tr key={user.id}>
<td className="relative cursor-pointer border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400">
<td className="relative cursor-pointer border-b border-border p-3 text-content-muted">
<button onClick={() => handleDeleteUser(user.id)}>
<DeleteIcon size={20} />
</button>
</td>
<td className="border-b border-gray-200 p-3">
<td className="border-b border-border p-3">
<p>{user.id}</p>
</td>
<td className="border-b border-gray-200 px-3">
<td className="border-b border-border px-3">
<button
onClick={() => {
const password = prompt(`Enter new password for ${user.id}`);
if (password) handleUpdatePassword(user.id, password);
}}
className="bg-gray-500 px-2 py-1 font-medium text-white hover:bg-gray-800 dark:text-gray-800 dark:hover:bg-gray-100"
className="bg-primary-500 px-2 py-1 font-medium text-primary-foreground hover:bg-primary-700"
>
Reset
</button>
</td>
<td className="flex min-w-40 justify-center gap-2 border-b border-gray-200 p-3 text-center">
<td className="flex min-w-40 justify-center gap-2 border-b border-border p-3 text-center">
<button
onClick={() => handleToggleAdmin(user.id, true)}
disabled={user.admin}
className={`rounded-md px-2 py-1 text-white dark:text-black ${
className={`rounded-md px-2 py-1 ${
user.admin
? 'cursor-default bg-gray-800 dark:bg-gray-100'
: 'cursor-pointer bg-gray-400 dark:bg-gray-600'
? 'cursor-default bg-content text-content-inverse'
: 'cursor-pointer bg-surface-strong text-content'
}`}
>
admin
@@ -223,16 +196,16 @@ export default function AdminUsersPage() {
<button
onClick={() => handleToggleAdmin(user.id, false)}
disabled={!user.admin}
className={`rounded-md px-2 py-1 text-white dark:text-black ${
className={`rounded-md px-2 py-1 ${
!user.admin
? 'cursor-default bg-gray-800 dark:bg-gray-100'
: 'cursor-pointer bg-gray-400 dark:bg-gray-600'
? 'cursor-default bg-content text-content-inverse'
: 'cursor-pointer bg-surface-strong text-content'
}`}
>
user
</button>
</td>
<td className="border-b border-gray-200 p-3">
<td className="border-b border-border p-3">
<p>{user.created_at}</p>
</td>
</tr>

56
frontend/src/pages/ComponentDemoPage.tsx
View File

@@ -38,17 +38,16 @@ export default function ComponentDemoPage() {
};
return (
<div className="space-y-8 p-4">
<h1 className="text-2xl font-bold dark:text-white">UI Components Demo</h1>
<div className="space-y-8 p-4 text-content">
<h1 className="text-2xl font-bold">UI Components Demo</h1>
{/* Toast Demos */}
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Toast Notifications</h2>
<section className="rounded-lg bg-surface p-6 shadow">
<h2 className="mb-4 text-xl font-semibold">Toast Notifications</h2>
<div className="flex flex-wrap gap-4">
<button
onClick={handleDemoClick}
disabled={isLoading}
className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
className="rounded bg-secondary-500 px-4 py-2 text-secondary-foreground hover:bg-secondary-600 disabled:cursor-not-allowed disabled:opacity-50"
>
{isLoading ? <InlineLoader size="sm" /> : 'Show Info Toast'}
</button>
@@ -66,21 +65,19 @@ export default function ComponentDemoPage() {
</button>
<button
onClick={handleCustomToast}
className="rounded bg-purple-500 px-4 py-2 text-white hover:bg-purple-600"
className="rounded bg-primary-500 px-4 py-2 text-primary-foreground hover:bg-primary-600"
>
Show Custom Toast
</button>
</div>
</section>
{/* Skeleton Demos */}
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Loading Components</h2>
<section className="rounded-lg bg-surface p-6 shadow">
<h2 className="mb-4 text-xl font-semibold">Skeleton Loading Components</h2>
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
{/* Basic Skeletons */}
<div className="space-y-4">
<h3 className="text-lg font-medium dark:text-gray-300">Basic Skeletons</h3>
<h3 className="text-lg font-medium text-content-muted">Basic Skeletons</h3>
<div className="space-y-2">
<Skeleton className="h-8 w-full" />
<Skeleton variant="text" className="w-3/4" />
@@ -92,16 +89,14 @@ export default function ComponentDemoPage() {
</div>
</div>
{/* Skeleton Text */}
<div className="space-y-4">
<h3 className="text-lg font-medium dark:text-gray-300">Skeleton Text</h3>
<h3 className="text-lg font-medium text-content-muted">Skeleton Text</h3>
<SkeletonText lines={3} />
<SkeletonText lines={5} className="max-w-md" />
</div>
{/* Skeleton Avatar */}
<div className="space-y-4">
<h3 className="text-lg font-medium dark:text-gray-300">Skeleton Avatar</h3>
<h3 className="text-lg font-medium text-content-muted">Skeleton Avatar</h3>
<div className="flex items-center gap-4">
<SkeletonAvatar size="sm" />
<SkeletonAvatar size="md" />
@@ -110,9 +105,8 @@ export default function ComponentDemoPage() {
</div>
</div>
{/* Skeleton Button */}
<div className="space-y-4">
<h3 className="text-lg font-medium dark:text-gray-300">Skeleton Button</h3>
<h3 className="text-lg font-medium text-content-muted">Skeleton Button</h3>
<div className="flex flex-wrap gap-2">
<SkeletonButton width={120} />
<SkeletonButton className="w-full max-w-xs" />
@@ -121,9 +115,8 @@ export default function ComponentDemoPage() {
</div>
</section>
{/* Skeleton Card Demo */}
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Cards</h2>
<section className="rounded-lg bg-surface p-6 shadow">
<h2 className="mb-4 text-xl font-semibold">Skeleton Cards</h2>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<SkeletonCard />
<SkeletonCard showAvatar />
@@ -131,33 +124,30 @@ export default function ComponentDemoPage() {
</div>
</section>
{/* Skeleton Table Demo */}
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Table</h2>
<section className="rounded-lg bg-surface p-6 shadow">
<h2 className="mb-4 text-xl font-semibold">Skeleton Table</h2>
<SkeletonTable rows={5} columns={4} />
</section>
{/* Page Loader Demo */}
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Page Loader</h2>
<section className="rounded-lg bg-surface p-6 shadow">
<h2 className="mb-4 text-xl font-semibold">Page Loader</h2>
<PageLoader message="Loading demo content..." />
</section>
{/* Inline Loader Demo */}
<section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
<h2 className="mb-4 text-xl font-semibold dark:text-white">Inline Loader</h2>
<section className="rounded-lg bg-surface p-6 shadow">
<h2 className="mb-4 text-xl font-semibold">Inline Loader</h2>
<div className="flex items-center gap-8">
<div className="text-center">
<InlineLoader size="sm" />
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Small</p>
<p className="mt-2 text-sm text-content-muted">Small</p>
</div>
<div className="text-center">
<InlineLoader size="md" />
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Medium</p>
<p className="mt-2 text-sm text-content-muted">Medium</p>
</div>
<div className="text-center">
<InlineLoader size="lg" />
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Large</p>
<p className="mt-2 text-sm text-content-muted">Large</p>
</div>
</div>
</section>

204
frontend/src/pages/DocumentPage.tsx
View File

@@ -1,4 +1,6 @@
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
import {
useGetDocument,
useEditDocument,
@@ -6,7 +8,6 @@ import {
} from '../generated/anthoLumeAPIV1';
import { Document } from '../generated/model/document';
import { Progress } from '../generated/model/progress';
import { useQueryClient } from '@tanstack/react-query';
import { formatDuration } from '../utils/formatters';
import {
DeleteIcon,
@@ -18,9 +19,14 @@ import {
CloseIcon,
CheckIcon,
} from '../icons';
import { useState } from 'react';
import { Field, FieldLabel, FieldValue, FieldActions } from '../components';
const iconButtonClassName = 'cursor-pointer text-content-muted hover:text-content';
const popupClassName = 'rounded bg-surface-strong p-3 text-content shadow-lg transition-all duration-200';
const popupInputClassName = 'rounded bg-surface p-2 text-content';
const editInputClassName =
'w-full rounded border border-secondary-200 bg-secondary-50 p-2 text-lg font-medium text-content focus:outline-none focus:ring-2 focus:ring-secondary-400 dark:border-secondary-700 dark:bg-secondary-900/20 dark:focus:ring-secondary-500';
export default function DocumentPage() {
const { id } = useParams<{ id: string }>();
const queryClient = useQueryClient();
@@ -35,18 +41,16 @@ export default function DocumentPage() {
const [isEditingDescription, setIsEditingDescription] = useState(false);
const [showTimeReadInfo, setShowTimeReadInfo] = useState(false);
// Edit values - initialized after document is loaded
const [editTitle, setEditTitle] = useState('');
const [editAuthor, setEditAuthor] = useState('');
const [editDescription, setEditDescription] = useState('');
if (docLoading) {
return <div className="text-gray-500 dark:text-white">Loading...</div>;
return <div className="text-content-muted">Loading...</div>;
}
// Check for successful response (status 200)
if (!docData || docData.status !== 200) {
return <div className="text-gray-500 dark:text-white">Document not found</div>;
return <div className="text-content-muted">Document not found</div>;
}
const document = docData.data.document as Document;
@@ -54,7 +58,7 @@ export default function DocumentPage() {
docData?.status === 200 ? (docData.data.progress as Progress | undefined) : undefined;
if (!document) {
return <div className="text-gray-500 dark:text-white">Document not found</div>;
return <div className="text-content-muted">Document not found</div>;
}
const percentage =
@@ -62,24 +66,18 @@ export default function DocumentPage() {
const secondsPerPercent = document.seconds_per_percent || 0;
const totalTimeLeftSeconds = Math.round((100 - percentage) * secondsPerPercent);
// Helper to start editing
const startEditing = (field: 'title' | 'author' | 'description') => {
if (field === 'title') setEditTitle(document.title);
if (field === 'author') setEditAuthor(document.author);
if (field === 'description') setEditDescription(document.description || '');
};
// Save edit handlers
const saveTitle = () => {
editMutation.mutate(
{
id: document.id,
data: { title: editTitle },
},
{ id: document.id, data: { title: editTitle } },
{
onSuccess: response => {
setIsEditingTitle(false);
// Update cache with the response data (no refetch needed)
queryClient.setQueryData(getGetDocumentQueryKey(document.id), response);
},
onError: () => setIsEditingTitle(false),
@@ -89,14 +87,10 @@ export default function DocumentPage() {
const saveAuthor = () => {
editMutation.mutate(
{
id: document.id,
data: { author: editAuthor },
},
{ id: document.id, data: { author: editAuthor } },
{
onSuccess: response => {
setIsEditingAuthor(false);
// Update cache with the response data (no refetch needed)
queryClient.setQueryData(getGetDocumentQueryKey(document.id), response);
},
onError: () => setIsEditingAuthor(false),
@@ -106,14 +100,10 @@ export default function DocumentPage() {
const saveDescription = () => {
editMutation.mutate(
{
id: document.id,
data: { description: editDescription },
},
{ id: document.id, data: { description: editDescription } },
{
onSuccess: response => {
setIsEditingDescription(false);
// Update cache with the response data (no refetch needed)
queryClient.setQueryData(getGetDocumentQueryKey(document.id), response);
},
onError: () => setIsEditingDescription(false),
@@ -123,10 +113,8 @@ export default function DocumentPage() {
return (
<div className="relative size-full">
<div className="size-full overflow-scroll rounded bg-white p-4 shadow-lg dark:bg-gray-700 dark:text-white">
{/* Document Info - Left Column */}
<div className="size-full overflow-scroll rounded bg-surface p-4 text-content shadow-lg">
<div className="relative float-left mb-2 mr-4 flex w-44 flex-col gap-2 md:w-60 lg:w-80">
{/* Cover Image with Edit Label */}
<label className="z-10 cursor-pointer" htmlFor="edit-cover-checkbox">
<img
className="w-full rounded object-fill"
@@ -135,31 +123,27 @@ export default function DocumentPage() {
/>
</label>
{/* Read Button - Only if file exists */}
{document.filepath && (
<a
href={`/reader#id=${document.id}&type=REMOTE`}
className="z-10 mt-2 w-full rounded bg-blue-700 py-1 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700"
className="z-10 mt-2 w-full rounded bg-secondary-700 py-1 text-center text-sm font-medium text-white hover:bg-secondary-800 focus:outline-none focus:ring-4 focus:ring-secondary-300 dark:bg-secondary-600 dark:hover:bg-secondary-700"
>
Read
</a>
)}
{/* Action Buttons Container */}
<div className="relative z-20 flex flex-wrap-reverse justify-between gap-2">
{/* ISBN Info */}
<div className="min-w-[50%] md:mr-2">
<div className="flex gap-1 text-sm">
<p className="text-gray-500">ISBN-10:</p>
<p className="text-content-muted">ISBN-10:</p>
<p className="font-medium">{document.isbn10 || 'N/A'}</p>
</div>
<div className="flex gap-1 text-sm">
<p className="text-gray-500">ISBN-13:</p>
<p className="text-content-muted">ISBN-13:</p>
<p className="font-medium">{document.isbn13 || 'N/A'}</p>
</div>
</div>
{/* Edit Cover Dropdown */}
<div className="relative">
<input
type="checkbox"
@@ -169,35 +153,24 @@ export default function DocumentPage() {
onChange={e => setShowEditCover(e.target.checked)}
/>
<div
className={`absolute left-0 top-0 z-30 flex flex-col gap-2 rounded bg-gray-200 p-3 shadow-lg transition-all duration-200 dark:bg-gray-600 ${
className={`absolute left-0 top-0 z-30 flex flex-col gap-2 ${popupClassName} ${
showEditCover ? 'opacity-100' : 'pointer-events-none opacity-0'
}`}
>
<form className="flex w-72 flex-col gap-2 text-sm text-black dark:text-white">
<input
type="file"
id="cover_file"
name="cover_file"
className="bg-gray-300 p-2"
/>
<form className="flex w-72 flex-col gap-2 text-sm">
<input type="file" id="cover_file" name="cover_file" className={popupInputClassName} />
<button
type="submit"
className="rounded bg-blue-700 px-2 py-1 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600"
className="rounded bg-secondary-700 px-2 py-1 text-sm font-medium text-white hover:bg-secondary-800 dark:bg-secondary-600"
>
Upload Cover
</button>
</form>
<form className="flex w-72 flex-col gap-2 text-sm text-black dark:text-white">
<input
type="checkbox"
checked
id="remove_cover"
name="remove_cover"
className="hidden"
/>
<form className="flex w-72 flex-col gap-2 text-sm">
<input type="checkbox" checked id="remove_cover" name="remove_cover" className="hidden" />
<button
type="submit"
className="rounded bg-blue-700 px-2 py-1 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600"
className="rounded bg-secondary-700 px-2 py-1 text-sm font-medium text-white hover:bg-secondary-800 dark:bg-secondary-600"
>
Remove Cover
</button>
@@ -205,24 +178,22 @@ export default function DocumentPage() {
</div>
</div>
{/* Icons Container */}
<div className="relative my-auto flex grow justify-between text-gray-500 dark:text-gray-500">
{/* Delete Button */}
<div className="relative my-auto flex grow justify-between text-content-muted">
<div className="relative">
<button
type="button"
onClick={() => setShowDelete(!showDelete)}
className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
className={iconButtonClassName}
aria-label="Delete"
>
<DeleteIcon size={28} />
</button>
<div
className={`absolute bottom-7 left-5 z-30 rounded bg-gray-200 p-3 shadow-lg transition-all duration-200 dark:bg-gray-600 ${
className={`absolute bottom-7 left-5 z-30 ${popupClassName} ${
showDelete ? 'opacity-100' : 'pointer-events-none opacity-0'
}`}
>
<form className="w-24 text-sm text-black dark:text-white">
<form className="w-24 text-sm">
<button
type="submit"
className="rounded bg-red-600 px-2 py-1 text-sm font-medium text-white hover:bg-red-700"
@@ -233,38 +204,36 @@ export default function DocumentPage() {
</div>
</div>
{/* Activity Button */}
<a
href={`/activity?document=${document.id}`}
aria-label="Activity"
className="hover:text-gray-800 dark:hover:text-gray-100"
className={iconButtonClassName}
>
<ActivityIcon size={28} />
</a>
{/* Identify/Search Button */}
<div className="relative">
<button
type="button"
onClick={() => setShowIdentify(!showIdentify)}
aria-label="Identify"
className="hover:text-gray-800 dark:hover:text-gray-100"
className={iconButtonClassName}
>
<SearchIcon size={28} />
</button>
<div
className={`absolute bottom-7 left-5 z-30 rounded bg-gray-200 p-3 shadow-lg transition-all duration-200 dark:bg-gray-600 ${
className={`absolute bottom-7 left-5 z-30 ${popupClassName} ${
showIdentify ? 'opacity-100' : 'pointer-events-none opacity-0'
}`}
>
<form className="flex flex-col gap-2 text-sm text-black dark:text-white">
<form className="flex flex-col gap-2 text-sm">
<input
type="text"
id="title"
name="title"
placeholder="Title"
defaultValue={document.title}
className="rounded bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
className={popupInputClassName}
/>
<input
type="text"
@@ -272,7 +241,7 @@ export default function DocumentPage() {
name="author"
placeholder="Author"
defaultValue={document.author}
className="rounded bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
className={popupInputClassName}
/>
<input
type="text"
@@ -280,11 +249,11 @@ export default function DocumentPage() {
name="isbn"
placeholder="ISBN 10 / ISBN 13"
defaultValue={document.isbn13 || document.isbn10}
className="rounded bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
className={popupInputClassName}
/>
<button
type="submit"
className="rounded bg-blue-700 px-2 py-1 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600"
className="rounded bg-secondary-700 px-2 py-1 text-sm font-medium text-white hover:bg-secondary-800 dark:bg-secondary-600"
>
Identify
</button>
@@ -292,17 +261,16 @@ export default function DocumentPage() {
</div>
</div>
{/* Download Button */}
{document.filepath ? (
<a
href={`/api/v1/documents/${document.id}/file`}
aria-label="Download"
className="hover:text-gray-800 dark:hover:text-gray-100"
className={iconButtonClassName}
>
<DownloadIcon size={28} />
</a>
) : (
<span className="text-gray-200 dark:text-gray-600">
<span className="text-content-subtle">
<DownloadIcon size={28} disabled />
</span>
)}
@@ -310,9 +278,7 @@ export default function DocumentPage() {
</div>
</div>
{/* Document Details Grid */}
<div className="grid justify-between gap-4 pb-4 sm:grid-cols-2">
{/* Title - Editable */}
<Field
isEditing={isEditingTitle}
label={
@@ -321,20 +287,10 @@ export default function DocumentPage() {
<FieldActions>
{isEditingTitle ? (
<div className="flex gap-1">
<button
type="button"
onClick={() => setIsEditingTitle(false)}
className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
aria-label="Cancel edit"
>
<button type="button" onClick={() => setIsEditingTitle(false)} className={iconButtonClassName} aria-label="Cancel edit">
<CloseIcon size={18} />
</button>
<button
type="button"
onClick={saveTitle}
className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
aria-label="Confirm edit"
>
<button type="button" onClick={saveTitle} className={iconButtonClassName} aria-label="Confirm edit">
<CheckIcon size={18} />
</button>
</div>
@@ -345,7 +301,7 @@ export default function DocumentPage() {
startEditing('title');
setIsEditingTitle(true);
}}
className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
className={iconButtonClassName}
aria-label="Edit title"
>
<EditIcon size={18} />
@@ -357,19 +313,13 @@ export default function DocumentPage() {
>
{isEditingTitle ? (
<div className="relative mt-1 flex gap-2">
<input
type="text"
value={editTitle}
onChange={e => setEditTitle(e.target.value)}
className="w-full rounded border border-blue-200 bg-blue-50 p-2 text-lg font-medium text-black focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-700 dark:bg-blue-900/20 dark:text-white dark:focus:ring-blue-500"
/>
<input type="text" value={editTitle} onChange={e => setEditTitle(e.target.value)} className={editInputClassName} />
</div>
) : (
<FieldValue>{document.title}</FieldValue>
)}
</Field>
{/* Author - Editable */}
<Field
isEditing={isEditingAuthor}
label={
@@ -378,20 +328,10 @@ export default function DocumentPage() {
<FieldActions>
{isEditingAuthor ? (
<>
<button
type="button"
onClick={() => setIsEditingAuthor(false)}
className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
aria-label="Cancel edit"
>
<button type="button" onClick={() => setIsEditingAuthor(false)} className={iconButtonClassName} aria-label="Cancel edit">
<CloseIcon size={18} />
</button>
<button
type="button"
onClick={saveAuthor}
className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
aria-label="Confirm edit"
>
<button type="button" onClick={saveAuthor} className={iconButtonClassName} aria-label="Confirm edit">
<CheckIcon size={18} />
</button>
</>
@@ -402,7 +342,7 @@ export default function DocumentPage() {
startEditing('author');
setIsEditingAuthor(true);
}}
className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
className={iconButtonClassName}
aria-label="Edit author"
>
<EditIcon size={18} />
@@ -414,19 +354,13 @@ export default function DocumentPage() {
>
{isEditingAuthor ? (
<div className="relative mt-1 flex gap-2">
<input
type="text"
value={editAuthor}
onChange={e => setEditAuthor(e.target.value)}
className="w-full rounded border border-blue-200 bg-blue-50 p-2 text-lg font-medium text-black focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-700 dark:bg-blue-900/20 dark:text-white dark:focus:ring-blue-500"
/>
<input type="text" value={editAuthor} onChange={e => setEditAuthor(e.target.value)} className={editInputClassName} />
</div>
) : (
<FieldValue>{document.author}</FieldValue>
)}
</Field>
{/* Time Read with Info Dropdown */}
<Field
label={
<>
@@ -434,31 +368,27 @@ export default function DocumentPage() {
<button
type="button"
onClick={() => setShowTimeReadInfo(!showTimeReadInfo)}
className="my-auto cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
className={`${iconButtonClassName} my-auto`}
aria-label="Show time read info"
>
<InfoIcon size={18} />
</button>
<div
className={`absolute right-0 top-7 z-30 rounded bg-gray-200 p-3 shadow-lg transition-all duration-200 dark:bg-gray-600 ${
className={`absolute right-0 top-7 z-30 ${popupClassName} ${
showTimeReadInfo ? 'opacity-100' : 'pointer-events-none opacity-0'
}`}
>
<div className="flex text-xs">
<p className="w-32 text-gray-400">Seconds / Percent</p>
<p className="font-medium dark:text-white">
{secondsPerPercent !== 0 ? secondsPerPercent : 'N/A'}
</p>
<p className="w-32 text-content-subtle">Seconds / Percent</p>
<p className="font-medium">{secondsPerPercent !== 0 ? secondsPerPercent : 'N/A'}</p>
</div>
<div className="flex text-xs">
<p className="w-32 text-gray-400">Words / Minute</p>
<p className="font-medium dark:text-white">
{document.wpm && document.wpm > 0 ? document.wpm : 'N/A'}
</p>
<p className="w-32 text-content-subtle">Words / Minute</p>
<p className="font-medium">{document.wpm && document.wpm > 0 ? document.wpm : 'N/A'}</p>
</div>
<div className="flex text-xs">
<p className="w-32 text-gray-400">Est. Time Left</p>
<p className="whitespace-nowrap font-medium dark:text-white">
<p className="w-32 text-content-subtle">Est. Time Left</p>
<p className="whitespace-nowrap font-medium">
{totalTimeLeftSeconds > 0 ? formatDuration(totalTimeLeftSeconds) : 'N/A'}
</p>
</div>
@@ -473,13 +403,11 @@ export default function DocumentPage() {
</FieldValue>
</Field>
{/* Progress */}
<Field label={<FieldLabel>Progress</FieldLabel>}>
<FieldValue>{`${percentage.toFixed(2)}%`}</FieldValue>
</Field>
</div>
{/* Description - Editable */}
<Field
isEditing={isEditingDescription}
label={
@@ -488,20 +416,10 @@ export default function DocumentPage() {
<FieldActions>
{isEditingDescription ? (
<>
<button
type="button"
onClick={() => setIsEditingDescription(false)}
className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
aria-label="Cancel edit"
>
<button type="button" onClick={() => setIsEditingDescription(false)} className={iconButtonClassName} aria-label="Cancel edit">
<CloseIcon size={18} />
</button>
<button
type="button"
onClick={saveDescription}
className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
aria-label="Confirm edit"
>
<button type="button" onClick={saveDescription} className={iconButtonClassName} aria-label="Confirm edit">
<CheckIcon size={18} />
</button>
</>
@@ -512,7 +430,7 @@ export default function DocumentPage() {
startEditing('description');
setIsEditingDescription(true);
}}
className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
className={iconButtonClassName}
aria-label="Edit description"
>
<EditIcon size={18} />
@@ -527,14 +445,12 @@ export default function DocumentPage() {
<textarea
value={editDescription}
onChange={e => setEditDescription(e.target.value)}
className="h-32 w-full grow rounded border border-blue-200 bg-blue-50 p-2 font-medium text-black focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-700 dark:bg-blue-900/20 dark:text-white dark:focus:ring-blue-500"
className="h-32 w-full grow rounded border border-secondary-200 bg-secondary-50 p-2 font-medium text-content focus:outline-none focus:ring-2 focus:ring-secondary-400 dark:border-secondary-700 dark:bg-secondary-900/20 dark:focus:ring-secondary-500"
rows={5}
/>
</div>
) : (
<FieldValue className="hyphens-auto text-justify">
{document.description || 'N/A'}
</FieldValue>
<FieldValue className="hyphens-auto text-justify">{document.description || 'N/A'}</FieldValue>
)}
</Field>
</div>

97
frontend/src/pages/HomePage.tsx
View File

@@ -17,29 +17,24 @@ interface InfoCardProps {
}
function InfoCard({ title, size, link }: InfoCardProps) {
const content = (
<div className="flex w-full gap-4 rounded bg-surface p-4 shadow-lg">
<div className="flex w-full flex-col justify-around text-sm text-content">
<p className="text-2xl font-bold">{size}</p>
<p className="text-sm text-content-subtle">{title}</p>
</div>
</div>
);
if (link) {
return (
<Link to={link} className="w-full">
<div className="flex w-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
<div className="flex w-full flex-col justify-around text-sm dark:text-white">
<p className="text-2xl font-bold text-black dark:text-white">{size}</p>
<p className="text-sm text-gray-400">{title}</p>
</div>
</div>
{content}
</Link>
);
}
return (
<div className="w-full">
<div className="flex w-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
<div className="flex w-full flex-col justify-around text-sm dark:text-white">
<p className="text-2xl font-bold text-black dark:text-white">{size}</p>
<p className="text-sm text-gray-400">{title}</p>
</div>
</div>
</div>
);
return <div className="w-full">{content}</div>;
}
interface StreakCardProps {
@@ -63,18 +58,18 @@ function StreakCard({
}: StreakCardProps) {
return (
<div className="w-full">
<div className="relative w-full rounded bg-white px-4 py-6 shadow-lg dark:bg-gray-700">
<p className="w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
<div className="relative w-full rounded bg-surface px-4 py-6 text-content shadow-lg">
<p className="w-max border-b border-border text-sm font-semibold text-content-muted">
{window === 'WEEK' ? 'Weekly Read Streak' : 'Daily Read Streak'}
</p>
<div className="my-6 flex items-end space-x-2">
<p className="text-5xl font-bold text-black dark:text-white">{currentStreak}</p>
<p className="text-5xl font-bold">{currentStreak}</p>
</div>
<div className="dark:text-white">
<div className="mb-2 flex items-center justify-between border-b border-gray-200 pb-2 text-sm">
<div>
<div className="mb-2 flex items-center justify-between border-b border-border pb-2 text-sm">
<div>
<p>{window === 'WEEK' ? 'Current Weekly Streak' : 'Current Daily Streak'}</p>
<div className="flex items-end text-sm text-gray-400">
<div className="flex items-end text-sm text-content-subtle">
{currentStreakStartDate} ➞ {currentStreakEndDate}
</div>
</div>
@@ -83,7 +78,7 @@ function StreakCard({
<div className="mb-2 flex items-center justify-between pb-2 text-sm">
<div>
<p>{window === 'WEEK' ? 'Best Weekly Streak' : 'Best Daily Streak'}</p>
<div className="flex items-end text-sm text-gray-400">
<div className="flex items-end text-sm text-content-subtle">
{maxStreakStartDate} ➞ {maxStreakEndDate}
</div>
</div>
@@ -120,67 +115,47 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
const currentData = data[selectedPeriod];
const handlePeriodChange = (period: TimePeriod) => {
setSelectedPeriod(period);
};
const getPeriodClassName = (period: TimePeriod) =>
`cursor-pointer ${selectedPeriod === period ? 'text-content' : 'text-content-subtle hover:text-content'}`;
return (
<div className="w-full">
<div className="flex size-full flex-col justify-between rounded bg-white px-4 py-6 shadow-lg dark:bg-gray-700">
<div className="flex size-full flex-col justify-between rounded bg-surface px-4 py-6 text-content shadow-lg">
<div>
<div className="flex justify-between">
<p className="w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
<p className="w-max border-b border-border text-sm font-semibold text-content-muted">
{name} Leaderboard
</p>
<div className="flex items-center gap-2 text-xs text-gray-400">
<button
type="button"
onClick={() => handlePeriodChange('all')}
className={`cursor-pointer hover:text-black dark:hover:text-white ${selectedPeriod === 'all' ? '!text-black dark:!text-white' : ''}`}
>
<div className="flex items-center gap-2 text-xs">
<button type="button" onClick={() => setSelectedPeriod('all')} className={getPeriodClassName('all')}>
all
</button>
<button
type="button"
onClick={() => handlePeriodChange('year')}
className={`cursor-pointer hover:text-black dark:hover:text-white ${selectedPeriod === 'year' ? '!text-black dark:!text-white' : ''}`}
>
<button type="button" onClick={() => setSelectedPeriod('year')} className={getPeriodClassName('year')}>
year
</button>
<button
type="button"
onClick={() => handlePeriodChange('month')}
className={`cursor-pointer hover:text-black dark:hover:text-white ${selectedPeriod === 'month' ? '!text-black dark:!text-white' : ''}`}
>
<button type="button" onClick={() => setSelectedPeriod('month')} className={getPeriodClassName('month')}>
month
</button>
<button
type="button"
onClick={() => handlePeriodChange('week')}
className={`cursor-pointer hover:text-black dark:hover:text-white ${selectedPeriod === 'week' ? '!text-black dark:!text-white' : ''}`}
>
<button type="button" onClick={() => setSelectedPeriod('week')} className={getPeriodClassName('week')}>
week
</button>
</div>
</div>
</div>
{/* Current period data */}
<div className="my-6 flex items-end space-x-2">
{currentData?.length === 0 ? (
<p className="text-5xl font-bold text-black dark:text-white">N/A</p>
<p className="text-5xl font-bold">N/A</p>
) : (
<p className="text-5xl font-bold text-black dark:text-white">
{currentData[0]?.user_id || 'N/A'}
</p>
<p className="text-5xl font-bold">{currentData[0]?.user_id || 'N/A'}</p>
)}
</div>
<div className="dark:text-white">
<div>
{currentData?.slice(0, 3).map((item: LeaderboardEntry, index: number) => (
<div
key={index}
className={`flex items-center justify-between py-2 text-sm ${index > 0 ? 'border-t border-gray-200' : ''}`}
className={`flex items-center justify-between py-2 text-sm ${index > 0 ? 'border-t border-border' : ''}`}
>
<div>
<p>{item.user_id}</p>
@@ -204,22 +179,20 @@ export default function HomePage() {
const userStats = homeResponse?.user_statistics;
if (homeLoading) {
return <div className="text-gray-500 dark:text-white">Loading...</div>;
return <div className="text-content-muted">Loading...</div>;
}
return (
<div className="flex flex-col gap-4">
{/* Daily Read Totals Graph */}
<div className="w-full">
<div className="relative w-full rounded bg-white shadow-lg dark:bg-gray-700">
<p className="absolute left-5 top-3 w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
<div className="relative w-full rounded bg-surface shadow-lg">
<p className="absolute left-5 top-3 w-max border-b border-border text-sm font-semibold text-content-muted">
Daily Read Totals
</p>
<ReadingHistoryGraph data={graphData || []} />
</div>
</div>
{/* Info Cards */}
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
<InfoCard title="Documents" size={dbInfo?.documents_size || 0} link="./documents" />
<InfoCard title="Activity Records" size={dbInfo?.activity_size || 0} link="./activity" />
@@ -227,7 +200,6 @@ export default function HomePage() {
<InfoCard title="Devices" size={dbInfo?.devices_size || 0} />
</div>
{/* Streak Cards */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{streaks?.map((streak: UserStreak, index: number) => (
<StreakCard
@@ -243,7 +215,6 @@ export default function HomePage() {
))}
</div>
{/* Leaderboard Cards */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<LeaderboardCard
name="WPM"

5
frontend/src/pages/ProgressPage.tsx
View File

@@ -12,10 +12,7 @@ export default function ProgressPage() {
key: 'document_id' as const,
header: 'Document',
render: (_value, row) => (
<Link
to={`/documents/${row.document_id}`}
className="text-blue-600 hover:underline dark:text-blue-400"
>
<Link to={`/documents/${row.document_id}`} className="text-secondary-600 hover:underline">
{row.author || 'Unknown'} - {row.title || 'Unknown'}
</Link>
),

10
frontend/src/pages/RegisterPage.tsx
View File

@@ -49,7 +49,7 @@ export default function RegisterPage() {
};
return (
<div className="min-h-screen bg-gray-100 dark:bg-gray-800 dark:text-white">
<div className="min-h-screen bg-canvas text-content">
<div className="flex w-full flex-wrap">
<div className="flex w-full flex-col md:w-1/2">
<div className="my-auto flex flex-col justify-center px-8 pt-8 md:justify-start md:px-24 md:pt-0 lg:px-32">
@@ -61,7 +61,7 @@ export default function RegisterPage() {
type="text"
value={username}
onChange={e => setUsername(e.target.value)}
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
className="w-full flex-1 appearance-none rounded-none border border-border bg-surface px-4 py-2 text-base text-content shadow-sm placeholder:text-content-subtle focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600"
placeholder="Username"
required
disabled={isLoading || isLoadingInfo || !registrationEnabled}
@@ -74,7 +74,7 @@ export default function RegisterPage() {
type="password"
value={password}
onChange={e => setPassword(e.target.value)}
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
className="w-full flex-1 appearance-none rounded-none border border-border bg-surface px-4 py-2 text-base text-content shadow-sm placeholder:text-content-subtle focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600"
placeholder="Password"
required
disabled={isLoading || isLoadingInfo || !registrationEnabled}
@@ -106,8 +106,8 @@ export default function RegisterPage() {
</div>
</div>
<div className="relative hidden h-screen w-1/2 shadow-2xl md:block">
<div className="left-0 top-0 flex h-screen w-full items-center justify-center bg-gray-300 object-cover ease-in-out">
<span className="text-gray-500">AnthoLume</span>
<div className="left-0 top-0 flex h-screen w-full items-center justify-center bg-surface-strong object-cover ease-in-out">
<span className="text-content-muted">AnthoLume</span>
</div>
</div>
</div>

44
frontend/src/pages/SearchPage.tsx
View File

@@ -49,30 +49,30 @@ export function SearchPageView({
return (
<div className="flex w-full flex-col gap-4 md:flex-row">
<div className="flex grow flex-col gap-4">
<div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
<div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
<form className="flex flex-col gap-4 lg:flex-row" onSubmit={onSubmit}>
<div className="flex w-full grow flex-col">
<div className="relative flex">
<span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
<span className="inline-flex items-center border-y border-l border-border bg-surface px-3 text-sm text-content-muted shadow-sm">
<Search2Icon size={15} hoverable={false} />
</span>
<input
type="text"
value={query}
onChange={e => onQueryChange(e.target.value)}
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
className="w-full flex-1 appearance-none rounded-none border border-border bg-surface px-4 py-2 text-base text-content shadow-sm placeholder:text-content-subtle focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600"
placeholder="Query"
/>
</div>
</div>
<div className="relative flex min-w-[12em]">
<span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
<span className="inline-flex items-center border-y border-l border-border bg-surface px-3 text-sm text-content-muted shadow-sm">
<BookIcon size={15} />
</span>
<select
value={source}
onChange={e => onSourceChange(e.target.value as GetSearchSource)}
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
className="w-full flex-1 appearance-none rounded-none border border-border bg-surface px-4 py-2 text-base text-content shadow-sm placeholder:text-content-subtle focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600"
>
<option value={GetSearchSource.LibGen}>Library Genesis</option>
<option value={GetSearchSource.Annas_Archive}>Annas Archive</option>
@@ -87,28 +87,28 @@ export function SearchPageView({
</div>
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<table className="min-w-full bg-white text-sm leading-normal md:text-sm dark:bg-gray-700">
<thead className="text-gray-800 dark:text-gray-400">
<table className="min-w-full bg-surface text-sm leading-normal text-content md:text-sm">
<thead className="text-content-muted">
<tr>
<th className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"></th>
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<th className="w-12 border-b border-border p-3 text-left font-normal uppercase"></th>
<th className="border-b border-border p-3 text-left font-normal uppercase">
Document
</th>
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<th className="border-b border-border p-3 text-left font-normal uppercase">
Series
</th>
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<th className="border-b border-border p-3 text-left font-normal uppercase">
Type
</th>
<th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<th className="border-b border-border p-3 text-left font-normal uppercase">
Size
</th>
<th className="hidden border-b border-gray-200 p-3 text-left font-normal uppercase md:block dark:border-gray-800">
<th className="hidden border-b border-border p-3 text-left font-normal uppercase md:table-cell">
Date
</th>
</tr>
</thead>
<tbody className="text-black dark:text-white">
<tbody>
{isLoading && (
<tr>
<td className="p-3 text-center" colSpan={6}>
@@ -126,24 +126,24 @@ export function SearchPageView({
{!isLoading &&
results.map(item => (
<tr key={item.id}>
<td className="border-b border-gray-200 p-3 text-gray-500 dark:text-gray-500">
<button className="hover:text-purple-600" title="Download">
<td className="border-b border-border p-3 text-content-muted">
<button className="hover:text-primary-600" title="Download">
<DownloadIcon size={15} />
</button>
</td>
<td className="border-b border-gray-200 p-3">
<td className="border-b border-border p-3">
{item.author || 'N/A'} - {item.title || 'N/A'}
</td>
<td className="border-b border-gray-200 p-3">
<td className="border-b border-border p-3">
<p>{item.series || 'N/A'}</p>
</td>
<td className="border-b border-gray-200 p-3">
<td className="border-b border-border p-3">
<p>{item.file_type || 'N/A'}</p>
</td>
<td className="border-b border-gray-200 p-3">
<td className="border-b border-border p-3">
<p>{item.file_size || 'N/A'}</p>
</td>
<td className="hidden border-b border-gray-200 p-3 md:table-cell">
<td className="hidden border-b border-border p-3 md:table-cell">
<p>{item.upload_date || 'N/A'}</p>
</td>
</tr>
@@ -172,7 +172,7 @@ export default function SearchPage() {
query: {
enabled: activeQuery.trim().length > 0,
},
},
}
);
const results = getSearchResults(data);

32
frontend/src/pages/SettingsPage.tsx
View File

@@ -74,42 +74,42 @@ export default function SettingsPage() {
<div className="flex w-full flex-col gap-4 md:flex-row">
<div>
<div className="flex flex-col items-center rounded bg-surface p-4 shadow-lg md:w-60 lg:w-80">
<div className="mb-4 size-16 rounded-full bg-gray-200 dark:bg-gray-600" />
<div className="h-6 w-32 rounded bg-gray-200 dark:bg-gray-600" />
<div className="mb-4 size-16 rounded-full bg-surface-strong" />
<div className="h-6 w-32 rounded bg-surface-strong" />
</div>
</div>
<div className="flex grow flex-col gap-4">
<div className="flex flex-col gap-2 rounded bg-surface p-4 shadow-lg">
<div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
<div className="mb-4 h-6 w-48 rounded bg-surface-strong" />
<div className="flex gap-4">
<div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-10 w-40 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-12 flex-1 rounded bg-surface-strong" />
<div className="h-12 flex-1 rounded bg-surface-strong" />
<div className="h-10 w-40 rounded bg-surface-strong" />
</div>
</div>
<div className="flex flex-col gap-2 rounded bg-surface p-4 shadow-lg">
<div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
<div className="mb-4 h-6 w-48 rounded bg-surface-strong" />
<div className="flex gap-4">
<div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-10 w-40 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-12 flex-1 rounded bg-surface-strong" />
<div className="h-10 w-40 rounded bg-surface-strong" />
</div>
</div>
<div className="flex flex-col gap-2 rounded bg-surface p-4 shadow-lg">
<div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
<div className="mb-4 h-6 w-48 rounded bg-surface-strong" />
<div className="grid gap-3 md:grid-cols-3">
{themeModes.map(mode => (
<div key={mode.value} className="h-24 rounded bg-gray-200 dark:bg-gray-600" />
<div key={mode.value} className="h-24 rounded bg-surface-strong" />
))}
</div>
</div>
<div className="flex flex-col rounded bg-surface p-4 shadow-lg">
<div className="mb-4 h-6 w-24 rounded bg-gray-200 dark:bg-gray-600" />
<div className="mb-4 h-6 w-24 rounded bg-surface-strong" />
<div className="mb-4 flex gap-4">
<div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-6 flex-1 rounded bg-surface-strong" />
<div className="h-6 flex-1 rounded bg-surface-strong" />
<div className="h-6 flex-1 rounded bg-surface-strong" />
</div>
<div className="h-32 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
<div className="h-32 flex-1 rounded bg-surface-strong" />
</div>
</div>
</div>