Search suggestions

.github/workflows/test-web.yml

@@ -0,0 +1,28 @@
+name: Test Web
+
+on:
+  pull_request:
+    branches: ["main"]
+
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: "true"
+      - name: Use Node.Js
+        uses: actions/setup-node@v4
+        with:
+            node-version: '20.x'
+
+      - name: Install
+        run: yarn install --frozen-lockfile
+
+      - name: Test
+        run: yarn workspace @sourcebot/web test
+

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
     "recommendations": [
-        "dbaeumer.vscode-eslint"
+        "dbaeumer.vscode-eslint",
+        "bradlc.vscode-tailwindcss"
     ]
 }

.vscode/settings.json

@@ -7,5 +7,16 @@
         {
             "pattern": "./packages/*/"
         }
+    ],
+    // @see : https://cva.style/docs/getting-started/installation#intellisense
+    "tailwindCSS.experimental.classRegex": [
+        [
+            "cva\\(([^)]*)\\)",
+            "[\"'`]([^\"'`]*).*?[\"'`]"
+        ],
+        [
+            "cx\\(([^)]*)\\)",
+            "(?:'|\"|`)([^']*)(?:'|\"|`)"
+        ]
     ]
 }

package.json

@@ -5,7 +5,7 @@
     ],
     "scripts": {
         "build": "yarn workspaces run build",
-        "test": "yarn workspace @sourcebot/backend test",
+        "test": "yarn workspaces run test",
         "dev": "npm-run-all --print-label --parallel dev:zoekt dev:backend dev:web",
         "dev:zoekt": "export PATH=\"$PWD/bin:$PATH\" && zoekt-webserver -index .sourcebot/index -rpc",
         "dev:backend": "yarn workspace @sourcebot/backend dev:watch",

packages/web/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "vitest"
   },
   "dependencies": {
     "@codemirror/commands": "^6.6.0",
@@ -77,9 +78,12 @@
     "eslint-config-next": "14.2.6",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "jsdom": "^25.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vite-tsconfig-paths": "^5.1.3",
+    "vitest": "^2.1.5"
   }
 }

packages/web/src/app/navigationMenu.tsx → packages/web/src/app/components/navigationMenu.tsx

@@ -7,8 +7,8 @@ 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 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";

packages/web/src/app/components/searchBar/constants.ts

@@ -0,0 +1,224 @@
+import { Suggestion, SuggestionMode } from "./searchSuggestionsBox";
+
+/**
+ * List of search prefixes that can be used while the
+ * `refine` suggestion mode is active.
+ */
+enum SearchPrefix {
+    repo = "repo:",
+    r = "r:",
+    lang = "lang:",
+    file = "file:",
+    rev = "rev:",
+    revision = "revision:",
+    b = "b:",
+    branch = "branch:",
+    sym = "sym:",
+    content = "content:",
+    archived = "archived:",
+    case = "case:",
+    fork = "fork:",
+    public = "public:"
+}
+
+const negate = (prefix: SearchPrefix) => {
+    return `-${prefix}`;
+}
+
+type SuggestionModeMapping = {
+    suggestionMode: SuggestionMode,
+    prefixes: string[],
+}
+
+/**
+ * Maps search prefixes to a suggestion mode. When a query starts
+ * with a prefix, the corresponding suggestion mode is enabled.
+ * @see [searchSuggestionsBox.tsx](./searchSuggestionsBox.tsx)
+ */
+export const suggestionModeMappings: SuggestionModeMapping[] = [
+    {
+        suggestionMode: "repo",
+        prefixes: [
+            SearchPrefix.repo, negate(SearchPrefix.repo),
+            SearchPrefix.r, negate(SearchPrefix.r),
+        ]
+    },
+    {
+        suggestionMode: "language",
+        prefixes: [
+            SearchPrefix.lang, negate(SearchPrefix.lang),
+        ]
+    },
+    {
+        suggestionMode: "file",
+        prefixes: [
+            SearchPrefix.file, negate(SearchPrefix.file),
+        ]
+    },
+    {
+        suggestionMode: "content",
+        prefixes: [
+            SearchPrefix.content, negate(SearchPrefix.content),
+        ]
+    },
+    {
+        suggestionMode: "revision",
+        prefixes: [
+            SearchPrefix.rev, negate(SearchPrefix.rev),
+            SearchPrefix.revision, negate(SearchPrefix.revision),
+            SearchPrefix.branch, negate(SearchPrefix.branch),
+            SearchPrefix.b, negate(SearchPrefix.b),
+        ]
+    },
+    {
+        suggestionMode: "symbol",
+        prefixes: [
+            SearchPrefix.sym, negate(SearchPrefix.sym),
+        ]
+    },
+    {
+        suggestionMode: "archived",
+        prefixes: [
+            SearchPrefix.archived
+        ]
+    },
+    {
+        suggestionMode: "case",
+        prefixes: [
+            SearchPrefix.case
+        ]
+    },
+    {
+        suggestionMode: "fork",
+        prefixes: [
+            SearchPrefix.fork
+        ]
+    },
+    {
+        suggestionMode: "public",
+        prefixes: [
+            SearchPrefix.public
+        ]
+    }
+];
+
+export const refineModeSuggestions: Suggestion[] = [
+    {
+        value: SearchPrefix.repo,
+        description: "Include only results from the given repository.",
+        spotlight: true,
+    },
+    {
+        value: negate(SearchPrefix.repo),
+        description: "Exclude results from the given repository."
+    },
+    {
+        value: SearchPrefix.lang,
+        description: "Include only results from the given language.",
+        spotlight: true,
+    },
+    {
+        value: negate(SearchPrefix.lang),
+        description: "Exclude results from the given language."
+    },
+    {
+        value: SearchPrefix.file,
+        description: "Include only results from filepaths matching the given search pattern.",
+        spotlight: true,
+    },
+    {
+        value: negate(SearchPrefix.file),
+        description: "Exclude results from file paths matching the given search pattern."
+    },
+    {
+        value: SearchPrefix.rev,
+        description: "Search a given branch or tag instead of the default branch.",
+        spotlight: true,
+    },
+    {
+        value: negate(SearchPrefix.rev),
+        description: "Exclude results from the given branch or tag."
+    },
+    {
+        value: SearchPrefix.sym,
+        description: "Include only symbols matching the given search pattern.",
+        spotlight: true,
+    },
+    {
+        value: negate(SearchPrefix.sym),
+        description: "Exclude results from symbols matching the given search pattern."
+    },
+    {
+        value: SearchPrefix.content,
+        description: "Include only results from files if their content matches the given search pattern."
+    },
+    {
+        value: negate(SearchPrefix.content),
+        description: "Exclude results from files if their content matches the given search pattern."
+    },
+    {
+        value: SearchPrefix.archived,
+        description: "Include results from archived repositories.",
+    },
+    {
+        value: SearchPrefix.case,
+        description: "Control case-sensitivity of search patterns."
+    },
+    {
+        value: SearchPrefix.fork,
+        description: "Include only results from forked repositories."
+    },
+    {
+        value: SearchPrefix.public,
+        description: "Filter on repository visibility."
+    },
+];
+
+export const publicModeSuggestions: Suggestion[] = [
+    {
+        value: "yes",
+        description: "Only include results from public repositories."
+    },
+    {
+        value: "no",
+        description: "Only include results from private repositories."
+    },
+];
+
+export const forkModeSuggestions: Suggestion[] = [
+    {
+        value: "yes",
+        description: "Only include results from forked repositories."
+    },
+    {
+        value: "no",
+        description: "Only include results from non-forked repositories."
+    },
+];
+
+export const caseModeSuggestions: Suggestion[] = [
+    {
+        value: "auto",
+        description: "Search patterns are case-insensitive if all characters are lowercase, and case sensitive otherwise (default)."
+    },
+    {
+        value: "yes",
+        description: "Case sensitive search."
+    },
+    {
+        value: "no",
+        description: "Case insensitive search."
+    },
+];
+
+export const archivedModeSuggestions: Suggestion[] = [
+    {
+        value: "yes",
+        description: "Only include results in archived repositories."
+    },
+    {
+        value: "no",
+        description: "Only include results in non-archived repositories."
+    },
+];
+

packages/web/src/app/components/searchBar/index.ts

@@ -0,0 +1,2 @@
+
+export { SearchBar } from "./searchBar";