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/components/MonitoringForm.tsx

@@ -34,28 +34,38 @@ export function MonitoringForm({ libraryId, monitorEnabled, scanMode, watcherEna
   };
 
   return (
-    <form action={handleSubmit} className="monitoring-form-compact">
+    <form action={handleSubmit} className="flex items-center gap-2">
       <input type="hidden" name="id" value={libraryId} />
       
-      <div className="monitor-row">
-        <label className={`monitor-checkbox ${isPending ? 'pending' : ''}`}>
+      <div className="flex items-center gap-2">
+        <label className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-sm font-medium transition-all cursor-pointer select-none ${
+          isPending 
+            ? 'opacity-50 cursor-not-allowed' 
+            : 'hover:border-primary'
+        } ${monitorEnabled ? 'bg-primary-soft border-primary text-primary' : 'bg-card border-line text-muted'}`}>
           <input
             type="checkbox"
             name="monitor_enabled"
             value="true"
             defaultChecked={monitorEnabled}
             disabled={isPending}
+            className="w-3.5 h-3.5 rounded border-line text-primary focus:ring-primary"
           />
           <span>Auto</span>
         </label>
         
-        <label className={`monitor-checkbox watcher ${isPending ? 'pending' : ''} ${watcherEnabled ? 'active' : ''}`}>
+        <label className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-sm font-medium transition-all cursor-pointer select-none ${
+          isPending 
+            ? 'opacity-50 cursor-not-allowed' 
+            : 'hover:border-primary'
+        } ${watcherEnabled ? 'bg-warning-soft border-warning text-warning' : 'bg-card border-line text-muted'}`}>
           <input
             type="checkbox"
             name="watcher_enabled"
             value="true"
             defaultChecked={watcherEnabled}
             disabled={isPending}
+            className="w-3.5 h-3.5 rounded border-line text-warning focus:ring-warning"
           />
           <span title="Real-time file watcher">⚡</span>
         </label>
@@ -64,7 +74,7 @@ export function MonitoringForm({ libraryId, monitorEnabled, scanMode, watcherEna
           name="scan_mode"
           defaultValue={scanMode}
           disabled={isPending}
-          className="scan-mode-select"
+          className="px-3 py-1.5 text-sm rounded-lg border border-line bg-card text-foreground focus:ring-2 focus:ring-primary focus:border-primary disabled:opacity-50"
         >
           <option value="manual">Manual</option>
           <option value="hourly">Hourly</option>
@@ -72,7 +82,11 @@ export function MonitoringForm({ libraryId, monitorEnabled, scanMode, watcherEna
           <option value="weekly">Weekly</option>
         </select>
         
-        <button type="submit" className="save-btn" disabled={isPending}>
+        <button 
+          type="submit" 
+          disabled={isPending}
+          className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary text-white font-semibold text-sm transition-all hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
           {isPending ? '...' : '✓'}
         </button>
       </div>