Minor UI enhancements

This commit is contained in:
Patrick Fic
2025-03-25 15:05:58 -07:00
parent 70e14fb5cc
commit f5fd6960ef
7 changed files with 66 additions and 39 deletions

1
.gitignore vendored
View File

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

View File

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

View File

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

View File

@@ -7,7 +7,7 @@ import {
selectWatcherStatus, selectWatcherStatus,
} from "@renderer/redux/app.slice"; } from "@renderer/redux/app.slice";
import { useAppSelector } from "@renderer/redux/reduxHooks"; 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 { useTranslation } from "react-i18next";
import ipcTypes from "../../../../util/ipcTypes.json"; import ipcTypes from "../../../../util/ipcTypes.json";
@@ -25,29 +25,31 @@ const SettingsWatcher: React.FC = () => {
}; };
return ( return (
<Space> <Card title={t("settings.labels.watcherstatus")}>
{isWatcherStarted ? ( <Space>
<Button onClick={handleStop}> {isWatcherStarted ? (
{t("settings.actions.stopwatcher")} <Button onClick={handleStop}>
</Button> {t("settings.actions.stopwatcher")}
) : ( </Button>
<Button onClick={handleStart}> ) : (
{t("settings.actions.startwatcher")} <Button onClick={handleStart}>
</Button> {t("settings.actions.startwatcher")}
)} </Button>
{isWatcherStarted ? ( )}
<Space> {isWatcherStarted ? (
<CheckCircleOutlined style={{ color: "green" }} /> <Space>
{t("settings.labels.started")} <CheckCircleOutlined style={{ color: "green" }} />
</Space> {t("settings.labels.started")}
) : ( </Space>
<Space> ) : (
<ExclamationCircleOutlined style={{ color: "tomato" }} /> <Space>
{t("settings.labels.stopped")} <ExclamationCircleOutlined style={{ color: "tomato" }} />
</Space> {t("settings.labels.stopped")}
)} </Space>
{watcherError && <Alert message={watcherError} />} )}
</Space> {watcherError && <Alert message={watcherError} />}
</Space>
</Card>
); );
}; };
export default SettingsWatcher; export default SettingsWatcher;

View File

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

View File

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

View File

@@ -152,6 +152,19 @@
</translation> </translation>
</translations> </translations>
</concept_node> </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> <concept_node>
<name>watcherstatus</name> <name>watcherstatus</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>