Fix settings form editing issues with isUserEditing state flag

- Added isUserEditing state to track when user is actively editing a form
- Prevented form values from being overwritten during editing
- Fixed issues in ContentFilterSettings, NestFeederSettings, OllamaSettings, XNostrSettings, WalletSettings, and panel components
- Added custom save/reset handlers to manage editing state properly

Author: Maphikza

src/components/settings/BaseSettingsPanel.tsx

@@ -13,16 +13,21 @@ interface BaseSettingsPanelProps {
   loading: boolean;
   error: Error | null;
   children: React.ReactNode;
+  extra?: React.ReactNode;
 }
 
 const BaseSettingsPanel: React.FC<BaseSettingsPanelProps> = ({
   title,
   loading,
   error,
   children,
+  extra,
 }) => {
   return (
-    <StyledCard title={title}>
+    <StyledCard 
+      title={title}
+      extra={extra}
+    >
       {error && (
         <Alert
           message="Error"

src/components/settings/ContentFilterSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Form, InputNumber, Switch, Select, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
@@ -18,10 +18,11 @@ const ContentFilterSettings: React.FC = () => {
   } = useGenericSettings('content_filter');
 
   const [form] = Form.useForm();
+  const [isUserEditing, setIsUserEditing] = useState(false);
 
-  // Update form values when settings change
+  // Update form values when settings change, but only if user isn't actively editing
   useEffect(() => {
-    if (settings) {
+    if (settings && !isUserEditing) {
       console.log('ContentFilterSettings - Received settings:', settings);
 
       // Transform property names to match form field names
@@ -47,13 +48,20 @@ const ContentFilterSettings: React.FC = () => {
         console.log('ContentFilterSettings - Form values after set:', form.getFieldsValue());
       }, 100);
     }
-  }, [settings, form]);
+  }, [settings, form, isUserEditing]);
 
   // Handle form value changes
   const handleValuesChange = (changedValues: Partial<SettingsGroupType<'content_filter'>>) => {
+    setIsUserEditing(true); // Mark that user is currently editing
     updateSettings(changedValues);
   };
 
+  // Modified save function to reset the editing flag
+  const handleSave = async () => {
+    await saveSettings();
+    setIsUserEditing(false); // Reset after saving
+  };
+
   // Available Nostr kind options for full text filtering
   const kindOptions = [
     { value: 1, label: 'Kind 1 - Text Notes' },
@@ -68,15 +76,21 @@ const ContentFilterSettings: React.FC = () => {
       title="Content Filter Settings"
       loading={loading}
       error={error}
-      onSave={saveSettings}
-      onReset={fetchSettings}
+      onSave={handleSave}
+      onReset={() => {
+        fetchSettings();
+        setIsUserEditing(false);
+      }}
     >
       <Form
         form={form}
         layout="vertical"
         onValuesChange={handleValuesChange}
         initialValues={settings || {}}
-        onFinish={(values) => console.log('Form submitted with values:', values)}
+        onFinish={(values) => {
+          console.log('Form submitted with values:', values);
+          setIsUserEditing(false);
+        }}
       >
         <Form.Item
           name="content_filter_enabled"

src/components/settings/NestFeederSettings.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Form, Input, InputNumber, Switch, Tooltip } from 'antd';
-import { QuestionCircleOutlined } from '@ant-design/icons';
+import { QuestionCircleOutlined, ApiOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
@@ -16,28 +16,28 @@ const NestFeederSettings: React.FC = () => {
   } = useGenericSettings('nest_feeder');
 
   const [form] = Form.useForm();
+  const [isUserEditing, setIsUserEditing] = useState(false);
 
-  // Update form values when settings change
+  // Update form values when settings change, but only if user isn't actively editing
   useEffect(() => {
-    if (settings) {
+    if (settings && !isUserEditing) {
       console.log('NestFeederSettings - Received settings:', settings);
 
       // Transform property names to match form field names
-      // The API returns properties without the prefix, but the form expects prefixed names
       const settingsObj = settings as Record<string, any>;
 
       const formValues = {
         nest_feeder_enabled: settingsObj.enabled,
         nest_feeder_url: settingsObj.url,
-        nest_feeder_timeout: typeof settingsObj.timeout === 'string' 
-          ? parseInt(settingsObj.timeout) 
-          : settingsObj.timeout,
-        nest_feeder_cache_size: typeof settingsObj.cache_size === 'string' 
-          ? parseInt(settingsObj.cache_size) 
+        nest_feeder_cache_size: typeof settingsObj.cache_size === 'string'
+          ? parseInt(settingsObj.cache_size)
           : settingsObj.cache_size,
-        nest_feeder_cache_ttl: typeof settingsObj.cache_ttl === 'string' 
-          ? parseInt(settingsObj.cache_ttl) 
-          : settingsObj.cache_ttl
+        nest_feeder_cache_ttl: typeof settingsObj.cache_ttl === 'string'
+          ? parseInt(settingsObj.cache_ttl)
+          : settingsObj.cache_ttl,
+        nest_feeder_timeout: typeof settingsObj.timeout === 'string'
+          ? parseInt(settingsObj.timeout)
+          : settingsObj.timeout,
       };
 
       console.log('NestFeederSettings - Transformed form values:', formValues);
@@ -48,27 +48,40 @@ const NestFeederSettings: React.FC = () => {
         console.log('NestFeederSettings - Form values after set:', form.getFieldsValue());
       }, 100);
     }
-  }, [settings, form]);
+  }, [settings, form, isUserEditing]);
 
   // Handle form value changes
   const handleValuesChange = (changedValues: Partial<SettingsGroupType<'nest_feeder'>>) => {
+    setIsUserEditing(true); // Mark that user is currently editing
     updateSettings(changedValues);
   };
 
+  // Modified save function to reset the editing flag
+  const handleSave = async () => {
+    await saveSettings();
+    setIsUserEditing(false); // Reset after saving
+  };
+
   return (
     <BaseSettingsForm
       title="Nest Feeder Settings"
       loading={loading}
       error={error}
-      onSave={saveSettings}
-      onReset={fetchSettings}
+      onSave={handleSave}
+      onReset={() => {
+        fetchSettings();
+        setIsUserEditing(false);
+      }}
     >
       <Form
         form={form}
         layout="vertical"
         onValuesChange={handleValuesChange}
         initialValues={settings || {}}
-        onFinish={(values) => console.log('Form submitted with values:', values)}
+        onFinish={(values) => {
+          console.log('Form submitted with values:', values);
+          setIsUserEditing(false);
+        }}
       >
         <Form.Item
           name="nest_feeder_enabled"
@@ -82,68 +95,68 @@ const NestFeederSettings: React.FC = () => {
           name="nest_feeder_url"
           label={
             <span>
-              Nest Feeder URL&nbsp;
-              <Tooltip title="URL of the Nest Feeder service">
+              API Endpoint&nbsp;
+              <Tooltip title="URL of the Nest Feeder API">
                 <QuestionCircleOutlined />
               </Tooltip>
             </span>
           }
-          rules={[
-            { required: true, message: 'Please enter the Nest Feeder URL' },
-            { type: 'url', message: 'Please enter a valid URL' }
-          ]}
+          rules={[{ required: true, message: 'Please enter the API endpoint' }]}
         >
-          <Input placeholder="https://nest-feeder.example.com" />
+          <Input 
+            prefix={<ApiOutlined />}
+            placeholder="http://localhost:8000/feed" 
+          />
         </Form.Item>
 
         <Form.Item
-          name="nest_feeder_timeout"
+          name="nest_feeder_cache_size"
           label={
             <span>
-              Timeout (seconds)&nbsp;
-              <Tooltip title="Maximum time to wait for a response from the Nest Feeder service">
+              Cache Size&nbsp;
+              <Tooltip title="Maximum number of entries in the nest feeder cache">
                 <QuestionCircleOutlined />
               </Tooltip>
             </span>
           }
           rules={[
-            { required: true, message: 'Please enter a timeout value' },
-            { type: 'number', min: 1, message: 'Value must be at least 1' }
+            { required: true, message: 'Please enter a cache size' },
+            { type: 'number', min: 100, message: 'Value must be at least 100' }
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <InputNumber min={100} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
-          name="nest_feeder_cache_size"
+          name="nest_feeder_cache_ttl"
           label={
             <span>
-              Cache Size&nbsp;
-              <Tooltip title="Maximum number of entries to store in the Nest Feeder cache">
+              Cache TTL (seconds)&nbsp;
+              <Tooltip title="Time to live for cache entries in seconds">
                 <QuestionCircleOutlined />
               </Tooltip>
             </span>
           }
           rules={[
-            { required: true, message: 'Please enter a cache size' },
-            { type: 'number', min: 100, message: 'Value must be at least 100' }
+            { required: true, message: 'Please enter a cache TTL' },
+            { type: 'number', min: 1, message: 'Value must be at least 1' }
           ]}
         >
-          <InputNumber min={100} style={{ width: '100%' }} />
+          <InputNumber min={1} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
-          name="nest_feeder_cache_ttl"
+          name="nest_feeder_timeout"
           label={
             <span>
-              Cache TTL (seconds)&nbsp;
-              <Tooltip title="Time to live for cache entries in seconds">
+              Timeout (seconds)&nbsp;
+              <Tooltip title="Timeout for API requests">
                 <QuestionCircleOutlined />
               </Tooltip>
             </span>
           }
           rules={[
-            { required: true, message: 'Please enter a cache TTL' },
+            { required: true, message: 'Please enter a timeout value' },
             { type: 'number', min: 1, message: 'Value must be at least 1' }
           ]}
         >

src/components/settings/OllamaSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Form, Input, InputNumber, Select, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
@@ -18,10 +18,11 @@ const OllamaSettings: React.FC = () => {
   } = useGenericSettings('ollama');
 
   const [form] = Form.useForm();
+  const [isUserEditing, setIsUserEditing] = useState(false);
 
-  // Update form values when settings change
+  // Update form values when settings change, but only if user isn't actively editing
   useEffect(() => {
-    if (settings) {
+    if (settings && !isUserEditing) {
       console.log('OllamaSettings - Received settings:', settings);
 
       // Transform property names to match form field names
@@ -44,13 +45,20 @@ const OllamaSettings: React.FC = () => {
         console.log('OllamaSettings - Form values after set:', form.getFieldsValue());
       }, 100);
     }
-  }, [settings, form]);
+  }, [settings, form, isUserEditing]);
 
   // Handle form value changes
   const handleValuesChange = (changedValues: Partial<SettingsGroupType<'ollama'>>) => {
+    setIsUserEditing(true); // Mark that user is currently editing
     updateSettings(changedValues);
   };
 
+  // Modified save function to reset the editing flag
+  const handleSave = async () => {
+    await saveSettings();
+    setIsUserEditing(false); // Reset after saving
+  };
+
   // Common Ollama models
   const modelOptions = [
     { value: 'llama2', label: 'Llama 2' },
@@ -74,15 +82,21 @@ const OllamaSettings: React.FC = () => {
       title="Ollama Settings"
       loading={loading}
       error={error}
-      onSave={saveSettings}
-      onReset={fetchSettings}
+      onSave={handleSave}
+      onReset={() => {
+        fetchSettings();
+        setIsUserEditing(false);
+      }}
     >
       <Form
         form={form}
         layout="vertical"
         onValuesChange={handleValuesChange}
         initialValues={settings || {}}
-        onFinish={(values) => console.log('Form submitted with values:', values)}
+        onFinish={(values) => {
+          console.log('Form submitted with values:', values);
+          setIsUserEditing(false);
+        }}
       >
         <Form.Item
           name="ollama_url"