chore(web): Scope code nav to current repository by default (#647)

Author: brendan-kellam

CHANGELOG.md

@@ -9,13 +9,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Added `ALWAYS_INDEX_FILE_PATTERNS` environment variable to allow specifying a comma seperated list of glob patterns matching file paths that should always be indexed, regardless of size or # of trigrams. [#631](https://github.com/sourcebot-dev/sourcebot/pull/631)
+- Added button to explore menu to toggle cross-repository search. [#647](https://github.com/sourcebot-dev/sourcebot/pull/647)
 
 ### Fixed
 - Fixed issue where single quotes could not be used in search queries. [#629](https://github.com/sourcebot-dev/sourcebot/pull/629)
 - Fixed issue where files with special characters would fail to load. [#636](https://github.com/sourcebot-dev/sourcebot/issues/636)
 - Fixed Ask performance issues. [#632](https://github.com/sourcebot-dev/sourcebot/pull/632)
 - Fixed regression where creating a new Ask thread when unauthenticated would result in a 404. [#641](https://github.com/sourcebot-dev/sourcebot/pull/641)
 
+### Changed
+- Changed the default behaviour for code nav to scope references & definitions search to the current repository. [#647](https://github.com/sourcebot-dev/sourcebot/pull/647)
+
 ## [4.10.0] - 2025-11-24
 
 ### Added

docs/docs/features/code-navigation.mdx

@@ -21,6 +21,7 @@ import LicenseKeyRequired from '/snippets/license-key-required.mdx'
 | **Go to definition** | Clicking the "go to definition" button in the popover or clicking the symbol name navigates to the symbol's definition. |
 | **Find references** | Clicking the "find all references" button in the popover lists all references in the explore panel. |
 | **Explore panel** | Lists all references and definitions for the symbol selected in the popover. |
+| **Cross-repository navigation** | You can search across all repositories by clicking the globe icon in the explore panel. By default, references and definitions are scoped to the repository where the symbol is being resolved. |
 
 ## How does it work?
 

packages/web/src/app/[domain]/browse/[...path]/components/pureCodePreviewPanel.tsx

@@ -3,22 +3,17 @@
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { SymbolHoverPopup } from "@/ee/features/codeNav/components/symbolHoverPopup";
 import { symbolHoverTargetsExtension } from "@/ee/features/codeNav/components/symbolHoverPopup/symbolHoverTargetsExtension";
-import { SymbolDefinition } from "@/ee/features/codeNav/components/symbolHoverPopup/useHoveredOverSymbolInfo";
 import { useHasEntitlement } from "@/features/entitlements/useHasEntitlement";
 import { useCodeMirrorLanguageExtension } from "@/hooks/useCodeMirrorLanguageExtension";
 import { useCodeMirrorTheme } from "@/hooks/useCodeMirrorTheme";
 import { useKeymapExtension } from "@/hooks/useKeymapExtension";
 import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam";
 import { search } from "@codemirror/search";
 import CodeMirror, { EditorSelection, EditorView, ReactCodeMirrorRef, SelectionRange, ViewUpdate } from "@uiw/react-codemirror";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { EditorContextMenu } from "../../../components/editorContextMenu";
-import { useBrowseNavigation } from "../../hooks/useBrowseNavigation";
 import { BrowseHighlightRange, HIGHLIGHT_RANGE_QUERY_PARAM } from "../../hooks/utils";
-import { useBrowseState } from "../../hooks/useBrowseState";
 import { rangeHighlightingExtension } from "./rangeHighlightingExtension";
-import useCaptureEvent from "@/hooks/useCaptureEvent";
-import { createAuditAction } from "@/ee/features/audit/actions";
 
 interface PureCodePreviewPanelProps {
     path: string;
@@ -40,9 +35,6 @@ export const PureCodePreviewPanel = ({
     const [currentSelection, setCurrentSelection] = useState<SelectionRange>();
     const keymapExtension = useKeymapExtension(editorRef?.view);
     const hasCodeNavEntitlement = useHasEntitlement("code-nav");
-    const { updateBrowseState } = useBrowseState();
-    const { navigateToPath } = useBrowseNavigation();
-    const captureEvent = useCaptureEvent();
 
     const highlightRangeQuery = useNonEmptyQueryParam(HIGHLIGHT_RANGE_QUERY_PARAM);
     const highlightRange = useMemo((): BrowseHighlightRange | undefined => {
@@ -88,7 +80,6 @@ export const PureCodePreviewPanel = ({
                 }
             }
         }
-
     }, [highlightRangeQuery]);
 
     const extensions = useMemo(() => {
@@ -116,90 +107,31 @@ export const PureCodePreviewPanel = ({
 
     // Scroll the highlighted range into view.
     useEffect(() => {
-        if (!highlightRange || !editorRef || !editorRef.state) {
+        if (!highlightRange || !editorRef || !editorRef.state || !editorRef.view) {
             return;
         }
 
         const doc = editorRef.state.doc;
         const { start, end } = highlightRange;
-        const selection = EditorSelection.range(
-            doc.line(start.lineNumber).from,
-            doc.line(end.lineNumber).from,
-        );
 
+        const from = doc.line(start.lineNumber).from;
+        const to = doc.line(end.lineNumber).to;
+        const selection = EditorSelection.range(from, to);
+
+        // When the selection is in view, we don't want to perform any scrolling
+        // as it could be jarring for the user. If it is not in view, scroll to the
+        // center of the viewport.
+        const viewport = editorRef.view.viewport;
+        const isInView = from >= viewport.from && to <= viewport.to;
+        const scrollStrategy = isInView ? "nearest" : "center";
+        
         editorRef.view?.dispatch({
             effects: [
-                EditorView.scrollIntoView(selection, { y: "center" }),
+                EditorView.scrollIntoView(selection, { y: scrollStrategy }),
             ]
         });
     }, [editorRef, highlightRange]);
 
-    const onFindReferences = useCallback((symbolName: string) => {
-        captureEvent('wa_find_references_pressed', {
-            source: 'browse',
-        });
-        createAuditAction({
-            action: "user.performed_find_references",
-            metadata: {
-                message: symbolName,
-            },
-        })
-
-        updateBrowseState({
-            selectedSymbolInfo: {
-                repoName,
-                symbolName,
-                revisionName,
-                language,
-            },
-            isBottomPanelCollapsed: false,
-            activeExploreMenuTab: "references",
-        })
-    }, [captureEvent, updateBrowseState, repoName, revisionName, language]);
-
-
-    // If we resolve multiple matches, instead of navigating to the first match, we should
-    // instead popup the bottom sheet with the list of matches.
-    const onGotoDefinition = useCallback((symbolName: string, symbolDefinitions: SymbolDefinition[]) => {
-        captureEvent('wa_goto_definition_pressed', {
-            source: 'browse',
-        });
-        createAuditAction({
-            action: "user.performed_goto_definition",
-            metadata: {
-                message: symbolName,
-            },
-        })
-
-        if (symbolDefinitions.length === 0) {
-            return;
-        }
-
-        if (symbolDefinitions.length === 1) {
-            const symbolDefinition = symbolDefinitions[0];
-            const { fileName, repoName } = symbolDefinition;
-
-            navigateToPath({
-                repoName,
-                revisionName,
-                path: fileName,
-                pathType: 'blob',
-                highlightRange: symbolDefinition.range,
-            })
-        } else {
-            updateBrowseState({
-                selectedSymbolInfo: {
-                    symbolName,
-                    repoName,
-                    revisionName,
-                    language,
-                },
-                activeExploreMenuTab: "definitions",
-                isBottomPanelCollapsed: false,
-            })
-        }
-    }, [captureEvent, navigateToPath, revisionName, updateBrowseState, repoName, language]);
-
     const theme = useCodeMirrorTheme();
 
     return (
@@ -223,11 +155,12 @@ export const PureCodePreviewPanel = ({
                 )}
                 {editorRef && hasCodeNavEntitlement && (
                     <SymbolHoverPopup
+                        source="preview"
                         editorRef={editorRef}
                         revisionName={revisionName}
                         language={language}
-                        onFindReferences={onFindReferences}
-                        onGotoDefinition={onGotoDefinition}
+                        fileName={path}
+                        repoName={repoName}
                     />
                 )}
             </CodeMirror>

packages/web/src/app/[domain]/browse/layout.tsx

@@ -10,6 +10,7 @@ import { useBrowseParams } from "./hooks/useBrowseParams";
 import { FileSearchCommandDialog } from "./components/fileSearchCommandDialog";
 import { useDomain } from "@/hooks/useDomain";
 import { SearchBar } from "../components/searchBar";
+import escapeStringRegexp from "escape-string-regexp";
 
 interface LayoutProps {
     children: React.ReactNode;
@@ -30,7 +31,7 @@ export default function Layout({
                     <SearchBar
                         size="sm"
                         defaults={{
-                            query: `repo:${repoName}${revisionName ? ` rev:${revisionName}` : ''} `,
+                            query: `repo:^${escapeStringRegexp(repoName)}$${revisionName ? ` rev:${revisionName}` : ''} `,
                         }}
                         className="w-full"
                     />

packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx

@@ -1,12 +1,16 @@
 'use client';
 
+import { useBrowseNavigation } from "@/app/[domain]/browse/hooks/useBrowseNavigation";
 import { EditorContextMenu } from "@/app/[domain]/components/editorContextMenu";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { SymbolHoverPopup } from "@/ee/features/codeNav/components/symbolHoverPopup";
+import { symbolHoverTargetsExtension } from "@/ee/features/codeNav/components/symbolHoverPopup/symbolHoverTargetsExtension";
+import { useHasEntitlement } from "@/features/entitlements/useHasEntitlement";
 import { SearchResultChunk } from "@/features/search";
+import { useCodeMirrorLanguageExtension } from "@/hooks/useCodeMirrorLanguageExtension";
 import { useCodeMirrorTheme } from "@/hooks/useCodeMirrorTheme";
 import { useKeymapExtension } from "@/hooks/useKeymapExtension";
-import { useCodeMirrorLanguageExtension } from "@/hooks/useCodeMirrorLanguageExtension";
 import { gutterWidthExtension } from "@/lib/extensions/gutterWidthExtension";
 import { highlightRanges, searchResultHighlightExtension } from "@/lib/extensions/searchResultHighlightExtension";
 import { search } from "@codemirror/search";
@@ -16,13 +20,6 @@ import { Scrollbar } from "@radix-ui/react-scroll-area";
 import CodeMirror, { ReactCodeMirrorRef, SelectionRange } from '@uiw/react-codemirror';
 import { ArrowDown, ArrowUp } from "lucide-react";
 import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
-import { useBrowseNavigation } from "@/app/[domain]/browse/hooks/useBrowseNavigation";
-import { SymbolHoverPopup } from "@/ee/features/codeNav/components/symbolHoverPopup";
-import { symbolHoverTargetsExtension } from "@/ee/features/codeNav/components/symbolHoverPopup/symbolHoverTargetsExtension";
-import { useHasEntitlement } from "@/features/entitlements/useHasEntitlement";
-import { SymbolDefinition } from "@/ee/features/codeNav/components/symbolHoverPopup/useHoveredOverSymbolInfo";
-import { createAuditAction } from "@/ee/features/audit/actions";
-import useCaptureEvent from "@/hooks/useCaptureEvent";
 
 export interface CodePreviewFile {
     content: string;
@@ -59,8 +56,6 @@ export const CodePreview = ({
     const languageExtension = useCodeMirrorLanguageExtension(file?.language ?? '', editorRef?.view);
     const [currentSelection, setCurrentSelection] = useState<SelectionRange>();
 
-    const captureEvent = useCaptureEvent();
-
     const extensions = useMemo(() => {
         return [
             keymapExtension,
@@ -115,81 +110,6 @@ export const CodePreview = ({
         onSelectedMatchIndexChange((prev) => prev + 1);
     }, [onSelectedMatchIndexChange]);
 
-    const onGotoDefinition = useCallback((symbolName: string, symbolDefinitions: SymbolDefinition[]) => {
-        captureEvent('wa_goto_definition_pressed', {
-            source: 'preview',
-        });
-        createAuditAction({
-            action: "user.performed_goto_definition",
-            metadata: {
-                message: symbolName,
-            },
-        })
-
-        if (symbolDefinitions.length === 0) {
-            return;
-        }
-
-        if (symbolDefinitions.length === 1) {
-            const symbolDefinition = symbolDefinitions[0];
-            const { fileName, repoName } = symbolDefinition;
-
-            navigateToPath({
-                repoName,
-                revisionName: file.revision,
-                path: fileName,
-                pathType: 'blob',
-                highlightRange: symbolDefinition.range,
-            })
-        } else {
-            navigateToPath({
-                repoName,
-                revisionName: file.revision,
-                path: file.filepath,
-                pathType: 'blob',
-                setBrowseState: {
-                    selectedSymbolInfo: {
-                        symbolName,
-                        repoName,
-                        revisionName: file.revision,
-                        language: file.language,
-                    },
-                    activeExploreMenuTab: "definitions",
-                    isBottomPanelCollapsed: false,
-                }
-            });
-        }
-    }, [captureEvent, file.filepath, file.language, file.revision, navigateToPath, repoName]);
-    
-    const onFindReferences = useCallback((symbolName: string) => {
-        captureEvent('wa_find_references_pressed', {
-            source: 'preview',
-        });
-        createAuditAction({
-            action: "user.performed_find_references",
-            metadata: {
-                message: symbolName,
-            },
-        })
-
-        navigateToPath({
-            repoName,
-            revisionName: file.revision,
-            path: file.filepath,
-            pathType: 'blob',
-            setBrowseState: {
-                selectedSymbolInfo: {
-                    repoName,
-                    symbolName,
-                    revisionName: file.revision,
-                    language: file.language,
-                },
-                activeExploreMenuTab: "references",
-                isBottomPanelCollapsed: false,
-            }
-        })
-    }, [captureEvent, file.filepath, file.language, file.revision, navigateToPath, repoName]);
-
     return (
         <div className="flex flex-col h-full">
             <div className="flex flex-row bg-accent items-center justify-between pr-3 py-0.5 mt-7">
@@ -286,11 +206,12 @@ export const CodePreview = ({
 
                     {editorRef && hasCodeNavEntitlement && (
                         <SymbolHoverPopup
+                            source="preview"
                             editorRef={editorRef}
                             language={file.language}
                             revisionName={file.revision}
-                            onFindReferences={onFindReferences}
-                            onGotoDefinition={onGotoDefinition}
+                            fileName={file.filepath}
+                            repoName={repoName}
                         />
                     )}
                 </CodeMirror>

packages/web/src/app/components/keyboardShortcutHint.tsx

@@ -1,13 +1,15 @@
+import { cn } from '@/lib/utils'
 import React from 'react'
 
 interface KeyboardShortcutHintProps {
   shortcut: string
   label?: string
+  className?: string
 }
 
-export function KeyboardShortcutHint({ shortcut, label }: KeyboardShortcutHintProps) {
+export function KeyboardShortcutHint({ shortcut, label, className }: KeyboardShortcutHintProps) {
   return (
-    <div className="inline-flex items-center" aria-label={label || `Keyboard shortcut: ${shortcut}`}>
+    <div className={cn("inline-flex items-center", className)} aria-label={label || `Keyboard shortcut: ${shortcut}`}>
       <kbd
         className="px-2 py-1 font-semibold font-sans border rounded-md"
         style={{

packages/web/src/components/ui/toggle.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2 cursor-pointer",
   {
     variants: {
       variant: {
@@ -16,9 +16,7 @@ const toggleVariants = cva(
           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11",
+        default: "h-7 w-7 min-w-7 p-0",
       },
     },
     defaultVariants: {