refactor: make finder available in exported rundown

apps/client/src/features/editors/Editor.tsx

@@ -10,7 +10,6 @@ import AppSettings from '../app-settings/AppSettings';
 import useAppSettingsNavigation from '../app-settings/useAppSettingsNavigation';
 import { EditorOverview } from '../overview/Overview';
 
-import Finder from './finder/Finder';
 import WelcomePlacement from './welcome/WelcomePlacement';
 
 import styles from './Editor.module.scss';
@@ -22,7 +21,6 @@ const MessageControl = lazy(() => import('../control/message/MessageControlExpor
 export default function Editor() {
   const { isOpen: isSettingsOpen, setLocation, close } = useAppSettingsNavigation();
   const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
-  const { isOpen: isFinderOpen, onToggle: onFinderToggle, onClose: onFinderClose } = useDisclosure();
 
   useWindowTitle('Editor');
 
@@ -46,16 +44,11 @@ export default function Editor() {
     }
   }, [close, isSettingsOpen, setLocation]);
 
-  useHotkeys([
-    ['mod + ,', toggleSettings],
-    ['mod + f', onFinderToggle],
-    ['Escape', onFinderClose],
-  ]);
+  useHotkeys([['mod + ,', toggleSettings]]);
 
   return (
     <div className={styles.mainContainer} data-testid='event-editor'>
       <WelcomePlacement />
-      <Finder isOpen={isFinderOpen} onClose={onFinderClose} />
       <NavigationMenu isOpen={isMenuOpen} onClose={onClose} />
       <EditorOverview>
         <IconButton

apps/client/src/features/rundown/RundownExport.tsx

@@ -8,11 +8,14 @@ import { cx } from '../../common/utils/styleUtils';
 import { Corner } from '../editors/editor-utils/EditorUtils';
 
 import RundownEventEditor from './event-editor/RundownEventEditor';
+import FinderPlacement from './placements/FinderPlacement';
 import RundownWrapper from './RundownWrapper';
 
 import style from './RundownExport.module.scss';
 
-const RundownExport = () => {
+export default memo(RundownExport);
+
+function RundownExport() {
   const isExtracted = window.location.pathname.includes('/rundown');
   const appMode = useAppMode((state) => state.mode);
   const hideSideBar = isExtracted && appMode === 'run';
@@ -21,6 +24,7 @@ const RundownExport = () => {
 
   return (
     <div className={classes} data-testid='panel-rundown'>
+      <FinderPlacement />
       <div className={style.rundown}>
         <div className={style.list}>
           <ErrorBoundary>
@@ -40,6 +44,4 @@ const RundownExport = () => {
       </div>
     </div>
   );
-};
-
-export default memo(RundownExport);
+}

apps/client/src/features/rundown/placements/FinderPlacement.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { useDisclosure } from '@chakra-ui/react';
+import { useHotkeys } from '@mantine/hooks';
+
+import Finder from '../../editors/finder/Finder';
+
+export default memo(FinderPlacement);
+
+function FinderPlacement() {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  useHotkeys([
+    ['mod + f', onToggle],
+    ['Escape', onClose],
+  ]);
+
+  if (isOpen) {
+    return <Finder isOpen={isOpen} onClose={onClose} />;
+  }
+
+  return null;
+}