Syntax reference guide

packages/web/package.json

@@ -39,6 +39,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@iconify/react": "^5.1.0",
     "@iizukak/codemirror-lang-wgsl": "^0.3.0",
+    "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",

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

@@ -31,7 +31,7 @@ export const FileHeader = ({
             {info?.icon ? (
                 <Image
                     src={info.icon}
-                    alt={info.costHostName}
+                    alt={info.codeHostName}
                     className={`w-4 h-4 ${info.iconClassName}`}
                 />
             ): (

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

@@ -63,7 +63,7 @@ const RepositoryBadge = ({
             return {
                 repoIcon: <Image
                     src={info.icon}
-                    alt={info.costHostName}
+                    alt={info.codeHostName}
                     className={`w-4 h-4 ${info.iconClassName}`}
                 />,
                 displayName: info.displayName,

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

@@ -0,0 +1,218 @@
+'use client';
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import { Separator } from "@/components/ui/separator";
+import clsx from "clsx";
+import Link from "next/link";
+
+const LINGUIST_LINK = "https://github.com/github-linguist/linguist/blob/main/lib/linguist/languages.yml";
+const CTAGS_LINK = "https://ctags.io/";
+
+export const SyntaxReferenceGuide = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    useHotkeys("mod+/", (event) => {
+        event.preventDefault();
+        setIsOpen(!isOpen);
+    });
+
+    return (
+        <Dialog
+            open={isOpen}
+            onOpenChange={(isOpen) => {
+                setIsOpen(isOpen);
+            }}
+        >
+            <DialogContent
+                className="max-h-[80vh] max-w-[700px] overflow-scroll"
+            >
+                <DialogHeader>
+                    <DialogTitle>Syntax Reference Guide</DialogTitle>
+                </DialogHeader>
+                <p className="text-sm">
+                    Queries consist of space-seperated regular expressions. Wrapping expressions in <Code>""</Code> combines them. By default, a file must have at least one match for each expression to be included.
+                </p>
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead className="py-2">Example</TableHead>
+                            <TableHead className="py-2">Explanation</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        <TableRow>
+                            <TableCell className="py-2"><Code>foo</Code></TableCell>
+                            <TableCell className="py-2">Match files with regex <Code>/foo/</Code></TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell className="py-2"><Code>foo bar</Code></TableCell>
+                            <TableCell className="py-2">Match files with regex <Code>/foo/</Code> <b>and</b> <Code>/bar/</Code></TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell className="py-2"><Code>"foo bar"</Code></TableCell>
+                            <TableCell className="py-2">Match files with regex <Code>/foo bar/</Code></TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+
+                <Separator className="my-2"/>
+                <p className="text-sm">
+                    Multiple expressions can be or'd together with <Code>or</Code>, negated with <Code>-</Code>, or grouped with <Code>()</Code>.
+                </p>
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead className="py-2">Example</TableHead>
+                            <TableHead className="py-2">Explanation</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        <TableRow>
+                            <TableCell className="py-2"><Code>foo <Highlight>or</Highlight> bar</Code></TableCell>
+                            <TableCell className="py-2">Match files with regex <Code>/foo/</Code> <b>or</b> <Code>/bar/</Code></TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell className="py-2"><Code>foo -bar</Code></TableCell>
+                            <TableCell className="py-2">Match files with regex <Code>/foo/</Code> but <b>not</b> <Code>/bar/</Code></TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell className="py-2"><Code>foo (bar <Highlight>or</Highlight> baz)</Code></TableCell>
+                            <TableCell className="py-2">Match files with regex <Code>/foo/</Code> <b>and</b> either <Code>/bar/</Code> <b>or</b> <Code>/baz/</Code></TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+
+                <Separator className="my-2"/>
+                <p className="text-sm">
+                    Expressions can be prefixed with certain keywords to modify search behavior. Some keywords can be negated using the <Code>-</Code> prefix.
+                </p>
+
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead className="py-2">Prefix</TableHead>
+                            <TableHead className="py-2">Description</TableHead>
+                            <TableHead className="py-2 w-[175px]">Example</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        <TableRow>
+                            <TableCell className="py-2"><Code><Highlight>file:</Highlight></Code></TableCell>
+                            <TableCell className="py-2">Filter results from filepaths that match the regex. By default all files are searched.</TableCell>
+                            <TableCell className="py-2">
+                                <div className="flex flex-col gap-1">
+                                    <Code
+                                        title="Filter results to filepaths that match regex /README/"
+                                    >
+                                        <Highlight>file:</Highlight>README
+                                    </Code>
+                                    <Code
+                                        title="Filter results to filepaths that match regex /my file/"
+                                    >
+                                        <Highlight>file:</Highlight>"my file"
+                                    </Code>
+                                    <Code
+                                        title="Ignore results from filepaths match regex /test\.ts$/"
+                                    >
+                                        <Highlight>-file:</Highlight>test\.ts$
+                                    </Code>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell className="py-2"><Code><Highlight>repo:</Highlight></Code></TableCell>
+                            <TableCell className="py-2">Filter results from repos that match the regex. By default all repos are searched.</TableCell>
+                            <TableCell className="py-2">
+                                <div className="flex flex-col gap-1">
+                                    <Code
+                                        title="Filter results to repos that match regex /linux/"
+                                    >
+                                        <Highlight>repo:</Highlight>linux
+                                    </Code>
+                                    <Code
+                                        title="Ignore results from repos that match regex /^web\/.*/"
+                                    >
+                                        <Highlight>-repo:</Highlight>^web/.*
+                                    </Code>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell className="py-2"><Code><Highlight>rev:</Highlight></Code></TableCell>
+                            <TableCell className="py-2">Filter results from a specific branch or tag. By default <b>only</b> the default branch is searched.</TableCell>
+                            <TableCell className="py-2">
+                                <div className="flex flex-col gap-1">
+                                    <Code
+                                        title="Filter results to branches that match regex /beta/"
+                                    >
+                                        <Highlight>rev:</Highlight>beta
+                                    </Code>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell className="py-2"><Code><Highlight>lang:</Highlight></Code></TableCell>
+                            <TableCell className="py-2">Filter results by language (as defined by <Link className="text-blue-500" href={LINGUIST_LINK}>linguist</Link>). By default all languages are searched.</TableCell>
+                            <TableCell className="py-2">
+                                <div className="flex flex-col gap-1">
+                                    <Code
+                                        title="Filter results to TypeScript files"
+                                    >
+                                        <Highlight>lang:</Highlight>TypeScript
+                                    </Code>
+                                    <Code
+                                        title="Ignore results from YAML files"
+                                    >
+                                        <Highlight>-lang:</Highlight>YAML
+                                    </Code>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell className="py-2"><Code><Highlight>sym:</Highlight></Code></TableCell>
+                            <TableCell className="py-2">Match symbol definitions created by <Link className="text-blue-500" href={CTAGS_LINK}>universal ctags</Link> at index time.</TableCell>
+                            <TableCell className="py-2">
+                                <div className="flex flex-col gap-1">
+                                    <Code
+                                        title="Filter results to symbols that match regex /\bmain\b/"
+                                    >
+                                        <Highlight>sym:</Highlight>\bmain\b
+                                    </Code>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+const Code = ({ children, className, title }: { children: React.ReactNode, className?: string, title?: string }) => {
+    return (
+        <code
+            className={clsx("bg-gray-100 dark:bg-gray-700 w-fit rounded-md font-mono px-2 py-0.5", className)}
+            title={title}
+        >
+            {children}
+        </code>
+    )
+}
+
+const Highlight = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <span className="text-highlight">
+            {children}
+        </span>
+    )
+}

packages/web/src/app/layout.tsx

@@ -6,6 +6,7 @@ import { QueryClientProvider } from "./queryClientProvider";
 import { PHProvider } from "./posthogProvider";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { SyntaxReferenceGuide } from "./components/syntaxReferenceGuide";
 
 export const metadata: Metadata = {
     title: "Sourcebot",
@@ -41,6 +42,7 @@ export default function RootLayout({
                                 <Suspense>
                                     {children}
                                 </Suspense>
+                                <SyntaxReferenceGuide />
                             </TooltipProvider>
                         </QueryClientProvider>
                     </ThemeProvider>

packages/web/src/app/search/components/filterPanel/index.tsx

@@ -33,7 +33,7 @@ export const FilterPanel = ({
                 const Icon = info ? (
                     <Image
                         src={info.icon}
-                        alt={info.costHostName}
+                        alt={info.codeHostName}
                         className={cn('w-4 h-4 flex-shrink-0', info.iconClassName)}
                     />
                 ) : (

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

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}