Adding a <SystemInfo> component to display basic system info

src/components/account/Account.tsx

@@ -2,12 +2,10 @@ import { Component, createSignal, For } from 'solid-js';
 
 import PersonIcon from '@suid/icons-material/Person';
 
-import style from './Account.module.css';
 import {
   Box,
   Button,
   DialogActions,
-  IconButton,
   InputLabel,
   ListItem,
   ListItemButton,

src/components/system-drawer/SystemDrawer.tsx

@@ -3,8 +3,16 @@ import { Component, createSignal } from 'solid-js';
 import SettingsIcon from '@suid/icons-material/Settings';
 
 import style from './SystemDrawer.module.css';
-import { Drawer, IconButton, List, ListItem } from '@suid/material';
+import {
+  Box,
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+} from '@suid/material';
 import Account from '../account';
+import SystemInfo from '../system-info/SystemInfo';
 
 interface Props {}
 
@@ -17,11 +25,14 @@ const SystemDrawer: Component<Props> = (props) => {
           <SettingsIcon />
         </IconButton>
         <Drawer open={open()} onClose={() => setOpen(false)} anchor='right'>
-          <List>
+          <Box
-            <ListItem>
+            sx={{ width: '100%', maxWidth: 200, bgcolor: 'background.paper' }}
+          >
+            <List>
               <Account />
-            </ListItem>
+              <SystemInfo />
-          </List>
+            </List>
+          </Box>
         </Drawer>
       </div>
     </>

src/components/system-info/SystemInfo.tsx

@@ -0,0 +1,86 @@
+import {
+  Icon,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  SvgIcon,
+} from '@suid/material';
+import { Component, createSignal, Show } from 'solid-js';
+import SystemSecurityUpdateWarningIcon from '@suid/icons-material/SystemSecurityUpdateWarning';
+import Dialog from '../dialog';
+import dispatch from '../../workers/dispatcher-main';
+
+interface Props {}
+
+const SystemInfo: Component<Props> = (props) => {
+  const [open, setOpen] = createSignal(false);
+  const [settings, setSettings] = createSignal<any>();
+  const [account, setAccount] = createSignal<any>();
+  const [error, setError] = createSignal<any>();
+
+  const openDialog = () => {
+    setOpen(true);
+    dispatch(
+      {
+        action: 'getSettings',
+      },
+      (error, result) => {
+        console.log({ caller: 'SystemInfo', error, result });
+        if (!!error) {
+          setError(error);
+        }
+        if (!!result) {
+          setSettings(result);
+          dispatch(
+            {
+              action: 'getAccount',
+              params: { id: settings().currentAccountId },
+            },
+            (error, result) => {
+              console.log({ caller: 'SystemInfo', error, result });
+              if (!!error) {
+                setError(error);
+              }
+              if (!!result) {
+                setAccount(result);
+              }
+            }
+          );
+        }
+      }
+    );
+  };
+
+  return (
+    <>
+      <ListItem>
+        <ListItemButton onClick={openDialog}>
+          <ListItemIcon>
+            <SystemSecurityUpdateWarningIcon />
+          </ListItemIcon>
+          <ListItemText>System Info</ListItemText>
+        </ListItemButton>
+      </ListItem>
+      <Show when={open()}>
+        <Dialog
+          open={open()}
+          closeHandler={() => setOpen(false)}
+          title='System info'
+        >
+          <div>
+            <p>Platform: {window.Capacitor.platform}</p>
+            <p>User agent: {navigator.userAgent}</p>
+            <p>App release: {import.meta.env.VITE_GIT_COMMIT_HASH}</p>
+            <p>Account id: {settings()?.currentAccountId}</p>
+            <p>Account name: {account()?.name}</p>
+            <p>Remote DB user: {account()?.remoteDbUser}</p>
+            <p>Remote DB server: {account()?.remoteDbServer}</p>
+          </div>
+        </Dialog>
+      </Show>
+    </>
+  );
+};
+
+export default SystemInfo;