feature: Add keyboard shortcuts for goto def & find all refs (#329)

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Added copy button for filenames. [#328](https://github.com/sourcebot-dev/sourcebot/pull/328)
 - Added development docker compose file. [#328](https://github.com/sourcebot-dev/sourcebot/pull/328)
+- Added keyboard shortcuts for find all refs / go to def. [#329](https://github.com/sourcebot-dev/sourcebot/pull/329)
 - Added GCP IAP JIT provisioning. [#330](https://github.com/sourcebot-dev/sourcebot/pull/330)
 
 ### Fixed

packages/web/src/ee/features/codeNav/components/symbolHoverPopup/index.tsx

@@ -8,6 +8,10 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { SymbolDefinition, useHoveredOverSymbolInfo } from "./useHoveredOverSymbolInfo";
 import { SymbolDefinitionPreview } from "./symbolDefinitionPreview";
 import { createPortal } from "react-dom";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useToast } from "@/components/hooks/use-toast";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
 
 interface SymbolHoverPopupProps {
     editorRef: ReactCodeMirrorRef;
@@ -26,6 +30,7 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
 }) => {
     const ref = useRef<HTMLDivElement>(null);
     const [isSticky, setIsSticky] = useState(false);
+    const { toast } = useToast();
 
     const symbolInfo = useHoveredOverSymbolInfo({
         editorRef,
@@ -94,6 +99,36 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
         }
     }, [symbolInfo, onGotoDefinition]);
 
+    useHotkeys('alt+shift+f12', () => {
+        if (symbolInfo?.symbolName) {
+            console.log('here!');
+            onFindReferences(symbolInfo.symbolName);
+        }
+    }, {
+        enableOnFormTags: true,
+        enableOnContentEditable: true,
+        description: "Open Explore Panel",
+    });
+
+    useHotkeys('alt+f12', () => {
+        if (!symbolInfo) {
+            return;
+        }
+
+        if (!symbolInfo.symbolDefinitions || symbolInfo.symbolDefinitions.length === 0) {
+            toast({
+                description: "No definition found for this symbol",
+            });
+            return;
+        }
+
+        onGotoDefinition();
+    }, {
+        enableOnFormTags: true,
+        enableOnContentEditable: true,
+        description: "Go to definition",
+    })
+
     if (!symbolInfo) {
         return null;
     }
@@ -122,6 +157,8 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
             )}
             <Separator />
             <div className="flex flex-row gap-2 mt-2">
+                <Tooltip delayDuration={500}>
+                    <TooltipTrigger asChild>
                         <LoadingButton
                             loading={symbolInfo.isSymbolDefinitionsLoading}
                             disabled={!symbolInfo.symbolDefinitions || symbolInfo.symbolDefinitions.length === 0}
@@ -135,6 +172,18 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
                                     `Go to ${symbolInfo.symbolDefinitions && symbolInfo.symbolDefinitions.length > 1 ? "definitions" : "definition"}`
                             }
                         </LoadingButton>
+                    </TooltipTrigger>
+                    <TooltipContent
+                        side="bottom"
+                        className="flex flex-row items-center gap-2"
+                    >
+                        <KeyboardShortcutHint shortcut="⌥ F12" />
+                        <Separator orientation="vertical" className="h-4" />
+                        <span>{`Go to ${symbolInfo.symbolDefinitions && symbolInfo.symbolDefinitions.length > 1 ? "definitions" : "definition"}`}</span>
+                    </TooltipContent>
+                </Tooltip>
+                <Tooltip delayDuration={500}>
+                    <TooltipTrigger asChild>
                         <Button
                             variant="outline"
                             size="sm"
@@ -142,6 +191,16 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
                         >
                             Find references
                         </Button>
+                    </TooltipTrigger>
+                    <TooltipContent
+                        side="bottom"
+                        className="flex flex-row items-center gap-2"
+                    >
+                        <KeyboardShortcutHint shortcut="⌥ ⇧ F12" />
+                        <Separator orientation="vertical" className="h-4" />
+                        <span>Find references</span>
+                    </TooltipContent>
+                </Tooltip>
             </div>
         </div>,
         document.body