diff --git a/components/root/site-settings-form.tsx b/components/root/site-settings-form.tsx
index 0c9bf5f..f01d613 100644
--- a/components/root/site-settings-form.tsx
+++ b/components/root/site-settings-form.tsx
@@ -3,22 +3,30 @@
/* eslint-disable @next/next/no-img-element */
import { MediaKind } from "@prisma/client";
-import { FileText, ImageIcon, Search, Type } from "lucide-react";
-import { useState } from "react";
+import { Check, FileText, ImageIcon, Search, Type, Upload } from "lucide-react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
-import { MediaFieldPicker, type MediaFieldState } from "@/components/root/media-field-picker";
import { AppCard } from "@/components/ui/app-card";
-import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+import type { AppLocale } from "@/lib/locale";
+import type { MediaOption } from "@/lib/media";
+import { cn } from "@/lib/utils";
import {
PAGE_TITLE_TOKEN,
SITE_NAME_TOKEN,
type SiteSettings,
type SiteSettingsMediaBindings,
} from "@/lib/site-settings";
-import type { AppLocale } from "@/lib/locale";
-import type { MediaOption } from "@/lib/media";
type SiteSettingsFormProps = {
action: (formData: FormData) => Promise
;
@@ -27,6 +35,14 @@ type SiteSettingsFormProps = {
mediaOptions: MediaOption[];
};
+type MediaFieldState = {
+ mode: "upload" | "library";
+ assetId: string;
+ url: string;
+ label: string;
+ kind: MediaKind;
+};
+
const localeFields: Array<{
key: AppLocale;
label: string;
@@ -65,28 +81,15 @@ function createImageFieldState(
url: "",
label,
kind: MediaKind.IMAGE,
- isCleared: false,
- };
- }
-
- if (url) {
- return {
- mode: "external",
- assetId: "",
- url,
- label,
- kind: MediaKind.IMAGE,
- isCleared: false,
};
}
return {
mode: "upload",
assetId: "",
- url: "",
+ url: url ?? "",
label,
kind: MediaKind.IMAGE,
- isCleared: false,
};
}
@@ -95,14 +98,6 @@ function getMediaPreviewUrl(
options: MediaOption[],
fallbackUrl: string | null | undefined,
) {
- if (value.isCleared) {
- return "";
- }
-
- if (value.mode === "external") {
- return value.url || fallbackUrl || "";
- }
-
if (value.mode === "library") {
return options.find((option) => option.id === value.assetId)?.url ?? fallbackUrl ?? "";
}
@@ -110,6 +105,276 @@ function getMediaPreviewUrl(
return fallbackUrl ?? "";
}
+function buildPreviewTitle(
+ titleTemplate: string,
+ sampleTitle: string,
+ siteName: string,
+) {
+ return titleTemplate.includes(PAGE_TITLE_TOKEN)
+ ? titleTemplate
+ .replace(PAGE_TITLE_TOKEN, sampleTitle)
+ .replaceAll(SITE_NAME_TOKEN, siteName)
+ : `${sampleTitle} | ${siteName}`;
+}
+
+function MediaLibraryModal({
+ open,
+ onOpenChange,
+ options,
+ selectedAssetId,
+ onSelect,
+ title,
+}: {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ options: MediaOption[];
+ selectedAssetId: string;
+ onSelect: (option: MediaOption) => void;
+ title: string;
+}) {
+ const searchId = useId();
+ const [query, setQuery] = useState("");
+ const visibleOptions = useMemo(() => {
+ const normalizedQuery = query.trim().toLowerCase();
+
+ if (!normalizedQuery) {
+ return options;
+ }
+
+ return options.filter((option) => option.label.toLowerCase().includes(normalizedQuery));
+ }, [options, query]);
+
+ useEffect(() => {
+ if (!open) {
+ setQuery("");
+ }
+ }, [open]);
+
+ return (
+
+ );
+}
+
+function SiteSettingsMediaRow({
+ title,
+ value,
+ onChange,
+ options,
+ inputName,
+ fileFieldName,
+ accept,
+ clearLabel,
+ fallbackUrl,
+}: {
+ title: string;
+ value: MediaFieldState;
+ onChange: (nextValue: MediaFieldState) => void;
+ options: MediaOption[];
+ inputName: string;
+ fileFieldName: string;
+ accept: string;
+ clearLabel: string;
+ fallbackUrl?: string | null;
+}) {
+ const [isLibraryOpen, setIsLibraryOpen] = useState(false);
+ const hiddenInputRef = useRef(null);
+ const fileInputId = useId();
+ const previewUrl = getMediaPreviewUrl(value, options, fallbackUrl);
+ const serializedValue = JSON.stringify({
+ mode: value.mode,
+ assetId: value.assetId,
+ url: value.url,
+ label: value.label,
+ kind: value.kind,
+ });
+
+ useEffect(() => {
+ const hiddenInput = hiddenInputRef.current;
+
+ if (!hiddenInput) {
+ return;
+ }
+
+ hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
+ hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+ }, [serializedValue]);
+
+ return (
+ <>
+
+
+
+
{title}
+
+ {previewUrl ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+ onChange({ ...value, label: event.target.value })}
+ placeholder="Label"
+ className="pl-8"
+ />
+
+
+
+
+
+
+
+
{
+ const nextLabel = event.target.files?.[0]?.name.replace(/\.[^.]+$/, "") ?? value.label;
+
+ onChange({
+ ...value,
+ mode: "upload",
+ assetId: "",
+ label: value.label.trim() ? value.label : nextLabel,
+ });
+ }}
+ />
+
+
+ {value.mode === "library" && value.assetId ? "Library selected" : "Upload mode"}
+ {value.assetId ? (
+
+ ) : null}
+
+
+
-