Minor UI enhancements

.gitignore

@@ -3,6 +3,7 @@ dist
 out
 .DS_Store
 *.log*
+/logs
 
 # Playwright
 /test-results/

src/renderer/src/App.tsx

@@ -7,14 +7,13 @@ import { Provider } from "react-redux";
 import { HashRouter, Route, Routes } from "react-router";
 import ipcTypes from "../../util/ipcTypes.json";
 import ErrorBoundaryFallback from "./components/ErrorBoundaryFallback/ErrorBoundaryFallback";
-import Home from "./components/Home/Home";
 import NavigationHeader from "./components/NavigationHeader/Navigationheader";
 import Settings from "./components/Settings/Settings";
 import SignInForm from "./components/SignInForm/SignInForm";
+import UpdateAvailable from "./components/UpdateAvailable/UpdateAvailable";
 import reduxStore from "./redux/redux-store";
 import { auth } from "./util/firebase";
 import { NotificationProvider } from "./util/notificationContext";
-import UpdateAvailable from "./components/UpdateAvailable/UpdateAvailable";
 
 const App: React.FC = () => {
   const [user, setUser] = useState<User | null>(null);
@@ -50,8 +49,7 @@ const App: React.FC = () => {
                   <NavigationHeader />
                   <UpdateAvailable />
                   <Routes>
-                    <Route path="/" element={<Home />} />
-                    <Route path="settings" element={<Settings />} />
+                    <Route path="/" element={<Settings />} />
                   </Routes>
                 </>
               )}

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

@@ -1,8 +1,8 @@
+import { DeleteFilled, FileAddFilled } from "@ant-design/icons";
+import { Button, Card, Space, Timeline } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import ipcTypes from "../../../../util/ipcTypes.json";
-import { Button, Space } from "antd";
-import { DeleteFilled } from "@ant-design/icons";
 
 const SettingsWatchedPaths: React.FC = () => {
   const [watchedPaths, setWatchedPaths] = useState<string[]>([]);
@@ -33,23 +33,31 @@ const SettingsWatchedPaths: React.FC = () => {
   };
 
   return (
-    <div>
-      <div>Currently Watched paths</div>
-      <ul>
+    <Card
+      title={t("settings.labels.watchedpaths")}
+      extra={
+        <Button onClick={handleAddPath} icon={<FileAddFilled />}>
+          {t("settings.actions.addpath")}
+        </Button>
+      }
+    >
+      <Timeline>
         {watchedPaths?.map((path, index) => (
-          <li key={index}>
-            <Space>
+          <Timeline.Item key={index}>
+            <Space align="baseline">
               {path}
               <Button
+                size="small"
+                danger
+                type="text"
                 icon={<DeleteFilled />}
                 onClick={() => handleRemovePath(path)}
               />
             </Space>
-          </li>
+          </Timeline.Item>
         ))}
-      </ul>
-      <Button onClick={handleAddPath}>{t("settings.actions.addpath")}</Button>
-    </div>
+      </Timeline>
+    </Card>
   );
 };
 export default SettingsWatchedPaths;

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

@@ -7,7 +7,7 @@ import {
   selectWatcherStatus,
 } from "@renderer/redux/app.slice";
 import { useAppSelector } from "@renderer/redux/reduxHooks";
-import { Alert, Button, Space } from "antd";
+import { Alert, Button, Card, Space, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import ipcTypes from "../../../../util/ipcTypes.json";
 
@@ -25,6 +25,7 @@ const SettingsWatcher: React.FC = () => {
   };
 
   return (
+    <Card title={t("settings.labels.watcherstatus")}>
       <Space>
         {isWatcherStarted ? (
           <Button onClick={handleStop}>
@@ -48,6 +49,7 @@ const SettingsWatcher: React.FC = () => {
         )}
         {watcherError && <Alert message={watcherError} />}
       </Space>
+    </Card>
   );
 };
 export default SettingsWatcher;

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

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

src/util/translations/en-US/renderer.json

@@ -13,6 +13,7 @@
 			"labels": {
 				"started": "Started",
 				"stopped": "Stopped",
+				"watchedpaths": "Watched Paths",
 				"watcherstatus": "Watcher Status"
 			}
 		},

translations.babel

@@ -152,6 +152,19 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>watchedpaths</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>watcherstatus</name>
                                                 <definition_loaded>false</definition_loaded>