refactor: expose editor panels in small device

2026-08-21 15:09:10 +00:00 · 2025-06-23 06:59:34 +02:00
parent b991627cb7
commit 984dcb0181
52 changed files with 336 additions and 131 deletions
@@ -0,0 +1,82 @@
+import { lazy, useCallback, useEffect } from 'react';
+import { IoApps, IoClose, IoSettingsOutline } from 'react-icons/io5';
+import { IconButton, useDisclosure } from '@chakra-ui/react';
+import { useHotkeys } from '@mantine/hooks';
+
+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/Overview';
+
+import WelcomePlacement from './welcome/WelcomePlacement';
+
+import styles from './Editor.module.scss';
+
+const Rundown = lazy(() => import('../../features/rundown/RundownExport'));
+const TimerControl = lazy(() => import('../../features/control/playback/TimerControlExport'));
+const MessageControl = lazy(() => import('../../features/control/message/MessageControlExport'));
+
+export default function Editor() {
+  const { isOpen: isSettingsOpen, setLocation, close } = useAppSettingsNavigation();
+  const { isOpen: isMenuOpen, onOpen, onClose } = 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('project');
+    }
+  }, [close, isSettingsOpen, setLocation]);
+
+  useHotkeys([['mod + ,', toggleSettings]]);
+
+  return (
+    <div className={styles.mainContainer} data-testid='event-editor'>
+      <WelcomePlacement />
+      <NavigationMenu isOpen={isMenuOpen} onClose={onClose} />
+      <EditorOverview>
+        <IconButton
+          aria-label='Toggle navigation'
+          variant='ontime-subtle-white'
+          size='lg'
+          icon={<IoApps />}
+          onClick={onOpen}
+        />
+        <IconButton
+          aria-label='Toggle settings'
+          variant={isSettingsOpen ? 'ontime-subtle' : 'ontime-subtle-white'}
+          size='lg'
+          icon={isSettingsOpen ? <IoClose /> : <IoSettingsOutline />}
+          onClick={toggleSettings}
+        />
+      </EditorOverview>
+      {isSettingsOpen ? (
+        <AppSettings />
+      ) : (
+        <div id='panels' className={styles.panelContainer}>
+          <div className={styles.left}>
+            <TimerControl />
+            <MessageControl />
+          </div>
+          <Rundown />
+        </div>
+      )}
+    </div>
+  );
+}