refactor: create separation between editor wrapper and contents

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>
   );
 }