refactor(ui): polish navigation menu and view params editor

apps/client/src/common/components/view-params-editor/InlineColourPicker.module.scss

@@ -2,6 +2,12 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+
+  > span {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    text-transform: uppercase;
+  }
 }
 
 // attempt to match with ontimeTextInputs

apps/client/src/common/components/view-params-editor/ParamInput.module.scss

@@ -1,37 +1,77 @@
-.inline {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
+.multiOptionList {
+  overflow-y: auto;
+  max-height: 12rem;
+  background: $gray-1200;
+  border: 1px solid $gray-1100;
+  border-radius: $component-border-radius-md;
 }
 
-// styles from subtle button
 .toggleSelect {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-  padding-inline: 0.5rem;
-  height: 2.5rem;
-  background: $gray-1050;
-  color: $ui-white;
+  gap: 0.75rem;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: 0;
+  color: $gray-300;
   line-height: 1em;
-  border-radius: $component-border-radius-md;
+  cursor: pointer;
+  transition:
+    background-color $transition-time-action,
+    border-color $transition-time-action,
+    color $transition-time-action;
 
-  &:hover:not(:disabled):not(:active) {
+  &:hover {
     background: $gray-1000;
-    color: $blue-500;
+    color: $ui-white;
   }
 
-  &:active:not(:disabled) {
+  &:active {
     background: $gray-1100;
-    border-color: $gray-1250;
+  }
+
+  &:focus-within {
+    outline: 2px solid $blue-500;
+    outline-offset: -2px;
+  }
+
+  &.selected {
+    background: $bg-active;
+    box-shadow: inset 3px 0 $blue-400;
+    color: $ui-white;
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $white-7;
+  }
+
+  > [role='checkbox'] {
+    flex: 0 0 auto;
+    width: 1.125rem;
+    height: 1.125rem;
+    border: 1px solid $gray-400;
+
+    &[data-unchecked] {
+      background: $gray-1100;
+    }
+
+    &[data-checked] {
+      border-color: $blue-400;
+    }
+
+    &:focus-visible {
+      outline: 0;
+    }
   }
 
   &::after {
     content: '';
-    margin-left: 0.25rem;
-    width: 0.75em;
-    height: 0.75em;
+    flex: 0 0 auto;
+    margin-left: auto;
+    width: 0.625rem;
+    height: 0.625rem;
     background: var(--user-bg, $gray-900);
     border-radius: 50%;
   }

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -2,6 +2,7 @@ import { ComponentProps, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router';
 
 import { isStringBoolean } from '../../../views/common/viewUtils';
+import { cx } from '../../utils/styleUtils';
 import Checkbox from '../checkbox/Checkbox';
 import Input from '../input/input/Input';
 import Select, { SelectOption } from '../select/Select';
@@ -107,18 +108,20 @@ function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
   return (
     <>
       <input name={id} hidden readOnly value={paramState.join(',')} />
-      <div className={style.inline}>
+      <div className={style.multiOptionList}>
         {values.map((option) => {
+          const selected = paramState.includes(option.value);
+
           return (
             <label
               key={option.value}
-              className={style.toggleSelect}
+              className={cx([style.toggleSelect, selected && style.selected])}
               style={{
                 '--user-bg': option.colour,
               }}
             >
               <Checkbox
-                checked={paramState.includes(option.value)}
+                checked={selected}
                 onCheckedChange={(checked) => toggleValue(option.value, checked as boolean)}
               />
               {option.label}

apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss

@@ -1,13 +1,3 @@
-.drawerFooter {
-  display: flex;
-  justify-content: end;
-  gap: $section-spacing;
-
-  button {
-    padding: 0 2em;
-  }
-}
-
 .backdrop {
   position: fixed;
   inset: 0;
@@ -34,11 +24,11 @@
 
   display: flex;
   flex-direction: column;
-  padding-block: 1rem 1.5rem;
 
-  background-color: $gray-1250;
+  background-color: $ui-black;
   color: $ui-white;
   border-left: 1px solid $gray-1100;
+  box-shadow: $box-shadow-l1;
 
   &[data-open] {
     transform: translateX(0%);
@@ -58,36 +48,54 @@
 }
 
 .header {
-  padding-inline: 1rem;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 3.5rem;
+  gap: 1rem;
+  min-height: 4rem;
+  padding: 0.75rem 1rem;
+}
 
+.headerText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.title {
   font-weight: 600;
   font-size: 1.25rem;
+  line-height: 1.2;
+}
+
+.target {
+  font-size: $aux-text-size;
+  color: $gray-600;
 }
 
 .body {
   flex: 1;
-  padding-inline: 1rem;
-  padding-bottom: 10vh;
+  padding: 1rem;
   overflow-y: auto;
 }
 
 .footer {
+  flex: 0 0 auto;
   display: flex;
-  padding-inline: 1rem;
+  padding: 0.75rem 1rem;
   gap: 1rem;
   align-items: center;
   justify-content: flex-end;
+
+  background-color: $ui-black;
+  border-top: 1px solid $white-10;
 }
 
 .sectionList {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
-  padding-right: 0.5rem;
+  gap: 0.75rem;
 }
 
 .info {

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -4,6 +4,7 @@ import { FormEvent, memo } from 'react';
 import { IoClose } from 'react-icons/io5';
 import { useSearchParams } from 'react-router';
 
+import { viewLabels } from '../../../viewerConfig';
 import useViewSettings from '../../hooks-query/useViewSettings';
 import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
 import { useSavedViewParams } from '../../stores/savedViewParams';
@@ -71,8 +72,17 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
         <Dialog.Backdrop className={style.backdrop} />
         <Dialog.Popup className={style.drawer}>
           <div className={style.header}>
-            <Dialog.Title>Customise</Dialog.Title>
-            <IconButton variant='subtle-white' size='large' data-testid='close-view-params' onClick={handleClose}>
+            <div className={style.headerText}>
+              <Dialog.Title className={style.title}>Customise</Dialog.Title>
+              <span className={style.target}>{viewLabels[target]}</span>
+            </div>
+            <IconButton
+              variant='subtle-white'
+              size='large'
+              aria-label='Close'
+              data-testid='close-view-params'
+              onClick={handleClose}
+            >
               <IoClose />
             </IconButton>
           </div>

apps/client/src/common/components/view-params-editor/ViewParamsPresets.module.scss

@@ -1,10 +1,21 @@
 .presetSection {
   background-color: $gray-1350;
+  border: 1px solid $white-10;
+  border-radius: $component-border-radius-md;
+  margin-bottom: 0.75rem;
+}
+
+.header {
+  padding: 0.5rem 1rem;
+  min-height: 2.25rem;
   display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 1rem 0.5rem;
-  margin-bottom: 1rem;
+  align-items: center;
+
+  color: $gray-300;
+}
+
+.presetList {
+  border-top: 1px solid $white-7;
   max-height: 10rem;
   overflow-y: auto;
   scrollbar-gutter: stable;
@@ -14,12 +25,39 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 1rem;
+  font-size: $inner-section-text-size;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $white-7;
+  }
 
   &.active {
-    color: $blue-500;
+    background-color: $bg-active;
+    box-shadow: inset 3px 0 $blue-400;
+    color: $ui-white;
+    font-weight: 600;
   }
 }
 
+.presetName {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .presetActions {
   margin-left: auto;
 }
+
+.current {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: auto;
+  color: $blue-400;
+  font-size: $aux-text-size;
+  font-weight: 600;
+}

apps/client/src/common/components/view-params-editor/ViewParamsPresets.tsx

@@ -4,6 +4,7 @@ import { useSearchParams } from 'react-router';
 import { useViewUrlPresets } from '../../hooks-query/useUrlPresets';
 import { cx } from '../../utils/styleUtils';
 import Button from '../buttons/Button';
+import Eyebrow from '../eyebrow/Eyebrow';
 
 import style from './ViewParamsPresets.module.scss';
 
@@ -26,22 +27,31 @@ export function ViewParamsPresets({ target }: { target: OntimeView }) {
 
   return (
     <div className={style.presetSection}>
-      {viewPresets.map((preset) => {
-        const active = searchParams.get('alias') === preset.alias;
-        return (
-          <div key={preset.alias} className={cx([style.preset, active && style.active])}>
-            <div>{preset.alias}</div>
-            <Button
-              variant={active ? 'ghosted' : 'subtle-white'}
-              onClick={() => handleRecall(preset)}
-              disabled={active}
-              className={style.presetActions}
-            >
-              {active ? 'Applied' : 'Apply'}
-            </Button>
-          </div>
-        );
-      })}
+      <div className={style.header}>
+        <Eyebrow>Saved presets</Eyebrow>
+      </div>
+      <div className={style.presetList}>
+        {viewPresets.map((preset) => {
+          const active = searchParams.get('alias') === preset.alias;
+          return (
+            <div key={preset.alias} className={cx([style.preset, active && style.active])}>
+              <span className={style.presetName}>{preset.alias}</span>
+              {active ? (
+                <span className={style.current}>Current</span>
+              ) : (
+                <Button
+                  variant='ghosted'
+                  size='small'
+                  onClick={() => handleRecall(preset)}
+                  className={style.presetActions}
+                >
+                  Apply
+                </Button>
+              )}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }

apps/client/src/common/components/view-params-editor/ViewParamsSection.module.scss

@@ -1,48 +1,118 @@
 .section {
+  overflow: hidden;
+
   color: $ui-white;
   font-size: 1rem;
+  background-color: $white-3;
+  border: 1px solid $gray-1100;
+  border-radius: $component-border-radius-md;
 }
 
 .sectionHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 2rem;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.5rem 1rem;
+
+  background: transparent;
+  border: 0;
+  font: inherit;
+  text-align: left;
+
+  color: $gray-300;
 
   &.collapsible {
     cursor: pointer;
+    transition-property: color, background-color;
+    transition-duration: $transition-time-action;
+
+    &:hover {
+      background-color: $white-3;
+      color: $ui-white;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $blue-500;
+      outline-offset: -2px;
+    }
   }
 }
 
+.sectionTitle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/** marks a section which holds values coming from the URL */
+.customised {
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 50%;
+  background-color: $active-indicator;
+  flex-shrink: 0;
+}
+
+.chevron {
+  flex-shrink: 0;
+  rotate: 180deg;
+  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &.closed {
+    rotate: 0deg;
+  }
+}
+
+.options {
+  padding-inline: 1rem;
+  border-top: 1px solid $white-7;
+}
+
 .label {
-  margin-top: $section-spacing;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  row-gap: 0.25rem;
+  padding: 0.75rem 0;
   font-size: $inner-section-text-size;
-  color: $label-gray;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $white-7;
+  }
+}
+
+/**
+ * Compact controls sit beside their label instead of below it.
+ * Placement is done with grid areas so that the markup stays flat.
+ */
+.inline {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: 1rem;
+
+  > .title {
+    grid-area: 1 / 1;
+  }
+
+  > .description {
+    grid-area: 2 / 1;
+  }
+
+  > *:last-child {
+    grid-area: 1 / 2 / span 2;
+  }
 }
 
 .title {
-  font-size: $inner-section-text-size;
-  display: block;
-  width: 100%;
+  color: $ui-white;
 }
 
 .description {
-  font-size: $inner-section-text-size;
-  display: block;
-  color: $modal-note-color;
-}
-
-.closed {
-  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
-  rotate: 0deg;
-}
-
-.open {
-  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
-  rotate: 180deg;
+  color: $gray-400;
+  font-size: $aux-text-size;
+  line-height: 1.4;
 }
 
 .hidden {

apps/client/src/common/components/view-params-editor/ViewParamsSection.tsx

@@ -1,7 +1,9 @@
 import { useLocalStorage } from '@mantine/hooks';
 import { IoChevronDown } from 'react-icons/io5';
+import { useSearchParams } from 'react-router';
 
 import { cx } from '../../utils/styleUtils';
+import Eyebrow from '../eyebrow/Eyebrow';
 import { OptionTitle } from './constants';
 import ParamInput from './ParamInput';
 import { type ParamField } from './viewParams.types';
@@ -14,50 +16,74 @@ interface ViewParamsSectionProps {
   options: ParamField[];
 }
 
+/** Fields which are compact enough to share a row with their label */
+function isInlineField(option: ParamField): boolean {
+  return option.type === 'boolean' || option.type === 'colour';
+}
+
 export default function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
   const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });
+  const [searchParams] = useSearchParams();
 
-  const handleCollapse = () => {
-    if (collapsible) {
-      setCollapsed((prev) => !prev);
-    }
-  };
+  // hidden options are inputs without a UI, there is nothing to frame them with
+  if (title === OptionTitle.Hidden) {
+    return <HiddenContents options={options} />;
+  }
+
+  const isCollapsed = Boolean(collapsible && collapsed);
 
   return (
     <section className={style.section}>
-      {title === OptionTitle.Hidden ? (
-        <HiddenContents options={options} />
-      ) : (
-        <>
-          <div className={cx([style.sectionHeader, collapsible && style.collapsible])} onClick={handleCollapse}>
-            {title}
-            {collapsible && <IoChevronDown className={cx([collapsed ? style.closed : style.open])} />}
-          </div>
-          <SectionContents options={options} collapsed={collapsed} />
-        </>
-      )}
-    </section>
-  );
-}
-
-interface SectionContentsProps {
-  options: ParamField[];
-  collapsed: boolean;
-}
-
-function SectionContents({ options, collapsed }: SectionContentsProps) {
-  return (
-    <>
-      {options.map((option) => {
-        return (
-          <label key={option.title} className={cx([style.label, collapsed && style.hidden])}>
+      <SectionHeader
+        title={title}
+        isCustomised={options.some((option) => searchParams.has(option.id))}
+        collapsed={isCollapsed}
+        onToggle={collapsible ? () => setCollapsed((prev) => !prev) : undefined}
+      />
+      {/* collapsed options stay mounted: the form reads its values from the DOM */}
+      <div className={cx([style.options, isCollapsed && style.hidden])}>
+        {options.map((option) => (
+          <label key={option.title} className={cx([style.label, isInlineField(option) && style.inline])}>
             <span className={style.title}>{option.title}</span>
             <span className={style.description}>{option.description}</span>
             <ParamInput paramField={option} />
           </label>
-        );
-      })}
-    </>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+interface SectionHeaderProps {
+  title: string;
+  isCustomised: boolean;
+  collapsed: boolean;
+  /** a header without a toggle belongs to a section which cannot collapse */
+  onToggle?: () => void;
+}
+
+function SectionHeader({ title, isCustomised, collapsed, onToggle }: SectionHeaderProps) {
+  const label = (
+    <Eyebrow className={style.sectionTitle}>
+      {title}
+      {isCustomised && <span className={style.customised} title='Contains custom values' />}
+    </Eyebrow>
+  );
+
+  if (!onToggle) {
+    return <div className={style.sectionHeader}>{label}</div>;
+  }
+
+  return (
+    <button
+      type='button'
+      className={cx([style.sectionHeader, style.collapsible])}
+      aria-expanded={!collapsed}
+      onClick={onToggle}
+    >
+      {label}
+      <IoChevronDown className={cx([style.chevron, collapsed && style.closed])} />
+    </button>
   );
 }