feat: ui updates (#6)

Description
---
Added a mode switch to the sidebar - this needs to be hooked up to the
backend
Added a basic settings dialog with 2 demo fields
Added an error notification to the bottom - this currently just shows
any error caught, so we'd need to refine it a bit
Improvements to sidebar
Visual mode switch connected
Added a basic dialog for the scheduler
General ui improvements

Motivation and Context
---
UI updates

How Has This Been Tested?
---
Manually

What process can a PR reviewer use to test or verify this change?
---

<!-- Checklist -->
<!-- 1. Is the title of your PR in the form that would make nice release
notes? The title, excluding the conventional commit
tag, will be included exactly as is in the CHANGELOG, so please think
about it carefully. -->


Breaking Changes
---
x

- [x] None
- [ ] Requires data directory on base node to be deleted
- [ ] Requires hard fork
- [ ] Other - Please specify

<!-- Does this include a breaking change? If so, include this line as a
footer -->
<!-- BREAKING CHANGE: Description what the user should do, e.g. delete a
database, resync the chain -->

src/App.tsx

@@ -1,9 +1,8 @@
+import './theme/theme.css';
 import { useEffect } from 'react';
 import { invoke } from '@tauri-apps/api/tauri';
 import { listen } from '@tauri-apps/api/event';
-
 import CssBaseline from '@mui/material/CssBaseline';
-import './theme/theme.css';
 import { ThemeProvider } from '@mui/material/styles';
 import { lightTheme } from './theme/themes';
 import { ContainerInner, DashboardContainer } from './theme/styles';
@@ -12,29 +11,39 @@ import { Dashboard } from './containers/Dashboard';
 import { TitleBar } from './containers/TitleBar';
 import { AppBackground } from './containers/AppBackground';
 import useAppStateStore from './store/appStateStore';
+import ErrorSnackbar from './containers/Error/ErrorSnackbar';
 
 function App() {
+  const { view, background, setHashRate, setCpuUsage, setAppState, setError } =
+    useAppStateStore((state) => ({
+      view: state.view,
+      background: state.background,
+      setHashRate: state.setHashRate,
+      setCpuUsage: state.setCpuUsage,
+      setAppState: state.setAppState,
+      setError: state.setError,
+    }));
 
-  const { view, background, setHashRate, setCpuUsage } = useAppStateStore();
   useEffect(() => {
     const unlistenPromise = listen('message', (event) => {
       console.log('some kind of event', event.event, event.payload);
     });
 
     const intervalId = setInterval(() => {
       invoke('status', {})
-        .then((status : any) => {
+        .then((status: any) => {
           console.log('Status', status);
-
+          setAppState(status);
           setCpuUsage(status.cpu?.cpu_usage);
-            setHashRate(status.cpu?.hash_rate);
+          setHashRate(status.cpu?.hash_rate);
           const logArea = document.getElementById('log-area');
           if (logArea) {
             logArea.innerText = JSON.stringify(status, null, 2);
           }
         })
         .catch((e) => {
           console.error('Could not get status', e);
+          setError(e.toString());
         });
     }, 1000);
     return () => {
@@ -55,6 +64,7 @@ function App() {
           </ContainerInner>
         </DashboardContainer>
       </AppBackground>
+      <ErrorSnackbar />
     </ThemeProvider>
   );
 }

src/containers/AppBackground/AppBackground.tsx

@@ -1,43 +1,14 @@
 import { useTheme } from '@mui/material/styles';
 import clouds from '../../assets/backgrounds/clouds.png';
-import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
 import loading from '../../assets/backgrounds/loading.jpg';
 import defaultbg from '../../assets/backgrounds/defaultbg.jpg';
 import determining from '../../assets/backgrounds/determining.jpg';
 import mining from '../../assets/backgrounds/mining.jpg';
 import loser from '../../assets/backgrounds/loser.jpg';
 import winner from '../../assets/backgrounds/winner.jpg';
 import { backgroundType } from '../../store/types';
-
-const AppContainer = styled(Box)(
-  ({ theme, status }: { theme: any; status: any }) => ({
-    backgroundColor: theme.palette.background.default,
-    backgroundSize: 'cover',
-    backgroundImage: `url(${status})`,
-    backgroundPosition: 'center',
-  })
-);
-
-// const BackgroundImage = styled(Box)(
-//   ({ theme, status }: { theme: any; status: statusType }) => ({
-//     position: 'absolute',
-//     bottom: 0,
-//     right: 0,
-//     height: '80%',
-//     width: `calc(100% - ${sidebarWidth} - ${theme.spacing(4)})`,
-//     backgroundImage: `url(${
-//       status === 'mining' ? build1 : status === 'waiting' ? build3 : ''
-//     })`,
-//     backgroundPosition: 'bottom center',
-//     backgroundRepeat: 'no-repeat',
-//     backgroundSize: 'contain',
-//     zIndex: 0,
-//     borderRadius: '12px',
-//     overflow: 'hidden',
-//     border: '1px solid red',
-//   })
-// );
+import useAppStateStore from '../../store/appStateStore';
+import { AppContainer } from './styles';
 
 function AppBackground({
   children,
@@ -46,6 +17,7 @@ function AppBackground({
   children: React.ReactNode;
   status: backgroundType;
 }) {
+  const visualMode = useAppStateStore((state) => state.visualMode);
   const theme = useTheme();
 
   let bg = defaultbg;
@@ -77,10 +49,17 @@ function AppBackground({
       break;
   }
 
+  if (!visualMode) {
+    return (
+      <AppContainer theme={theme} status={loading}>
+        {children}
+      </AppContainer>
+    );
+  }
+
   return (
     <AppContainer theme={theme} status={bg}>
       {children}
-      {/* <BackgroundImage theme={theme} status={status} /> */}
     </AppContainer>
   );
 }

src/containers/AppBackground/styles.ts

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+export const AppContainer = styled(Box)(
+  ({ theme, status }: { theme: any; status: any }) => ({
+    backgroundColor: theme.palette.background.default,
+    backgroundSize: 'cover',
+    backgroundImage: `url(${status})`,
+    backgroundPosition: 'center',
+  })
+);

src/containers/Dashboard/MiningView/MiningView.tsx

@@ -1,11 +1,16 @@
 import BlockInfo from './components/BlockInfo';
+import TopStatus from './components/TopStatus';
 import VisualMode from '../components/VisualMode';
 import MiningButton from './components/MiningButton';
+import { InfoContainer } from '../styles';
 
 function MiningView() {
   return (
     <>
-      <BlockInfo />
+      <InfoContainer>
+        <TopStatus />
+        <BlockInfo />
+      </InfoContainer>
       <VisualMode />
       <MiningButton />
     </>

src/containers/Dashboard/MiningView/components/BlockInfo.tsx

@@ -1,9 +1,8 @@
 import { Stack, Typography, Divider } from '@mui/material';
-import { BlockInfoContainer } from '../../styles';
 
 function BlockInfo() {
   return (
-    <BlockInfoContainer>
+    <Stack direction="row" spacing={2}>
       <Stack>
         <Typography variant="h6">#24,475</Typography>
         <Typography variant="body2">Floor</Typography>
@@ -18,7 +17,7 @@ function BlockInfo() {
         <Typography variant="h6">01:23:05</Typography>
         <Typography variant="body2">Current floor build time</Typography>
       </Stack>
-    </BlockInfoContainer>
+    </Stack>
   );
 }
 

src/containers/Dashboard/MiningView/components/MiningButton.tsx

@@ -21,7 +21,13 @@ const StopStyle = {
 };
 
 function MiningButton() {
-  const { startMining, stopMining, setBackground } = useAppStateStore();
+  const { startMining, stopMining, setBackground } = useAppStateStore(
+    (state) => ({
+      startMining: state.startMining,
+      stopMining: state.stopMining,
+      setBackground: state.setBackground,
+    })
+  );
   const [mining, setMining] = useState(false);
 
   const handleMining = () => {

src/containers/Dashboard/MiningView/components/TopStatus.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { Typography } from '@mui/material';
+import useAppStateStore from '../../../../store/appStateStore';
+
+function TopStatus() {
+  const { topStatus, setTopStatus, appState } = useAppStateStore((state) => ({
+    topStatus: state.topStatus,
+    setTopStatus: state.setTopStatus,
+    appState: state.appState,
+  }));
+
+  useEffect(() => {
+    if (appState?.cpu?.is_mining) {
+      setTopStatus('Mining');
+    } else {
+      setTopStatus('Not mining');
+    }
+  }, [appState?.cpu?.is_mining]);
+
+  return (
+    <Typography variant="h5" textTransform="uppercase">
+      {topStatus}
+    </Typography>
+  );
+}
+
+export default TopStatus;

src/containers/Dashboard/components/VisualMode.tsx

@@ -3,7 +3,10 @@ import { VisualModeContainer } from '../styles';
 import useAppStateStore from '../../../store/appStateStore';
 
 function VisualMode() {
-  const { visualMode, setVisualMode } = useAppStateStore();
+  const { visualMode, setVisualMode } = useAppStateStore((state) => ({
+    visualMode: state.visualMode,
+    setVisualMode: state.setVisualMode,
+  }));
   return (
     <VisualModeContainer>
       <Typography variant="h6">Visual Mode</Typography>

src/containers/Dashboard/styles.ts

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { LinearProgress, Box } from '@mui/material';
-import { headerHeight } from '../../theme/styles';
+import { headerHeight, sidebarWidth } from '../../theme/styles';
 
 export const DashboardContainer = styled(Box)(() => ({
   display: 'flex',
@@ -38,12 +38,13 @@ export const VisualModeContainer = styled(Box)(({ theme }) => ({
   right: theme.spacing(1),
 }));
 
-export const BlockInfoContainer = styled(Box)(({ theme }) => ({
+export const InfoContainer = styled(Box)(({ theme }) => ({
   position: 'absolute',
   top: `calc(${headerHeight} + ${theme.spacing(1)})`,
   right: theme.spacing(4),
   display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  width: `calc(100% - ${sidebarWidth} - ${theme.spacing(8)})`,
   gap: theme.spacing(2),
 }));

src/containers/Error/ErrorSnackbar.tsx

@@ -0,0 +1,59 @@
+import { Box, Alert, IconButton, Snackbar } from '@mui/material';
+import { IoClose } from 'react-icons/io5';
+import useAppStateStore from '../../store/appStateStore';
+
+function ErrorSnackbar() {
+  const { error, setError } = useAppStateStore((state) => ({
+    error: state.error,
+    setError: state.setError,
+  }));
+
+  const handleClose = (
+    _event: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setError('');
+  };
+
+  return (
+    <Snackbar
+      open={error !== ''}
+      autoHideDuration={20000}
+      onClose={handleClose}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+    >
+      <Alert
+        onClose={handleClose}
+        severity="error"
+        variant="filled"
+        sx={{
+          width: '100%',
+        }}
+        action={
+          <IconButton
+            aria-label="close"
+            color="inherit"
+            size="small"
+            onClick={handleClose}
+          >
+            <IoClose fontSize="inherit" style={{ color: 'white' }} />
+          </IconButton>
+        }
+      >
+        <Box
+          style={{
+            minWidth: '238px',
+          }}
+        >
+          {error}
+        </Box>
+      </Alert>
+    </Snackbar>
+  );
+}
+
+export default ErrorSnackbar;