frontend performance, rpc/rest jwt authentication

frontend/src/components/Logout.tsx

@@ -0,0 +1,24 @@
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import LogoutIcon from '@mui/icons-material/Logout'
+import { getHttpEndpoint } from '../utils'
+import { useNavigate } from 'react-router-dom'
+
+export default function Logout() {
+  const navigate = useNavigate()
+
+  const logout = async () => {
+    const res = await fetch(`${getHttpEndpoint()}/auth/logout`)
+    if (res.ok) {
+      navigate('/login')
+    }
+  }
+
+  return (
+    <ListItemButton onClick={logout}>
+      <ListItemIcon>
+        <LogoutIcon />
+      </ListItemIcon>
+      <ListItemText primary="Authentication" />
+    </ListItemButton>
+  )
+}

frontend/src/components/ThemeToggler.tsx

@@ -0,0 +1,27 @@
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import { useDispatch, useSelector } from 'react-redux'
+import { setTheme } from '../features/settings/settingsSlice'
+import { RootState } from '../stores/store'
+import { Brightness4, Brightness5 } from '@mui/icons-material'
+
+export default function ThemeToggler() {
+  const settings = useSelector((state: RootState) => state.settings)
+  const dispatch = useDispatch()
+
+  return (
+    <ListItemButton onClick={() => {
+      settings.theme === 'light'
+        ? dispatch(setTheme('dark'))
+        : dispatch(setTheme('light'))
+    }}>
+      <ListItemIcon>
+        {
+          settings.theme === 'light'
+            ? <Brightness4 />
+            : <Brightness5 />
+        }
+      </ListItemIcon>
+      <ListItemText primary="Toggle theme" />
+    </ListItemButton>
+  )
+}