ti.sil/sourcebot
1
0
Fork 0
mirror of https://github.com/sourcebot-dev/sourcebot.git synced 2025-12-12 20:35:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add filename highlighting

Browse source
This commit is contained in:
bkellam 2024-09-10 12:24:47 -07:00
parent 4e5deb22a1
commit fa42eba35e
3 changed files with 78 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/app/search/codePreviewPanel.tsx
View file

@ -110,7 +110,7 @@ export const CodePreviewPanel = ({
return (
<div className="flex flex-col h-full">
<div className="flex flex-row bg-cyan-200 dark:bg-cyan-900 items-center justify-between pr-3">
<div className="flex flex-row bg-cyan-200 dark:bg-cyan-900 items-center justify-between pr-3 py-0.5">
<div className="flex flex-row">
<div
style={{ width: `${gutterWidth}px` }}
@ -132,25 +132,29 @@ export const CodePreviewPanel = ({
</span>
</div>
<div className="flex flex-row gap-1 items-center">
<p className="text-sm">{`${selectedMatchIndex + 1} of ${ranges.length}`}</p>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
disabled={selectedMatchIndex === 0}
onClick={onUpClicked}
>
<ArrowUp className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={onDownClicked}
disabled={file ? selectedMatchIndex === ranges.length - 1 : true}
>
<ArrowDown className="h-4 w-4" />
</Button>
{file && file.matches.length > 0 && (
<>
<p className="text-sm">{`${selectedMatchIndex + 1} of ${ranges.length}`}</p>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
disabled={selectedMatchIndex === 0}
onClick={onUpClicked}
>
<ArrowUp className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={onDownClicked}
disabled={file ? selectedMatchIndex === ranges.length - 1 : true}
>
<ArrowDown className="h-4 w-4" />
</Button>
</>
)}
<Button
variant="ghost"
size="icon"

11
src/app/search/page.tsx
View file

@ -101,8 +101,10 @@ export default function SearchPage() {
<ResizablePanel minSize={20}>
<SearchResultsPanel
fileMatches={fileMatches}
onOpenFileMatch={(fileMatch, matchIndex) => {
onOpenFileMatch={(fileMatch) => {
setSelectedFile(fileMatch);
}}
onMatchIndexChanged={(matchIndex) => {
setSelectedMatchIndex(matchIndex);
}}
/>
@ -152,10 +154,15 @@ const CodePreviewWrapper = ({
const decodedSource = atob(source);
// Filter out filename matches
const filteredMatches = fileMatch.ChunkMatches.filter((match) => {
return !match.FileName;
});
return {
content: decodedSource,
filepath: fileMatch.FileName,
matches: fileMatch.ChunkMatches,
matches: filteredMatches,
link: link,
language: fileMatch.Language,
};

52
src/app/search/searchResultsPanel.tsx
View file

@ -19,12 +19,14 @@ const MAX_MATCHES_TO_PREVIEW = 3;
interface SearchResultsPanelProps {
fileMatches: SearchResultFile[];
onOpenFileMatch: (fileMatch: SearchResultFile, matchIndex: number) => void;
onOpenFileMatch: (fileMatch: SearchResultFile) => void;
onMatchIndexChanged: (matchIndex: number) => void;
}
export const SearchResultsPanel = ({
fileMatches,
onOpenFileMatch,
onMatchIndexChanged,
}: SearchResultsPanelProps) => {
return (
<ScrollArea className="h-full">
@ -32,8 +34,11 @@ export const SearchResultsPanel = ({
<FilePreview
key={index}
file={fileMatch}
onOpenFile={(matchIndex) => {
onOpenFileMatch(fileMatch, matchIndex);
onOpenFile={() => {
onOpenFileMatch(fileMatch);
}}
onMatchIndexChanged={(matchIndex) => {
onMatchIndexChanged(matchIndex);
}}
/>
))}
@ -44,12 +49,14 @@ export const SearchResultsPanel = ({
interface FilePreviewProps {
file: SearchResultFile;
onOpenFile: (matchIndex: number) => void;
onOpenFile: () => void;
onMatchIndexChanged: (matchIndex: number) => void;
}
const FilePreview = ({
file,
onOpenFile,
onMatchIndexChanged,
}: FilePreviewProps) => {
const [showAll, setShowAll] = useState(false);
@ -69,6 +76,20 @@ const FilePreview = ({
return sortedMatches;
}, [file, showAll]);
const fileNameRange = useMemo(() => {
for (const match of matches) {
if (match.FileName && match.Ranges.length > 0) {
const range = match.Ranges[0];
return {
from: range.Start.Column - 1,
to: range.End.Column - 1,
}
}
}
return null;
}, [matches]);
const { repoIcon, repoName, repoLink } = useMemo(() => {
const info = getRepoCodeHostInfo(file.Repository);
if (info) {
@ -96,7 +117,12 @@ const FilePreview = ({
return (
<div className="flex flex-col">
<div className="bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2 py-0.5 flex flex-row items-center justify-between border">
<div
className="bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2 py-0.5 flex flex-row items-center justify-between border cursor-pointer"
onClick={() => {
onOpenFile();
}}
>
<div className="flex flex-row gap-2 items-center">
{repoIcon}
<span
@ -111,7 +137,18 @@ const FilePreview = ({
>
{repoName}
</span>
<span>· {file.FileName}</span>
<span>·</span>
{!fileNameRange ? (
<span>{file.FileName}</span>
) : (
<span>
{file.FileName.slice(0, fileNameRange.from)}
<span className="bg-yellow-200 dark:bg-blue-700">
{file.FileName.slice(fileNameRange.from, fileNameRange.to)}
</span>
{file.FileName.slice(fileNameRange.to)}
</span>
)}
</div>
</div>
{matches.map((match, index) => {
@ -132,7 +169,8 @@ const FilePreview = ({
const matchIndex = matches.slice(0, index).reduce((acc, match) => {
return acc + match.Ranges.length;
}, 0);
onOpenFile(matchIndex);
onOpenFile();
onMatchIndexChanged(matchIndex);
}}
>
<CodePreview