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/JobRow.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import Link from "next/link";
 import { JobProgress } from "./JobProgress";
+import { StatusBadge, Button } from "./ui";
 
 interface JobRowProps {
   job: {
@@ -25,52 +26,71 @@ export function JobRow({ job, libraryName, highlighted, onCancel }: JobRowProps)
 
   const handleComplete = () => {
     setShowProgress(false);
-    // Trigger a page refresh to update the job status
     window.location.reload();
   };
 
   return (
     <>
-      <tr className={highlighted ? "job-highlighted" : undefined}>
-        <td>
-          <Link href={`/jobs/${job.id}`} className="job-id-link">
+      <tr className={highlighted ? 'bg-primary-soft/50' : 'hover:bg-muted/5'}>
+        <td className="px-4 py-3">
+          <Link 
+            href={`/jobs/${job.id}`} 
+            className="text-primary hover:text-primary/80 hover:underline font-mono text-sm"
+          >
             <code>{job.id.slice(0, 8)}</code>
           </Link>
         </td>
-        <td>{job.library_id ? libraryName || job.library_id.slice(0, 8) : "—"}</td>
-        <td>{job.type}</td>
-        <td>
-          <span className={`status-${job.status}`}>{job.status}</span>
-          {job.error_opt && <span className="error-hint" title={job.error_opt}>!</span>}
-          {(job.status === "running" || job.status === "pending") && (
-            <button 
-              className="toggle-progress-btn"
-              onClick={() => setShowProgress(!showProgress)}
-            >
-              {showProgress ? "Hide" : "Show"} progress
-            </button>
-          )}
+        <td className="px-4 py-3 text-sm text-foreground">
+          {job.library_id ? libraryName || job.library_id.slice(0, 8) : "—"}
         </td>
-        <td>{new Date(job.created_at).toLocaleString()}</td>
-        <td>
-          <div style={{ display: "flex", gap: "8px" }}>
-            <Link href={`/jobs/${job.id}`} className="view-btn">
+        <td className="px-4 py-3 text-sm text-foreground">{job.type}</td>
+        <td className="px-4 py-3">
+          <div className="flex items-center gap-2 flex-wrap">
+            <StatusBadge status={job.status} />
+            {job.error_opt && (
+              <span 
+                className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-error text-white text-xs font-bold cursor-help"
+                title={job.error_opt}
+              >
+                !
+              </span>
+            )}
+            {(job.status === "running" || job.status === "pending") && (
+              <button 
+                className="text-xs text-primary hover:text-primary/80 hover:underline"
+                onClick={() => setShowProgress(!showProgress)}
+              >
+                {showProgress ? "Hide" : "Show"} progress
+              </button>
+            )}
+          </div>
+        </td>
+        <td className="px-4 py-3 text-sm text-muted">
+          {new Date(job.created_at).toLocaleString()}
+        </td>
+        <td className="px-4 py-3">
+          <div className="flex items-center gap-2">
+            <Link 
+              href={`/jobs/${job.id}`}
+              className="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors"
+            >
               View
             </Link>
             {(job.status === "pending" || job.status === "running") && (
-              <button 
-                className="cancel-btn"
+              <Button 
+                variant="danger" 
+                size="sm"
                 onClick={() => onCancel(job.id)}
               >
                 Cancel
-              </button>
+              </Button>
             )}
           </div>
         </td>
       </tr>
       {showProgress && (job.status === "running" || job.status === "pending") && (
-        <tr className="progress-row">
-          <td colSpan={6}>
+        <tr>
+          <td colSpan={6} className="px-4 py-3 bg-muted/5">
             <JobProgress 
               jobId={job.id}
               onComplete={handleComplete}