feat(ui): Components refactoring with Tailwind - UI kit, icons, lazy loading images

- Created reusable UI components (Card, Button, Badge, Form, Icon)
- Added PageIcon and NavIcon components with consistent styling
- Refactored all pages to use new UI components
- Added non-blocking image loading with skeleton for book covers
- Created LibraryActions dropdown for library settings
- Added emojis to buttons for better UX
- Fixed Client Component issues with getBookCoverUrl

apps/backoffice/app/books/page.tsx

@@ -1,5 +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 } from "../components/ui";
 import Link from "next/link";
 
 export const dynamic = "force-dynamic";
@@ -50,39 +51,55 @@ export default async function BooksPage({
     nextCursor = booksPage.next_cursor;
   }
 
-  const displayBooks = searchResults || books;
+  const displayBooks = (searchResults || books).map(book => ({
+    ...book,
+    coverUrl: getBookCoverUrl(book.id)
+  }));
 
   return (
     <>
-      <h1>Books</h1>
+      <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>
       
       {/* Filtres et recherche */}
-      <div className="card">
-        <form className="search-form">
-          <input 
-            name="q" 
-            placeholder="Search books..." 
-            defaultValue={searchQuery}
-            className="search-input"
-          />
-          <select name="library" defaultValue={libraryId || ""}>
-            <option value="">All libraries</option>
-            {libraries.map((lib) => (
-              <option key={lib.id} value={lib.id}>
-                {lib.name}
-              </option>
-            ))}
-          </select>
-          <button type="submit">Search</button>
-          {searchQuery && (
-            <Link href="/books" className="button secondary">Clear</Link>
-          )}
+      <Card className="mb-6">
+        <form>
+          <FormRow>
+            <FormField>
+              <FormInput 
+                name="q" 
+                placeholder="Search books..." 
+                defaultValue={searchQuery}
+              />
+            </FormField>
+            <FormField>
+              <FormSelect name="library" defaultValue={libraryId || ""}>
+                <option value="">All libraries</option>
+                {libraries.map((lib) => (
+                  <option key={lib.id} value={lib.id}>
+                    {lib.name}
+                  </option>
+                ))}
+              </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>
+      </Card>
 
       {/* Résultats de recherche */}
       {searchQuery && totalHits !== null && (
-        <p className="results-info">
+        <p className="text-sm text-muted mb-4">
           Found {totalHits} result{totalHits !== 1 ? 's' : ''} for &quot;{searchQuery}&quot;
         </p>
       )}
@@ -90,15 +107,20 @@ export default async function BooksPage({
       {/* Grille de livres */}
       {displayBooks.length > 0 ? (
         <>
-          <BooksGrid books={displayBooks} getBookCoverUrl={getBookCoverUrl} />
+          <BooksGrid books={displayBooks} />
           
           {/* Pagination */}
           {!searchQuery && nextCursor && (
-            <div className="pagination">
+            <div className="flex justify-center mt-8">
               <form>
                 <input type="hidden" name="library" value={libraryId || ""} />
                 <input type="hidden" name="cursor" value={nextCursor} />
-                <button type="submit">Load more</button>
+                <button 
+                  type="submit"
+                  className="px-6 py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors"
+                >
+                  📥 Load more
+                </button>
               </form>
             </div>
           )}