feat: event finder

apps/client/package.json

@@ -11,7 +11,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fontsource/open-sans": "^5.0.28",
-    "@mantine/hooks": "^7.6.2",
+    "@mantine/hooks": "^7.13.3",
     "@react-icons/all-files": "^4.1.0",
     "@sentry/react": "^8.19.0",
     "@tanstack/react-query": "^5.17.9",

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

@@ -1,16 +1,18 @@
 import { lazy, useCallback, useEffect } from 'react';
 import { IconButton, useDisclosure } from '@chakra-ui/react';
+import { useHotkeys } from '@mantine/hooks';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 
 import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
-import useElectronEvent from '../../common/hooks/useElectronEvent';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import AppSettings from '../app-settings/AppSettings';
 import useAppSettingsNavigation from '../app-settings/useAppSettingsNavigation';
 import { EditorOverview } from '../overview/Overview';
 
+import Finder from './finder/Finder';
+
 import styles from './Editor.module.scss';
 
 const Rundown = lazy(() => import('../rundown/RundownExport'));
@@ -19,47 +21,8 @@ const MessageControl = lazy(() => import('../control/message/MessageControlExpor
 
 export default function Editor() {
   const { isOpen: isSettingsOpen, setLocation, close } = useAppSettingsNavigation();
-  const { isElectron } = useElectronEvent();
   const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
-
-  const toggleSettings = useCallback(() => {
-    if (isSettingsOpen) {
-      close();
-    } else {
-      setLocation('project');
-    }
-  }, [close, isSettingsOpen, setLocation]);
-
-  // Handle keyboard shortcuts
-  const handleKeyPress = useCallback(
-    (event: KeyboardEvent) => {
-      // handle held key
-      if (event.repeat) return;
-
-      // check if the ctrl key is pressed
-      if (event.ctrlKey || event.metaKey) {
-        // ctrl + , (settings)
-        if (event.key === ',') {
-          toggleSettings();
-          event.preventDefault();
-          event.stopPropagation();
-        }
-      }
-    },
-    [toggleSettings],
-  );
-
-  // register ctrl + , to open settings
-  useEffect(() => {
-    if (isElectron) {
-      document.addEventListener('keydown', handleKeyPress);
-    }
-    return () => {
-      if (isElectron) {
-        document.removeEventListener('keydown', handleKeyPress);
-      }
-    };
-  }, [handleKeyPress, isElectron]);
+  const { isOpen: isFinderOpen, onToggle: onFinderToggle, onClose: onFinderClose } = useDisclosure();
 
   useWindowTitle('Editor');
 
@@ -72,8 +35,23 @@ export default function Editor() {
     }
   }, [setLocation]);
 
+  const toggleSettings = useCallback(() => {
+    if (isSettingsOpen) {
+      close();
+    } else {
+      setLocation('project');
+    }
+  }, [close, isSettingsOpen, setLocation]);
+
+  useHotkeys([
+    ['mod + ,', toggleSettings],
+    ['mod + f', onFinderToggle],
+    ['Escape', onFinderClose],
+  ]);
+
   return (
     <div className={styles.mainContainer} data-testid='event-editor'>
+      <Finder isOpen={isFinderOpen} onClose={onFinderClose} />
       <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
       <EditorOverview>
         <IconButton

apps/client/src/features/editors/finder/Finder.module.scss

@@ -0,0 +1,69 @@
+.entry,
+.empty,
+.error {
+  padding-inline: 0.5rem;
+  font-size: 1rem;
+  height: 3rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.entry[data-selected='true'] {
+  background-color: $blue-700;
+}
+
+.empty {
+  color: $label-gray;
+}
+
+.error {
+  color: $error-red;
+}
+
+.data {
+  display: grid;
+  grid-template-areas:
+    'index cue'
+    'index title';
+  column-gap: 1rem;
+  grid-template-rows: min-content 1fr;
+
+  .index {
+    grid-area: index;
+    background-color: var(--color, $gray-1000);
+    border-radius: 2px;
+    padding-block: 0.25rem;
+    width: 3.5rem;
+    align-self: center;
+    text-align: center;
+  }
+
+  .title {
+    grid-area: title;
+  }
+
+  .cue {
+    grid-area: cue;
+    font-size: calc(1rem - 2px);
+    color: $label-gray;
+    max-height: 1em;
+    min-height: 0;
+  }
+}
+
+.footer {
+  font-size: calc(1rem - 2px);
+  color: $label-gray;
+}
+
+.em {
+  color: $ui-white;
+  margin-inline: 0.25rem;
+}
+
+.scrollContainer {
+  max-height: 70vh;
+  overflow: auto;
+}

apps/client/src/features/editors/finder/Finder.tsx

@@ -0,0 +1,101 @@
+import { KeyboardEvent, useState } from 'react';
+import { Input, Modal, ModalBody, ModalContent, ModalFooter, ModalOverlay } from '@chakra-ui/react';
+import { useDebouncedCallback } from '@mantine/hooks';
+import { isOntimeEvent, SupportedEvent } from 'ontime-types';
+
+import { useEventSelection } from '../../rundown/useEventSelection';
+
+import useFinder from './useFinder';
+
+import style from './Finder.module.scss';
+
+interface FinderProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function Finder(props: FinderProps) {
+  const { isOpen, onClose } = props;
+  const { find, results, error } = useFinder();
+  const [selected, setSelected] = useState(0);
+
+  const setSelectedEvents = useEventSelection((state) => state.setSelectedEvents);
+  const debouncedFind = useDebouncedCallback(find, 100);
+
+  const navigate = (event: KeyboardEvent<HTMLDivElement>) => {
+    // all operations need results
+    if (results.length === 0) {
+      return;
+    }
+    if (event.key === 'ArrowDown') {
+      setSelected((prev) => (prev + 1) % results.length);
+    }
+    if (event.key === 'ArrowUp') {
+      setSelected((prev) => (prev - 1 + results.length) % results.length);
+    }
+    if (event.key === 'Enter') {
+      submit();
+    }
+  };
+
+  const submit = () => {
+    const selectedEvent = results[selected];
+    setSelectedEvents({ id: selectedEvent.id, index: selectedEvent.index, selectMode: 'click' });
+    onClose();
+  };
+
+  const handleMouseMoveEvent = (event: React.MouseEvent<HTMLUListElement>) => {
+    const target = event.target as HTMLElement;
+    const li = target.closest('li');
+    if (li) {
+      const index = Number(li.dataset.index);
+      if (!isNaN(index)) {
+        setSelected(index);
+      }
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent maxWidth='40vw'>
+        <ModalBody onKeyDown={navigate}>
+          <Input size='lg' onChange={debouncedFind} variant='ontime-filled' placeholder='Search...' />
+          <ul className={style.scrollContainer} onMouseMove={handleMouseMoveEvent}>
+            {error && <li className={style.error}>{error}</li>}
+            {results.length === 0 && <li className={style.empty}>No results</li>}
+            {results.length > 0 &&
+              results.map((event, index) => {
+                const isSelected = selected === index;
+                const displayIndex = event.type === SupportedEvent.Block ? '-' : event.index;
+                const colour = event.type === SupportedEvent.Event ? event.colour : '';
+
+                return (
+                  <li
+                    key={event.id}
+                    className={style.entry}
+                    data-selected={isSelected}
+                    data-index={index}
+                    onClick={submit}
+                  >
+                    <div className={style.data}>
+                      <div className={style.index} style={{ '--color': colour }}>
+                        {displayIndex}
+                      </div>
+                      {isOntimeEvent(event) && <div className={style.cue}>{event.cue}</div>}
+                      <div className={style.title}>{event.title}</div>
+                    </div>
+                    {isSelected && <span>Go ⏎</span>}
+                  </li>
+                );
+              })}
+          </ul>
+        </ModalBody>
+        <ModalFooter className={style.footer}>
+          Use the keywords <span className={style.em}>cue</span>, <span className={style.em}>index</span> or
+          <span className={style.em}>title</span> to filter search
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}