Support Gitea configuration and safe Catalog Studio furniture completion

src/app/admin/import/furni/nitro-editor-dialog.tsx

@@ -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 ? (

src/app/admin/import/furni/nitro-editor.css

@@ -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;
+}