Add settings config.

src/renderer/src/components/Settings/Settings.Config.tsx

@@ -0,0 +1,77 @@
+import { Card, Form, Input } from "antd";
+import { FC, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import ipcTypes from "../../../../util/ipcTypes.json";
+
+const SettingsConfig: FC = () => {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  const settingFields = [
+    {
+      name: "esApiKey",
+      label: t("settings.labels.esApiKey"),
+      component: Input,
+      hasFeedback: true,
+      componentProps: {},
+    },
+  ];
+
+  useEffect(() => {
+    settingFields.forEach((field) => {
+      window.electron.ipcRenderer
+        .invoke(ipcTypes.toMain.settings.get, field.name)
+        .then((value: any) => {
+          form.setFieldsValue({ [field.name]: value });
+        });
+    });
+  }, []);
+
+  const handleFieldChange = (changedFields: any): void => {
+    changedFields.forEach((field) => {
+      const fieldName = field.name[0];
+      const { value } = field;
+
+      // Placeholder for validation
+      const isValid = validateField(fieldName, value);
+      if (isValid) {
+        window.electron.ipcRenderer.invoke(
+          ipcTypes.toMain.settings.set,
+          fieldName,
+          value,
+        );
+      }
+    });
+  };
+
+  const validateField = (fieldName: string, value: any): boolean => {
+    // Placeholder for actual validation logic
+    console.log(`Validating ${fieldName}:`, value);
+    return true;
+  };
+
+  return (
+    <Card title={t("settings.labels.config")}>
+      <Form form={form} onFieldsChange={handleFieldChange} layout="vertical">
+        {settingFields.map((field) => (
+          <Form.Item
+            key={field.name}
+            label={t(`settings.labels.${field.name}`, field.label)}
+            name={field.name}
+            hasFeedback={field.hasFeedback}
+            validateStatus="validating"
+            rules={[
+              {
+                required: true,
+                message: t(`settings.validation.${field.name}Required`),
+              },
+            ]}
+          >
+            <field.component {...field.componentProps} />
+          </Form.Item>
+        ))}
+      </Form>
+    </Card>
+  );
+};
+export default SettingsConfig;

src/renderer/src/components/Settings/Settings.tsx

@@ -3,10 +3,10 @@ import { Col, Row } from "antd";
 import { FC } from "react";
 import SettingsWatchedPaths from "./Settings.WatchedPaths";
 import SettingsWatcher from "./Settings.Watcher";
+import SettingsConfig from "./Settings.Config";
 
 const colSpans = {
-  md: 12, // Two columns on medium screens and above
-  sm: 24, // One column on small screens
+  span: 24,
 };
 
 const Settings: FC = () => {
@@ -18,6 +18,9 @@ const Settings: FC = () => {
       <Col {...colSpans}>
         <SettingsWatcher />
       </Col>
+      <Col {...colSpans}>
+        <SettingsConfig />
+      </Col>
     </Row>
   );
 };