refactor(CustomFields): Implement UI-only reordering with Save button

This commit refactors the custom field ordering functionality to support
UI-only reordering with an explicit "Save Order" button. This replaces
the previous approach where each move operation updated the backend.

Changes include:

- **Frontend State Management:**
    - `CustomFields.tsx` now manages a local state (`displayedFields`) for the order of custom fields.
    - Reordering operations ("Move Up"/"Move Down") update this local state directly without immediate backend calls.
- **"Save Order" Button:**
    - A "Save Order" button has been added to the UI.
    - This button is enabled only when changes to the order have been made locally.
    - Clicking "Save Order" triggers API calls to persist the new order of all changed fields to the backend.
- **API Calls:**
    - `editCustomField` is now called in a batch when "Save Order" is pressed, only for fields whose order has effectively changed.
- **Local Order Integrity:**
    - The `onMove` handler now ensures that the local `order` properties are dense and sequential (0, 1, 2...) before saving.
- **Testing Plan:** Updated manual testing steps to reflect the new UI flow.

This approach improves UX by making reordering feel instantaneous and reduces the number of API calls compared to updating on every move.

.github/workflows/build.yml

@@ -14,12 +14,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -56,12 +56,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -89,12 +89,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/build_cli.yml

@@ -20,13 +20,13 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           registry-url: 'https://registry.npmjs.org'
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/test.yml

@@ -17,12 +17,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -73,12 +73,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.idea/.gitignore

@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/

.idea/inspectionProfiles/Project_Default.xml

@@ -1,51 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myCustomPropertiesEnabled" value="true" />
-      <option name="myIgnoreVendorSpecificProperties" value="false" />
-      <option name="myCustomPropertiesList">
-        <value>
-          <list size="3">
-            <item index="0" class="java.lang.String" itemvalue="scrollbar-color" />
-            <item index="1" class="java.lang.String" itemvalue="scrollbar-width" />
-            <item index="2" class="java.lang.String" itemvalue="app-region" />
-          </list>
-        </value>
-      </option>
-    </inspection_tool>
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="HttpUrlsUsage" enabled="true" level="WEAK WARNING" enabled_by_default="true">
-      <option name="ignoredUrls">
-        <list>
-          <option value="http://localhost" />
-          <option value="http://127.0.0.1" />
-          <option value="http://0.0.0.0" />
-          <option value="http://www.w3.org/" />
-          <option value="http://json-schema.org/draft" />
-          <option value="http://java.sun.com/" />
-          <option value="http://xmlns.jcp.org/" />
-          <option value="http://javafx.com/javafx/" />
-          <option value="http://javafx.com/fxml" />
-          <option value="http://maven.apache.org/xsd/" />
-          <option value="http://maven.apache.org/POM/" />
-          <option value="http://www.springframework.org/schema/" />
-          <option value="http://www.springframework.org/tags" />
-          <option value="http://www.springframework.org/security/tags" />
-          <option value="http://www.thymeleaf.org" />
-          <option value="http://www.jboss.org/j2ee/schema/" />
-          <option value="http://www.jboss.com/xml/ns/" />
-          <option value="http://www.ibm.com/webservices/xsd" />
-          <option value="http://activemq.apache.org/schema/" />
-          <option value="http://schema.cloudfoundry.org/spring/" />
-          <option value="http://schemas.xmlsoap.org/" />
-          <option value="http://cxf.apache.org/schemas/" />
-          <option value="http://primefaces.org/ui" />
-          <option value="http://tiles.apache.org/" />
-          <option value="http://__IP__" />
-        </list>
-      </option>
-    </inspection_tool>
-    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
-  </profile>
-</component>

.nvmrc

@@ -1 +1 @@
-v20.15.1
+v22.15.1

DEVELOPMENT.md

@@ -9,8 +9,8 @@ Ontime consists of 3 distinct parts
 The steps below will assume you have locally installed the necessary dependencies.
 Other dependencies will be installed as part of the setup
 
-- __node__ (~20)
-- __pnpm__ (~9)
+- __node__ (~22)
+- __pnpm__ (~10)
 - __docker__ (only necessary to run and build docker images)
 
 ## LOCAL DEVELOPMENT

Dockerfile

@@ -1,13 +1,13 @@
-FROM node:20-bullseye AS builder
+FROM node:22-bullseye AS builder
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN npm install -g pnpm@9.5.0
+RUN npm install -g pnpm@10.11.0
 COPY . /app
 WORKDIR /app
 RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils install --config.dedupe-peer-dependents=false --frozen-lockfile
 RUN pnpm --filter=ontime-ui --filter=ontime-server run build:docker
 
-FROM node:20-alpine
+FROM node:22-alpine
 
 # Set environment variables
 # Environment Variable to signal that we are running production

README.md

@@ -103,19 +103,12 @@ IP.ADDRESS:4001/studio     > Studio Clock
 IP.ADDRESS:4001/timeline   > Timeline
 ```
 
-```
-For the public views
--------------------------------------------------------------
-IP.ADDRESS:4001/public     > Public / Foyer view
-IP.ADDRESS:4001/lower      > Lower Thirds
-```
-
 ```
 For production views
 -------------------------------------------------------------
 IP.ADDRESS:4001/editor    > the control interface, same as the app
 IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
-IP.ADDRESS:4001/operator  > automated views for operators
+IP.ADDRESS:4001/op        > automated views for operators
 ```
 
 More information is available [in our docs](https://docs.getontime.no)

apps/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@getontime/cli",
-    "version": "3.13.1",
+    "version": "3.15.2",
     "author": "Carlos Valente",
     "description": "Time keeping for live events",
     "repository": "https://github.com/cpvalente/ontime",

apps/client/.eslintrc

@@ -15,10 +15,12 @@
   ],
   "plugins": [
     "react",
+    "react-compiler",
     "simple-import-sort",
     "@tanstack/query"
   ],
   "rules": {
+    "react-compiler/react-compiler": "warn",
     "react/jsx-no-bind": [
       "error",
       {

apps/client/package.json

@@ -1,35 +1,38 @@
 {
   "name": "ontime-ui",
-  "version": "3.13.1",
+  "version": "3.15.2",
   "private": true,
   "type": "module",
   "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.1",
     "@chakra-ui/react": "^2.7.0",
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/is-prop-valid": "^1.3.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fontsource/open-sans": "^5.0.28",
-    "@mantine/hooks": "^7.13.3",
-    "@react-icons/all-files": "^4.1.0",
+    "@mantine/hooks": "^8.1.2",
     "@sentry/react": "^8.43.0",
+    "@table-nav/react": "^0.0.7",
     "@tanstack/react-query": "^5.62.7",
     "@tanstack/react-query-devtools": "^5.62.7",
-    "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-table": "^8.21.3",
     "autosize": "^6.0.1",
-    "axios": "^1.2.0",
-    "color": "^4.2.3",
+    "axios": "^1.9.0",
     "csv-stringify": "^6.4.5",
     "framer-motion": "^10.10.0",
+    "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.3.1",
     "react-fast-compare": "^3.2.2",
     "react-hook-form": "^7.53.1",
+    "react-icons": "5.4.0",
     "react-qr-code": "^2.0.12",
     "react-router-dom": "^6.3.0",
+    "react-simple-code-editor": "^0.14.1",
     "web-vitals": "^3.1.1",
     "zustand": "^5.0.3"
   },
@@ -63,17 +66,18 @@
   "devDependencies": {
     "@sentry/vite-plugin": "^2.16.1",
     "@tanstack/eslint-plugin-query": "^5.8.4",
-    "@types/color": "^3.0.3",
+    "@types/prismjs": "^1.26.5",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "4.5.1",
     "eslint": "catalog:",
     "eslint-config-prettier": "catalog:",
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-prettier": "catalog:",
     "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "happy-dom": "^16.7.2",
@@ -82,10 +86,10 @@
     "prettier": "catalog:",
     "sass": "^1.57.1",
     "typescript": "catalog:",
-    "vite": "^5.2.11",
-    "vite-plugin-compression2": "^1.3.3",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.1",
+    "vite": "6.3.1",
+    "vite-plugin-compression2": "1.4.0",
+    "vite-plugin-svgr": "4.3.0",
+    "vite-tsconfig-paths": "5.1.4",
     "vitest": "catalog:"
   }
 }

apps/client/src/AppRouter.tsx

@@ -18,20 +18,19 @@ import ViewLoader from './views/ViewLoader';
 import { ONTIME_VERSION } from './ONTIME_VERSION';
 import { sentryDsn, sentryRecommendedIgnore } from './sentry.config';
 
-const Editor = React.lazy(() => import('./features/editors/ProtectedEditor'));
+const Editor = React.lazy(() => import('./views/editor/ProtectedEditor'));
 const Cuesheet = React.lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
 const Operator = React.lazy(() => import('./features/operator/OperatorExport'));
 
 const TimerView = React.lazy(() => import('./views/timer/Timer'));
 const MinimalTimerView = React.lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
 const ClockView = React.lazy(() => import('./features/viewers/clock/Clock'));
-const Countdown = React.lazy(() => import('./features/viewers/countdown/Countdown'));
+const Countdown = React.lazy(() => import('./views/countdown/Countdown'));
 
 const Backstage = React.lazy(() => import('./views/backstage/Backstage'));
 const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
-const Public = React.lazy(() => import('./views/public/Public'));
 const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
-const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
+const StudioClock = React.lazy(() => import('./views/studio/Studio'));
 const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));
 
 const STimer = withPreset(withData(TimerView));
@@ -40,7 +39,6 @@ const SClock = withPreset(withData(ClockView));
 const SCountdown = withPreset(withData(Countdown));
 const SBackstage = withPreset(withData(Backstage));
 const SProjectInfo = withPreset(withData(ProjectInfo));
-const SPublic = withPreset(withData(Public));
 const SLowerThird = withPreset(withData(Lower));
 const SStudio = withPreset(withData(StudioClock));
 const STimeline = withPreset(withData(Timeline));
@@ -88,14 +86,6 @@ export default function AppRouter() {
             </ViewLoader>
           }
         />
-        <Route
-          path='/public'
-          element={
-            <ViewLoader>
-              <SPublic />
-            </ViewLoader>
-          }
-        />
         <Route
           path='/minimal'
           element={
@@ -158,7 +148,14 @@ export default function AppRouter() {
         {/*/!* Protected Routes *!/*/}
         <Route path='/editor' element={<Editor />} />
         <Route path='/cuesheet' element={<PCuesheet />} />
-        <Route path='/op' element={<POperator />} />
+        <Route
+          path='/op'
+          element={
+            <ViewLoader>
+              <POperator />
+            </ViewLoader>
+          }
+        />
 
         {/*/!* Protected Routes - Elements *!/*/}
         <Route

apps/client/src/common/api/assets.ts

@@ -0,0 +1,30 @@
+import axios from 'axios';
+
+import { apiEntryUrl } from './constants';
+
+const assetsPath = `${apiEntryUrl}/assets`;
+
+/**
+ * HTTP request to get css contents
+ */
+export async function getCSSContents(): Promise<string> {
+  const res = await axios.get(`${assetsPath}/css`);
+  return res.data;
+}
+
+/**
+ * HTTP request to post css contents
+ */
+export async function postCSSContents(css: string): Promise<void> {
+  await axios.post(`${assetsPath}/css`, {
+    css,
+  });
+}
+
+/**
+ * HTTP request to restore default css
+ */
+export async function restoreCSSContents(): Promise<string> {
+  const res = await axios.post(`${assetsPath}/css/restore`);
+  return res.data;
+}

apps/client/src/common/api/axios.config.ts

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+axios.defaults.validateStatus = (status) => {
+  return (status >= 200 && status < 300) || status === 304;
+};

apps/client/src/common/api/constants.ts

@@ -8,9 +8,9 @@ export const AUTOMATION = ['automation'];
 export const CUSTOM_FIELDS = ['customFields'];
 export const PROJECT_DATA = ['project'];
 export const PROJECT_LIST = ['projectList'];
+export const PROJECT_RUNDOWNS = ['projectRundowns'];
 export const RUNDOWN = ['rundown'];
 export const RUNTIME = ['runtimeStore'];
-export const SHEET_STATE = ['sheetState'];
 export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const CLIENT_LIST = ['clientList'];
@@ -19,11 +19,8 @@ export const REPORT = ['report'];
 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;
 
-export const projectDataURL = `${serverURL}/project`;
-export const rundownURL = `${serverURL}/events`;
-export const ontimeURL = `${serverURL}/ontime`;
+const userAssetsPath = 'user';
+const cssOverridePath = 'styles/override.css';
 
-export const userAssetsPath = 'user';
-export const cssOverridePath = 'styles/override.css';
 export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
 export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;

apps/client/src/common/api/customFields.ts

@@ -1,38 +1,45 @@
 import axios from 'axios';
-import { CustomField, CustomFieldLabel, CustomFields } from 'ontime-types';
+import { CustomField, CustomFieldKey } from 'ontime-types'; // Removed CustomFields
 
 import { apiEntryUrl } from './constants';
 
+// Define CustomFieldWithKey for client-side usage
+export type CustomFieldWithKey = CustomField & { key: CustomFieldKey };
+
 const customFieldsPath = `${apiEntryUrl}/custom-fields`;
 
 /**
- * Requests list of known custom fields
+ * Requests list of known custom fields, sorted by order
  */
-export async function getCustomFields(): Promise<CustomFields> {
-  const res = await axios.get(customFieldsPath);
+export async function getCustomFields(): Promise<CustomFieldWithKey[]> {
+  const res = await axios.get<CustomFieldWithKey[]>(customFieldsPath);
   return res.data;
 }
 
 /**
  * Sets list of known custom fields
+ * Returns the updated list, sorted by order
  */
-export async function postCustomField(newField: CustomField): Promise<CustomFields> {
-  const res = await axios.post(customFieldsPath, { ...newField });
+export async function postCustomField(newField: CustomField): Promise<CustomFieldWithKey[]> {
+  const res = await axios.post<CustomFieldWithKey[]>(customFieldsPath, { ...newField });
   return res.data;
 }
 
 /**
  * Edits single custom field
+ * Returns the updated list, sorted by order
  */
-export async function editCustomField(label: CustomFieldLabel, newField: CustomField): Promise<CustomFields> {
-  const res = await axios.put(`${customFieldsPath}/${label}`, { ...newField });
+export async function editCustomField(key: CustomFieldKey, newField: Partial<CustomField>): Promise<CustomFieldWithKey[]> {
+  // Ensure newField can include 'order' by using Partial<CustomField>
+  const res = await axios.put<CustomFieldWithKey[]>(`${customFieldsPath}/${key}`, { ...newField });
   return res.data;
 }
 
 /**
  * Deletes single custom field
+ * Returns the updated list, sorted by order
  */
-export async function deleteCustomField(label: CustomFieldLabel): Promise<CustomFields> {
-  const res = await axios.delete(`${customFieldsPath}/${label}`);
+export async function deleteCustomField(key: CustomFieldKey): Promise<CustomFieldWithKey[]> {
+  const res = await axios.delete<CustomFieldWithKey[]>(`${customFieldsPath}/${key}`);
   return res.data;
 }

apps/client/src/common/api/db.ts

@@ -2,7 +2,7 @@ import axios, { AxiosResponse } from 'axios';
 import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';
 
 import { makeTable } from '../../views/cuesheet/cuesheet.utils';
-import { makeCSVFromArrayOfArrays } from '../utils/csv';
+import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../utils/csv';
 
 import { apiEntryUrl } from './constants';
 import { createBlob, downloadBlob } from './utils';
@@ -40,9 +40,11 @@ export async function downloadProject(fileName: string) {
 export async function downloadCSV(fileName: string = 'rundown') {
   try {
     const { data, name } = await fileDownload(fileName);
-    const { project, rundown, customFields } = data;
+    const { project, rundowns, customFields } = data;
+
+    const flatRundowns = aggregateRundowns(rundowns);
+    const sheetData = makeTable(project, flatRundowns, customFields);
 
-    const sheetData = makeTable(project, rundown, customFields);
     const fileContent = makeCSVFromArrayOfArrays(sheetData);
 
     const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');

apps/client/src/common/api/excel.ts

@@ -1,16 +1,11 @@
 import axios, { AxiosResponse } from 'axios';
-import { CustomFields, OntimeRundown } from 'ontime-types';
+import { CustomFields, Rundown } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
 
 const excelPath = `${apiEntryUrl}/excel`;
 
-type PreviewSpreadsheetResponse = {
-  rundown: OntimeRundown;
-  customFields: CustomFields;
-};
-
 /**
  * upload Excel file to server
  * @return string - file ID op the uploaded file
@@ -34,6 +29,10 @@ export async function getWorksheetNames(): Promise<string[]> {
   return response.data;
 }
 
+type PreviewSpreadsheetResponse = {
+  rundown: Rundown;
+  customFields: CustomFields;
+};
 export async function importRundownPreview(options: ImportMap): Promise<PreviewSpreadsheetResponse> {
   const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(`${excelPath}/preview`, {
     options,

apps/client/src/common/api/external.ts

@@ -11,7 +11,7 @@ export type HasUpdate = {
  * HTTP request to get the latest version and url from github
  */
 export async function getLatestVersion(): Promise<HasUpdate> {
-  const res = await axios.get(`${apiRepoLatest}`);
+  const res = await axios.get(apiRepoLatest);
   return {
     url: res.data.html_url as string,
     version: res.data.tag_name as string,

apps/client/src/common/api/report.ts

@@ -11,7 +11,7 @@ export const reportUrl = `${apiEntryUrl}/report`;
  * HTTP request to fetch all reports
  */
 export async function fetchReport(): Promise<OntimeReport> {
-  const res = await axios.get(`${reportUrl}/`);
+  const res = await axios.get(reportUrl);
   return res.data;
 }
 

apps/client/src/common/api/rundown.ts

@@ -1,29 +1,45 @@
 import axios, { AxiosResponse } from 'axios';
-import { MessageResponse, OntimeEvent, OntimeRundownEntry, RundownCached, TransientEventPayload } from 'ontime-types';
+import {
+  EntryId,
+  MessageResponse,
+  OntimeEntry,
+  OntimeEvent,
+  ProjectRundownsList,
+  Rundown,
+  TransientEventPayload,
+} from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
 
 const rundownPath = `${apiEntryUrl}/rundown`;
 
 /**
- * HTTP request to fetch all events
+ * HTTP request to fetch a list of existing rundowns
  */
-export async function fetchNormalisedRundown(): Promise<RundownCached> {
-  const res = await axios.get(`${rundownPath}/normalised`);
+export async function fetchProjectRundownList(): Promise<ProjectRundownsList> {
+  const res = await axios.get(rundownPath);
   return res.data;
 }
 
 /**
- * HTTP request to post new event
+ * HTTP request to fetch all events
  */
-export async function requestPostEvent(data: TransientEventPayload): Promise<AxiosResponse<OntimeRundownEntry>> {
+export async function fetchCurrentRundown(): Promise<Rundown> {
+  const res = await axios.get(`${rundownPath}/current`);
+  return res.data;
+}
+
+/**
+ * HTTP request to post new entry
+ */
+export async function postAddEntry(data: TransientEventPayload): Promise<AxiosResponse<OntimeEntry>> {
   return axios.post(rundownPath, data);
 }
 
 /**
- * HTTP request to put new event
+ * HTTP request to edit an entry
  */
-export async function requestPutEvent(data: Partial<OntimeRundownEntry>): Promise<AxiosResponse<OntimeRundownEntry>> {
+export async function putEditEntry(data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
   return axios.put(rundownPath, data);
 }
 
@@ -33,22 +49,22 @@ type BatchEditEntry = {
 };
 
 /**
- * HTTP request to put multiple events
+ * HTTP request to edit multiple events
  */
-export async function requestBatchPutEvents(data: BatchEditEntry): Promise<AxiosResponse<MessageResponse>> {
+export async function putBatchEditEvents(data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
   return axios.put(`${rundownPath}/batch`, data);
 }
 
 export type ReorderEntry = {
-  eventId: string;
-  from: number;
-  to: number;
+  entryId: EntryId;
+  destinationId: EntryId;
+  order: 'before' | 'after' | 'insert';
 };
 
 /**
- * HTTP request to reorder events
+ * HTTP request to reorder an entry
  */
-export async function requestReorderEvent(data: ReorderEntry): Promise<AxiosResponse<OntimeRundownEntry>> {
+export async function patchReorderEntry(data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
   return axios.patch(`${rundownPath}/reorder`, data);
 }
 
@@ -67,15 +83,36 @@ export async function requestEventSwap(data: SwapEntry): Promise<AxiosResponse<M
 /**
  * HTTP request to request application of delay
  */
-export async function requestApplyDelay(eventId: string): Promise<AxiosResponse<MessageResponse>> {
-  return axios.patch(`${rundownPath}/applydelay/${eventId}`);
+export async function requestApplyDelay(delayId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.patch(`${rundownPath}/applydelay/${delayId}`);
 }
 
 /**
- * HTTP request to delete given event
+ * HTTP request for cloning an entry
  */
-export async function requestDelete(eventIds: string[]): Promise<AxiosResponse<MessageResponse>> {
-  return axios.delete(rundownPath, { data: { ids: eventIds } });
+export async function postCloneEntry(entryId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/clone/${entryId}`);
+}
+
+/**
+ * HTTP request for dissolving of a block
+ */
+export async function requestUngroup(blockId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/ungroup/${blockId}`);
+}
+
+/**
+ * HTTP request for grouping a list of entries into a block
+ */
+export async function requestGroupEntries(entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/group`, { ids: entryIds });
+}
+
+/**
+ * HTTP request to delete entries
+ */
+export async function deleteEntries(entryIds: EntryId[]): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(rundownPath, { data: { ids: entryIds } });
 }
 
 /**

apps/client/src/common/api/sheets.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from 'axios';
-import { AuthenticationStatus, CustomFields, OntimeRundown } from 'ontime-types';
+import { AuthenticationStatus, CustomFields, Rundown } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
@@ -54,7 +54,7 @@ export const previewRundown = async (
   sheetId: string,
   options: ImportMap,
 ): Promise<{
-  rundown: OntimeRundown;
+  rundown: Rundown;
   customFields: CustomFields;
 }> => {
   const response = await axios.post(`${sheetsPath}/${sheetId}/read`, { options });

apps/client/src/common/api/utils.ts

@@ -7,7 +7,7 @@ import { addLog } from '../stores/logger';
 import { nowInMillis } from '../utils/time';
 
 /**
- * Utility unrwap a potential axios error
+ * Utility unwrap a potential axios error
  * @param error
  * @returns
  */
@@ -34,7 +34,7 @@ export function maybeAxiosError(error: unknown) {
 }
 
 /**
- * Utility unrwaps a potential axios error and sends to logger
+ * Utility unwraps a potential axios error and sends to logger
  * @param prepend
  * @param error
  */

apps/client/src/common/api/viewSettings.ts

@@ -1,21 +1,15 @@
 import axios from 'axios';
-import { ViewSettings } from 'ontime-types';
+import type { ViewSettings } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+const viewSettingsPath = apiEntryUrl + '/view-settings';
 
-const viewSettingsPath = `${apiEntryUrl}/view-settings`;
-
-/**
- * HTTP request to retrieve view settings
- */
-export async function getView(): Promise<ViewSettings> {
+export async function getViewSettings() {
   const res = await axios.get(viewSettingsPath);
   return res.data;
 }
 
-/**
- * HTTP request to mutate view settings
- */
 export async function postViewSettings(data: ViewSettings) {
-  return axios.post(viewSettingsPath, data);
+  const res = await axios.post(viewSettingsPath, data);
+  return res.data as ViewSettings;
 }

apps/client/src/common/components/buttons/BaseButtonStyles.module.scss

@@ -0,0 +1,140 @@
+.subtle {
+  background: $gray-1050;
+  color: $blue-400;
+  line-height: 1em;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+}
+
+.subtle-white {
+  background: $gray-1050;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    background: $gray-1050;
+  }
+}
+
+.primary {
+  background: $blue-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $blue-600;
+  }
+
+  &:active:not(:disabled) {
+    background: $blue-800;
+    border-color: $blue-900;
+  }
+
+  &:disabled {
+    opacity: $viewer-opacity-disabled;
+  }
+}
+
+.destructive {
+  background: $red-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $red-600;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $red-800;
+    border-color: $red-900;
+  }
+}
+
+.subtle-destructive {
+  background: $gray-1050;
+  color: $red-400;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $red-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+}
+
+.ghosted {
+  background: transparent;
+  color: $blue-500;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    opacity: $opacity-disabled;
+  }
+}
+
+.ghosted-white {
+  background: transparent;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    opacity: $opacity-disabled;
+  }
+}
+
+
+.ghosted-destructive {
+  background: transparent;
+  color: $red-500;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $red-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    opacity: $opacity-disabled;
+  }
+}

apps/client/src/common/components/buttons/Button.module.scss

@@ -0,0 +1,84 @@
+@use '../../../theme/viewerDefs' as *;
+@import './BaseButtonStyles.module.scss';
+
+.baseButton {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+
+  width: fit-content;
+  padding-inline: 1em;
+  white-space: nowrap;
+
+  border: 1px solid transparent;
+  border-radius: $component-border-radius-md;
+
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+
+  &.loading {
+    cursor: wait;
+    .content {
+      opacity: 0;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: inherit;
+}
+
+.loadingOverlay {
+  position: absolute;
+  display: grid;
+  place-content: center;
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+  stroke-dasharray: 8;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.small {
+  height: 1.5rem;
+  font-size: calc(1rem - 3px);
+}
+
+.medium {
+  height: 2rem;
+  font-size: calc(1rem - 2px);
+}
+
+.large {
+  height: 2.5rem;
+  font-weight: 600;
+}
+
+.xlarge {
+  height: 3rem;
+  font-weight: 600;
+}
+
+.fluid {
+  width: 100%;
+}
+

apps/client/src/common/components/buttons/Button.tsx

@@ -0,0 +1,53 @@
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+import { IoEllipseOutline } from 'react-icons/io5';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './Button.module.scss';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'primary'
+    | 'subtle'
+    | 'subtle-white'
+    | 'destructive'
+    | 'subtle-destructive'
+    | 'ghosted'
+    | 'ghosted-white'
+    | 'ghosted-destructive';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  fluid?: boolean;
+  loading?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, children, variant = 'subtle', size = 'medium', fluid, loading, ...buttonProps }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cx([
+          style.baseButton,
+          style[variant],
+          style[size],
+          fluid && style.fluid,
+          loading && style.loading,
+          className,
+        ])}
+        type='button'
+        disabled={loading || buttonProps.disabled}
+        {...buttonProps}
+      >
+        <span className={style.content}>{children}</span>
+        {loading && (
+          <div className={style.loadingOverlay}>
+            <IoEllipseOutline className={style.spinner} />
+          </div>
+        )}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export default Button;

apps/client/src/common/components/buttons/IconButton.module.scss

@@ -1,26 +1,39 @@
-.subtle {
+@use '../../../theme/viewerDefs' as *;
+@import './BaseButtonStyles.module.scss';
+
+.baseIconButton {
   aspect-ratio: 1;
-  height: 2rem;
-  height: 2rem;
   display: grid;
   place-content: center;
 
-  background: $gray-1050;
-  color: $blue-400;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: $component-border-radius-md;
 
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $blue-500;
-  }
-
-  &:active {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
+  cursor: pointer;
 
   &:disabled {
-    background: $gray-1050;
+    opacity: 0.4;
+    cursor: not-allowed;
   }
 }
+
+.small {
+  height: 1.5rem;
+  font-size: calc(1rem - 3px);
+}
+
+.medium {
+  height: 2rem;
+  width: 2rem;
+}
+
+.large {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.xlarge {
+  height: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}

apps/client/src/common/components/buttons/IconButton.tsx

@@ -4,10 +4,32 @@ import { cx } from '../../utils/styleUtils';
 
 import style from './IconButton.module.scss';
 
-export default function IconButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
-  const { className, children, ...buttonProps } = props;
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'primary'
+    | 'subtle'
+    | 'subtle-white'
+    | 'destructive'
+    | 'subtle-destructive'
+    | 'ghosted'
+    | 'ghosted-white'
+    | 'ghosted-destructive';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+}
+
+export default function IconButton({
+  className,
+  children,
+  variant = 'subtle',
+  size = 'medium',
+  ...buttonProps
+}: IconButtonProps) {
   return (
-    <button className={cx([style.subtle, className])} {...buttonProps}>
+    <button
+      className={cx([style.baseIconButton, style[variant], style[size], className])}
+      type='button'
+      {...buttonProps}
+    >
       {children}
     </button>
   );

apps/client/src/common/components/checkbox/Checkbox.module.scss

@@ -0,0 +1,50 @@
+.checkbox {
+  box-sizing: border-box;
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: $component-border-radius-sm;
+
+  &[data-unchecked] {
+    background-color: $gray-1100;
+
+    &:hover:not(:disabled) {
+      background: $gray-1000;
+    }
+    &:active:not(:disabled) {
+      background: $gray-1200;
+    }
+  }
+
+  &[data-checked] {
+    background-color: $blue-500;
+
+    &:hover:not(:disabled) {
+      background: $blue-400;
+    }
+    &:active:not(:disabled) {
+      background: $blue-600;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+}
+
+.indicator {
+  display: flex;
+  color: $ui-white;
+
+  &[data-unchecked] {
+    display: none;
+  }
+}

apps/client/src/common/components/checkbox/Checkbox.tsx

@@ -0,0 +1,14 @@
+import { IoCheckmark } from 'react-icons/io5';
+import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+
+import style from './Checkbox.module.scss';
+
+export default function Checkbox(checkboxProps: BaseCheckbox.Root.Props) {
+  return (
+    <BaseCheckbox.Root className={style.checkbox} {...checkboxProps}>
+      <BaseCheckbox.Indicator className={style.indicator}>
+        <IoCheckmark className={style.icon} />
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  );
+}

apps/client/src/common/components/client-modal/RedirectClientModal.tsx

@@ -1,22 +1,15 @@
 import { useState } from 'react';
-import {
-  IconButton,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  Select,
-} from '@chakra-ui/react';
-import { IoArrowForward } from '@react-icons/all-files/io5/IoArrowForward';
+import { IoArrowForward } from 'react-icons/io5';
 
 import { navigatorConstants } from '../../../viewerConfig';
 import { setClientRemote } from '../../hooks/useSocket';
 import useUrlPresets from '../../hooks-query/useUrlPresets';
+import Button from '../buttons/Button';
 import Info from '../info/Info';
+import Input from '../input/input/Input';
 import AppLink from '../link/app-link/AppLink';
+import Modal from '../modal/Modal';
+import Select from '../select/Select';
 
 import style from './RedirectClientModal.module.scss';
 
@@ -29,8 +22,7 @@ interface RedirectClientModalProps {
   onClose: () => void;
 }
 
-export function RedirectClientModal(props: RedirectClientModalProps) {
-  const { id, isOpen, name, currentPath, origin, onClose } = props;
+export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onClose }: RedirectClientModalProps) {
   const { data } = useUrlPresets();
   const [path, setPath] = useState(currentPath);
   const [selected, setSelected] = useState('/');
@@ -47,13 +39,26 @@ export function RedirectClientModal(props: RedirectClientModalProps) {
 
   const enabledPresets = data.filter((preset) => preset.enabled);
 
+  const viewOptions = [
+    ...navigatorConstants.map((view) => ({
+      value: `/${view.url}`,
+      label: view.label,
+    })),
+    ...enabledPresets.map((preset) => ({
+      value: preset.pathAndParams,
+      label: `Preset: ${preset.alias}`,
+    })),
+  ];
+
   return (
-    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
-      <ModalOverlay />
-      <ModalContent maxWidth='max(480px, 35vw)'>
-        <ModalHeader>Redirect: {name}</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      showCloseButton
+      showBackdrop
+      title={`Redirect: ${name}`}
+      bodyElements={
+        <>
           <Info>
             Remotely redirect the client to a different URL. <br />
             Either by selecting a URL Preset or entering a custom path.
@@ -65,36 +70,21 @@ export function RedirectClientModal(props: RedirectClientModalProps) {
             <span className={style.label}>Select View or URL Preset</span>
             <div className={style.textEntry}>
               <Select
-                size='md'
-                variant='ontime'
-                isDisabled={enabledPresets.length === 0}
-                onChange={(event) => setSelected(event.target.value)}
-              >
-                <option value='/'>Select view or preset</option>
-                {navigatorConstants.map((view) => {
-                  return (
-                    <option key={view.url} value={`/${view.url}`}>
-                      {view.label}
-                    </option>
-                  );
-                })}
-                {enabledPresets.map((preset) => {
-                  return (
-                    <option key={preset.pathAndParams} value={preset.pathAndParams}>
-                      {`Preset: ${preset.alias}`}
-                    </option>
-                  );
-                })}
-              </Select>
-              <IconButton
-                variant='ontime-filled'
-                size='md'
+                fluid
+                options={viewOptions}
+                defaultValue={viewOptions[0].value}
+                onValueChange={(value) => setSelected(value)}
+                disabled={enabledPresets.length === 0}
+              />
+              <Button
+                variant='primary'
                 aria-label='Redirect to preset'
                 className={style.redirect}
-                icon={<IoArrowForward />}
-                isDisabled={enabledPresets.length === 0 || selected === '/'}
+                disabled={enabledPresets.length === 0 || selected === '/'}
                 onClick={() => handleRedirect(selected)}
-              />
+              >
+                Redirect <IoArrowForward />
+              </Button>
             </div>
           </div>
           <div className={style.inlineEntry}>
@@ -102,25 +92,24 @@ export function RedirectClientModal(props: RedirectClientModalProps) {
             <label className={style.textEntry}>
               {origin}
               <Input
-                variant='ontime-filled'
-                size='md'
                 placeholder='eg. /minimal?key=0000ffff'
+                fluid
                 value={path}
                 onChange={(event) => setPath(event.target.value)}
               />
             </label>
-            <IconButton
-              variant='ontime-filled'
-              size='md'
+            <Button
+              variant='primary'
               aria-label='Redirect'
-              isDisabled={path === currentPath || path === ''}
+              disabled={path === currentPath || path === ''}
               className={style.redirect}
-              icon={<IoArrowForward />}
               onClick={() => handleRedirect(path)}
-            />
+            >
+              Redirect <IoArrowForward />
+            </Button>
           </div>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+        </>
+      }
+    />
   );
 }

apps/client/src/common/components/client-modal/RenameClientModal.tsx

@@ -1,17 +1,9 @@
 import { useState } from 'react';
-import {
-  Button,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from '@chakra-ui/react';
 
+import Button from '../../../common/components/buttons/Button';
 import { setClientRemote } from '../../hooks/useSocket';
+import Dialog from '../dialog/Dialog';
+import Input from '../input/input/Input';
 
 interface RenameClientModalProps {
   id: string;
@@ -20,8 +12,7 @@ interface RenameClientModalProps {
   onClose: () => void;
 }
 
-export function RenameClientModal(props: RenameClientModalProps) {
-  const { id, name: currentName = '', isOpen, onClose } = props;
+export function RenameClientModal({ id, name: currentName = '', isOpen, onClose }: RenameClientModalProps) {
   const [name, setName] = useState(currentName);
 
   const { setClientName } = setClientRemote;
@@ -36,29 +27,24 @@ export function RenameClientModal(props: RenameClientModalProps) {
   const canSubmit = name !== currentName && name !== '';
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Rename: {currentName}</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <Input
-            variant='ontime-filled'
-            size='md'
-            placeholder='new name'
-            value={name}
-            onChange={(event) => setName(event.target.value)}
-          />
-        </ModalBody>
-        <ModalFooter>
-          <Button size='md' variant='ontime-subtle' onClick={onClose}>
+    <Dialog
+      isOpen={isOpen}
+      title={`Rename Client: ${currentName}`}
+      showCloseButton
+      onClose={onClose}
+      bodyElements={
+        <Input height='large' placeholder='New name' value={name} onChange={(event) => setName(event.target.value)} />
+      }
+      footerElements={
+        <>
+          <Button variant='subtle' size='large' onClick={onClose}>
             Cancel
           </Button>
-          <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
+          <Button variant='primary' size='large' onClick={handleRename} disabled={!canSubmit}>
             Submit
           </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </>
+      }
+    />
   );
 }

apps/client/src/common/components/context-menu/ContextMenu.tsx

@@ -2,8 +2,8 @@
 // https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
 
 import { ReactElement } from 'react';
+import { IconType } from 'react-icons';
 import { Menu, MenuButton, MenuGroup, MenuList } from '@chakra-ui/react';
-import { IconType } from '@react-icons/all-files';
 import { create } from 'zustand';
 
 import { ContextMenuOption } from './ContextMenuOption';
@@ -23,7 +23,7 @@ export type OptionWithoutGroup = {
   withDivider?: boolean;
 };
 
-export type OptionWithGroup = {
+type OptionWithGroup = {
   label: string;
   group: Omit<OptionWithoutGroup, 'isGroup'>[];
 };

apps/client/src/common/components/copy-tag/CopyTag.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren, useState } from 'react';
+import { IoCheckmark } from 'react-icons/io5';
+import { IoCopy } from 'react-icons/io5';
 import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
-import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
-import { IoCopy } from '@react-icons/all-files/io5/IoCopy';
 
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { Size } from '../../models/Util.type';

apps/client/src/common/components/delay-indicator/DelayIndicator.tsx

@@ -1,6 +1,5 @@
+import { IoChevronDown, IoChevronUp } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
-import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
-import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
 
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { millisToDelayString } from '../../utils/dateConfig';

apps/client/src/common/components/dialog/Dialog.module.scss

@@ -0,0 +1,57 @@
+.dialog {
+  position: fixed;
+  top: 10%;
+  left: 50%;
+
+  z-index: $zindex-dialog;
+  transform: translateX(-50%);
+
+  padding-inline: 1rem;
+  min-width: min(420px, 90vw);
+
+  background-color: $gray-1250;
+  color: $ui-white;
+  border-radius: 3px;
+  box-shadow: $box-shadow-l1;
+  border: 1px solid $gray-1100;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $zindex-backdrop;
+  background-color: $backdrop-color;
+  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: 600;
+  padding-block: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  max-height: min(80vh, 600px);
+  overflow-y: auto;
+}
+
+.footer {
+  padding-block: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 1rem;
+}

apps/client/src/common/components/dialog/Dialog.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import { IoClose } from 'react-icons/io5';
+import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+
+import IconButton from '../buttons/IconButton';
+
+import style from './Dialog.module.scss';
+
+interface DialogProps {
+  isOpen: boolean;
+  title: string;
+  showCloseButton?: boolean;
+  showBackdrop?: boolean;
+  bodyElements: ReactNode;
+  footerElements: ReactNode;
+  onClose: () => void;
+}
+
+export default function Dialog({
+  isOpen,
+  title,
+  showCloseButton,
+  showBackdrop,
+  bodyElements,
+  footerElements,
+  onClose,
+}: DialogProps) {
+  return (
+    <BaseDialog.Root
+      open={isOpen}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose();
+      }}
+    >
+      <BaseDialog.Portal>
+        {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
+        <BaseDialog.Popup className={style.dialog}>
+          <div className={style.title}>
+            {title}
+            {showCloseButton && (
+              <IconButton variant='subtle-white' onClick={onClose}>
+                <IoClose />
+              </IconButton>
+            )}
+          </div>
+          <div className={style.body}>{bodyElements}</div>
+          <div className={style.footer}>{footerElements}</div>
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  );
+}

apps/client/src/common/components/editor-utils/EditorUtils.module.scss

@@ -40,3 +40,17 @@
   margin-bottom: $element-inner-spacing;
   max-width: max-content; // prevent label from taking entire row
 }
+
+.separator {
+  background-color: $border-color-ondark;
+
+  &.horizontal {
+    width: 100%;
+    height: 1px;
+  }
+
+  &.vertical {
+    width: 1px;
+    height: 0.75em;  
+  }
+}

apps/client/src/common/components/editor-utils/EditorUtils.tsx

@@ -1,8 +1,8 @@
 import type { HTMLAttributes, LabelHTMLAttributes } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-import { type IconBaseProps } from '@react-icons/all-files/lib';
+import { IconBaseProps } from 'react-icons';
+import { IoArrowUp } from 'react-icons/io5';
 
-import { cx } from '../../../common/utils/styleUtils';
+import { cx } from '../../utils/styleUtils';
 
 import style from './EditorUtils.module.scss';
 
@@ -27,3 +27,11 @@ export function Label({ children, className, ...elementProps }: LabelHTMLAttribu
     </label>
   );
 }
+
+interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export function Separator({ className, orientation = 'vertical', ...elementProps }: SeparatorProps) {
+  return <div className={cx([style.separator, style[orientation], className])} {...elementProps} />;
+}

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 // skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
 
-import { runtimeStore } from '@/common/stores/runtime';
-import { hasConnected, reconnectAttempts, shouldReconnect } from '@/common/utils/socket';
+import { hasConnected, reconnectAttempts } from '../../../common/utils/socket';
+import { runtimeStore } from '../../stores/runtime';
 
 import style from './ErrorBoundary.module.scss';
 
@@ -26,17 +26,22 @@ class ErrorBoundary extends React.Component {
       error,
       errorInfo: info,
     });
+    this.reportContent = `${error} ${info.componentStack}`;
+
+    const appState = runtimeStore.getState();
+    if (appState.ping < 0) {
+      return;
+    }
 
     Sentry.withScope((scope) => {
       scope.setExtras({
         error,
-        store: runtimeStore.getState(),
-        hasSocket: { hasConnected, shouldReconnect, reconnectAttempts },
+        store: appState,
+        hasSocket: { hasConnected, reconnectAttempts },
       });
       const eventId = Sentry.captureException(error);
       this.setState({ eventId, info });
     });
-    this.reportContent = `${error} ${info.componentStack}`;
   }
 
   render() {

apps/client/src/common/components/icons/RotatedLink.tsx

@@ -0,0 +1,6 @@
+import { IconBaseProps } from 'react-icons';
+import { IoLink } from 'react-icons/io5';
+
+export default function RotatedLink(linkProps: IconBaseProps) {
+  return <IoLink style={{ transform: 'rotate(-45deg)' }} {...linkProps} />;
+}

apps/client/src/common/components/identify-overlay/IdentifyOverlay.module.scss

@@ -15,7 +15,7 @@
   display: grid;
   place-content: center;
   text-align: center;
-  z-index: 100;
+  z-index: $zindex-modal;
   cursor: pointer;
 }
 

apps/client/src/common/components/info/Info.module.scss

@@ -7,15 +7,29 @@
   border-radius: 3px;
   font-size: $text-body-size;
   padding: 1rem;
-
-  .content {
-    color: $gray-200;
-  }
+  color: $gray-200;
 
   svg {
     min-width: 1.5rem;
     align-self: start;
     font-size: 1.5rem;
+  }
+}
+
+.info {
+  svg {
     color: $info-blue;
   }
 }
+
+.warning {
+  svg {
+    color: $orange-500;
+  }
+}
+
+.error {
+  svg {
+    color: $red-500;
+  }
+}

apps/client/src/common/components/info/Info.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { IoAlertCircle } from '@react-icons/all-files/io5/IoAlertCircle';
+import { IoAlertCircle, IoWarning } from 'react-icons/io5';
 
 import { cx } from '../../utils/styleUtils';
 
@@ -7,14 +7,15 @@ import style from './Info.module.scss';
 
 interface InfoProps {
   className?: string;
+  type?: 'info' | 'warning' | 'error';
 }
 
-export default function Info(props: PropsWithChildren<InfoProps>) {
-  const { className, children } = props;
-
+export default function Info({ className, type = 'info', children }: PropsWithChildren<InfoProps>) {
   return (
-    <div className={cx([style.infoLabel, className])}>
-      <IoAlertCircle />
+    <div className={cx([style.infoLabel, style[type], className])}>
+      {type === 'info' && <IoAlertCircle />}
+      {type === 'warning' && <IoWarning />}
+      {type === 'error' && <IoWarning />}
       <div>{children}</div>
     </div>
   );

apps/client/src/common/components/input/colour-input/Swatch.tsx

@@ -1,4 +1,4 @@
-import { IoBan } from '@react-icons/all-files/io5/IoBan';
+import { IoBan } from 'react-icons/io5';
 
 import { cx } from '../../../utils/styleUtils';
 

apps/client/src/common/components/input/colour-input/SwatchPicker.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
-import { IoEyedrop } from '@react-icons/all-files/io5/IoEyedrop';
+import { IoEyedrop } from 'react-icons/io5';
 import { ViewSettings } from 'ontime-types';
 
 import { debounce } from '../../../utils/debounce';

apps/client/src/common/components/input/delay-input/DelayInput.module.scss

@@ -9,7 +9,7 @@ $input-font-size: 15px;
 
   .inputField {
     font-size: $input-font-size;
-    letter-spacing: 1px;
+    letter-spacing: 0.5px;
     max-width: 7em;
     padding-left: 16px;
     color: $ontime-delay-text

apps/client/src/common/components/input/delay-input/DelayInput.tsx

@@ -2,7 +2,7 @@ import { KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { Input, Radio, RadioGroup } from '@chakra-ui/react';
 import { millisToString, parseUserTime } from 'ontime-utils';
 
-import { useEventAction } from '../../../hooks/useEventAction';
+import { useEntryActions } from '../../../hooks/useEntryAction';
 
 import style from './DelayInput.module.scss';
 
@@ -13,7 +13,7 @@ interface DelayInputProps {
 
 export default function DelayInput(props: DelayInputProps) {
   const { eventId, duration } = props;
-  const { updateEvent } = useEventAction();
+  const { updateEntry } = useEntryActions();
 
   const [value, setValue] = useState<string>('');
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -54,7 +54,7 @@ export default function DelayInput(props: DelayInputProps) {
   };
 
   const submitChange = (value: number) => {
-    updateEvent({
+    updateEntry({
       id: eventId,
       duration: value,
     });

apps/client/src/common/components/input/input/Input.module.scss

@@ -0,0 +1,52 @@
+.input {
+  box-sizing: border-box;
+
+  font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  border-radius: $component-border-radius-md;
+  border: 1px solid transparent;
+
+  padding-inline: 0.5em;
+  outline: none;
+
+  &:hover:not(:disabled) {
+    background-color: $gray-1100;
+  }
+
+  &:focus:not(:read-only) {
+    background-color: $gray-1000;
+    border: 1px solid $blue-500;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
+  }
+}
+
+.subtle {
+  background-color: $gray-1200;
+}
+
+.ghosted {
+  background-color: transparent;
+  padding: 0;
+}
+
+.medium {
+  height: 2rem;
+}
+
+.large {
+  height: 2.5rem;
+}
+
+.fluid {
+  width: 100%;
+}

apps/client/src/common/components/input/input/Input.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, InputHTMLAttributes } from 'react';
+
+import { cx } from '../../../utils/styleUtils';
+
+import style from './Input.module.scss';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  variant?: 'subtle' | 'ghosted';
+  height?: 'medium' | 'large';
+  fluid?: boolean;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, variant = 'subtle', height = 'medium', fluid, ...inputProps },
+  ref,
+) {
+  return (
+    <input
+      ref={ref}
+      type='text'
+      autoCorrect='off'
+      autoComplete='off'
+      spellCheck='false'
+      className={cx([style.input, style[variant], style[height], fluid && style.fluid, className])}
+      {...inputProps}
+    />
+  );
+});
+
+export default Input;

apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getHotkeyHandler, HotkeyItem } from '@mantine/hooks';
 
 interface UseReactiveTextInputReturn {
@@ -17,9 +17,12 @@ export default function useReactiveTextInput(
     submitOnCtrlEnter?: boolean;
     onCancelUpdate?: () => void;
     allowSubmitSameValue?: boolean;
+    allowKeyboardNavigation?: boolean;
   },
 ): UseReactiveTextInputReturn {
   const [text, setText] = useState<string>(initialText);
+  // track whether we are submitting via a submit key (eg enter) and avoid submitting again on blur
+  const isKeyboardSubmitting = useRef(false);
 
   useEffect(() => {
     if (typeof initialText === 'undefined') {
@@ -58,7 +61,14 @@ export default function useReactiveTextInput(
           setText(cleanVal);
         }
       }
-      setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before bluring
+
+      setTimeout(() => {
+        if (options?.allowKeyboardNavigation) {
+          ref.current?.parentElement?.focus(); // Focus on parent element to continue keyboard navigation
+        } else {
+          ref.current?.blur();
+        }
+      }); // Immediate timeout to ensure text is set before blurring
     },
     [initialText, options, ref, submitCallback],
   );
@@ -70,27 +80,73 @@ export default function useReactiveTextInput(
   const handleEscape = useCallback(() => {
     // No need to update if it hasn't changed
     setText(initialText);
+    // force the text to be the initial value
+    if (ref.current) {
+      ref.current.value = initialText;
+    }
     options?.onCancelUpdate?.();
-    setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before bluring
+    setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before blurring
   }, [initialText, options, ref]);
 
   const keyHandler = useMemo(() => {
-    const hotKeys: HotkeyItem[] = [['Escape', handleEscape, { preventDefault: true }]];
+    const hotKeys: HotkeyItem[] = [
+      [
+        'Escape',
+        (event) => {
+          event.preventDefault();
+          handleEscape();
+        },
+        { preventDefault: true },
+      ],
+    ];
 
     if (options?.submitOnEnter) {
-      hotKeys.push(['Enter', () => handleSubmit(text)]);
+      hotKeys.push(['Enter', () => {
+        isKeyboardSubmitting.current = true;
+        handleSubmit(text);
+        // clear flag after blur has been processed
+        setTimeout(() => {
+          isKeyboardSubmitting.current = false;
+        }, 0);
+      }]);
     }
 
     if (options?.submitOnCtrlEnter) {
-      hotKeys.push(['mod + Enter', () => handleSubmit(text)]);
+      hotKeys.push(['mod + Enter', () => {
+        isKeyboardSubmitting.current = true;
+        handleSubmit(text);
+        // clear flag after blur has been processed
+        setTimeout(() => {
+          isKeyboardSubmitting.current = false;
+        }, 0);
+      }]);
     }
-    return getHotkeyHandler(hotKeys);
+
+    const hotKeyHandler = getHotkeyHandler(hotKeys);
+
+    return (event: KeyboardEvent<HTMLElement>) => {
+      // allow moving in input field with arrow keys
+      if (
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowRight' ||
+        event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown'
+      ) {
+        event.stopPropagation();
+      }
+
+      hotKeyHandler(event);
+    };
   }, [handleEscape, handleSubmit, options?.submitOnCtrlEnter, options?.submitOnEnter, text]);
 
   return {
     value: text,
     onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
-    onBlur: (event: ChangeEvent) => handleSubmit((event.target as HTMLInputElement).value),
+    onBlur: (event: ChangeEvent) => {
+      if (!isKeyboardSubmitting.current) {
+        handleSubmit((event.target as HTMLInputElement).value);
+      }
+    },
     onKeyDown: keyHandler,
   };
 }

apps/client/src/common/components/input/textarea/Textarea.module.scss

@@ -0,0 +1,47 @@
+@use '../../../../theme/viewerDefs' as *;
+
+.textarea {
+  box-sizing: border-box;
+
+  display: block;
+  font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  border-radius: $component-border-radius-md;
+  border: 1px solid transparent;
+
+  padding-inline: 0.5em;
+  outline: none;
+
+  &:hover:not(:disabled) {
+    background-color: $gray-1100;
+  }
+
+  &:focus:not(:read-only) {
+    background-color: $gray-1000;
+    border: 1px solid $blue-500;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
+  }
+}
+
+.subtle {
+  background-color: $gray-1200;
+}
+
+.ghosted {
+  background-color: transparent;
+  padding: 0;
+}
+
+.fluid {
+  width: 100%;
+}

apps/client/src/common/components/input/textarea/Textarea.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, TextareaHTMLAttributes } from 'react';
+
+import { cx } from '../../../utils/styleUtils';
+
+import style from './Textarea.module.scss';
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  variant?: 'subtle' | 'ghosted';
+  fluid?: boolean;
+  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function TextArea(
+  { className, variant = 'subtle', fluid, rows = 5, resize = 'none', style: customStyle, ...textareaProps },
+  ref,
+) {
+  return (
+    <textarea
+      ref={ref}
+      autoCorrect='off'
+      autoComplete='off'
+      spellCheck='false'
+      rows={rows}
+      style={{ ...customStyle, resize }}
+      className={cx([style.textarea, style[variant], fluid && style.fluid, className])}
+      {...textareaProps}
+    />
+  );
+});
+
+export default Textarea;

apps/client/src/common/components/input/time-input/NullableTimeInput.tsx

@@ -0,0 +1,135 @@
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { millisToString, parseUserTime } from 'ontime-utils';
+
+import { cx } from '../../../utils/styleUtils';
+import Input from '../input/Input';
+
+import style from './TimeInput.module.scss';
+
+interface NullableTimeInputProps<T extends string> {
+  id?: T;
+  name: T;
+  submitHandler: (field: T, value: string) => void;
+  time?: number | null;
+  emptyDisplay: string;
+  placeholder?: string;
+  disabled?: boolean;
+  align?: 'left' | 'center';
+  className?: string;
+}
+
+export default function NullableTimeInput<T extends string>(props: NullableTimeInputProps<T>) {
+  const { id, name, submitHandler, time, emptyDisplay, placeholder, disabled, align = 'center', className } = props;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [value, setValue] = useState<string>('');
+  const ignoreChange = useRef(false);
+
+  /**
+   * @description Resets input value to given
+   */
+  const resetValue = useCallback(() => {
+    if (typeof time !== 'number' || isNaN(time)) {
+      setValue(emptyDisplay);
+    } else {
+      setValue(millisToString(time));
+    }
+  }, [emptyDisplay, time]);
+
+  /**
+   * @description Selects input text on focus
+   */
+  const handleFocus = useCallback(() => {
+    inputRef.current?.select();
+  }, []);
+
+  /**
+   * @description Submit handler
+   * @param {string} newValue
+   */
+  const handleSubmit = useCallback(
+    (newValue: string) => {
+      // skip if user deleted and time is already null
+      if (newValue === '' && time === null) {
+        return false;
+      }
+
+      // skip if the value evaluates to the same thing
+      const valueInMillis = parseUserTime(newValue);
+      if (valueInMillis === time) {
+        return false;
+      }
+
+      submitHandler(name, newValue);
+      return true;
+    },
+    [name, submitHandler, time],
+  );
+
+  /**
+   * @description Prepare time fields
+   * @param {string} value string to be parsed
+   */
+  const validateAndSubmit = useCallback(
+    (newValue: string) => {
+      const success = handleSubmit(newValue);
+      if (!success) {
+        resetValue();
+      }
+    },
+    [handleSubmit, resetValue],
+  );
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {KeyboardEvent} event
+   */
+  const onKeyDownHandler = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        inputRef.current?.blur();
+      }
+      if (event.key === 'Escape') {
+        ignoreChange.current = true;
+        inputRef.current?.blur();
+        resetValue();
+      }
+    },
+    [resetValue],
+  );
+
+  const onBlurHandler = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (ignoreChange.current) {
+        ignoreChange.current = false;
+        return;
+      }
+      validateAndSubmit((event.target as HTMLInputElement).value);
+    },
+    [validateAndSubmit],
+  );
+
+  useEffect(() => {
+    resetValue();
+  }, [resetValue]);
+
+  return (
+    <Input
+      id={id}
+      disabled={disabled}
+      ref={inputRef}
+      data-testid={`time-input-${name}`}
+      className={cx([style.timeInput, className])}
+      placeholder={placeholder}
+      onFocus={handleFocus}
+      onChange={(event) => setValue(event.target.value)}
+      onBlur={onBlurHandler}
+      onKeyDown={onKeyDownHandler}
+      value={value}
+      maxLength={8}
+      autoComplete='off'
+      style={{
+        textAlign: align,
+      }}
+    />
+  );
+}

apps/client/src/common/components/input/time-input/TimeInput.module.scss

@@ -1,4 +1,6 @@
 .timeInput {
-    letter-spacing: 1px;
-    width: 6.5em;
+  width: 100%;
+  max-width: 7.5em;
+  letter-spacing: 0.5px;
+  font-variant-numeric: tabular-nums;
 }

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -1,23 +1,24 @@
 import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@chakra-ui/react';
 import { millisToString, parseUserTime } from 'ontime-utils';
 
-import { useEmitLog } from '../../../stores/logger';
+import { cx } from '../../../utils/styleUtils';
+import Input from '../input/Input';
+
+import style from './TimeInput.module.scss';
 
 interface TimeInputProps<T extends string> {
   id?: T;
   name: T;
   submitHandler: (field: T, value: string) => void;
   time?: number;
-  placeholder: string;
+  placeholder?: string;
   disabled?: boolean;
   align?: 'left' | 'center';
   className?: string;
 }
 
 export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
-  const { id, name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
-  const { emitError } = useEmitLog();
+  const { id, name, submitHandler, time, placeholder, disabled, align = 'center', className } = props;
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
   const ignoreChange = useRef(false);
@@ -26,13 +27,12 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
    * @description Resets input value to given
    */
   const resetValue = useCallback(() => {
-    try {
+    if (typeof time !== 'number' || isNaN(time)) {
+      setValue('00:00:00');
+    } else {
       setValue(millisToString(time));
-    } catch (error) {
-      setValue(millisToString(0));
-      emitError(`Unable to parse time ${time}: ${error}`);
     }
-  }, [emitError, time]);
+  }, [time]);
 
   /**
    * @description Selects input text on focus
@@ -113,32 +113,27 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
   );
 
   useEffect(() => {
-    if (time == null) return;
     resetValue();
-  }, [resetValue, time]);
+  }, [resetValue]);
 
   return (
     <Input
       id={id}
       disabled={disabled}
-      size='sm'
       ref={inputRef}
       data-testid={`time-input-${name}`}
-      className={className}
-      fontSize='1rem'
-      type='text'
+      className={cx([style.timeInput, className])}
       placeholder={placeholder}
-      variant='ontime-filled'
       onFocus={handleFocus}
       onChange={(event) => setValue(event.target.value)}
       onBlur={onBlurHandler}
       onKeyDown={onKeyDownHandler}
       value={value}
       maxLength={8}
-      maxWidth='7.5em'
-      letterSpacing='1px'
       autoComplete='off'
-      textAlign={align}
+      style={{
+        textAlign: align,
+      }}
     />
   );
 }

apps/client/src/common/components/link/app-link/AppLink.module.scss

@@ -3,8 +3,9 @@
   font-size: $text-body-size;
   text-decoration: underline;
   text-underline-offset: 2px;
+  color: $blue-400;
 
   &:hover {
-    color: $blue-400;
+    color: $blue-500;
   }
 }

apps/client/src/common/components/link/app-link/AppLink.tsx

@@ -1,12 +1,9 @@
 import { type PropsWithChildren } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { cx } from '../../../utils/styleUtils';
-
 import style from './AppLink.module.scss';
 
 interface AppLinkProps {
-  className?: string;
   search: string;
 }
 
@@ -15,13 +12,13 @@ interface AppLinkProps {
  * Handles the path to respect Ontime Clouds base URL
  */
 export default function AppLink(props: PropsWithChildren<AppLinkProps>) {
-  const { className, search, children } = props;
+  const { search, children } = props;
   const navigate = useNavigate();
 
   const handleClick = () => navigate({ search });
 
   return (
-    <button onClick={handleClick} className={cx([style.link, className])}>
+    <button onClick={handleClick} className={style.link}>
       {children}
     </button>
   );

apps/client/src/common/components/link/external-link/ExternalLink.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
-import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline';
+import { IoOpenOutline } from 'react-icons/io5';
 
 import { openLink } from '../../../utils/linkUtils';
 import { cx } from '../../../utils/styleUtils';

apps/client/src/common/components/loader-overlay/LoaderOverlay.module.scss

@@ -1,45 +0,0 @@
-$loader-size: 4rem;
-
-.overlay {
-  position: absolute;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  display: grid;
-  place-content: center;
-  background-color: $black-10;
-  backdrop-filter: blur(5px);
-}
-
-
-.loader {
-  width: $loader-size;
-  height: $loader-size;
-  background: $blue-500;
-  display: inline-block;
-  border-radius: 50%;
-  box-sizing: border-box;
-  animation: animloader 1s ease-in infinite;
-}
-
-@keyframes animloader {
-  0% {
-    transform: scale(0);
-    opacity: 0.6;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-
-@keyframes animloader {
-  0% {
-    transform: scale(0);
-    opacity: 0.6;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}

apps/client/src/common/components/loader-overlay/LoaderOverlay.tsx

@@ -1,9 +0,0 @@
-import style from './LoaderOverlay.module.scss';
-
-export default function LoaderOverlay() {
-  return (
-    <div className={style.overlay}>
-      <span className={style.loader} />
-    </div>
-  );
-}

apps/client/src/common/components/modal/Modal.module.scss

@@ -0,0 +1,56 @@
+.modal {
+  position: fixed;
+  top: 10vh;
+  left: 50%;
+  transform: translateX(-50%);
+  
+  padding-inline: 1rem;
+  min-width: min(680px, 90vw);
+  min-height: min(200px, 10vh);
+  max-width: min(680px, 90vw);
+
+  background-color: $gray-1250;
+  color: $ui-white;
+  border-radius: 3px;
+  box-shadow: $box-shadow-l1;
+  border: 1px solid $gray-1100;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: $backdrop-color;
+  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: 600;
+  padding-block: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.footer {
+  padding-block: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 1rem;
+}

apps/client/src/common/components/modal/Modal.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+import { IoClose } from 'react-icons/io5';
+import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+
+import IconButton from '../buttons/IconButton';
+
+import style from './Modal.module.scss';
+
+interface ModalProps {
+  isOpen: boolean;
+  title?: string;
+  showCloseButton?: boolean;
+  showBackdrop?: boolean;
+  bodyElements: ReactNode;
+  footerElements?: ReactNode;
+  onClose: () => void;
+}
+
+export default function Modal({
+  isOpen,
+  title,
+  showCloseButton,
+  showBackdrop,
+  bodyElements,
+  footerElements,
+  onClose,
+}: ModalProps) {
+  return (
+    <BaseDialog.Root
+      open={isOpen}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose();
+      }}
+      dismissible={false}
+    >
+      <BaseDialog.Portal>
+        {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
+        <BaseDialog.Popup className={style.modal}>
+          <div className={style.title}>
+            {title}
+            {showCloseButton && (
+              <IconButton variant='subtle-white' onClick={onClose}>
+                <IoClose />
+              </IconButton>
+            )}
+          </div>
+          <div className={style.body}>{bodyElements}</div>
+          <div className={style.footer}>{footerElements}</div>
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  );
+}

apps/client/src/common/components/navigation-menu/FloatingNavigation.tsx

@@ -1,38 +0,0 @@
-import { IoApps } from '@react-icons/all-files/io5/IoApps';
-import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
-
-import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
-import { cx } from '../../utils/styleUtils';
-
-import style from './NavigationMenu.module.scss';
-
-interface FloatingNavigationProps {
-  toggleMenu: () => void;
-  toggleSettings: () => void;
-}
-
-export default function FloatingNavigation(props: FloatingNavigationProps) {
-  const { toggleMenu, toggleSettings } = props;
-  const isButtonShown = useFadeOutOnInactivity();
-
-  return (
-    <div className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}>
-      <button
-        onClick={toggleMenu}
-        aria-label='toggle menu'
-        className={style.navButton}
-        data-testid='navigation__toggle-menu'
-      >
-        <IoApps />
-      </button>
-      <button
-        className={style.button}
-        onClick={toggleSettings}
-        aria-label='toggle settings'
-        data-testid='navigation__toggle-settings'
-      >
-        <IoSettingsOutline />
-      </button>
-    </div>
-  );
-}

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -1,118 +1,68 @@
-@use '../../../theme/mixins' as *;
-
-$menu-hover-bg: $gray-1350;
-$menu-focus-bg: $gray-1300;
-
-$icon-color: $ui-white;
-$button-bg: $gray-1050;
-$button-size: 3rem;
-
-.fadeable {
-  opacity: 1;
-
-  transition-property: opacity;
-  transition-duration: 0.3s;
-
-  &.hidden {
-    opacity: 0;
-  }
-}
-
-.lockIcon {
-  font-size: 1.5rem;
-  color: $active-indicator;
-  padding: 0.5em;
-
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 12;
-}
-
-.buttonContainer {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1rem;
-  padding: 0.5em;
-
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 12;
-}
-
-.button {
-  font-size: 1.5rem;
-  color: $icon-color;
-  background-color: $button-bg;
-  width: $button-size;
-  height: $button-size;
-  display: grid;
-  place-content: center;
-  border-radius: 3px;
-}
-
-.navButton {
-  @extend .button;
-  z-index: 3;
-}
-
-.link {
-  @include action-link;
-  padding: 0.75rem 1.5rem;
-  gap: 0.5rem;
-  width: 100%;
-  cursor: pointer;
-
-  &:hover {
-    background-color: $menu-hover-bg;
-  }
-
-  &:active {
-    background-color: $border-color-ondark;
-  }
-
-  &:focus {
-    outline: none;
-    background-color: $menu-focus-bg;
-    border-left: 2px solid $action-text-color;
-  }
-
-  &.current {
-    background-color: $menu-hover-bg;
-    border-left: 4px solid $action-text-color;
-  }
-}
-
-.linkIcon {
-  margin-left: auto;
-  @include rotate-fourty-five;
-}
-
 .separator {
   border-color: $border-color-ondark;
 }
 
-.sectionHeader {
-  font-size: calc(1rem - 2px);
-  margin-left: 1rem;
-  color: $gray-700;
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $zindex-backdrop;
+  background-color: $backdrop-color;
+  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
 }
 
-.bottom {
-  margin-top: auto;
-  margin-bottom: 1rem;
-}
+.drawer {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: $zindex-dialog;
+
+  width: 22rem;
+  height: 100vh;
 
-.interfaces {
-  padding: 0.5rem 1rem;
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  flex-direction: column;
+  padding-block: 1rem;
+
+  background-color: $gray-1250;
+  color: $ui-white;
+  border-right: 1px solid $gray-1100;
+
+  &[data-open] {
+    transform: translateX(0%);
+    transition: transform 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateX(-100%);
+    transition: transform 500ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  }
+
+  // take the whole screen in mobile devices
+  @media (max-width: $min-tablet) {
+    width: 100vw;
+  }
 }
 
-.goIcon {
-  @include rotate-fourty-five;
-  margin-left: 0.25rem;
-  margin-bottom: 0.25rem;
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 3.5rem;
+  padding-inline: 1.5rem;
+
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
 }

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -1,33 +1,20 @@
-import { memo, PropsWithChildren } from 'react';
-import { createPortal } from 'react-dom';
-import { Link, useLocation } from 'react-router-dom';
-import {
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerHeader,
-  DrawerOverlay,
-  useDisclosure,
-} from '@chakra-ui/react';
-import { useFullscreen } from '@mantine/hooks';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-import { IoContract } from '@react-icons/all-files/io5/IoContract';
-import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
-import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
-import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
+import { memo } from 'react';
+import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
+import { useLocation } from 'react-router-dom';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { useDisclosure, useFullscreen } from '@mantine/hooks';
 
 import { isLocalhost } from '../../../externals';
 import { navigatorConstants } from '../../../viewerConfig';
-import { useElectronEvent } from '../../hooks/useElectronEvent';
-import useInfo from '../../hooks-query/useInfo';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
-import { isKeyEnter } from '../../utils/keyEvent';
-import { handleLinks, linkToOtherHost, openLink } from '../../utils/linkUtils';
-import { cx } from '../../utils/styleUtils';
+import IconButton from '../buttons/IconButton';
 import { RenameClientModal } from '../client-modal/RenameClientModal';
-import CopyTag from '../copy-tag/CopyTag';
+
+import ClientLink from './client-link/ClientLink';
+import EditorNavigation from './editor-navigation/EditorNavigation';
+import NavigationMenuItem from './navigation-menu-item/NavigationMenuItem';
+import OtherAddresses from './other-addresses/OtherAddresses';
 
 import style from './NavigationMenu.module.scss';
 
@@ -36,74 +23,49 @@ interface NavigationMenuProps {
   onClose: () => void;
 }
 
-function NavigationMenu(props: NavigationMenuProps) {
-  const { isOpen, onClose } = props;
-
+export default memo(NavigationMenu);
+function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
   const id = useClientStore((store) => store.id);
   const name = useClientStore((store) => store.name);
 
-  const { isOpen: isOpenRename, onOpen: onRenameOpen, onClose: onCloseRename } = useDisclosure();
+  const [isRenameOpen, handlers] = useDisclosure(false);
   const { fullscreen, toggle } = useFullscreen();
   const { mirror, toggleMirror } = useViewOptionsStore();
   const location = useLocation();
 
-  return createPortal(
-    <div id='navigation-menu-portal'>
-      <RenameClientModal id={id} name={name} isOpen={isOpenRename} onClose={onCloseRename} />
-      <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
-        <DrawerOverlay />
-        <DrawerContent maxWidth='22rem'>
-          <DrawerHeader>
-            <DrawerCloseButton size='lg' />
-            Ontime
-          </DrawerHeader>
-          <DrawerBody padding={0}>
-            <div className={style.buttonsContainer}>
-              <div
-                className={cx([style.link, fullscreen && style.current])}
-                tabIndex={0}
-                role='button'
-                onClick={toggle}
-                onKeyDown={(event) => {
-                  isKeyEnter(event) && toggle();
-                }}
-              >
-                Toggle Fullscreen
-                {fullscreen ? <IoContract /> : <IoExpand />}
-              </div>
-              <div
-                className={cx([style.link, mirror && style.current])}
-                tabIndex={0}
-                role='button'
-                onClick={() => toggleMirror()}
-                onKeyDown={(event) => {
-                  isKeyEnter(event) && toggleMirror();
-                }}
-              >
-                Flip Screen
-                <IoSwapVertical />
-              </div>
-              <div
-                className={style.link}
-                tabIndex={0}
-                role='button'
-                onClick={onRenameOpen}
-                onKeyDown={(event) => {
-                  isKeyEnter(event) && onRenameOpen();
-                }}
-              >
-                Rename Client
-              </div>
-            </div>
+  return (
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Backdrop className={style.backdrop} />
+        <RenameClientModal id={id} name={name} isOpen={isRenameOpen} onClose={handlers.close} />
+        <Dialog.Popup className={style.drawer}>
+          <div className={style.header}>
+            <Dialog.Title>Ontime</Dialog.Title>
+            <IconButton variant='subtle-white' size='large' onClick={onClose}>
+              <IoClose />
+            </IconButton>
+          </div>
+          <div className={style.body}>
+            <NavigationMenuItem active={fullscreen} onClick={toggle}>
+              Toggle Fullscreen
+              {fullscreen ? <IoContract /> : <IoExpand />}
+            </NavigationMenuItem>
+            <NavigationMenuItem active={mirror} onClick={toggleMirror}>
+              Flip Screen
+              <IoSwapVertical />
+            </NavigationMenuItem>
+            <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>
+
             <hr className={style.separator} />
-            <Link
-              to='/editor'
-              tabIndex={0}
-              className={`${style.link} ${location.pathname === '/editor' && style.current}`}
-            >
-              <IoLockClosedOutline />
-              Editor
-            </Link>
+
+            <EditorNavigation />
             <ClientLink to='cuesheet' current={location.pathname === '/cuesheet'}>
               <IoLockClosedOutline />
               Cuesheet
@@ -112,86 +74,23 @@ function NavigationMenu(props: NavigationMenuProps) {
               <IoLockClosedOutline />
               Operator
             </ClientLink>
+
             <hr className={style.separator} />
+
             {navigatorConstants.map((route) => (
               <ClientLink key={route.url} to={route.url} current={location.pathname === `/${route.url}`}>
                 {route.label}
               </ClientLink>
             ))}
-            {isLocalhost && <OtherAddresses currentLocation={location.pathname} />}
-          </DrawerBody>
-        </DrawerContent>
-      </Drawer>
-    </div>,
-    document.body,
+          </div>
+
+          {isLocalhost && (
+            <div>
+              <OtherAddresses currentLocation={location.pathname} />
+            </div>
+          )}
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }
-
-interface OtherAddressesProps {
-  currentLocation: string;
-}
-
-function OtherAddresses(props: OtherAddressesProps) {
-  const { currentLocation } = props;
-  const { data } = useInfo();
-
-  // there is no point showing this if we only have one interface
-  if (data.networkInterfaces.length < 2) {
-    return null;
-  }
-
-  return (
-    <div className={style.bottom}>
-      <div className={style.sectionHeader}>Accessible on external networks</div>
-      <div className={style.interfaces}>
-        {data?.networkInterfaces?.map((nif) => {
-          if (nif.name === 'localhost') {
-            return null;
-          }
-
-          const address = linkToOtherHost(nif.address, currentLocation);
-
-          return (
-            <CopyTag
-              key={nif.name}
-              copyValue={address}
-              onClick={() => openLink(address)}
-              label='Copy IP or navigate to address'
-            >
-              {nif.address} <IoArrowUp className={style.goIcon} />
-            </CopyTag>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-interface ClientLinkProps {
-  current: boolean;
-  to: string;
-}
-
-function ClientLink(props: PropsWithChildren<ClientLinkProps>) {
-  const { current, to, children } = props;
-  const { isElectron } = useElectronEvent();
-
-  const classes = cx([style.link, current && style.current]);
-
-  if (isElectron) {
-    return (
-      <button className={classes} tabIndex={0} onClick={(event) => handleLinks(event, to)}>
-        {children}
-        <IoArrowUp className={style.linkIcon} />
-      </button>
-    );
-  }
-
-  return (
-    <Link to={`/${to}`} className={classes} tabIndex={0}>
-      {children}
-    </Link>
-  );
-}
-
-export default memo(NavigationMenu);

apps/client/src/common/components/navigation-menu/ProductionNavigationMenu.tsx

@@ -1,16 +0,0 @@
-import { memo } from 'react';
-
-import NavigationMenu from './NavigationMenu';
-
-interface ProductionNavigationMenuProps {
-  isMenuOpen: boolean;
-  onMenuClose: () => void;
-}
-
-function ProductionNavigationMenu(props: ProductionNavigationMenuProps) {
-  const { isMenuOpen, onMenuClose } = props;
-
-  return <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />;
-}
-
-export default memo(ProductionNavigationMenu);

apps/client/src/common/components/navigation-menu/ViewLockedIcon.tsx

@@ -1,16 +0,0 @@
-import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
-
-import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
-import { cx } from '../../utils/styleUtils';
-
-import style from './NavigationMenu.module.scss';
-
-export default function ViewLockedIcon() {
-  const isLockIconShown = useFadeOutOnInactivity();
-
-  return (
-    <div className={cx([style.fadeable, style.lockIcon, !isLockIconShown && style.hidden])}>
-      <IoLockClosedOutline />
-    </div>
-  );
-}

apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx

@@ -1,22 +1,39 @@
 import { memo } from 'react';
-import { useDisclosure } from '@chakra-ui/react';
+import { useDisclosure, useHotkeys } from '@mantine/hooks';
 
-import FloatingNavigation from './FloatingNavigation';
+import FloatingNavigation from './floating-navigation/FloatingNavigation';
+import ViewLockedIcon from './view-locked-icon/ViewLockedIcon';
 import NavigationMenu from './NavigationMenu';
 import useViewEditor from './useViewEditor';
-import ViewLockedIcon from './ViewLockedIcon';
 
 interface ViewNavigationMenuProps {
   isLockable?: boolean;
+  supressSettings?: boolean;
 }
 
-function ViewNavigationMenu(props: ViewNavigationMenuProps) {
-  const { isLockable } = props;
-
-  const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
+export default memo(ViewNavigationMenu);
+function ViewNavigationMenu({ isLockable, supressSettings }: ViewNavigationMenuProps) {
+  const [isMenuOpen, menuHandler] = useDisclosure();
   const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });
 
-  const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());
+  useHotkeys([
+    [
+      'Space',
+      () => {
+        if (isViewLocked) return;
+        menuHandler.toggle();
+      },
+      { preventDefault: true },
+    ],
+    [
+      'mod + ,',
+      () => {
+        if (isViewLocked || supressSettings) return;
+        showEditFormDrawer();
+      },
+      { preventDefault: true },
+    ],
+  ]);
 
   if (isViewLocked) {
     return <ViewLockedIcon />;
@@ -24,10 +41,11 @@ function ViewNavigationMenu(props: ViewNavigationMenuProps) {
 
   return (
     <>
-      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
-      <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />
+      <FloatingNavigation
+        toggleMenu={menuHandler.toggle}
+        toggleSettings={supressSettings ? undefined : () => showEditFormDrawer()}
+      />
+      <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
     </>
   );
 }
-
-export default memo(ViewNavigationMenu);

apps/client/src/common/components/navigation-menu/client-link/ClientLink.module.scss

@@ -0,0 +1,4 @@
+.linkIcon {
+  margin-left: auto;
+  @include rotate-fourty-five;
+}

apps/client/src/common/components/navigation-menu/client-link/ClientLink.tsx

@@ -0,0 +1,34 @@
+import { PropsWithChildren } from 'react';
+import { IoArrowUp } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
+
+import { useElectronEvent } from '../../../hooks/useElectronEvent';
+import { handleLinks } from '../../../utils/linkUtils';
+import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
+
+import style from './ClientLink.module.scss';
+
+interface ClientLinkProps {
+  current: boolean;
+  to: string;
+}
+
+export default function ClientLink({ current, to, children }: PropsWithChildren<ClientLinkProps>) {
+  const { isElectron } = useElectronEvent();
+  const navigate = useNavigate();
+
+  if (isElectron) {
+    return (
+      <NavigationMenuItem active={current} onClick={() => handleLinks(to)}>
+        {children}
+        <IoArrowUp className={style.linkIcon} />
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem active={current} onClick={() => navigate(`/${to}`)}>
+      {children}
+    </NavigationMenuItem>
+  );
+}

apps/client/src/common/components/navigation-menu/editor-navigation/EditorNavigation.tsx

@@ -0,0 +1,38 @@
+import { IoLockClosedOutline } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
+
+import { useIsSmallDevice } from '../../../hooks/useIsSmallDevice';
+import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
+
+export default function EditorNavigation() {
+  const navigate = useNavigate();
+  const isSmallDevice = useIsSmallDevice();
+
+  if (!isSmallDevice) {
+    return (
+      <NavigationMenuItem active={location.pathname === '/editor'} onClick={() => navigate('/editor')}>
+        <IoLockClosedOutline />
+        Editor
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <>
+      <NavigationMenuItem active={location.pathname === '/timercontrol'} onClick={() => navigate('/timercontrol')}>
+        <IoLockClosedOutline />
+        Timer Controls
+      </NavigationMenuItem>
+
+      <NavigationMenuItem active={location.pathname === '/messagecontrol'} onClick={() => navigate('/messagecontrol')}>
+        <IoLockClosedOutline />
+        Message Controls
+      </NavigationMenuItem>
+
+      <NavigationMenuItem active={location.pathname === '/rundown'} onClick={() => navigate('/rundown')}>
+        <IoLockClosedOutline />
+        Rundown
+      </NavigationMenuItem>
+    </>
+  );
+}

apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.module.scss

@@ -0,0 +1,23 @@
+.fadeable {
+  opacity: 1;
+
+  transition-property: opacity;
+  transition-duration: 0.3s;
+
+  &.hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  padding: 0.5em;
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: $zindex-nav;
+}

apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.tsx

@@ -0,0 +1,45 @@
+import { IoApps } from 'react-icons/io5';
+import { IoSettingsOutline } from 'react-icons/io5';
+
+import { useFadeOutOnInactivity } from '../../../hooks/useFadeOutOnInactivity';
+import { cx } from '../../../utils/styleUtils';
+import IconButton from '../../buttons/IconButton';
+
+import style from './FloatingNavigation.module.scss';
+
+interface FloatingNavigationProps {
+  toggleMenu: () => void;
+  toggleSettings?: () => void;
+}
+
+export default function FloatingNavigation({ toggleMenu, toggleSettings }: FloatingNavigationProps) {
+  const isButtonShown = useFadeOutOnInactivity(true);
+
+  return (
+    <div
+      id='fadeable-navigation'
+      className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
+    >
+      <IconButton
+        variant='subtle-white'
+        size='xlarge'
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        data-testid='navigation__toggle-menu'
+      >
+        <IoApps />
+      </IconButton>
+      {toggleSettings && (
+        <IconButton
+          variant='subtle-white'
+          size='xlarge'
+          onClick={toggleSettings}
+          aria-label='toggle settings'
+          data-testid='navigation__toggle-settings'
+        >
+          <IoSettingsOutline />
+        </IconButton>
+      )}
+    </div>
+  );
+}

apps/client/src/common/components/navigation-menu/navigation-menu-item/NavigationMenuItem.module.scss

@@ -0,0 +1,37 @@
+.link {
+  display: flex;
+  align-items: center;
+
+  padding: 0.75rem 1.5rem;
+  gap: 0.5rem;
+  width: 100%;
+
+  border-left: 4px solid transparent;
+  color: $action-text-color;
+  white-space: nowrap;
+
+  cursor: pointer;
+
+  transition-property: color;
+  transition-duration: $transition-time-action;
+
+  &:hover {
+    color: $ontime-color;
+    background-color: $gray-1350;
+  }
+
+  &:active {
+    background-color: $border-color-ondark;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: $gray-1300;
+    border: 2px solid $ui-white;
+  }
+
+  &.current {
+    background-color: $gray-1300;
+    border-left: 4px solid $action-text-color;
+  }
+}

apps/client/src/common/components/navigation-menu/navigation-menu-item/NavigationMenuItem.tsx

@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+
+import { isKeyEnter } from '../../../utils/keyEvent';
+import { cx } from '../../../utils/styleUtils';
+
+import style from './NavigationMenuItem.module.scss';
+
+interface NavigationMenuItemProps {
+  active?: boolean;
+  className?: string;
+  onClick: () => void;
+}
+
+export default function NavigationMenuItem({
+  active,
+  className,
+  children,
+  onClick,
+}: PropsWithChildren<NavigationMenuItemProps>) {
+  return (
+    <div
+      className={cx([style.link, active && style.current, className])}
+      tabIndex={0}
+      role='button'
+      onClick={onClick}
+      onKeyDown={(event) => {
+        isKeyEnter(event) && onClick();
+      }}
+    >
+      {children}
+    </div>
+  );
+}

apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.module.scss

@@ -0,0 +1,18 @@
+.header {
+  font-size: calc(1rem - 2px);
+  margin-left: 1rem;
+  color: $gray-700;
+}
+
+.interfaces {
+  padding: 0.5rem 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.goIcon {
+  @include rotate-fourty-five;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}

apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.tsx

@@ -0,0 +1,46 @@
+import { IoArrowUp } from 'react-icons/io5';
+
+import useInfo from '../../../hooks-query/useInfo';
+import { linkToOtherHost, openLink } from '../../../utils/linkUtils';
+import CopyTag from '../../copy-tag/CopyTag';
+
+import style from './OtherAddresses.module.scss';
+
+interface OtherAddressesProps {
+  currentLocation: string;
+}
+
+export default function OtherAddresses({ currentLocation }: OtherAddressesProps) {
+  const { data } = useInfo();
+
+  // there is no point showing this if we only have one interface
+  if (data.networkInterfaces.length < 2) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={style.header}>Accessible on external networks</div>
+      <div className={style.interfaces}>
+        {data?.networkInterfaces?.map((nif) => {
+          if (nif.name === 'localhost') {
+            return null;
+          }
+
+          const address = linkToOtherHost(nif.address, currentLocation);
+
+          return (
+            <CopyTag
+              key={nif.name}
+              copyValue={address}
+              onClick={() => openLink(address)}
+              label='Copy IP or navigate to address'
+            >
+              {nif.address} <IoArrowUp className={style.goIcon} />
+            </CopyTag>
+          );
+        })}
+      </div>
+    </>
+  );
+}

apps/client/src/common/components/navigation-menu/view-locked-icon/ViewLockedIcon.module.scss

@@ -0,0 +1,22 @@
+.fadeable {
+  opacity: 1;
+
+  transition-property: opacity;
+  transition-duration: 0.3s;
+
+  &.hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.lockIcon {
+  font-size: 1.5rem;
+  color: $active-indicator;
+  padding: 0.5em;
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: $zindex-nav;
+}

apps/client/src/common/components/navigation-menu/view-locked-icon/ViewLockedIcon.tsx

@@ -0,0 +1,16 @@
+import { IoLockClosedOutline } from 'react-icons/io5';
+
+import { useFadeOutOnInactivity } from '../../../hooks/useFadeOutOnInactivity';
+import { cx } from '../../../utils/styleUtils';
+
+import style from './ViewLockedIcon.module.scss';
+
+export default function ViewLockedIcon() {
+  const isLockIconShown = useFadeOutOnInactivity();
+
+  return (
+    <div className={cx([style.fadeable, style.lockIcon, !isLockIconShown && style.hidden])}>
+      <IoLockClosedOutline />
+    </div>
+  );
+}

apps/client/src/common/components/playback-icon/PlaybackIcon.tsx

@@ -1,42 +0,0 @@
-import { Tooltip } from '@chakra-ui/react';
-import { IoPause } from '@react-icons/all-files/io5/IoPause';
-import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
-import { IoStop } from '@react-icons/all-files/io5/IoStop';
-import { Playback } from 'ontime-types';
-
-import { tooltipDelayFast } from '../../../ontimeConfig';
-
-interface PlaybackIconProps {
-  state: Playback;
-  skipTooltip?: boolean;
-  className?: string;
-}
-
-export default function PlaybackIcon(props: PlaybackIconProps) {
-  const { state, skipTooltip, className } = props;
-
-  // if timer is Pause or Armed
-  let label = 'Timer Paused';
-  let Icon = IoPause;
-
-  if (state === Playback.Roll) {
-    label = 'Timer Rolling';
-    Icon = IoPlay;
-  } else if (state === Playback.Play) {
-    label = 'Timer Playing';
-    Icon = IoPlay;
-  } else if (state === Playback.Stop) {
-    label = 'Timer Stopped';
-    Icon = IoStop;
-  }
-
-  if (skipTooltip) {
-    return <Icon className={className} />;
-  }
-
-  return (
-    <Tooltip openDelay={tooltipDelayFast} label={label} shouldWrapChildren>
-      <Icon className={className} />
-    </Tooltip>
-  );
-}

apps/client/src/common/components/popover/Popover.module.scss

@@ -0,0 +1,32 @@
+.popup {
+  box-sizing: border-box;
+  padding: 1rem 1.5rem;
+  z-index: $zindex-dialog;
+
+  color: $ui-white;
+  background-color: $gray-1250;
+
+  border-radius: 3px;  
+  box-shadow: $box-shadow-l1;
+  border: 2px solid $gray-1200;
+
+  //width: 32rem;
+  max-width: 90vw;
+
+  transform-origin: var(--transform-origin);
+  transition:
+    transform 150ms,
+    opacity 150ms;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+.title {
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+}
+

apps/client/src/common/components/popover/Popover.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react';
+import { Popover } from '@base-ui-components/react/popover';
+
+import style from './Popover.module.scss';
+
+interface PopoverContentsProps extends Popover.Positioner.Props {
+  title?: string;
+  className?: string;
+}
+export default function PopoverContents({
+  title,
+  className,
+  children,
+  ...popoverProps
+}: PropsWithChildren<PopoverContentsProps>) {
+  return (
+    <Popover.Portal>
+      <Popover.Positioner sideOffset={8} {...popoverProps}>
+        <Popover.Popup className={style.popup}>
+          {title && <Popover.Title className={style.title}>{title}</Popover.Title>}
+          <Popover.Description className={className}>{children}</Popover.Description>
+        </Popover.Popup>
+      </Popover.Positioner>
+    </Popover.Portal>
+  );
+}

apps/client/src/common/components/protect-route/PinPage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
+import { IoCheckmark } from 'react-icons/io5';
 import { IconButton, PinInput, PinInputField } from '@chakra-ui/react';
-import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 
 import style from './ProtectRoute.module.scss';
 

apps/client/src/common/components/select/Select.module.scss

@@ -0,0 +1,132 @@
+.select {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  height: 2rem;
+
+  background-color: $gray-1200;
+  font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  border-radius: $component-border-radius-md;
+  border: 1px solid transparent;
+
+  padding-inline: 0.5rem;
+  font-size: calc(1rem - 2px);
+  white-space: nowrap;
+
+  &:hover:not([data-disabled]) {
+    background-color: $gray-1100;
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: $gray-1000;
+  }
+
+  &[data-popup-open] {
+    background-color: $gray-1000;
+  }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &.fluid {
+    width: 100%;
+  }
+}
+
+.selectIcon {
+  color: $gray-200;
+}
+
+.popup {
+  font-size: calc(1rem - 2px);
+  background-color: $gray-1200;
+  box-sizing: border-box;
+  padding: 2px;
+  border-radius: $component-border-radius-md;
+  color: $ui-white;
+  overflow-y: auto;
+  max-height: 20rem;
+  border: 1px solid $gray-1000;
+
+  &[data-side='start'] {
+    transition: 50%;
+    transform: 100%;
+    opacity: 1;
+  }
+}
+
+.item {
+  box-sizing: border-box;
+  outline: 0;
+  line-height: 1rem;
+  padding: 0.25rem 0.5rem;
+
+  min-width: var(--anchor-width);
+  display: grid;
+  gap: 0.25rem;
+  align-items: center;
+  grid-template-columns: 0.75rem 1fr;
+  scroll-margin-block: 1rem;
+
+  &[data-highlighted] {
+    z-index: 0;
+    position: relative;
+    background-color: $blue-700;
+  }
+}
+
+.itemIndicator {
+  grid-column-start: 1;
+}
+
+.itemIndicatorIcon {
+  display: block;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.itemLabel {
+  grid-column-start: 2;
+}
+
+.scrollArrow {
+  background-color: $gray-1000;
+  color: $ui-white;
+
+  width: 100%;
+  z-index: 1;
+  height: 1rem;
+  font-size: 0.5rem;
+  display: grid;
+  place-content: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+  }
+
+  &[data-direction='up'] {
+    border-radius: 3px 3px 0 0;
+    &::before {
+      top: -100%;
+    }
+  }
+
+  &[data-direction='down'] {
+    bottom: 0;
+    border-radius: 0 0 3px 3px;
+
+    &::before {
+      bottom: -100%;
+    }
+  }
+}

apps/client/src/common/components/select/Select.tsx

@@ -0,0 +1,45 @@
+import { IoCheckmark } from 'react-icons/io5';
+import { LuChevronsUpDown } from 'react-icons/lu';
+import { Select as BaseSelect } from '@base-ui-components/react/select';
+
+import { cx } from '../../utils/styleUtils';
+
+import styles from './Select.module.scss';
+
+interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
+  // overload items to not allow undefined values
+  options: {
+    value: T;
+    label: string;
+  }[];
+  fluid?: boolean;
+}
+
+export default function Select<T>({ options, fluid, ...selectRootProps }: SelectProps<T>) {
+  return (
+    <BaseSelect.Root items={options} {...selectRootProps}>
+      <BaseSelect.Trigger className={cx([styles.select, fluid && styles.fluid])}>
+        <BaseSelect.Value />
+        <BaseSelect.Icon className={styles.selectIcon}>
+          <LuChevronsUpDown />
+        </BaseSelect.Icon>
+      </BaseSelect.Trigger>
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner side='bottom' align='start'>
+          <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
+          <BaseSelect.Popup className={styles.popup}>
+            {options.map(({ label, value }) => (
+              <BaseSelect.Item key={String(value)} className={styles.item} value={value}>
+                <BaseSelect.ItemIndicator className={styles.itemIndicator}>
+                  <IoCheckmark className={styles.itemIndicatorIcon} />
+                </BaseSelect.ItemIndicator>
+                <BaseSelect.ItemText className={styles.itemLabel}>{label}</BaseSelect.ItemText>
+              </BaseSelect.Item>
+            ))}
+          </BaseSelect.Popup>
+          <BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root>
+  );
+}

apps/client/src/common/components/switch/Switch.module.scss

@@ -0,0 +1,52 @@
+.switch {
+  position: relative;
+  display: flex;
+  align-items: center;
+  
+  /* Reset and base styles */
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  background-color: $gray-1100;
+  
+  /* Transitions */
+  transition: background-color 125ms cubic-bezier(0.26, 0.75, 0.38, 0.45);
+
+  /* States */
+  &[data-checked] {
+    background-color: $blue-700;
+    box-shadow: none;
+  }
+
+  &:focus {
+    border-color: $blue-500;
+  }
+}
+
+.medium {
+  padding: 2px;
+  --width: calc(2.5rem + 4px);
+  --height: 1.5rem;
+  width: var(--width);
+  height: var(--height);
+}
+
+.large {
+  padding: 3px;
+  --width: calc(2.75rem + 6px);
+  --height: 1.75rem;
+  width: var(--width);
+  height: var(--height);
+}
+
+.thumb {
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  border-radius: 99px;
+  background-color: $ui-white;
+  transition: translate 150ms ease;
+
+  &[data-checked] {
+    translate: calc(var(--width) - var(--height)) 0;
+  }
+}

apps/client/src/common/components/switch/Switch.tsx

@@ -0,0 +1,17 @@
+import { Switch as BaseSwitch } from '@base-ui-components/react/switch';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './Switch.module.scss';
+
+interface SwitchProps extends BaseSwitch.Root.Props {
+  size?: 'medium' | 'large';
+}
+
+export default function Switch({ size = 'medium', ...switchProps }: SwitchProps) {
+  return (
+    <BaseSwitch.Root className={cx([style.switch, style[size]])} {...switchProps}>
+      <BaseSwitch.Thumb className={style.thumb} />
+    </BaseSwitch.Root>
+  );
+}

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

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { IoChevronDown } from 'react-icons/io5';
 import { useSearchParams } from 'react-router-dom';
 import {
   Button,
@@ -13,24 +14,25 @@ import {
   Select,
   Switch,
 } from '@chakra-ui/react';
-import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
 
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 
 import InlineColourPicker from './InlineColourPicker';
-import { ParamField } from './types';
+import { ParamField } from './viewParams.types';
 
-interface EditFormInputProps {
+interface ParamInputProps {
   paramField: ParamField;
 }
 
-export default function ParamInput(props: EditFormInputProps) {
-  const { paramField } = props;
+export default function ParamInput({ paramField }: ParamInputProps) {
   const [searchParams] = useSearchParams();
   const { id, type, defaultValue } = paramField;
 
   if (type === 'persist') {
-    return null;
+    if (!paramField.values || !paramField.values.length) {
+      return null;
+    }
+    return <input hidden name={id} readOnly value={paramField.values.join(',')} />;
   }
 
   if (type === 'option') {
@@ -126,9 +128,9 @@ function MultiOption(props: EditFormMultiOptionProps) {
             onChange={(value) => setParamState(Array.isArray(value) ? value : [value])}
           >
             {Object.values(paramField.values).map((option) => {
-              const { value, label } = option;
+              const { value, label, colour } = option;
               return (
-                <MenuItemOption value={value} key={value}>
+                <MenuItemOption value={value} key={value} style={{ borderRight: `8px solid ${colour}` }}>
                   {label}
                 </MenuItemOption>
               );

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

@@ -8,12 +8,82 @@
   }
 }
 
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $zindex-backdrop;
+  background-color: $backdrop-color;
+  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.drawer {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $zindex-dialog;
+
+  width: 40rem;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1.5rem;
+
+  background-color: $gray-1250;
+  color: $ui-white;
+  border-left: 1px solid $gray-1100;
+
+  &[data-open] {
+    transform: translateX(0%);
+    transition: transform 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateX(100%);
+    transition: transform 500ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  }
+
+  // take the whole screen in mobile devices
+  @media (max-width: $min-tablet) {
+    width: 100vw;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 3.5rem;
+
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
+.body {
+  flex: 1;
+  padding-bottom: 10vh;
+  overflow-y: auto;
+}
+
+.footer {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .sectionList {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
   gap: 2rem;
-  overflow-y: scroll;
   padding-right: 0.5rem;
 }
 

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

@@ -1,117 +1,51 @@
-import { FormEvent, useEffect } from 'react';
+import { FormEvent, memo, useEffect } from 'react';
+import { IoClose } from 'react-icons/io5';
 import { useSearchParams } from 'react-router-dom';
-import {
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { useDisclosure } from '@mantine/hooks';
 
 import useViewSettings from '../../hooks-query/useViewSettings';
+import Button from '../buttons/Button';
+import IconButton from '../buttons/IconButton';
 import Info from '../info/Info';
 
-import { ViewOption } from './types';
+import { ViewOption } from './viewParams.types';
+import { getURLSearchParamsFromObj } from './viewParams.utils';
 import ViewParamsSection from './ViewParamsSection';
 
 import style from './ViewParamsEditor.module.scss';
 
-type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
-
-/**
- * Utility remove the # character from a hex string
- */
-function sanitiseColour(colour: string) {
-  if (colour.startsWith('#')) {
-    return colour.substring(1);
-  }
-  return colour;
-}
-
-/**
- * Makes a new URLSearchParams object from the given params object
- */
-const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ViewOption[]) => {
-  const newSearchParams = new URLSearchParams();
-
-  // Convert paramFields to an object that contains default values
-  const defaultValues: Record<string, string> = {};
-  paramFields.forEach((section) => {
-    section.options.forEach((option) => {
-      defaultValues[option.id] = String(option.defaultValue);
-
-      // extract persisted values
-      if ('type' in option && option.type === 'persist') {
-        newSearchParams.set(option.id, option.value);
-      }
-    });
-  });
-
-  // compare which values are different from the default values
-  Object.entries(paramsObj).forEach(([id, value]) => {
-    if (typeof value === 'string' && value.length) {
-      // we dont know which values contain colours
-      // unfortunately this means we run all the strings through the sanitation
-      const valueWithoutHash = sanitiseColour(value);
-      if (defaultValues[id] !== valueWithoutHash) {
-        handleValueString(id, valueWithoutHash);
-      }
-    }
-  });
-
-  /** Utility function contains logic to add a value into the searchParams object */
-  function handleValueString(id: string, value: string) {
-    const maybeMultipleValues = value.split(',');
-
-    // we need to check if the value contains comma separated list, for the case of the multi-select data
-    if (Array.isArray(maybeMultipleValues) && maybeMultipleValues.length > 1) {
-      const added = new Set();
-      maybeMultipleValues.forEach((v) => {
-        if (!added.has(v)) {
-          added.add(v);
-          newSearchParams.append(id, v);
-        }
-      });
-    } else {
-      newSearchParams.set(id, value);
-    }
-  }
-  return newSearchParams;
-};
-
 interface EditFormDrawerProps {
   viewOptions: ViewOption[];
 }
 
-// TODO: this is a good candidate for memoisation, but needs the paramFields to be stable
-export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
+export default memo(ViewParamsEditor);
+
+function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const { data: viewSettings } = useViewSettings();
 
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const [isOpen, handlers] = useDisclosure(false);
 
+  // handle opening the drawer
   useEffect(() => {
     const isEditing = searchParams.get('edit');
 
     if (isEditing === 'true') {
-      return onOpen();
+      return handlers.open();
     }
-  }, [searchParams, onOpen]);
+  }, [searchParams, handlers]);
 
   const handleClose = () => {
     searchParams.delete('edit');
     setSearchParams(searchParams);
 
-    onClose();
+    handlers.close();
   };
 
   const resetParams = () => {
     setSearchParams();
-    onClose();
+    handlers.close();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -123,39 +57,48 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   };
 
   return (
-    <Drawer isOpen={isOpen} placement='right' onClose={handleClose} variant='ontime' size='lg'>
-      <DrawerOverlay />
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerCloseButton size='lg' />
-          Customise
-        </DrawerHeader>
-
-        <DrawerBody>
-          {viewSettings.overrideStyles && (
-            <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
-          )}
-          <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
-            {viewOptions.map((section) => (
-              <ViewParamsSection
-                key={section.title}
-                title={section.title}
-                collapsible={section.collapsible}
-                options={section.options}
-              />
-            ))}
-          </form>
-        </DrawerBody>
-
-        <DrawerFooter className={style.drawerFooter}>
-          <Button variant='ontime-ghosted' onClick={resetParams} type='reset'>
-            Reset to default
-          </Button>
-          <Button variant='ontime-filled' form='edit-params-form' type='submit'>
-            Save
-          </Button>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          handleClose();
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <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' onClick={handleClose}>
+              <IoClose />
+            </IconButton>
+          </div>
+          <div className={style.body}>
+            {viewSettings.overrideStyles && (
+              <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
+            )}
+            <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
+              {viewOptions.map((section) => (
+                <ViewParamsSection
+                  key={section.title}
+                  title={section.title}
+                  collapsible={section.collapsible}
+                  options={section.options}
+                />
+              ))}
+            </form>
+          </div>
+          <div className={style.footer}>
+            <Button variant='subtle' size='large' onClick={resetParams} type='reset'>
+              Reset to default
+            </Button>
+            <Button variant='primary' size='large' form='edit-params-form' type='submit'>
+              Save
+            </Button>
+          </div>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }

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

@@ -11,10 +11,6 @@
 
   &.collapsible {
     cursor: pointer;
-
-    &:hover {
-      border-bottom: 1px solid $white-10;
-    }
   }
 }
 

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

@@ -1,10 +1,11 @@
+import { IoChevronDown } from 'react-icons/io5';
 import { useLocalStorage } from '@mantine/hooks';
-import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
 
 import { cx } from '../../utils/styleUtils';
 
+import { OptionTitle } from './constants';
 import ParamInput from './ParamInput';
-import { type ParamField } from './types';
+import { type ParamField } from './viewParams.types';
 
 import style from './ViewParamsSection.module.scss';
 
@@ -14,9 +15,7 @@ interface ViewParamsSectionProps {
   options: ParamField[];
 }
 
-export default function ViewParamsSection(props: ViewParamsSectionProps) {
-  const { title, collapsible, options } = props;
-
+export default function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
   const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });
 
   const handleCollapse = () => {
@@ -27,28 +26,52 @@ export default function ViewParamsSection(props: ViewParamsSectionProps) {
 
   return (
     <section className={style.section}>
-      <div className={cx([style.sectionHeader, collapsible && style.collapsible])} onClick={handleCollapse}>
-        {title}
-        {collapsible && <IoChevronDown className={cx([collapsed ? style.closed : style.open])} />}
-      </div>
-
-      {!collapsed && (
+      {title === OptionTitle.Hidden ? (
+        <HiddenContents options={options} />
+      ) : (
         <>
-          {options.map((option) => {
-            if (option.type === 'persist') {
-              return null;
-            }
-
-            return (
-              <label key={option.title} className={style.label}>
-                <span className={style.title}>{option.title}</span>
-                <span className={style.description}>{option.description}</span>
-                <ParamInput paramField={option} />
-              </label>
-            );
-          })}
+          <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) {
+  if (collapsed) {
+    return null;
+  }
+
+  return (
+    <>
+      {options.map((option) => {
+        return (
+          <label key={option.title} className={style.label}>
+            <span className={style.title}>{option.title}</span>
+            <span className={style.description}>{option.description}</span>
+            <ParamInput paramField={option} />
+          </label>
+        );
+      })}
+    </>
+  );
+}
+
+function HiddenContents({ options }: { options: ParamField[] }) {
+  return (
+    <>
+      {options.map((option, index) => {
+        return <ParamInput key={option.title + index} paramField={option} />;
+      })}
+    </>
+  );
+}

apps/client/src/common/components/view-params-editor/__tests__/constants.test.ts

@@ -1,45 +0,0 @@
-import { CustomFields } from 'ontime-types';
-
-import { makeOptionsFromCustomFields } from '../constants';
-
-describe('makeOptionsFromCustomFields', () => {
-  const testCustomFields: CustomFields = {
-    field1: { label: 'Field 1', colour: 'red', type: 'string' },
-    field2: { label: 'Field 2', colour: 'blue', type: 'string' },
-  };
-
-  it('creates a record of keys for the given custom fields', () => {
-    const result = makeOptionsFromCustomFields(testCustomFields);
-    expect(result).toStrictEqual({
-      'custom-field1': 'Custom: Field 1',
-      'custom-field2': 'Custom: Field 2',
-    });
-  });
-
-  it('appends additional data', () => {
-    const additionalData = {
-      test1: 'test1',
-      test2: 'test2',
-    };
-    const result = makeOptionsFromCustomFields(testCustomFields, additionalData);
-    expect(result).toStrictEqual({
-      'custom-field1': 'Custom: Field 1',
-      'custom-field2': 'Custom: Field 2',
-      test1: 'test1',
-      test2: 'test2',
-    });
-  });
-
-  it('filtersImageTypes', () => {
-    const customFieldsWIthImage: CustomFields = {
-      ...testCustomFields,
-      field3: { label: 'Field 3', colour: 'green', type: 'image' },
-    };
-
-    const result = makeOptionsFromCustomFields(customFieldsWIthImage);
-    expect(result).toStrictEqual({
-      'custom-field1': 'Custom: Field 1',
-      'custom-field2': 'Custom: Field 2',
-    });
-  });
-});

apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts

@@ -0,0 +1,204 @@
+import { CustomFields } from 'ontime-types';
+import { describe, expect, it } from 'vitest';
+
+import { OptionTitle } from '../constants';
+import type { ViewOption } from '../viewParams.types';
+import { getURLSearchParamsFromObj, makeOptionsFromCustomFields } from '../viewParams.utils';
+
+describe('makeOptionsFromCustomFields', () => {
+  const testCustomFields: CustomFields = {
+    field1: { label: 'Field 1', colour: 'red', type: 'string' },
+    field2: { label: 'Field 2', colour: 'blue', type: 'string' },
+  };
+
+  it('creates a record of keys for the given custom fields', () => {
+    const result = makeOptionsFromCustomFields(testCustomFields);
+    expect(result).toStrictEqual({
+      'custom-field1': 'Custom: Field 1',
+      'custom-field2': 'Custom: Field 2',
+    });
+  });
+
+  it('appends additional data', () => {
+    const additionalData = {
+      test1: 'test1',
+      test2: 'test2',
+    };
+    const result = makeOptionsFromCustomFields(testCustomFields, additionalData);
+    expect(result).toStrictEqual({
+      'custom-field1': 'Custom: Field 1',
+      'custom-field2': 'Custom: Field 2',
+      test1: 'test1',
+      test2: 'test2',
+    });
+  });
+
+  it('filtersImageTypes', () => {
+    const customFieldsWIthImage: CustomFields = {
+      ...testCustomFields,
+      field3: { label: 'Field 3', colour: 'green', type: 'image' },
+    };
+
+    const result = makeOptionsFromCustomFields(customFieldsWIthImage);
+    expect(result).toStrictEqual({
+      'custom-field1': 'Custom: Field 1',
+      'custom-field2': 'Custom: Field 2',
+    });
+  });
+});
+
+describe('getURLSearchParamsFromObj', () => {
+  // Mock view options for testing
+  const mockViewOptions: ViewOption[] = [
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
+        {
+          id: 'color',
+          title: 'Color',
+          description: 'The color value',
+          type: 'colour',
+          defaultValue: 'ff0000',
+        },
+        {
+          id: 'persist-field',
+          title: 'Persistent Field',
+          description: 'A field that persists',
+          type: 'persist',
+          values: ['persisted-value'],
+        },
+        {
+          id: 'multi-select',
+          title: 'Multi Select',
+          description: 'A multi-select field',
+          type: 'option',
+          values: { value1: 'Value 1', value2: 'Value 2' },
+          defaultValue: '',
+        },
+      ],
+    },
+  ];
+
+  it('should handle empty params object', () => {
+    const params = {};
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    // Should only include persisted values
+    expect(result.get('persist-field')).toBe('persisted-value');
+    expect(result.get('color')).toBeNull();
+  });
+
+  it('should not include values that match defaults', () => {
+    const params = {
+      color: 'ff0000', // same as the default
+      'other-param': 'value',
+    };
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    expect(result.get('color')).toBeNull();
+    expect(result.get('other-param')).toBe('value');
+  });
+
+  it('should sanitize color values with #', () => {
+    const params = {
+      color: '#00ff00', // different from default and includes #
+    };
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    expect(result.get('color')).toBe('00ff00');
+  });
+
+  it('should handle multi-select values', () => {
+    const params = {
+      'multi-select': 'value1,value2,value3',
+    };
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    // Should have multiple entries for the same key
+    const values = result.getAll('multi-select');
+    expect(values).toEqual(['value1', 'value2', 'value3']);
+  });
+
+  it('should not include empty string values', () => {
+    const params = {
+      'empty-param': '',
+    };
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+    expect(result.get('empty-param')).toBeNull();
+  });
+
+  it('should allow multiple values for persisted fields', () => {
+    const mockOptionsWithMultiPersist: ViewOption[] = [
+      {
+        title: OptionTitle.DataSources,
+        collapsible: true,
+        options: [
+          {
+            id: 'sub',
+            title: 'Event subscription',
+            description: 'The events to follow',
+            values: [],
+            type: 'persist',
+          },
+        ],
+      },
+    ];
+
+    const params = {
+      sub: 'value1,value2,value3',
+    };
+    const result = getURLSearchParamsFromObj(params, mockOptionsWithMultiPersist);
+    const values = result.getAll('sub');
+
+    expect(values).toStrictEqual(['value1', 'value2', 'value3']);
+  });
+
+  it('should allow adding multiple values for any field', () => {
+    const params = {
+      'regular-field': 'value1,value2,value3',
+    };
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    const values = result.getAll('regular-field');
+    expect(values).toHaveLength(3);
+    expect(values).toEqual(['value1', 'value2', 'value3']);
+  });
+
+  it('should deduplicate repeated key-value pairs', () => {
+    const params = {
+      multiValue: 'value1,value1,value2,value2,value3',
+      repeatedField: 'same,same,same',
+    };
+
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    // Check multiValue field has unique values
+    expect(result.getAll('multiValue')).toEqual(['value1', 'value2', 'value3']);
+
+    // Check repeatedField has only one instance of the value
+    expect(result.getAll('repeatedField')).toEqual(['same']);
+  });
+
+  it('should deduplicate persisted values while maintaining order', () => {
+    const mockOptionsWithDuplicates: ViewOption[] = [
+      {
+        title: OptionTitle.StyleOverride,
+        options: [
+          {
+            id: 'sub',
+            title: 'Subscription',
+            description: 'Persisted subscription values',
+            type: 'persist',
+            values: ['value1', 'value1', 'value2', 'value2', 'value3', 'value1'],
+          },
+        ],
+      },
+    ];
+
+    const result = getURLSearchParamsFromObj({}, mockOptionsWithDuplicates);
+
+    // Should only include unique values while maintaining order
+    expect(result.getAll('sub')).toEqual(['value1', 'value2', 'value3']);
+  });
+});

apps/client/src/common/components/view-params-editor/common.options.ts

@@ -0,0 +1,28 @@
+import type { ParamField } from './viewParams.types';
+
+export const getTimeOption = (timeFormat: string): ParamField => {
+  const placeholder = `${timeFormat} (default)`;
+  return {
+    id: 'timeformat',
+    title: 'Time format string, taken from the Application Settings',
+    description: 'Format for auxiliar time fields (not the running), eg. HH:mm:ss or hh:mm:ss a, see docs for help',
+    type: 'string',
+    placeholder,
+  };
+};
+
+export const hideTimerSeconds: ParamField = {
+  id: 'hideTimerSeconds',
+  title: 'Hide seconds in timer',
+  description: 'Whether to hide seconds in the running timer',
+  type: 'boolean',
+  defaultValue: false,
+};
+
+export const showLeadingZeros: ParamField = {
+  id: 'showLeadingZeros',
+  title: 'Show leading zeros in timer',
+  description: 'Whether to show leading zeros in the running timer',
+  type: 'boolean',
+  defaultValue: false,
+};

apps/client/src/common/components/view-params-editor/constants.ts

@@ -1,50 +1,6 @@
-import { CustomFields } from 'ontime-types';
-
-import type { ParamField } from './types';
-
-export const makeOptionsFromCustomFields = (
-  customFields: CustomFields,
-  additionalOptions: Record<string, string> = {},
-  filterImageType = true,
-) => {
-  const options = structuredClone(additionalOptions);
-  for (const [key, value] of Object.entries(customFields)) {
-    if (filterImageType && value.type === 'image') {
-      continue;
-    }
-
-    options[`custom-${key}`] = `Custom: ${value.label}`;
-  }
-  return options;
-};
-
-export const getTimeOption = (timeFormat: string): ParamField => {
-  const placeholder = `${timeFormat} (default)`;
-  return {
-    id: 'timeformat',
-    title: 'Time format string, taken from the Application Settings',
-    description: 'Format for auxiliar time fields (not the running), eg. HH:mm:ss or hh:mm:ss a, see docs for help',
-    type: 'string',
-    placeholder,
-  };
-};
-
-export const hideTimerSeconds: ParamField = {
-  id: 'hideTimerSeconds',
-  title: 'Hide seconds in timer',
-  description: 'Whether to hide seconds in the running timer',
-  type: 'boolean',
-  defaultValue: false,
-};
-
-export const showLeadingZeros: ParamField = {
-  id: 'showLeadingZeros',
-  title: 'Show leading zeros in timer',
-  description: 'Whether to show leading zeros in the running timer',
-  type: 'boolean',
-  defaultValue: false,
-};
-
+/**
+ * Gathers possible titles for view options
+ */
 export enum OptionTitle {
   ClockOptions = 'Clock Options',
   TimerOptions = 'Timer Options',
@@ -54,4 +10,7 @@ export enum OptionTitle {
   StyleOverride = 'View style override',
   Animation = 'View animation',
   Schedule = 'Schedule options',
+
+  /** rendered as hidden inputs */
+  Hidden = 'Hidden options',
 }

apps/client/src/common/components/view-params-editor/viewParams.types.ts

@@ -12,9 +12,11 @@ type OptionsField = {
   defaultValue?: string;
 };
 
+type MultiselectOption = { value: string; label: string; colour: string };
+export type MultiselectOptions = Record<string, MultiselectOption>;
 type MultiOptionsField = {
   type: 'multi-option';
-  values: Record<string, { value: string; label: string; colour: string }>;
+  values: MultiselectOptions;
   defaultValue?: string;
 };
 
@@ -22,7 +24,7 @@ type StringField = { type: 'string'; defaultValue?: string; prefix?: string; pla
 type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
 type BooleanField = { type: 'boolean'; defaultValue: boolean };
 type ColourField = { type: 'colour'; defaultValue: string; placeholder?: string };
-type PersistedField = { type: 'persist'; defaultValue?: string; value: string };
+type PersistedField = { type: 'persist'; defaultValue?: string[]; values: string[] };
 
 export type ParamField = BaseField &
   (OptionsField | MultiOptionsField | StringField | NumberField | BooleanField | ColourField | PersistedField);