chore: bump version to 1.20.0

perf: wrap BookCard and BookImage with React.memo
Prevent unnecessary re-renders of book grid items when parent components update without changing book data. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-21 13:06:28 +01:00 · 2026-03-21 13:03:24 +01:00 · 2026-03-21 13:02:10 +01:00 · 2026-03-21 12:59:06 +01:00 · 2026-03-21 12:57:10 +01:00
13 changed files with 75 additions and 30 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -64,7 +64,7 @@ checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"

 [[package]]
 name = "api"
-version = "1.19.1"
+version = "1.20.0"
 dependencies = [
 "anyhow",
 "argon2",
@@ -1232,7 +1232,7 @@ dependencies = [

 [[package]]
 name = "indexer"
-version = "1.19.1"
+version = "1.20.0"
 dependencies = [
 "anyhow",
 "axum",
@@ -1771,7 +1771,7 @@ dependencies = [

 [[package]]
 name = "parsers"
-version = "1.19.1"
+version = "1.20.0"
 dependencies = [
 "anyhow",
 "flate2",
@@ -2906,7 +2906,7 @@ dependencies = [

 [[package]]
 name = "stripstream-core"
-version = "1.19.1"
+version = "1.20.0"
 dependencies = [
 "anyhow",
 "serde",
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -9,7 +9,7 @@ resolver = "2"

 [workspace.package]
 edition = "2021"
-version = "1.19.1"
+version = "1.20.0"
 license = "MIT"

 [workspace.dependencies]
--- a/apps/backoffice/app/authors/[name]/page.tsx
+++ b/apps/backoffice/app/authors/[name]/page.tsx
@@ -95,7 +95,7 @@ export default async function AuthorDetailPage({
                      alt={s.name}
                      fill
                      className="object-cover"
-                      unoptimized
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
                    />
                  </div>
                  <div className="p-3">
--- a/apps/backoffice/app/books/[id]/page.tsx
+++ b/apps/backoffice/app/books/[id]/page.tsx
@@ -2,11 +2,15 @@ import { fetchLibraries, getBookCoverUrl, BookDto, apiFetch, ReadingStatus } fro
 import { BookPreview } from "../../components/BookPreview";
 import { ConvertButton } from "../../components/ConvertButton";
 import { MarkBookReadButton } from "../../components/MarkBookReadButton";
-import { EditBookForm } from "../../components/EditBookForm";
+import nextDynamic from "next/dynamic";
 import { SafeHtml } from "../../components/SafeHtml";
 import { getServerTranslations } from "../../../lib/i18n/server";
 import Image from "next/image";
 import Link from "next/link";
+
+const EditBookForm = nextDynamic(
+  () => import("../../components/EditBookForm").then(m => m.EditBookForm)
+);
 import { notFound } from "next/navigation";

 export const dynamic = "force-dynamic";
@@ -95,7 +99,7 @@ export default async function BookDetailPage({
              alt={t("bookDetail.coverOf", { title: book.title })}
              fill
              className="object-cover"
-              unoptimized
+              sizes="192px"
              loading="lazy"
            />
          </div>
--- a/apps/backoffice/app/books/page.tsx
+++ b/apps/backoffice/app/books/page.tsx
@@ -170,7 +170,7 @@ export default async function BooksPage({
                      alt={t("books.coverOf", { name: s.name })}
                      fill
                      className="object-cover"
-                      unoptimized
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
                    />
                  </div>
                  <div className="p-2">
--- a/apps/backoffice/app/components/BookCard.tsx
+++ b/apps/backoffice/app/components/BookCard.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { memo, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { BookDto, ReadingStatus } from "../../lib/api";
@@ -17,7 +17,7 @@ interface BookCardProps {
  readingStatus?: ReadingStatus;
 }

-function BookImage({ src, alt }: { src: string; alt: string }) {
+const BookImage = memo(function BookImage({ src, alt }: { src: string; alt: string }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const [hasError, setHasError] = useState(false);

@@ -51,13 +51,12 @@ function BookImage({ src, alt }: { src: string; alt: string }) {
        sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
        onLoad={() => setIsLoaded(true)}
        onError={() => setHasError(true)}
-        unoptimized
      />
    </div>
  );
-}
+});

-export function BookCard({ book, readingStatus }: BookCardProps) {
+export const BookCard = memo(function BookCard({ book, readingStatus }: BookCardProps) {
  const { t } = useTranslation();
  const coverUrl = book.coverUrl || `/api/books/${book.id}/thumbnail`;
  const status = readingStatus ?? book.reading_status;
@@ -129,7 +128,7 @@ export function BookCard({ book, readingStatus }: BookCardProps) {
      </div>
    </Link>
  );
-}
+});

 interface BooksGridProps {
  books: (BookDto & { coverUrl?: string })[];
--- a/apps/backoffice/app/components/JobsIndicator.tsx
+++ b/apps/backoffice/app/components/JobsIndicator.tsx
@@ -54,21 +54,46 @@ export function JobsIndicator() {
  const [popinStyle, setPopinStyle] = useState<React.CSSProperties>({});

  useEffect(() => {
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+
    const fetchActiveJobs = async () => {
      try {
        const response = await fetch("/api/jobs/active");
        if (response.ok) {
-          const jobs = await response.json();
+          const jobs: Job[] = await response.json();
          setActiveJobs(jobs);
+          // Adapt polling interval: 2s when jobs are active, 30s when idle
+          restartInterval(jobs.length > 0 ? 2000 : 30000);
        }
      } catch (error) {
        console.error("Failed to fetch jobs:", error);
      }
    };

+    const restartInterval = (ms: number) => {
+      if (intervalId !== null) clearInterval(intervalId);
+      intervalId = setInterval(fetchActiveJobs, ms);
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        if (intervalId !== null) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+      } else {
+        // Refetch immediately when tab becomes visible, then resume polling
+        fetchActiveJobs();
+      }
+    };
+
    fetchActiveJobs();
-    const interval = setInterval(fetchActiveJobs, 2000);
-    return () => clearInterval(interval);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      if (intervalId !== null) clearInterval(intervalId);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
  }, []);

  // Position the popin relative to the button
--- a/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
+++ b/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
@@ -2,13 +2,21 @@ import { fetchLibraries, fetchBooks, fetchSeriesMetadata, getBookCoverUrl, getMe
 import { BooksGrid, EmptyState } from "../../../../components/BookCard";
 import { MarkSeriesReadButton } from "../../../../components/MarkSeriesReadButton";
 import { MarkBookReadButton } from "../../../../components/MarkBookReadButton";
-import { EditSeriesForm } from "../../../../components/EditSeriesForm";
-import { MetadataSearchModal } from "../../../../components/MetadataSearchModal";
-import { ProwlarrSearchModal } from "../../../../components/ProwlarrSearchModal";
+import nextDynamic from "next/dynamic";
 import { OffsetPagination } from "../../../../components/ui";
 import { SafeHtml } from "../../../../components/SafeHtml";
 import Image from "next/image";
 import Link from "next/link";
+
+const EditSeriesForm = nextDynamic(
+  () => import("../../../../components/EditSeriesForm").then(m => m.EditSeriesForm)
+);
+const MetadataSearchModal = nextDynamic(
+  () => import("../../../../components/MetadataSearchModal").then(m => m.MetadataSearchModal)
+);
+const ProwlarrSearchModal = nextDynamic(
+  () => import("../../../../components/ProwlarrSearchModal").then(m => m.ProwlarrSearchModal)
+);
 import { notFound } from "next/navigation";
 import { getServerTranslations } from "../../../../../lib/i18n/server";

@@ -94,7 +102,7 @@ export default async function SeriesDetailPage({
                alt={t("books.coverOf", { name: displayName })}
                fill
                className="object-cover"
-                unoptimized
+                sizes="160px"
              />
            </div>
          </div>
--- a/apps/backoffice/app/libraries/[id]/series/page.tsx
+++ b/apps/backoffice/app/libraries/[id]/series/page.tsx
@@ -86,7 +86,7 @@ export default async function LibrarySeriesPage({
                      alt={t("books.coverOf", { name: s.name })}
                      fill
                      className="object-cover"
-                      unoptimized
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 20vw"
                    />
                  </div>
                  <div className="p-3">
--- a/apps/backoffice/app/libraries/page.tsx
+++ b/apps/backoffice/app/libraries/page.tsx
@@ -1,4 +1,5 @@
 import { revalidatePath } from "next/cache";
+import Image from "next/image";
 import Link from "next/link";
 import { listFolders, createLibrary, deleteLibrary, fetchLibraries, getBookCoverUrl, LibraryDto, FolderItem } from "../../lib/api";
 import type { TranslationKey } from "../../lib/i18n/fr";
@@ -88,10 +89,12 @@ export default async function LibrariesPage() {
              {/* Thumbnail fan */}
              {thumbnails.length > 0 ? (
                <Link href={`/libraries/${lib.id}/series`} className="block relative h-48 overflow-hidden bg-muted/10">
-                  <img
+                  <Image
                    src={thumbnails[0]}
                    alt=""
-                    className="absolute inset-0 w-full h-full object-cover blur-xl scale-110 opacity-40"
+                    fill
+                    className="object-cover blur-xl scale-110 opacity-40"
+                    sizes="(max-width: 768px) 100vw, 33vw"
                    loading="lazy"
                  />
                  <div className="absolute inset-0 flex items-end justify-center">
@@ -104,17 +107,20 @@ export default async function LibrariesPage() {
                      const cx = Math.cos(rad) * radius;
                      const cy = Math.sin(rad) * radius;
                      return (
-                        <img
+                        <Image
                          key={i}
                          src={url}
                          alt=""
-                          className="absolute w-24 h-36 object-cover shadow-lg"
+                          width={96}
+                          height={144}
+                          className="absolute object-cover shadow-lg"
                          style={{
                            transform: `translate(${cx}px, ${cy}px) rotate(${angle}deg)`,
                            transformOrigin: 'bottom center',
                            zIndex: count - Math.abs(Math.round(i - mid)),
                            bottom: '-185px',
                          }}
+                          sizes="96px"
                          loading="lazy"
                        />
                      );
--- a/apps/backoffice/app/series/page.tsx
+++ b/apps/backoffice/app/series/page.tsx
@@ -138,7 +138,7 @@ export default async function SeriesPage({
                      alt={t("books.coverOf", { name: s.name })}
                      fill
                      className="object-cover"
-                      unoptimized
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
                    />
                  </div>
                  <div className="p-3">
--- a/apps/backoffice/next.config.mjs
+++ b/apps/backoffice/next.config.mjs
@@ -1,7 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  output: "standalone",
-  typedRoutes: true
+  typedRoutes: true,
+  images: {
+    minimumCacheTTL: 86400,
+  },
 };

 export default nextConfig;
--- a/apps/backoffice/package.json
+++ b/apps/backoffice/package.json
@@ -1,6 +1,6 @@
 {
  "name": "stripstream-backoffice",
-  "version": "1.19.1",
+  "version": "1.20.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 7082",
Author	SHA1	Message	Date
Froidefond Julien	41c77fca2e	chore: bump version to 1.20.0 All checks were successful Deploy with Docker Compose / deploy (push) Successful in 1m15s Details	2026-03-21 13:06:28 +01:00
Froidefond Julien	49621f3fb1	perf: wrap BookCard and BookImage with React.memo Prevent unnecessary re-renders of book grid items when parent components update without changing book data. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-21 13:03:24 +01:00
Froidefond Julien	6df743b2e6	perf: lazy-load heavy modal components with next/dynamic Dynamic import EditBookForm, EditSeriesForm, MetadataSearchModal, and ProwlarrSearchModal so their code is split into separate chunks and only fetched when the user interacts with them. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-21 13:02:10 +01:00
Froidefond Julien	edfefc0128	perf: optimize JobsIndicator polling with visibility API and adaptive interval Pause polling when the tab is hidden, refetch immediately when it becomes visible again, and use a 30s interval when no jobs are active instead of polling every 2s unconditionally. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-21 12:59:06 +01:00
Froidefond Julien	b0185abefe	perf: enable Next.js image optimization across backoffice Remove `unoptimized` flag from all thumbnail/cover Image components and add proper responsive `sizes` props. Convert raw `<img>` tags on the libraries page to next/image. Add 24h minimumCacheTTL for optimized images. BookPreview keeps `unoptimized` since the API already returns optimized WebP. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-21 12:57:10 +01:00