Merge branch 'master' into feat/http-integration

2026-08-13 03:13:47 +00:00 · 2023-11-19 21:05:31 +01:00
parent 5577fc0505 2316bbebac
commit c0f9521f86
162 changed files with 5342 additions and 3259 deletions
@@ -0,0 +1 @@
+ "ONTIME_VERSION.js"
@@ -1,4 +1,5 @@
 {
+  "root": true,
  "parserOptions": {
    "ecmaVersion": 2020
  },
@@ -6,8 +7,16 @@
    "es6": true,
    "jest": true
  },
+  "parser": "@typescript-eslint/parser",
  "extends": [
-    "eslint:recommended"
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "eslint-config-prettier"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
  ],
  "overrides": [
    {
@@ -21,6 +30,33 @@
    }
  ],
  "rules": {
-    "no-console": ["warn", { "allow": ["warn", "error"]}]
+    "no-useless-concat": "warn",
+    "prefer-template": "warn",
+    "no-console": [
+      "warn",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "prettier/prettier": [
+      "warn",
+      {
+        "endOfLine": "auto"
+      }
+    ]
  }
 }
@@ -16,17 +16,17 @@ jobs:
    - uses: actions/checkout@v3
    - name: Setup env
      run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-      
+
    - name: Setup Node.js environment
      uses: actions/setup-node@v3.6.0
      with:
        version: 16.16.0
-        
+
    - name: Setup pnpm
-      uses: pnpm/action-setup@v2.2.4
+      uses: pnpm/action-setup@v2
      with:
-        version: 7.26.3
-          
+        version: 8
+
    - name: Install dependencies
      run: pnpm install --frozen-lockfile

@@ -34,7 +34,7 @@ jobs:
      env:
        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
      run: pnpm turbo build:docker
-        
+
    - name: Docker Login
      uses: docker/login-action@v2.1.0
      with:
@@ -17,9 +17,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -52,9 +52,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -85,9 +85,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -20,23 +20,47 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

+      # Run code quality per package
+      - name: React - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/client
+
+      - name: Server - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/server
+
+      - name: Utils - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./packages/utils
+
+      - name: Types - Run linter
+        if: always()
+        run: pnpm lint
+        working-directory: ./packages/types
+
      # We choose to run tests separately
      - name: React - Run unit tests
+        if: always()
        run: pnpm test:pipeline
        working-directory: ./apps/client

      - name: Server - Run unit tests
+        if: always()
        run: pnpm test:pipeline
        working-directory: ./apps/server

      - name: Utils - Run unit tests
+        if: always()
        run: pnpm test:pipeline
        working-directory: ./packages/utils

@@ -52,9 +76,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint
@@ -76,7 +76,7 @@ You can generate a distribution for your OS by running the following steps.
 From the project root, run the following commands

 - __Install the project dependencies__ by running `pnpm i`
- __Build the UI and server__ by running `turbo build:local`
+- __Build the UI and server__ by running `turbo build:electron`
 - __Create the package__ by running `turbo dist-win`, `turbo dist-mac` or `turbo dist-linux`

 The build distribution assets will be at `.apps/electron/dist`
@@ -8,34 +8,18 @@
    "browser": true,
    "node": true
  },
-  "parser": "@typescript-eslint/parser",
  "extends": [
-    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "eslint-config-prettier",
-    "plugin:@tanstack/eslint-plugin-query/recommended",
-    "prettier"
+    "plugin:@tanstack/eslint-plugin-query/recommended"
  ],
  "plugins": [
    "react",
    "testing-library",
    "simple-import-sort",
-    "@tanstack/query",
-    "@typescript-eslint",
-    "prettier"
+    "@tanstack/query"
  ],
  "rules": {
-    "@typescript-eslint/no-non-null-assertion": "warn",
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ],
-    "no-useless-concat": "warn",
-    "prefer-template": "warn",
    "react/jsx-no-bind": [
      "error",
      {
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "2.9.0",
+  "version": "2.16.2",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^2.7.0",
@@ -12,8 +12,8 @@
    "@react-icons/all-files": "^4.1.0",
    "@sentry/react": "^7.46.0",
    "@sentry/tracing": "^7.46.0",
-    "@tanstack/react-query": "^4.28.0",
-    "@tanstack/react-query-devtools": "^4.29.0",
+    "@tanstack/react-query": "^5.8.4",
+    "@tanstack/react-query-devtools": "^5.8.4",
    "@tanstack/react-table": "^8.9.2",
    "autosize": "^6.0.1",
    "axios": "^1.2.0",
@@ -38,8 +38,9 @@
    "dev": "cross-env BROWSER=none vite",
    "build": "vite build",
    "build:local": "cross-env NODE_ENV=local vite build",
+    "build:electron": "cross-env NODE_ENV=local vite build",
    "build:docker": "vite build",
-    "lint": "eslint .",
+    "lint": "eslint . --quiet",
    "test": "vitest",
    "test:pipeline": "vitest run",
    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build"
@@ -58,22 +59,21 @@
  },
  "devDependencies": {
    "@sentry/vite-plugin": "^0.4.0",
-    "@tanstack/eslint-plugin-query": "^4.26.2",
+    "@tanstack/eslint-plugin-query": "^5.8.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^14.1.1",
    "@types/color": "^3.0.3",
-    "@types/luxon": "^3.2.0",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
    "@vitejs/plugin-react": "^3.0.1",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-jest": "^27.1.7",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-react": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
@@ -81,9 +81,9 @@
    "jsdom": "^21.1.0",
    "ontime-types": "workspace:*",
    "ontime-utils": "workspace:*",
-    "prettier": "^2.8.3",
+    "prettier": "^3.0.3",
    "sass": "^1.57.1",
-    "typescript": "^4.9.4",
+    "typescript": "^5.2.2",
    "vite": "^4.3.1",
    "vite-plugin-compression2": "^0.9.0",
    "vite-plugin-svgr": "^2.4.0",
@@ -2,8 +2,7 @@
 export const PROJECT_DATA = ['project'];
 export const ALIASES = ['aliases'];
 export const USERFIELDS = ['userFields'];
-export const RUNDOWN_TABLE_KEY = 'rundown';
-export const RUNDOWN_TABLE = [RUNDOWN_TABLE_KEY];
+export const RUNDOWN = ['rundown'];
 export const APP_INFO = ['appinfo'];
 export const OSC_SETTINGS = ['oscSettings'];
 export const HTTP_SETTINGS = ['httpSettings'];
@@ -2,18 +2,32 @@ import axios, { AxiosError } from 'axios';
 import { LogLevel } from 'ontime-types';
 import { generateId, millisToString } from 'ontime-utils';

+import { ontimeQueryClient } from '../queryClient';
 import { addLog } from '../stores/logger';
 import { nowInMillis } from '../utils/time';

-export function logAxiosError(prepend: string, error: unknown) {
-  let message;
+export function maybeAxiosError(error: unknown) {
  if (axios.isAxiosError(error)) {
    const statusText = (error as AxiosError).response?.statusText ?? '';
-    const data = (error as AxiosError).response?.data ?? '';
-    message = `${prepend} ${statusText}: ${data}`;
+    let data = (error as AxiosError).response?.data ?? '';
+    if (typeof data === 'object') {
+      if ('message' in data) {
+        data = JSON.stringify(data.message);
+      } else {
+        data = JSON.stringify(data);
+      }
+    }
+    return `${statusText}: ${data}`;
  } else {
-    message = `${prepend}: ${error}`;
+    if (typeof error !== 'string') {
+      return JSON.stringify(error);
+    }
+    return error;
  }
+}
+
+export function logAxiosError(prepend: string, error: unknown) {
+  const message = `${prepend}: ${maybeAxiosError(error)}`;

  addLog({
    id: generateId(),
@@ -23,3 +37,17 @@ export function logAxiosError(prepend: string, error: unknown) {
    text: message,
  });
 }
+
+/**
+ * Utility function invalidates react-query caches
+ */
+export async function invalidateAllCaches() {
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['project'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['aliases'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['userFields'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['rundown'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['appinfo'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['oscSettings'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['appSettings'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['viewSettings'] });
+}
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { OntimeRundown, OntimeRundownEntry } from 'ontime-types';
+import { GetRundownCached, OntimeRundown, OntimeRundownEntry } from 'ontime-types';

 import { rundownURL } from './apiConstants';

@@ -7,6 +7,16 @@ import { rundownURL } from './apiConstants';
 * @description HTTP request to fetch all events
 * @return {Promise}
 */
+export async function fetchCachedRundown(): Promise<GetRundownCached> {
+  const res = await axios.get(`${rundownURL}/cached`);
+  return res.data;
+}
+
+/**
+ * @deprecated use fetchCachedRundown instead
+ * @description HTTP request to fetch all events
+ * @return {Promise}
+ */
 export async function fetchRundown(): Promise<OntimeRundown> {
  const res = await axios.get(rundownURL);
  return res.data;
@@ -1,17 +1,20 @@
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import {
  Alias,
  OSCSettings,
  Subscription,
+  DatabaseModel,
+  GetInfo,
+  OntimeRundown,
  ProjectData,
  Settings,
  UserFields,
  ViewSettings,
  HTTPSettings,
 } from 'ontime-types';
+import { ExcelImportMap } from 'ontime-utils';

 import { apiRepoLatest } from '../../externals';
-import { InfoType } from '../models/Info';
 import fileDownload from '../utils/fileDownload';

 import { ontimeURL } from './apiConstants';
@@ -37,7 +40,7 @@ export async function postSettings(data: Settings) {
 * @description HTTP request to retrieve application info
 * @return {Promise}
 */
-export async function getInfo(): Promise<InfoType> {
+export async function getInfo(): Promise<GetInfo> {
  const res = await axios.get(`${ontimeURL}/info`);
  return res.data;
 }
@@ -152,17 +155,25 @@ export const downloadRundown = () => {
  return fileDownload(ontimeURL, { name: 'rundown', type: 'json' }, { type: 'application/json;charset=utf-8;' });
 };

+// TODO: should this be extracted to shared code?
+export type ProjectFileImportOptions = {
+  onlyRundown: boolean;
+};
+
 /**
 * @description HTTP request to upload events db
 * @return {Promise}
 */
-type UploadDataOptions = {
-  onlyRundown?: boolean;
-};
-export const uploadData = async (file: File, setProgress: (value: number) => void, options?: UploadDataOptions) => {
+export const uploadProjectFile = async (
+  file: File,
+  setProgress: (value: number) => void,
+  options?: Partial<ProjectFileImportOptions>,
+) => {
  const formData = new FormData();
  formData.append('userFile', file);
-  const onlyRundown = options?.onlyRundown || 'false';
+
+  const onlyRundown = Boolean(options?.onlyRundown);
+
  await axios
    .post(`${ontimeURL}/db?onlyRundown=${onlyRundown}`, formData, {
      headers: {
@@ -176,6 +187,47 @@ export const uploadData = async (file: File, setProgress: (value: number) => voi
    .then((response) => response.data.id);
 };

+/**
+ * @description Make patch changes to the objects in the db
+ * @return {Promise}
+ */
+export async function patchData(patchDb: Partial<DatabaseModel>) {
+  const response = await axios.patch(`${ontimeURL}/db`, patchDb);
+  return response;
+}
+
+type PostPreviewExcelResponse = {
+  rundown: OntimeRundown;
+  project: ProjectData;
+  userFields: UserFields;
+};
+
+/**
+ * @description Make patch changes to the objects in the db
+ * @return {Promise} - returns parsed rundown and userfields
+ */
+export async function postPreviewExcel(file: File, setProgress: (value: number) => void, options?: ExcelImportMap) {
+  const formData = new FormData();
+  formData.append('userFile', file);
+  formData.append('options', JSON.stringify(options));
+
+  const response: AxiosResponse<PostPreviewExcelResponse> = await axios.post(
+    `${ontimeURL}/preview-spreadsheet`,
+    formData,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
+        setProgress(complete);
+      },
+    },
+  );
+
+  return response;
+}
+
 export type HasUpdate = {
  url: string;
  version: string;
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';

-import { TitleActions } from '../../../../features/event-editor/composite/EventEditorDataLeft';
+import { EditorUpdateFields } from '../../../../features/event-editor/EventEditor';

 import Swatch from './Swatch';

@@ -8,8 +8,8 @@ import style from './SwatchSelect.module.scss';

 interface ColourInputProps {
  value: string;
-  name: TitleActions;
-  handleChange: (newValue: TitleActions, name: string) => void;
+  name: EditorUpdateFields;
+  handleChange: (newValue: EditorUpdateFields, name: string) => void;
 }

 const colours = [
@@ -19,9 +19,11 @@ interface TextInputProps extends BaseProps {
  isTextArea?: false;
 }

+type ResizeOptions = 'horizontal' | 'vertical' | 'none';
+
 interface TextAreaProps extends BaseProps {
  isTextArea: true;
-  resize?: 'horizontal' | 'vertical' | 'none';
+  resize?: ResizeOptions;
 }

 type InputProps = TextInputProps | TextAreaProps;
@@ -35,7 +37,7 @@ export default function TextInput(props: InputProps) {
  const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
  const textAreaProps = useReactiveTextInput(initialText, submitCallback);

-  let resize = 'none';
+  let resize: ResizeOptions = 'none';
  if (isTextArea) {
    resize = (props as TextAreaProps)?.resize ?? 'none';
  }
@@ -25,8 +25,14 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
  return (
    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
      <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-      <div className='multiprogress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
-      <div className='multiprogress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
+      <div
+        className='multiprogress-bar__bg-warning'
+        style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
+      />
+      <div
+        className='multiprogress-bar__bg-danger'
+        style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+      />
      <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
    </div>
  );
@@ -21,7 +21,6 @@ interface ScheduleProviderProps {
  events: OntimeEvent[];
  selectedEventId: string | null;
  isBackstage?: boolean;
-  eventsPerPage?: number;
  time?: number;
 }

@@ -30,7 +29,6 @@ export const ScheduleProvider = ({
  events,
  selectedEventId,
  isBackstage = false,
-  eventsPerPage = 7,
  time = 10,
 }: PropsWithChildren<ScheduleProviderProps>) => {
  const [visiblePage, setVisiblePage] = useState(0);
@@ -39,6 +37,7 @@ export const ScheduleProvider = ({
  // look for overrides from views
  const hidePast = isStringBoolean(searchParams.get('hidePast'));
  const stopCycle = isStringBoolean(searchParams.get('stopCycle'));
+  const eventsPerPage = Number(searchParams.get('eventsPerPage') ?? 7);

  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);

@@ -14,16 +14,7 @@ interface ScheduleItemProps {
 }

 export default function ScheduleItem(props: ScheduleItemProps) {
-  const {
-    selected,
-    timeStart,
-    timeEnd,
-    title,
-    presenter,
-    backstageEvent,
-    colour,
-    skip,
-  } = props;
+  const { selected, timeStart, timeEnd, title, presenter, backstageEvent, colour, skip } = props;

  const start = formatTime(timeStart, { format: 'hh:mm' });
  const end = formatTime(timeEnd, { format: 'hh:mm' });
@@ -37,9 +28,7 @@ export default function ScheduleItem(props: ScheduleItemProps) {
        {`${start} → ${end} ${backstageEvent ? '*' : ''}`}
      </div>
      <div className='entry-title'>{title}</div>
-      {presenter && (
-        <div className='entry-presenter'>{presenter}</div>
-      )}
+      {presenter && <div className='entry-presenter'>{presenter}</div>}
    </li>
  );
 }
@@ -13,12 +13,11 @@ export default function ScheduleNav({ className }: ScheduleNavProps) {
    <div className={`schedule-nav ${className}`}>
      {numPages > 1 &&
        [...Array(numPages).keys()].map((i) => (
-            <div
-              key={i}
-              className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
-            />
-          ),
-        )}
+          <div
+            key={i}
+            className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
+          />
+        ))}
    </div>
  );
 }
@@ -1,5 +1,5 @@
 import { FormEvent, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 import {
  Button,
  Drawer,
@@ -12,11 +12,27 @@ import {
  useDisclosure,
 } from '@chakra-ui/react';

+import { useLocalStorage } from '../../../common/hooks/useLocalStorage';
+
 import ParamInput from './ParamInput';
 import { ParamField } from './types';

 import style from './ViewParamsEditor.module.scss';

+type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
+type SavedViewParams = Record<string, ViewParamsObj>;
+
+const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj) =>
+  Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
+    if (typeof value === 'string' && value.length) {
+      newSearchParams.set(id, value);
+
+      return newSearchParams;
+    }
+
+    return newSearchParams;
+  }, new URLSearchParams());
+
 interface EditFormDrawerProps {
  paramFields: ParamField[];
 }
@@ -24,6 +40,8 @@ interface EditFormDrawerProps {
 export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
  const [searchParams, setSearchParams] = useSearchParams();
  const { isOpen, onClose, onOpen } = useDisclosure();
+  const { pathname } = useLocation();
+  const [storedViewParams, setStoredViewParams] = useLocalStorage<SavedViewParams>('ontime-views', {});

  useEffect(() => {
    const isEditing = searchParams.get('edit');
@@ -33,6 +51,19 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
    }
  }, [searchParams, onOpen]);

+  useEffect(() => {
+    const viewParamsObjFromLocalStorage = storedViewParams[pathname];
+
+    if (viewParamsObjFromLocalStorage !== undefined) {
+      const defaultSearchParams = getURLSearchParamsFromObj(viewParamsObjFromLocalStorage);
+      setSearchParams(defaultSearchParams);
+    }
+
+    // linter is asking for `setSearchParams` in the useEffect deps
+    // rule is disabled since adding `setSearchParams` results in unnecessary re-renders
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [storedViewParams, pathname]);
+
  const onEditDrawerClose = () => {
    onClose();

@@ -41,6 +72,7 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
  };

  const clearParams = () => {
+    setStoredViewParams({ ...storedViewParams, [pathname]: {} });
    setSearchParams();
    onClose();
  };
@@ -49,15 +81,9 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
    formEvent.preventDefault();

    const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
-    const newSearchParams = Object.entries(newParamsObject).reduce((newSearchParams, [id, value]) => {
-      if (typeof value === 'string' && value.length) {
-        newSearchParams.set(id, value);
+    const newSearchParams = getURLSearchParamsFromObj(newParamsObject);

-        return newSearchParams;
-      }
-
-      return newSearchParams;
-    }, new URLSearchParams());
+    setStoredViewParams({ ...storedViewParams, [pathname]: newParamsObject });
    setSearchParams(newSearchParams);
  };

@@ -208,6 +208,12 @@ export const BACKSTAGE_OPTIONS: ParamField[] = [
    description: 'Schedule will not auto-cycle through events',
    type: 'boolean',
  },
+  {
+    id: 'eventsPerPage',
+    title: 'Events per page',
+    description: 'Sets the number of events on the page, can cause overlow',
+    type: 'number',
+  },
 ];

 export const PUBLIC_OPTIONS: ParamField[] = [
@@ -224,6 +230,12 @@ export const PUBLIC_OPTIONS: ParamField[] = [
    description: 'Schedule will not auto-cycle through events',
    type: 'boolean',
  },
+  {
+    id: 'eventsPerPage',
+    title: 'Events per page',
+    description: 'Sets the number of events on the page, can cause overlow',
+    type: 'number',
+  },
 ];
 export const STUDIO_CLOCK_OPTIONS: ParamField[] = [
  TIME_FORMAT_OPTION,
@@ -25,7 +25,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
  const [operatorAuth, setOperatorAuth] = useState(true);

  useEffect(() => {
-    if (status === 'loading') return;
+    if (status === 'pending') return;
    if (!data) return;
    const previousEditor = sessionStorage.getItem(storageKeys.editor);

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { GetInfo } from 'ontime-types';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { APP_INFO } from '../api/apiConstants';
@@ -6,7 +7,7 @@ import { getInfo } from '../api/ontimeApi';
 import { ontimePlaceholderInfo } from '../models/Info';

 export default function useInfo() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isError, refetch, isFetching } = useQuery<GetInfo>({
    queryKey: APP_INFO,
    queryFn: getInfo,
    placeholderData: ontimePlaceholderInfo,
@@ -16,5 +17,5 @@ export default function useInfo() {
    networkMode: 'always',
  });

-  return { data, status, isError, refetch };
+  return { data, status, isError, refetch, isFetching };
 }
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-nocheck -- working on it
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { OSCSettings } from 'ontime-types';

@@ -24,20 +26,20 @@ export default function useOscSettings() {
 }

 export function useOscSettingsMutation() {
-  const { isLoading, mutateAsync } = useMutation({
+  const { isPending, mutateAsync } = useMutation({
    mutationFn: postOSC,
    onError: (error) => logAxiosError('Error saving OSC settings', error),
    onSuccess: (res) => ontimeQueryClient.setQueryData(OSC_SETTINGS, res.data),
    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
  });
-  return { isLoading, mutateAsync };
+  return { isPending, mutateAsync };
 }

 export function usePostOscSubscriptions() {
-  const { isLoading, mutateAsync } = useMutation({
+  const { isPending, mutateAsync } = useMutation({
    mutationFn: postOscSubscriptions,
    onError: (error) => logAxiosError('Error saving OSC settings', error),
    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
  });
-  return { isLoading, mutateAsync };
+  return { isPending, mutateAsync };
 }
@@ -1,19 +1,29 @@
 import { useQuery } from '@tanstack/react-query';
+import { GetRundownCached } from 'ontime-types';

 import { queryRefetchInterval } from '../../ontimeConfig';
-import { RUNDOWN_TABLE } from '../api/apiConstants';
-import { fetchRundown } from '../api/eventsApi';
+import { RUNDOWN } from '../api/apiConstants';
+import { fetchCachedRundown } from '../api/eventsApi';

+const cachedRundownPlaceholder = { rundown: [], revision: -1 };
+
+// TODO: can we leverage structural sharing to see if data has changed?
 export default function useRundown() {
-  const { data, status, isError, refetch } = useQuery({
-    queryKey: RUNDOWN_TABLE,
-    queryFn: fetchRundown,
-    placeholderData: [],
+  const { data, status, isError, refetch, isFetching } = useQuery<GetRundownCached>({
+    queryKey: RUNDOWN,
+    queryFn: fetchCachedRundown,
+    placeholderData: cachedRundownPlaceholder,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchInterval,
    networkMode: 'always',
+    // structuralSharing: (oldData: GetRundownCached | undefined, newData: GetRundownCached) => {
+    //   if (oldData === undefined) {
+    //     return cachedRundownPlaceholder;
+    //   }
+    //   const hasDataChanged = oldData?.revision === newData.revision;
+    //   return hasDataChanged ? oldData : newData;
+    // },
  });
-
-  return { data, status, isError, refetch };
+  return { data: data?.rundown ?? [], status, isError, refetch, isFetching };
 }
@@ -6,7 +6,6 @@ export default function useClickOutside<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>,
  callback: ClickOutsideEventHandler,
 ) {
-
  useEffect(() => {
    function handleClick(event: MouseEvent) {
      const element = ref?.current;
@@ -1,7 +1,7 @@
 export default function useElectronEvent() {
  const isElectron = window?.process?.type === 'renderer';

-  const sendToElectron = (channel: string, args?: string | Record<string, any>) => {
+  const sendToElectron = (channel: string, args?: string | Record<string, unknown>) => {
    if (isElectron) {
      window?.ipcRenderer.send(channel, args);
    }
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
+import { GetRundownCached, isOntimeEvent, OntimeRundownEntry } from 'ontime-types';
 import { getCueCandidate, swapOntimeEvents } from 'ontime-utils';

-import { RUNDOWN_TABLE, RUNDOWN_TABLE_KEY } from '../api/apiConstants';
+import { RUNDOWN } from '../api/apiConstants';
 import { logAxiosError } from '../api/apiUtils';
 import {
  ReorderEntry,
@@ -36,7 +36,7 @@ export const useEventAction = () => {
    // Fetch anyway, just to be sure
    mutationFn: requestPostEvent,
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -67,8 +67,10 @@ export const useEventAction = () => {
          after: options?.after,
        };

+        const rundown = queryClient.getQueryData<GetRundownCached>(RUNDOWN)?.rundown ?? [];
+
        if (newEvent?.cue === undefined) {
-          newEvent.cue = getCueCandidate(queryClient.getQueryData(RUNDOWN_TABLE) || [], options?.after);
+          newEvent.cue = getCueCandidate(rundown, options?.after);
        }

        // hard coding duration value to be as expected for now
@@ -78,7 +80,6 @@ export const useEventAction = () => {
        }

        if (applicationOptions.startTimeIsLastEnd && applicationOptions?.lastEventId) {
-          const rundown = queryClient.getQueryData(RUNDOWN_TABLE) as OntimeRundown;
          const previousEvent = rundown.find((event) => event.id === applicationOptions.lastEventId);
          if (previousEvent !== undefined && previousEvent.type === 'event') {
            newEvent.timeStart = previousEvent.timeEnd;
@@ -100,7 +101,7 @@ export const useEventAction = () => {
        // @ts-expect-error -- we know that the object is well formed now
        await _addEventMutation.mutateAsync(newEvent);
      } catch (error) {
-        logAxiosError('Error fetching data', error);
+        logAxiosError('Failed adding event', error);
      }
    },
    [_addEventMutation, defaultPublic, queryClient, startTimeIsLastEnd],
@@ -115,25 +116,35 @@ export const useEventAction = () => {
    // we optimistically update here
    onMutate: async (newEvent) => {
      // cancel ongoing queries
-      await queryClient.cancelQueries([RUNDOWN_TABLE_KEY, newEvent.id]);
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousEvent = queryClient.getQueryData([RUNDOWN_TABLE_KEY, newEvent.id]);

-      // optimistically update object
-      queryClient.setQueryData([RUNDOWN_TABLE_KEY, newEvent.id], newEvent);
+      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);
+
+      if (previousData) {
+        // optimistically update object
+        const optimisticRundown = [...previousData.rundown];
+        const index = optimisticRundown.findIndex((event) => event.id === newEvent.id);
+        if (index > -1) {
+          // @ts-expect-error -- we expect the event types to match
+          optimisticRundown[index] = { ...optimisticRundown[index], ...newEvent };
+
+          queryClient.setQueryData(RUNDOWN, { rundown: optimisticRundown, revision: -1 });
+        }
+      }

      // Return a context with the previous and new events
-      return { previousEvent, newEvent };
+      return { previousData, newEvent };
    },
    // Mutation fails, rollback undoes optimist update
    onError: (_error, _newEvent, context) => {
-      queryClient.setQueryData([RUNDOWN_TABLE_KEY, context?.newEvent.id], context?.previousEvent);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
    onSettled: async () => {
-      await queryClient.invalidateQueries([RUNDOWN_TABLE_KEY]);
+      await queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -161,28 +172,37 @@ export const useEventAction = () => {
    // we optimistically update here
    onMutate: async (eventId) => {
      // cancel ongoing queries
-      await queryClient.cancelQueries([RUNDOWN_TABLE_KEY, eventId]);
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
+      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);

-      const filtered = [...(previousEvents as OntimeRundown)].filter((e) => e.id !== eventId);
+      if (previousData) {
+        // optimistically update object
+        const optimisticRundown = [...previousData.rundown];
+        const index = optimisticRundown.findIndex((event) => event.id === eventId);
+        if (index > -1) {
+          optimisticRundown.splice(index, 1);

-      // optimistically update object
-      queryClient.setQueryData(RUNDOWN_TABLE, filtered);
+          queryClient.setQueryData(RUNDOWN, {
+            rundown: optimisticRundown,
+            revision: -1,
+          });
+        }
+      }

      // Return a context with the previous and new events
-      return { previousEvents };
+      return { previousData };
    },

    // Mutation fails, rollback undoes optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -210,26 +230,26 @@ export const useEventAction = () => {
    // we optimistically update here
    onMutate: async () => {
      // cancel ongoing queries
-      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
+      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);

      // optimistically update object
-      queryClient.setQueryData(RUNDOWN_TABLE, []);
+      queryClient.setQueryData(RUNDOWN, { rundown: [], revision: -1 });

      // Return a context with the previous and new events
-      return { previousEvents };
+      return { previousData };
    },

    // Mutation fails, rollback undos optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -253,7 +273,7 @@ export const useEventAction = () => {
    mutationFn: requestApplyDelay,
    // Mutation finished, failed or successful
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -281,30 +301,32 @@ export const useEventAction = () => {
    // we optimistically update here
    onMutate: async (data) => {
      // cancel ongoing queries
-      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
+      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);

-      const e = [...(previousEvents as OntimeRundown)];
-      const [reorderedItem] = e.splice(data.from, 1);
-      e.splice(data.to, 0, reorderedItem);
+      if (previousData) {
+        // optimistically update object
+        const optimisticRundown = [...previousData.rundown];
+        const [reorderedItem] = optimisticRundown.splice(data.from, 1);
+        optimisticRundown.splice(data.to, 0, reorderedItem);

-      // optimistically update object
-      queryClient.setQueryData(RUNDOWN_TABLE, e);
+        queryClient.setQueryData(RUNDOWN, { rundown: optimisticRundown, revision: -1 });
+      }

      // Return a context with the previous and new events
-      return { previousEvents };
+      return { previousData };
    },

    // Mutation fails, rollback undoes optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -337,31 +359,32 @@ export const useEventAction = () => {
    // we optimistically update here
    onMutate: async ({ from, to }) => {
      // cancel ongoing queries
-      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const rundown = queryClient.getQueryData(RUNDOWN_TABLE) as OntimeRundown;
+      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);
+      if (previousData) {
+        // optimistically update object
+        const fromEventIndex = previousData.rundown.findIndex((event) => event.id === from);
+        const toEventIndex = previousData.rundown.findIndex((event) => event.id === to);

-      const fromEventIndex = rundown.findIndex((event) => event.id === from);
-      const toEventIndex = rundown.findIndex((event) => event.id === to);
+        const optimisticRundown = swapOntimeEvents(previousData.rundown, fromEventIndex, toEventIndex);

-      const previousEvents = swapOntimeEvents(rundown, fromEventIndex, toEventIndex);
-
-      // optimistically update object
-      queryClient.setQueryData(RUNDOWN_TABLE, previousEvents);
+        queryClient.setQueryData(RUNDOWN, { rundown: optimisticRundown, revision: -1 });
+      }

      // Return a context with the previous events
-      return { previousEvents };
+      return { previousData };
    },

    // Mutation fails, rollback undoes optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -1,10 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';

 export type TLogLevel = 'debug' | 'info' | 'warn' | 'error' | 'none';

@@ -26,13 +20,13 @@ const LOG_LEVEL: Record<TLogLevel, number> = {
 };

 const useFitText = ({
-                      logLevel: logLevelOption = 'info',
-                      maxFontSize = 100,
-                      minFontSize = 20,
-                      onFinish,
-                      onStart,
-                      resolution = 5,
-                    }: TOptions = {}) => {
+  logLevel: logLevelOption = 'info',
+  maxFontSize = 100,
+  minFontSize = 20,
+  onFinish,
+  onStart,
+  resolution = 5,
+}: TOptions = {}) => {
  const logLevel = LOG_LEVEL[logLevelOption];

  const initState = useCallback(() => {
@@ -112,8 +106,7 @@ const useFitText = ({
    const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;
    const isOverflow =
      !!ref.current &&
-      (ref.current.scrollHeight > ref.current.offsetHeight ||
-        ref.current.scrollWidth > ref.current.offsetWidth);
+      (ref.current.scrollHeight > ref.current.offsetHeight || ref.current.scrollWidth > ref.current.offsetWidth);
    const isFailed = isOverflow && fontSize === fontSizePrev;
    const isAsc = fontSize > fontSizePrev;

@@ -123,9 +116,7 @@ const useFitText = ({
      if (isFailed) {
        isCalculatingRef.current = false;
        if (logLevel <= LOG_LEVEL.info) {
-          console.info(
-            `[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`,
-          );
+          console.info(`[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`);
        }
      } else if (isOverflow) {
        setState({
@@ -160,16 +151,7 @@ const useFitText = ({
      fontSizeMin: newMin,
      fontSizePrev: fontSize,
    });
-  }, [
-    calcKey,
-    fontSize,
-    fontSizeMax,
-    fontSizeMin,
-    fontSizePrev,
-    onFinish,
-    ref,
-    resolution,
-  ]);
+  }, [calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev, onFinish, ref, resolution]);

  return { fontSize: `${fontSize}%`, ref };
 };
@@ -21,7 +21,7 @@ interface UseFollowComponentProps {
  scrollRef: MutableRefObject<HTMLElement | null>;
  doFollow: boolean;
  topOffset?: number;
-  setScrollFlag?: () => void;
+  setScrollFlag?: (newValue: boolean) => void;
 }

 export default function useFollowComponent(props: UseFollowComponentProps) {
@@ -34,14 +34,15 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
    }

    if (followRef.current && scrollRef.current) {
+      setScrollFlag?.(true);
      // Use requestAnimationFrame to ensure the component is fully loaded
      window.requestAnimationFrame(() => {
-        setScrollFlag?.();
        scrollToComponent(
          followRef as MutableRefObject<HTMLElement>,
          scrollRef as MutableRefObject<HTMLElement>,
          topOffset,
        );
+        setScrollFlag?.(false);
      });
    }

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-nocheck -- working on it
 import { useCallback, useEffect, useState } from 'react';

 interface WebkitDocument extends Document {
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';

 /**
 * @description utility hook to around setInterval
@@ -46,7 +46,7 @@ export const useLocalStorage = <T>(key: string, initialValue: T): [T, (value: T
      setStoredValue(valueToStore);
      window.localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
    } catch (error) {
-      console.log(error);
+      console.error(error);
    }
  };
  return [storedValue, setValue];
@@ -1,19 +1,25 @@
-import { Settings } from 'ontime-types';
+import { GetInfo, OSCSettings } from 'ontime-types';

-type NetworkInterfaceType = {
-  name: string;
-  address: string;
-};
-
-export type InfoType = {
-  networkInterfaces: NetworkInterfaceType[];
-  settings: Pick<Settings, 'version' | 'serverPort'>;
-};
-
-export const ontimePlaceholderInfo: InfoType = {
-  networkInterfaces: [],
-  settings: {
-    version: 2,
-    serverPort: 4001,
+export const oscPlaceholderSettings: OSCSettings = {
+  portIn: 0,
+  portOut: 0,
+  targetIP: '',
+  enabledIn: false,
+  enabledOut: false,
+  subscriptions: {
+    onLoad: [],
+    onStart: [],
+    onPause: [],
+    onStop: [],
+    onUpdate: [],
+    onFinish: [],
  },
 };
+
+export const ontimePlaceholderInfo: GetInfo = {
+  networkInterfaces: [],
+  version: '2.0.0',
+  serverPort: 4001,
+  osc: oscPlaceholderSettings,
+  cssOverride: '',
+};
@@ -2,7 +2,7 @@ import { Settings } from 'ontime-types';

 export const ontimePlaceholderSettings: Settings = {
  app: 'ontime',
-  version: 2,
+  version: '2.0.0',
  serverPort: 4001,
  editorKey: null,
  operatorKey: null,
@@ -3,7 +3,7 @@ import { QueryClient } from '@tanstack/react-query';
 export const ontimeQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
-      cacheTime: 1000 * 60 * 10, // 10 min
+      gcTime: 1000 * 60 * 10, // 10 min
    },
  },
 });
@@ -1,5 +1,6 @@
 import { resolvePath } from 'react-router-dom';
-import { validateAlias, generateURLFromAlias, getAliasRoute } from '../aliases';
+
+import { generateURLFromAlias, getAliasRoute, validateAlias } from '../aliases';

 describe('An alias fails if incorrect', () => {
  const testsToFail = [
@@ -12,7 +12,7 @@ test('Clamps a set of numbers correctly', () => {
    { num: -50, min: 0, max: 0, result: 0 },
    { num: 50.5, min: 0, max: 100, result: 50.5 },
    { num: 50, min: 0, max: 20.32, result: 20.32 },
-    { num: 10, min: 20.32, max: 40, result: 20.32 }
+    { num: 10, min: 20.32, max: 40, result: 20.32 },
  ];

  testCases.forEach((t) => expect(clamp(t.num, t.min, t.max)).toBe(t.result));
@@ -129,7 +129,7 @@ export const socketSend = (message: any) => {
  }
 };

-export const socketSendJson = (type: string, payload?: any) => {
+export const socketSendJson = (type: string, payload?: unknown) => {
  socketSend(
    JSON.stringify({
      type,
@@ -15,8 +15,8 @@ export const getAccessibleColour = (bgColour?: string): ColourCombination => {
    try {
      const textColor = Color(bgColour).isLight() ? 'black' : '#fffffa';
      return { backgroundColor: bgColour, color: textColor };
-    } catch (error) {
-      console.log(`Unable to parse colour: ${bgColour}`);
+    } catch (_error) {
+      /* we do not handle errors here */
    }
  }
  return { backgroundColor: '#000', color: '#fffffa' };
@@ -13,9 +13,8 @@ declare global {
    };
    process: {
      type: string;
-    }
+    };
  }
 }

-// eslint-disable-next-line import/no-anonymous-default-export
-export default {}
+export default {};
@@ -6,6 +6,6 @@ import 'vitest';
 // https://github.com/testing-library/jest-dom/issues/123
 declare global {
  namespace Vi {
-    interface Assertion<T = any> extends TestingLibraryMatchers<T, void> {}
+    type Assertion<T = any> = TestingLibraryMatchers<T, void>;
  }
 }
@@ -22,7 +22,7 @@ const withAlias = <P extends object>(Component: ComponentType<P>) => {
      }
    }, [data, searchParams, navigate, location]);

-    return <Component {...props} />;
+    return <Component {...(props as P)} />;
  };
 };

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import Color from 'color';
 import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';

 import useFollowComponent from '../../common/hooks/useFollowComponent';
@@ -117,6 +118,14 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                let rowBgColour: string | undefined;
                if (isSelected) {
                  rowBgColour = 'var(--cuesheet-running-bg-override, #D20300)'; // $red-700
+                } else if (row.original.colour) {
+                  try {
+                    // the colour is user defined and might be invalid
+                    const colour = new Color(row.original.colour).alpha(0.25);
+                    rowBgColour = colour.hsl().string();
+                  } catch (_error) {
+                    /* we do not handle errors here */
+                  }
                }

                return (
@@ -141,11 +141,7 @@ export default function CuesheetWrapper() {
    <div className={styles.tableWrapper} data-testid='cuesheet'>
      <CuesheetTableHeader handleExport={handleOpenModal} featureData={featureData} />
      <Cuesheet data={rundown} columns={columns} handleUpdate={handleUpdate} selectedId={featureData.selectedEventId} />
-      <ExportModal
-        isOpen={isModalOpen}
-        onClose={onModalClose}
-        buttonVariants={{ csv: 'ontime-filled', json: 'ontime-ghosted' }}
-      />
+      <ExportModal isOpen={isModalOpen} onClose={onModalClose} />
    </div>
  );
 }
@@ -1,6 +0,0 @@
-interface CuesheetRowProps {
-  row: OntimeRundownEntry;
-  isSelected: boolean;
-}
-
-function CuesheetRow() {}
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, ReactNode } from 'react';
 import { Button, Checkbox, Switch } from '@chakra-ui/react';
 import { Column } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';
@@ -44,7 +44,7 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
                  defaultChecked={visible}
                  onChange={column.getToggleVisibilityHandler()}
                />
-                {columnHeader}
+                {columnHeader as ReactNode}
              </label>
            );
          })}
@@ -9,7 +9,7 @@ import { millisToString } from 'ontime-utils';
 * @return {string}
 */

-export const parseField = (field: keyof OntimeRundown, data: unknown): string => {
+export const parseField = <T extends OntimeEntryCommonKeys>(field: T, data: unknown): string => {
  let val;
  switch (field) {
    case 'timeStart':
@@ -96,6 +96,7 @@ export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, userF

  rundown.forEach((entry) => {
    const row: string[] = [];
+    // @ts-expect-error -- not sure how to type this
    fieldOrder.forEach((field) => row.push(parseField(field, entry[field])));
    data.push(row);
  });
@@ -2,16 +2,15 @@ import { useCallback } from 'react';
 import { Textarea } from '@chakra-ui/react';

 import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
-
-import { TitleActions } from './EventEditorDataLeft';
+import { EditorUpdateFields } from '../EventEditor';

 import style from '../EventEditor.module.scss';

 interface CountedTextAreaProps {
-  field: TitleActions;
+  field: EditorUpdateFields;
  label: string;
  initialValue: string;
-  submitHandler: (field: TitleActions, value: string) => void;
+  submitHandler: (field: EditorUpdateFields, value: string) => void;
 }

 export default function CountedTextArea(props: CountedTextAreaProps) {
@@ -151,11 +151,7 @@ const MenuBar = (props: MenuBarProps) => {
        size='sm'
      />

-      <ExportModal
-        onClose={onModalClose}
-        isOpen={isModalOpen}
-        buttonVariants={{ csv: 'ontime-subtle-on-light', json: 'ontime-filled' }}
-      />
+      <ExportModal onClose={onModalClose} isOpen={isModalOpen} />

      <div className={style.gap} />
      <TooltipActionBtn
@@ -41,8 +41,8 @@ $el-padding-with-compensation: 24px; // 16 + 8
 .title {
  font-size: $inner-section-text-size;
  color: $gray-500;
-  padding-left: 8px;
-  margin: 8px 0;
+  padding-left: 0.5rem;
+  margin: 0.5rem 0;
  text-transform: uppercase;
 }

@@ -107,6 +107,16 @@ $el-padding-with-compensation: 24px; // 16 + 8
  color: $error-red;
 }

+.success {
+  @include subsection;
+  color: $action-blue;
+}
+
+.feedbackSection {
+  justify-content: flex-start;
+
+}
+
 .buttonSection {
  margin-top: $section-spacing;
  display: flex;
@@ -117,6 +127,10 @@ $el-padding-with-compensation: 24px; // 16 + 8
  flex-grow: 1;
 }

+.vSpacer {
+  height: 2rem;
+}
+
 .shiftRight {
  align-self: flex-end;
 }
@@ -135,6 +149,12 @@ $el-padding-with-compensation: 24px; // 16 + 8
  grid-template-columns: auto 1fr;
 }

+.twoEqualColumn {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
 .padBottom {
  padding-bottom: $element-spacing;
 }
@@ -1,10 +1,9 @@
-.modalHeader {
-  font-weight: 400;
-}
+@use '../../../theme/v2Styles' as *;

-.modalBody {
-  display: flex;
+.buttonRow {
  justify-content: space-between;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: $section-spacing;
+  display: flex;
+  gap: $section-spacing;
+  margin: 0 0.25rem;
 }
@@ -3,29 +3,26 @@ import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader,
 import styles from './ExportModal.module.scss';

 export type ExportType = 'csv' | 'json';
+
 interface ExportModalProps {
  isOpen: boolean;
  onClose: (type?: ExportType) => void;
-  buttonVariants: {
-    csv: string;
-    json: string;
-  };
 }

 export default function ExportModal(props: ExportModalProps) {
-  const { isOpen, onClose, buttonVariants } = props;
+  const { isOpen, onClose } = props;

  return (
-    <Modal isOpen={isOpen} onClose={onClose} motionPreset='scale' size='xl' colorScheme='blackAlpha'>
+    <Modal isOpen={isOpen} onClose={onClose} motionPreset='slideInBottom' size='xl' variant='ontime-small'>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader className={styles.modalHeader}>Download options</ModalHeader>
        <ModalCloseButton />
-        <ModalBody className={styles.modalBody}>
-          <Button onClick={() => onClose('csv')} variant={buttonVariants.csv} width='48%'>
-            rundown as CSV
+        <ModalBody className={styles.buttonRow}>
+          <Button onClick={() => onClose('csv')} variant='ontime-subtle-on-light' width='100%'>
+            Rundown as CSV
          </Button>
-          <Button onClick={() => onClose('json')} variant={buttonVariants.json} width='48%'>
+          <Button onClick={() => onClose('json')} variant='ontime-filled' width='100%'>
            Project file
          </Button>
        </ModalBody>
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-nocheck -- working on it
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { FormControl, Input, Switch } from '@chakra-ui/react';
@@ -18,7 +18,7 @@ import {
 } from '@chakra-ui/react';
 import type { ProjectData } from 'ontime-types';

-import { PROJECT_DATA, RUNDOWN_TABLE } from '../../../common/api/apiConstants';
+import { PROJECT_DATA, RUNDOWN } from '../../../common/api/apiConstants';
 import { postNew } from '../../../common/api/ontimeApi';
 import useProjectData from '../../../common/hooks-query/useProjectData';
 import { projectDataPlaceholder } from '../../../common/models/ProjectData';
@@ -52,8 +52,8 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
  const onSubmit = async (data: Partial<ProjectData>) => {
    try {
      await postNew(data);
-      await ontimeQueryClient.invalidateQueries(PROJECT_DATA);
-      await ontimeQueryClient.invalidateQueries(RUNDOWN_TABLE);
+      await ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_DATA });
+      await ontimeQueryClient.invalidateQueries({ queryKey: RUNDOWN });

      onClose();
    } catch (_) {
@@ -21,7 +21,9 @@ import style from './SettingsModal.module.scss';
 const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';

 // we wrap the array in an object to be simplify react-hook-form
-type Aliases = { aliases: Alias[] };
+type Aliases = {
+  aliases: Alias[];
+};

 export default function AliasesForm() {
  const { data, status, isFetching, refetch } = useAliases();
@@ -46,7 +48,7 @@ export default function AliasesForm() {

  useEffect(() => {
    if (data) {
-      reset(data);
+      reset({ aliases: data });
    }
  }, [data, reset]);

@@ -76,7 +78,7 @@ export default function AliasesForm() {
    });
  };

-  const disableInputs = status === 'loading';
+  const disableInputs = status === 'pending';
  const hasTooManyOptions = fields.length >= 20;

  if (isFetching) {
@@ -93,8 +95,7 @@ export default function AliasesForm() {
          <AlertDescription>
            Custom aliases allow providing a short name for any ontime URL. <br />
            It serves two primary purposes: <br />
-            - Providing dynamic URLs for automation or unattended screens <br />
-            - Simplifying complex URLs
+            - Providing dynamic URLs for automation or unattended screens <br />- Simplifying complex URLs
            <ModalLink href={aliasesDocsUrl}>For more information, see the docs</ModalLink>
          </AlertDescription>
        </div>
@@ -50,7 +50,7 @@ export default function AppSettingsModal() {
    reset(data);
  };

-  const disableInputs = status === 'loading';
+  const disableInputs = status === 'pending';

  if (isFetching) {
    return <ModalLoader />;
@@ -87,7 +87,7 @@ export default function AppSettingsModal() {
        description='Protect the editor with a pin code'
        error={errors.editorKey?.message}
      >
-        <ModalPinInput register={register} formName='editorKey' isDisabled={disableInputs} />
+        <ModalPinInput register={register as any} formName='editorKey' isDisabled={disableInputs} />
      </ModalSplitInput>
      <ModalSplitInput
        field='operatorKey'
@@ -95,7 +95,7 @@ export default function AppSettingsModal() {
        description='Protect the cuesheet with a pin code'
        error={errors.operatorKey?.message}
      >
-        <ModalPinInput register={register} formName='operatorKey' isDisabled={disableInputs} />
+        <ModalPinInput register={register as any} formName='operatorKey' isDisabled={disableInputs} />
      </ModalSplitInput>
      <div style={{ height: '16px' }} />
      <ModalSplitInput
@@ -51,7 +51,7 @@ export default function CuesheetSettingsForm() {
    reset(data);
  };

-  const disableInputs = status === 'loading';
+  const disableInputs = status === 'pending';

  if (isFetching) {
    return <ModalLoader />;
@@ -3,8 +3,12 @@ import { UseFormRegister } from 'react-hook-form';
 import { IconButton, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
 import { IoEyeOutline } from '@react-icons/all-files/io5/IoEyeOutline';

+interface FormInput {
+  [key: string]: string;
+}
+
 interface ModalPinInputProps {
-  register: UseFormRegister<any>;
+  register: UseFormRegister<FormInput>;
  formName: string;
  isDisabled?: boolean;
 }
@@ -48,7 +48,7 @@ export default function ProjectDataForm() {
    reset(data);
  };

-  const disableInputs = status === 'loading';
+  const disableInputs = status === 'pending';

  if (isFetching) {
    return <ModalLoader />;
@@ -3,19 +3,24 @@
 .aliases {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
  flex-direction: column;
  width: 100%;
-  padding: 8px 0;
+  padding: 0.5rem 0;

  .aliasRow {
    width: 100%;
    display: flex;
    align-items: center;
-    gap: 8px;
+    gap: 0.5rem;
  }

  .grow {
    flex: 1;
  }
 }
+
+.url {
+  font-size: calc(1rem - 2px);
+  user-select: text;
+}
@@ -1,16 +1,18 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { Input, Switch } from '@chakra-ui/react';
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Input, Switch } from '@chakra-ui/react';
 import { ViewSettings } from 'ontime-types';

 import { logAxiosError } from '../../../common/api/apiUtils';
 import { postViewSettings } from '../../../common/api/ontimeApi';
 import { PopoverPickerRHF } from '../../../common/components/input/popover-picker/PopoverPicker';
+import useInfo from '../../../common/hooks-query/useInfo';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { mtm } from '../../../common/utils/timeConstants';
 import ModalLoader from '../modal-loader/ModalLoader';
 import { inputProps } from '../modalHelper';
 import ModalInput from '../ModalInput';
+import ModalLink from '../ModalLink';
 import ModalSplitInput from '../ModalSplitInput';
 import OntimeModalFooter from '../OntimeModalFooter';

@@ -18,8 +20,12 @@ import InputMillisWithString from './InputMillisWithString';

 import style from './SettingsModal.module.scss';

+const cssOverrideDocsUrl = 'https://ontime.gitbook.io/v2/features/custom-styling';
+
 export default function ViewSettingsForm() {
  const { data, status, refetch, isFetching } = useViewSettings();
+  const { data: info, isFetching: isFetchingInfo } = useInfo();
+
  const {
    control,
    handleSubmit,
@@ -73,15 +79,26 @@ export default function ViewSettingsForm() {
    return null;
  }

-  const disableInputs = status === 'loading';
+  const disableInputs = status === 'pending';

-  if (isFetching) {
+  if (isFetching || isFetchingInfo) {
    return <ModalLoader />;
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} id='view-settings' className={style.sectionContainer}>
      <span className={style.title}>General view settings</span>
+      <Alert status='info' variant='ontime-on-light-info'>
+        <AlertIcon />
+        <div className={style.column}>
+          <AlertTitle>CSS Override</AlertTitle>
+          <AlertDescription>
+            Ontime will use the CSS file at its install location. <br />
+            <span className={style.url}>{info?.cssOverride}</span>
+            <ModalLink href={cssOverrideDocsUrl}>For more information, see the docs</ModalLink>
+          </AlertDescription>
+        </div>
+      </Alert>
      <ModalSplitInput
        field='overrideStyles'
        title='Override CSS Styles'
@@ -0,0 +1,66 @@
+import { ChangeEvent, useRef, useState } from 'react';
+import { Input } from '@chakra-ui/react';
+
+import UploadEntry from './upload-entry/UploadEntry';
+import { useUploadModalContextStore } from './uploadModalContext';
+import { validateFile } from './uploadUtils';
+
+import style from './UploadModal.module.scss';
+
+export default function UploadFile() {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { file, setFile, progress } = useUploadModalContextStore();
+
+  const [errors, setErrors] = useState<string>('');
+
+  const clearFile = () => {
+    setFile(null);
+    setErrors('');
+  };
+
+  const handleFile = (event: ChangeEvent<HTMLInputElement>) => {
+    setErrors('');
+
+    const selectedFile = event?.target?.files?.[0];
+    if (!selectedFile) {
+      setFile(null);
+      return;
+    }
+
+    try {
+      validateFile(selectedFile);
+      setFile(selectedFile);
+    } catch (error) {
+      if (error instanceof Error) {
+        setErrors(error.message);
+      } else {
+        setErrors('An unexpected error occurred while validating the file.');
+      }
+      setFile(null);
+    }
+  };
+
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <>
+      <Input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type='file'
+        onChange={handleFile}
+        accept='.json, .xlsx'
+        data-testid='file-input'
+      />
+      {!file && (
+        <div className={style.uploadArea} onClick={handleClick} role='button'>
+          Click to select Ontime project or xlsx rundown
+        </div>
+      )}
+      {(file || errors) && <UploadEntry file={file} errors={errors} progress={progress} handleClear={clearFile} />}
+    </>
+  );
+}
@@ -5,79 +5,31 @@
 .uploadBody {
  display: flex;
  flex-direction: column;
-  gap: 16px;
+  gap: 1rem;
 }

 .uploadArea {
+  margin: 0 auto;
  width: 100%;
-  min-height: 200px;
-  border: 2px dashed $gray-50;
+  max-width: 550px;
+
+  min-height: 150px;
+  border: 2px dashed $gray-200;
  border-radius: 3px;
  display: grid;
  place-content: center;
  transition-property: background-color;
  transition-duration: $transition-time-action;
+  font-size: calc(1rem - 1px);

  &:hover {
    border: 2px solid $blue-500;
    background-color: $blue-50;
    cursor: pointer;
  }
+
  &.comment {
-    color: gray;
-  }
-}
-
-.uploadedItem {
-  background-color: $gray-50;
-  padding: 8px;
-  display: grid;
-  grid-template-areas:
-          "icon     title     close"
-          "icon     info      ."
-          "progress progress  progress";
-  grid-template-columns: auto 1fr auto;
-  column-gap: 16px;
-  border-radius: 3px;
-
-  .icon {
-    align-self: center;
-    grid-area: icon;
-    font-size: 32px;
-    color: $gray-700;
-  }
-
-  .fileTitle {
-    grid-area: title;
-    font-size: 14px;
-    color: $gray-1350;
-  }
-
-  .fileInfo {
-    grid-area: info;
-    font-size: 12px;
-    color: $gray-1100;
-  }
-
-  .fileProgress {
-    grid-area: progress;
-  }
-
-  .cancelUpload {
-    grid-area: close;
-    cursor: pointer;
-  }
-
-  &.error {
-    .icon {
-      color: $error-red;
-    }
-  }
-
-  &.success {
-    .icon {
-      color: $green-500;
-    }
+    color: $modal-note-color;
  }
 }

@@ -89,3 +41,9 @@
 .pad {
  margin: 8px;
 }
+
+.twoColumn {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
@@ -1,7 +1,6 @@
-import { ChangeEvent, useCallback, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
  Button,
-  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
@@ -9,23 +8,34 @@ import {
  ModalFooter,
  ModalHeader,
  ModalOverlay,
-  Progress,
-  Switch,
 } from '@chakra-ui/react';
-import { IoClose } from '@react-icons/all-files/io5/IoClose';
-import { IoDocumentTextOutline } from '@react-icons/all-files/io5/IoDocumentTextOutline';
-import { IoWarningOutline } from '@react-icons/all-files/io5/IoWarningOutline';
 import { useQueryClient } from '@tanstack/react-query';
+import { OntimeRundown, ProjectData, UserFields } from 'ontime-types';
+import { defaultExcelImportMap, ExcelImportMap } from 'ontime-utils';

-import { RUNDOWN_TABLE } from '../../../common/api/apiConstants';
-import { uploadData } from '../../../common/api/ontimeApi';
-import { useEmitLog } from '../../../common/stores/logger';
-import ModalSplitInput from '../ModalSplitInput';
+import { PROJECT_DATA, RUNDOWN, USERFIELDS } from '../../../common/api/apiConstants';
+import { invalidateAllCaches, maybeAxiosError } from '../../../common/api/apiUtils';
+import {
+  patchData,
+  postPreviewExcel,
+  ProjectFileImportOptions,
+  uploadProjectFile,
+} from '../../../common/api/ontimeApi';
+import { projectDataPlaceholder } from '../../../common/models/ProjectData';
+import { userFieldsPlaceholder } from '../../../common/models/UserFields';

-import { validateFile } from './utils';
+import PreviewExcel from './preview/PreviewExcel';
+import ExcelFileOptions from './upload-options/ExcelFileOptions';
+import OntimeFileOptions from './upload-options/OntimeFileOptions';
+import UploadStepTracker from './upload-step/UploadStep';
+import UploadFile from './UploadFile';
+import { useUploadModalContextStore } from './uploadModalContext';
+import { getPersistedOptions, isExcelFile, isOntimeFile, persistOptions } from './uploadUtils';

 import style from './UploadModal.module.scss';

+export type UploadStep = 'import' | 'review';
+
 interface UploadModalProps {
  onClose: () => void;
  isOpen: boolean;
@@ -33,64 +43,152 @@ interface UploadModalProps {

 export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
  const queryClient = useQueryClient();
-  const { emitError } = useEmitLog();
-  const [errors, setErrors] = useState<string | undefined>();
-  const [isSubmitting, setSubmitting] = useState(false);
-  const [file, setFile] = useState<File | null>(null);
-  const [progress, setProgress] = useState(0);
-  const overrideOptionRef = useRef<HTMLInputElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [success, setSuccess] = useState(false);

-  const handleFile = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    const fileUploaded = event?.target?.files?.[0];
-    if (!fileUploaded) return;
+  const { file, setProgress, clear } = useUploadModalContextStore();

-    const validate = validateFile(fileUploaded);
-    setErrors(validate.errors?.[0]);
+  const [uploadStep, setUploadStep] = useState<UploadStep>('import');
+  const [submitting, setSubmitting] = useState(false);
+  const [rundown, setRundown] = useState<OntimeRundown | null>(null);
+  const [userFields, setUserFields] = useState<UserFields | null>(null);
+  const [project, setProject] = useState<ProjectData | null>(null);

-    if (validate.isValid) {
-      setFile(fileUploaded);
-    } else {
-      setFile(null);
+  const [errors, setErrors] = useState('');
+
+  const ontimeFileOptions = useRef<Partial<ProjectFileImportOptions>>({});
+  const excelFileOptions = useRef<ExcelImportMap>(defaultExcelImportMap);
+
+  const updateOntimeFileOptions = <T extends keyof ProjectFileImportOptions>(
+    field: T,
+    value: ProjectFileImportOptions[T],
+  ) => {
+    ontimeFileOptions.current = { ...ontimeFileOptions.current, [field]: value };
+  };
+
+  const updateExcelFileOptions = <T extends keyof ExcelImportMap>(field: T, value: ExcelImportMap[T]) => {
+    if (excelFileOptions.current[field] !== value) {
+      excelFileOptions.current = { ...excelFileOptions.current, [field]: value };
+    }
+  };
+
+  // We want to populate the options with any previous options given by the user
+  useEffect(() => {
+    const excelOptions = getPersistedOptions('excel');
+    if (excelOptions) {
+      excelFileOptions.current = excelOptions;
    }
  }, []);

-  const handleSubmit = useCallback(async () => {
-    setSubmitting(true);
+  // if the modal re-opens, we want to restart all states
+  useEffect(() => {
+    clear();
+    setUploadStep('import');
+    setSubmitting(false);
+    setRundown(null);
+    setUserFields(null);
+    setProject(null);
+    setErrors('');
+  }, [clear, isOpen]);
+
+  /* uploads file to backend
+   * - in the case of excel, we get the preview
+   * - in the case of project file, this is end of line
+   **/
+  const handleUpload = async () => {
+    let doClose = false;
    if (file) {
+      setSubmitting(true);
+      setErrors('');
      try {
-        const options = {
-          onlyRundown: overrideOptionRef.current?.checked || false,
-        };
-        await uploadData(file, setProgress, options);
+        if (isOntimeFile(file)) {
+          // TODO: we would also like to have preview for ontime project files
+          const options = ontimeFileOptions.current;
+          await handleOntimeFile(file, options);
+          await invalidateAllCaches();
+          doClose = true;
+        } else if (isExcelFile(file)) {
+          const options = excelFileOptions.current;
+          persistOptions({ optionType: 'excel', options });
+          await handleExcelFile(file, options);
+        }
      } catch (error) {
-        emitError(`Failed uploading file: ${error}`);
+        const message = maybeAxiosError(error);
+        setErrors(`Failed uploading file ${message}`);
      } finally {
-        await queryClient.invalidateQueries(RUNDOWN_TABLE);
-        setSuccess(true);
+        setSubmitting(false);
+        if (doClose) {
+          handleClose();
+        }
      }
    }
-    setSubmitting(false);
-  }, [emitError, file, queryClient]);

-  const handleClick = () => {
-    fileInputRef.current?.click();
-  };
-
-  const clearFile = () => {
-    setFile(null);
+    // when we upload excel, we populate state with preview data
+    async function handleExcelFile(file: File, options: ExcelImportMap) {
+      const response = await postPreviewExcel(file, setProgress, options);
+      if (response.status === 200) {
+        setRundown(response.data.rundown);
+        setUserFields(response.data.userFields);
+        setProject(response.data.project);
+        // in excel imports we have an extra review step
+        setUploadStep('review');
+      }
+    }
+
+    // when we upload project files, no extra operations are done
+    async function handleOntimeFile(file: File, options: Partial<ProjectFileImportOptions>) {
+      await uploadProjectFile(file, setProgress, options);
+    }
  };

+  // before closing the modal, we clear data from mutations
  const handleClose = () => {
-    clearFile();
-    setSuccess(false);
-    setErrors(undefined);
-    setProgress(0);
+    clear();
+    setRundown([]);
+    setUserFields(userFieldsPlaceholder);
+    setProject(projectDataPlaceholder);
    onClose();
  };

-  const disableSubmit = !file || isSubmitting;
+  const handleFinalise = async () => {
+    // this step is currently only used for excel files, after preview
+    if (isExcel && rundown && userFields && project) {
+      let doClose = false;
+      setSubmitting(true);
+      try {
+        await patchData({ rundown, userFields, project });
+        queryClient.setQueryData(RUNDOWN, { rundown, revision: -1 });
+        queryClient.setQueryData(USERFIELDS, userFields);
+        queryClient.setQueryData(PROJECT_DATA, project);
+        await queryClient.invalidateQueries({
+          queryKey: [...RUNDOWN, ...USERFIELDS, ...PROJECT_DATA],
+        });
+        doClose = true;
+      } catch (error) {
+        const message = maybeAxiosError(error);
+        setErrors(`Failed applying changes ${message}`);
+      } finally {
+        setSubmitting(false);
+        if (doClose) {
+          handleClose();
+        }
+      }
+    }
+  };
+
+  const undoReview = () => {
+    setUploadStep('import');
+    setErrors('');
+  };
+
+  const isImporting = uploadStep === 'import';
+  const isReview = uploadStep === 'review';
+  const isExcel = isExcelFile(file);
+  const isOntime = isOntimeFile(file);
+
+  const handleGoBack = isImporting ? undefined : undoReview;
+  const handleSubmit = isImporting ? handleUpload : handleFinalise;
+  const disableSubmit = (isImporting && !file) || (isReview && rundown === null);
+  const disableGoBack = isImporting;
+  const submitText = isImporting ? 'Import' : 'Finish';

  return (
    <Modal
@@ -101,66 +199,50 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
      size='xl'
      scrollBehavior='inside'
      preserveScrollBarGap
-      variant='ontime-small'
+      variant='ontime-upload'
    >
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>File import</ModalHeader>
        <ModalCloseButton />
        <ModalBody className={style.uploadBody}>
-          <Input
-            ref={fileInputRef}
-            style={{ display: 'none' }}
-            type='file'
-            onChange={handleFile}
-            accept='.json, .xlsx'
-            data-testid='file-input'
-          />
-          <div className={style.uploadArea} onClick={handleClick}>
-            Click to upload Ontime project file
-          </div>
-          {file && (
-            <div className={`${style.uploadedItem} ${success ? style.success : ''}`}>
-              <IoClose className={style.cancelUpload} onClick={clearFile} />
-              <IoDocumentTextOutline className={style.icon} />
-              <span className={style.fileTitle}>{file.name}</span>
-              <span className={style.fileInfo}>{`${(file.size / 1024).toFixed(2)}kb - ${file.type}`}</span>
-              <Progress variant='ontime-on-light' className={style.fileProgress} value={progress} />
-            </div>
+          {isExcel && <UploadStepTracker uploadStep={uploadStep} />}
+          {uploadStep === 'import' ? (
+            <>
+              <UploadFile />
+              {isOntime && <OntimeFileOptions optionsRef={ontimeFileOptions} updateOptions={updateOntimeFileOptions} />}
+              {isExcel && <ExcelFileOptions optionsRef={excelFileOptions} updateOptions={updateExcelFileOptions} />}
+            </>
+          ) : (
+            <PreviewExcel
+              rundown={rundown ?? []}
+              project={project ?? projectDataPlaceholder}
+              userFields={userFields ?? userFieldsPlaceholder}
+            />
          )}
-          {errors && (
-            <div className={`${style.uploadedItem} ${style.error}`}>
-              <IoWarningOutline className={style.icon} />
-              <span className={style.fileTitle}>{errors}</span>
-              <span className={style.fileInfo}>Please try again</span>
-              <Progress className={style.fileProgress} value={progress} />
-            </div>
-          )}
-          <div className={style.uploadOptions}>
-            <span className={style.title}>Import options</span>
-            <ModalSplitInput
-              field=''
-              title='Only import rundown'
-              description='All other options, including application settings will be discarded'
-            >
-              <Switch variant='ontime-on-light' ref={overrideOptionRef} />
-            </ModalSplitInput>
-          </div>
        </ModalBody>
-        <ModalFooter className={`${style.buttonSection} ${style.pad}`}>
-          <Button onClick={handleClose} isDisabled={isSubmitting} variant='ontime-ghost-on-light' size='sm'>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleSubmit}
-            isLoading={isSubmitting}
-            isDisabled={disableSubmit}
-            variant='ontime-filled'
-            padding='0 2em'
-            size='sm'
-          >
-            Import
-          </Button>
+        <ModalFooter>
+          <div className={style.feedbackSection}>{errors && <div className={style.error}>{errors}</div>}</div>
+          <div className={`${style.buttonSection} ${style.pad}`}>
+            <Button
+              onClick={handleGoBack}
+              isDisabled={disableGoBack || submitting}
+              variant='ontime-ghost-on-light'
+              size='sm'
+            >
+              Go Back
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              isLoading={submitting}
+              isDisabled={disableSubmit}
+              variant='ontime-filled'
+              padding='0 2em'
+              size='sm'
+            >
+              {submitText}
+            </Button>
+          </div>
        </ModalFooter>
      </ModalContent>
    </Modal>
@@ -0,0 +1,22 @@
+@use "../../../../theme/_ontimeColours" as *;
+
+@mixin pad-item {
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+
+.previewTable {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: repeat(6, auto);
+  font-size: calc(1rem - 2px);
+}
+
+.field {
+  font-weight: 200;
+  @include pad-item;
+}
+
+.value {
+  @include pad-item;
+}
@@ -0,0 +1,26 @@
+import { OntimeRundown, ProjectData, UserFields } from 'ontime-types';
+
+import PreviewProjectData from './PreviewProjectData';
+import PreviewRundown from './PreviewRundown';
+
+import style from '../../Modal.module.scss';
+
+interface PreviewExcelProps {
+  rundown: OntimeRundown;
+  project: ProjectData;
+  userFields: UserFields;
+}
+
+export default function PreviewExcel(props: PreviewExcelProps) {
+  const { rundown, project, userFields } = props;
+
+  return (
+    <div className={`${style.column}`}>
+      <div className={style.title}>Review Project Data</div>
+      <PreviewProjectData project={project} />
+      <div className={style.vSpacer} />
+      <div className={style.title}>Review Rundown</div>
+      <PreviewRundown rundown={rundown} userFields={userFields} />
+    </div>
+  );
+}
@@ -0,0 +1,26 @@
+import { ProjectData } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewProjectDataProps {
+  project: ProjectData;
+}
+
+export default function PreviewProjectData({ project }: PreviewProjectDataProps) {
+  return (
+    <div className={style.previewTable}>
+      <span className={style.field}>Title</span>
+      <span className={style.value}>{project.title}</span>
+      <span className={style.field}>Description</span>
+      <span className={style.value}>{project.description}</span>
+      <span className={style.field}>Public URL</span>
+      <span className={style.value}>{project.publicUrl}</span>
+      <span className={style.field}>Public info</span>
+      <span className={style.value}>{project.publicInfo}</span>
+      <span className={style.field}>Backstage URL</span>
+      <span className={style.value}>{project.backstageUrl}</span>
+      <span className={style.field}>Backstage info</span>
+      <span className={style.value}>{project.backstageInfo}</span>
+    </div>
+  );
+}
@@ -0,0 +1,131 @@
+import { Fragment } from 'react';
+import { isOntimeEvent, OntimeRundown, UserFields } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
+
+import { getAccessibleColour } from '../../../../common/utils/styleUtils';
+
+import Tag from './Tag';
+
+import style from './PreviewTable.module.scss';
+
+interface PreviewRundownProps {
+  rundown: OntimeRundown;
+  userFields: UserFields;
+}
+
+function booleanToText(value?: boolean) {
+  return value ? 'Yes' : undefined;
+}
+
+export default function PreviewRundown({ rundown, userFields }: PreviewRundownProps) {
+  return (
+    <div className={style.container}>
+      <table className={style.rundownPreview}>
+        <thead className={style.header}>
+          <tr>
+            <th>#</th>
+            <th>Type</th>
+            <th>Cue</th>
+            <th>Title</th>
+            <th>Subtitle</th>
+            <th>Presenter</th>
+            <th>Time Start</th>
+            <th>Time End</th>
+            <th>Duration</th>
+            <th>Is Public</th>
+            <th>Skip</th>
+            <th>Colour</th>
+            <th>Timer Type</th>
+            <th>End Action</th>
+            <th>
+              user0 <Tag>{userFields.user0}</Tag>
+            </th>
+            <th>
+              user1 <Tag>{userFields.user1}</Tag>
+            </th>
+            <th>
+              user2 <Tag>{userFields.user2}</Tag>
+            </th>
+            <th>
+              user3 <Tag>{userFields.user3}</Tag>
+            </th>
+            <th>
+              user4 <Tag>{userFields.user4}</Tag>
+            </th>
+            <th>
+              user5 <Tag>{userFields.user5}</Tag>
+            </th>
+            <th>
+              user6 <Tag>{userFields.user6}</Tag>
+            </th>
+            <th>
+              user7 <Tag>{userFields.user7}</Tag>
+            </th>
+            <th>
+              user8 <Tag>{userFields.user8}</Tag>
+            </th>
+            <th>
+              user9 <Tag>{userFields.user9}</Tag>
+            </th>
+          </tr>
+        </thead>
+        <tbody className={style.body}>
+          {rundown.map((event, index) => {
+            if (!isOntimeEvent(event)) {
+              return null;
+            }
+            const key = event.id;
+            const colour = event.colour ? getAccessibleColour(event.colour) : {};
+            const isPublic = booleanToText(event.isPublic);
+            const skip = booleanToText(event.skip);
+            return (
+              <Fragment key={key}>
+                <tr>
+                  <td className={style.center}>
+                    <Tag>{index + 1}</Tag>
+                  </td>
+                  <td className={style.center}>
+                    <Tag>Event</Tag>
+                  </td>
+                  <td className={style.nowrap}>{event.cue}</td>
+                  <td>{event.title}</td>
+                  <td>{event.subtitle}</td>
+                  <td>{event.presenter}</td>
+                  <td>{millisToString(event.timeStart)}</td>
+                  <td>{millisToString(event.timeEnd)}</td>
+                  <td>{millisToString(event.duration)}</td>
+                  <td className={style.center}>{isPublic && <Tag>{isPublic}</Tag>}</td>
+                  <td>{skip && <Tag>{skip}</Tag>}</td>
+                  <td style={{ ...colour }}>{event.colour}</td>
+                  <td className={style.center}>
+                    <Tag>{event.timerType}</Tag>
+                  </td>
+                  <td className={style.center}>
+                    <Tag>{event.endAction}</Tag>
+                  </td>
+                  <td>{event.user0}</td>
+                  <td>{event.user1}</td>
+                  <td>{event.user2}</td>
+                  <td>{event.user3}</td>
+                  <td>{event.user4}</td>
+                  <td>{event.user5}</td>
+                  <td>{event.user6}</td>
+                  <td>{event.user7}</td>
+                  <td>{event.user8}</td>
+                  <td>{event.user9}</td>
+                </tr>
+                {event.note && (
+                  <tr>
+                    <td colSpan={99} className={style.secondaryRow}>
+                      Note: {event.note}
+                    </td>
+                  </tr>
+                )}
+              </Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
@@ -0,0 +1,71 @@
+@use "../../../../theme/_ontimeColours" as *;
+
+.container {
+  max-width: 100%;
+  max-height: max(300px, 30vh);
+  overflow: scroll;
+}
+
+.rundownPreview {
+  font-size: calc(1rem - 2px);
+  overflow-x: scroll;
+}
+
+.header,
+.body {
+  th {
+    font-weight: 400;
+    height: unset;
+    line-height: calc(1rem - 2px);
+    white-space: nowrap;
+    padding-left: 0.25rem;
+    padding-right: 1rem;
+  }
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  background-color: white;
+  box-shadow: 0 2px $gray-50;
+  z-index: 3;
+
+  th {
+    font-weight: 200;
+    text-align: left;
+  }
+
+  tr {
+    word-wrap: unset;
+  }
+}
+
+.body {
+  td {
+    text-align: left;
+    vertical-align: top;
+    padding: 0 0.5em;
+  }
+
+  .center {
+    text-align: center;
+  }
+
+  .nowrap {
+    white-space: nowrap;
+  }
+
+  .secondaryRow {
+    padding: 0.25em 0.25em;
+    background-color: $gray-50;
+  }
+}
+
+table tr td:first-child,
+table tr th:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background-color: white;
+  box-shadow: 1px 0 $gray-50;
+}
@@ -0,0 +1,11 @@
+@use "../../../../theme/_ontimeColours" as *;
+
+.tag {
+  font-size: calc(1rem - 3px);
+  letter-spacing: 0.5px;
+  background-color: $gray-100;
+  color: $ui-black;
+  border-radius: 2px;
+  padding: 0 0.25rem;
+  white-space: nowrap;
+}
@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+import style from './Tag.module.scss';
+
+export default function Tag({ children }: { children: ReactNode }) {
+  return <span className={style.tag}>{children}</span>;
+}
@@ -0,0 +1,53 @@
+@use '../../../../theme/ontimeColours' as *;
+@use '../../../../theme/v2Styles' as *;
+
+.uploadedItem {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 550px;
+
+  border: 1px solid $gray-200;
+  padding: 0.5rem;
+  display: grid;
+  grid-template-areas:
+          "icon     title     close"
+          "icon     info      ."
+          "progress progress  progress";
+  grid-template-columns: auto 1fr auto;
+  column-gap: 1rem;
+  border-radius: 3px;
+
+  .icon {
+    align-self: center;
+    grid-area: icon;
+    font-size: 2rem;
+    color: $gray-700;
+  }
+
+  .fileTitle {
+    grid-area: title;
+    font-size: calc(1rem - 2px);
+    color: $ui-black;
+  }
+
+  .fileInfo {
+    grid-area: info;
+    font-size: calc(1rem - 4px);
+    color: $gray-1100;
+  }
+
+  .fileProgress {
+    grid-area: progress;
+  }
+
+  .cancelUpload {
+    grid-area: close;
+    cursor: pointer;
+  }
+
+  &.error {
+    .icon {
+      color: $error-red;
+    }
+  }
+}
@@ -0,0 +1,52 @@
+import { Progress } from '@chakra-ui/react';
+import { IoClose } from '@react-icons/all-files/io5/IoClose';
+import { IoDocumentTextOutline } from '@react-icons/all-files/io5/IoDocumentTextOutline';
+import { IoWarningOutline } from '@react-icons/all-files/io5/IoWarningOutline';
+
+import { isExcelFile, isOntimeFile } from '../uploadUtils';
+
+import style from './UploadEntry.module.scss';
+
+interface UploadEntryProps {
+  file: File | null;
+  errors?: string;
+  progress: number;
+  handleClear: () => void;
+}
+
+export default function UploadEntry(props: UploadEntryProps) {
+  const { file, errors, progress, handleClear } = props;
+
+  if (errors) {
+    return (
+      <div className={`${style.uploadedItem} ${style.error}`}>
+        <IoClose className={style.cancelUpload} onClick={handleClear} />
+        <IoWarningOutline className={style.icon} />
+        <span className={style.fileTitle}>{errors}</span>
+        <span className={style.fileInfo}>Please try again</span>
+      </div>
+    );
+  }
+
+  if (file) {
+    const fileSize = `${(file.size / 1024).toFixed(2)}kb`;
+    let fileType = '';
+    if (isOntimeFile(file)) {
+      fileType = 'Ontime Project File';
+    } else if (isExcelFile(file)) {
+      fileType = 'Excel Rundown';
+    }
+
+    return (
+      <div className={style.uploadedItem}>
+        <IoClose className={style.cancelUpload} onClick={handleClear} />
+        <IoDocumentTextOutline className={style.icon} />
+        <span className={style.fileTitle}>{file.name}</span>
+        <span className={style.fileInfo}>{`${fileSize} - ${fileType}`}</span>
+        <Progress variant='ontime-on-light' className={style.fileProgress} value={progress} />
+      </div>
+    );
+  }
+
+  return null;
+}
@@ -0,0 +1,70 @@
+import { MutableRefObject } from 'react';
+import { ExcelImportMap } from 'ontime-utils';
+
+import ImportMapTable, { type TableEntry } from './ImportMapTable';
+
+import style from '../UploadModal.module.scss';
+
+interface ExcelFileOptionsProps {
+  optionsRef: MutableRefObject<ExcelImportMap>;
+  updateOptions: <T extends keyof ExcelImportMap>(field: T, value: ExcelImportMap[T]) => void;
+}
+
+export default function ExcelFileOptions(props: ExcelFileOptionsProps) {
+  const { optionsRef, updateOptions } = props;
+
+  const worksheet: TableEntry[] = [{ label: 'Worksheet', title: 'worksheet', value: optionsRef.current.worksheet }];
+
+  const timings: TableEntry[] = [
+    { label: 'Start time', title: 'timeStart', value: optionsRef.current.timeStart },
+    { label: 'End Time', title: 'timeEnd', value: optionsRef.current.timeEnd },
+    { label: 'Duration', title: 'duration', value: optionsRef.current.duration },
+  ];
+
+  const titles: TableEntry[] = [
+    { label: 'Cue', title: 'cue', value: optionsRef.current.cue },
+    { label: 'Colour', title: 'colour', value: optionsRef.current.colour },
+    { label: 'Title', title: 'title', value: optionsRef.current.title },
+    { label: 'Presenter', title: 'presenter', value: optionsRef.current.presenter },
+    { label: 'Subtitle', title: 'subtitle', value: optionsRef.current.subtitle },
+    { label: 'Note', title: 'note', value: optionsRef.current.note },
+  ];
+
+  const options: TableEntry[] = [
+    { label: 'Is Public', title: 'isPublic', value: optionsRef.current.isPublic },
+    { label: 'Skip', title: 'skip', value: optionsRef.current.skip },
+    { label: 'Timer Type', title: 'timerType', value: optionsRef.current.timerType },
+    { label: 'End Action', title: 'endAction', value: optionsRef.current.endAction },
+  ];
+
+  const userFields: TableEntry[] = [
+    { label: 'User 0', title: 'user0', value: optionsRef.current.user0 },
+    { label: 'User 1', title: 'user1', value: optionsRef.current.user1 },
+    { label: 'User 2', title: 'user2', value: optionsRef.current.user2 },
+    { label: 'User 3', title: 'user3', value: optionsRef.current.user3 },
+    { label: 'User 4', title: 'user4', value: optionsRef.current.user4 },
+    { label: 'User 5', title: 'user5', value: optionsRef.current.user5 },
+    { label: 'User 6', title: 'user6', value: optionsRef.current.user6 },
+    { label: 'User 7', title: 'user7', value: optionsRef.current.user7 },
+    { label: 'User 8', title: 'user8', value: optionsRef.current.user8 },
+    { label: 'User 9', title: 'user9', value: optionsRef.current.user9 },
+  ];
+
+  return (
+    <div className={style.uploadOptions}>
+      <div className={style.twoEqualColumn}>
+        <ImportMapTable title='Sheet settings' fields={worksheet} handleOnChange={updateOptions} />
+      </div>
+
+      <div className={style.twoEqualColumn}>
+        <ImportMapTable title='Timings' fields={timings} handleOnChange={updateOptions} />
+        <ImportMapTable title='Options' fields={options} handleOnChange={updateOptions} />
+      </div>
+
+      <div className={style.twoEqualColumn}>
+        <ImportMapTable title='Titles' fields={titles} handleOnChange={updateOptions} />
+        <ImportMapTable title='User Fields' fields={userFields} handleOnChange={updateOptions} />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,33 @@
+@use '../../../../theme/v2Styles' as *;
+@use '../../../../theme/ontimeColours' as *;
+
+.importTable {
+  margin: 0.5rem;
+  height: fit-content;
+
+  thead {
+    color: $gray-500;
+    text-transform: uppercase;
+    width: 10em;
+  }
+
+  tr:hover {
+    background-color: $gray-50;
+  }
+
+  tbody {
+    td {
+      max-width: fit-content;
+    }
+  }
+}
+
+.label {
+  display: inline-block;
+  min-width: 6em;
+  font-size: $inner-section-text-size;
+}
+
+.input {
+  width: 100%;
+}
@@ -0,0 +1,50 @@
+import { Input } from '@chakra-ui/react';
+import { ExcelImportMap } from 'ontime-utils';
+
+import style from './ImportMapTable.module.scss';
+
+export type TableEntry = { label: string; title: keyof ExcelImportMap; value: string };
+
+interface ImportMapTableProps {
+  title: string;
+  fields: TableEntry[];
+  handleOnChange: (field: keyof ExcelImportMap, value: string) => void;
+}
+
+export default function ImportMapTable(props: ImportMapTableProps) {
+  const { title, fields, handleOnChange } = props;
+
+  return (
+    <table className={style.importTable}>
+      <thead>
+        <tr>
+          <td colSpan={2}>{title}</td>
+        </tr>
+      </thead>
+      <tbody>
+        {fields.map((field) => {
+          return (
+            <tr key={field.title}>
+              <td className={style.label}>
+                <label htmlFor={field.title}>{field.label}</label>
+              </td>
+              <td className={style.input}>
+                <Input
+                  id={field.title}
+                  size='xs'
+                  variant='ontime-filled-on-light'
+                  maxLength={25}
+                  defaultValue={field.value}
+                  placeholder='Use default column name'
+                  onBlur={(event) => {
+                    handleOnChange(field.title, event.target.value);
+                  }}
+                />
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
@@ -0,0 +1,31 @@
+import { MutableRefObject } from 'react';
+import { Switch } from '@chakra-ui/react';
+
+import { ProjectFileImportOptions } from '../../../../common/api/ontimeApi';
+import ModalSplitInput from '../../ModalSplitInput';
+
+import style from '../UploadModal.module.scss';
+
+interface OntimeFileOptionsProps {
+  optionsRef: MutableRefObject<Partial<ProjectFileImportOptions>>;
+  updateOptions: <T extends keyof ProjectFileImportOptions>(field: T, value: ProjectFileImportOptions[T]) => void;
+}
+
+export default function OntimeFileOptions(props: OntimeFileOptionsProps) {
+  const { optionsRef, updateOptions } = props;
+
+  return (
+    <div className={style.uploadOptions}>
+      <span className={style.title}>Import options</span>
+      <ModalSplitInput field='' title='Only import rundown' description='All other project options will be kept'>
+        <Switch
+          variant='ontime-on-light'
+          onChange={(e) => {
+            updateOptions('onlyRundown', e.target.checked);
+          }}
+          defaultChecked={Boolean(optionsRef.current.onlyRundown)}
+        />
+      </ModalSplitInput>
+    </div>
+  );
+}
@@ -0,0 +1,40 @@
+@use '../../../../theme/ontimeColours' as *;
+
+@mixin row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.25rem;
+}
+
+.stepRow {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+  margin: 0 auto;
+  font-size: 1rem;
+}
+
+.idle {
+  @include row;
+  color: $blue-500;
+}
+
+.inactive {
+  @include row;
+  color: $gray-700;
+}
+
+.active {
+  @include row;
+  color: $blue-700;
+}
+
+
+.inactiveIcon {
+  color: $gray-700;
+}
+
+.activeIcon {
+  color: $blue-500;
+}
@@ -0,0 +1,26 @@
+import { IoCheckmarkCircle } from '@react-icons/all-files/io5/IoCheckmarkCircle';
+import { IoChevronForward } from '@react-icons/all-files/io5/IoChevronForward';
+import { IoEllipseOutline } from '@react-icons/all-files/io5/IoEllipseOutline';
+
+import type { UploadStep } from '../UploadModal';
+
+import style from './UploadStep.module.scss';
+
+export default function UploadStepTracker({ uploadStep }: { uploadStep: UploadStep }) {
+  const isImporting = uploadStep === 'import';
+  const isReview = uploadStep === 'review';
+
+  return (
+    <div className={style.stepRow}>
+      <div className={isImporting ? style.active : style.idle}>
+        <IoCheckmarkCircle />
+        Import
+      </div>
+      <IoChevronForward className={isReview ? style.activeIcon : style.inactiveIcon} />
+      <div className={isReview ? style.active : style.inactive}>
+        {isReview ? <IoCheckmarkCircle /> : <IoEllipseOutline />}
+        Review
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+
+type UploadModalContext = {
+  file: File | null;
+  setFile: (file: File | null) => void;
+
+  progress: number;
+  setProgress: (progress: number) => void;
+
+  clear: () => void;
+};
+
+export const useUploadModalContextStore = create<UploadModalContext>((set) => ({
+  file: null,
+  setFile: (file: File | null) => set({ file }),
+
+  progress: 0,
+  setProgress: (progress: number) => set({ progress }),
+
+  clear: () => set({ file: null, progress: 0 }),
+}));
@@ -0,0 +1,64 @@
+import { ExcelImportMap } from 'ontime-utils';
+
+import { ProjectFileImportOptions } from '../../../common/api/ontimeApi';
+
+/**
+ * Validates a file according to the app upload contract
+ * @throws
+ * @param file
+ */
+export function validateFile(file: File) {
+  if (!file) {
+    throw new Error('No file to upload');
+  }
+
+  // Check if file is empty
+  if (file.size === 0) {
+    throw new Error('File is empty');
+  }
+
+  // Limit file size of a project file to around 1MB
+  if (file.name.endsWith('.json') && file.size > 1_000_000) {
+    throw new Error('File size limit (1MB) exceeded');
+  }
+
+  // Limit file size of an excel file to around 10MB
+  if (file.name.endsWith('.xlsx') && file.size > 10_000_000) {
+    throw new Error('File size limit (10MB) exceeded');
+  }
+
+  // Check file extension
+  if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.json')) {
+    throw new Error('Unhandled file type');
+  }
+}
+
+export function isExcelFile(file: File | null) {
+  return file?.name.endsWith('.xlsx');
+}
+
+export function isOntimeFile(file: File | null) {
+  return file?.name.endsWith('.json');
+}
+
+type PersistedOntimeOptions = {
+  optionType: 'ontime';
+  options: Partial<ProjectFileImportOptions>;
+};
+
+type PersistedExcelOptions = {
+  optionType: 'excel';
+  options: ExcelImportMap;
+};
+
+export function persistOptions(options: PersistedOntimeOptions | PersistedExcelOptions) {
+  localStorage.setItem(`ontime-import-options-${options.optionType}`, JSON.stringify(options.options));
+}
+
+export function getPersistedOptions(optionType: 'excel' | 'ontime') {
+  const options = localStorage.getItem(`ontime-import-options-${optionType}`);
+  if (!options) {
+    return null;
+  }
+  return JSON.parse(options);
+}
@@ -1,25 +0,0 @@
-type ValidationStatus = {
-  errors: string[];
-  isValid: boolean;
-};
-
-export function validateFile(file: File): ValidationStatus {
-  const status: ValidationStatus = { errors: [], isValid: true };
-  if (!file) {
-    status.errors.push('No file to upload');
-    status.isValid = false;
-  }
-
-  // Limit file size to 1MB
-  if (file.size > 1000000) {
-    status.errors.push('File size limit (1MB) exceeded');
-    status.isValid = false;
-  }
-
-  // Check file extension
-  if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.json')) {
-    status.errors.push('Unhandled file type');
-    status.isValid = false;
-  }
-  return status;
-}
@@ -12,6 +12,7 @@ import { useOperator } from '../../common/hooks/useSocket';
 import useProjectData from '../../common/hooks-query/useProjectData';
 import useRundown from '../../common/hooks-query/useRundown';
 import useUserFields from '../../common/hooks-query/useUserFields';
+import { debounce } from '../../common/utils/debounce';
 import { isStringBoolean } from '../../common/utils/viewUtils';

 import FollowButton from './follow-button/FollowButton';
@@ -32,7 +33,6 @@ export default function Operator() {
  const featureData = useOperator();
  const [searchParams] = useSearchParams();

-  const isAutomatedScroll = useRef(false);
  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
@@ -41,7 +41,6 @@ export default function Operator() {
    scrollRef: scrollRef,
    doFollow: !lockAutoScroll,
    topOffset: selectedOffset,
-    setScrollFlag: () => (isAutomatedScroll.current = true),
  });

  // Set window title
@@ -65,13 +64,8 @@ export default function Operator() {
    setLockAutoScroll(false);
  };

-  const handleScroll = () => {
-    // prevent considering automated scrolls as user scrolls
-    if (isAutomatedScroll.current) {
-      isAutomatedScroll.current = false;
-      return;
-    }
-
+  // prevent considering automated scrolls as user scrolls
+  const handleUserScroll = () => {
    if (selectedRef?.current && scrollRef?.current) {
      const selectedRect = selectedRef.current.getBoundingClientRect();
      const scrollerRect = scrollRef.current.getBoundingClientRect();
@@ -82,9 +76,10 @@ export default function Operator() {
      }
    }
  };
+  const debouncedHandleScroll = debounce(handleUserScroll, 1000);

  const missingData = !data || !userFields || !projectData;
-  const isLoading = status === 'loading' || userFieldsStatus === 'loading' || projectDataStatus === 'loading';
+  const isLoading = status === 'pending' || userFieldsStatus === 'pending' || projectDataStatus === 'pending';

  if (missingData || isLoading) {
    return <Empty text='Loading...' />;
@@ -119,7 +114,12 @@ export default function Operator() {
        lastId={lastEvent?.id}
      />

-      <div className={style.operatorEvents} onScroll={handleScroll} ref={scrollRef}>
+      <div
+        className={style.operatorEvents}
+        onWheel={debouncedHandleScroll}
+        onTouchMove={debouncedHandleScroll}
+        ref={scrollRef}
+      >
        {data.map((entry) => {
          if (isOntimeEvent(entry)) {
            const isSelected = featureData.selectedEventId === entry.id;
@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
-import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';
+import { GetRundownCached, OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';
 import { calculateDuration, getCueCandidate } from 'ontime-utils';

-import { RUNDOWN_TABLE } from '../../common/api/apiConstants';
+import { RUNDOWN } from '../../common/api/apiConstants';
 import { useEventAction } from '../../common/hooks/useEventAction';
 import { ontimeQueryClient } from '../../common/queryClient';
 import { useAppMode } from '../../common/stores/appModeStore';
@@ -100,7 +100,8 @@ export default function RundownEntry(props: RundownEntryProps) {
        }
        case 'clone': {
          const newEvent = cloneEvent(data as OntimeEvent, data.id);
-          newEvent.cue = getCueCandidate(ontimeQueryClient.getQueryData(RUNDOWN_TABLE) || [], data.id);
+          const rundown = ontimeQueryClient.getQueryData<GetRundownCached>(RUNDOWN)?.rundown ?? []
+          newEvent.cue = getCueCandidate(rundown, data.id);
          addEvent(newEvent);
          break;
        }
@@ -175,6 +175,9 @@ $skip-opacity: 0.1;
  font-size: calc(1rem - 3px);
  color: $block-text-color;
  line-height: calc(1rem - 3px);
+
+  max-height: 2rem;
+  overflow-y: hidden;
 }


@@ -1,6 +1,6 @@
-/* eslint-disable react/display-name */
 import { ComponentType, useMemo } from 'react';
-import { SupportedEvent } from 'ontime-types';
+import { TimeManagerType } from 'common/models/TimeManager.type';
+import { Message, OntimeEvent, ProjectData, SupportedEvent, TimerMessage, ViewSettings } from 'ontime-types';
 import { useStore } from 'zustand';

 import useProjectData from '../../common/hooks-query/useProjectData';
@@ -9,8 +9,32 @@ import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { runtime } from '../../common/stores/runtime';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';

-const withData = <P extends object>(Component: ComponentType<P>) => {
-  return (props: Partial<P>) => {
+type WithDataProps = {
+  isMirrored: boolean;
+  pres: TimerMessage;
+  publ: Message;
+  lower: Message;
+  eventNow: OntimeEvent | null;
+  publicEventNow: OntimeEvent | null;
+  eventNext: OntimeEvent | null;
+  publicEventNext: OntimeEvent | null;
+  time: TimeManagerType;
+  events: OntimeEvent[];
+  backstageEvents: OntimeEvent[];
+  selectedId: string | null;
+  publicSelectedId: string | null;
+  nextId: string | null;
+  general: ProjectData;
+  viewSettings: ViewSettings;
+  onAir: boolean;
+};
+
+function getDisplayName(Component: React.ComponentType<any>): string {
+  return Component.displayName || Component.name || 'Component';
+}
+
+const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
+  const WithDataComponent = (props: P) => {
    // persisted app state
    const isMirrored = useViewOptionsStore((state) => state.mirror);

@@ -84,6 +108,9 @@ const withData = <P extends object>(Component: ComponentType<P>) => {
      />
    );
  };
+
+  WithDataComponent.displayName = `WithData(${getDisplayName(Component)})`;
+  return WithDataComponent;
 };

 export default withData;
@@ -89,7 +89,10 @@
    border-radius: 8px;

    &.blink {
-      animation: blink 0.5s ease-in-out 3;
+      animation-name: blink;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: 3;
+      animation-duration: 1s;
    }
  }

@@ -163,9 +166,12 @@

@keyframes blink {
  0% {
-    background-color: var(--card-background-color-blink-override, $playback-start);
-  }
-  20% {
    background-color: var(--card-background-color-override, $viewer-card-bg-color);
  }
-}
+  50% {
+    background-color: var(--card-background-color-blink-override, $playback-start);
+  }
+  100% {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+  }
+}
@@ -121,7 +121,9 @@ export default function Countdown(props: CountdownProps) {
            <div className='time'>{clock}</div>
          </div>

-          <div className='status'>{getLocalizedString(`countdown.${runningMessage}`)}</div>
+          {runningMessage !== TimerMessage.unhandled && (
+            <div className='status'>{getLocalizedString(`countdown.${runningMessage}`)}</div>
+          )}

          <span className={`timer ${standby ? 'timer--paused' : ''} ${isRunningFinished ? 'timer--finished' : ''}`}>
            {formattedTimer}
@@ -0,0 +1,8 @@
+export const ontimeProgressGray = {
+  track: {
+    background: '#f6f6f6', // $gray-500
+  },
+  filledTrack: {
+    background: '#578AF4', // $blue-500
+  },
+};
@@ -2,8 +2,8 @@ export const ontimeModal = {
  header: {
    fontWeight: 400,
    letterSpacing: '0.3px',
-    padding: '16px 24px',
-    fontSize: '20px',
+    padding: '1rem 1.5rem',
+    fontSize: '1.25rem',
    color: '#202020', // $gray-50
  },
  dialog: {
@@ -20,17 +20,29 @@ export const ontimeModal = {
    color: '#202020', // $gray-50
  },
  footer: {
-    padding: '8px',
+    padding: '0.5rem',
  },
 };

 export const ontimeSmallModal = {
  ...ontimeModal,
  body: {
-    padding: '16px',
-    fontSize: '14px',
+    padding: '1rem',
+    fontSize: 'calc(1rem - 2px)',
  },
  dialog: {
    minHeight: 'min(200px, 10vh)',
  },
 };
+
+export const ontimeUploadModal = {
+  ...ontimeSmallModal,
+  body: {
+    padding: '1rem',
+    fontSize: 'calc(1rem - 2px)',
+  },
+  dialog: {
+    minHeight: 'min(200px, 10vh)',
+    maxWidth: 'min(800px, 80vh)',
+  },
+};
@@ -13,7 +13,8 @@ import {
 import { ontimeCheckboxOnDark } from './ontimeCheckbox';
 import { ontimeEditable } from './ontimeEditable';
 import { ontimeMenuOnDark } from './ontimeMenu';
-import { ontimeModal, ontimeSmallModal } from './ontimeModal';
+import { ontimeModal, ontimeSmallModal, ontimeUploadModal } from './ontimeModal';
+import { ontimeProgressGray } from './OntimeProgress';
 import { ontimeBlockRadio } from './ontimeRadio';
 import { ontimeSelect } from './ontimeSelect';
 import { lightSwitch, ontimeSwitch } from './ontimeSwitch';
@@ -79,6 +80,12 @@ const theme = extendTheme({
      variants: {
        ontime: { ...ontimeModal },
        'ontime-small': { ...ontimeSmallModal },
+        'ontime-upload': { ...ontimeUploadModal },
+      },
+    },
+    Progress: {
+      variants: {
+        'ontime-on-light': { ...ontimeProgressGray },
      },
    },
    Radio: {
@@ -3,11 +3,14 @@
    "sourceType": "module"
  },
  "env": {
+    "browser": true,
    "node": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "plugins": [],
-  "rules": {}
+  "rules": {
+    "@typescript-eslint/no-var-requires": "off"
+  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "ontime",
-  "version": "2.9.0",
+  "version": "2.16.2",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -14,12 +14,13 @@
  "devDependencies": {
    "electron": "^22.3.5",
    "electron-builder": "^23.6.0",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
-    "prettier": "^2.8.3"
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "prettier": "^3.0.3"
  },
  "scripts": {
    "postinstall": "",
+    "lint": "eslint . --quiet",
    "dev:electron": "cross-env NODE_ENV=development electron .",
    "dist-win": "electron-builder --publish=never  --x64 --win",
    "dist-mac": "electron-builder --publish=never  --mac",
@@ -8,23 +8,23 @@ function getApplicationMenu(isMac, askToQuit) {
  return [
    ...(isMac
      ? [
-        {
-          label: 'Ontime',
-          submenu: [
-            { role: 'about' },
-            { type: 'separator' },
-            { role: 'hide' },
-            { role: 'hideOthers' },
-            { role: 'unhide' },
-            { type: 'separator' },
-            {
-              label: 'quit',
-              click: () => askToQuit(),
-              accelerator: 'Cmd+Q',
-            },
-          ],
-        },
-      ]
+          {
+            label: 'Ontime',
+            submenu: [
+              { role: 'about' },
+              { type: 'separator' },
+              { role: 'hide' },
+              { role: 'hideOthers' },
+              { role: 'unhide' },
+              { type: 'separator' },
+              {
+                label: 'quit',
+                click: () => askToQuit(),
+                accelerator: 'Cmd+Q',
+              },
+            ],
+          },
+        ]
      : []),
    {
      label: 'File',
@@ -41,15 +41,15 @@ function getApplicationMenu(isMac, askToQuit) {
        { role: 'paste' },
        ...(isMac
          ? [
-            { role: 'pasteAndMatchStyle' },
-            { role: 'delete' },
-            { role: 'selectAll' },
-            { type: 'separator' },
-            {
-              label: 'Speech',
-              submenu: [{ role: 'startSpeaking' }, { role: 'stopSpeaking' }],
-            },
-          ]
+              { role: 'pasteAndMatchStyle' },
+              { role: 'delete' },
+              { role: 'selectAll' },
+              { type: 'separator' },
+              {
+                label: 'Speech',
+                submenu: [{ role: 'startSpeaking' }, { role: 'stopSpeaking' }],
+              },
+            ]
          : [{ role: 'delete' }, { type: 'separator' }, { role: 'selectAll' }]),
      ],
    },
@@ -161,4 +161,4 @@ function getApplicationMenu(isMac, askToQuit) {
  ];
 }

-module.exports = { getApplicationMenu }
+module.exports = { getApplicationMenu };
@@ -13,7 +13,7 @@ function getTrayMenu(showApp, askToQuit) {
      label: 'Shutdown',
      click: () => askToQuit(),
    },
-  ]
+  ];
 }

-module.exports = { getTrayMenu }
+module.exports = { getTrayMenu };
@@ -2,23 +2,11 @@
  "env": {
    "node": true
  },
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
-  "plugins": ["@typescript-eslint", "prettier"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
-  "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ]
+  "globals": {
+    "globalThis": false
  }
 }
@@ -2,7 +2,7 @@
  "name": "ontime-server",
  "type": "module",
  "main": "src/index.ts",
-  "version": "2.9.0",
+  "version": "2.16.2",
  "exports": "./src/index.js",
  "dependencies": {
    "body-parser": "^1.20.0",
@@ -14,8 +14,8 @@
    "express-validator": "^6.14.2",
    "lowdb": "^5.0.5",
    "multer": "^1.4.5-lts.1",
-    "node-osc": "^8.0.10",
-    "node-xlsx": "^0.21.0",
+    "node-osc": "^9.0.2",
+    "node-xlsx": "^0.23.0",
    "ontime-utils": "workspace:*",
    "passport": "^0.6.0",
    "passport-local": "~1.0.0",
@@ -25,19 +25,19 @@
  "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/node": "^16.11.7",
-    "@types/node-osc": "^6.0.0",
+    "@types/node-osc": "^6.0.2",
    "@types/websocket": "^1.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
    "esbuild": "^0.17.5",
-    "eslint": "^8.31.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint": "^8.53.0",
+    "eslint-plugin-prettier": "^5.0.1",
    "nodemon": "^2.0.20",
    "ontime-types": "workspace:*",
-    "prettier": "^2.8.3",
+    "prettier": "^3.0.3",
    "shx": "^0.3.4",
    "ts-node": "^10.9.1",
-    "typescript": "^4.9.4",
+    "typescript": "^5.2.2",
    "vitest": "^0.30.1"
  },
  "scripts": {
@@ -49,10 +49,11 @@
    "dev:test": "cross-env IS_TEST=true nodemon --exec \"ts-node-esm\" ./src/index.ts",
    "prebuild": "pnpm setdb",
    "build": "pnpm prebuild && esbuild src/app.ts --log-level=error --platform=node --format=cjs --bundle --minify --outfile=dist/index.cjs",
+    "build:electron": "pnpm prebuild && esbuild src/app.ts --log-level=error --platform=node --format=cjs --bundle --minify --outfile=dist/index.cjs",
    "build:local": "pnpm prebuild && esbuild src/index.ts --log-level=error --platform=node --format=cjs --bundle --minify --outfile=dist/index.cjs",
    "build:docker": "pnpm prebuild && esbuild src/index.ts --log-level=error --platform=node --format=cjs --minify --bundle --outfile=dist/docker.cjs",
    "build:debug": "pnpm prebuild && esbuild src/app.ts --platform=node --format=cjs --bundle --outfile=dist/index.cjs",
-    "lint": "eslint .",
+    "lint": "eslint . --quiet",
    "test": "cross-env IS_TEST=true vitest",
    "test:pipeline": "cross-env IS_TEST=true vitest run",
    "typecheck": "tsc --noEmit",
@@ -12,7 +12,7 @@ export class OscServer implements IAdapter {
  constructor(config: OSCSettings) {
    this.osc = new Server(config.portIn, '0.0.0.0');

-    this.osc.on('error', console.error);
+    this.osc.on('error', (error) => logger.error(LogOrigin.Rx, `OSC IN: ${error}`));

    this.osc.on('message', (msg) => {
      // message should look like /ontime/{path}/{params?} {args} where
--- a/Show More
+++ b/Show More