sync

src/components/admin-settings-editor.tsx

@@ -18,8 +18,22 @@ type Props = {
   rows: DbSetting[];
   saveError: boolean;
   addError: string | null;
+  readOnly?: boolean;
 };
 
+function ReadOnlySettingRow({ row }: { row: DbSetting }) {
+  return (
+    <div className="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
+      <p className="font-mono text-sm text-zinc-900 dark:text-zinc-100">
+        {row.key}
+      </p>
+      <p className="mt-2 break-all text-sm text-zinc-700 dark:text-zinc-300">
+        {row.value?.trim() ? row.value : "—"}
+      </p>
+    </div>
+  );
+}
+
 function DefaultSettingRow({ row, index }: { row: DbSetting; index: number }) {
   const [value, setValue] = useState(row.value ?? "");
   const saveDisabled = value.trim() === "";
@@ -271,10 +285,52 @@ export function AdminSettingsEditor({
   rows,
   saveError,
   addError,
+  readOnly = false,
 }: Props) {
   const [newKey, setNewKey] = useState("");
   const [newValue, setNewValue] = useState("");
 
+  if (readOnly) {
+    return (
+      <div className="mx-auto w-full max-w-[900px] space-y-8">
+        <div
+          className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-100"
+          role="status"
+        >
+          Settings are view-only for your account. Contact an admin to make
+          changes.
+        </div>
+
+        <section className="space-y-3">
+          <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+            Existing keys
+          </h2>
+          {rows.length === 0 ? (
+            <p className="rounded-xl border border-zinc-200 bg-white px-4 py-8 text-center text-sm text-zinc-500 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
+              No settings rows yet.
+            </p>
+          ) : (
+            <div className="space-y-3">
+              {rows.map((row) => (
+                <ReadOnlySettingRow key={row.key} row={row} />
+              ))}
+            </div>
+          )}
+        </section>
+
+        <p className="text-center text-xs text-zinc-500 dark:text-zinc-400">
+          <Link
+            href="/"
+            className="font-medium text-sky-700 underline decoration-sky-400/60 underline-offset-2 hover:text-sky-900 dark:text-sky-300 dark:hover:text-sky-100"
+            scroll={false}
+          >
+            Back to dashboard
+          </Link>
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="mx-auto w-full max-w-[900px] space-y-8">
       {saveError ? (