fix: prevent storage key conflicts between stages

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

@@ -1,6 +1,7 @@
 import { IoChevronDown } from 'react-icons/io5';
 import { useLocalStorage } from '@mantine/hooks';
 
+import { baseURI } from '../../../externals';
 import { cx } from '../../utils/styleUtils';
 
 import ParamInput from './ParamInput';
@@ -17,7 +18,7 @@ interface ViewParamsSectionProps {
 export default function ViewParamsSection(props: ViewParamsSectionProps) {
   const { title, collapsible, options } = props;
 
-  const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });
+  const [collapsed, setCollapsed] = useLocalStorage({ key: `${baseURI}params-${title}`, defaultValue: false });
 
   const handleCollapse = () => {
     if (collapsible) {

apps/client/src/common/context/AppContext.tsx

@@ -1,5 +1,6 @@
 import { createContext, PropsWithChildren, useCallback, useEffect, useState } from 'react';
 
+import { baseURI } from '../../externals';
 import useSettings from '../hooks-query/useSettings';
 
 interface AppContextType {
@@ -26,7 +27,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 
   useEffect(() => {
     if (status === 'pending') return;
-    const previousEditor = sessionStorage.getItem(storageKeys.editor);
+    const previousEditor = sessionStorage.getItem(`${baseURI}${storageKeys.editor}`);
 
     if (previousEditor && previousEditor === data.editorKey) {
       setEditorAuth(true);
@@ -34,7 +35,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
       setEditorAuth(data.editorKey == null || data.editorKey === '');
     }
 
-    const previousOperator = sessionStorage.getItem(storageKeys.operator);
+    const previousOperator = sessionStorage.getItem(`${baseURI}${storageKeys.operator}`);
     if (previousOperator && previousOperator === data.operatorKey) {
       setOperatorAuth(true);
     } else {
@@ -55,14 +56,14 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
       if (permission === 'editor') {
         const correct = isValid(pin, data.editorKey);
         if (correct) {
-          sessionStorage.setItem(storageKeys.editor, pin);
+          sessionStorage.setItem(`${baseURI}${storageKeys.editor}`, pin);
         }
         setEditorAuth(correct);
         return correct;
       } else if (permission === 'operator') {
         const correct = isValid(pin, data.operatorKey);
         if (correct) {
-          sessionStorage.setItem(storageKeys.operator, pin);
+          sessionStorage.setItem(`${baseURI}${storageKeys.operator}`, pin);
         }
         setOperatorAuth(correct);
         return correct;

apps/client/src/common/stores/appModeStore.ts

@@ -1,12 +1,14 @@
 import { create } from 'zustand';
 
+import { baseURI } from '../../externals';
+
 export enum AppMode {
   Run = 'run',
   Edit = 'edit',
   Freeze = 'freeze',
 }
 
-const appModeKey = 'ontime-app-mode';
+const appModeKey = `${baseURI}ontime-app-mode`;
 
 function getModeFromSession() {
   return sessionStorage.getItem(appModeKey) === AppMode.Run ? AppMode.Run : AppMode.Edit;

apps/client/src/common/stores/clientStore.ts

@@ -1,6 +1,8 @@
 import { ClientList } from 'ontime-types';
 import { create } from 'zustand';
 
+import { baseURI } from '../../externals';
+
 interface ClientStore {
   name?: string;
   setName: (newValue: string) => void;
@@ -15,7 +17,7 @@ interface ClientStore {
   setClients: (clients: ClientList) => void;
 }
 
-const clientNameKey = 'ontime-client-name';
+const clientNameKey = `${baseURI}ontime-client-name`;
 
 function persistNameInStorage(newValue: string) {
   localStorage.setItem(clientNameKey, newValue);

apps/client/src/common/stores/viewOptions.ts

@@ -1,6 +1,8 @@
+// eslint-disable-next-line simple-import-sort/imports
 import { create } from 'zustand';
 
 import { booleanFromLocalStorage } from '../utils/localStorage';
+import { baseURI } from '../../externals';
 
 enum LocalEventKeys {
   Mirror = 'ontime-view-mirror',
@@ -12,11 +14,11 @@ type ViewOptionsStore = {
 };
 
 export const useViewOptionsStore = create<ViewOptionsStore>()((set) => ({
-  mirror: booleanFromLocalStorage(LocalEventKeys.Mirror, false),
+  mirror: booleanFromLocalStorage(`${baseURI}${LocalEventKeys.Mirror}`, false),
   toggleMirror: (newValue?: boolean) =>
     set((state) => {
       const val = typeof newValue === 'undefined' ? !state.mirror : newValue;
-      localStorage.setItem(LocalEventKeys.Mirror, String(val));
+      localStorage.setItem(`${baseURI}${LocalEventKeys.Mirror}`, String(val));
       return { mirror: val };
     }),
 }));