No results found
diff --git a/packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatch.tsx b/packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatch.tsx
index d6e6b8ab0..334333927 100644
--- a/packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatch.tsx
+++ b/packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatch.tsx
@@ -1,6 +1,6 @@
'use client';
-import { SearchResultFile, SearchResultChunk } from "@/features/search/types";
+import { SearchResultFile, SearchResultChunk } from "@/features/search";
import { LightweightCodeHighlighter } from "@/app/[domain]/components/lightweightCodeHighlighter";
import Link from "next/link";
import { getBrowsePath } from "@/app/[domain]/browse/hooks/utils";
diff --git a/packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatchContainer.tsx b/packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatchContainer.tsx
index b10d656a3..2779b301c 100644
--- a/packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatchContainer.tsx
+++ b/packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatchContainer.tsx
@@ -5,7 +5,7 @@ import { Separator } from "@/components/ui/separator";
import { DoubleArrowDownIcon, DoubleArrowUpIcon } from "@radix-ui/react-icons";
import { useMemo } from "react";
import { FileMatch } from "./fileMatch";
-import { RepositoryInfo, SearchResultFile } from "@/features/search/types";
+import { RepositoryInfo, SearchResultFile } from "@/features/search";
import { Button } from "@/components/ui/button";
export const MAX_MATCHES_TO_PREVIEW = 3;
@@ -75,7 +75,7 @@ export const FileMatchContainer = ({
}
return `${branches[0]}${branches.length > 1 ? ` +${branches.length - 1}` : ''}`;
- }, [isBranchFilteringEnabled, branches]);
+ }, [branches, isBranchFilteringEnabled]);
const repo = useMemo(() => {
return repoInfo[file.repositoryId];
diff --git a/packages/web/src/app/[domain]/search/components/searchResultsPanel/index.tsx b/packages/web/src/app/[domain]/search/components/searchResultsPanel/index.tsx
index 61e413322..b2ee8e9e7 100644
--- a/packages/web/src/app/[domain]/search/components/searchResultsPanel/index.tsx
+++ b/packages/web/src/app/[domain]/search/components/searchResultsPanel/index.tsx
@@ -1,10 +1,11 @@
'use client';
-import { RepositoryInfo, SearchResultFile } from "@/features/search/types";
-import { FileMatchContainer, MAX_MATCHES_TO_PREVIEW } from "./fileMatchContainer";
+import { RepositoryInfo, SearchResultFile } from "@/features/search";
import { useVirtualizer, VirtualItem } from "@tanstack/react-virtual";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useDebounce, usePrevious } from "@uidotdev/usehooks";
+import { useDebounce } from "@uidotdev/usehooks";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from "react";
+import { useMap } from "usehooks-ts";
+import { FileMatchContainer, MAX_MATCHES_TO_PREVIEW } from "./fileMatchContainer";
interface SearchResultsPanelProps {
fileMatches: SearchResultFile[];
@@ -15,6 +16,10 @@ interface SearchResultsPanelProps {
repoInfo: Record
;
}
+export interface SearchResultsPanelHandle {
+ resetScroll: () => void;
+}
+
const ESTIMATED_LINE_HEIGHT_PX = 20;
const ESTIMATED_NUMBER_OF_LINES_PER_CODE_CELL = 10;
const ESTIMATED_MATCH_CONTAINER_HEIGHT_PX = 30;
@@ -22,17 +27,25 @@ const ESTIMATED_MATCH_CONTAINER_HEIGHT_PX = 30;
type ScrollHistoryState = {
scrollOffset?: number;
measurementsCache?: VirtualItem[];
- showAllMatchesStates?: boolean[];
+ showAllMatchesMap?: [string, boolean][];
+}
+
+/**
+ * Unique key for a given file match. Used to store the "show all matches" state for a
+ * given file match.
+ */
+const getFileMatchKey = (fileMatch: SearchResultFile) => {
+ return `${fileMatch.repository}-${fileMatch.fileName.text}`;
}
-export const SearchResultsPanel = ({
+export const SearchResultsPanel = forwardRef(({
fileMatches,
onOpenFilePreview,
isLoadMoreButtonVisible,
onLoadMoreButtonClicked,
isBranchFilteringEnabled,
repoInfo,
-}: SearchResultsPanelProps) => {
+}, ref) => {
const parentRef = useRef(null);
// Restore the scroll offset, measurements cache, and other state from the history
@@ -42,17 +55,17 @@ export const SearchResultsPanel = ({
const {
scrollOffset: restoreOffset,
measurementsCache: restoreMeasurementsCache,
- showAllMatchesStates: restoreShowAllMatchesStates,
- } = history.state as ScrollHistoryState;
+ showAllMatchesMap: restoreShowAllMatchesStates,
+ } = (history.state ?? {}) as ScrollHistoryState;
- const [showAllMatchesStates, setShowAllMatchesStates] = useState(restoreShowAllMatchesStates || Array(fileMatches.length).fill(false));
+ const [showAllMatchesMap, showAllMatchesActions] = useMap(restoreShowAllMatchesStates || []);
const virtualizer = useVirtualizer({
count: fileMatches.length,
getScrollElement: () => parentRef.current,
estimateSize: (index) => {
const fileMatch = fileMatches[index];
- const showAllMatches = showAllMatchesStates[index];
+ const showAllMatches = showAllMatchesMap.get(getFileMatchKey(fileMatch));
// Quick guesstimation ;) This needs to be quick since the virtualizer will
// run this upfront for all items in the list.
@@ -73,38 +86,33 @@ export const SearchResultsPanel = ({
debug: false,
});
- // When the number of file matches changes, we need to reset our scroll state.
- const prevFileMatches = usePrevious(fileMatches);
- useEffect(() => {
- if (!prevFileMatches) {
- return;
- }
+ const resetScroll = useCallback(() => {
+ virtualizer.scrollToIndex(0);
+ }, [virtualizer]);
+
+ // Expose the resetScroll function to parent components
+ useImperativeHandle(ref, () => ({
+ resetScroll,
+ }), [resetScroll]);
- if (prevFileMatches.length !== fileMatches.length) {
- setShowAllMatchesStates(Array(fileMatches.length).fill(false));
- virtualizer.scrollToIndex(0);
- }
- }, [fileMatches.length, prevFileMatches, virtualizer]);
// Save the scroll state to the history stack.
- const debouncedScrollOffset = useDebounce(virtualizer.scrollOffset, 100);
+ const debouncedScrollOffset = useDebounce(virtualizer.scrollOffset, 500);
useEffect(() => {
history.replaceState(
{
scrollOffset: debouncedScrollOffset ?? undefined,
measurementsCache: virtualizer.measurementsCache,
- showAllMatchesStates,
+ showAllMatchesMap: Array.from(showAllMatchesMap.entries()),
} satisfies ScrollHistoryState,
'',
window.location.href
);
- }, [debouncedScrollOffset, virtualizer.measurementsCache, showAllMatchesStates]);
+ }, [debouncedScrollOffset, virtualizer.measurementsCache, showAllMatchesMap]);
- const onShowAllMatchesButtonClicked = useCallback((index: number) => {
- const states = [...showAllMatchesStates];
- const wasShown = states[index];
- states[index] = !wasShown;
- setShowAllMatchesStates(states);
+ const onShowAllMatchesButtonClicked = useCallback((fileMatchKey: string, index: number) => {
+ const wasShown = showAllMatchesMap.get(fileMatchKey) ?? false;
+ showAllMatchesActions.set(fileMatchKey, !wasShown);
// When collapsing, scroll to the top of the file match container. This ensures
// that the focused "show fewer matches" button is visible.
@@ -113,7 +121,7 @@ export const SearchResultsPanel = ({
align: 'start'
});
}
- }, [showAllMatchesStates, virtualizer]);
+ }, [showAllMatchesActions, showAllMatchesMap, virtualizer]);
return (
@@ -153,9 +161,9 @@ export const SearchResultsPanel = ({
onOpenFilePreview={(matchIndex) => {
onOpenFilePreview(file, matchIndex);
}}
- showAllMatches={showAllMatchesStates[virtualRow.index]}
+ showAllMatches={showAllMatchesMap.get(getFileMatchKey(file)) ?? false}
onShowAllMatchesButtonClicked={() => {
- onShowAllMatchesButtonClicked(virtualRow.index);
+ onShowAllMatchesButtonClicked(getFileMatchKey(file), virtualRow.index);
}}
isBranchFilteringEnabled={isBranchFilteringEnabled}
repoInfo={repoInfo}
@@ -177,4 +185,6 @@ export const SearchResultsPanel = ({
)}
)
-}
\ No newline at end of file
+});
+
+SearchResultsPanel.displayName = 'SearchResultsPanel';
diff --git a/packages/web/src/app/[domain]/search/page.tsx b/packages/web/src/app/[domain]/search/page.tsx
index 8677e2872..d1f4e03a7 100644
--- a/packages/web/src/app/[domain]/search/page.tsx
+++ b/packages/web/src/app/[domain]/search/page.tsx
@@ -4,13 +4,19 @@ import { SearchResultsPage } from "./components/searchResultsPage";
interface SearchPageProps {
params: Promise<{ domain: string }>;
- searchParams: Promise<{ query?: string }>;
+ searchParams: Promise<{
+ query?: string;
+ isRegexEnabled?: "true" | "false";
+ isCaseSensitivityEnabled?: "true" | "false";
+ }>;
}
export default async function SearchPage(props: SearchPageProps) {
const { domain } = await props.params;
const searchParams = await props.searchParams;
const query = searchParams?.query;
+ const isRegexEnabled = searchParams?.isRegexEnabled === "true";
+ const isCaseSensitivityEnabled = searchParams?.isCaseSensitivityEnabled === "true";
if (query === undefined || query.length === 0) {
return