From 6b4b3924a18b03d8e29aab76b9ffbf96d5194735 Mon Sep 17 00:00:00 2001
From: Shroominic <db2002dominic@gmail.com>
Date: Tue, 2 Dec 2025 15:23:00 +0800
Subject: [PATCH] feat(ui): make admin settings dynamic based on backend
 response

This update changes the admin settings page to dynamically render settings fields based on the JSON response from the backend, rather than hardcoding them. This ensures that new settings added to the backend are automatically available in the UI without code changes.

- Specific handling for known fields like name, description, urls, keys, mints, and relays remains to provide a polished UX.
- All other fields are rendered dynamically based on their type (boolean, number, string, array).
- Sensitive fields (keys, passwords) are automatically masked.
- Specific internal/unused fields are ignored.
---
 ui/components/settings/admin-settings.tsx | 196 +++++++++++++++++++++-
 1 file changed, 194 insertions(+), 2 deletions(-)

diff --git a/ui/components/settings/admin-settings.tsx b/ui/components/settings/admin-settings.tsx
index c81d0b75..dd8468db 100644
--- a/ui/components/settings/admin-settings.tsx
+++ b/ui/components/settings/admin-settings.tsx
@@ -18,6 +18,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { AlertCircle, Save, RefreshCw, Eye, EyeOff } from 'lucide-react';
 import { toast } from 'sonner';
+import { Switch } from '@/components/ui/switch';
 
 interface SettingsData {
   name?: string;
@@ -28,9 +29,32 @@ interface SettingsData {
   http_url?: string;
   onion_url?: string;
   cashu_mints?: string[];
+  relays?: string[];
   [key: string]: unknown;
 }
 
+const HANDLED_KEYS = [
+  'name',
+  'description',
+  'http_url',
+  'onion_url',
+  'npub',
+  'nsec',
+  'cashu_mints',
+  'relays',
+  'admin_password',
+  'id',
+  'updated_at',
+];
+
+const IGNORED_KEYS = [
+  'upstream_base_url',
+  'upstream_api_key',
+  'upstream_provider_fee',
+  'exchange_fee',
+  'models_path',
+];
+
 interface PasswordData {
   current_password: string;
   new_password: string;
@@ -44,6 +68,7 @@ export function AdminSettings() {
   const [error, setError] = useState<string>('');
   const [showSecrets, setShowSecrets] = useState(false);
   const [newMint, setNewMint] = useState('');
+  const [newRelay, setNewRelay] = useState('');
   const [passwordData, setPasswordData] = useState<PasswordData>({
     current_password: '',
     new_password: '',
@@ -129,7 +154,7 @@ export function AdminSettings() {
     }
   };
 
-  const handleInputChange = (field: string, value: string | boolean) => {
+  const handleInputChange = (field: string, value: unknown) => {
     setSettings((prev) => ({
       ...prev,
       [field]: value,
@@ -153,6 +178,23 @@ export function AdminSettings() {
     }));
   };
 
+  const addRelay = () => {
+    if (newRelay.trim()) {
+      setSettings((prev) => ({
+        ...prev,
+        relays: [...(prev.relays || []), newRelay.trim()],
+      }));
+      setNewRelay('');
+    }
+  };
+
+  const removeRelay = (index: number) => {
+    setSettings((prev) => ({
+      ...prev,
+      relays: prev.relays?.filter((_, i) => i !== index) || [],
+    }));
+  };
+
   const renderSecretField = (
     field: string,
     label: string,
@@ -162,7 +204,7 @@ export function AdminSettings() {
     const displayValue = showSecrets ? value : value ? '••••••••' : '';
 
     return (
-      <div className='space-y-2'>
+      <div key={field} className='space-y-2'>
         <Label htmlFor={field}>{label}</Label>
         <div className='flex gap-2'>
           <Input
@@ -190,6 +232,89 @@ export function AdminSettings() {
     );
   };
 
+  const renderDynamicField = (key: string, value: unknown) => {
+    const label = key
+      .split('_')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+
+    if (typeof value === 'boolean') {
+      return (
+        <div
+          key={key}
+          className='flex items-center justify-between space-y-0 py-4'
+        >
+          <Label htmlFor={key}>{label}</Label>
+          <Switch
+            id={key}
+            checked={value}
+            onCheckedChange={(checked) => handleInputChange(key, checked)}
+          />
+        </div>
+      );
+    }
+
+    if (typeof value === 'number') {
+      return (
+        <div key={key} className='space-y-2'>
+          <Label htmlFor={key}>{label}</Label>
+          <Input
+            id={key}
+            type='number'
+            value={value}
+            onChange={(e) => {
+              const val = e.target.value === '' ? 0 : Number(e.target.value);
+              handleInputChange(key, val);
+            }}
+          />
+        </div>
+      );
+    }
+
+    if (Array.isArray(value)) {
+      const strValue = value.join(', ');
+      return (
+        <div key={key} className='space-y-2'>
+          <Label htmlFor={key}>{label}</Label>
+          <Textarea
+            id={key}
+            value={strValue}
+            onChange={(e) => {
+              const arr = e.target.value
+                .split(',')
+                .map((s) => s.trim())
+                .filter((s) => s !== '');
+              handleInputChange(key, arr);
+            }}
+            placeholder='Comma separated values'
+            rows={2}
+          />
+        </div>
+      );
+    }
+
+    const isSecret =
+      key.includes('key') ||
+      key.includes('password') ||
+      key.includes('secret') ||
+      key.includes('nsec');
+
+    if (isSecret) {
+      return renderSecretField(key, label);
+    }
+
+    return (
+      <div key={key} className='space-y-2'>
+        <Label htmlFor={key}>{label}</Label>
+        <Input
+          id={key}
+          value={(value as string) || ''}
+          onChange={(e) => handleInputChange(key, e.target.value)}
+        />
+      </div>
+    );
+  };
+
   if (loading) {
     return (
       <div className='flex items-center justify-center py-8'>
@@ -337,6 +462,73 @@ export function AdminSettings() {
           </CardContent>
         </Card>
 
+        {/* Relays */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Nostr Relays</CardTitle>
+            <CardDescription>
+              Configure Nostr relays for communication
+            </CardDescription>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <div className='space-y-2'>
+              <Label htmlFor='newRelay'>Add Relay URL</Label>
+              <div className='flex gap-2'>
+                <Input
+                  id='newRelay'
+                  value={newRelay}
+                  onChange={(e) => setNewRelay(e.target.value)}
+                  placeholder='wss://relay.example.com'
+                />
+                <Button onClick={addRelay} disabled={!newRelay.trim()}>
+                  Add Relay
+                </Button>
+              </div>
+            </div>
+
+            {settings.relays && settings.relays.length > 0 && (
+              <div className='space-y-2'>
+                <Label>Configured Relays</Label>
+                <div className='space-y-2'>
+                  {settings.relays.map((relay, index) => (
+                    <div
+                      key={index}
+                      className='flex items-center gap-2 rounded border p-2'
+                    >
+                      <span className='flex-1 text-sm'>{relay}</span>
+                      <Button
+                        variant='outline'
+                        size='sm'
+                        onClick={() => removeRelay(index)}
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Other Settings */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Advanced Settings</CardTitle>
+            <CardDescription>
+              Configure additional node settings
+            </CardDescription>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            {Object.keys(settings)
+              .filter(
+                (key) =>
+                  !HANDLED_KEYS.includes(key) && !IGNORED_KEYS.includes(key)
+              )
+              .map((key) => renderDynamicField(key, settings[key]))}
+          </CardContent>
+        </Card>
+
         <Card className='mt-6'>
           <CardFooter className='flex justify-between'>
             <Button