Merge branch 'dev' of https://github.com/emsesp/EMS-ESP32 into dev2

interface/src/project/Dashboard.tsx

@@ -20,15 +20,15 @@ const Dashboard: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="devices" label={LL.DEVICES()} />
-        <Tab value="sensors" label={LL.SENSORS()} />
-        <Tab value="status" label="Status" />
+        <Tab value="/dashboard/devices" label={LL.DEVICES()} />
+        <Tab value="/dashboard/sensors" label={LL.SENSORS()} />
+        <Tab value="/dashboard/status" label="Status" />
       </RouterTabs>
       <Routes>
         <Route path="devices" element={<DashboardDevices />} />
         <Route path="sensors" element={<DashboardSensors />} />
         <Route path="status" element={<DashboardStatus />} />
-        <Route path="/*" element={<Navigate replace to="devices" />} />
+        <Route path="*" element={<Navigate replace to="/dashboard/devices" />} />
       </Routes>
     </>
   );

interface/src/project/Help.tsx

@@ -1,28 +1,83 @@
-import { Tab } from '@mui/material';
-import { Navigate, Route, Routes } from 'react-router-dom';
-import HelpInformation from './HelpInformation';
+import CommentIcon from '@mui/icons-material/CommentTwoTone';
+import EastIcon from '@mui/icons-material/East';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import MenuBookIcon from '@mui/icons-material/MenuBookTwoTone';
+import { Box, List, ListItem, ListItemAvatar, ListItemText, Link, Typography } from '@mui/material';
 import type { FC } from 'react';
-
-import { RouterTabs, useRouterTab, useLayoutTitle } from 'components';
-
+import { SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
 const Help: FC = () => {
   const { LL } = useI18nContext();
-  const { routerTab } = useRouterTab();
-
   useLayoutTitle(LL.HELP_OF(''));
 
+  const uploadURL = window.location.origin + '/system/upload';
+
   return (
-    <>
-      <RouterTabs value={routerTab}>
-        <Tab value="information" label={LL.HELP_OF('EMS-ESP')} />
-      </RouterTabs>
-      <Routes>
-        <Route path="information" element={<HelpInformation />} />
-        <Route path="/*" element={<Navigate replace to="information" />} />
-      </Routes>
-    </>
+    <SectionContent title={LL.SUPPORT_INFORMATION()} titleGutter>
+      <List>
+        <ListItem>
+          <ListItemAvatar>
+            <MenuBookIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
+          </ListItemAvatar>
+          <ListItemText>
+            {LL.HELP_INFORMATION_1()}&nbsp;
+            <EastIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
+            &nbsp;
+            <Link target="_blank" href="https://emsesp.github.io/docs" color="primary">
+              {LL.CLICK_HERE()}
+            </Link>
+          </ListItemText>
+        </ListItem>
+
+        <ListItem>
+          <ListItemAvatar>
+            <CommentIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
+          </ListItemAvatar>
+          <ListItemText>
+            {LL.HELP_INFORMATION_2()}&nbsp;
+            <EastIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
+            &nbsp;
+            <Link target="_blank" href="https://discord.gg/3J3GgnzpyT" color="primary">
+              {LL.CLICK_HERE()}
+            </Link>
+          </ListItemText>
+        </ListItem>
+
+        <ListItem>
+          <ListItemAvatar>
+            <GitHubIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
+          </ListItemAvatar>
+          <ListItemText>
+            {LL.HELP_INFORMATION_3()}&nbsp;
+            <EastIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
+            <Link target="_blank" href="https://github.com/emsesp/EMS-ESP32/issues/new/choose" color="primary">
+              {LL.CLICK_HERE()}
+            </Link>
+            <br />
+            <i>({LL.HELP_INFORMATION_4()}</i>&nbsp;
+            <Link href={uploadURL} color="primary">
+              {LL.UPLOAD()}
+            </Link>
+            )
+          </ListItemText>
+        </ListItem>
+      </List>
+
+      <Box border={1} p={1} mt={4} color="orange">
+        <Typography align="center" variant="subtitle1" color="orange">
+          <b>{LL.HELP_INFORMATION_5()}</b>
+        </Typography>
+        <Typography align="center">
+          <Link target="_blank" href="https://github.com/emsesp/EMS-ESP32" color="primary">
+            {'github.com/emsesp/EMS-ESP32'}
+          </Link>
+        </Typography>
+        <Typography color="white" align="center">
+          @proddy @MichaelDvP
+        </Typography>
+      </Box>
+    </SectionContent>
   );
 };
 

interface/src/project/HelpInformation.tsx

@@ -1,85 +0,0 @@
-import CommentIcon from '@mui/icons-material/CommentTwoTone';
-import EastIcon from '@mui/icons-material/East';
-import GitHubIcon from '@mui/icons-material/GitHub';
-import MenuBookIcon from '@mui/icons-material/MenuBookTwoTone';
-import { Typography, Box, List, ListItem, ListItemText, Link, ListItemAvatar } from '@mui/material';
-import type { FC } from 'react';
-
-import { SectionContent } from 'components';
-
-import { useI18nContext } from 'i18n/i18n-react';
-
-const HelpInformation: FC = () => {
-  const { LL } = useI18nContext();
-
-  const uploadURL = window.location.origin + '/system/upload';
-
-  return (
-    <SectionContent title={LL.SUPPORT_INFORMATION()} titleGutter>
-      <List>
-        <ListItem>
-          <ListItemAvatar>
-            <MenuBookIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
-          </ListItemAvatar>
-          <ListItemText>
-            {LL.HELP_INFORMATION_1()}&nbsp;
-            <EastIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
-            &nbsp;
-            <Link target="_blank" href="https://emsesp.github.io/docs" color="primary">
-              {LL.CLICK_HERE()}
-            </Link>
-          </ListItemText>
-        </ListItem>
-
-        <ListItem>
-          <ListItemAvatar>
-            <CommentIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
-          </ListItemAvatar>
-          <ListItemText>
-            {LL.HELP_INFORMATION_2()}&nbsp;
-            <EastIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
-            &nbsp;
-            <Link target="_blank" href="https://discord.gg/3J3GgnzpyT" color="primary">
-              {LL.CLICK_HERE()}
-            </Link>
-          </ListItemText>
-        </ListItem>
-
-        <ListItem>
-          <ListItemAvatar>
-            <GitHubIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
-          </ListItemAvatar>
-          <ListItemText>
-            {LL.HELP_INFORMATION_3()}&nbsp;
-            <EastIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
-            <Link target="_blank" href="https://github.com/emsesp/EMS-ESP32/issues/new/choose" color="primary">
-              {LL.CLICK_HERE()}
-            </Link>
-            <br />
-            <i>({LL.HELP_INFORMATION_4()}</i>&nbsp;
-            <Link href={uploadURL} color="primary">
-              {LL.UPLOAD()}
-            </Link>
-            )
-          </ListItemText>
-        </ListItem>
-      </List>
-
-      <Box border={1} p={1} mt={4} color="orange">
-        <Typography align="center" variant="subtitle1" color="orange">
-          <b>{LL.HELP_INFORMATION_5()}</b>
-        </Typography>
-        <Typography align="center">
-          <Link target="_blank" href="https://github.com/emsesp/EMS-ESP32" color="primary">
-            {'github.com/emsesp/EMS-ESP32'}
-          </Link>
-        </Typography>
-        <Typography color="white" align="center">
-          @proddy @MichaelDvP
-        </Typography>
-      </Box>
-    </SectionContent>
-  );
-};
-
-export default HelpInformation;

interface/src/project/Settings.tsx

@@ -18,17 +18,17 @@ const Settings: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="application" label={LL.APPLICATION_SETTINGS()} />
-        <Tab value="customization" label={LL.CUSTOMIZATIONS()} />
-        <Tab value="scheduler" label={LL.SCHEDULER()} />
-        <Tab value="customentities" label={LL.CUSTOM_ENTITIES(0)} />
+        <Tab value="/settings/application" label={LL.APPLICATION_SETTINGS()} />
+        <Tab value="/settings/customization" label={LL.CUSTOMIZATIONS()} />
+        <Tab value="/settings/scheduler" label={LL.SCHEDULER()} />
+        <Tab value="/settings/customentities" label={LL.CUSTOM_ENTITIES(0)} />
       </RouterTabs>
       <Routes>
         <Route path="application" element={<SettingsApplication />} />
         <Route path="customization" element={<SettingsCustomization />} />
         <Route path="scheduler" element={<SettingsScheduler />} />
         <Route path="customentities" element={<SettingsEntities />} />
-        <Route path="/*" element={<Navigate replace to="application" />} />
+        <Route path="*" element={<Navigate replace to="/settings/application" />} />
       </Routes>
     </>
   );

interface/src/project/SettingsCustomization.tsx

@@ -23,7 +23,7 @@ import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-li
 import { useTheme } from '@table-library/react-table-library/theme';
 import { useRequest } from 'alova';
 import { useState, useEffect, useCallback } from 'react';
-import { unstable_useBlocker as useBlocker, useLocation } from 'react-router-dom';
+import { useBlocker, useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import EntityMaskToggle from './EntityMaskToggle';

interface/src/project/SettingsEntities.tsx

@@ -7,7 +7,7 @@ import { useTheme } from '@table-library/react-table-library/theme';
 // eslint-disable-next-line import/named
 import { updateState, useRequest } from 'alova';
 import { useState, useCallback } from 'react';
-import { unstable_useBlocker as useBlocker } from 'react-router-dom';
+import { useBlocker } from 'react-router-dom';
 
 import { toast } from 'react-toastify';
 

interface/src/project/SettingsScheduler.tsx

@@ -9,7 +9,7 @@ import { useTheme } from '@table-library/react-table-library/theme';
 // eslint-disable-next-line import/named
 import { updateState, useRequest } from 'alova';
 import { useState, useEffect, useCallback } from 'react';
-import { unstable_useBlocker as useBlocker } from 'react-router-dom';
+import { useBlocker } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import SettingsSchedulerDialog from './SettingsSchedulerDialog';
 import * as EMSESP from './api';