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

apps/backoffice/app/libraries/[id]/books/page.tsx

@@ -1,7 +1,7 @@
 import { fetchLibraries, fetchBooks, getBookCoverUrl, LibraryDto, BookDto } from "../../../../lib/api";
 import { BooksGrid, EmptyState } from "../../../components/BookCard";
-import { Card, Badge, Button, CursorPagination } from "../../../components/ui";
-import Link from "next/link";
+import { LibrarySubPageHeader } from "../../../components/LibrarySubPageHeader";
+import { CursorPagination } from "../../../components/ui";
 import { notFound } from "next/navigation";
 
 export const dynamic = "force-dynamic";
@@ -42,38 +42,22 @@ export default async function LibraryBooksPage({
   const hasPrevPage = !!cursor;
 
   return (
-    <>
-      <div className="mb-6">
-        <Link href="/libraries" className="text-sm text-muted hover:text-primary transition-colors">← Back to libraries</Link>
-      </div>
-
-      <h1 className="text-3xl font-bold text-foreground flex items-center gap-3 mb-6">
-        <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>
-        {library.name}
-      </h1>
-      
-      <Card className="mb-6">
-        <div className="flex flex-wrap items-center gap-3 text-sm">
-          <code className="text-xs font-mono text-muted bg-muted/10 px-2 py-1 rounded">{library.root_path}</code>
-          <span className="text-muted">|</span>
-          <span className="text-foreground">{library.book_count} book{library.book_count !== 1 ? 's' : ''}</span>
-          <span className="text-muted">|</span>
-          <Badge variant={library.enabled ? "success" : "muted"}>
-            {library.enabled ? "Enabled" : "Disabled"}
-          </Badge>
-        </div>
-      </Card>
-
-      <div className="flex items-center gap-4 mb-6">
-        <h2 className="text-xl font-semibold text-foreground">
-          {series ? `Books in "${seriesDisplayName}"` : "All Books"}
-        </h2>
-        {series && (
-          <Link href={`/libraries/${id}/books`} className="text-sm text-primary hover:text-primary/80">
-            View all
-          </Link>
-        )}
-      </div>
+    <div className="space-y-6">
+      <LibrarySubPageHeader
+        library={library}
+        title={series ? `Books in "${seriesDisplayName}"` : "All Books"}
+        icon={
+          <svg className="w-8 h-8" 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>
+        }
+        iconColor="text-success"
+        filterInfo={series ? {
+          label: `Showing books from series "${seriesDisplayName}"`,
+          clearHref: `/libraries/${id}/books`,
+          clearLabel: "View all books"
+        } : undefined}
+      />
 
       {books.length > 0 ? (
         <>
@@ -90,6 +74,6 @@ export default async function LibraryBooksPage({
       ) : (
         <EmptyState message={series ? `No books in series "${seriesDisplayName}"` : "No books in this library yet"} />
       )}
-    </>
+    </div>
   );
 }

apps/backoffice/app/libraries/[id]/series/page.tsx

@@ -2,7 +2,7 @@ import { fetchLibraries, fetchSeries, getBookCoverUrl, LibraryDto, SeriesDto } f
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { Card, Badge } from "../../../components/ui";
+import { LibrarySubPageHeader } from "../../../components/LibrarySubPageHeader";
 
 export const dynamic = "force-dynamic";
 
@@ -23,29 +23,17 @@ export default async function LibrarySeriesPage({
   }
 
   return (
-    <>
-      <div className="mb-6">
-        <Link href="/libraries" className="text-sm text-muted hover:text-primary transition-colors">← Back to libraries</Link>
-      </div>
-
-      <h1 className="text-3xl font-bold text-foreground flex items-center gap-3 mb-6">
-        <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
-        {library.name}
-      </h1>
-      
-      <Card className="mb-6">
-        <div className="flex flex-wrap items-center gap-3 text-sm">
-          <code className="text-xs font-mono text-muted bg-muted/10 px-2 py-1 rounded">{library.root_path}</code>
-          <span className="text-muted">|</span>
-          <span className="text-foreground">{library.book_count} book{library.book_count !== 1 ? 's' : ''}</span>
-          <span className="text-muted">|</span>
-          <Badge variant={library.enabled ? "success" : "muted"}>
-            {library.enabled ? "Enabled" : "Disabled"}
-          </Badge>
-        </div>
-      </Card>
-
-      <h2 className="text-xl font-semibold text-foreground mb-6">Series ({series.length})</h2>
+    <div className="space-y-6">
+      <LibrarySubPageHeader
+        library={library}
+        title={`Series (${series.length})`}
+        icon={
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+          </svg>
+        }
+        iconColor="text-primary"
+      />
 
       {series.length > 0 ? (
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
@@ -55,8 +43,8 @@ export default async function LibrarySeriesPage({
               href={`/libraries/${id}/books?series=${encodeURIComponent(s.name)}`}
               className="group"
             >
-              <div className="bg-card rounded-xl shadow-soft border border-line overflow-hidden hover:shadow-card transition-shadow">
-                <div className="aspect-[2/3] relative bg-muted/10">
+              <div className="bg-card rounded-xl shadow-sm border border-border/60 overflow-hidden hover:shadow-md transition-shadow duration-200">
+                <div className="aspect-[2/3] relative bg-muted/50">
                   <Image
                     src={getBookCoverUrl(s.first_book_id)}
                     alt={`Cover of ${s.name}`}
@@ -69,7 +57,7 @@ export default async function LibrarySeriesPage({
                   <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
                     {s.name === "unclassified" ? "Unclassified" : s.name}
                   </h3>
-                  <p className="text-xs text-muted mt-1">
+                  <p className="text-xs text-muted-foreground mt-1">
                     {s.book_count} book{s.book_count !== 1 ? 's' : ''}
                   </p>
                 </div>
@@ -78,10 +66,10 @@ export default async function LibrarySeriesPage({
           ))}
         </div>
       ) : (
-        <div className="text-center py-12 text-muted">
+        <div className="text-center py-12 text-muted-foreground">
           <p>No series found in this library</p>
         </div>
       )}
-    </>
+    </div>
   );
 }

apps/backoffice/app/libraries/page.tsx

@@ -2,7 +2,10 @@ import { revalidatePath } from "next/cache";
 import Link from "next/link";
 import { listFolders, createLibrary, deleteLibrary, fetchLibraries, fetchSeries, scanLibrary, LibraryDto, FolderItem } from "../../lib/api";
 import { LibraryActions } from "../components/LibraryActions";
-import { Card, CardHeader, Button, Badge, FormField, FormInput, FormSelect, FormRow } from "../components/ui";
+import { 
+  Card, CardHeader, CardTitle, CardDescription, CardContent,
+  Button, Badge, FormField, FormInput, FormSelect, FormRow 
+} from "../components/ui";
 
 export const dynamic = "force-dynamic";
 
@@ -73,105 +76,130 @@ export default async function LibrariesPage() {
 
   return (
     <>
-      <h1 className="text-3xl font-bold text-foreground mb-6 flex items-center gap-3">
-        <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
-        Libraries
-      </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-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+          </svg>
+          Libraries
+        </h1>
+      </div>
       
       {/* Add Library Form */}
       <Card className="mb-6">
-        <CardHeader title="Add New Library" />
-        <form action={addLibrary}>
-          <FormRow>
-            <FormField>
-              <FormInput name="name" placeholder="Library name" required />
-            </FormField>
-            <FormField>
-              <FormSelect name="root_path" required defaultValue="">
-                <option value="" disabled>Select folder...</option>
-                {folders.map((folder) => (
-                  <option key={folder.path} value={folder.path}>
-                    {folder.name}
-                  </option>
-                ))}
-              </FormSelect>
-            </FormField>
-            <Button type="submit">➕ Add Library</Button>
-          </FormRow>
-        </form>
+        <CardHeader>
+          <CardTitle>Add New Library</CardTitle>
+          <CardDescription>Create a new library from an existing folder</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form action={addLibrary}>
+            <FormRow>
+              <FormField className="flex-1 min-w-48">
+                <FormInput name="name" placeholder="Library name" required />
+              </FormField>
+              <FormField className="flex-1 min-w-48">
+                <FormSelect name="root_path" required defaultValue="">
+                  <option value="" disabled>Select folder...</option>
+                  {folders.map((folder) => (
+                    <option key={folder.path} value={folder.path}>
+                      {folder.name}
+                    </option>
+                  ))}
+                </FormSelect>
+              </FormField>
+              <Button type="submit">Add Library</Button>
+            </FormRow>
+          </form>
+        </CardContent>
       </Card>
 
       {/* Libraries Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {libraries.map((lib) => {
           const seriesCount = seriesCountMap.get(lib.id) || 0;
           return (
             <Card key={lib.id} className="flex flex-col">
-              {/* Header with settings */}
-              <div className="flex items-start justify-between mb-3">
-                <div>
-                  <h3 className="text-lg font-semibold text-foreground">{lib.name}</h3>
-                  {!lib.enabled && <Badge variant="muted" className="mt-1">Disabled</Badge>}
+              <CardHeader className="pb-2">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <CardTitle className="text-lg">{lib.name}</CardTitle>
+                    {!lib.enabled && <Badge variant="muted" className="mt-1">Disabled</Badge>}
+                  </div>
+                  <LibraryActions
+                    libraryId={lib.id}
+                    monitorEnabled={lib.monitor_enabled}
+                    scanMode={lib.scan_mode}
+                    watcherEnabled={lib.watcher_enabled}
+                  />
                 </div>
-                <LibraryActions
-                  libraryId={lib.id}
-                  monitorEnabled={lib.monitor_enabled}
-                  scanMode={lib.scan_mode}
-                  watcherEnabled={lib.watcher_enabled}
-                />
-              </div>
+              </CardHeader>
+              <CardContent className="flex-1 pt-0">
+                {/* Path */}
+                <code className="text-xs font-mono text-muted-foreground mb-4 break-all block">{lib.root_path}</code>
 
-              {/* Path */}
-              <code className="text-xs font-mono text-muted mb-4 break-all">{lib.root_path}</code>
+                {/* Stats */}
+                <div className="grid grid-cols-2 gap-3 mb-4">
+                  <Link 
+                    href={`/libraries/${lib.id}/books`} 
+                    className="text-center p-3 bg-muted/50 rounded-lg hover:bg-accent transition-colors duration-200"
+                  >
+                    <span className="block text-2xl font-bold text-primary">{lib.book_count}</span>
+                    <span className="text-xs text-muted-foreground">Books</span>
+                  </Link>
+                  <Link 
+                    href={`/libraries/${lib.id}/series`} 
+                    className="text-center p-3 bg-muted/50 rounded-lg hover:bg-accent transition-colors duration-200"
+                  >
+                    <span className="block text-2xl font-bold text-foreground">{seriesCount}</span>
+                    <span className="text-xs text-muted-foreground">Series</span>
+                  </Link>
+                </div>
 
-              {/* Stats */}
-              <div className="grid grid-cols-2 gap-3 mb-4">
-                <Link href={`/libraries/${lib.id}/books`} className="text-center p-3 bg-muted/5 rounded-lg hover:bg-muted/10 transition-colors">
-                  <span className="block text-2xl font-bold text-primary">{lib.book_count}</span>
-                  <span className="text-xs text-muted">Books</span>
-                </Link>
-                <Link href={`/libraries/${lib.id}/series`} className="text-center p-3 bg-muted/5 rounded-lg hover:bg-muted/10 transition-colors">
-                  <span className="block text-2xl font-bold text-foreground">{seriesCount}</span>
-                  <span className="text-xs text-muted">Series</span>
-                </Link>
-              </div>
-
-              {/* Status */}
-              <div className="flex items-center gap-3 mb-4 text-sm">
-                <span className={`flex items-center gap-1 ${lib.monitor_enabled ? 'text-success' : 'text-muted'}`}>
-                  {lib.monitor_enabled ? '●' : '○'} {lib.monitor_enabled ? 'Auto' : 'Manual'}
-                </span>
-                {lib.watcher_enabled && (
-                  <span className="text-warning" title="File watcher active">⚡</span>
-                )}
-                {lib.monitor_enabled && lib.next_scan_at && (
-                  <span className="text-xs text-muted ml-auto">
-                    Next: {formatNextScan(lib.next_scan_at)}
+                {/* Status */}
+                <div className="flex items-center gap-3 mb-4 text-sm">
+                  <span className={`flex items-center gap-1 ${lib.monitor_enabled ? 'text-success' : 'text-muted-foreground'}`}>
+                    {lib.monitor_enabled ? '●' : '○'} {lib.monitor_enabled ? 'Auto' : 'Manual'}
                   </span>
-                )}
-              </div>
+                  {lib.watcher_enabled && (
+                    <span className="text-warning" title="File watcher active">⚡</span>
+                  )}
+                  {lib.monitor_enabled && lib.next_scan_at && (
+                    <span className="text-xs text-muted-foreground ml-auto">
+                      Next: {formatNextScan(lib.next_scan_at)}
+                    </span>
+                  )}
+                </div>
 
-              {/* Actions */}
-              <div className="flex items-center gap-2 mt-auto">
-                <form className="flex-1">
-                  <input type="hidden" name="id" value={lib.id} />
-                  <Button type="submit" variant="primary" size="sm" className="w-full" formAction={scanLibraryAction}>
-                    🔄 Index
-                  </Button>
-                </form>
-                <form className="flex-1">
-                  <input type="hidden" name="id" value={lib.id} />
-                  <Button type="submit" variant="secondary" size="sm" className="w-full" formAction={scanLibraryFullAction}>
-                    🔁 Full
-                  </Button>
-                </form>
-                <form>
-                  <input type="hidden" name="id" value={lib.id} />
-                  <Button type="submit" variant="danger" size="sm" formAction={removeLibrary}>
-                    🗑
-                  </Button>
-                </form>
-              </div>
+                {/* Actions */}
+                <div className="flex items-center gap-2">
+                  <form className="flex-1">
+                    <input type="hidden" name="id" value={lib.id} />
+                    <Button type="submit" variant="default" size="sm" className="w-full" formAction={scanLibraryAction}>
+                      <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                      </svg>
+                      Index
+                    </Button>
+                  </form>
+                  <form className="flex-1">
+                    <input type="hidden" name="id" value={lib.id} />
+                    <Button type="submit" variant="secondary" size="sm" className="w-full" formAction={scanLibraryFullAction}>
+                      <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                      </svg>
+                      Full
+                    </Button>
+                  </form>
+                  <form>
+                    <input type="hidden" name="id" value={lib.id} />
+                    <Button type="submit" variant="destructive" size="sm" formAction={removeLibrary}>
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </Button>
+                  </form>
+                </div>
+              </CardContent>
             </Card>
           );
         })}