feat: add i18n support (FR/EN) to backoffice with English as default

Implement full internationalization for the Next.js backoffice: - i18n infrastructure: type-safe dictionaries (fr.ts/en.ts), cookie-based locale detection, React Context for client components, server-side translation helper - Language selector in Settings page (General tab) with cookie + DB persistence - All ~35 pages and components translated via t() / useTranslation() - Default locale set to English, French available via settings Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-18 19:39:01 +01:00
parent 055c376222
commit d4f87c4044
43 changed files with 2024 additions and 693 deletions
--- a/apps/backoffice/app/libraries/[id]/books/page.tsx
+++ b/apps/backoffice/app/libraries/[id]/books/page.tsx
@@ -3,6 +3,7 @@ import { BooksGrid, EmptyState } from "../../../components/BookCard";
 import { LibrarySubPageHeader } from "../../../components/LibrarySubPageHeader";
 import { OffsetPagination } from "../../../components/ui";
 import { notFound } from "next/navigation";
+import { getServerTranslations } from "../../../../lib/i18n/server";

 export const dynamic = "force-dynamic";

@@ -14,6 +15,7 @@ export default async function LibraryBooksPage({
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
  const { id } = await params;
+  const { t } = await getServerTranslations();
  const searchParamsAwaited = await searchParams;
  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
  const series = typeof searchParamsAwaited.series === "string" ? searchParamsAwaited.series : undefined;
@@ -38,14 +40,14 @@ export default async function LibraryBooksPage({
    coverUrl: getBookCoverUrl(book.id)
  }));

-  const seriesDisplayName = series === "unclassified" ? "Non classé" : series;
+  const seriesDisplayName = series === "unclassified" ? t("books.unclassified") : (series ?? "");
  const totalPages = Math.ceil(booksPage.total / limit);

  return (
    <div className="space-y-6">
      <LibrarySubPageHeader
        library={library}
-        title={series ? `Livres de "${seriesDisplayName}"` : "Tous les livres"}
+        title={series ? t("libraryBooks.booksOfSeries", { series: seriesDisplayName }) : t("libraryBooks.allBooks")}
        icon={
          <svg className="w-8 h-8" 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" />
@@ -53,9 +55,9 @@ export default async function LibraryBooksPage({
        }
        iconColor="text-success"
        filterInfo={series ? {
-          label: `Livres de la série "${seriesDisplayName}"`,
+          label: t("libraryBooks.filterLabel", { series: seriesDisplayName }),
          clearHref: `/libraries/${id}/books`,
-          clearLabel: "Voir tous les livres"
+          clearLabel: t("libraryBooks.viewAll")
        } : undefined}
      />

@@ -71,7 +73,7 @@ export default async function LibraryBooksPage({
          />
        </>
      ) : (
-        <EmptyState message={series ? `Aucun livre dans la série "${seriesDisplayName}"` : "Aucun livre dans cette bibliothèque"} />
+        <EmptyState message={series ? t("libraryBooks.noBooksInSeries", { series: seriesDisplayName }) : t("libraryBooks.noBooks")} />
      )}
    </div>
  );
--- a/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
+++ b/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
@@ -9,6 +9,7 @@ import { SafeHtml } from "../../../../components/SafeHtml";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import { getServerTranslations } from "../../../../../lib/i18n/server";

 export const dynamic = "force-dynamic";

@@ -20,6 +21,7 @@ export default async function SeriesDetailPage({
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
  const { id, name } = await params;
+  const { t } = await getServerTranslations();
  const searchParamsAwaited = await searchParams;
  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 50;
@@ -55,7 +57,7 @@ export default async function SeriesDetailPage({

  const totalPages = Math.ceil(booksPage.total / limit);
  const booksReadCount = booksPage.items.filter((b) => b.reading_status === "read").length;
-  const displayName = seriesName === "unclassified" ? "Non classé" : seriesName;
+  const displayName = seriesName === "unclassified" ? t("books.unclassified") : seriesName;

  // Use first book cover as series cover
  const coverBookId = booksPage.items[0]?.id;
@@ -68,7 +70,7 @@ export default async function SeriesDetailPage({
          href="/libraries"
          className="text-muted-foreground hover:text-primary transition-colors"
        >
-          Bibliothèques
+          {t("nav.libraries")}
        </Link>
        <span className="text-muted-foreground">/</span>
        <Link
@@ -88,7 +90,7 @@ export default async function SeriesDetailPage({
            <div className="w-40 aspect-[2/3] relative rounded-xl overflow-hidden shadow-card border border-border">
              <Image
                src={getBookCoverUrl(coverBookId)}
-                alt={`Couverture de ${displayName}`}
+                alt={t("books.coverOf", { name: displayName })}
                fill
                className="object-cover"
                unoptimized
@@ -112,12 +114,7 @@ export default async function SeriesDetailPage({
                seriesMeta.status === "cancelled" ? "bg-red-500/15 text-red-600" :
                "bg-muted text-muted-foreground"
              }`}>
-                {seriesMeta.status === "ongoing" ? "En cours" :
-                 seriesMeta.status === "ended" ? "Terminée" :
-                 seriesMeta.status === "hiatus" ? "Hiatus" :
-                 seriesMeta.status === "cancelled" ? "Annulée" :
-                 seriesMeta.status === "upcoming" ? "À paraître" :
-                 seriesMeta.status}
+                {t(`seriesStatus.${seriesMeta.status}` as any) || seriesMeta.status}
              </span>
            )}
          </div>
@@ -137,11 +134,11 @@ export default async function SeriesDetailPage({
            )}
            {((seriesMeta && seriesMeta.publishers.length > 0) || seriesMeta?.start_year) && <span className="w-px h-4 bg-border" />}
            <span className="text-muted-foreground">
-              <span className="font-semibold text-foreground">{booksPage.total}</span> livre{booksPage.total !== 1 ? "s" : ""}
+              <span className="font-semibold text-foreground">{booksPage.total}</span> {t("dashboard.books").toLowerCase()}
            </span>
            <span className="w-px h-4 bg-border" />
            <span className="text-muted-foreground">
-              <span className="font-semibold text-foreground">{booksReadCount}</span>/{booksPage.total} lu{booksPage.total !== 1 ? "s" : ""}
+              {t("series.readCount", { read: String(booksReadCount), total: String(booksPage.total) })}
            </span>

            {/* Progress bar */}
@@ -196,7 +193,7 @@ export default async function SeriesDetailPage({
          />
        </>
      ) : (
-        <EmptyState message="Aucun livre dans cette série" />
+        <EmptyState message={t("librarySeries.noBooksInSeries")} />
      )}
    </div>
  );
--- a/apps/backoffice/app/libraries/[id]/series/page.tsx
+++ b/apps/backoffice/app/libraries/[id]/series/page.tsx
@@ -6,6 +6,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { LibrarySubPageHeader } from "../../../components/LibrarySubPageHeader";
+import { getServerTranslations } from "../../../../lib/i18n/server";

 export const dynamic = "force-dynamic";

@@ -17,6 +18,7 @@ export default async function LibrarySeriesPage({
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
  const { id } = await params;
+  const { t } = await getServerTranslations();
  const searchParamsAwaited = await searchParams;
  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
@@ -37,14 +39,14 @@ export default async function LibrarySeriesPage({
  const totalPages = Math.ceil(seriesPage.total / limit);

  const KNOWN_STATUSES: Record<string, string> = {
-    ongoing: "En cours",
-    ended: "Terminée",
-    hiatus: "Hiatus",
-    cancelled: "Annulée",
-    upcoming: "À paraître",
+    ongoing: t("seriesStatus.ongoing"),
+    ended: t("seriesStatus.ended"),
+    hiatus: t("seriesStatus.hiatus"),
+    cancelled: t("seriesStatus.cancelled"),
+    upcoming: t("seriesStatus.upcoming"),
  };
  const seriesStatusOptions = [
-    { value: "", label: "Tous les statuts" },
+    { value: "", label: t("seriesStatus.allStatuses") },
    ...dbStatuses.map((s) => ({ value: s, label: KNOWN_STATUSES[s] || s })),
  ];

@@ -52,7 +54,7 @@ export default async function LibrarySeriesPage({
    <div className="space-y-6">
      <LibrarySubPageHeader
        library={library}
-        title="Séries"
+        title={t("series.title")}
        icon={
          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
@@ -81,7 +83,7 @@ export default async function LibrarySeriesPage({
                  <div className="aspect-[2/3] relative bg-muted/50">
                    <Image
                      src={getBookCoverUrl(s.first_book_id)}
-                      alt={`Couverture de ${s.name}`}
+                      alt={t("books.coverOf", { name: s.name })}
                      fill
                      className="object-cover"
                      unoptimized
@@ -89,11 +91,11 @@ export default async function LibrarySeriesPage({
                  </div>
                  <div className="p-3">
                    <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
-                      {s.name === "unclassified" ? "Non classé" : s.name}
+                      {s.name === "unclassified" ? t("books.unclassified") : s.name}
                    </h3>
                    <div className="flex items-center justify-between mt-1">
                      <p className="text-xs text-muted-foreground">
-                        {s.books_read_count}/{s.book_count} lu{s.book_count !== 1 ? 's' : ''}
+                        {t("series.readCount", { read: String(s.books_read_count), total: String(s.book_count) })}
                      </p>
                      <MarkSeriesReadButton
                        seriesName={s.name}
@@ -110,17 +112,12 @@ export default async function LibrarySeriesPage({
                          s.series_status === "cancelled" ? "bg-red-500/15 text-red-600" :
                          "bg-muted text-muted-foreground"
                        }`}>
-                          {s.series_status === "ongoing" ? "En cours" :
-                           s.series_status === "ended" ? "Terminée" :
-                           s.series_status === "hiatus" ? "Hiatus" :
-                           s.series_status === "cancelled" ? "Annulée" :
-                           s.series_status === "upcoming" ? "À paraître" :
-                           s.series_status}
+                          {KNOWN_STATUSES[s.series_status] || s.series_status}
                        </span>
                      )}
                      {s.missing_count != null && s.missing_count > 0 && (
                        <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-yellow-500/15 text-yellow-600">
-                          {s.missing_count} manquant{s.missing_count > 1 ? "s" : ""}
+                          {t("series.missingCount", { count: String(s.missing_count) })}
                        </span>
                      )}
                    </div>
@@ -139,7 +136,7 @@ export default async function LibrarySeriesPage({
        </>
      ) : (
        <div className="text-center py-12 text-muted-foreground">
-          <p>Aucune série trouvée dans cette bibliothèque</p>
+          <p>{t("librarySeries.noSeries")}</p>
        </div>
      )}
    </div>