feat: implement thumbnail generation and management

- Remove unused image dependencies from Cargo.lock. - Update API to handle thumbnail generation and checkup processes. - Introduce new routes for rebuilding and regenerating thumbnails. - Enhance job tracking with progress indicators for thumbnail jobs. - Update front-end components to display thumbnail job status and progress. - Add backend logic for managing thumbnail jobs and integrating with the API. - Refactor existing code to accommodate new thumbnail functionalities.
2026-03-08 20:55:12 +01:00
parent c93a7d5d29
commit e64848a216
21 changed files with 625 additions and 254 deletions
--- a/apps/backoffice/app/components/JobProgress.tsx
+++ b/apps/backoffice/app/components/JobProgress.tsx
@@ -87,6 +87,8 @@ export function JobProgress({ jobId, onComplete }: JobProgressProps) {
  const percent = progress.progress_percent ?? 0;
  const processed = progress.processed_files ?? 0;
  const total = progress.total_files ?? 0;
+  const isThumbnailsPhase = progress.status === "generating_thumbnails";
+  const unitLabel = isThumbnailsPhase ? "thumbnails" : "files";

  return (
    <div className="p-4 bg-card rounded-lg border border-border">
@@ -100,7 +102,7 @@ export function JobProgress({ jobId, onComplete }: JobProgressProps) {
      <ProgressBar value={percent} showLabel size="lg" className="mb-3" />

      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground mb-3">
-        <span>{processed} / {total} files</span>
+        <span>{processed} / {total} {unitLabel}</span>
        {progress.current_file && (
          <span className="truncate max-w-md" title={progress.current_file}>
            Current: {progress.current_file.length > 40 
@@ -110,7 +112,7 @@ export function JobProgress({ jobId, onComplete }: JobProgressProps) {
        )}
      </div>

-      {progress.stats_json && (
+      {progress.stats_json && !isThumbnailsPhase && (
        <div className="flex flex-wrap gap-3 text-xs">
          <Badge variant="primary">Scanned: {progress.stats_json.scanned_files}</Badge>
          <Badge variant="success">Indexed: {progress.stats_json.indexed_files}</Badge>
--- a/apps/backoffice/app/components/JobRow.tsx
+++ b/apps/backoffice/app/components/JobRow.tsx
@@ -33,9 +33,8 @@ interface JobRowProps {
 }

 export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, formatDuration }: JobRowProps) {
-  const [showProgress, setShowProgress] = useState(
-    highlighted || job.status === "running" || job.status === "pending"
-  );
+  const isActive = job.status === "running" || job.status === "pending" || job.status === "generating_thumbnails";
+  const [showProgress, setShowProgress] = useState(highlighted || isActive);

  const handleComplete = () => {
    setShowProgress(false);
@@ -53,12 +52,32 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
  const removed = job.stats_json?.removed_files ?? 0;
  const errors = job.stats_json?.errors ?? 0;

-  // Format files display
-  const filesDisplay = job.status === "running" && job.total_files
-    ? `${job.processed_files || 0}/${job.total_files}`
-    : scanned > 0 
-      ? `${scanned} scanned`
-      : "-";
+  const isThumbnailPhase = job.status === "generating_thumbnails";
+  const isThumbnailJob = job.type === "thumbnail_rebuild" || job.type === "thumbnail_regenerate";
+  const hasThumbnailPhase = isThumbnailPhase || isThumbnailJob;
+
+  // Files column: index-phase stats only
+  const filesDisplay =
+    job.status === "running" && !isThumbnailPhase
+      ? job.total_files != null
+        ? `${job.processed_files ?? 0}/${job.total_files}`
+        : scanned > 0
+          ? `${scanned} scanned`
+          : "-"
+      : job.status === "success" && (indexed > 0 || removed > 0 || errors > 0)
+        ? null // rendered below as ✓ / − / ⚠
+        : scanned > 0
+          ? `${scanned} scanned`
+          : "—";
+
+  // Thumbnails column
+  const thumbInProgress = hasThumbnailPhase && (job.status === "running" || isThumbnailPhase);
+  const thumbDisplay =
+    thumbInProgress && job.total_files != null
+      ? `${job.processed_files ?? 0}/${job.total_files}`
+      : job.status === "success" && job.total_files != null && hasThumbnailPhase
+        ? `✓ ${job.total_files}`
+        : "—";

  return (
    <>
@@ -86,7 +105,7 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
                !
              </span>
            )}
-            {(job.status === "running" || job.status === "pending") && (
+            {isActive && (
              <button 
                className="text-xs text-primary hover:text-primary/80 hover:underline"
                onClick={() => setShowProgress(!showProgress)}
@@ -98,21 +117,26 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
        </td>
        <td className="px-4 py-3">
          <div className="flex flex-col gap-1">
-            <span className="text-sm text-foreground">{filesDisplay}</span>
-            {job.status === "running" && job.total_files && (
-              <MiniProgressBar 
-                value={job.processed_files || 0} 
-                max={job.total_files}
-                className="w-24"
-              />
-            )}
-            {job.status === "success" && (
+            {filesDisplay !== null ? (
+              <span className="text-sm text-foreground">{filesDisplay}</span>
+            ) : (
              <div className="flex items-center gap-2 text-xs">
                <span className="text-success">✓ {indexed}</span>
                {removed > 0 && <span className="text-warning">− {removed}</span>}
                {errors > 0 && <span className="text-error">⚠ {errors}</span>}
              </div>
            )}
+            {job.status === "running" && !isThumbnailPhase && job.total_files != null && (
+              <MiniProgressBar value={job.processed_files ?? 0} max={job.total_files} className="w-24" />
+            )}
+          </div>
+        </td>
+        <td className="px-4 py-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-sm text-foreground">{thumbDisplay}</span>
+            {thumbInProgress && job.total_files != null && (
+              <MiniProgressBar value={job.processed_files ?? 0} max={job.total_files} className="w-24" />
+            )}
          </div>
        </td>
        <td className="px-4 py-3 text-sm text-muted-foreground">
@@ -129,7 +153,7 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
            >
              View
            </Link>
-            {(job.status === "pending" || job.status === "running") && (
+            {(job.status === "pending" || job.status === "running" || job.status === "generating_thumbnails") && (
              <Button 
                variant="danger" 
                size="sm"
@@ -141,9 +165,9 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
          </div>
        </td>
      </tr>
-      {showProgress && (job.status === "running" || job.status === "pending") && (
+      {showProgress && isActive && (
        <tr>
-          <td colSpan={8} className="px-4 py-3 bg-muted/50">
+          <td colSpan={9} className="px-4 py-3 bg-muted/50">
            <JobProgress 
              jobId={job.id}
              onComplete={handleComplete}
--- a/apps/backoffice/app/components/JobsIndicator.tsx
+++ b/apps/backoffice/app/components/JobsIndicator.tsx
@@ -78,7 +78,7 @@ export function JobsIndicator() {
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

-  const runningJobs = activeJobs.filter(j => j.status === "running");
+  const runningJobs = activeJobs.filter(j => j.status === "running" || j.status === "generating_thumbnails");
  const pendingJobs = activeJobs.filter(j => j.status === "pending");
  const totalCount = activeJobs.length;

@@ -210,19 +210,19 @@ export function JobsIndicator() {
                    >
                      <div className="flex items-start gap-3">
                        <div className="mt-0.5">
-                          {job.status === "running" && <span className="animate-spin inline-block">⏳</span>}
+                          {(job.status === "running" || job.status === "generating_thumbnails") && <span className="animate-spin inline-block">⏳</span>}
                          {job.status === "pending" && <span>⏸</span>}
                        </div>
                        
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2 mb-1">
                            <code className="text-xs px-1.5 py-0.5 bg-muted rounded font-mono">{job.id.slice(0, 8)}</code>
-                            <Badge variant={job.type === 'rebuild' ? 'primary' : 'secondary'} className="text-[10px]">
-                              {job.type}
+                            <Badge variant={job.type === 'rebuild' ? 'primary' : job.type === 'thumbnail_regenerate' ? 'warning' : 'secondary'} className="text-[10px]">
+                              {job.type === 'thumbnail_rebuild' ? 'Thumbnails' : job.type === 'thumbnail_regenerate' ? 'Regenerate' : job.type}
                            </Badge>
                          </div>
                          
-                          {job.status === "running" && job.progress_percent !== null && (
+                          {(job.status === "running" || job.status === "generating_thumbnails") && job.progress_percent != null && (
                            <div className="flex items-center gap-2 mt-2">
                              <MiniProgressBar value={job.progress_percent} />
                              <span className="text-xs font-medium text-muted-foreground">{job.progress_percent}%</span>
--- a/apps/backoffice/app/components/JobsList.tsx
+++ b/apps/backoffice/app/components/JobsList.tsx
@@ -111,6 +111,7 @@ export function JobsList({ initialJobs, libraries, highlightJobId }: JobsListPro
              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Type</th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Status</th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Files</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Thumbnails</th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Duration</th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Created</th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Actions</th>
--- a/apps/backoffice/app/components/ui/Badge.tsx
+++ b/apps/backoffice/app/components/ui/Badge.tsx
@@ -60,6 +60,7 @@ export function Badge({ children, variant = "default", className = "" }: BadgePr
 // Status badge for jobs/tasks
 const statusVariants: Record<string, BadgeVariant> = {
  running: "in-progress",
+  generating_thumbnails: "in-progress",
  success: "completed",
  completed: "completed",
  failed: "error",
@@ -68,20 +69,33 @@ const statusVariants: Record<string, BadgeVariant> = {
  unread: "unread",
 };

+const statusLabels: Record<string, string> = {
+  generating_thumbnails: "Thumbnails",
+};
+
 interface StatusBadgeProps {
  status: string;
  className?: string;
 }

 export function StatusBadge({ status, className = "" }: StatusBadgeProps) {
-  const variant = statusVariants[status.toLowerCase()] || "default";
-  return <Badge variant={variant} className={className}>{status}</Badge>;
+  const key = status.toLowerCase();
+  const variant = statusVariants[key] || "default";
+  const label = statusLabels[key] ?? status;
+  return <Badge variant={variant} className={className}>{label}</Badge>;
 }

 // Job type badge
 const jobTypeVariants: Record<string, BadgeVariant> = {
  rebuild: "primary",
  full_rebuild: "warning",
+  thumbnail_rebuild: "secondary",
+  thumbnail_regenerate: "warning",
+};
+
+const jobTypeLabels: Record<string, string> = {
+  thumbnail_rebuild: "Thumbnails",
+  thumbnail_regenerate: "Regenerate",
 };

 interface JobTypeBadgeProps {
@@ -90,8 +104,10 @@ interface JobTypeBadgeProps {
 }

 export function JobTypeBadge({ type, className = "" }: JobTypeBadgeProps) {
-  const variant = jobTypeVariants[type.toLowerCase()] || "default";
-  return <Badge variant={variant} className={className}>{type}</Badge>;
+  const key = type.toLowerCase();
+  const variant = jobTypeVariants[key] || "default";
+  const label = jobTypeLabels[key] ?? type;
+  return <Badge variant={variant} className={className}>{label}</Badge>;
 }

 // Progress badge (shows percentage)
--- a/apps/backoffice/app/jobs/[id]/page.tsx
+++ b/apps/backoffice/app/jobs/[id]/page.tsx
@@ -171,19 +171,19 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
        </Card>

        {/* Progress Card */}
-        {(job.status === "running" || job.status === "success" || job.status === "failed") && (
+        {(job.status === "running" || job.status === "generating_thumbnails" || job.status === "success" || job.status === "failed") && (
          <Card>
            <CardHeader>
-              <CardTitle>Progress</CardTitle>
+              <CardTitle>{job.status === "generating_thumbnails" ? "Thumbnails" : "Progress"}</CardTitle>
            </CardHeader>
            <CardContent>
-              {job.total_files && job.total_files > 0 && (
+              {job.total_files != null && job.total_files > 0 && (
                <>
                  <ProgressBar value={job.progress_percent || 0} showLabel size="lg" className="mb-4" />
                  <div className="grid grid-cols-3 gap-4">
-                    <StatBox value={job.processed_files || 0} label="Processed" variant="primary" />
-                    <StatBox value={job.total_files} label="Total" />
-                    <StatBox value={job.total_files - (job.processed_files || 0)} label="Remaining" variant="warning" />
+                    <StatBox value={job.processed_files ?? 0} label="Processed" variant="primary" />
+                    <StatBox value={job.total_files} label={job.status === "generating_thumbnails" ? "Total thumbnails" : "Total"} />
+                    <StatBox value={job.total_files - (job.processed_files ?? 0)} label="Remaining" variant="warning" />
                  </div>
                </>
              )}
--- a/apps/backoffice/app/jobs/page.tsx
+++ b/apps/backoffice/app/jobs/page.tsx
@@ -1,6 +1,6 @@
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
-import { listJobs, fetchLibraries, rebuildIndex, IndexJobDto, LibraryDto } from "../../lib/api";
+import { listJobs, fetchLibraries, rebuildIndex, rebuildThumbnails, regenerateThumbnails, IndexJobDto, LibraryDto } from "../../lib/api";
 import { JobsList } from "../components/JobsList";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, FormField, FormSelect, FormRow } from "../components/ui";

@@ -31,6 +31,22 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
    redirect(`/jobs?highlight=${result.id}`);
  }

+  async function triggerThumbnailsRebuild(formData: FormData) {
+    "use server";
+    const libraryId = formData.get("library_id") as string;
+    const result = await rebuildThumbnails(libraryId || undefined);
+    revalidatePath("/jobs");
+    redirect(`/jobs?highlight=${result.id}`);
+  }
+
+  async function triggerThumbnailsRegenerate(formData: FormData) {
+    "use server";
+    const libraryId = formData.get("library_id") as string;
+    const result = await regenerateThumbnails(libraryId || undefined);
+    revalidatePath("/jobs");
+    redirect(`/jobs?highlight=${result.id}`);
+  }
+
  return (
    <>
      <div className="mb-6">
@@ -45,7 +61,7 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
      <Card className="mb-6">
        <CardHeader>
          <CardTitle>Queue New Job</CardTitle>
-          <CardDescription>Select a library to rebuild or perform a full rebuild</CardDescription>
+          <CardDescription>Rebuild index, full rebuild, generate missing thumbnails, or regenerate all thumbnails</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <form action={triggerRebuild}>
@@ -89,6 +105,48 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
              </Button>
            </FormRow>
          </form>
+
+          <form action={triggerThumbnailsRebuild}>
+            <FormRow>
+              <FormField className="flex-1">
+                <FormSelect name="library_id" defaultValue="">
+                  <option value="">All libraries</option>
+                  {libraries.map((lib) => (
+                    <option key={lib.id} value={lib.id}>
+                      {lib.name}
+                    </option>
+                  ))}
+                </FormSelect>
+              </FormField>
+              <Button type="submit" variant="secondary">
+                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                Generate thumbnails
+              </Button>
+            </FormRow>
+          </form>
+
+          <form action={triggerThumbnailsRegenerate}>
+            <FormRow>
+              <FormField className="flex-1">
+                <FormSelect name="library_id" defaultValue="">
+                  <option value="">All libraries</option>
+                  {libraries.map((lib) => (
+                    <option key={lib.id} value={lib.id}>
+                      {lib.name}
+                    </option>
+                  ))}
+                </FormSelect>
+              </FormField>
+              <Button type="submit" variant="warning">
+                <svg className="w-4 h-4 mr-2" 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>
+                Regenerate thumbnails
+              </Button>
+            </FormRow>
+          </form>
        </CardContent>
      </Card>
      
--- a/apps/backoffice/lib/api.ts
+++ b/apps/backoffice/lib/api.ts
@@ -187,6 +187,24 @@ export async function rebuildIndex(libraryId?: string, full?: boolean) {
  });
 }

+export async function rebuildThumbnails(libraryId?: string) {
+  const body: { library_id?: string } = {};
+  if (libraryId) body.library_id = libraryId;
+  return apiFetch<IndexJobDto>("/index/thumbnails/rebuild", {
+    method: "POST",
+    body: JSON.stringify(body),
+  });
+}
+
+export async function regenerateThumbnails(libraryId?: string) {
+  const body: { library_id?: string } = {};
+  if (libraryId) body.library_id = libraryId;
+  return apiFetch<IndexJobDto>("/index/thumbnails/regenerate", {
+    method: "POST",
+    body: JSON.stringify(body),
+  });
+}
+
 export async function cancelJob(id: string) {
  return apiFetch<IndexJobDto>(`/index/cancel/${id}`, { method: "POST" });
 }