refactor(frontend): secondary pane switch shortcut

3 files changed, 12 insertions, 7 deletions

diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx
index 9df56baa..7e884ab0 100644
--- a/subprojects/frontend/src/PaneButtons.tsx
+++ b/subprojects/frontend/src/PaneButtons.tsx
@@ -110,7 +110,7 @@ function PaneButtons({
         selected={themeStore.showGraph}
         onClick={(event) => {
           if (event.shiftKey || event.ctrlKey) {
-            themeStore.setSelectedPane('graph');
+            themeStore.setSelectedPane('graph', event.shiftKey);
           } else {
             themeStore.toggleGraph();
           }
@@ -124,7 +124,7 @@ function PaneButtons({
         selected={themeStore.showTable}
         onClick={(event) => {
           if (event.shiftKey || event.ctrlKey) {
-            themeStore.setSelectedPane('table');
+            themeStore.setSelectedPane('table', event.shiftKey);
           } else {
             themeStore.toggleTable();
           }
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index cfeab6d7..867a24a0 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -101,10 +101,15 @@ export default observer(function TopBar(): JSX.Element {
           py: 0.5,
         }}
       >
-        <Typography variant="h6" component="h1" flexGrow={1}>
+        <Typography variant="h6" component="h1">
           Refinery {import.meta.env.DEV && <DevModeBadge>Dev</DevModeBadge>}
         </Typography>
-        {medium && (
+        <Stack direction="row" alignItems="center" flexGrow={1} marginLeft={1}>
+          {medium && !large && (
+            <PaneButtons themeStore={themeStore} hideLabel />
+          )}
+        </Stack>
+        {large && (
           <Stack
             direction="row"
             alignItems="center"
@@ -116,7 +121,7 @@ export default observer(function TopBar(): JSX.Element {
               transform: 'translateX(-50%)',
             }}
           >
-            <PaneButtons themeStore={themeStore} hideLabel={!large} />
+            <PaneButtons themeStore={themeStore} />
           </Stack>
         )}
         <Stack
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
index fa47d873..12449b94 100644
--- a/subprojects/frontend/src/theme/ThemeStore.ts
+++ b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -91,8 +91,8 @@ export default class ThemeStore {
     return 'code';
   }
 
-  setSelectedPane(pane: SelectedPane): void {
-    this.showCode = pane === 'code';
+  setSelectedPane(pane: SelectedPane, keepCode = true): void {
+    this.showCode = pane === 'code' || (keepCode && this.showCode);
     this.showGraph = pane === 'graph';
     this.showTable = pane === 'table';
   }