feat(Layout): added bottombar with key sig and latency

src/renderer/router.tsx

@@ -50,15 +50,7 @@ const router = createHashRouter(
           </ChordDisplay>
         }
       >
-        <Route
-          path="settings"
-          element={
-            <>
-              <QuickChangeKeyToolbar />
-              <ChordDisplayNamespaceSettings parentPath="../.." />
-            </>
-          }
-        />
+        <Route path="settings" element={<ChordDisplayNamespaceSettings parentPath="../.." />} />
       </Route>
       <Route
         path="circle-of-fifths"
@@ -74,15 +66,7 @@ const router = createHashRouter(
           </MidiMessageManagerProvider>
         }
       >
-        <Route
-          path="settings"
-          element={
-            <>
-              <QuickChangeKeyToolbar />
-              <CircleOfFifthsSettings />
-            </>
-          }
-        />
+        <Route path="settings" element={<CircleOfFifthsSettings />} />
       </Route>
       <Route
         path="quiz"
@@ -94,15 +78,7 @@ const router = createHashRouter(
           </MidiMessageManagerProvider>
         }
       >
-        <Route
-          path="settings"
-          element={
-            <>
-              <QuickChangeKeyToolbar />
-              <ChordQuizSettings />
-            </>
-          }
-        />
+        <Route path="settings" element={<ChordQuizSettings />} />
       </Route>
       <Route
         path="chord-dictionary"

src/renderer/views/Layout/BottomBar.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import classnames from 'classnames/bind';
+
+import { Stack, StackSeparator, Toolbar } from '@la-jarre-a-son/ui';
+
+import styles from './Layout.module.scss';
+import LatencyMonitor from './LatencyMonitor';
+import { QuickChangeKeyToolbar } from '../Settings/NotationSettings';
+
+const cx = classnames.bind(styles);
+
+const BottomBar: React.FC = () => {
+  return (
+    <Toolbar as={Stack} elevation={3} placement="bottom" className={cx('bottombar')}>
+      <QuickChangeKeyToolbar />
+      <StackSeparator />
+      <LatencyMonitor />
+    </Toolbar>
+  );
+};
+
+export default BottomBar;

src/renderer/views/Layout/Layout.module.scss

@@ -32,6 +32,10 @@
   }
 }
 
+.bottombar {
+  padding: 0 4px;
+}
+
 .titlebar {
   -webkit-app-region: drag;
   display: flex;

src/renderer/views/Layout/Layout.tsx

@@ -16,6 +16,7 @@ import About from 'renderer/views/Settings/About';
 import TopBar from './TopBar';
 
 import styles from './Layout.module.scss';
+import BottomBar from './BottomBar';
 
 const cx = classnames.bind(styles);
 
@@ -66,6 +67,7 @@ const Layout: React.FC = () => {
           )}
         </ModalContainer>
       </div>
+      <BottomBar />
     </div>
   );
 };

src/renderer/views/Settings/NotationSettings/QuickChangeKeyToolbar.tsx

@@ -8,9 +8,9 @@ export const QuickChangeKeyToolbar: React.FC = () => {
   const { settings, updateSetting } = useSettings();
 
   return (
-    <Box elevation={2} pad="md">
-      <InputGroup block>
-        <InputContainerLabel>Key Signature</InputContainerLabel>
+    <Box elevation={2}>
+      <InputGroup as="label" block>
+        <InputContainerLabel>Key</InputContainerLabel>
         <Select
           onChange={(value: string) => updateSetting('notation.key', value)}
           value={settings.notation.key}

src/renderer/views/Settings/Routing/Routing.module.scss

@@ -9,13 +9,6 @@ $View_SettingsRouting_padding: $space-lg !default;
   overflow: hidden;
 }
 
-.latency {
-  padding: 0 $View_SettingsRouting_padding;
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-}
-
 .container {
   flex-grow: 1;
   padding: 0 $View_SettingsRouting_padding;

src/renderer/views/Settings/Routing/Routing.tsx

@@ -6,7 +6,7 @@ import { useMidiRouting } from 'renderer/contexts/MidiRouting';
 import { Box, Toolbar, Button, StackSeparator } from '@la-jarre-a-son/ui';
 import { Icon } from 'renderer/components';
 
-import LatencyMonitor from './LatencyMonitor';
+import LatencyMonitor from '../../Layout/LatencyMonitor';
 import Graph from './Graph';
 
 import styles from './Routing.module.scss';
@@ -19,12 +19,6 @@ const Routing: React.FC = () => {
 
   return (
     <div className={cx('base')}>
-      <Toolbar elevation={2}>
-        <div className={cx('latency')}>
-          Latency:&nbsp;
-          <LatencyMonitor />
-        </div>
-      </Toolbar>
       <Box pad="md" className={cx('container')}>
         <Graph
           inputs={inputs}