Fix rooms list crash and rebuild CMS settings UI.

Rooms queried the wrong Prisma model and a non-existent owner relation. Settings now use grouped managed fields plus a searchable advanced key/value panel. Co-authored-by: Cursor <[email protected]>
2026-07-15 21:02:57 +02:00
parent c186f51ae0
commit e101ea474e
6 changed files with 796 additions and 104 deletions
@@ -0,0 +1,221 @@
+"use client";
+
+import {
+	Building2,
+	Gamepad2,
+	ImageIcon,
+	Link as LinkIcon,
+	Loader2,
+	Music,
+	Save,
+	Shield,
+	UserPlus,
+} from "lucide-react";
+import { useState } from "react";
+import { saveManagedSettings } from "@/actions/admin-settings";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { useServerAction } from "@/hooks/use-server-action";
+import {
+	BOOLEAN_KEYS,
+	type ManagedField,
+	SETTINGS_GROUPS,
+	type SettingsGroup,
+} from "./cms-settings-config";
+
+const ICONS = {
+	building: Building2,
+	image: ImageIcon,
+	gamepad: Gamepad2,
+	music: Music,
+	shield: Shield,
+	link: LinkIcon,
+	"user-plus": UserPlus,
+} as const;
+
+export function CmsSettingsForm({
+	values: initialValues,
+	canEdit,
+}: {
+	values: Record<string, string>;
+	canEdit: boolean;
+}) {
+	const [values, setValues] = useState(initialValues);
+	const { isPending, run } = useServerAction();
+
+	function handleChange(key: string, value: string) {
+		setValues((prev) => ({ ...prev, [key]: value }));
+	}
+
+	function handleSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		if (!canEdit) return;
+		const normalized = { ...values };
+		for (const key of BOOLEAN_KEYS) {
+			normalized[key] = values[key] === "1" ? "1" : "0";
+		}
+		run(() => saveManagedSettings({ settings: normalized }), {
+			successMessage: "Settings saved.",
+			errorMessage: "Could not save settings.",
+		});
+	}
+
+	return (
+		<form onSubmit={handleSubmit} className="space-y-5">
+			{SETTINGS_GROUPS.map((group) => (
+				<GroupSection
+					key={group.id}
+					group={group}
+					values={values}
+					canEdit={canEdit}
+					onChange={handleChange}
+				/>
+			))}
+
+			{canEdit ? (
+				<div className="sticky bottom-3 z-10 flex justify-end">
+					<Button type="submit" disabled={isPending} className="shadow-lg">
+						{isPending ? (
+							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+						) : (
+							<Save className="mr-2 h-4 w-4" />
+						)}
+						Save settings
+					</Button>
+				</div>
+			) : (
+				<p className="text-sm text-muted-foreground">
+					You can view settings but need edit permission to change them.
+				</p>
+			)}
+		</form>
+	);
+}
+
+function GroupSection({
+	group,
+	values,
+	canEdit,
+	onChange,
+}: {
+	group: SettingsGroup;
+	values: Record<string, string>;
+	canEdit: boolean;
+	onChange: (key: string, value: string) => void;
+}) {
+	const Icon = ICONS[group.icon];
+	return (
+		<section className="rounded-2xl border border-[var(--admin-border)] bg-[var(--admin-surface)] p-5 space-y-4 shadow-card">
+			<div className="flex items-start gap-3">
+				<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center shrink-0">
+					<Icon size={18} className="text-[var(--admin-accent)]" />
+				</div>
+				<div className="min-w-0">
+					<h2 className="m-0 text-base font-bold text-[var(--admin-text)]">
+						{group.title}
+					</h2>
+					{group.description ? (
+						<p className="m-0 mt-0.5 text-xs text-[var(--admin-text-muted)]">
+							{group.description}
+						</p>
+					) : null}
+				</div>
+			</div>
+
+			<div className="grid gap-4 sm:grid-cols-2">
+				{group.fields.map((field) => (
+					<FieldControl
+						key={field.key}
+						field={field}
+						value={values[field.key] ?? ""}
+						canEdit={canEdit}
+						onChange={onChange}
+					/>
+				))}
+			</div>
+		</section>
+	);
+}
+
+function FieldControl({
+	field,
+	value,
+	canEdit,
+	onChange,
+}: {
+	field: ManagedField;
+	value: string;
+	canEdit: boolean;
+	onChange: (key: string, value: string) => void;
+}) {
+	const type = field.type ?? "text";
+	const wide = type === "textarea" || type === "boolean";
+
+	if (type === "boolean") {
+		const checked = value === "1" || value.toLowerCase() === "true";
+		return (
+			<div
+				className={`${wide ? "sm:col-span-2" : ""} flex items-center justify-between gap-4 rounded-xl border border-[var(--admin-border)] px-4 py-3`}
+			>
+				<div className="min-w-0">
+					<Label htmlFor={field.key} className="text-sm font-semibold">
+						{field.label}
+					</Label>
+					{field.description ? (
+						<p className="m-0 mt-0.5 text-xs text-muted-foreground">
+							{field.description}
+						</p>
+					) : null}
+				</div>
+				<Switch
+					id={field.key}
+					checked={checked}
+					disabled={!canEdit}
+					onCheckedChange={(next) => onChange(field.key, next ? "1" : "0")}
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<div className={`space-y-1.5 ${wide ? "sm:col-span-2" : ""}`}>
+			<Label htmlFor={field.key} className="text-sm font-semibold">
+				{field.label}
+			</Label>
+			{field.description ? (
+				<p className="m-0 text-xs text-muted-foreground">{field.description}</p>
+			) : null}
+			{type === "textarea" ? (
+				<Textarea
+					id={field.key}
+					value={value}
+					disabled={!canEdit}
+					placeholder={field.placeholder}
+					onChange={(e) => onChange(field.key, e.target.value)}
+					rows={3}
+				/>
+			) : (
+				<Input
+					id={field.key}
+					type={
+						type === "number"
+							? "number"
+							: type === "password"
+								? "password"
+								: "text"
+					}
+					value={value}
+					disabled={!canEdit}
+					placeholder={field.placeholder}
+					onChange={(e) => onChange(field.key, e.target.value)}
+				/>
+			)}
+			<code className="block text-[0.65rem] text-muted-foreground truncate">
+				{field.key}
+			</code>
+		</div>
+	);
+}