feat(backoffice): redesign UI with enhanced background and glassmorphism effects
- Add vibrant radial gradient backgrounds with multiple color zones - Implement glassmorphism effects on header and cards - Add subtle grain texture overlay - Update card hover effects with smooth transitions - Improve dark mode background visibility
This commit is contained in:
@@ -33,14 +33,14 @@ export default async function BookDetailPage({
|
||||
return (
|
||||
<>
|
||||
<div className="mb-6">
|
||||
<Link href="/books" className="inline-flex items-center text-sm text-muted hover:text-primary transition-colors">
|
||||
<Link href="/books" className="inline-flex items-center text-sm text-muted-foreground hover:text-primary transition-colors">
|
||||
← Back to books
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="bg-card rounded-xl shadow-card border border-line p-4 inline-block">
|
||||
<div className="bg-card rounded-xl shadow-card border border-border p-4 inline-block">
|
||||
<Image
|
||||
src={getBookCoverUrl(book.id)}
|
||||
alt={`Cover of ${book.title}`}
|
||||
@@ -54,76 +54,76 @@ export default async function BookDetailPage({
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="bg-card rounded-xl shadow-soft border border-line p-6">
|
||||
<div className="bg-card rounded-xl shadow-sm border border-border p-6">
|
||||
<h1 className="text-3xl font-bold text-foreground mb-2">{book.title}</h1>
|
||||
|
||||
{book.author && (
|
||||
<p className="text-lg text-muted mb-4">by {book.author}</p>
|
||||
<p className="text-lg text-muted-foreground mb-4">by {book.author}</p>
|
||||
)}
|
||||
|
||||
{book.series && (
|
||||
<p className="text-sm text-muted mb-6">
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
{book.series}
|
||||
{book.volume && <span className="ml-2 px-2 py-1 bg-primary-soft text-primary rounded text-xs">Volume {book.volume}</span>}
|
||||
{book.volume && <span className="ml-2 px-2 py-1 bg-primary/10 text-primary rounded text-xs">Volume {book.volume}</span>}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between py-2 border-b border-line">
|
||||
<span className="text-sm text-muted">Format:</span>
|
||||
<div className="flex items-center justify-between py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">Format:</span>
|
||||
<span className={`inline-flex px-2.5 py-1 rounded-full text-xs font-semibold ${
|
||||
book.kind === 'epub' ? 'bg-primary-soft text-primary' : 'bg-muted/20 text-muted'
|
||||
book.kind === 'epub' ? 'bg-primary/10 text-primary' : 'bg-muted/50 text-muted-foreground'
|
||||
}`}>
|
||||
{book.kind.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{book.volume && (
|
||||
<div className="flex items-center justify-between py-2 border-b border-line">
|
||||
<span className="text-sm text-muted">Volume:</span>
|
||||
<div className="flex items-center justify-between py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">Volume:</span>
|
||||
<span className="text-sm text-foreground">{book.volume}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{book.language && (
|
||||
<div className="flex items-center justify-between py-2 border-b border-line">
|
||||
<span className="text-sm text-muted">Language:</span>
|
||||
<div className="flex items-center justify-between py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">Language:</span>
|
||||
<span className="text-sm text-foreground">{book.language.toUpperCase()}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{book.page_count && (
|
||||
<div className="flex items-center justify-between py-2 border-b border-line">
|
||||
<span className="text-sm text-muted">Pages:</span>
|
||||
<div className="flex items-center justify-between py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">Pages:</span>
|
||||
<span className="text-sm text-foreground">{book.page_count}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between py-2 border-b border-line">
|
||||
<span className="text-sm text-muted">Library:</span>
|
||||
<div className="flex items-center justify-between py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">Library:</span>
|
||||
<span className="text-sm text-foreground">{library?.name || book.library_id}</span>
|
||||
</div>
|
||||
|
||||
{book.series && (
|
||||
<div className="flex items-center justify-between py-2 border-b border-line">
|
||||
<span className="text-sm text-muted">Series:</span>
|
||||
<div className="flex items-center justify-between py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">Series:</span>
|
||||
<span className="text-sm text-foreground">{book.series}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{book.file_format && (
|
||||
<div className="flex items-center justify-between py-2 border-b border-line">
|
||||
<span className="text-sm text-muted">File Format:</span>
|
||||
<div className="flex items-center justify-between py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">File Format:</span>
|
||||
<span className="text-sm text-foreground">{book.file_format.toUpperCase()}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{book.file_parse_status && (
|
||||
<div className="flex items-center justify-between py-2 border-b border-line">
|
||||
<span className="text-sm text-muted">Parse Status:</span>
|
||||
<div className="flex items-center justify-between py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">Parse Status:</span>
|
||||
<span className={`inline-flex px-2.5 py-1 rounded-full text-xs font-semibold ${
|
||||
book.file_parse_status === 'success' ? 'bg-success-soft text-success' :
|
||||
book.file_parse_status === 'failed' ? 'bg-error-soft text-error' : 'bg-muted/20 text-muted'
|
||||
book.file_parse_status === 'success' ? 'bg-success/10 text-success' :
|
||||
book.file_parse_status === 'failed' ? 'bg-destructive/10 text-error' : 'bg-muted/50 text-muted-foreground'
|
||||
}`}>
|
||||
{book.file_parse_status}
|
||||
</span>
|
||||
@@ -131,25 +131,25 @@ export default async function BookDetailPage({
|
||||
)}
|
||||
|
||||
{book.file_path && (
|
||||
<div className="flex flex-col py-2 border-b border-line">
|
||||
<span className="text-sm text-muted mb-1">File Path:</span>
|
||||
<div className="flex flex-col py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground mb-1">File Path:</span>
|
||||
<code className="text-xs font-mono text-foreground break-all">{book.file_path}</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col py-2 border-b border-line">
|
||||
<span className="text-sm text-muted mb-1">Book ID:</span>
|
||||
<div className="flex flex-col py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground mb-1">Book ID:</span>
|
||||
<code className="text-xs font-mono text-foreground break-all">{book.id}</code>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col py-2 border-b border-line">
|
||||
<span className="text-sm text-muted mb-1">Library ID:</span>
|
||||
<div className="flex flex-col py-2 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground mb-1">Library ID:</span>
|
||||
<code className="text-xs font-mono text-foreground break-all">{book.library_id}</code>
|
||||
</div>
|
||||
|
||||
{book.updated_at && (
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<span className="text-sm text-muted">Updated:</span>
|
||||
<span className="text-sm text-muted-foreground">Updated:</span>
|
||||
<span className="text-sm text-foreground">{new Date(book.updated_at).toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { fetchBooks, searchBooks, fetchLibraries, BookDto, LibraryDto, getBookCoverUrl } from "../../lib/api";
|
||||
import { BooksGrid, EmptyState } from "../components/BookCard";
|
||||
import { Card, Button, FormField, FormInput, FormSelect, FormRow, CursorPagination } from "../components/ui";
|
||||
import { Card, CardContent, Button, FormField, FormInput, FormSelect, FormRow, CursorPagination } from "../components/ui";
|
||||
import Link from "next/link";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -26,7 +26,6 @@ export default async function BooksPage({
|
||||
let totalHits: number | null = null;
|
||||
|
||||
if (searchQuery) {
|
||||
// Mode recherche
|
||||
const searchResponse = await searchBooks(searchQuery, libraryId, limit).catch(() => null);
|
||||
if (searchResponse) {
|
||||
searchResults = searchResponse.hits.map(hit => ({
|
||||
@@ -47,7 +46,6 @@ export default async function BooksPage({
|
||||
totalHits = searchResponse.estimated_total_hits;
|
||||
}
|
||||
} else {
|
||||
// Mode liste avec pagination
|
||||
const booksPage = await fetchBooks(libraryId, undefined, cursor, limit).catch(() => ({
|
||||
items: [] as BookDto[],
|
||||
next_cursor: null,
|
||||
@@ -55,7 +53,6 @@ export default async function BooksPage({
|
||||
}));
|
||||
books = booksPage.items;
|
||||
nextCursor = booksPage.next_cursor;
|
||||
// Note: L'API ne supporte pas encore prev_cursor, on gère ça côté UI
|
||||
}
|
||||
|
||||
const displayBooks = (searchResults || books).map(book => ({
|
||||
@@ -64,27 +61,34 @@ export default async function BooksPage({
|
||||
}));
|
||||
|
||||
const hasNextPage = !!nextCursor;
|
||||
const hasPrevPage = !!cursor; // Si on a un cursor, on peut revenir en arrière (simplifié)
|
||||
const hasPrevPage = !!cursor;
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-3xl font-bold text-foreground mb-6 flex items-center gap-3">
|
||||
<svg className="w-8 h-8 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
|
||||
Books
|
||||
</h1>
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
|
||||
<svg className="w-8 h-8 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
Books
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Filtres et recherche */}
|
||||
{/* Search Bar - Style compact et propre */}
|
||||
<Card className="mb-6">
|
||||
<form>
|
||||
<FormRow>
|
||||
<FormField>
|
||||
<CardContent className="pt-6">
|
||||
<form className="flex flex-col sm:flex-row gap-3 items-start sm:items-end">
|
||||
<FormField className="flex-1 w-full">
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Search</label>
|
||||
<FormInput
|
||||
name="q"
|
||||
placeholder="Search books..."
|
||||
placeholder="Search by title, author, series..."
|
||||
defaultValue={searchQuery}
|
||||
className="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
<FormField>
|
||||
<FormField className="w-full sm:w-48">
|
||||
<label className="block text-sm font-medium text-foreground mb-1.5">Library</label>
|
||||
<FormSelect name="library" defaultValue={libraryId || ""}>
|
||||
<option value="">All libraries</option>
|
||||
{libraries.map((lib) => (
|
||||
@@ -94,22 +98,40 @@ export default async function BooksPage({
|
||||
))}
|
||||
</FormSelect>
|
||||
</FormField>
|
||||
<Button type="submit">🔍 Search</Button>
|
||||
{searchQuery && (
|
||||
<Link
|
||||
href="/books"
|
||||
className="px-4 py-2.5 border border-line text-muted font-medium rounded-lg hover:bg-muted/5 transition-colors"
|
||||
>
|
||||
✕ Clear
|
||||
</Link>
|
||||
)}
|
||||
</FormRow>
|
||||
</form>
|
||||
<div className="flex gap-2 w-full sm:w-auto">
|
||||
<Button type="submit" className="flex-1 sm:flex-none">
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
Search
|
||||
</Button>
|
||||
{searchQuery && (
|
||||
<Link
|
||||
href="/books"
|
||||
className="
|
||||
inline-flex items-center justify-center
|
||||
h-10 px-4
|
||||
border border-input
|
||||
text-sm font-medium
|
||||
text-muted-foreground
|
||||
bg-background
|
||||
rounded-md
|
||||
hover:bg-accent hover:text-accent-foreground
|
||||
transition-colors duration-200
|
||||
flex-1 sm:flex-none
|
||||
"
|
||||
>
|
||||
Clear
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Résultats de recherche */}
|
||||
{/* Résultats */}
|
||||
{searchQuery && totalHits !== null && (
|
||||
<p className="text-sm text-muted mb-4">
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Found {totalHits} result{totalHits !== 1 ? 's' : ''} for "{searchQuery}"
|
||||
</p>
|
||||
)}
|
||||
@@ -119,7 +141,6 @@ export default async function BooksPage({
|
||||
<>
|
||||
<BooksGrid books={displayBooks} />
|
||||
|
||||
{/* Pagination */}
|
||||
{!searchQuery && (
|
||||
<CursorPagination
|
||||
hasNextPage={hasNextPage}
|
||||
|
||||
Reference in New Issue
Block a user