show badge if there is an update available, which is cached

interface/src/app/settings/Settings.tsx

@@ -1,10 +1,13 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
+import { toast } from 'react-toastify';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import BuildIcon from '@mui/icons-material/Build';
 import CancelIcon from '@mui/icons-material/Cancel';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import ImportExportIcon from '@mui/icons-material/ImportExport';
 import LockIcon from '@mui/icons-material/Lock';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
@@ -28,15 +31,23 @@ import { useRequest } from 'alova/client';
 import type { APIcall } from 'app/main/types';
 import { SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
+import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 
 import SystemMonitor from '../status/SystemMonitor';
 
 const Settings = () => {
   const { LL } = useI18nContext();
+  const { versions } = useContext(AuthenticatedContext);
   useLayoutTitle(LL.SETTINGS(0));
 
+  const firmwareText = versions?.current?.version
+    ? `v${versions.current.version}`
+    : '';
+  const upgradeAvailable = versions?.current?.upgradeable ?? false;
+
   const [confirmFactoryReset, setConfirmFactoryReset] = useState(false);
+  const [confirmRestart, setConfirmRestart] = useState(false);
   const [restarting, setRestarting] = useState<boolean>();
 
   const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
@@ -50,6 +61,16 @@ const Settings = () => {
     });
   };
 
+  const doRestart = async () => {
+    setConfirmRestart(false);
+    setRestarting(true);
+    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
+      (error: Error) => {
+        toast.error(error.message);
+      }
+    );
+  };
+
   const handleFactoryResetClose = () => {
     setConfirmFactoryReset(false);
   };
@@ -58,6 +79,14 @@ const Settings = () => {
     setConfirmFactoryReset(true);
   };
 
+  const handleRestartClose = () => {
+    setConfirmRestart(false);
+  };
+
+  const handleRestartClick = () => {
+    setConfirmRestart(true);
+  };
+
   if (restarting) {
     return <SystemMonitor />;
   }
@@ -65,6 +94,15 @@ const Settings = () => {
   return (
     <SectionContent>
       <List>
+        <ListMenuItem
+          icon={BuildIcon}
+          bgcolor="#72caf9"
+          label="EMS-ESP Firmware"
+          text={firmwareText}
+          to="/status/version"
+          badge={upgradeAvailable}
+        />
+
         <ListMenuItem
           icon={TuneIcon}
           bgcolor="#134ba2"
@@ -156,6 +194,29 @@ const Settings = () => {
         </DialogActions>
       </Dialog>
 
+      <Dialog sx={dialogStyle} open={confirmRestart} onClose={handleRestartClose}>
+        <DialogTitle>{LL.RESTART()}</DialogTitle>
+        <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
+        <DialogActions>
+          <Button
+            startIcon={<CancelIcon />}
+            variant="outlined"
+            onClick={handleRestartClose}
+            color="secondary"
+          >
+            {LL.CANCEL()}
+          </Button>
+          <Button
+            startIcon={<PowerSettingsNewIcon />}
+            variant="outlined"
+            onClick={doRestart}
+            color="error"
+          >
+            {LL.RESTART()}
+          </Button>
+        </DialogActions>
+      </Dialog>
+
       <Divider />
 
       <Box
@@ -164,9 +225,18 @@ const Settings = () => {
           display: 'flex',
           justifyContent: 'flex-end',
           flexWrap: 'nowrap',
-          whiteSpace: 'nowrap'
+          whiteSpace: 'nowrap',
+          gap: 1
         }}
       >
+        <Button
+          startIcon={<PowerSettingsNewIcon />}
+          variant="outlined"
+          onClick={handleRestartClick}
+          color="error"
+        >
+          {LL.RESTART()}
+        </Button>
         <Button
           startIcon={<SettingsBackupRestoreIcon />}
           variant="outlined"