mirror of
https://github.com/sourcebot-dev/sourcebot.git
synced 2025-12-12 12:25:22 +00:00
7f952ce163
The motivation for building search suggestions is two-fold: (1) to make the zoekt query language more approachable by presenting all available options to the user, and (2) make it easier for power-users to craft complex queries. The meat-n-potatoes of this change are concentrated in searchBar.tsx and searchSuggestionBox.tsx. The suggestions box works by maintaining a state-machine of "modes". By default, the box is in the refine mode, where suggestions for different prefixes (e.g., repo:, lang:, etc.) are suggested to the user. When one of these prefixes is matched, the state-machine transitions to the corresponding mode (e.g., repository, language, etc.) and surfaces suggestions for that mode (if any). The query is split up into parts by spaces " " (e.g., 'test repo:hello' -> ['test', 'repo:hello']). See splitQuery. The part that has the cursor over it is considered the active part. We evaluate which mode the state machine is in based on the active part. When a suggestion is clicked, we only modify the active part of the query. Three modes are currently missing suggestion data: file (file names), revision (branch / tag names), and symbol (symbol names). In future PRs, we will need to introduce endpoints into the backend to allow the frontend to fetch this data and surface it as suggestions..
91 lines
No EOL
4 KiB
TypeScript
91 lines
No EOL
4 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { NavigationMenu as NavigationMenuBase, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
|
|
import Link from "next/link";
|
|
import { GitHubLogoIcon, DiscordLogoIcon } from "@radix-ui/react-icons";
|
|
import { SettingsDropdown } from "./settingsDropdown";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import Image from "next/image";
|
|
import logoDark from "../../../public/sb_logo_dark_small.png";
|
|
import logoLight from "../../../public/sb_logo_light_small.png";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
const SOURCEBOT_DISCORD_URL = "https://discord.gg/6Fhp27x7Pb";
|
|
const SOURCEBOT_GITHUB_URL = "https://github.com/sourcebot-dev/sourcebot";
|
|
|
|
export const NavigationMenu = () => {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<div className="flex flex-col w-screen h-fit">
|
|
<div className="flex flex-row justify-between items-center py-1.5 px-3">
|
|
<div className="flex flex-row items-center">
|
|
<div
|
|
className="mr-3 cursor-pointer"
|
|
onClick={() => {
|
|
router.push("/");
|
|
}}
|
|
>
|
|
<Image
|
|
src={logoDark}
|
|
className="h-11 w-auto hidden dark:block"
|
|
alt={"Sourcebot logo"}
|
|
priority={true}
|
|
/>
|
|
<Image
|
|
src={logoLight}
|
|
className="h-11 w-auto block dark:hidden"
|
|
alt={"Sourcebot logo"}
|
|
priority={true}
|
|
/>
|
|
</div>
|
|
|
|
<NavigationMenuBase>
|
|
<NavigationMenuList>
|
|
<NavigationMenuItem>
|
|
<Link href="/" legacyBehavior passHref>
|
|
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
|
Search
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<Link href="/repos" legacyBehavior passHref>
|
|
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
|
Repositories
|
|
</NavigationMenuLink>
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
</NavigationMenuList>
|
|
</NavigationMenuBase>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => {
|
|
window.open(SOURCEBOT_DISCORD_URL, "_blank");
|
|
}}
|
|
>
|
|
<DiscordLogoIcon className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => {
|
|
window.open(SOURCEBOT_GITHUB_URL, "_blank");
|
|
}}
|
|
>
|
|
<GitHubLogoIcon className="w-4 h-4" />
|
|
</Button>
|
|
<SettingsDropdown />
|
|
</div>
|
|
</div>
|
|
<Separator />
|
|
</div>
|
|
|
|
|
|
)
|
|
} |