Add chokidar watcher settings.

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

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import ipcTypes from "../../../../util/ipcTypes.json";
-import { Button } from "antd";
+import { Button, Space } from "antd";
+import { DeleteFilled } from "@ant-design/icons";
 
 const SettingsWatchedPaths: React.FC = () => {
   const [watchedPaths, setWatchedPaths] = useState<string[]>([]);
@@ -23,10 +24,30 @@ const SettingsWatchedPaths: React.FC = () => {
       });
   };
 
+  const handleRemovePath = (path: string) => {
+    window.electron.ipcRenderer
+      .invoke(ipcTypes.toMain.settings.filepaths.remove, path)
+      .then((paths: string[]) => {
+        setWatchedPaths(paths);
+      });
+  };
+
   return (
     <div>
       <div>Currently Watched paths</div>
-      <ul>{watchedPaths?.map((path, index) => <li key={index}>{path}</li>)}</ul>
+      <ul>
+        {watchedPaths?.map((path, index) => (
+          <li key={index}>
+            <Space>
+              {path}
+              <Button
+                icon={<DeleteFilled />}
+                onClick={() => handleRemovePath(path)}
+              />
+            </Space>
+          </li>
+        ))}
+      </ul>
       <Button onClick={handleAddPath}>{t("settings.actions.addpath")}</Button>
     </div>
   );

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

@@ -0,0 +1,16 @@
+import { Button } from "antd";
+import { useTranslation } from "react-i18next";
+import ipcTypes from "../../../../util/ipcTypes.json";
+
+const SettingsWatcher: React.FC = () => {
+  const { t } = useTranslation();
+
+  const handleStart = () => {
+    window.electron.ipcRenderer.send(ipcTypes.toMain.watcher.start);
+  };
+
+  return (
+    <Button onClick={handleStart}>{t("settings.actions.startwatcher")}</Button>
+  );
+};
+export default SettingsWatcher;

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

@@ -1,9 +1,11 @@
 import SettingsWatchedPaths from "./Settings.WatchedPaths";
+import SettingsWatcher from "./Settings.Watcher";
 
 const Settings: React.FC = () => {
   return (
     <div>
       <SettingsWatchedPaths />
+      <SettingsWatcher />
     </div>
   );
 };