refactor: improve editor and cuesheet headers

- consistent behaviour for app mode
- improve navigation

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.tsx

@@ -1,6 +1,10 @@
 import { memo, ReactNode } from 'react';
-import { IoChevronDown, IoLocate, IoOptions, IoSettingsOutline } from 'react-icons/io5';
+import { IoChevronDown, IoOptions, IoSettingsOutline } from 'react-icons/io5';
 import { Popover } from '@base-ui-components/react/popover';
+import { Toggle } from '@base-ui-components/react/toggle';
+import { ToggleGroup } from '@base-ui-components/react/toggle-group';
+import { Toolbar } from '@base-ui-components/react/toolbar';
+import { useSessionStorage } from '@mantine/hooks';
 import type { Column } from '@tanstack/react-table';
 import { OntimeEntry } from 'ontime-types';
 
@@ -8,6 +12,8 @@ import Button from '../../../../common/components/buttons/Button';
 import Checkbox from '../../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
 import PopoverContents from '../../../../common/components/popover/Popover';
+import { cx } from '../../../../common/utils/styleUtils';
+import { AppMode, sessionKeys } from '../../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
 
 import CuesheetShareModal from './CuesheetShareModal';
@@ -28,36 +34,40 @@ function CuesheetTableSettings({
   handleResetReordering,
   handleClearToggles,
 }: CuesheetTableSettingsProps) {
-  return (
-    <div className={style.tableSettings}>
-      <div className={style.inline}>
-        <ViewSettings />
-        <ColumnSettings
-          columns={columns}
-          handleResetResizing={handleResetResizing}
-          handleResetReordering={handleResetReordering}
-          handleClearToggles={handleClearToggles}
-        />
-      </div>
+  const [cuesheetMode, setCuesheetMode] = useSessionStorage({
+    key: sessionKeys.cuesheetMode,
+    defaultValue: AppMode.Edit,
+  });
 
-      <div className={style.inline}>
-        <ViewSettingsFollowButton />
-        <Editor.Separator orientation='vertical' />
-        <CuesheetShareModal />
-      </div>
-    </div>
-  );
-}
-
-function ViewSettingsFollowButton() {
-  const followPlayback = usePersistedCuesheetOptions((state) => state.followPlayback);
-  const toggle = usePersistedCuesheetOptions((state) => state.toggleOption);
+  const toggleCuesheetMode = (mode: AppMode[]) => {
+    // we need to stop user from deselecting a mode
+    const newValue = mode.at(0);
+    if (!newValue) return;
+    setCuesheetMode(newValue);
+  };
 
   return (
-    <Button variant={followPlayback ? 'primary' : 'subtle'} onClick={() => toggle('followPlayback')}>
-      <IoLocate />
-      {followPlayback ? 'Following playback' : 'Follow playback'}
-    </Button>
+    <Toolbar.Root className={style.tableSettings}>
+      <ViewSettings />
+      <ColumnSettings
+        columns={columns}
+        handleResetResizing={handleResetResizing}
+        handleResetReordering={handleResetReordering}
+        handleClearToggles={handleClearToggles}
+      />
+
+      <ToggleGroup value={[cuesheetMode]} onValueChange={toggleCuesheetMode} className={cx([style.group, style.apart])}>
+        <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
+          Run
+        </Toolbar.Button>
+        <Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton}>
+          Edit
+        </Toolbar.Button>
+      </ToggleGroup>
+
+      <Editor.Separator orientation='vertical' />
+      <CuesheetShareModal />
+    </Toolbar.Root>
   );
 }
 
@@ -68,59 +78,60 @@ function ViewSettings() {
     <Popover.Root>
       <Popover.Trigger
         render={
-          <Button variant='ghosted-white'>
-            <IoSettingsOutline /> Settings
-            <IoChevronDown />
-          </Button>
+          <Toolbar.Button
+            render={
+              <Button variant='ghosted-white'>
+                <IoSettingsOutline /> Settings
+                <IoChevronDown />
+              </Button>
+            }
+          />
         }
       />
 
-      <PopoverContents align='start' className={style.column}>
-        <Editor.Label className={style.sectionTitle}>Element visibility</Editor.Label>
-        <Editor.Label className={style.option}>
-          <Checkbox
-            defaultChecked={options.showActionMenu}
-            onCheckedChange={(checked) => options.setOption('showActionMenu', checked)}
-          />
-          Show action menu
-        </Editor.Label>
-        <Editor.Label className={style.option}>
-          <Checkbox
-            defaultChecked={options.hideTableSeconds}
-            onCheckedChange={(checked) => options.setOption('hideTableSeconds', checked)}
-          />
-          Hide seconds in table
-        </Editor.Label>
-        <Editor.Label className={style.option}>
-          <Checkbox
-            defaultChecked={options.hidePast}
-            onCheckedChange={(checked) => options.setOption('hidePast', checked)}
-          />
-          Hide past events
-        </Editor.Label>
-        <Editor.Label className={style.option}>
-          <Checkbox
-            defaultChecked={options.hideIndexColumn}
-            onCheckedChange={(checked) => options.setOption('hideIndexColumn', checked)}
-          />
-          Hide index column
-        </Editor.Label>
+      <PopoverContents align='start' className={style.inline}>
+        <div className={style.column}>
+          <Editor.Label className={style.sectionTitle}>Element visibility</Editor.Label>
+          <Editor.Label className={style.option}>
+            <Checkbox
+              defaultChecked={options.hideTableSeconds}
+              onCheckedChange={(checked) => options.setOption('hideTableSeconds', checked)}
+            />
+            Hide seconds in table
+          </Editor.Label>
+          <Editor.Label className={style.option}>
+            <Checkbox
+              defaultChecked={options.hidePast}
+              onCheckedChange={(checked) => options.setOption('hidePast', checked)}
+            />
+            Hide past events
+          </Editor.Label>
+          <Editor.Label className={style.option}>
+            <Checkbox
+              defaultChecked={options.hideIndexColumn}
+              onCheckedChange={(checked) => options.setOption('hideIndexColumn', checked)}
+            />
+            Hide index column
+          </Editor.Label>
+        </div>
 
-        <Editor.Label className={style.sectionTitle}>Table Behaviour</Editor.Label>
-        <Editor.Label className={style.option}>
-          <Checkbox
-            defaultChecked={options.showDelayedTimes}
-            onCheckedChange={(checked) => options.setOption('showDelayedTimes', checked)}
-          />
-          Show delayed times
-        </Editor.Label>
-        <Editor.Label className={style.option}>
-          <Checkbox
-            defaultChecked={options.hideDelays}
-            onCheckedChange={(checked) => options.setOption('hideDelays', checked)}
-          />
-          Hide delay entries
-        </Editor.Label>
+        <div className={style.column}>
+          <Editor.Label className={style.sectionTitle}>Table Behaviour</Editor.Label>
+          <Editor.Label className={style.option}>
+            <Checkbox
+              defaultChecked={options.showDelayedTimes}
+              onCheckedChange={(checked) => options.setOption('showDelayedTimes', checked)}
+            />
+            Show delayed times
+          </Editor.Label>
+          <Editor.Label className={style.option}>
+            <Checkbox
+              defaultChecked={options.hideDelays}
+              onCheckedChange={(checked) => options.setOption('hideDelays', checked)}
+            />
+            Hide delay entries
+          </Editor.Label>
+        </div>
       </PopoverContents>
     </Popover.Root>
   );
@@ -136,10 +147,14 @@ function ColumnSettings({
     <Popover.Root>
       <Popover.Trigger
         render={
-          <Button variant='ghosted-white'>
-            <IoOptions /> View
-            <IoChevronDown />
-          </Button>
+          <Toolbar.Button
+            render={
+              <Button variant='ghosted-white'>
+                <IoOptions /> View
+                <IoChevronDown />
+              </Button>
+            }
+          />
         }
       />
       <PopoverContents align='start' className={style.inline}>