Basic storage of watched paths.

src/renderer/src/App.tsx

@@ -10,6 +10,7 @@ import { auth } from "./util/firebase";
 import {} from "react-error-boundary";
 import { ErrorBoundary } from "react-error-boundary";
 import ErrorBoundaryFallback from "./components/ErrorBoundaryFallback/ErrorBoundaryFallback";
+import Settings from "./components/Settings/Settings";
 
 const App: React.FC = () => {
   const [user, setUser] = useState<User | null>(null);
@@ -36,7 +37,7 @@ const App: React.FC = () => {
               <NavigationHeader />
               <Routes>
                 <Route path="/" element={<div>AuthHome</div>} />
-                <Route path="settings" element={<div>Settings</div>} />
+                <Route path="settings" element={<Settings />} />
               </Routes>
             </>
           )}

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

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import ipcTypes from "../../../../util/ipcTypes.json";
+import { Button } from "antd";
+
+const SettingsWatchedPaths: React.FC = () => {
+  const [watchedPaths, setWatchedPaths] = useState<string[]>([]);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    window.electron.ipcRenderer
+      .invoke(ipcTypes.toMain.settings.filepaths.get)
+      .then((paths: string[]) => {
+        setWatchedPaths(paths);
+      });
+  }, []);
+
+  const handleAddPath = () => {
+    window.electron.ipcRenderer
+      .invoke(ipcTypes.toMain.settings.filepaths.add)
+      .then((paths: string[]) => {
+        setWatchedPaths(paths);
+      });
+  };
+
+  return (
+    <div>
+      <div>Currently Watched paths</div>
+      <ul>{watchedPaths?.map((path, index) => <li key={index}>{path}</li>)}</ul>
+      <Button onClick={handleAddPath}>{t("settings.actions.addpath")}</Button>
+    </div>
+  );
+};
+export default SettingsWatchedPaths;

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

@@ -0,0 +1,10 @@
+import SettingsWatchedPaths from "./Settings.WatchedPaths";
+
+const Settings: React.FC = () => {
+  return (
+    <div>
+      <SettingsWatchedPaths />
+    </div>
+  );
+};
+export default Settings;