refactor: create separation between editor wrapper and contents

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

@@ -1,24 +1,5 @@
-@use './EditorMixin' as editor;
-
 $min-playback-width: 27rem;
 $max-playback-width: 30rem;
-$panel-gap: 0.5rem;
-
-.mainContainer {
-  background-color: $ui-black;
-  width: 100%;
-  height: 100%;
-  color: $ui-white;
-  padding: 0.5rem;
-
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-rows: 3.5rem 1fr;
-  grid-template-areas:
-    'overview'
-    'main';
-  gap: $panel-gap;
-}
 
 .panelContainer {
   grid-area: main;
@@ -26,15 +7,6 @@ $panel-gap: 0.5rem;
   display: flex;
   gap: $panel-gap;
   overflow: hidden;
-
-  .rundown,
-  .playback,
-  .messages {
-    position: relative;
-    border-radius: var(--editor--panel__br);
-    background-color: $bg-container-l2;
-    padding: 1rem;
-  }
 }
 
 .left {
@@ -45,18 +17,3 @@ $panel-gap: 0.5rem;
   flex-direction: column;
   gap: $panel-gap;
 }
-
-.messages {
-  flex: 1;
-}
-
-.content {
-  padding-top: 1.5rem;
-}
-
-.contentColumnLayout {
-  display: flex;
-  flex-direction: column;
-  gap: $section-spacing;
-  color: $ui-white;
-}

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

@@ -1,16 +1,4 @@
-import { lazy, useCallback, useEffect } from 'react';
-import { IoApps, IoClose, IoSettingsOutline } from 'react-icons/io5';
-import { useDisclosure, useHotkeys } from '@mantine/hooks';
-
-import IconButton from '../../common/components/buttons/IconButton';
-import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
-import { useElectronListener } from '../../common/hooks/useElectronEvent';
-import { useWindowTitle } from '../../common/hooks/useWindowTitle';
-import AppSettings from '../../features/app-settings/AppSettings';
-import useAppSettingsNavigation from '../../features/app-settings/useAppSettingsNavigation';
-import EditorOverview from '../../features/overview/EditorOverview';
-
-import WelcomePlacement from './welcome/WelcomePlacement';
+import { lazy } from 'react';
 
 import styles from './Editor.module.scss';
 
@@ -19,56 +7,13 @@ const TimerControl = lazy(() => import('../../features/control/playback/TimerCon
 const MessageControl = lazy(() => import('../../features/control/message/MessageControlExport'));
 
 export default function Editor() {
-  const { isOpen: isSettingsOpen, setLocation, close } = useAppSettingsNavigation();
-  const [isOpen, handler] = useDisclosure();
-
-  useWindowTitle('Editor');
-
-  // we need to register the listener to change the editor location
-  useElectronListener();
-
-  // listen to shutdown request from electron process
-  useEffect(() => {
-    if (window.process?.type === 'renderer') {
-      window.ipcRenderer.on('user-request-shutdown', () => {
-        setLocation('shutdown');
-      });
-    }
-  }, [setLocation]);
-
-  const toggleSettings = useCallback(() => {
-    if (isSettingsOpen) {
-      close();
-    } else {
-      setLocation('settings');
-    }
-  }, [close, isSettingsOpen, setLocation]);
-
-  useHotkeys([['mod + ,', toggleSettings]]);
-
   return (
-    <div className={styles.mainContainer} data-testid='event-editor'>
-      <WelcomePlacement />
-      <NavigationMenu isOpen={isOpen} onClose={handler.close} />
-      <EditorOverview>
-        <IconButton aria-label='Toggle navigation' variant='subtle-white' size='xlarge' onClick={handler.open}>
-          <IoApps />
-        </IconButton>
-        <IconButton aria-label='Toggle settings' variant='subtle-white' size='xlarge' onClick={toggleSettings}>
-          {isSettingsOpen ? <IoClose /> : <IoSettingsOutline />}
-        </IconButton>
-      </EditorOverview>
-      {isSettingsOpen ? (
-        <AppSettings />
-      ) : (
-        <div id='panels' className={styles.panelContainer}>
-          <div className={styles.left}>
-            <TimerControl />
-            <MessageControl />
-          </div>
-          <Rundown />
-        </div>
-      )}
+    <div id='panels' className={styles.panelContainer}>
+      <div className={styles.left}>
+        <TimerControl />
+        <MessageControl />
+      </div>
+      <Rundown />
     </div>
   );
 }

apps/client/src/views/editor/EditorMixin.scss

@@ -1,17 +0,0 @@
-@use '../../theme/ontimeColours' as *;
-@use '../../theme/ontimeStyles' as *;
-
-// declare editor specific styling constants
-:root {
-  --editor--panel__br: 8px;
-}
-
-@mixin panel() {
-  display: flex;
-
-  position: relative;
-  border-radius: var(--editor--panel__br);
-  height: 100%;
-  background-color: $bg-container-l2;
-  padding: 1rem;
-}

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

@@ -0,0 +1,15 @@
+.mainContainer {
+  background-color: $ui-black;
+  width: 100%;
+  height: 100%;
+  color: $ui-white;
+  padding: 0.5rem;
+
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: 3.5rem 1fr;
+  grid-template-areas:
+    'overview'
+    'main';
+  gap: $panel-gap;
+}

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

@@ -1,11 +1,64 @@
-import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
+import { useCallback, useEffect } from 'react';
+import { IoApps, IoClose, IoSettingsOutline } from 'react-icons/io5';
+import { useDisclosure, useHotkeys } from '@mantine/hooks';
 
+import IconButton from '../../common/components/buttons/IconButton';
+import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
+import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
+import { useElectronListener } from '../../common/hooks/useElectronEvent';
+import { useWindowTitle } from '../../common/hooks/useWindowTitle';
+import AppSettings from '../../features/app-settings/AppSettings';
+import useAppSettingsNavigation from '../../features/app-settings/useAppSettingsNavigation';
+import EditorOverview from '../../features/overview/EditorOverview';
+
+import WelcomePlacement from './welcome/WelcomePlacement';
 import Editor from './Editor';
 
+import styles from './ProtectedEditor.module.scss';
+
 export default function ProtectedEditor() {
+  const { isOpen: isSettingsOpen, setLocation, close } = useAppSettingsNavigation();
+  const [isOpen, handler] = useDisclosure();
+
+  useWindowTitle('Editor');
+
+  // we need to register the listener to change the editor location
+  useElectronListener();
+
+  // listen to shutdown request from electron process
+  useEffect(() => {
+    if (window.process?.type === 'renderer') {
+      window.ipcRenderer.on('user-request-shutdown', () => {
+        setLocation('shutdown');
+      });
+    }
+  }, [setLocation]);
+
+  const toggleSettings = useCallback(() => {
+    if (isSettingsOpen) {
+      close();
+    } else {
+      setLocation('settings');
+    }
+  }, [close, isSettingsOpen, setLocation]);
+
+  useHotkeys([['mod + ,', toggleSettings]]);
+
   return (
     <ProtectRoute permission='editor'>
-      <Editor />
+      <div className={styles.mainContainer} data-testid='event-editor'>
+        <WelcomePlacement />
+        <NavigationMenu isOpen={isOpen} onClose={handler.close} />
+        <EditorOverview>
+          <IconButton aria-label='Toggle navigation' variant='subtle-white' size='xlarge' onClick={handler.open}>
+            <IoApps />
+          </IconButton>
+          <IconButton aria-label='Toggle settings' variant='subtle-white' size='xlarge' onClick={toggleSettings}>
+            {isSettingsOpen ? <IoClose /> : <IoSettingsOutline />}
+          </IconButton>
+        </EditorOverview>
+        {isSettingsOpen ? <AppSettings /> : <Editor />}
+      </div>
     </ProtectRoute>
   );
 }