Support Gitea configuration and safe Catalog Studio furniture completion

2026-09-05 13:33:40 +02:00
1 parent 26f071117b
commit 9f791ba284
@@ -1,4 +1,5 @@
 "use client";
+import "./nitro-editor.css";

 import {
 	Box,
@@ -240,6 +241,7 @@ export function NitroEditorDialog({
 		setMetadata(JSON.parse(JSON.stringify(originalMetadata)));
 		setFlags({ ...originalFlags });
 		setJsonText(JSON.stringify(originalMetadata, null, 2));
+		setJsonError(null);
 		toast.info("Reset to original values");
 	};

@@ -334,7 +336,9 @@ export function NitroEditorDialog({
 	const hasChanges =
 		metadata &&
 		originalMetadata &&
-		(JSON.stringify(metadata) !== JSON.stringify(originalMetadata) ||
+		((activeTab === "json"
+			? jsonText !== JSON.stringify(originalMetadata, null, 2)
+			: JSON.stringify(metadata) !== JSON.stringify(originalMetadata)) ||
 			JSON.stringify(flags) !== JSON.stringify(originalFlags));

 	// Furni preview URL
@@ -344,13 +348,16 @@ export function NitroEditorDialog({

 	return (
 		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="sm:max-w-4xl max-h-[90vh] flex flex-col p-0 gap-0">
+			<DialogContent
+				data-nitro-editor
+				className="sm:max-w-4xl h-[min(840px,92dvh)] max-h-[92dvh] flex flex-col overflow-hidden p-0 gap-0"
+			>
 				{/* Header with preview */}
 				<DialogHeader className="px-6 pt-5 pb-4 border-b bg-muted/30">
 					<div className="flex items-start gap-4">
 						{/* Furni preview */}
 						<div
-							className="w-20 h-20 rounded-lg border bg-card flex items-center justify-center shrink-0 overflow-hidden"
+							className="w-16 h-16 rounded-lg border bg-card flex items-center justify-center shrink-0 overflow-hidden"
 							style={{
 								backgroundImage: "url(/images/furni_floor.png)",
 								backgroundRepeat: "repeat",
@@ -433,69 +440,100 @@ export function NitroEditorDialog({
 						{/* ── Visual Tab ── */}
 						<TabsContent
 							value="visual"
-							className="overflow-y-auto flex-1 px-6 py-4 space-y-5"
+							className="min-h-0 overflow-y-auto flex-1 px-4 sm:px-6 py-4 space-y-4"
 						>
 							{/* Dimensions + Interaction in 2-column layout */}
-							<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-								{/* Dimensions card */}
-								<section className="rounded-lg border bg-card p-4">
-									<div className="flex items-center gap-2 mb-3">
-										<Ruler className="w-4 h-4 text-muted-foreground" />
-										<h3 className="text-sm font-medium">Dimensions</h3>
-									</div>
-									<div className="grid grid-cols-3 gap-3">
-										<div>
-											<Label
-												htmlFor="dim-x"
-												className="text-xs text-muted-foreground"
-											>
-												X (width)
-											</Label>
-											<Input
-												id="dim-x"
-												type="number"
-												min={1}
-												value={dims.x}
-												onChange={(e) => setDim("x", e.target.value)}
-												className="mt-1"
-											/>
+							<div className="grid grid-cols-1 md:grid-cols-2 items-start gap-4">
+								<div className="space-y-4">
+									{/* Dimensions card */}
+									<section className="rounded-lg border bg-card p-4">
+										<div className="flex items-center gap-2 mb-3">
+											<Ruler className="w-4 h-4 text-muted-foreground" />
+											<h3 className="text-sm font-medium">Dimensions</h3>
 										</div>
-										<div>
-											<Label
-												htmlFor="dim-y"
-												className="text-xs text-muted-foreground"
-											>
-												Y (depth)
-											</Label>
-											<Input
-												id="dim-y"
-												type="number"
-												min={1}
-												value={dims.y}
-												onChange={(e) => setDim("y", e.target.value)}
-												className="mt-1"
-											/>
+										<div className="grid grid-cols-3 gap-3">
+											<div>
+												<Label
+													htmlFor="dim-x"
+													className="text-xs text-muted-foreground"
+												>
+													X (width)
+												</Label>
+												<Input
+													id="dim-x"
+													type="number"
+													min={1}
+													value={dims.x}
+													onChange={(e) => setDim("x", e.target.value)}
+													className="mt-1"
+												/>
+											</div>
+											<div>
+												<Label
+													htmlFor="dim-y"
+													className="text-xs text-muted-foreground"
+												>
+													Y (depth)
+												</Label>
+												<Input
+													id="dim-y"
+													type="number"
+													min={1}
+													value={dims.y}
+													onChange={(e) => setDim("y", e.target.value)}
+													className="mt-1"
+												/>
+											</div>
+											<div>
+												<Label
+													htmlFor="dim-z"
+													className="text-xs text-muted-foreground"
+												>
+													Z (height)
+												</Label>
+												<Input
+													id="dim-z"
+													type="number"
+													step={0.01}
+													min={0}
+													value={dims.z}
+													onChange={(e) => setDim("z", e.target.value)}
+													className="mt-1"
+												/>
+											</div>
 										</div>
-										<div>
-											<Label
-												htmlFor="dim-z"
-												className="text-xs text-muted-foreground"
-											>
-												Z (height)
-											</Label>
-											<Input
-												id="dim-z"
-												type="number"
-												step={0.01}
-												min={0}
-												value={dims.z}
-												onChange={(e) => setDim("z", e.target.value)}
-												className="mt-1"
-											/>
-										</div>
-									</div>
-								</section>
+									</section>

+									{/* Available rotations */}
+									<section className="rounded-lg border bg-card p-4">
+										<div className="flex items-center gap-2 mb-3">
+											<Compass className="w-4 h-4 text-muted-foreground" />
+											<h3 className="text-sm font-medium">Directions</h3>
+											<span className="ml-auto text-xs text-muted-foreground">
+												{directions.length} / 8 active
+											</span>
+										</div>
+										<div className="grid grid-cols-4 gap-2">
+											{ALL_DIRECTIONS.map((dir) => (
+												<button
+													key={dir}
+													type="button"
+													className="nitro-direction"
+													aria-label={`Direction ${dir} (${DIR_LABELS[dir]})`}
+													aria-pressed={directions.includes(dir)}
+													onClick={() => toggleDirection(dir)}
+												>
+													<strong>{DIR_LABELS[dir]}</strong>
+													<span>{dir}</span>
+												</button>
+											))}
+										</div>
+										<p className="mt-3 text-xs text-muted-foreground">
+											Choose the available rotations. Keep at least one
+											direction active.
+										</p>
+									</section>
+								</div>
 								{/* Interaction card */}
 								<section className="rounded-lg border bg-card p-4">
 									<div className="flex items-center gap-2 mb-3">
@@ -506,6 +544,7 @@ export function NitroEditorDialog({
 										<div className="flex items-center justify-between rounded-md border px-3 py-2 hover:bg-muted/50 transition-colors">
 											<span className="text-sm">Can Stand On</span>
 											<Switch
+												aria-label="Can Stand On"
 												checked={flags.canstandon}
 												onCheckedChange={(v) =>
 													setFlags((f) => ({ ...f, canstandon: !!v }))
@@ -515,6 +554,7 @@ export function NitroEditorDialog({
 										<div className="flex items-center justify-between rounded-md border px-3 py-2 hover:bg-muted/50 transition-colors">
 											<span className="text-sm">Can Sit On</span>
 											<Switch
+												aria-label="Can Sit On"
 												checked={flags.cansiton}
 												onCheckedChange={(v) =>
 													setFlags((f) => ({ ...f, cansiton: !!v }))
@@ -524,6 +564,7 @@ export function NitroEditorDialog({
 										<div className="flex items-center justify-between rounded-md border px-3 py-2 hover:bg-muted/50 transition-colors">
 											<span className="text-sm">Can Lay On</span>
 											<Switch
+												aria-label="Can Lay On"
 												checked={flags.canlayon}
 												onCheckedChange={(v) =>
 													setFlags((f) => ({ ...f, canlayon: !!v }))
@@ -581,58 +622,6 @@ export function NitroEditorDialog({
 								</section>
 							</div>

-							{/* Directions - visual compass */}
-							<section className="rounded-lg border bg-card p-4">
-								<div className="flex items-center gap-2 mb-3">
-									<Compass className="w-4 h-4 text-muted-foreground" />
-									<h3 className="text-sm font-medium">Directions</h3>
-									<span className="text-xs text-muted-foreground ml-auto">
-										{directions.length} active
-									</span>
-								</div>
-								<div className="flex items-center justify-center">
-									<div className="relative w-48 h-48">
-										{/* Compass circle */}
-										<div className="absolute inset-0 rounded-full border-2 border-muted" />
-										<div className="absolute inset-4 rounded-full border border-muted/50" />
-										{/* Direction buttons arranged in circle */}
-										{ALL_DIRECTIONS.map((dir) => {
-											const angle = (dir * 45 - 90) * (Math.PI / 180);
-											const r = 80;
-											const x = 96 + r * Math.cos(angle) - 18;
-											const y = 96 + r * Math.sin(angle) - 18;
-											const isActive = directions.includes(dir);
-											return (
-												<button
-													type="button"
-													key={dir}
-													className={`absolute w-9 h-9 rounded-full border-2 flex flex-col items-center justify-center text-xs font-medium transition-all ${
-														isActive
-															? "bg-primary text-primary-foreground border-primary shadow-md scale-110"
-															: "bg-card text-muted-foreground border-muted hover:border-foreground/30 hover:scale-105"
-													}`}
-													style={{ left: x, top: y }}
-													onClick={() => toggleDirection(dir)}
-												>
-													<span className="text-[9px] leading-none">
-														{DIR_LABELS[dir]}
-													</span>
-													<span className="text-[8px] leading-none opacity-60">
-														{dir}
-													</span>
-												</button>
-											);
-										})}
-										{/* Center label */}
-										<div className="absolute inset-0 flex items-center justify-center">
-											<span className="text-xs text-muted-foreground font-medium">
-												{directions.length}/8
-											</span>
-										</div>
-									</div>
-								</div>
-							</section>
-
 							{/* Types */}
 							<section className="rounded-lg border bg-card p-4">
 								<div className="flex items-center gap-2 mb-3">
@@ -858,7 +847,8 @@ export function NitroEditorDialog({
 						>
 							<div className="relative flex-1 min-h-0">
 								<Textarea
-									className="h-full min-h-[400px] font-mono text-xs resize-none"
+									aria-label="Nitro metadata JSON"
+									className="h-full min-h-0 font-mono text-xs resize-none"
 									value={jsonText}
 									onChange={(e) => handleJsonTextChange(e.target.value)}
 									spellCheck={false}
@@ -903,7 +893,13 @@ export function NitroEditorDialog({
 						</Button>
 						<Button
 							onClick={handleSave}
-							disabled={saving || loading || !metadata}
+							disabled={
+								saving ||
+								loading ||
+								!metadata ||
+								!hasChanges ||
+								(activeTab === "json" && !!jsonError)
+							}
 							className="gap-1.5"
 						>
 							{saving ? (
@@ -0,0 +1,63 @@
+[data-nitro-editor] {
+	color: var(--admin-text);
+	background: var(--admin-surface);
+	border-color: var(--admin-border);
+}
+[data-nitro-editor] section,
+[data-nitro-editor] .border,
+[data-nitro-editor] .border-b,
+[data-nitro-editor] .border-t {
+	border-color: var(--admin-border);
+}
+[data-nitro-editor] section {
+	background: var(--admin-canvas);
+}
+[data-nitro-editor] h3 {
+	font-size: 14px;
+	margin: 0;
+}
+[data-nitro-editor] [data-slot="switch"] {
+	width: 40px;
+	height: 24px;
+	background: var(--admin-border);
+	border: 1px solid var(--admin-text-muted);
+}
+[data-nitro-editor] [data-slot="switch"][data-checked] {
+	background: var(--admin-accent);
+	border-color: var(--admin-accent);
+}
+[data-nitro-editor] [data-slot="switch-thumb"] {
+	width: 18px;
+	height: 18px;
+	background: var(--admin-text);
+	color: var(--admin-canvas);
+	left: 2px;
+}
+[data-nitro-editor] [data-slot="switch-thumb"][data-checked] {
+	left: calc(100% - 20px);
+}
+[data-nitro-editor] .nitro-direction {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 3px;
+	min-height: 52px;
+	border: 1px solid var(--admin-border);
+	border-radius: 8px;
+	background: var(--admin-surface);
+	color: var(--admin-text-muted);
+	font-size: 12px;
+}
+[data-nitro-editor] .nitro-direction[aria-pressed="true"] {
+	border-color: var(--admin-accent);
+	background: var(--admin-accent);
+	color: var(--admin-accent-foreground);
+}
+[data-nitro-editor] .nitro-direction:focus-visible {
+	outline: 2px solid var(--admin-accent);
+	outline-offset: 3px;
+}
+[data-nitro-editor] [data-slot="dialog-footer"] {
+	flex-shrink: 0;
+}
@@ -3,7 +3,11 @@
 import { useCallback, useEffect, useState } from "react";
 import { adminFetch } from "@/lib/admin-fetch";

+import { CatalogGitConfiguration } from "./catalog-git-configuration";
+
 type ExportStatus = {
+	remote?: string;
+	branch?: string;
 	enabled: boolean;
 	pending: number;
 	active: number;
@@ -13,7 +17,11 @@ type ExportStatus = {
 	error?: string;
 };

-export function CatalogExportClient() {
+export function CatalogExportClient({
+	canConfigure = false,
+}: {
+	canConfigure?: boolean;
+}) {
 	const [status, setStatus] = useState<ExportStatus | null>(null);
 	const [error, setError] = useState("");
 	const [busy, setBusy] = useState(false);
@@ -55,26 +63,34 @@ export function CatalogExportClient() {
 			<h2 className="text-lg font-semibold">Catalog repository export</h2>
 			<p className="text-sm text-muted-foreground">
 				Automatically publishes bundles, icons, gamedata, translations and
-				catalog SQL to Epicnabbo-Catalogus-Updated-Daily (Beta-3).
+				catalog SQL to your configured Gitea repository.
 			</p>
+			{canConfigure && (
+				<CatalogGitConfiguration onSaved={() => void refresh()} />
+			)}
+			{status?.remote && (
+				<p className="text-xs break-all">
+					{status.remote} · {status.branch}
+				</p>
+			)}
 			<div role="status" className="text-sm" aria-live="polite">
 				{!status
 					? "Loading…"
 					: !status.enabled
-						? "Not configured on this server."
+						? "Export disabled. Configure the Gitea connection below."
 						: status.active
 							? `Waiting for ${status.active} operation(s) to finish.`
 							: status.running
 								? "Export in progress…"
 								: status.pending
-									? `${status.pending} update(s) queued for the worker.`
+									? `${status.pending} update(s) queued for export.`
 									: "No pending updates."}
 				{status?.commit && (
 					<p>
 						Last published commit:{" "}
 						<a
 							className="underline"
-							href={`https://gitlab.epicnabbo.nl/remco/Epicnabbo-Catalogus-Updated-Daily/commit/${status.commit}`}
+							href={`${status.remote?.replace(/\.git$/, "")}/commit/${status.commit}`}
 							target="_blank"
 							rel="noreferrer"
 						>
@@ -0,0 +1,169 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { adminFetch } from "@/lib/admin-fetch";
+
+interface Configuration {
+	provider: string;
+	enabled: boolean;
+	remote: string;
+	branch: string;
+	username: string;
+	hasToken: boolean;
+}
+export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
+	const [config, setConfig] = useState<Configuration | null>(null),
+		[token, setToken] = useState(""),
+		[busy, setBusy] = useState(false),
+		[error, setError] = useState(""),
+		[message, setMessage] = useState("");
+	useEffect(() => {
+		const abort = new AbortController();
+		void (async () => {
+			try {
+				const res = await adminFetch("/api/admin/catalog-export/config", {
+					signal: abort.signal,
+					cache: "no-store",
+				});
+				if (!res.ok)
+					throw new Error(
+						"Unable to read Git settings. Settings edit permission is required.",
+					);
+				const data = await res.json();
+				if (!abort.signal.aborted) setConfig(data);
+			} catch (error) {
+				if (!abort.signal.aborted) setError((error as Error).message);
+			}
+		})();
+		return () => abort.abort();
+	}, []);
+	async function submit(action: "save" | "test") {
+		if (!config || busy) return;
+		setBusy(true);
+		setError("");
+		setMessage("");
+		try {
+			const res = await adminFetch("/api/admin/catalog-export/config", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ ...config, token, action }),
+			});
+			const data = await res.json();
+			if (!res.ok)
+				throw new Error(data.error || "Git configuration request failed");
+			if (action === "save") {
+				setConfig(data);
+				setToken("");
+				setMessage("Gitea configuration saved.");
+				onSaved();
+			} else setMessage(data.message);
+		} catch (error) {
+			setError((error as Error).message);
+		} finally {
+			setBusy(false);
+		}
+	}
+	return (
+		<details
+			className="rounded-lg border border-[var(--admin-border)] p-3"
+			open
+		>
+			<summary className="cursor-pointer font-semibold">
+				Gitea connection settings
+			</summary>
+			<p className="my-3 text-sm text-[var(--admin-text-muted)]">
+				Connect your self-hosted Gitea repository over HTTPS. The CMS manages
+				its own checkout; no Git-specific .env settings are needed.
+			</p>
+			{config && (
+				<fieldset disabled={busy} className="space-y-3">
+					<p className="text-sm">
+						Provider: <strong>Gitea self-hosted</strong>
+					</p>
+					<label htmlFor="catalog-git-1" className="block text-sm">
+						Repository URL
+						<Input
+							id="catalog-git-1"
+							type="url"
+							value={config.remote}
+							onChange={(event) =>
+								setConfig({ ...config, remote: event.target.value })
+							}
+						/>
+					</label>
+					<div className="grid gap-3 sm:grid-cols-2">
+						<label htmlFor="catalog-git-2" className="block text-sm">
+							Branch
+							<Input
+								id="catalog-git-2"
+								value={config.branch}
+								onChange={(event) =>
+									setConfig({ ...config, branch: event.target.value })
+								}
+							/>
+						</label>
+						<label htmlFor="catalog-git-3" className="block text-sm">
+							Gitea username
+							<Input
+								id="catalog-git-3"
+								autoComplete="off"
+								value={config.username}
+								onChange={(event) =>
+									setConfig({ ...config, username: event.target.value })
+								}
+							/>
+						</label>
+					</div>
+					<label htmlFor="catalog-git-4" className="block text-sm">
+						Gitea access token
+						<Input
+							id="catalog-git-4"
+							type="password"
+							autoComplete="new-password"
+							value={token}
+							placeholder={
+								config.hasToken
+									? "Token saved — leave blank to keep it"
+									: "Enter a token with repository write access"
+							}
+							onChange={(event) => setToken(event.target.value)}
+						/>
+					</label>
+					<p className="text-xs text-[var(--admin-text-muted)]">
+						The token is stored encrypted and is never returned to the browser.
+						Changing repository or username requires entering the token again.
+					</p>
+					<label className="flex items-center gap-2 text-sm">
+						<input
+							type="checkbox"
+							checked={config.enabled}
+							onChange={(event) =>
+								setConfig({ ...config, enabled: event.target.checked })
+							}
+						/>
+						Automatically export catalog changes
+					</label>
+					<div className="flex flex-wrap gap-2">
+						<Button variant="outline" onClick={() => void submit("test")}>
+							Test connection
+						</Button>
+						<Button onClick={() => void submit("save")}>
+							{busy ? "Working…" : "Save Gitea settings"}
+						</Button>
+					</div>
+				</fieldset>
+			)}
+			{error && (
+				<p role="alert" className="mt-3 text-sm text-[var(--admin-warning)]">
+					{error}
+				</p>
+			)}
+			{message && (
+				<p role="status" className="mt-3 text-sm">
+					{message}
+				</p>
+			)}
+		</details>
+	);
+}
@@ -14,7 +14,13 @@ export default async function StudioSyncPage(_props: {
 	}
 	return (
 		<div className="space-y-8">
-			<CatalogExportClient />
+			<CatalogExportClient
+				canConfigure={canAccess(
+					permissions,
+					PERMS.SETTINGS_EDIT,
+					session.user.rank,
+				)}
+			/>
 			<h1 className="text-2xl font-bold tracking-tight">Sync All Sources</h1>
 			<p className="text-muted-foreground mt-2">
 				Scan configured sources and automatically import any furniture that is