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

wip 9

Browse Source
This commit is contained in:
Evan Reichard
2026-03-16 10:20:01 -04:00
parent c46dcb440d
commit 7c47f2d2eb
25 changed files with 2057 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@ export default function ActivityPage() {
render: (_: any, row: any) => (
<Link
to={`/documents/${row.document_id}`}
className="text-blue-600 dark:text-blue-400 hover:underline"
className="text-blue-600 hover:underline dark:text-blue-400"
>
{row.author || 'Unknown'} - {row.title || 'Unknown'}
</Link>

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

@@ -69,21 +69,21 @@ export default function AdminImportPage() {
<div className="overflow-x-auto">
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<div
className="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
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>
<form className="flex gap-4 flex-col" onSubmit={handleImport}>
<div className="flex justify-between gap-4 w-full">
<div className="flex gap-4 items-center">
<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">
<FolderOpen size={20} />
<p className="font-medium text-lg break-all">
<p className="break-all text-lg font-medium">
{selectedDirectory}
</p>
</div>
<div className="flex flex-col justify-around gap-2 mr-4">
<div className="inline-flex gap-2 items-center">
<div className="mr-4 flex flex-col justify-around gap-2">
<div className="inline-flex items-center gap-2">
<input
type="radio"
id="direct"
@@ -92,7 +92,7 @@ export default function AdminImportPage() {
/>
<label htmlFor="direct">Direct</label>
</div>
<div className="inline-flex gap-2 items-center">
<div className="inline-flex items-center gap-2">
<input
type="radio"
id="copy"
@@ -127,15 +127,15 @@ export default function AdminImportPage() {
<div className="overflow-x-auto">
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<table
className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"
className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700"
>
<thead className="text-gray-800 dark:text-gray-400">
<tr>
<th
className="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 w-12"
className="w-12 border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"
></th>
<th
className="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 break-all"
className="break-all border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"
>
{currentPath}
</th>
@@ -145,9 +145,9 @@ export default function AdminImportPage() {
{currentPath !== '/' && (
<tr>
<td
className="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"
className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"
></td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<button onClick={handleNavigateUp}>
<p>../</p>
</button>
@@ -156,19 +156,19 @@ export default function AdminImportPage() {
)}
{directories.length === 0 ? (
<tr>
<td className="text-center p-3" colSpan={2}>No Folders</td>
<td className="p-3 text-center" colSpan={2}>No Folders</td>
</tr>
) : (
directories.map((item) => (
<tr key={item.name}>
<td
className="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"
className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"
>
<button onClick={() => item.name && handleSelectDirectory(item.name)}>
<FolderOpen size={20} />
</button>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<button onClick={() => item.name && handleSelectDirectory(item.name)}>
<p>{item.name ?? ''}</p>
</button>

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

@@ -14,22 +14,22 @@ export default function AdminImportResultsPage() {
<div className="overflow-x-auto">
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<table
className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"
className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700"
>
<thead className="text-gray-800 dark:text-gray-400">
<tr>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Document
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Status
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Error
</th>
@@ -38,13 +38,13 @@ export default function AdminImportResultsPage() {
<tbody className="text-black dark:text-white">
{results.length === 0 ? (
<tr>
<td className="text-center p-3" colSpan={3}>No Results</td>
<td className="p-3 text-center" colSpan={3}>No Results</td>
</tr>
) : (
results.map((result: ImportResult, index: number) => (
<tr key={index}>
<td
className="p-3 border-b border-gray-200 grid"
className="grid border-b border-gray-200 p-3"
style={{ gridTemplateColumns: '4rem auto' }}
>
<span className="text-gray-800 dark:text-gray-400">Name:</span>
@@ -56,10 +56,10 @@ export default function AdminImportResultsPage() {
<span className="text-gray-800 dark:text-gray-400">File:</span>
<span>{result.path}</span>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{result.status}</p>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{result.error || ''}</p>
</td>
</tr>

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

@@ -25,13 +25,13 @@ export default function AdminLogsPage() {
<div>
{/* Filter Form */}
<div
className="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
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"
>
<form className="flex gap-4 flex-col lg:flex-row" onSubmit={handleFilterSubmit}>
<div className="flex flex-col w-full grow">
<div className="flex relative">
<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 px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Search size={15} />
</span>
@@ -39,7 +39,7 @@ export default function AdminLogsPage() {
type="text"
value={filter}
onChange={(e) => setFilter(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
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"
placeholder="JQ Filter"
/>
</div>
@@ -52,7 +52,7 @@ export default function AdminLogsPage() {
{/* Log Display */}
<div
className="flex flex-col-reverse text-black dark:text-white w-full overflow-scroll"
className="flex w-full flex-col-reverse overflow-scroll text-black dark:text-white"
style={{ fontFamily: 'monospace' }}
>
{logs.map((log: string, index: number) => (

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

@@ -115,16 +115,16 @@ export default function AdminPage() {
}
return (
<div className="w-full flex flex-col gap-4 grow">
<div className="flex w-full grow flex-col gap-4">
{/* Backup & Restore Card */}
<div
className="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
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 mb-2">Backup & Restore</p>
<p className="mb-2 text-lg font-semibold">Backup & Restore</p>
<div className="flex flex-col gap-4">
{/* Backup Form */}
<form className="flex justify-between" onSubmit={handleBackupSubmit}>
<div className="flex gap-8 items-center">
<div className="flex items-center gap-8">
<div>
<input
type="checkbox"
@@ -144,7 +144,7 @@ export default function AdminPage() {
<label htmlFor="backup_documents">Documents</label>
</div>
</div>
<div className="w-40 h-10">
<div className="h-10 w-40">
<Button variant="secondary" type="submit">Backup</Button>
</div>
</form>
@@ -152,9 +152,9 @@ export default function AdminPage() {
{/* Restore Form */}
<form
onSubmit={handleRestoreSubmit}
className="flex justify-between grow"
className="flex grow justify-between"
>
<div className="flex items-center w-1/2">
<div className="flex w-1/2 items-center">
<input
type="file"
accept=".zip"
@@ -162,7 +162,7 @@ export default function AdminPage() {
className="w-full"
/>
</div>
<div className="w-40 h-10">
<div className="h-10 w-40">
<Button variant="secondary" type="submit">Restore</Button>
</div>
</form>
@@ -171,17 +171,17 @@ export default function AdminPage() {
{/* Tasks Card */}
<div
className="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
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 dark:bg-gray-700 text-sm">
<table className="min-w-full bg-white text-sm dark:bg-gray-700">
<tbody className="text-black dark:text-white">
<tr>
<td className="pl-0">
<p>Metadata Matching</p>
</td>
<td className="py-2 float-right">
<div className="w-40 h-10 text-base">
<td className="float-right py-2">
<div className="h-10 w-40 text-base">
<Button variant="secondary" onClick={handleMetadataMatch}>Run</Button>
</div>
</td>
@@ -190,8 +190,8 @@ export default function AdminPage() {
<td>
<p>Cache Tables</p>
</td>
<td className="py-2 float-right">
<div className="w-40 h-10 text-base">
<td className="float-right py-2">
<div className="h-10 w-40 text-base">
<Button variant="secondary" onClick={handleCacheTables}>Run</Button>
</div>
</td>

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

@@ -117,22 +117,22 @@ export default function AdminUsersPage() {
<div className="relative h-full overflow-x-auto">
{/* Add User Form */}
{showAddForm && (
<div className="absolute top-10 left-10 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600">
<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-black dark:text-white text-sm">
className="flex flex-col gap-2 text-sm text-black dark:text-white">
<input
type="text"
value={newUsername}
onChange={(e) => setNewUsername(e.target.value)}
placeholder="Username"
className="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
/>
<input
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
placeholder="Password"
className="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
/>
<div className="flex items-center gap-2">
<input
@@ -144,7 +144,7 @@ export default function AdminUsersPage() {
<label htmlFor="new_is_admin">Admin</label>
</div>
<button
className="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
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"
type="submit"
>
Create
@@ -155,38 +155,38 @@ export default function AdminUsersPage() {
{/* Users Table */}
<div className="min-w-full overflow-scroll rounded shadow">
<table className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm">
<table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
<thead className="text-gray-800 dark:text-gray-400">
<tr>
<th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 w-12">
<th className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
<button onClick={() => setShowAddForm(!showAddForm)}>
<Plus size={20} />
</button>
</th>
<th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">User</th>
<th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Password</th>
<th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 text-center">
<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-left text-center font-normal uppercase dark:border-gray-800">
Permissions
</th>
<th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 w-48">Created</th>
<th className="w-48 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">Created</th>
</tr>
</thead>
<tbody className="text-black dark:text-white">
{users.length === 0 ? (
<tr>
<td className="text-center p-3" colSpan={5}>No Results</td>
<td className="p-3 text-center" colSpan={5}>No Results</td>
</tr>
) : (
users.map((user) => (
<tr key={user.id}>
{/* Delete Button */}
<td className="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400 cursor-pointer relative">
<td className="relative cursor-pointer border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400">
<button onClick={() => handleDeleteUser(user.id)}>
<Trash2 size={20} />
</button>
</td>
{/* User ID */}
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{user.id}</p>
</td>
{/* Password Reset */}
@@ -196,20 +196,20 @@ export default function AdminUsersPage() {
const password = prompt(`Enter new password for ${user.id}`);
if (password) handleUpdatePassword(user.id, password);
}}
className="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
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"
>
Reset
</button>
</td>
{/* Admin Toggle */}
<td className="flex gap-2 justify-center p-3 border-b border-gray-200 text-center min-w-40">
<td className="flex min-w-40 justify-center gap-2 border-b border-gray-200 p-3 text-center">
<button
onClick={() => handleToggleAdmin(user.id, true)}
disabled={user.admin}
className={`px-2 py-1 rounded-md text-white dark:text-black ${
className={`rounded-md px-2 py-1 text-white dark:text-black ${
user.admin
? 'bg-gray-800 dark:bg-gray-100 cursor-default'
: 'bg-gray-400 dark:bg-gray-600 cursor-pointer'
? 'cursor-default bg-gray-800 dark:bg-gray-100'
: 'cursor-pointer bg-gray-400 dark:bg-gray-600'
}`}
>
admin
@@ -217,17 +217,17 @@ export default function AdminUsersPage() {
<button
onClick={() => handleToggleAdmin(user.id, false)}
disabled={!user.admin}
className={`px-2 py-1 rounded-md text-white dark:text-black ${
className={`rounded-md px-2 py-1 text-white dark:text-black ${
!user.admin
? 'bg-gray-800 dark:bg-gray-100 cursor-default'
: 'bg-gray-400 dark:bg-gray-600 cursor-pointer'
? 'cursor-default bg-gray-800 dark:bg-gray-100'
: 'cursor-pointer bg-gray-400 dark:bg-gray-600'
}`}
>
user
</button>
</td>
{/* Created Date */}
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{user.created_at}</p>
</td>
</tr>

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

@@ -42,31 +42,31 @@ export default function ComponentDemoPage() {
<h1 className="text-2xl font-bold dark:text-white">UI Components Demo</h1>
{/* Toast Demos */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Toast Notifications</h2>
<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>
<div className="flex flex-wrap gap-4">
<button
onClick={handleDemoClick}
disabled={isLoading}
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
>
{isLoading ? <InlineLoader size="sm" /> : 'Show Info Toast'}
</button>
<button
onClick={handleWarningClick}
className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
className="rounded bg-yellow-500 px-4 py-2 text-white hover:bg-yellow-600"
>
Show Warning Toast (10s)
</button>
<button
onClick={handleErrorClick}
className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600"
>
Show Error Toast
</button>
<button
onClick={handleCustomToast}
className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600"
className="rounded bg-purple-500 px-4 py-2 text-white hover:bg-purple-600"
>
Show Custom Toast
</button>
@@ -74,15 +74,15 @@ export default function ComponentDemoPage() {
</section>
{/* Skeleton Demos */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Skeleton Loading Components</h2>
<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>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<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>
<div className="space-y-2">
<Skeleton className="w-full h-8" />
<Skeleton className="h-8 w-full" />
<Skeleton variant="text" className="w-3/4" />
<Skeleton variant="text" className="w-1/2" />
<div className="flex items-center gap-4">
@@ -113,7 +113,7 @@ export default function ComponentDemoPage() {
{/* Skeleton Button */}
<div className="space-y-4">
<h3 className="text-lg font-medium dark:text-gray-300">Skeleton Button</h3>
<div className="flex gap-2 flex-wrap">
<div className="flex flex-wrap gap-2">
<SkeletonButton width={120} />
<SkeletonButton className="w-full max-w-xs" />
</div>
@@ -122,9 +122,9 @@ export default function ComponentDemoPage() {
</section>
{/* Skeleton Card Demo */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Skeleton Cards</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<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>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<SkeletonCard />
<SkeletonCard showAvatar />
<SkeletonCard showAvatar showTitle showText textLines={4} />
@@ -132,20 +132,20 @@ export default function ComponentDemoPage() {
</section>
{/* Skeleton Table Demo */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Skeleton Table</h2>
<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>
<SkeletonTable rows={5} columns={4} />
</section>
{/* Page Loader Demo */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Page Loader</h2>
<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>
<PageLoader message="Loading demo content..." />
</section>
{/* Inline Loader Demo */}
<section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
<h2 className="text-xl font-semibold mb-4 dark:text-white">Inline Loader</h2>
<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>
<div className="flex items-center gap-8">
<div className="text-center">
<InlineLoader size="sm" />

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

@@ -74,19 +74,19 @@ export default function DocumentPage() {
const totalTimeLeftSeconds = Math.round((100 - percentage) * secondsPerPercent);
return (
<div className="h-full w-full relative">
<div className="relative size-full">
<div
className="h-full w-full overflow-scroll bg-white shadow-lg dark:bg-gray-700 rounded dark:text-white p-4"
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="flex flex-col gap-2 float-left w-44 md:w-60 lg:w-80 mr-4 mb-2 relative"
className="relative float-left mb-2 mr-4 flex w-44 flex-col gap-2 md:w-60 lg:w-80"
>
{/* Cover Image */}
{document.filepath && (
<div className="rounded object-fill w-full bg-gray-200 dark:bg-gray-600 h-60">
<div className="h-60 w-full rounded bg-gray-200 object-fill dark:bg-gray-600">
<img
className="rounded object-cover h-full"
className="h-full rounded object-cover"
src={`/api/v1/documents/${document.id}/cover`}
alt={`${document.title} cover`}
/>
@@ -97,14 +97,14 @@ export default function DocumentPage() {
{document.filepath && (
<a
href={`/reader#id=${document.id}&type=REMOTE`}
className="z-10 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none w-full mt-2"
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"
>
Read
</a>
)}
{/* Action Buttons */}
<div className="flex flex-wrap-reverse justify-between gap-2 z-20 relative my-2">
<div className="relative z-20 my-2 flex flex-wrap-reverse justify-between gap-2">
<div className="min-w-[50%] md:mr-2">
<div className="flex gap-1 text-sm">
<p className="text-gray-500">ISBN-10:</p>
@@ -123,7 +123,7 @@ export default function DocumentPage() {
className="z-10 text-gray-500 dark:text-gray-400"
title="Download"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003-3h4a3 3 0 003 3v1m0-3l-3 3m0 0L4 20" />
</svg>
</a>
@@ -132,34 +132,34 @@ export default function DocumentPage() {
</div>
{/* Document Details Grid */}
<div className="grid sm:grid-cols-2 justify-between gap-4 pb-4">
<div className="grid justify-between gap-4 pb-4 sm:grid-cols-2">
{/* Title - Editable */}
<div className="relative">
<div className="text-gray-500 inline-flex gap-2 relative">
<div className="relative inline-flex gap-2 text-gray-500">
<p>Title</p>
</div>
<div className="relative font-medium text-justify hyphens-auto">
<div className="relative hyphens-auto text-justify font-medium">
<p>{document.title}</p>
</div>
</div>
{/* Author - Editable */}
<div className="relative">
<div className="text-gray-500 inline-flex gap-2 relative">
<div className="relative inline-flex gap-2 text-gray-500">
<p>Author</p>
</div>
<div className="relative font-medium text-justify hyphens-auto">
<div className="relative hyphens-auto text-justify font-medium">
<p>{document.author}</p>
</div>
</div>
{/* Time Read */}
<div className="relative">
<div className="text-gray-500 inline-flex gap-2 relative">
<div className="relative inline-flex gap-2 text-gray-500">
<p>Time Read</p>
</div>
<div className="relative">
<p className="font-medium text-lg">
<p className="text-lg font-medium">
{document.total_time_seconds ? niceSeconds(document.total_time_seconds) : 'N/A'}
</p>
</div>
@@ -168,7 +168,7 @@ export default function DocumentPage() {
{/* Progress */}
<div>
<p className="text-gray-500">Progress</p>
<p className="font-medium text-lg">
<p className="text-lg font-medium">
{percentage ? `${Math.round(percentage)}%` : '0%'}
</p>
</div>
@@ -176,16 +176,16 @@ export default function DocumentPage() {
{/* Description - Editable */}
<div className="relative">
<div className="text-gray-500 inline-flex gap-2 relative">
<div className="relative inline-flex gap-2 text-gray-500">
<p>Description</p>
</div>
<div className="relative font-medium text-justify hyphens-auto">
<div className="relative hyphens-auto text-justify font-medium">
<p>{document.description || 'N/A'}</p>
</div>
</div>
{/* Reading Statistics */}
<div className="mt-4 grid sm:grid-cols-3 gap-4">
<div className="mt-4 grid gap-4 sm:grid-cols-3">
<div>
<p className="text-gray-500">Words</p>
<p className="font-medium">{document.words || 'N/A'}</p>
@@ -206,14 +206,14 @@ export default function DocumentPage() {
{/* Additional Reading Stats - Matching Legacy Template */}
{progress && (
<div className="mt-4 grid sm:grid-cols-2 gap-4">
<div className="flex gap-2 items-center">
<div className="mt-4 grid gap-4 sm:grid-cols-2">
<div className="flex items-center gap-2">
<p className="text-gray-500">Words / Minute:</p>
<p className="font-medium">{document.wpm || 'N/A'}</p>
</div>
<div className="flex gap-2 items-center">
<div className="flex items-center gap-2">
<p className="text-gray-500">Est. Time Left:</p>
<p className="font-medium whitespace-nowrap">
<p className="whitespace-nowrap font-medium">
{niceSeconds(totalTimeLeftSeconds)}
</p>
</div>

40
frontend/src/pages/DocumentsPage.tsx
View File

@@ -34,20 +34,20 @@ function DocumentCard({ doc }: DocumentCardProps) {
};
return (
<div className="w-full relative">
<div className="relative w-full">
<div
className="flex gap-4 w-full h-full p-4 shadow-lg bg-white dark:bg-gray-700 rounded"
className="flex size-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700"
>
<div className="min-w-fit my-auto h-48 relative">
<div className="relative my-auto h-48 min-w-fit">
<Link to={`/documents/${doc.id}`}>
<img
className="rounded object-cover h-full"
className="h-full rounded object-cover"
src={`/api/v1/documents/${doc.id}/cover`}
alt={doc.title}
/>
</Link>
</div>
<div className="flex flex-col justify-around dark:text-white w-full text-sm">
<div className="flex w-full flex-col justify-around text-sm dark:text-white">
<div className="inline-flex shrink-0 items-center">
<div>
<p className="text-gray-400">Title</p>
@@ -74,7 +74,7 @@ function DocumentCard({ doc }: DocumentCardProps) {
</div>
</div>
<div
className="absolute flex flex-col gap-2 right-4 bottom-4 text-gray-500 dark:text-gray-400"
className="absolute bottom-4 right-4 flex flex-col gap-2 text-gray-500 dark:text-gray-400"
>
<Link to={`/activity?document=${doc.id}`}>
<Activity size={20} />
@@ -153,13 +153,13 @@ export default function DocumentsPage() {
<div className="flex flex-col gap-4">
{/* Search Form */}
<div
className="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
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"
>
<form className="flex gap-4 flex-col lg:flex-row" onSubmit={handleSubmit}>
<div className="flex flex-col w-full grow">
<div className="flex relative">
<form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
<div className="flex w-full grow flex-col">
<div className="relative flex">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Search size={15} />
</span>
@@ -167,7 +167,7 @@ export default function DocumentsPage() {
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
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"
placeholder="Search Author / Title"
name="search"
/>
@@ -187,11 +187,11 @@ export default function DocumentsPage() {
</div>
{/* Pagination */}
<div className="w-full flex gap-4 justify-center mt-4 text-black dark:text-white">
<div className="mt-4 flex w-full justify-center gap-4 text-black dark:text-white">
{previousPage && previousPage > 0 && (
<button
onClick={() => setPage(page - 1)}
className="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
className="w-24 rounded bg-white p-2 text-center text-sm font-medium shadow-lg hover:bg-gray-400 focus:outline-none dark:bg-gray-600 dark:hover:bg-gray-700"
>
◄
</button>
@@ -199,7 +199,7 @@ export default function DocumentsPage() {
{nextPage && nextPage > 0 && (
<button
onClick={() => setPage(page + 1)}
className="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
className="w-24 rounded bg-white p-2 text-center text-sm font-medium shadow-lg hover:bg-gray-400 focus:outline-none dark:bg-gray-600 dark:hover:bg-gray-700"
>
►
</button>
@@ -208,7 +208,7 @@ export default function DocumentsPage() {
{/* Upload Button */}
<div
className="fixed bottom-6 right-6 rounded-full flex items-center justify-center"
className="fixed bottom-6 right-6 flex items-center justify-center rounded-full"
>
<input
type="checkbox"
@@ -218,7 +218,7 @@ export default function DocumentsPage() {
onChange={() => setUploadMode(!uploadMode)}
/>
<div
className={`absolute right-0 z-10 bottom-0 rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2 transition-opacity duration-200 ${uploadMode ? 'visible opacity-100' : 'invisible opacity-0'}`}
className={`absolute bottom-0 right-0 z-10 flex w-72 flex-col gap-2 rounded bg-gray-800 p-4 text-sm text-white transition-opacity duration-200 dark:bg-gray-200 dark:text-black ${uploadMode ? 'visible opacity-100' : 'invisible opacity-0'}`}
>
<form
method="POST"
@@ -234,7 +234,7 @@ export default function DocumentsPage() {
onChange={handleFileChange}
/>
<button
className="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
className="bg-gray-500 px-2 py-1 font-medium text-gray-800 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-800"
type="submit"
onClick={(e) => {
e.preventDefault();
@@ -246,7 +246,7 @@ export default function DocumentsPage() {
</form>
<label htmlFor="upload-file-button">
<div
className="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
className="mt-2 w-full cursor-pointer bg-gray-500 px-2 py-1 text-center font-medium text-gray-800 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-800"
onClick={handleCancelUpload}
>
Cancel Upload
@@ -254,7 +254,7 @@ export default function DocumentsPage() {
</label>
</div>
<label
className="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer"
className="flex size-16 cursor-pointer items-center justify-center rounded-full bg-gray-800 opacity-30 transition-all duration-200 hover:opacity-100 dark:bg-gray-200"
htmlFor="upload-file-button"
>
<Upload size={34} />

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

@@ -12,8 +12,8 @@ function InfoCard({ title, size, link }: InfoCardProps) {
if (link) {
return (
<Link to={link} className="w-full">
<div className="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
<div className="flex flex-col justify-around dark:text-white w-full text-sm">
<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>
@@ -24,8 +24,8 @@ function InfoCard({ title, size, link }: InfoCardProps) {
return (
<div className="w-full">
<div className="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
<div className="flex flex-col justify-around dark:text-white w-full text-sm">
<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>
@@ -47,15 +47,15 @@ interface StreakCardProps {
function StreakCard({ window, currentStreak, currentStreakStartDate, currentStreakEndDate, maxStreak, maxStreakStartDate, maxStreakEndDate }: StreakCardProps) {
return (
<div className="w-full">
<div className="relative w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded">
<p className="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
<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">
{window === 'WEEK' ? 'Weekly Read Streak' : 'Daily Read Streak'}
</p>
<div className="flex items-end my-6 space-x-2">
<div className="my-6 flex items-end space-x-2">
<p className="text-5xl font-bold text-black dark:text-white">{currentStreak}</p>
</div>
<div className="dark:text-white">
<div className="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200">
<div className="mb-2 flex items-center justify-between border-b border-gray-200 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">
@@ -64,7 +64,7 @@ function StreakCard({ window, currentStreak, currentStreakStartDate, currentStre
</div>
<div className="flex items-end font-bold">{currentStreak}</div>
</div>
<div className="flex items-center justify-between pb-2 mb-2 text-sm">
<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">
@@ -87,13 +87,13 @@ interface LeaderboardCardProps {
function LeaderboardCard({ name, data }: LeaderboardCardProps) {
return (
<div className="w-full">
<div className="flex flex-col justify-between h-full w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded">
<div className="flex size-full flex-col justify-between rounded bg-white px-4 py-6 shadow-lg dark:bg-gray-700">
<div>
<div className="flex justify-between">
<p className="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
<p className="w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
{name} Leaderboard
</p>
<div className="flex gap-2 text-xs text-gray-400 items-center">
<div className="flex items-center gap-2 text-xs text-gray-400">
<span className="cursor-pointer hover:text-black dark:hover:text-white">all</span>
<span className="cursor-pointer hover:text-black dark:hover:text-white">year</span>
<span className="cursor-pointer hover:text-black dark:hover:text-white">month</span>
@@ -103,7 +103,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
</div>
{/* All time data */}
<div className="flex items-end my-6 space-x-2">
<div className="my-6 flex items-end space-x-2">
{data.all.length === 0 ? (
<p className="text-5xl font-bold text-black dark:text-white">N/A</p>
) : (
@@ -115,7 +115,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
{data.all.slice(0, 3).map((item: any, index: number) => (
<div
key={index}
className={`flex items-center justify-between pt-2 pb-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-gray-200' : ''}`}
>
<div>
<p>{item.user_id}</p>
@@ -132,7 +132,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
function GraphVisualization({ data }: { data: GraphDataPoint[] }) {
if (!data || data.length === 0) {
return (
<div className="relative h-24 flex items-center justify-center bg-gray-100 dark:bg-gray-600">
<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>
);
@@ -142,14 +142,14 @@ function GraphVisualization({ data }: { data: GraphDataPoint[] }) {
const maxMinutes = Math.max(...data.map(d => d.minutes_read), 1);
return (
<div className="relative h-24 flex items-end justify-between p-2 bg-gray-100 dark:bg-gray-600">
<div className="relative flex h-24 items-end justify-between bg-gray-100 p-2 dark:bg-gray-600">
{data.map((point, i) => (
<div
key={i}
className="flex-1 mx-0.5 bg-blue-500 hover:bg-blue-600 transition-colors relative group"
className="group relative mx-0.5 flex-1 bg-blue-500 transition-colors hover:bg-blue-600"
style={{ height: `${(point.minutes_read / maxMinutes) * 100}%` }}
>
<div className="absolute bottom-full mb-1 left-0 w-full text-xs text-center text-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 pointer-events-none">
<div className="pointer-events-none absolute bottom-full left-0 mb-1 w-full text-center text-xs text-gray-600 opacity-0 group-hover:opacity-100 dark:text-gray-300">
{point.minutes_read} min
</div>
</div>
@@ -176,8 +176,8 @@ export default function HomePage() {
<div className="flex flex-col gap-4">
{/* Daily Read Totals Graph */}
<div className="w-full">
<div className="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
<p className="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
<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">
Daily Read Totals
</p>
<GraphVisualization data={graphData || []} />
@@ -244,13 +244,13 @@ export default function HomePage() {
{docs?.slice(0, 6).map((doc: any) => (
<div
key={doc.id}
className="flex flex-col gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<h3 className="font-medium text-lg">{doc.title}</h3>
<h3 className="text-lg font-medium">{doc.title}</h3>
<p className="text-sm">{doc.author}</p>
<Link
to={`/documents/${doc.id}`}
className="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700"
className="rounded bg-blue-700 py-1 text-center text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700"
>
View Document
</Link>

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

@@ -34,34 +34,34 @@ export default function LoginPage() {
};
return (
<div className="bg-gray-100 dark:bg-gray-800 dark:text-white min-h-screen">
<div className="flex flex-wrap w-full">
<div className="flex flex-col w-full md:w-1/2">
<div className="min-h-screen bg-gray-100 dark:bg-gray-800 dark:text-white">
<div className="flex w-full flex-wrap">
<div className="flex w-full flex-col md:w-1/2">
<div
className="flex flex-col justify-center px-8 pt-8 my-auto md:justify-start md:pt-0 md:px-24 lg:px-32"
className="my-auto flex flex-col justify-center px-8 pt-8 md:justify-start md:px-24 md:pt-0 lg:px-32"
>
<p className="text-3xl text-center">Welcome.</p>
<p className="text-center text-3xl">Welcome.</p>
<form className="flex flex-col pt-3 md:pt-8" onSubmit={handleSubmit}>
<div className="flex flex-col pt-4">
<div className="flex relative">
<div className="relative flex">
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
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"
placeholder="Username"
required
disabled={isLoading}
/>
</div>
</div>
<div className="flex flex-col pt-4 mb-12">
<div className="flex relative">
<div className="mb-12 flex flex-col pt-4">
<div className="relative flex">
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
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"
placeholder="Password"
required
disabled={isLoading}
@@ -72,12 +72,12 @@ export default function LoginPage() {
variant="secondary"
type="submit"
disabled={isLoading}
className="w-full px-4 py-2 text-base font-semibold text-center transition duration-200 ease-in focus:outline-none focus:ring-2 disabled:opacity-50"
className="w-full px-4 py-2 text-center text-base font-semibold transition duration-200 ease-in focus:outline-none focus:ring-2 disabled:opacity-50"
>
{isLoading ? 'Logging in...' : 'Login'}
</Button>
</form>
<div className="pt-12 pb-12 text-center">
<div className="py-12 text-center">
<p className="mt-4">
<a href="/local" className="font-semibold underline">
Offline / Local Mode
@@ -86,8 +86,8 @@ export default function LoginPage() {
</div>
</div>
</div>
<div className="hidden image-fader w-1/2 shadow-2xl h-screen relative md:block">
<div className="w-full h-screen object-cover ease-in-out top-0 left-0 bg-gray-300 flex items-center justify-center">
<div className="image-fader 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>
</div>

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

@@ -13,7 +13,7 @@ export default function ProgressPage() {
render: (_: any, row: any) => (
<Link
to={`/documents/${row.document_id}`}
className="text-blue-600 dark:text-blue-400 hover:underline"
className="text-blue-600 hover:underline dark:text-blue-400"
>
{row.author || 'Unknown'} - {row.title || 'Unknown'}
</Link>

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

@@ -17,17 +17,17 @@ export default function SearchPage() {
};
return (
<div className="w-full flex flex-col md:flex-row gap-4">
<div className="flex flex-col gap-4 grow">
<div className="flex w-full flex-col gap-4 md:flex-row">
<div className="flex grow flex-col gap-4">
{/* Search Form */}
<div
className="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
>
<form className="flex gap-4 flex-col lg:flex-row" onSubmit={handleSubmit}>
<div className="flex flex-col w-full grow">
<div className="flex relative">
<form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
<div className="flex w-full grow flex-col">
<div className="relative flex">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Search size={15} />
</span>
@@ -35,21 +35,21 @@ export default function SearchPage() {
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
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"
placeholder="Query"
/>
</div>
</div>
<div className="flex relative min-w-[12em]">
<div className="relative flex min-w-[12em]">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Book size={15} />
</span>
<select
value={source}
onChange={(e) => setSource(e.target.value as GetSearchSource)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
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"
>
<option value="LibGen">Library Genesis</option>
<option value="Annas Archive">Annas Archive</option>
@@ -64,35 +64,35 @@ export default function SearchPage() {
{/* Search Results Table */}
<div className="inline-block min-w-full overflow-hidden rounded shadow">
<table
className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm md:text-sm"
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">
<tr>
<th
className="w-12 p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
></th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Document
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Series
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Type
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Size
</th>
<th
className="p-3 hidden md:block font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="hidden border-b border-gray-200 p-3 text-left font-normal uppercase md:block dark:border-gray-800"
>
Date
</th>
@@ -101,18 +101,18 @@ export default function SearchPage() {
<tbody className="text-black dark:text-white">
{isLoading && (
<tr>
<td className="text-center p-3" colSpan={6}>Loading...</td>
<td className="p-3 text-center" colSpan={6}>Loading...</td>
</tr>
)}
{!isLoading && !results && (
<tr>
<td className="text-center p-3" colSpan={6}>No Results</td>
<td className="p-3 text-center" colSpan={6}>No Results</td>
</tr>
)}
{!isLoading && results && results.map((item: any) => (
<tr key={item.id}>
<td
className="p-3 border-b border-gray-200 text-gray-500 dark:text-gray-500"
className="border-b border-gray-200 p-3 text-gray-500 dark:text-gray-500"
>
<button
className="hover:text-purple-600"
@@ -121,19 +121,19 @@ export default function SearchPage() {
<Download size={15} />
</button>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
{item.author || 'N/A'} - {item.title || 'N/A'}
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{item.series || 'N/A'}</p>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{item.file_type || 'N/A'}</p>
</td>
<td className="p-3 border-b border-gray-200">
<td className="border-b border-gray-200 p-3">
<p>{item.file_size || 'N/A'}</p>
</td>
<td className="hidden md:table-cell p-3 border-b border-gray-200">
<td className="hidden border-b border-gray-200 p-3 md:table-cell">
<p>{item.upload_date || 'N/A'}</p>
</td>
</tr>

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

@@ -60,37 +60,37 @@ export default function SettingsPage() {
if (isLoading) {
return (
<div className="w-full flex flex-col md:flex-row gap-4">
<div className="flex w-full flex-col gap-4 md:flex-row">
<div>
<div className="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700">
<div className="w-16 h-16 bg-gray-200 dark:bg-gray-600 rounded-full mb-4" />
<div className="w-32 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="flex flex-col items-center rounded bg-white p-4 shadow-lg md:w-60 lg:w-80 dark:bg-gray-700">
<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>
</div>
<div className="flex flex-col gap-4 grow">
<div className="flex flex-col gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700">
<div className="w-48 h-6 bg-gray-200 dark:bg-gray-600 rounded mb-4" />
<div className="flex grow flex-col gap-4">
<div className="flex flex-col gap-2 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
<div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
<div className="flex gap-4">
<div className="flex-1 h-12 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="flex-1 h-12 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="w-40 h-10 bg-gray-200 dark:bg-gray-600 rounded" />
<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>
</div>
<div className="flex flex-col gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700">
<div className="w-48 h-6 bg-gray-200 dark:bg-gray-600 rounded mb-4" />
<div className="flex flex-col gap-2 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
<div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
<div className="flex gap-4">
<div className="flex-1 h-12 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="w-40 h-10 bg-gray-200 dark:bg-gray-600 rounded" />
<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>
</div>
<div className="flex flex-col p-4 rounded shadow-lg bg-white dark:bg-gray-700">
<div className="w-24 h-6 bg-gray-200 dark:bg-gray-600 rounded mb-4" />
<div className="flex gap-4 mb-4">
<div className="flex-1 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="flex-1 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="flex-1 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="flex flex-col rounded bg-white p-4 shadow-lg dark:bg-gray-700">
<div className="mb-4 h-6 w-24 rounded bg-gray-200 dark:bg-gray-600" />
<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>
<div className="flex-1 h-32 bg-gray-200 dark:bg-gray-600 rounded" />
<div className="h-32 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
</div>
</div>
</div>
@@ -98,31 +98,31 @@ export default function SettingsPage() {
}
return (
<div className="w-full flex flex-col md:flex-row gap-4">
<div className="flex w-full flex-col gap-4 md:flex-row">
{/* User Profile Card */}
<div>
<div
className="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
className="flex flex-col items-center rounded bg-white p-4 text-gray-500 shadow-lg md:w-60 lg:w-80 dark:bg-gray-700 dark:text-white"
>
<User size={60} />
<p className="text-lg">{settingsData?.data.user.username || "N/A"}</p>
</div>
</div>
<div className="flex flex-col gap-4 grow">
<div className="flex grow flex-col gap-4">
{/* Change Password Form */}
<div
className="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
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 mb-2">Change Password</p>
<p className="mb-2 text-lg font-semibold">Change Password</p>
<form
className="flex gap-4 flex-col lg:flex-row"
className="flex flex-col gap-4 lg:flex-row"
onSubmit={handlePasswordSubmit}
>
<div className="flex flex-col grow">
<div className="flex relative">
<div className="flex grow flex-col">
<div className="relative flex">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Lock size={15} />
</span>
@@ -130,15 +130,15 @@ export default function SettingsPage() {
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
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"
placeholder="Password"
/>
</div>
</div>
<div className="flex flex-col grow">
<div className="flex relative">
<div className="flex grow flex-col">
<div className="relative flex">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Lock size={15} />
</span>
@@ -146,7 +146,7 @@ export default function SettingsPage() {
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
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"
placeholder="New Password"
/>
</div>
@@ -159,23 +159,23 @@ export default function SettingsPage() {
{/* Change Timezone Form */}
<div
className="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
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 mb-2">Change Timezone</p>
<p className="mb-2 text-lg font-semibold">Change Timezone</p>
<form
className="flex gap-4 flex-col lg:flex-row"
className="flex flex-col gap-4 lg:flex-row"
onSubmit={handleTimezoneSubmit}
>
<div className="flex relative grow">
<div className="relative flex grow">
<span
className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
>
<Clock size={15} />
</span>
<select
value={timezone || 'UTC'}
onChange={(e) => setTimezone(e.target.value)}
className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
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"
>
<option value="UTC">UTC</option>
<option value="America/New_York">America/New_York</option>
@@ -197,24 +197,24 @@ export default function SettingsPage() {
{/* Devices Table */}
<div
className="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
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">Devices</p>
<table className="min-w-full bg-white dark:bg-gray-700 text-sm">
<table className="min-w-full bg-white text-sm dark:bg-gray-700">
<thead className="text-gray-800 dark:text-gray-400">
<tr>
<th
className="p-3 pl-0 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 pl-0 text-left font-normal uppercase dark:border-gray-800"
>
Name
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Last Sync
</th>
<th
className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
>
Created
</th>
@@ -223,7 +223,7 @@ export default function SettingsPage() {
<tbody className="text-black dark:text-white">
{!settingsData?.data.devices || settingsData.data.devices.length === 0 ? (
<tr>
<td className="text-center p-3" colSpan={3}>No Results</td>
<td className="p-3 text-center" colSpan={3}>No Results</td>
</tr>
) : (
settingsData.data.devices.map((device: any) => (