Refactor root admin dashboards and settings
This commit is contained in:
MOH
@@ -17,7 +17,7 @@ const copy = {
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
portfolio: "Portfolio",
|
||||
maintenanceText: "Wenn aktiv, werden alle Seiten auf die Coming Soon Seite weitergeleitet.",
|
||||
maintenanceOn: "Aktiv",
|
||||
|
||||
@@ -18,7 +18,7 @@ const copy = {
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
marquee: "Marquee",
|
||||
smtp: "SMTP",
|
||||
portfolio: "Portfolio",
|
||||
|
||||
@@ -43,7 +43,6 @@ export async function createMediaAssetAction(formData: FormData) {
|
||||
kind,
|
||||
label: String(formData.get("label") ?? ""),
|
||||
uploadFile: formData.get("file"),
|
||||
externalUrl: String(formData.get("externalUrl") ?? ""),
|
||||
});
|
||||
|
||||
revalidateMediaPages();
|
||||
|
||||
+4
-163
@@ -1,29 +1,12 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
|
||||
import { ExternalLink, FileType2, ImageIcon, Link2, Tag, Trash2, Upload } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { FlashMessage } from "@/components/root/flash-message";
|
||||
import { MediaLibraryManager } from "@/components/root/media-library-manager";
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
|
||||
import { getAdminMediaAssets } from "@/lib/media";
|
||||
|
||||
import { createMediaAssetAction, deleteMediaAssetAction } from "./actions";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const copy = {
|
||||
@@ -33,21 +16,10 @@ const copy = {
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
createTitle: "Neue Datei",
|
||||
createDescription: "Datei hochladen oder externe URL zentral fuer spaetere Wiederverwendung speichern.",
|
||||
label: "Bezeichnung",
|
||||
kind: "Typ",
|
||||
uploadFile: "Datei hochladen",
|
||||
externalUrl: "Externe URL",
|
||||
saveMedia: "Datei speichern",
|
||||
open: "Oeffnen",
|
||||
delete: "Loeschen",
|
||||
usages: "Verwendungen",
|
||||
noAssets: "Noch keine Dateien vorhanden.",
|
||||
};
|
||||
|
||||
type RootMediaPageProps = {
|
||||
@@ -92,138 +64,7 @@ export default async function RootMediaPage({ searchParams }: RootMediaPageProps
|
||||
</MotionFade>
|
||||
) : null}
|
||||
|
||||
<MotionFade delay={0.15}>
|
||||
<AppCard>
|
||||
<CardHeader>
|
||||
<CardTitle>{copy.createTitle}</CardTitle>
|
||||
<CardDescription>{copy.createDescription}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form action={createMediaAssetAction} className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="label" className="sr-only">
|
||||
{copy.label}
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Tag className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input id="label" name="label" required placeholder={copy.label} className="pl-9" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="kind" className="sr-only">
|
||||
{copy.kind}
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<FileType2 className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Select name="kind" defaultValue="IMAGE">
|
||||
<SelectTrigger id="kind" className="pl-9">
|
||||
<SelectValue placeholder={copy.kind} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="IMAGE">IMAGE</SelectItem>
|
||||
<SelectItem value="DOCUMENT">DOCUMENT</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor="file" className="sr-only">
|
||||
{copy.uploadFile}
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Upload className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input id="file" name="file" type="file" accept="image/*,.svg,.pdf" className="pl-9 file:mr-3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor="externalUrl" className="sr-only">
|
||||
{copy.externalUrl}
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Link2 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input id="externalUrl" name="externalUrl" placeholder={copy.externalUrl} className="pl-9" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<Button type="submit">
|
||||
<ImageIcon className="h-4 w-4" />
|
||||
{copy.saveMedia}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{mediaAssets.map((asset, index) => (
|
||||
<MotionFade key={asset.id} delay={0.18 + index * 0.04}>
|
||||
<AppCard>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{asset.label}</CardTitle>
|
||||
<CardDescription className="flex flex-wrap gap-2">
|
||||
<span>{asset.kind}</span>
|
||||
<span>{asset.source}</span>
|
||||
<span>{asset.usages.length} {copy.usages}</span>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{asset.kind === "IMAGE" ? (
|
||||
<div className="overflow-hidden rounded-nested border bg-card">
|
||||
<img src={asset.url} alt={asset.label} className="h-48 w-full object-cover" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-nested border bg-card px-4 py-6 text-sm text-muted-foreground">
|
||||
{asset.fileName}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 text-sm text-muted-foreground">
|
||||
<p className="truncate">{asset.url}</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Link href={asset.url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 text-foreground">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
{copy.open}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{asset.usages.length > 0 ? (
|
||||
<div className="space-y-2 rounded-nested border bg-muted/40 px-4 py-3 text-xs text-muted-foreground">
|
||||
{asset.usages.map((usage) => (
|
||||
<p key={usage.id}>
|
||||
{usage.usageType} / {usage.entityType} / {usage.fieldKey}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<form action={deleteMediaAssetAction}>
|
||||
<input type="hidden" name="assetId" value={asset.id} />
|
||||
<Button type="submit" variant="destructive" disabled={asset.usages.length > 0}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
{copy.delete}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{mediaAssets.length === 0 ? (
|
||||
<MotionFade delay={0.2}>
|
||||
<AppCard>
|
||||
<CardContent className="p-6 text-sm text-muted-foreground">
|
||||
{copy.noAssets}
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
) : null}
|
||||
<MediaLibraryManager mediaAssets={mediaAssets} />
|
||||
</div>
|
||||
</RootDashboardShell>
|
||||
);
|
||||
|
||||
+59
-242
@@ -1,33 +1,15 @@
|
||||
import {
|
||||
ExternalLink,
|
||||
FolderKanban,
|
||||
Globe2,
|
||||
ImageIcon,
|
||||
LockKeyhole,
|
||||
ShieldAlert,
|
||||
Shapes,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { FolderKanban, ImageIcon, LockKeyhole, ShieldAlert } from "lucide-react";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { Container } from "@/components/layout/container";
|
||||
import { StatsCard } from "@/components/dashboard/stats-card";
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { DashboardCard } from "@/components/dashboard/dashboard-card";
|
||||
import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
|
||||
import { Badge, type BadgeProps } from "@/components/ui/badge";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
clearAdminSessionCookie,
|
||||
getAdminLockState,
|
||||
@@ -40,10 +22,7 @@ import {
|
||||
} from "@/lib/admin-auth";
|
||||
import { getMaintenanceMode } from "@/lib/app-config";
|
||||
import { getAdminMediaAssets } from "@/lib/media";
|
||||
import {
|
||||
getAdminPortfolioCategories,
|
||||
getAdminPortfolioProjects,
|
||||
} from "@/lib/portfolio";
|
||||
import { getAdminPortfolioCategories, getAdminPortfolioProjects } from "@/lib/portfolio";
|
||||
|
||||
type RootPageProps = {
|
||||
searchParams?: {
|
||||
@@ -55,31 +34,15 @@ export const dynamic = "force-dynamic";
|
||||
|
||||
const copy = {
|
||||
title: "Uebersicht",
|
||||
subtitle: "Interner Bereich fuer Kennzahlen und zentrale Navigation.",
|
||||
subtitle: "Kompakter Status zu Portfolio, Media und Wartung.",
|
||||
overview: "Uebersicht",
|
||||
maintenance: "Wartungsmodus",
|
||||
maintenanceTitle: "Wartungsmodus",
|
||||
maintenanceVisitorsClosed: "Website fuer Besucher geschlossen",
|
||||
maintenanceVisitorsShort: "Besucher gesperrt",
|
||||
maintenanceDescription:
|
||||
"Wenn aktiv, werden alle Seiten auf die Coming Soon Seite weitergeleitet.",
|
||||
maintenanceOpen: "Website fuer Besucher offen",
|
||||
maintenanceAction: "Zur Wartungsseite",
|
||||
uiKitTitle: "UI Kit",
|
||||
uiKitDescription: "Globale Referenz fuer Cards, Buttons, Inputs und Surface Levels.",
|
||||
uiKitAction: "Zur UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
portfolio: "Portfolio",
|
||||
portfolioTitle: "Portfolio",
|
||||
portfolioDescription: "Kategorien, Projekte, Abschnitte und Dateien verwalten.",
|
||||
portfolioAction: "Zum Portfolio",
|
||||
mediaTitle: "Media Library",
|
||||
mediaDescription: "Uploads, externe URLs und Verwendungsorte zentral verwalten.",
|
||||
mediaAction: "Zur Media Library",
|
||||
siteSettingsTitle: "SEO",
|
||||
siteSettingsDescription: "Favicon, Site Name, Description, Subhead und globale SEO Defaults verwalten.",
|
||||
siteSettingsAction: "Zu SEO",
|
||||
uiKit: "UI Kit",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
loginTitle: "Root Login",
|
||||
loginText: "Nur autorisierte Nutzer duerfen diesen Bereich verwenden.",
|
||||
passwordLabel: "Passwort",
|
||||
@@ -88,34 +51,13 @@ const copy = {
|
||||
lockedLogin: "Zu viele Fehlversuche. Bitte spaeter erneut versuchen.",
|
||||
configMissing: "ADMIN_PASSWORD und ADMIN_AUTH_SECRET fehlen in env.",
|
||||
basicAuthMissing: "ROOT_BASIC_AUTH_USER und ROOT_BASIC_AUTH_PASS fehlen in env.",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
uiKit: "UI Kit",
|
||||
tableTitle: "Bereiche",
|
||||
tableDescription: "Direkter Zugriff auf alle Verwaltungsbereiche mit aktuellem Status.",
|
||||
tableSection: "Bereich",
|
||||
tableSummary: "Zusammenfassung",
|
||||
tableStatus: "Status",
|
||||
tableAction: "Aktion",
|
||||
maintenanceStatusOn: "Aktiv",
|
||||
maintenanceStatusOff: "Inaktiv",
|
||||
authStatusOk: "Bereit",
|
||||
authStatusWarning: "Pruefen",
|
||||
authCard: "Root Zugang",
|
||||
authDescription: "Admin Passwort und Session Signatur sind gesetzt.",
|
||||
authDescriptionWarning: "Eine oder mehrere Root Variablen fehlen und sollten geprueft werden.",
|
||||
mediaCountDescription: "Verfuegbare Dateien fuer Portfolio und Inhalte.",
|
||||
projectCountDescription: "Gespeicherte Portfolio Projekte im System.",
|
||||
categoryCountDescription: "Portfolio Kategorien mit eigener Sortierung.",
|
||||
systemStatusTitle: "Systemstatus",
|
||||
systemStatusDescription: "Technischer Zustand des Root Bereichs und der wichtigsten Inhaltsbereiche.",
|
||||
maintenanceLabel: "Wartung",
|
||||
contentLabel: "Inhalte",
|
||||
contentDescription: "Portfolio, Media und Kategorien sind direkt aus diesem Bereich erreichbar.",
|
||||
publishedProjects: "Veroeffentlicht",
|
||||
totalProjects: "Projekte",
|
||||
totalCategories: "Kategorien",
|
||||
totalMedia: "Dateien",
|
||||
maintenanceOn: "Aktiv",
|
||||
maintenanceOff: "Inaktiv",
|
||||
portfolioOnline: "Portfolio online",
|
||||
mediaImages: "Media Images",
|
||||
maintenanceStatus: "Maintenance",
|
||||
drafts: "Drafts",
|
||||
activeCategories: "Active Categories",
|
||||
};
|
||||
|
||||
export default async function RootPage({ searchParams }: RootPageProps) {
|
||||
@@ -232,57 +174,11 @@ export default async function RootPage({ searchParams }: RootPageProps) {
|
||||
getAdminPortfolioProjects(),
|
||||
getAdminMediaAssets(),
|
||||
]);
|
||||
|
||||
const publishedProjects = projects.filter((project) => project.isPublished).length;
|
||||
const authHealthy = authConfigured && basicConfigured;
|
||||
const sectionRows: Array<{
|
||||
label: string;
|
||||
summary: string;
|
||||
status: string;
|
||||
href: string;
|
||||
badgeVariant: BadgeProps["variant"];
|
||||
action: string;
|
||||
}> = [
|
||||
{
|
||||
label: copy.maintenanceTitle,
|
||||
summary: copy.maintenanceDescription,
|
||||
status: maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff,
|
||||
href: "/root/maintenance",
|
||||
badgeVariant: maintenanceEnabled ? "warning" : "success",
|
||||
action: copy.maintenanceAction,
|
||||
},
|
||||
{
|
||||
label: copy.mediaTitle,
|
||||
summary: `${mediaAssets.length} ${copy.totalMedia}`,
|
||||
status: copy.authStatusOk,
|
||||
href: "/root/media",
|
||||
badgeVariant: "outline" as const,
|
||||
action: copy.mediaAction,
|
||||
},
|
||||
{
|
||||
label: copy.siteSettingsTitle,
|
||||
summary: copy.siteSettingsDescription,
|
||||
status: copy.authStatusOk,
|
||||
href: "/root/site-settings",
|
||||
badgeVariant: "outline" as const,
|
||||
action: copy.siteSettingsAction,
|
||||
},
|
||||
{
|
||||
label: copy.portfolioTitle,
|
||||
summary: `${projects.length} ${copy.totalProjects} / ${categories.length} ${copy.totalCategories}`,
|
||||
status: `${publishedProjects} ${copy.publishedProjects}`,
|
||||
href: "/root/portfolio",
|
||||
badgeVariant: "outline" as const,
|
||||
action: copy.portfolioAction,
|
||||
},
|
||||
{
|
||||
label: copy.uiKitTitle,
|
||||
summary: copy.uiKitDescription,
|
||||
status: copy.authStatusOk,
|
||||
href: "/root/ui-kit",
|
||||
badgeVariant: "outline" as const,
|
||||
action: copy.uiKitAction,
|
||||
},
|
||||
];
|
||||
const draftProjects = projects.length - publishedProjects;
|
||||
const activeCategories = categories.filter((category) => category.isActive).length;
|
||||
const imageCount = mediaAssets.filter((asset) => asset.kind === "IMAGE").length;
|
||||
|
||||
return (
|
||||
<RootDashboardShell
|
||||
@@ -293,131 +189,52 @@ export default async function RootPage({ searchParams }: RootPageProps) {
|
||||
headerDescription={copy.subtitle}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<MotionFade delay={0.05}>
|
||||
<DashboardCard
|
||||
title={copy.maintenanceTitle}
|
||||
value={maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff}
|
||||
description={copy.maintenanceDescription}
|
||||
icon={ShieldAlert}
|
||||
/>
|
||||
</MotionFade>
|
||||
<MotionFade delay={0.1}>
|
||||
<DashboardCard
|
||||
title={copy.totalMedia}
|
||||
value={String(mediaAssets.length)}
|
||||
description={copy.mediaCountDescription}
|
||||
icon={ImageIcon}
|
||||
/>
|
||||
</MotionFade>
|
||||
<MotionFade delay={0.15}>
|
||||
<DashboardCard
|
||||
title={copy.totalProjects}
|
||||
value={String(projects.length)}
|
||||
description={copy.projectCountDescription}
|
||||
icon={Globe2}
|
||||
/>
|
||||
</MotionFade>
|
||||
<MotionFade delay={0.2}>
|
||||
<DashboardCard
|
||||
title={copy.totalCategories}
|
||||
value={String(categories.length)}
|
||||
description={copy.categoryCountDescription}
|
||||
<StatsCard
|
||||
title={copy.portfolioOnline}
|
||||
value={String(publishedProjects)}
|
||||
icon={FolderKanban}
|
||||
className="h-full"
|
||||
footer={(
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-2 text-sm text-muted-foreground">
|
||||
<span>{copy.drafts}: {draftProjects}</span>
|
||||
<span>{copy.activeCategories}: {activeCategories}</span>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</MotionFade>
|
||||
<MotionFade delay={0.25}>
|
||||
<DashboardCard
|
||||
title={copy.siteSettingsTitle}
|
||||
value={copy.authStatusOk}
|
||||
description={copy.siteSettingsDescription}
|
||||
icon={Shapes}
|
||||
|
||||
<MotionFade delay={0.1}>
|
||||
<StatsCard
|
||||
title={copy.mediaImages}
|
||||
value={String(imageCount)}
|
||||
icon={ImageIcon}
|
||||
description="Anzahl der Bilder innerhalb der Media Library."
|
||||
className="h-full"
|
||||
/>
|
||||
</MotionFade>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(320px,1fr)]">
|
||||
<MotionFade delay={0.3}>
|
||||
<Card className="border-border/70 bg-card/95 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>{copy.tableTitle}</CardTitle>
|
||||
<CardDescription>{copy.tableDescription}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>{copy.tableSection}</TableHead>
|
||||
<TableHead>{copy.tableSummary}</TableHead>
|
||||
<TableHead>{copy.tableStatus}</TableHead>
|
||||
<TableHead className="text-right">{copy.tableAction}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sectionRows.map((row) => (
|
||||
<TableRow key={row.href}>
|
||||
<TableCell className="font-medium">{row.label}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{row.summary}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={row.badgeVariant}>{row.status}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button asChild variant="ghost" size="sm">
|
||||
<Link href={row.href}>
|
||||
{row.action}
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<MotionFade delay={0.15}>
|
||||
<StatsCard
|
||||
title={copy.maintenanceStatus}
|
||||
value={maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
|
||||
icon={ShieldAlert}
|
||||
className="h-full"
|
||||
footer={(
|
||||
<div className="flex items-center justify-between gap-3 text-sm">
|
||||
<span className="text-muted-foreground">
|
||||
{maintenanceEnabled
|
||||
? "Website ist aktuell fuer Besucher gesperrt."
|
||||
: "Website ist aktuell offen."}
|
||||
</span>
|
||||
<Badge variant={maintenanceEnabled ? "warning" : "success"}>
|
||||
{maintenanceEnabled ? copy.maintenanceOn : copy.maintenanceOff}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</MotionFade>
|
||||
|
||||
<div className="grid gap-6">
|
||||
<MotionFade delay={0.35}>
|
||||
<Card className="border-border/70 bg-card/95 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>{copy.systemStatusTitle}</CardTitle>
|
||||
<CardDescription>{copy.systemStatusDescription}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="rounded-nested border border-border bg-muted/40 p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{copy.authCard}</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{authHealthy ? copy.authDescription : copy.authDescriptionWarning}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant={authHealthy ? "success" : "warning"}>
|
||||
{authHealthy ? copy.authStatusOk : copy.authStatusWarning}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-muted-foreground">{copy.maintenanceLabel}</span>
|
||||
<Badge variant={maintenanceEnabled ? "warning" : "success"}>
|
||||
{maintenanceEnabled ? copy.maintenanceStatusOn : copy.maintenanceStatusOff}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-muted-foreground">{copy.contentLabel}</span>
|
||||
<span className="font-medium text-foreground">
|
||||
{`${publishedProjects} ${copy.publishedProjects} / ${projects.length} ${copy.totalProjects}`}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-muted-foreground">{copy.contentDescription}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</MotionFade>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</RootDashboardShell>
|
||||
|
||||
@@ -18,7 +18,7 @@ const copy = {
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
|
||||
@@ -16,7 +16,7 @@ const copy = {
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
|
||||
@@ -25,7 +25,7 @@ const copy = {
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
|
||||
@@ -19,7 +19,7 @@ const copy = {
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
|
||||
@@ -16,7 +16,7 @@ const copy = {
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
|
||||
@@ -17,13 +17,13 @@ import { saveSiteSettingsAction } from "./actions";
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const copy = {
|
||||
title: "SEO",
|
||||
subtitle: "Globale SEO Einstellungen, Titelstruktur und Standardbilder verwalten.",
|
||||
title: "Settings",
|
||||
subtitle: "Globale Titel, Copy und Brand Assets verwalten.",
|
||||
overview: "Uebersicht",
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
smtp: "SMTP",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
|
||||
@@ -18,7 +18,7 @@ const copy = {
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
smtp: "SMTP",
|
||||
contactProtection: "Contact Protection",
|
||||
portfolio: "Portfolio",
|
||||
|
||||
@@ -19,7 +19,7 @@ const copy = {
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
smtp: "SMTP",
|
||||
contactProtection: "Contact Protection",
|
||||
portfolio: "Portfolio",
|
||||
|
||||
@@ -14,7 +14,7 @@ const copy = {
|
||||
overview: "Uebersicht",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
siteSettings: "Settings",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { StatsCard } from "@/components/dashboard/stats-card";
|
||||
|
||||
type DashboardCardProps = {
|
||||
title: string;
|
||||
@@ -16,19 +16,6 @@ export function DashboardCard({
|
||||
icon: Icon,
|
||||
}: DashboardCardProps) {
|
||||
return (
|
||||
<Card className="border-border/70 bg-card/95 shadow-sm">
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3">
|
||||
<div className="space-y-1">
|
||||
<CardDescription>{title}</CardDescription>
|
||||
<CardTitle className="text-3xl font-semibold tracking-tight">{value}</CardTitle>
|
||||
</div>
|
||||
<div className="rounded-nested border border-border bg-muted/60 p-2 text-muted-foreground">
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<StatsCard title={title} value={value} description={description} icon={Icon} />
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { CardContent } from "@/components/ui/card";
|
||||
|
||||
type StatsCardProps = {
|
||||
title: string;
|
||||
value: string;
|
||||
icon?: LucideIcon;
|
||||
description?: string;
|
||||
footer?: ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function StatsCard({
|
||||
title,
|
||||
value,
|
||||
icon: Icon,
|
||||
description,
|
||||
footer,
|
||||
className,
|
||||
}: StatsCardProps) {
|
||||
return (
|
||||
<AppCard level={3} className={className}>
|
||||
<CardContent className="space-y-2.5 p-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">{title}</p>
|
||||
<p className="mt-1 text-3xl font-semibold text-foreground">{value}</p>
|
||||
</div>
|
||||
{Icon ? (
|
||||
<div className="rounded-nested border border-border bg-muted/50 p-2 text-muted-foreground">
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{description ? (
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
) : null}
|
||||
|
||||
{footer ? footer : null}
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
);
|
||||
}
|
||||
@@ -22,13 +22,13 @@ export function ContactProtectionForm({
|
||||
const [rateLimitEnabled, setRateLimitEnabled] = useState(initialSettings.rateLimit.enabled);
|
||||
|
||||
return (
|
||||
<form id="contact-protection-form" action={action} className="space-y-6">
|
||||
<form id="contact-protection-form" action={action} className="grid gap-6 xl:grid-cols-2">
|
||||
<AppCard>
|
||||
<CardHeader>
|
||||
<CardTitle>Turnstile</CardTitle>
|
||||
<CardDescription>Cloudflare Schutz fuer das Kontaktformular.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6 md:grid-cols-2">
|
||||
<CardContent className="grid gap-5 p-4 md:grid-cols-2">
|
||||
<div className="space-y-4 md:col-span-2">
|
||||
<label
|
||||
htmlFor="turnstileEnabled"
|
||||
@@ -81,7 +81,7 @@ export function ContactProtectionForm({
|
||||
<CardTitle>Rate Limiting</CardTitle>
|
||||
<CardDescription>Begrenzung wiederholter Kontaktanfragen.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6 md:grid-cols-2">
|
||||
<CardContent className="grid gap-5 p-4 md:grid-cols-2">
|
||||
<div className="space-y-4 md:col-span-2">
|
||||
<label
|
||||
htmlFor="contactRateLimitEnabled"
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import type { MarqueeSettings } from "@/lib/marquee-settings";
|
||||
@@ -21,35 +20,25 @@ export function MarqueeSettingsForm({
|
||||
initialSettings,
|
||||
}: MarqueeSettingsFormProps) {
|
||||
return (
|
||||
<form id="marquee-settings-form" action={action} className="space-y-6">
|
||||
<AppCard>
|
||||
<CardHeader>
|
||||
<CardTitle>Marquee Rows</CardTitle>
|
||||
<CardDescription>Nur Deutsch bearbeiten. Die Werte werden fuer alle Sprachen uebernommen.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4 rounded-nested border border-border/70 bg-background/70 p-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-foreground">Deutsch</h3>
|
||||
<p className="text-xs text-muted-foreground">Vier Marquee Zeilen. Diese Werte gelten fuer alle Sprachen.</p>
|
||||
</div>
|
||||
<form id="marquee-settings-form" action={action} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-lg font-semibold text-foreground">Marquee Rows</h2>
|
||||
<p className="text-sm text-muted-foreground">Nur Deutsch bearbeiten. Die Werte werden fuer alle Sprachen uebernommen.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{rowMeta.map((row) => (
|
||||
<div key={`de-${row.key}`} className="space-y-2">
|
||||
<Label htmlFor={`${row.key}-de`}>{row.label}</Label>
|
||||
<Textarea
|
||||
id={`${row.key}-de`}
|
||||
name={`${row.key}-de`}
|
||||
defaultValue={initialSettings.locales.de[row.key]}
|
||||
className="min-h-[180px] resize-y"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
<div className="grid gap-4 xl:grid-cols-4">
|
||||
{rowMeta.map((row) => (
|
||||
<AppCard key={`de-${row.key}`} level={2} padding="sm" className="space-y-2">
|
||||
<Label htmlFor={`${row.key}-de`} className="text-sm font-semibold text-foreground">{row.label}</Label>
|
||||
<Textarea
|
||||
id={`${row.key}-de`}
|
||||
name={`${row.key}-de`}
|
||||
defaultValue={initialSettings.locales.de[row.key]}
|
||||
className="min-h-[220px] resize-y"
|
||||
/>
|
||||
</AppCard>
|
||||
))}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,508 @@
|
||||
"use client";
|
||||
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
|
||||
import type { MediaKind } from "@prisma/client";
|
||||
import { FileType2, Grid2x2, ImageIcon, LayoutList, LoaderCircle, Trash2, Upload } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useFormStatus } from "react-dom";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
import type { MediaAssetView } from "@/lib/media";
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} 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 { cn } from "@/lib/utils";
|
||||
|
||||
import { createMediaAssetAction, deleteMediaAssetAction } from "@/app/root/media/actions";
|
||||
|
||||
const copy = {
|
||||
addMedia: "Upload Media File",
|
||||
addMediaDescription: "Datei hochladen und direkt in die Media Library uebernehmen.",
|
||||
addMediaHint: "PNG, JPG, GIF oder PDF bis 4 MB",
|
||||
label: "Bezeichnung",
|
||||
kind: "Typ",
|
||||
image: "Image",
|
||||
document: "Document",
|
||||
upload: "Upload",
|
||||
uploading: "Uploading...",
|
||||
selectFile: "Datei auswaehlen",
|
||||
empty: "Noch keine Bilder vorhanden.",
|
||||
grid: "Grid",
|
||||
list: "List",
|
||||
detailsButton: "Details",
|
||||
open: "Open",
|
||||
delete: "Delete",
|
||||
deleteConfirm: "Delete this media file?",
|
||||
usages: "Verwendungen",
|
||||
source: "Quelle",
|
||||
fileName: "Dateiname",
|
||||
url: "URL",
|
||||
mimeType: "MIME Type",
|
||||
size: "Dateigroesse",
|
||||
createdAt: "Erstellt",
|
||||
close: "Close",
|
||||
details: "Bilddetails",
|
||||
detailsDescription: "Metadaten und Verwendungen der ausgewaehlten Datei.",
|
||||
};
|
||||
|
||||
function formatFileSize(size: number | null) {
|
||||
if (!size) {
|
||||
return "—";
|
||||
}
|
||||
|
||||
if (size < 1024) {
|
||||
return `${size} B`;
|
||||
}
|
||||
|
||||
if (size < 1024 * 1024) {
|
||||
return `${(size / 1024).toFixed(1)} KB`;
|
||||
}
|
||||
|
||||
return `${(size / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function formatCreatedAt(value: string | Date) {
|
||||
const date = value instanceof Date ? value : new Date(value);
|
||||
|
||||
return new Intl.DateTimeFormat("de-DE", {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "short",
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
function getAbsoluteUrl(path: string) {
|
||||
if (/^https?:\/\//.test(path)) {
|
||||
return path;
|
||||
}
|
||||
|
||||
if (typeof window === "undefined") {
|
||||
return path;
|
||||
}
|
||||
|
||||
return new URL(path, window.location.origin).toString();
|
||||
}
|
||||
|
||||
function UploadSubmitButton() {
|
||||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<Button type="submit" disabled={pending} className="w-full sm:w-auto">
|
||||
{pending ? <LoaderCircle className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
|
||||
{pending ? copy.uploading : copy.upload}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function MediaUploadDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
const [kind, setKind] = useState<MediaKind>("IMAGE");
|
||||
const [label, setLabel] = useState("");
|
||||
const [isLabelDirty, setIsLabelDirty] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setKind("IMAGE");
|
||||
setLabel("");
|
||||
setIsLabelDirty(false);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = event.target.files?.[0];
|
||||
|
||||
if (!file || isLabelDirty) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLabel(file.name.replace(/\.[^.]+$/, ""));
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="group block w-full rounded-surface border-2 border-dashed border-border/80 bg-surface-2 p-3 text-left transition-colors hover:border-primary/50 hover:bg-accent/30"
|
||||
>
|
||||
<div className="flex min-h-[240px] flex-col items-center justify-center rounded-nested border border-border/60 bg-background px-6 py-10 text-center">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-nested bg-muted text-muted-foreground">
|
||||
<ImageIcon className="h-8 w-8" />
|
||||
</div>
|
||||
<p className="mt-6 text-2xl font-semibold text-foreground">{copy.addMedia}</p>
|
||||
<p className="mt-2 text-sm text-muted-foreground">{copy.addMediaHint}</p>
|
||||
<span className="mt-6 inline-flex h-11 items-center justify-center rounded-nested bg-primary px-5 text-sm font-medium text-primary-foreground shadow-sm transition-colors group-hover:bg-primary/92">
|
||||
{copy.addMedia}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="max-h-[calc(100vh-1.5rem)] w-[calc(100vw-1rem)] max-w-2xl overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{copy.addMedia}</DialogTitle>
|
||||
<DialogDescription>{copy.addMediaDescription}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form action={createMediaAssetAction} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="media-label">{copy.label}</Label>
|
||||
<Input
|
||||
id="media-label"
|
||||
name="label"
|
||||
value={label}
|
||||
onChange={(event) => {
|
||||
setLabel(event.target.value);
|
||||
setIsLabelDirty(true);
|
||||
}}
|
||||
placeholder={copy.label}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Label>{copy.kind}</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
{ value: "IMAGE" as const, label: copy.image, icon: ImageIcon },
|
||||
{ value: "DOCUMENT" as const, label: copy.document, icon: FileType2 },
|
||||
].map((option) => {
|
||||
const Icon = option.icon;
|
||||
const isActive = kind === option.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => setKind(option.value)}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 rounded-nested border px-4 py-2 text-sm transition-colors",
|
||||
isActive
|
||||
? "border-input bg-primary text-primary-foreground"
|
||||
: "border-input bg-background text-foreground/75 hover:bg-accent hover:text-accent-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{option.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<input type="hidden" name="kind" value={kind} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="media-file">{copy.selectFile}</Label>
|
||||
<Input
|
||||
id="media-file"
|
||||
name="file"
|
||||
type="file"
|
||||
required
|
||||
accept={kind === "IMAGE" ? "image/png,image/jpeg,image/gif,image/webp,image/svg+xml" : "application/pdf"}
|
||||
className="file:mr-3"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{copy.addMediaHint}</p>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="sm:justify-start">
|
||||
<UploadSubmitButton />
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function MediaDetailsDialog({
|
||||
asset,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
asset: MediaAssetView | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
if (!asset) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const absoluteUrl = getAbsoluteUrl(asset.url);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[calc(100vh-1.5rem)] w-[calc(100vw-1rem)] max-w-5xl overflow-y-auto p-0">
|
||||
<div className="grid gap-0 md:grid-cols-[minmax(0,1.3fr)_minmax(320px,0.9fr)]">
|
||||
<div className="border-b border-border/70 bg-muted/30 md:border-b-0 md:border-r">
|
||||
<div className="flex h-full items-center justify-center p-4 sm:p-6">
|
||||
<Link href={asset.url} target="_blank" rel="noreferrer" className="block w-full">
|
||||
<img
|
||||
src={asset.url}
|
||||
alt={asset.label}
|
||||
className="max-h-[55vh] w-full rounded-nested object-contain transition-transform duration-300 hover:scale-[1.02] md:max-h-[75vh]"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 p-4 sm:p-6">
|
||||
<DialogHeader className="space-y-2 text-left">
|
||||
<DialogTitle className="pr-8">{asset.label}</DialogTitle>
|
||||
<DialogDescription>{copy.detailsDescription}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="rounded-nested border">
|
||||
<Table>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="w-36 font-medium text-muted-foreground">{copy.kind}</TableCell>
|
||||
<TableCell>{asset.kind}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="w-36 font-medium text-muted-foreground">{copy.source}</TableCell>
|
||||
<TableCell>{asset.source}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="w-36 font-medium text-muted-foreground">{copy.fileName}</TableCell>
|
||||
<TableCell className="break-all">{asset.fileName || "—"}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="w-36 font-medium text-muted-foreground">{copy.mimeType}</TableCell>
|
||||
<TableCell className="break-all">{asset.mimeType || "—"}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="w-36 font-medium text-muted-foreground">{copy.size}</TableCell>
|
||||
<TableCell>{formatFileSize(asset.size)}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="w-36 font-medium text-muted-foreground">{copy.createdAt}</TableCell>
|
||||
<TableCell>{formatCreatedAt(asset.createdAt)}</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{asset.usages.length > 0 ? (
|
||||
<div className="space-y-2 rounded-nested border bg-muted/40 p-4 text-xs text-muted-foreground">
|
||||
<p className="font-medium text-foreground">
|
||||
{asset.usages.length} {copy.usages}
|
||||
</p>
|
||||
{asset.usages.map((usage) => (
|
||||
<p key={usage.id}>
|
||||
{usage.usageType} / {usage.entityType} / {usage.fieldKey}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-2 rounded-nested border bg-muted/20 p-4 text-sm">
|
||||
<p className="font-medium text-foreground">{copy.url}</p>
|
||||
<p className="break-all text-muted-foreground">{absoluteUrl}</p>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="items-stretch sm:items-center sm:justify-between">
|
||||
<Button asChild variant="outline" className="w-full sm:w-auto">
|
||||
<Link href={asset.url} target="_blank" rel="noreferrer">
|
||||
{copy.open}
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<form action={deleteMediaAssetAction} className="w-full sm:w-auto">
|
||||
<input type="hidden" name="assetId" value={asset.id} />
|
||||
<Button
|
||||
type="submit"
|
||||
variant="destructive"
|
||||
disabled={asset.usages.length > 0}
|
||||
className="w-full sm:w-auto"
|
||||
onClick={(event) => {
|
||||
if (!window.confirm(copy.deleteConfirm)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
{copy.delete}
|
||||
</Button>
|
||||
</form>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export function MediaLibraryManager({
|
||||
mediaAssets,
|
||||
}: {
|
||||
mediaAssets: MediaAssetView[];
|
||||
}) {
|
||||
const searchParams = useSearchParams();
|
||||
const [isUploadDialogOpen, setIsUploadDialogOpen] = useState(false);
|
||||
const [selectedAssetId, setSelectedAssetId] = useState<string | null>(null);
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
const imageAssets = useMemo(
|
||||
() => mediaAssets.filter((asset) => asset.kind === "IMAGE"),
|
||||
[mediaAssets],
|
||||
);
|
||||
const selectedAsset = imageAssets.find((asset) => asset.id === selectedAssetId) ?? null;
|
||||
|
||||
useEffect(() => {
|
||||
if (searchParams.has("success")) {
|
||||
setIsUploadDialogOpen(false);
|
||||
setSelectedAssetId(null);
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<MotionFade delay={0.15}>
|
||||
<MediaUploadDialog open={isUploadDialogOpen} onOpenChange={setIsUploadDialogOpen} />
|
||||
</MotionFade>
|
||||
|
||||
{imageAssets.length > 0 ? (
|
||||
<div className="flex justify-end">
|
||||
<div className="inline-flex rounded-nested border border-input bg-background p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setViewMode("grid")}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 rounded-nested px-3 py-2 text-sm transition-colors",
|
||||
viewMode === "grid"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-foreground/75 hover:bg-accent hover:text-accent-foreground",
|
||||
)}
|
||||
>
|
||||
<Grid2x2 className="h-4 w-4" />
|
||||
{copy.grid}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setViewMode("list")}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 rounded-nested px-3 py-2 text-sm transition-colors",
|
||||
viewMode === "list"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-foreground/75 hover:bg-accent hover:text-accent-foreground",
|
||||
)}
|
||||
>
|
||||
<LayoutList className="h-4 w-4" />
|
||||
{copy.list}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{imageAssets.length > 0 ? (
|
||||
viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4 sm:grid-cols-[repeat(auto-fill,minmax(180px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(210px,1fr))]">
|
||||
{imageAssets.map((asset, index) => (
|
||||
<MotionFade key={asset.id} delay={0.18 + index * 0.02}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedAssetId(asset.id)}
|
||||
className="group text-left"
|
||||
>
|
||||
<AppCard
|
||||
layer="single"
|
||||
padding="none"
|
||||
interactive
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="aspect-square overflow-hidden bg-muted/30">
|
||||
<img
|
||||
src={asset.url}
|
||||
alt={asset.label}
|
||||
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
</AppCard>
|
||||
</button>
|
||||
</MotionFade>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{imageAssets.map((asset, index) => (
|
||||
<MotionFade key={asset.id} delay={0.18 + index * 0.02}>
|
||||
<AppCard layer="single" padding="none" className="overflow-hidden">
|
||||
<div className="flex flex-col gap-4 p-4 sm:flex-row sm:items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedAssetId(asset.id)}
|
||||
className="group h-24 w-full overflow-hidden rounded-nested border bg-muted/30 sm:w-24"
|
||||
>
|
||||
<img
|
||||
src={asset.url}
|
||||
alt={asset.label}
|
||||
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<p className="truncate font-medium text-foreground">{asset.label}</p>
|
||||
<p className="text-sm text-muted-foreground">{formatFileSize(asset.size)}</p>
|
||||
<p className="truncate text-sm text-muted-foreground">{formatCreatedAt(asset.createdAt)}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-full sm:w-auto"
|
||||
onClick={() => setSelectedAssetId(asset.id)}
|
||||
>
|
||||
{copy.detailsButton}
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="w-full sm:w-auto">
|
||||
<Link href={asset.url} target="_blank" rel="noreferrer">
|
||||
{copy.open}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<MotionFade delay={0.18}>
|
||||
<AppCard>
|
||||
<CardContent className="p-6 text-sm text-muted-foreground">
|
||||
{copy.empty}
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
)}
|
||||
|
||||
<MediaDetailsDialog
|
||||
asset={selectedAsset}
|
||||
open={Boolean(selectedAsset)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setSelectedAssetId(null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import { useSearchParams } from "next/navigation";
|
||||
import { FileText, FolderPlus, Hash, Layers3, Pencil, Text, Trash2 } from "lucide-react";
|
||||
|
||||
import type { deleteCategoryAction, upsertCategoryAction } from "@/app/root/portfolio/actions";
|
||||
import { StatsCard } from "@/components/dashboard/stats-card";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
@@ -234,21 +235,12 @@ export function PortfolioCategoriesManager({
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<AppCard level={3}>
|
||||
<AppCard level={3}>
|
||||
<CardContent className="flex flex-col gap-6 p-6 lg:flex-row lg:items-end lg:justify-between lg:p-8">
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<AppCard level={2} padding="sm">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Total</p>
|
||||
<p className="mt-2 text-3xl font-semibold text-foreground">{categories.length}</p>
|
||||
</AppCard>
|
||||
<AppCard level={2} padding="sm">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Active</p>
|
||||
<p className="mt-2 text-3xl font-semibold text-foreground">{activeCount}</p>
|
||||
</AppCard>
|
||||
<AppCard level={2} padding="sm">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Assigned</p>
|
||||
<p className="mt-2 text-3xl font-semibold text-foreground">{assignedProjects}</p>
|
||||
</AppCard>
|
||||
<StatsCard title="Total" value={String(categories.length)} />
|
||||
<StatsCard title="Active" value={String(activeCount)} />
|
||||
<StatsCard title="Assigned" value={String(assignedProjects)} />
|
||||
</div>
|
||||
|
||||
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ExternalLink, Filter, FolderKanban, Plus, Tags } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
import { StatsCard } from "@/components/dashboard/stats-card";
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
@@ -51,20 +52,12 @@ export function PortfolioProjectsOverview({
|
||||
<AppCard level={3}>
|
||||
<CardContent className="flex flex-col gap-6 p-6 lg:flex-row lg:items-end lg:justify-between lg:p-8">
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<AppCard level={2} padding="sm">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Projects</p>
|
||||
<p className="mt-2 text-3xl font-semibold text-foreground">{projects.length}</p>
|
||||
</AppCard>
|
||||
<AppCard level={2} padding="sm">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Categories</p>
|
||||
<p className="mt-2 text-3xl font-semibold text-foreground">{categories.length}</p>
|
||||
</AppCard>
|
||||
<AppCard level={2} padding="sm">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">Published</p>
|
||||
<p className="mt-2 text-3xl font-semibold text-foreground">
|
||||
{projects.filter((project) => project.isPublished).length}
|
||||
</p>
|
||||
</AppCard>
|
||||
<StatsCard title="Projects" value={String(projects.length)} />
|
||||
<StatsCard title="Categories" value={String(categories.length)} />
|
||||
<StatsCard
|
||||
title="Published"
|
||||
value={String(projects.filter((project) => project.isPublished).length)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
|
||||
@@ -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<void>;
|
||||
@@ -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 (
|
||||
<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} 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 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>
|
||||
);
|
||||
}
|
||||
|
||||
export function SiteSettingsForm({
|
||||
action,
|
||||
initialSettings,
|
||||
@@ -145,6 +410,7 @@ export function SiteSettingsForm({
|
||||
"Default OG Image",
|
||||
),
|
||||
);
|
||||
|
||||
const siteLogoLightPreviewUrl = getMediaPreviewUrl(
|
||||
siteLogoLight,
|
||||
mediaOptions,
|
||||
@@ -164,55 +430,33 @@ export function SiteSettingsForm({
|
||||
|
||||
return (
|
||||
<form id="site-settings-form" action={action} className="space-y-6">
|
||||
<div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(320px,1fr)]">
|
||||
<div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,1fr)]">
|
||||
<div className="space-y-6">
|
||||
<AppCard>
|
||||
<CardHeader>
|
||||
<CardTitle>SEO Basics</CardTitle>
|
||||
<CardDescription>
|
||||
Diese Einstellungen bilden die globale Basis fuer Seitentitel, Description und Vorschau in Suchmaschinen.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<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>
|
||||
{" "}
|
||||
fuer den aktuellen Seitentitel.
|
||||
und
|
||||
{" "}
|
||||
<code>{SITE_NAME_TOKEN}</code>
|
||||
{" "}
|
||||
fuer den Namen der aktuellen Sprache.
|
||||
fuer die globalen Titelvorlagen pro Sprache.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Beispiel:
|
||||
{" "}
|
||||
<code>{PAGE_TITLE_TOKEN} | {SITE_NAME_TOKEN}</code>
|
||||
</p>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</div>
|
||||
|
||||
<AppCard>
|
||||
<CardHeader>
|
||||
<CardTitle>Localized Titles And Copy</CardTitle>
|
||||
<CardDescription>
|
||||
Diese Werte gelten als globale Standards pro Sprache und werden verwendet, wenn eine Seite keinen eigenen Fallback hat.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 lg:grid-cols-3">
|
||||
<div className="grid gap-5 lg:grid-cols-3">
|
||||
{localeFields.map((locale) => (
|
||||
<AppCard key={locale.key} padding="sm" className="space-y-4 rounded-nested">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{locale.label}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">Globale Standardwerte fuer diese Sprache.</p>
|
||||
</div>
|
||||
<AppCard key={locale.key} level={2} 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-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<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}`}
|
||||
@@ -230,7 +474,7 @@ export function SiteSettingsForm({
|
||||
}))
|
||||
}
|
||||
placeholder="Site Name"
|
||||
className="pl-9"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -238,7 +482,7 @@ export function SiteSettingsForm({
|
||||
<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-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<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}`}
|
||||
@@ -256,7 +500,7 @@ export function SiteSettingsForm({
|
||||
}))
|
||||
}
|
||||
placeholder="Title Template"
|
||||
className="pl-9"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -264,7 +508,7 @@ export function SiteSettingsForm({
|
||||
<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-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<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}`}
|
||||
@@ -282,7 +526,7 @@ export function SiteSettingsForm({
|
||||
}))
|
||||
}
|
||||
placeholder="Site Description"
|
||||
className="pl-9"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -290,7 +534,7 @@ export function SiteSettingsForm({
|
||||
<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-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<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}`}
|
||||
@@ -308,239 +552,180 @@ export function SiteSettingsForm({
|
||||
}))
|
||||
}
|
||||
placeholder="Subhead"
|
||||
className="pl-9"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
))}
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<AppCard>
|
||||
<CardHeader>
|
||||
<CardTitle>Brand And Preview Images</CardTitle>
|
||||
<CardDescription>
|
||||
Logo erscheint im Header. Favicon erscheint im Browser. Das Default OG Bild wird fuer Social Sharing genutzt, wenn eine Seite kein eigenes Bild liefert.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6 xl:grid-cols-2">
|
||||
<MediaFieldPicker
|
||||
title="Site Logo Light"
|
||||
value={siteLogoLight}
|
||||
onChange={setSiteLogoLight}
|
||||
options={mediaOptions}
|
||||
hasInitialValue={Boolean(initialBindings.siteLogoLight?.assetId || initialBindings.siteLogoLight?.url)}
|
||||
inputName="siteLogoLightMedia"
|
||||
fileFieldName="siteLogoLightFile"
|
||||
fileLabel="Upload Light Logo"
|
||||
libraryLabel="Light Logo Library"
|
||||
accept="image/*,.svg"
|
||||
allowExternal={false}
|
||||
allowClear
|
||||
clearLabel="Remove Light Logo"
|
||||
emptyValue={{
|
||||
mode: "upload",
|
||||
assetId: "",
|
||||
url: "",
|
||||
}}
|
||||
/>
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-foreground">Brand And Preview Images</h2>
|
||||
|
||||
<MediaFieldPicker
|
||||
title="Site Logo Dark"
|
||||
value={siteLogoDark}
|
||||
onChange={setSiteLogoDark}
|
||||
options={mediaOptions}
|
||||
hasInitialValue={Boolean(initialBindings.siteLogoDark?.assetId || initialBindings.siteLogoDark?.url)}
|
||||
inputName="siteLogoDarkMedia"
|
||||
fileFieldName="siteLogoDarkFile"
|
||||
fileLabel="Upload Dark Logo"
|
||||
libraryLabel="Dark Logo Library"
|
||||
accept="image/*,.svg"
|
||||
allowExternal={false}
|
||||
allowClear
|
||||
clearLabel="Remove Dark Logo"
|
||||
emptyValue={{
|
||||
mode: "upload",
|
||||
assetId: "",
|
||||
url: "",
|
||||
}}
|
||||
/>
|
||||
<SiteSettingsMediaRow
|
||||
title="Site Logo Light"
|
||||
value={siteLogoLight}
|
||||
onChange={setSiteLogoLight}
|
||||
options={mediaOptions}
|
||||
inputName="siteLogoLightMedia"
|
||||
fileFieldName="siteLogoLightFile"
|
||||
accept="image/*,.svg"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.siteLogoLight?.url}
|
||||
/>
|
||||
|
||||
<MediaFieldPicker
|
||||
title="Favicon"
|
||||
value={favicon}
|
||||
onChange={setFavicon}
|
||||
options={mediaOptions}
|
||||
hasInitialValue={Boolean(initialBindings.favicon?.assetId || initialBindings.favicon?.url)}
|
||||
inputName="faviconMedia"
|
||||
fileFieldName="faviconFile"
|
||||
fileLabel="Upload Favicon"
|
||||
libraryLabel="Favicon Library"
|
||||
accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
|
||||
allowExternal={false}
|
||||
allowClear
|
||||
clearLabel="Remove Favicon"
|
||||
emptyValue={{
|
||||
mode: "upload",
|
||||
assetId: "",
|
||||
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}
|
||||
/>
|
||||
|
||||
<MediaFieldPicker
|
||||
title="Default OG Image"
|
||||
value={defaultOgImage}
|
||||
onChange={setDefaultOgImage}
|
||||
options={mediaOptions}
|
||||
hasInitialValue={Boolean(initialBindings.defaultOgImage?.assetId || initialBindings.defaultOgImage?.url)}
|
||||
inputName="defaultOgImageMedia"
|
||||
fileFieldName="defaultOgImageFile"
|
||||
fileLabel="Upload OG Image"
|
||||
libraryLabel="OG Image Library"
|
||||
accept="image/*,.svg"
|
||||
allowExternal={false}
|
||||
allowClear
|
||||
clearLabel="Remove OG Image"
|
||||
emptyValue={{
|
||||
mode: "upload",
|
||||
assetId: "",
|
||||
url: "",
|
||||
}}
|
||||
/>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="xl:sticky xl:top-6 xl:self-start">
|
||||
<AppCard>
|
||||
<CardHeader>
|
||||
<CardTitle>Preview</CardTitle>
|
||||
<CardDescription>Suchmaschine und Social Sharing Vorschau.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-4 text-sm">
|
||||
{localeFields.map((locale) => {
|
||||
const localeSettings = settings.locales[locale.key];
|
||||
const previewTitle = localeSettings.titleTemplate.includes(PAGE_TITLE_TOKEN)
|
||||
? localeSettings.titleTemplate
|
||||
.replace(PAGE_TITLE_TOKEN, locale.sampleTitle)
|
||||
.replaceAll(SITE_NAME_TOKEN, localeSettings.siteName)
|
||||
: `${locale.sampleTitle} | ${localeSettings.siteName}`;
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-foreground">Preview</h2>
|
||||
|
||||
return (
|
||||
<AppCard key={locale.key} className="rounded-nested p-3">
|
||||
<p className="font-medium text-foreground">{locale.label}</p>
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
Example page title: {locale.sampleTitle}
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-foreground">{previewTitle}</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{localeSettings.siteDescription || "No description"}
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
{localeSettings.subhead || "No subhead"}
|
||||
</p>
|
||||
</AppCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<ImageIcon className="h-4 w-4 text-brand-primary" />
|
||||
Header Logo Preview
|
||||
</div>
|
||||
<div className="grid gap-3">
|
||||
<AppCard padding="sm" className="rounded-nested">
|
||||
<p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
|
||||
Light
|
||||
</p>
|
||||
{siteLogoLightPreviewUrl ? (
|
||||
<img
|
||||
src={siteLogoLightPreviewUrl}
|
||||
alt="Site Logo Light"
|
||||
className="h-10 w-auto max-w-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-10 items-center text-sm text-muted-foreground">
|
||||
Default light logo will be used
|
||||
</div>
|
||||
)}
|
||||
</AppCard>
|
||||
<div className="rounded-nested border border-border/70 bg-slate-950 p-4">
|
||||
<p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-white/55">
|
||||
Dark
|
||||
</p>
|
||||
{siteLogoDarkPreviewUrl ? (
|
||||
<img
|
||||
src={siteLogoDarkPreviewUrl}
|
||||
alt="Site Logo Dark"
|
||||
className="h-10 w-auto max-w-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-10 items-center text-sm text-white/60">
|
||||
Default dark logo will be used
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<Search className="h-4 w-4 text-brand-primary" />
|
||||
Search Preview
|
||||
</div>
|
||||
<AppCard padding="sm" className="rounded-nested">
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-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-5 w-5 rounded-sm" />
|
||||
<img src={faviconPreviewUrl} alt="Favicon" className="h-4 w-4 rounded-sm object-cover" />
|
||||
) : (
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-sm border bg-muted/40">
|
||||
<Type className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<div className="flex h-4 w-4 items-center justify-center rounded-sm border border-border/70 bg-muted/40">
|
||||
<Type className="h-3 w-3 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm font-medium text-brand-primary">
|
||||
{settings.locales.de.titleTemplate.includes(PAGE_TITLE_TOKEN)
|
||||
? settings.locales.de.titleTemplate
|
||||
.replace(PAGE_TITLE_TOKEN, "About")
|
||||
.replaceAll(SITE_NAME_TOKEN, settings.locales.de.siteName)
|
||||
: `About | ${settings.locales.de.siteName}`}
|
||||
{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>
|
||||
<p className="mt-2 text-xs text-muted-foreground/80">
|
||||
{settings.locales.de.subhead || "No subhead"}
|
||||
</p>
|
||||
</AppCard>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<ImageIcon className="h-4 w-4 text-brand-secondary" />
|
||||
Social Preview
|
||||
</div>
|
||||
<AppCard className="overflow-hidden rounded-nested">
|
||||
</AppCard>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Brand Assets</p>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<AppCard level={1} 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} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Social Preview</p>
|
||||
<div className="overflow-hidden rounded-nested border border-border/70 bg-background">
|
||||
{defaultOgImagePreviewUrl ? (
|
||||
<img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-32 w-full object-cover" />
|
||||
<img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-24 w-full object-cover" />
|
||||
) : (
|
||||
<div className="flex h-32 items-center justify-center bg-muted/40 text-sm text-muted-foreground">
|
||||
<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-2 p-4">
|
||||
<div className="space-y-1.5 p-3">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{settings.locales.en.titleTemplate.includes(PAGE_TITLE_TOKEN)
|
||||
? settings.locales.en.titleTemplate
|
||||
.replace(PAGE_TITLE_TOKEN, "Portfolio")
|
||||
.replaceAll(SITE_NAME_TOKEN, settings.locales.en.siteName)
|
||||
: `Portfolio | ${settings.locales.en.siteName}`}
|
||||
{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>
|
||||
</AppCard>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-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>
|
||||
</form>
|
||||
|
||||
@@ -29,7 +29,7 @@ export function SMTPSettingsForm({
|
||||
<CardTitle>SMTP Connection</CardTitle>
|
||||
<CardDescription>Server und Login.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6 md:grid-cols-2">
|
||||
<CardContent className="grid gap-5 p-4 md:grid-cols-2">
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor="smtpHost">SMTP Host</Label>
|
||||
<div className="relative">
|
||||
@@ -113,7 +113,7 @@ export function SMTPSettingsForm({
|
||||
<CardTitle>Sender And Recipients</CardTitle>
|
||||
<CardDescription>Absender und Ziele.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6 md:grid-cols-2">
|
||||
<CardContent className="grid gap-5 p-4 md:grid-cols-2">
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor="mailFromEmail">From Email</Label>
|
||||
<div className="relative">
|
||||
|
||||
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"font-latin fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-surface border border-border/80 bg-card p-6 text-card-foreground shadow-panel duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:w-full",
|
||||
"font-latin fixed inset-0 z-50 m-auto grid h-fit max-h-[calc(100vh-2rem)] w-[calc(100vw-1rem)] max-w-lg gap-4 rounded-surface border border-border/80 bg-card p-6 text-card-foreground shadow-panel duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 origin-center sm:w-full",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
+3
-21
@@ -123,16 +123,11 @@ export async function createStandaloneMediaAsset(input: {
|
||||
kind: MediaKind;
|
||||
label: string;
|
||||
uploadFile: FormDataEntryValue | null;
|
||||
externalUrl: string;
|
||||
}) {
|
||||
const trimmedLabel = input.label.trim();
|
||||
|
||||
if (!trimmedLabel) {
|
||||
throw new Error("Media label is required.");
|
||||
}
|
||||
|
||||
if (input.uploadFile instanceof File && input.uploadFile.size > 0) {
|
||||
const savedFile = await saveMediaUpload(input.uploadFile, input.kind.toLowerCase());
|
||||
const derivedLabel = input.uploadFile.name.replace(/\.[^.]+$/, "").trim();
|
||||
const trimmedLabel = input.label.trim() || derivedLabel || "Media asset";
|
||||
|
||||
if (!savedFile) {
|
||||
throw new Error("Unable to save upload.");
|
||||
@@ -150,20 +145,7 @@ export async function createStandaloneMediaAsset(input: {
|
||||
});
|
||||
}
|
||||
|
||||
const url = input.externalUrl.trim();
|
||||
|
||||
if (!url) {
|
||||
throw new Error("Either an upload file or an external URL is required.");
|
||||
}
|
||||
|
||||
return createMediaAsset({
|
||||
source: MediaSource.EXTERNAL,
|
||||
kind: input.kind,
|
||||
url,
|
||||
fileName: getFileNameFromUrl(url),
|
||||
label: trimmedLabel,
|
||||
altText: trimmedLabel,
|
||||
});
|
||||
throw new Error("Upload file is required.");
|
||||
}
|
||||
|
||||
export async function deleteMediaAssetAndFile(input: {
|
||||
|
||||
@@ -76,7 +76,7 @@ export async function saveMediaUpload(file: File, folder: string) {
|
||||
}
|
||||
|
||||
const safeBaseName = sanitizeBaseName(file.name.replace(/\.[^.]+$/, "")) || "asset";
|
||||
const finalName = `${Date.now()}-${safeBaseName}-${randomUUID().slice(0, 8)}${extension}`;
|
||||
const finalName = `${safeBaseName}-${randomUUID().slice(0, 8)}${extension}`;
|
||||
const targetDir = path.join(MEDIA_UPLOAD_ROOT, folder);
|
||||
const targetPath = path.join(targetDir, finalName);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user