From bf81f698abf126527f94da221dd937815804b5be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Jarasson?= <remi.jarasson@gmail.com>
Date: Fri, 5 Jan 2024 06:24:12 +0100
Subject: [PATCH] feat(Layout): added bottombar with key sig and latency

---
 src/renderer/router.tsx                       | 30 ++-----------------
 src/renderer/views/Layout/BottomBar.tsx       | 22 ++++++++++++++
 .../LatencyMonitor/LatencyMonitor.module.scss |  0
 .../LatencyMonitor/LatencyMonitor.tsx         |  0
 .../LatencyMonitor/index.tsx                  |  0
 src/renderer/views/Layout/Layout.module.scss  |  4 +++
 src/renderer/views/Layout/Layout.tsx          |  2 ++
 .../QuickChangeKeyToolbar.tsx                 |  6 ++--
 .../Settings/Routing/Routing.module.scss      |  7 -----
 .../views/Settings/Routing/Routing.tsx        |  8 +----
 10 files changed, 35 insertions(+), 44 deletions(-)
 create mode 100644 src/renderer/views/Layout/BottomBar.tsx
 rename src/renderer/views/{Settings/Routing => Layout}/LatencyMonitor/LatencyMonitor.module.scss (100%)
 rename src/renderer/views/{Settings/Routing => Layout}/LatencyMonitor/LatencyMonitor.tsx (100%)
 rename src/renderer/views/{Settings/Routing => Layout}/LatencyMonitor/index.tsx (100%)

diff --git a/src/renderer/router.tsx b/src/renderer/router.tsx
index 8352ccc..8471d0f 100644
--- a/src/renderer/router.tsx
+++ b/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"
diff --git a/src/renderer/views/Layout/BottomBar.tsx b/src/renderer/views/Layout/BottomBar.tsx
new file mode 100644
index 0000000..a9ee182
--- /dev/null
+++ b/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;
diff --git a/src/renderer/views/Settings/Routing/LatencyMonitor/LatencyMonitor.module.scss b/src/renderer/views/Layout/LatencyMonitor/LatencyMonitor.module.scss
similarity index 100%
rename from src/renderer/views/Settings/Routing/LatencyMonitor/LatencyMonitor.module.scss
rename to src/renderer/views/Layout/LatencyMonitor/LatencyMonitor.module.scss
diff --git a/src/renderer/views/Settings/Routing/LatencyMonitor/LatencyMonitor.tsx b/src/renderer/views/Layout/LatencyMonitor/LatencyMonitor.tsx
similarity index 100%
rename from src/renderer/views/Settings/Routing/LatencyMonitor/LatencyMonitor.tsx
rename to src/renderer/views/Layout/LatencyMonitor/LatencyMonitor.tsx
diff --git a/src/renderer/views/Settings/Routing/LatencyMonitor/index.tsx b/src/renderer/views/Layout/LatencyMonitor/index.tsx
similarity index 100%
rename from src/renderer/views/Settings/Routing/LatencyMonitor/index.tsx
rename to src/renderer/views/Layout/LatencyMonitor/index.tsx
diff --git a/src/renderer/views/Layout/Layout.module.scss b/src/renderer/views/Layout/Layout.module.scss
index 128a57d..192b246 100644
--- a/src/renderer/views/Layout/Layout.module.scss
+++ b/src/renderer/views/Layout/Layout.module.scss
@@ -32,6 +32,10 @@
   }
 }
 
+.bottombar {
+  padding: 0 4px;
+}
+
 .titlebar {
   -webkit-app-region: drag;
   display: flex;
diff --git a/src/renderer/views/Layout/Layout.tsx b/src/renderer/views/Layout/Layout.tsx
index f5f5255..6221836 100644
--- a/src/renderer/views/Layout/Layout.tsx
+++ b/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>
   );
 };
diff --git a/src/renderer/views/Settings/NotationSettings/QuickChangeKeyToolbar.tsx b/src/renderer/views/Settings/NotationSettings/QuickChangeKeyToolbar.tsx
index d79d57e..e0e8949 100644
--- a/src/renderer/views/Settings/NotationSettings/QuickChangeKeyToolbar.tsx
+++ b/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}
diff --git a/src/renderer/views/Settings/Routing/Routing.module.scss b/src/renderer/views/Settings/Routing/Routing.module.scss
index 6f8d2e0..09455a4 100644
--- a/src/renderer/views/Settings/Routing/Routing.module.scss
+++ b/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;
diff --git a/src/renderer/views/Settings/Routing/Routing.tsx b/src/renderer/views/Settings/Routing/Routing.tsx
index 587f753..1cb2227 100644
--- a/src/renderer/views/Settings/Routing/Routing.tsx
+++ b/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}