Merge pull request #51 from HORNET-Storage/ui/advanced-settings-input-fields

UI: advanced settings input fields

Author: Maphikza

src/components/settings/ContentFilterSettings.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Form, InputNumber, Switch, Select, Tooltip } from 'antd';
+import { Form, Switch, Select, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
+import { InputNumberField } from './Settings.styles';
 
 const { Option } = Select;
 
@@ -115,7 +116,7 @@ const ContentFilterSettings: React.FC = () => {
             { type: 'number', min: 100, message: 'Value must be at least 100' }
           ]}
         >
-          <InputNumber min={100} style={{ width: '100%' }} />
+          <InputNumberField min={100} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
@@ -133,7 +134,7 @@ const ContentFilterSettings: React.FC = () => {
             { type: 'number', min: 1, message: 'Value must be at least 1' }
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <InputNumberField min={1} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item

src/components/settings/GeneralSettings.tsx

@@ -4,6 +4,7 @@ import { QuestionCircleOutlined, LockOutlined, DatabaseOutlined, TagOutlined } f
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
+import * as S from './Settings.styles';
 
 const GeneralSettings: React.FC = () => {
   const {
@@ -58,7 +59,7 @@ const GeneralSettings: React.FC = () => {
             { pattern: /^\d+$/, message: 'Port must be a number' }
           ]}
         >
-          <Input placeholder="8080" />
+          <S.InputField placeholder="8080" />
         </Form.Item>
 
         <Form.Item
@@ -75,7 +76,7 @@ const GeneralSettings: React.FC = () => {
             { required: true, message: 'Please enter the private key' }
           ]}
         >
-          <Input.Password
+          <S.PasswordField
             prefix={<LockOutlined />}
             placeholder="Enter private key"
           />
@@ -92,7 +93,7 @@ const GeneralSettings: React.FC = () => {
             </span>
           }
         >
-          <Input
+          <S.InputFieldWithPrefix
             prefix={<TagOutlined />}
             placeholder="Enter service tag"
           />
@@ -109,7 +110,7 @@ const GeneralSettings: React.FC = () => {
             </span>
           }
         >
-          <Input
+          <S.InputFieldWithPrefix
             prefix={<DatabaseOutlined />}
             placeholder="./data/stats.db"
           />

src/components/settings/ImageModerationSettings.tsx

@@ -1,21 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { Form, Input, InputNumber, Switch, Select, Tooltip } from 'antd';
+import { Form, Switch, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { ImageModerationSettings as ImageModerationSettingsType, SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
-
-const { Option } = Select;
+import * as S from './Settings.styles';
+const { Option } = S.SelectField;
 
 const ImageModerationSettings: React.FC = () => {
-  const {
-    settings,
-    loading,
-    error,
-    fetchSettings,
-    updateSettings,
-    saveSettings,
-  } = useGenericSettings('image_moderation');
+  const { settings, loading, error, fetchSettings, updateSettings, saveSettings } =
+    useGenericSettings('image_moderation');
 
   const [form] = Form.useForm();
   const [isUserEditing, setIsUserEditing] = useState(false);
@@ -24,13 +18,13 @@ const ImageModerationSettings: React.FC = () => {
   useEffect(() => {
     if (settings && !isUserEditing) {
       console.log('ImageModerationSettings - Received settings:', settings);
-      
+
       // The useGenericSettings hook now returns properly prefixed field names
       // so we can use the settings directly without transformation
       const settingsObj = settings as Record<string, any>;
-      
+
       console.log('ImageModerationSettings - Setting form values directly:', settingsObj);
-      
+
       // Set form values directly since they're already properly prefixed
       form.setFieldsValue(settingsObj);
       console.log('ImageModerationSettings - Form values after set:', form.getFieldsValue());
@@ -70,11 +64,7 @@ const ImageModerationSettings: React.FC = () => {
           setIsUserEditing(false);
         }}
       >
-        <Form.Item
-          name="image_moderation_enabled"
-          label="Enable Image Moderation"
-          valuePropName="checked"
-        >
+        <Form.Item name="image_moderation_enabled" label="Enable Image Moderation" valuePropName="checked">
           <Switch />
         </Form.Item>
 
@@ -89,27 +79,35 @@ const ImageModerationSettings: React.FC = () => {
             </span>
           }
         >
-          <Select
-            allowClear={true}
-            placeholder="Select a moderation mode"
-          >
+          <S.SelectField allowClear={true} placeholder="Select a moderation mode">
             <Option value="basic">Basic Mode (Fastest, detects explicit content only)</Option>
             <Option value="strict">Strict Mode (Fast, blocks all buttocks)</Option>
             <Option value="full">Full Mode (Most accurate, uses Llama Vision)</Option>
-          </Select>
+          </S.SelectField>
         </Form.Item>
-        
+
         <Form.Item>
-          <div style={{ 
-            backgroundColor: 'rgba(0, 0, 0, 0.1)', 
-            padding: '12px', 
-            borderRadius: '4px',
-            marginBottom: '16px'
-          }}>
+          <div
+            style={{
+              backgroundColor: 'rgba(0, 0, 0, 0.1)',
+              padding: '12px',
+              borderRadius: '4px',
+              marginBottom: '16px',
+            }}
+          >
             <h4 style={{ marginTop: 0 }}>Moderation Mode Details:</h4>
-            <p><strong>Basic Mode:</strong> Only detects genitals, anus, and exposed breasts. Fastest processing (no Llama Vision). Best for high-volume applications.</p>
-            <p><strong>Strict Mode:</strong> Includes all &quot;basic&quot; detection plus automatic blocking of all detected buttocks. Fast processing. Best for zero-tolerance platforms.</p>
-            <p><strong>Full Mode (Default):</strong> Complete analysis with contextual evaluation. Slower due to Llama Vision, but most accurate. Reduces false positives.</p>
+            <p>
+              <strong>Basic Mode:</strong> Only detects genitals, anus, and exposed breasts. Fastest processing (no
+              Llama Vision). Best for high-volume applications.
+            </p>
+            <p>
+              <strong>Strict Mode:</strong> Includes all &quot;basic&quot; detection plus automatic blocking of all
+              detected buttocks. Fast processing. Best for zero-tolerance platforms.
+            </p>
+            <p>
+              <strong>Full Mode (Default):</strong> Complete analysis with contextual evaluation. Slower due to Llama
+              Vision, but most accurate. Reduces false positives.
+            </p>
           </div>
         </Form.Item>
 
@@ -118,14 +116,11 @@ const ImageModerationSettings: React.FC = () => {
           label="API Endpoint"
           rules={[{ required: true, message: 'Please enter the API endpoint' }]}
         >
-          <Input placeholder="http://localhost:8000/moderate" />
+          <S.InputField placeholder="http://localhost:8000/moderate" />
         </Form.Item>
 
-        <Form.Item
-          name="image_moderation_temp_dir"
-          label="Temporary Directory"
-        >
-          <Input placeholder="./data/moderation/temp" />
+        <Form.Item name="image_moderation_temp_dir" label="Temporary Directory">
+          <S.InputField placeholder="./data/moderation/temp" />
         </Form.Item>
 
         <Form.Item
@@ -140,48 +135,43 @@ const ImageModerationSettings: React.FC = () => {
           }
           rules={[
             { required: true, message: 'Please enter a threshold value' },
-            { type: 'number', min: 0, max: 1, message: 'Value must be between 0 and 1' }
+            { type: 'number', min: 0, max: 1, message: 'Value must be between 0 and 1' },
           ]}
         >
-          <InputNumber
-            step={0.1}
-            min={0}
-            max={1}
-            style={{ width: '100%' }}
-          />
+          <S.InputNumberField step={0.1} min={0} max={1} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
           name="image_moderation_check_interval"
           label="Check Interval (seconds)"
           rules={[
             { required: true, message: 'Please enter a check interval' },
-            { type: 'number', min: 1, message: 'Value must be at least 1' }
+            { type: 'number', min: 1, message: 'Value must be at least 1' },
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <S.InputNumberField min={1} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
           name="image_moderation_concurrency"
           label="Concurrency"
           rules={[
             { required: true, message: 'Please enter a concurrency value' },
-            { type: 'number', min: 1, message: 'Value must be at least 1' }
+            { type: 'number', min: 1, message: 'Value must be at least 1' },
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <S.InputNumberField min={1} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
           name="image_moderation_timeout"
           label="Timeout (seconds)"
           rules={[
             { required: true, message: 'Please enter a timeout value' },
-            { type: 'number', min: 1, message: 'Value must be at least 1' }
+            { type: 'number', min: 1, message: 'Value must be at least 1' },
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <S.InputNumberField min={1} style={{ width: '100%' }} />
         </Form.Item>
       </Form>
     </BaseSettingsForm>

src/components/settings/OllamaSettings.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Form, Input, InputNumber, Select, Tooltip } from 'antd';
+import { Form, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
+import { InputField, InputNumberField, SelectField } from './Settings.styles';
 
-const { Option } = Select;
+const { Option } = SelectField;
 
 const OllamaSettings: React.FC = () => {
   const {
@@ -113,7 +114,7 @@ const OllamaSettings: React.FC = () => {
             { type: 'url', message: 'Please enter a valid URL' }
           ]}
         >
-          <Input placeholder="http://localhost:11434" />
+          <InputField placeholder="http://localhost:11434" />
         </Form.Item>
 
         <Form.Item
@@ -130,7 +131,7 @@ const OllamaSettings: React.FC = () => {
             { required: true, message: 'Please select an Ollama model' }
           ]}
         >
-          <Select
+          <SelectField
             placeholder="Select a model"
             allowClear
             showSearch
@@ -143,7 +144,7 @@ const OllamaSettings: React.FC = () => {
                 {option.label}
               </Option>
             ))}
-          </Select>
+          </SelectField>
         </Form.Item>
 
         <Form.Item
@@ -161,7 +162,7 @@ const OllamaSettings: React.FC = () => {
             { type: 'number', min: 1, message: 'Value must be at least 1' }
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <InputNumberField min={1} style={{ width: '100%' }} />
         </Form.Item>
       </Form>
     </BaseSettingsForm>