refactor: table mode and context

apps/client/src/views/editor/EditorViewOptions.module.scss

@@ -0,0 +1,67 @@
+.group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-inline: 2px;
+  background: $gray-1100;
+  border-radius: $component-border-radius-md;
+  height: 2rem;
+}
+
+.radioButton {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(2rem - 4px); // padding inline * 2
+  padding-inline: 1em;
+  border: 1px solid transparent;
+  border-radius: $component-border-radius-md;
+  color: $gray-400;
+  font-size: calc(1rem - 2px);
+  font-weight: 600;
+
+  &:focus-visible {
+    background: transparent;
+    outline: 1px solid $blue-500;
+  }
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+  }
+
+  &:active {
+    background: $gray-1100;
+  }
+
+  &[data-pressed] {
+    background: $blue-700;
+    color: $ui-white;
+
+    &:hover:not(:disabled):not(:active) {
+      background: $blue-600;
+    }
+  }
+}
+
+.popoverContent {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 200px;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-self: start;
+}
+
+.sectionTitle {
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: $gray-400;
+}

apps/client/src/views/editor/EditorViewOptions.tsx

@@ -0,0 +1,50 @@
+import { memo } from 'react';
+import { LuLayoutDashboard } from 'react-icons/lu';
+import { Popover } from '@base-ui/react/popover';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { OffsetMode } from 'ontime-types';
+
+import IconButton from '../../common/components/buttons/IconButton';
+import * as Editor from '../../common/components/editor-utils/EditorUtils';
+import PopoverContents from '../../common/components/popover/Popover';
+import { setOffsetMode, useOffsetMode } from '../../common/hooks/useSocket';
+
+import style from './EditorViewOptions.module.scss';
+
+export default memo(EditorViewOptions);
+
+function EditorViewOptions() {
+  const offsetMode = useOffsetMode();
+
+  const toggleOffsetMode = (mode: OffsetMode[]) => {
+    const newValue = mode.at(0);
+    if (!newValue) return;
+    setOffsetMode(newValue);
+  };
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger
+        render={
+          <IconButton aria-label='View Options' variant='subtle-white' size='xlarge'>
+            <LuLayoutDashboard />
+          </IconButton>
+        }
+      />
+      <PopoverContents title='View Options' className={style.popoverContent} align='end'>
+        <div className={style.column}>
+          <Editor.Label className={style.sectionTitle}>Offset Mode</Editor.Label>
+          <ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.group}>
+            <Toggle value={OffsetMode.Absolute} className={style.radioButton}>
+              Absolute
+            </Toggle>
+            <Toggle value={OffsetMode.Relative} className={style.radioButton}>
+              Relative
+            </Toggle>
+          </ToggleGroup>
+        </div>
+      </PopoverContents>
+    </Popover.Root>
+  );
+}

apps/client/src/views/editor/ProtectedEditor.tsx

@@ -13,6 +13,7 @@ import EditorOverview from '../../features/overview/EditorOverview';
 
 import WelcomePlacement from './welcome/WelcomePlacement';
 import Editor from './Editor';
+import EditorViewOptions from './EditorViewOptions';
 
 import styles from './ProtectedEditor.module.scss';
 
@@ -49,6 +50,7 @@ export default function ProtectedEditor() {
       <div className={styles.mainContainer} data-testid='event-editor'>
         <WelcomePlacement />
         <NavigationMenu isOpen={isOpen} onClose={handler.close} />
+        {isSettingsOpen ? <AppSettings /> : <Editor />}
         <EditorOverview>
           <IconButton aria-label='Toggle navigation' variant='subtle-white' size='xlarge' onClick={handler.open}>
             <IoApps />
@@ -56,8 +58,8 @@ export default function ProtectedEditor() {
           <IconButton aria-label='Toggle settings' variant='subtle-white' size='xlarge' onClick={toggleSettings}>
             {isSettingsOpen ? <IoClose /> : <IoSettingsOutline />}
           </IconButton>
+          <EditorViewOptions />
         </EditorOverview>
-        {isSettingsOpen ? <AppSettings /> : <Editor />}
       </div>
     </ProtectRoute>
   );

apps/client/src/views/editor/finder/useFinder.tsx

@@ -45,6 +45,7 @@ export default function useFinder() {
   const lastSearchString = useRef('');
 
   const setSelectedEvents = useEventSelection((state) => state.setSelectedEvents);
+  const setScrollTargetId = useEventSelection((state) => state.setScrollTargetId);
 
   const [collapsedGroups, setCollapsedGroups] = useSessionStorage<EntryId[]>({
     // we ensure that this is unique to the rundown
@@ -234,8 +235,9 @@ export default function useFinder() {
 
       // Then select the event
       setSelectedEvents({ id: selectedEvent.id, index: selectedEvent.index, selectMode: 'click' });
+      setScrollTargetId(selectedEvent.id);
     },
-    [collapsedGroups, setCollapsedGroups, setSelectedEvents],
+    [collapsedGroups, setCollapsedGroups, setSelectedEvents, setScrollTargetId],
   );
 
   /** clear results when source data changes */