feat/fix(ui): Mac keyboard shortcuts (#2430)

2025-05-05 11:57:54 -04:00
parent df37b294b8
commit ab870e9b70
5 changed files with 279 additions and 113 deletions
@@ -18,6 +18,10 @@ interface SearchBarProps {
    count: number;
    currentIndex: number;
  };
+  /** Optional ref for the search input element */
+  inputRef?: React.RefObject<HTMLInputElement>;
+  /** Initial search term */
+  initialSearchTerm?: string;
 }

 /**
@@ -35,12 +39,15 @@ export const SearchBar: React.FC<SearchBarProps> = ({
  onClose,
  onNavigate,
  searchResults,
+  inputRef: externalInputRef,
+  initialSearchTerm = '',
 }) => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [displayTerm, setDisplayTerm] = useState(''); // For immediate visual feedback
+  const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
+  const [displayTerm, setDisplayTerm] = useState(initialSearchTerm); // For immediate visual feedback
  const [caseSensitive, setCaseSensitive] = useState(false);
  const [isExiting, setIsExiting] = useState(false);
-  const inputRef = React.useRef<HTMLInputElement>(null);
+  const internalInputRef = React.useRef<HTMLInputElement>(null);
+  const inputRef = externalInputRef || internalInputRef;

  // Create debounced search function
  const debouncedSearch = useCallback(
@@ -54,7 +61,16 @@ export const SearchBar: React.FC<SearchBarProps> = ({

  useEffect(() => {
    inputRef.current?.focus();
-  }, []);
+  }, [inputRef]);
+
+  // Handle changes to initialSearchTerm
+  useEffect(() => {
+    if (initialSearchTerm) {
+      setSearchTerm(initialSearchTerm);
+      setDisplayTerm(initialSearchTerm);
+      debouncedSearch(initialSearchTerm, caseSensitive);
+    }
+  }, [initialSearchTerm, caseSensitive, debouncedSearch]);

  // Cleanup debounced function on unmount
  useEffect(() => {
@@ -22,11 +22,13 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
  children,
 }) => {
  const [isSearchVisible, setIsSearchVisible] = useState(false);
+  const [initialSearchTerm, setInitialSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState<{
    currentIndex: number;
    count: number;
  } | null>(null);

+  const searchInputRef = React.useRef<HTMLInputElement>(null);
  const highlighterRef = React.useRef<SearchHighlighter | null>(null);
  const containerRef = React.useRef<HTMLDivElement | null>(null);
  const lastSearchRef = React.useRef<{ term: string; caseSensitive: boolean }>({
@@ -58,6 +60,127 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
    []
  );

+  /**
+   * Handles the search operation when a user enters a search term.
+   * Uses debouncing to prevent excessive highlighting operations.
+   * @param term - The text to search for
+   * @param caseSensitive - Whether to perform a case-sensitive search
+   */
+  const handleSearch = useCallback(
+    (term: string, caseSensitive: boolean) => {
+      // Store the latest search parameters
+      lastSearchRef.current = { term, caseSensitive };
+
+      if (!term) {
+        setSearchResults(null);
+        if (highlighterRef.current) {
+          highlighterRef.current.clearHighlights();
+        }
+        return;
+      }
+
+      const container = containerRef.current;
+      if (!container) return;
+
+      if (!highlighterRef.current) {
+        highlighterRef.current = new SearchHighlighter(container, (count) => {
+          // Only update if this is still the latest search
+          if (
+            lastSearchRef.current.term === term &&
+            lastSearchRef.current.caseSensitive === caseSensitive
+          ) {
+            if (count > 0) {
+              setSearchResults((prev) => ({
+                currentIndex: prev?.currentIndex || 1,
+                count,
+              }));
+            } else {
+              setSearchResults(null);
+            }
+          }
+        });
+      }
+
+      // Debounce the highlight operation
+      debouncedHighlight(term, caseSensitive, highlighterRef.current);
+    },
+    [debouncedHighlight]
+  );
+
+  /**
+   * Navigates between search results in the specified direction.
+   * @param direction - Direction to navigate ('next' or 'prev')
+   */
+  const navigateResults = useCallback(
+    (direction: 'next' | 'prev') => {
+      if (!searchResults || searchResults.count === 0 || !highlighterRef.current) return;
+
+      let newIndex: number;
+      const currentIdx = searchResults.currentIndex - 1; // Convert to 0-based
+
+      if (direction === 'next') {
+        newIndex = currentIdx + 1;
+        if (newIndex >= searchResults.count) {
+          newIndex = 0;
+        }
+      } else {
+        newIndex = currentIdx - 1;
+        if (newIndex < 0) {
+          newIndex = searchResults.count - 1;
+        }
+      }
+
+      setSearchResults({
+        ...searchResults,
+        currentIndex: newIndex + 1,
+      });
+
+      highlighterRef.current.setCurrentMatch(newIndex, true); // Explicitly scroll when navigating
+    },
+    [searchResults]
+  );
+
+  const handleFindCommand = useCallback(() => {
+    if (isSearchVisible && searchInputRef.current) {
+      searchInputRef.current.focus();
+      searchInputRef.current.select();
+    } else {
+      setIsSearchVisible(true);
+    }
+  }, [isSearchVisible]);
+
+  const handleFindNext = useCallback(() => {
+    if (isSearchVisible) {
+      navigateResults('next');
+    }
+  }, [isSearchVisible, navigateResults]);
+
+  const handleFindPrevious = useCallback(() => {
+    if (isSearchVisible) {
+      navigateResults('prev');
+    }
+  }, [isSearchVisible, navigateResults]);
+
+  const handleUseSelectionFind = useCallback(() => {
+    const selection = window.getSelection()?.toString().trim();
+    if (selection) {
+      setInitialSearchTerm(selection);
+    }
+  }, []);
+
+  /**
+   * Closes the search interface and cleans up highlights.
+   */
+  const handleCloseSearch = useCallback(() => {
+    setIsSearchVisible(false);
+    setSearchResults(null);
+    if (highlighterRef.current) {
+      highlighterRef.current.clearHighlights();
+    }
+    // Cancel any pending highlight operations
+    debouncedHighlight.cancel?.();
+  }, [debouncedHighlight]);
+
  // Clean up highlighter and debounced functions on unmount
  useEffect(() => {
    return () => {
@@ -69,11 +192,47 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
    };
  }, [debouncedHighlight]);

+  // Listen for keyboard events
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+      const isMac = window.electron.platform === 'darwin';
+
+      // Handle ⌘F/Ctrl+F to show/focus search
+      if ((isMac ? e.metaKey : e.ctrlKey) && !e.shiftKey && e.key === 'f') {
        e.preventDefault();
-        setIsSearchVisible(true);
+        if (isSearchVisible && searchInputRef.current) {
+          // If search is already visible, focus and select the input
+          searchInputRef.current.focus();
+          searchInputRef.current.select();
+        } else {
+          // Otherwise show the search UI
+          setIsSearchVisible(true);
+        }
+        return;
+      }
+
+      // Handle ⌘E to use selection for find (Mac only)
+      if (isMac && e.metaKey && !e.shiftKey && e.key === 'e') {
+        // Don't handle ⌘E if we're in the search input - let the native behavior work
+        if (e.target instanceof HTMLInputElement && e.target.id === 'search-input') {
+          return;
+        }
+
+        e.preventDefault();
+        handleUseSelectionFind();
+        return;
+      }
+
+      // Only handle ⌘G and ⇧⌘G if search is visible (Mac only)
+      if (isSearchVisible && isMac && e.metaKey && e.key === 'g') {
+        e.preventDefault();
+        if (e.shiftKey) {
+          // ⇧⌘G - Find Previous
+          navigateResults('prev');
+        } else {
+          // ⌘G - Find Next
+          navigateResults('next');
+        }
      }
    };

@@ -81,94 +240,22 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
-  }, []);
+  }, [isSearchVisible, navigateResults, handleSearch, handleUseSelectionFind]);

-  /**
-   * Handles the search operation when a user enters a search term.
-   * Uses debouncing to prevent excessive highlighting operations.
-   * @param term - The text to search for
-   * @param caseSensitive - Whether to perform a case-sensitive search
-   */
-  const handleSearch = (term: string, caseSensitive: boolean) => {
-    // Store the latest search parameters
-    lastSearchRef.current = { term, caseSensitive };
+  // Listen for Find menu commands
+  useEffect(() => {
+    window.electron.on('find-command', handleFindCommand);
+    window.electron.on('find-next', handleFindNext);
+    window.electron.on('find-previous', handleFindPrevious);
+    window.electron.on('use-selection-find', handleUseSelectionFind);

-    if (!term) {
-      setSearchResults(null);
-      if (highlighterRef.current) {
-        highlighterRef.current.clearHighlights();
-      }
-      return;
-    }
-
-    const container = containerRef.current;
-    if (!container) return;
-
-    if (!highlighterRef.current) {
-      highlighterRef.current = new SearchHighlighter(container, (count) => {
-        // Only update if this is still the latest search
-        if (
-          lastSearchRef.current.term === term &&
-          lastSearchRef.current.caseSensitive === caseSensitive
-        ) {
-          if (count > 0) {
-            setSearchResults((prev) => ({
-              currentIndex: prev?.currentIndex || 1,
-              count,
-            }));
-          } else {
-            setSearchResults(null);
-          }
-        }
-      });
-    }
-
-    // Debounce the highlight operation
-    debouncedHighlight(term, caseSensitive, highlighterRef.current);
-  };
-
-  /**
-   * Navigates between search results in the specified direction.
-   * @param direction - Direction to navigate ('next' or 'prev')
-   */
-  const navigateResults = (direction: 'next' | 'prev') => {
-    if (!searchResults || searchResults.count === 0 || !highlighterRef.current) return;
-
-    let newIndex: number;
-    const currentIdx = searchResults.currentIndex - 1; // Convert to 0-based
-
-    if (direction === 'next') {
-      newIndex = currentIdx + 1;
-      if (newIndex >= searchResults.count) {
-        newIndex = 0;
-      }
-    } else {
-      newIndex = currentIdx - 1;
-      if (newIndex < 0) {
-        newIndex = searchResults.count - 1;
-      }
-    }
-
-    setSearchResults({
-      ...searchResults,
-      currentIndex: newIndex + 1,
-    });
-
-    highlighterRef.current.setCurrentMatch(newIndex, true); // Explicitly scroll when navigating
-  };
-
-  /**
-   * Closes the search interface and cleans up highlights.
-   */
-  const handleCloseSearch = () => {
-    setIsSearchVisible(false);
-    setSearchResults(null);
-    if (highlighterRef.current) {
-      highlighterRef.current.clearHighlights();
-    }
-    // Cancel any pending highlight operations
-    debouncedHighlight.cancel?.();
-  };
+    return () => {
+      window.electron.off('find-command', handleFindCommand);
+      window.electron.off('find-next', handleFindNext);
+      window.electron.off('find-previous', handleFindPrevious);
+      window.electron.off('use-selection-find', handleUseSelectionFind);
+    };
+  }, [handleFindCommand, handleFindNext, handleFindPrevious, handleUseSelectionFind]);

  return (
    <div ref={containerRef} className={`search-container ${className}`}>
@@ -178,6 +265,8 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
          onClose={handleCloseSearch}
          onNavigate={navigateResults}
          searchResults={searchResults}
+          inputRef={searchInputRef}
+          initialSearchTerm={initialSearchTerm}
        />
      )}
      {children}