MOH
0a5f77d8de
- Add lib/db (Drizzle schema: 7 tables + 6 enums + relations, postgres.js client), drizzle.config.ts, lib/db/enums.ts (Prisma-compatible enum objects) - Rewrite all 14 app consumers + 4 admin components to Drizzle - Move the test DB layer to Drizzle + in-process PGlite; convert all 8 integration test files + factories (371 tests green) - Remove Prisma: deps, prisma/ schema+migrations, lib/prisma.ts, Dockerfile prisma generate; wire db:generate/migrate/push/studio to drizzle-kit; update Makefile - Preserve the old seed as scripts/legacy-prisma-seed.cjs (needs a Drizzle rewrite)
851 lines
33 KiB
TypeScript
851 lines
33 KiB
TypeScript
"use client";
|
|
|
|
/* eslint-disable @next/next/no-img-element */
|
|
|
|
import { MediaKind } from "@/lib/db/enums";
|
|
import {
|
|
Check,
|
|
FileText,
|
|
Globe2,
|
|
ImageIcon,
|
|
Languages,
|
|
Palette,
|
|
Search,
|
|
Type,
|
|
Upload,
|
|
} from "lucide-react";
|
|
import { useEffect, useId, useMemo, useRef, useState } from "react";
|
|
|
|
import { StatsCard } from "@/components/dashboard/stats-card";
|
|
import { AppCard } from "@/components/ui/app-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 {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
|
|
import type { AppLocale } from "@/lib/locale";
|
|
import type { MediaOption } from "@/lib/media";
|
|
import { buildSiteThemeTokens } from "@/lib/site-theme";
|
|
import {
|
|
PAGE_TITLE_TOKEN,
|
|
SITE_NAME_TOKEN,
|
|
type SiteSettings,
|
|
type SiteSettingsMediaBindings,
|
|
} from "@/lib/site-settings";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type SiteSettingsFormProps = {
|
|
mode: "brand" | "localization";
|
|
action: (formData: FormData) => Promise<void>;
|
|
initialSettings: SiteSettings;
|
|
initialBindings: SiteSettingsMediaBindings;
|
|
mediaOptions: MediaOption[];
|
|
};
|
|
|
|
type MediaFieldState = {
|
|
mode: "upload" | "library";
|
|
assetId: string;
|
|
url: string;
|
|
label: string;
|
|
kind: MediaKind;
|
|
};
|
|
|
|
const localeFields: Array<{
|
|
key: AppLocale;
|
|
label: string;
|
|
suffix: "Ar" | "En" | "De";
|
|
sampleTitle: string;
|
|
}> = [
|
|
{ key: "ar", label: "Arabic", suffix: "Ar", sampleTitle: "Home" },
|
|
{ key: "en", label: "English", suffix: "En", sampleTitle: "About" },
|
|
{ key: "de", label: "Deutsch", suffix: "De", sampleTitle: "Portfolio" },
|
|
];
|
|
|
|
function createImageFieldState(
|
|
assetId: string | null | undefined,
|
|
url: string | null | undefined,
|
|
label: string,
|
|
): MediaFieldState {
|
|
if (assetId) {
|
|
return {
|
|
mode: "library",
|
|
assetId,
|
|
url: "",
|
|
label,
|
|
kind: MediaKind.IMAGE,
|
|
};
|
|
}
|
|
|
|
return {
|
|
mode: "upload",
|
|
assetId: "",
|
|
url: url ?? "",
|
|
label,
|
|
kind: MediaKind.IMAGE,
|
|
};
|
|
}
|
|
|
|
function getMediaPreviewUrl(
|
|
value: MediaFieldState,
|
|
options: MediaOption[],
|
|
fallbackUrl: string | null | undefined,
|
|
) {
|
|
if (value.mode === "library") {
|
|
return options.find((option) => option.id === value.assetId)?.url ?? fallbackUrl ?? "";
|
|
}
|
|
|
|
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 BadgeLike({ children }: { children: string }) {
|
|
return (
|
|
<span className="inline-flex items-center rounded-full border border-border/70 bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground">
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
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 (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-h-[calc(100vh-1.5rem)] w-[calc(100vw-1rem)] max-w-4xl overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
<DialogDescription>Bild aus der Media Library auswaehlen.</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={searchId}
|
|
value={query}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
className="pl-9"
|
|
placeholder="Search media"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
|
{visibleOptions.length > 0 ? (
|
|
visibleOptions.map((option) => {
|
|
const isActive = option.id === selectedAssetId;
|
|
|
|
return (
|
|
<button
|
|
key={option.id}
|
|
type="button"
|
|
onClick={() => {
|
|
onSelect(option);
|
|
onOpenChange(false);
|
|
}}
|
|
className={cn(
|
|
"overflow-hidden rounded-nested border text-left transition-colors",
|
|
isActive
|
|
? "border-input bg-accent/30"
|
|
: "border-border/70 bg-background hover:bg-accent/10",
|
|
)}
|
|
>
|
|
<div className="aspect-[4/3] bg-muted/30">
|
|
{option.url ? (
|
|
<img src={option.url} alt={option.label} className="h-full w-full object-cover" />
|
|
) : null}
|
|
</div>
|
|
<div className="flex items-center gap-3 p-3">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-foreground">{option.label}</p>
|
|
<p className="truncate text-xs text-muted-foreground">{option.source}</p>
|
|
</div>
|
|
{isActive ? <Check className="h-4 w-4 text-brand-primary" /> : null}
|
|
</div>
|
|
</button>
|
|
);
|
|
})
|
|
) : (
|
|
<div className="col-span-full rounded-nested border border-dashed border-input px-4 py-8 text-sm text-muted-foreground">
|
|
No media found.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
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<HTMLInputElement | null>(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 (
|
|
<>
|
|
<AppCard level={2} layer="single" padding="sm">
|
|
<div className="grid gap-4 lg:grid-cols-[180px_minmax(0,1fr)]">
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-semibold text-foreground">{title}</p>
|
|
<div className="flex h-20 w-full items-center justify-center overflow-hidden rounded-nested border border-border/70 bg-muted/30">
|
|
{previewUrl ? (
|
|
<img src={previewUrl} alt={title} className="h-full w-full object-contain p-2" />
|
|
) : (
|
|
<ImageIcon className="h-5 w-5 text-muted-foreground" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<input ref={hiddenInputRef} type="hidden" name={inputName} value={serializedValue} />
|
|
|
|
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_auto]">
|
|
<div className="relative">
|
|
<Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
value={value.label}
|
|
onChange={(event) => onChange({ ...value, label: event.target.value })}
|
|
placeholder="Label"
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
|
|
<label
|
|
htmlFor={fileInputId}
|
|
className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-nested border border-input bg-background px-4 text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
|
>
|
|
<Upload className="h-4 w-4" />
|
|
Upload
|
|
</label>
|
|
|
|
<Button type="button" variant="outline" onClick={() => setIsLibraryOpen(true)}>
|
|
<ImageIcon className="h-4 w-4" />
|
|
Library
|
|
</Button>
|
|
</div>
|
|
|
|
<input
|
|
id={fileInputId}
|
|
name={fileFieldName}
|
|
type="file"
|
|
accept={accept}
|
|
className="hidden"
|
|
onChange={(event) => {
|
|
const nextLabel = event.target.files?.[0]?.name.replace(/\.[^.]+$/, "") ?? value.label;
|
|
|
|
onChange({
|
|
...value,
|
|
mode: "upload",
|
|
assetId: "",
|
|
label: value.label.trim() ? value.label : nextLabel,
|
|
});
|
|
}}
|
|
/>
|
|
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<BadgeLike>{value.mode === "library" && value.assetId ? "Library selected" : "Upload mode"}</BadgeLike>
|
|
{value.assetId ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 px-2 text-destructive hover:bg-destructive/5 hover:text-destructive"
|
|
onClick={() =>
|
|
onChange({
|
|
...value,
|
|
mode: "upload",
|
|
assetId: "",
|
|
url: "",
|
|
})
|
|
}
|
|
>
|
|
{clearLabel}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
|
|
<MediaLibraryModal
|
|
open={isLibraryOpen}
|
|
onOpenChange={setIsLibraryOpen}
|
|
options={options.filter((option) => option.kind === MediaKind.IMAGE)}
|
|
selectedAssetId={value.assetId}
|
|
title={title}
|
|
onSelect={(option) =>
|
|
onChange({
|
|
...value,
|
|
mode: "library",
|
|
assetId: option.id,
|
|
url: "",
|
|
label: option.label,
|
|
})
|
|
}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function LocalizedFieldsSection({
|
|
settings,
|
|
setSettings,
|
|
}: {
|
|
settings: SiteSettings;
|
|
setSettings: React.Dispatch<React.SetStateAction<SiteSettings>>;
|
|
}) {
|
|
return (
|
|
<section className="space-y-5">
|
|
<div className="space-y-2">
|
|
<h2 className="text-lg font-semibold text-foreground">Localized Titles And Copy</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Nutze <code>{PAGE_TITLE_TOKEN}</code> und <code>{SITE_NAME_TOKEN}</code> fuer die globalen
|
|
Titelvorlagen pro Sprache.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-5 lg:grid-cols-3">
|
|
{localeFields.map((locale) => (
|
|
<AppCard key={locale.key} level={2} layer="single" padding="sm" className="space-y-4">
|
|
<p className="text-sm font-semibold text-foreground">{locale.label}</p>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`siteName${locale.suffix}`} className="sr-only">Site Name</Label>
|
|
<div className="relative">
|
|
<Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`siteName${locale.suffix}`}
|
|
name={`siteName${locale.suffix}`}
|
|
value={settings.locales[locale.key].siteName}
|
|
onChange={(event) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
locales: {
|
|
...current.locales,
|
|
[locale.key]: {
|
|
...current.locales[locale.key],
|
|
siteName: event.target.value,
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
placeholder="Site Name"
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`titleTemplate${locale.suffix}`} className="sr-only">Title Template</Label>
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`titleTemplate${locale.suffix}`}
|
|
name={`titleTemplate${locale.suffix}`}
|
|
value={settings.locales[locale.key].titleTemplate}
|
|
onChange={(event) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
locales: {
|
|
...current.locales,
|
|
[locale.key]: {
|
|
...current.locales[locale.key],
|
|
titleTemplate: event.target.value,
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
placeholder="Title Template"
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`siteDescription${locale.suffix}`} className="sr-only">Site Description</Label>
|
|
<div className="relative">
|
|
<FileText className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`siteDescription${locale.suffix}`}
|
|
name={`siteDescription${locale.suffix}`}
|
|
value={settings.locales[locale.key].siteDescription}
|
|
onChange={(event) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
locales: {
|
|
...current.locales,
|
|
[locale.key]: {
|
|
...current.locales[locale.key],
|
|
siteDescription: event.target.value,
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
placeholder="Site Description"
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`subhead${locale.suffix}`} className="sr-only">Subhead</Label>
|
|
<div className="relative">
|
|
<Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`subhead${locale.suffix}`}
|
|
name={`subhead${locale.suffix}`}
|
|
value={settings.locales[locale.key].subhead}
|
|
onChange={(event) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
locales: {
|
|
...current.locales,
|
|
[locale.key]: {
|
|
...current.locales[locale.key],
|
|
subhead: event.target.value,
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
placeholder="Subhead"
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function SiteSettingsForm({
|
|
mode,
|
|
action,
|
|
initialSettings,
|
|
initialBindings,
|
|
mediaOptions,
|
|
}: SiteSettingsFormProps) {
|
|
const [settings, setSettings] = useState(initialSettings);
|
|
const [siteLogoLight, setSiteLogoLight] = useState<MediaFieldState>(
|
|
createImageFieldState(initialBindings.siteLogoLight?.assetId, initialBindings.siteLogoLight?.url, "Site Logo Light"),
|
|
);
|
|
const [siteLogoDark, setSiteLogoDark] = useState<MediaFieldState>(
|
|
createImageFieldState(initialBindings.siteLogoDark?.assetId, initialBindings.siteLogoDark?.url, "Site Logo Dark"),
|
|
);
|
|
const [favicon, setFavicon] = useState<MediaFieldState>(
|
|
createImageFieldState(initialBindings.favicon?.assetId, initialBindings.favicon?.url, "Favicon"),
|
|
);
|
|
const [defaultOgImage, setDefaultOgImage] = useState<MediaFieldState>(
|
|
createImageFieldState(initialBindings.defaultOgImage?.assetId, initialBindings.defaultOgImage?.url, "Default OG Image"),
|
|
);
|
|
|
|
const themeTokens = useMemo(() => buildSiteThemeTokens(settings.brand.primaryColor), [settings.brand.primaryColor]);
|
|
const siteLogoLightPreviewUrl = getMediaPreviewUrl(siteLogoLight, mediaOptions, initialBindings.siteLogoLight?.url);
|
|
const siteLogoDarkPreviewUrl = getMediaPreviewUrl(siteLogoDark, mediaOptions, initialBindings.siteLogoDark?.url);
|
|
const faviconPreviewUrl = getMediaPreviewUrl(favicon, mediaOptions, initialBindings.favicon?.url);
|
|
const defaultOgImagePreviewUrl = getMediaPreviewUrl(defaultOgImage, mediaOptions, initialBindings.defaultOgImage?.url);
|
|
const routePreview = settings.defaultLocale === "de" ? "/about" : `/${settings.defaultLocale}/about`;
|
|
const brandAssetsCount = [siteLogoLight, siteLogoDark].filter((item) => item.assetId).length;
|
|
const previewAssetsCount = [favicon, defaultOgImage].filter((item) => item.assetId).length;
|
|
|
|
return (
|
|
<form id="site-settings-form" action={action} className="space-y-6">
|
|
{mode === "brand" ? (
|
|
<div className="grid gap-4 md:grid-cols-3 xl:min-w-[620px]">
|
|
<StatsCard title="Primary" value={settings.brand.primaryColor} icon={Palette} />
|
|
<StatsCard title="Logos" value={String(brandAssetsCount)} icon={ImageIcon} />
|
|
<StatsCard title="Preview" value={String(previewAssetsCount)} icon={Globe2} />
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,1fr)]">
|
|
<div className="space-y-6">
|
|
{mode === "brand" ? (
|
|
<>
|
|
<section className="space-y-5">
|
|
<div className="space-y-2">
|
|
<h2 className="text-lg font-semibold text-foreground">Brand Foundation</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Steuert die Primaerfarbe der Oberflaeche sowie die wichtigsten Brand Assets.
|
|
</p>
|
|
</div>
|
|
|
|
<AppCard level={2} layer="single" padding="sm" className="space-y-4">
|
|
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="primaryColor" className="sr-only">Primary Color</Label>
|
|
<div className="flex items-center gap-3">
|
|
<Input
|
|
id="primaryColor"
|
|
name="primaryColor"
|
|
type="color"
|
|
value={settings.brand.primaryColor}
|
|
onChange={(event) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
brand: {
|
|
...current.brand,
|
|
primaryColor: event.target.value,
|
|
},
|
|
}))
|
|
}
|
|
className="h-11 w-20 rounded-nested p-1"
|
|
/>
|
|
<Input
|
|
aria-label="Primary Color Value"
|
|
value={settings.brand.primaryColor}
|
|
onChange={(event) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
brand: {
|
|
...current.brand,
|
|
primaryColor: event.target.value,
|
|
},
|
|
}))
|
|
}
|
|
placeholder="#dc5a35"
|
|
className="font-mono"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
|
|
<div
|
|
className="rounded-nested border border-border/70 p-3 text-white"
|
|
style={{ backgroundColor: `hsl(${themeTokens.light.primary})` }}
|
|
>
|
|
<p className="text-xs uppercase tracking-[0.14em] text-white/72">Light token</p>
|
|
<p className="mt-2 text-sm font-semibold">brand-primary</p>
|
|
</div>
|
|
<div
|
|
className="rounded-nested border border-border/70 p-3 text-white"
|
|
style={{ backgroundColor: `hsl(${themeTokens.dark.primary})` }}
|
|
>
|
|
<p className="text-xs uppercase tracking-[0.14em] text-white/72">Dark token</p>
|
|
<p className="mt-2 text-sm font-semibold">brand-primary</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
</section>
|
|
|
|
<section className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-foreground">Brand And Preview Images</h2>
|
|
|
|
<SiteSettingsMediaRow
|
|
title="Site Logo Light"
|
|
value={siteLogoLight}
|
|
onChange={setSiteLogoLight}
|
|
options={mediaOptions}
|
|
inputName="siteLogoLightMedia"
|
|
fileFieldName="siteLogoLightFile"
|
|
accept="image/*,.svg"
|
|
clearLabel="Remove"
|
|
fallbackUrl={initialBindings.siteLogoLight?.url}
|
|
/>
|
|
|
|
<SiteSettingsMediaRow
|
|
title="Site Logo Dark"
|
|
value={siteLogoDark}
|
|
onChange={setSiteLogoDark}
|
|
options={mediaOptions}
|
|
inputName="siteLogoDarkMedia"
|
|
fileFieldName="siteLogoDarkFile"
|
|
accept="image/*,.svg"
|
|
clearLabel="Remove"
|
|
fallbackUrl={initialBindings.siteLogoDark?.url}
|
|
/>
|
|
|
|
<SiteSettingsMediaRow
|
|
title="Favicon"
|
|
value={favicon}
|
|
onChange={setFavicon}
|
|
options={mediaOptions}
|
|
inputName="faviconMedia"
|
|
fileFieldName="faviconFile"
|
|
accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
|
|
clearLabel="Remove"
|
|
fallbackUrl={initialBindings.favicon?.url}
|
|
/>
|
|
|
|
<SiteSettingsMediaRow
|
|
title="Default OG Image"
|
|
value={defaultOgImage}
|
|
onChange={setDefaultOgImage}
|
|
options={mediaOptions}
|
|
inputName="defaultOgImageMedia"
|
|
fileFieldName="defaultOgImageFile"
|
|
accept="image/*,.svg"
|
|
clearLabel="Remove"
|
|
fallbackUrl={initialBindings.defaultOgImage?.url}
|
|
/>
|
|
</section>
|
|
</>
|
|
) : (
|
|
<>
|
|
<section className="space-y-5">
|
|
<div className="space-y-2">
|
|
<h2 className="text-lg font-semibold text-foreground">Visitor Language Routing</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
Waehlt die Standardsprache fuer Besucher ohne Sprach-Prefix. Das ist die neue globale Spracheinstellung.
|
|
</p>
|
|
</div>
|
|
|
|
<AppCard level={2} layer="single" padding="sm" className="space-y-4">
|
|
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="defaultLocaleTrigger" className="sr-only">Default Locale</Label>
|
|
<Select
|
|
name="defaultLocale"
|
|
value={settings.defaultLocale}
|
|
onValueChange={(value) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
defaultLocale: value as AppLocale,
|
|
}))
|
|
}
|
|
>
|
|
<SelectTrigger id="defaultLocaleTrigger">
|
|
<SelectValue placeholder="Select locale" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="de">Deutsch</SelectItem>
|
|
<SelectItem value="en">English</SelectItem>
|
|
<SelectItem value="ar">Arabic</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="rounded-nested border border-border/70 bg-muted/20 p-4">
|
|
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
|
<Globe2 className="h-4 w-4 text-brand-primary" />
|
|
Route preview
|
|
</div>
|
|
<p className="mt-3 text-sm text-muted-foreground">
|
|
<code>/about</code> will open <code>{routePreview}</code>.
|
|
</p>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
Existing localized URLs stay available. Only prefix-free entry routes change.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
</section>
|
|
|
|
<LocalizedFieldsSection settings={settings} setSettings={setSettings} />
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="xl:sticky xl:top-6 xl:self-start">
|
|
<section className="space-y-4">
|
|
{mode === "brand" ? (
|
|
<>
|
|
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
|
|
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Search Result</p>
|
|
<div className="rounded-nested border border-border/70 bg-background p-3">
|
|
<div className="flex items-center gap-3">
|
|
{faviconPreviewUrl ? (
|
|
<img src={faviconPreviewUrl} alt="Favicon" className="h-4 w-4 rounded-sm object-cover" />
|
|
) : (
|
|
<div className="flex h-4 w-4 items-center justify-center rounded-sm border border-border/70 bg-muted/40">
|
|
<Palette className="h-3 w-3 text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
<p className="text-sm font-medium" style={{ color: settings.brand.primaryColor }}>
|
|
{buildPreviewTitle(settings.locales.de.titleTemplate, "About", settings.locales.de.siteName)}
|
|
</p>
|
|
</div>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
{settings.locales.de.siteDescription || "No description"}
|
|
</p>
|
|
</div>
|
|
</AppCard>
|
|
|
|
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
|
|
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Brand Assets</p>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<AppCard level={1} layer="single" padding="sm">
|
|
<p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Light</p>
|
|
{siteLogoLightPreviewUrl ? (
|
|
<img src={siteLogoLightPreviewUrl} alt="Site Logo Light" className="h-10 w-full object-contain" />
|
|
) : (
|
|
<div className="flex h-10 items-center text-sm text-muted-foreground">No logo selected</div>
|
|
)}
|
|
</AppCard>
|
|
|
|
<div className="rounded-nested border border-border/70 bg-slate-950 p-3">
|
|
<p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-white/55">Dark</p>
|
|
{siteLogoDarkPreviewUrl ? (
|
|
<img src={siteLogoDarkPreviewUrl} alt="Site Logo Dark" className="h-10 w-full object-contain" />
|
|
) : (
|
|
<div className="flex h-10 items-center text-sm text-white/60">No logo selected</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
|
|
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
|
|
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Social Preview</p>
|
|
<div className="overflow-hidden rounded-nested border border-border/70 bg-background">
|
|
<div className="h-1.5" style={{ backgroundColor: settings.brand.primaryColor }} />
|
|
{defaultOgImagePreviewUrl ? (
|
|
<img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-24 w-full object-cover" />
|
|
) : (
|
|
<div className="flex h-24 items-center justify-center bg-muted/30 text-sm text-muted-foreground">
|
|
No OG image selected
|
|
</div>
|
|
)}
|
|
<div className="space-y-1.5 p-3">
|
|
<p className="text-sm font-medium text-foreground">
|
|
{buildPreviewTitle(settings.locales.en.titleTemplate, "Portfolio", settings.locales.en.siteName)}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{settings.locales.en.siteDescription || "No description"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
</>
|
|
) : (
|
|
<>
|
|
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
|
|
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Visitor Routing</p>
|
|
<div className="rounded-nested border border-border/70 bg-background p-3">
|
|
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
|
<Languages className="h-4 w-4 text-brand-primary" />
|
|
Default locale: {settings.defaultLocale.toUpperCase()}
|
|
</div>
|
|
<p className="mt-3 text-sm text-muted-foreground">
|
|
Prefix-free URLs resolve to <code>{routePreview}</code>.
|
|
</p>
|
|
</div>
|
|
</AppCard>
|
|
|
|
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
|
|
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Locale Summary</p>
|
|
<div className="rounded-nested border border-border/70 bg-background">
|
|
<Table>
|
|
<TableBody>
|
|
{localeFields.map((locale) => (
|
|
<TableRow key={locale.key}>
|
|
<TableCell className="w-24 font-medium">{locale.label}</TableCell>
|
|
<TableCell>
|
|
<p className="text-sm font-medium text-foreground">
|
|
{buildPreviewTitle(
|
|
settings.locales[locale.key].titleTemplate,
|
|
locale.sampleTitle,
|
|
settings.locales[locale.key].siteName,
|
|
)}
|
|
</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
{settings.locales[locale.key].subhead || "No subhead"}
|
|
</p>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</AppCard>
|
|
</>
|
|
)}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button type="submit">{mode === "brand" ? "Save Brand Settings" : "Save Localization Settings"}</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|