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>
   );
 }