-
- {/* Header */}
-
-
{t("editBook.editMetadata")}
-
-
-
- {/* Body */}
-
- ,
- document.body
- ) : null;
+
+ );
return (
<>
diff --git a/apps/backoffice/app/components/EditSeriesForm.tsx b/apps/backoffice/app/components/EditSeriesForm.tsx
index 9728aad..0371268 100644
--- a/apps/backoffice/app/components/EditSeriesForm.tsx
+++ b/apps/backoffice/app/components/EditSeriesForm.tsx
@@ -1,7 +1,7 @@
"use client";
import { useState, useTransition, useEffect, useCallback } from "react";
-import { createPortal } from "react-dom";
+import { Modal } from "./ui/Modal";
import { useRouter } from "next/navigation";
import { FormField, FormLabel, FormInput } from "./ui/Form";
import { useTranslation } from "../../lib/i18n/context";
@@ -225,33 +225,8 @@ export function EditSeriesForm({
});
};
- const modal = isOpen ? createPortal(
- <>
- {/* Backdrop */}
-
!isPending && handleClose()}
- />
-
- {/* Modal */}
-
-
- {/* Header */}
-
-
{t("editSeries.title")}
-
-
-
- {/* Body */}
+ const modal = (
+
-
-
- ,
- document.body
- ) : null;
+
+ );
return (
<>
diff --git a/apps/backoffice/app/components/MetadataSearchModal.tsx b/apps/backoffice/app/components/MetadataSearchModal.tsx
index b49e255..7acd250 100644
--- a/apps/backoffice/app/components/MetadataSearchModal.tsx
+++ b/apps/backoffice/app/components/MetadataSearchModal.tsx
@@ -1,9 +1,8 @@
"use client";
import { useState, useEffect, useCallback } from "react";
-import { createPortal } from "react-dom";
import { useRouter } from "next/navigation";
-import { Icon } from "./ui";
+import { Icon, Modal } from "./ui";
import { ProviderIcon, PROVIDERS, providerLabel } from "./ProviderIcon";
import type { ExternalMetadataLinkDto, SeriesCandidateDto, MissingBooksDto, SyncReport } from "../../lib/api";
import { useTranslation } from "../../lib/i18n/context";
@@ -238,26 +237,8 @@ export function MetadataSearchModal({
}
const modal = isOpen
- ? createPortal(
- <>
-
-
-
- {/* Header */}
-
-
- {step === "linked" ? t("metadata.metadataLink") : t("metadata.searchExternal")}
-
-
-
-
+ ? (
+
{/* Provider selector — visible during searching & results */}
{(step === "searching" || step === "results") && (
@@ -687,10 +668,7 @@ export function MetadataSearchModal({
)}
-
-
- ,
- document.body,
+
)
: null;
diff --git a/apps/backoffice/app/components/ui/Modal.tsx b/apps/backoffice/app/components/ui/Modal.tsx
new file mode 100644
index 0000000..53728e2
--- /dev/null
+++ b/apps/backoffice/app/components/ui/Modal.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import { ReactNode } from "react";
+
+const MAX_WIDTH_MAP = {
+ sm: "max-w-sm",
+ md: "max-w-md",
+ lg: "max-w-lg",
+ xl: "max-w-xl",
+ "2xl": "max-w-2xl",
+ "3xl": "max-w-3xl",
+} as const;
+
+interface ModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ title?: string;
+ children: ReactNode;
+ maxWidth?: keyof typeof MAX_WIDTH_MAP;
+ /** Disable closing via backdrop click (e.g. while a form is submitting) */
+ disableClose?: boolean;
+}
+
+export function Modal({ isOpen, onClose, title, children, maxWidth = "2xl", disableClose = false }: ModalProps) {
+ if (!isOpen) return null;
+
+ return createPortal(
+ <>
+ {/* Backdrop */}
+
!disableClose && onClose()}
+ />
+
+ {/* Container */}
+
+
+ {/* Header */}
+ {title && (
+
+ )}
+
+ {/* Body */}
+ {children}
+
+
+ ,
+ document.body
+ );
+}
diff --git a/apps/backoffice/app/components/ui/index.ts b/apps/backoffice/app/components/ui/index.ts
index d8f9ce3..5abc7bd 100644
--- a/apps/backoffice/app/components/ui/index.ts
+++ b/apps/backoffice/app/components/ui/index.ts
@@ -21,3 +21,4 @@ export { PageIcon, NavIcon, Icon } from "./Icon";
export { CursorPagination, OffsetPagination } from "./Pagination";
export { Tooltip } from "./Tooltip";
export { toast, Toaster } from "./Toast";
+export { Modal } from "./Modal";
diff --git a/apps/backoffice/lib/searchParams.ts b/apps/backoffice/lib/searchParams.ts
new file mode 100644
index 0000000..046a7e2
--- /dev/null
+++ b/apps/backoffice/lib/searchParams.ts
@@ -0,0 +1,25 @@
+type RawSearchParams = { [key: string]: string | string[] | undefined };
+
+/** Extract a string param, returning undefined if missing or not a string. */
+export function paramString(params: RawSearchParams, key: string): string | undefined {
+ const v = params[key];
+ return typeof v === "string" ? v : undefined;
+}
+
+/** Extract a string param with a default value. */
+export function paramStringOr(params: RawSearchParams, key: string, defaultValue: string): string {
+ return paramString(params, key) ?? defaultValue;
+}
+
+/** Extract a numeric param, returning a default if missing or not parseable. */
+export function paramInt(params: RawSearchParams, key: string, defaultValue: number): number {
+ const v = params[key];
+ if (typeof v !== "string") return defaultValue;
+ const n = parseInt(v, 10);
+ return Number.isNaN(n) ? defaultValue : n;
+}
+
+/** Extract a boolean param (true only if value is exactly "true"). */
+export function paramBool(params: RawSearchParams, key: string): boolean {
+ return params[key] === "true";
+}