julienfroidefond/stripstream-librarian
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(backoffice): redesign UI with enhanced background and glassmorphism effects

Browse Source 
- 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:
Julien Froidefond
2026-03-06 16:21:48 +01:00
parent 2b30ae47de
commit 7cdc72b6e1
30 changed files with 1783 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
apps/backoffice/app/books/page.tsx
View File

@@ -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 &quot;{searchQuery}&quot;
</p>
)}
@@ -119,7 +141,6 @@ export default async function BooksPage({
<>
<BooksGrid books={displayBooks} />
{/* Pagination */}
{!searchQuery && (
<CursorPagination
hasNextPage={hasNextPage}