refactor: make finder available in exported rundown

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