feat: improve search UX (#54)

* add text highlighting

* pass on padding style

* add tests and quote validation

* apply validation throughout

* wip

* add more info on empty search

* tweak

* refactor for separation of concerns

* tweaks

---------

Co-authored-by: zx <[email protected]>

Author: zxt-tzx

packages/core/src/github/schema.validation.ts

@@ -24,3 +24,42 @@ export const repoUserInputSchema = z.object({
     )
     .transform((name) => name.toLowerCase()),
 });
+
+// Shared error message
+export const INVALID_REPO_MESSAGE = "Please enter a valid GitHub repository";
+
+// Utility function to extract owner and repo, with validation
+export const validateAndExtractGithubOwnerAndRepo = (
+  input: string,
+  ctx?: z.RefinementCtx,
+) => {
+  // Normalize the input to handle both URL and owner/repo format
+  const normalizedInput = input.includes("github.com")
+    ? new URL(
+        input.startsWith("http") ? input : `https://${input}`,
+      ).pathname.slice(1)
+    : input;
+  // Split and filter out empty strings
+  const parts = normalizedInput.split("/").filter(Boolean);
+  // Validate we have exactly owner and repo
+  if (parts.length !== 2) {
+    if (ctx) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: INVALID_REPO_MESSAGE,
+      });
+    }
+    return null;
+  }
+  const [owner, repo] = parts;
+  // Validate against schema
+  const result = repoUserInputSchema.safeParse({ owner, repo });
+  if (!result.success) {
+    if (ctx) {
+      result.error.errors.forEach((err) => ctx.addIssue(err));
+    }
+    return null;
+  }
+
+  return result.data;
+};

packages/core/src/repo.ts

@@ -40,6 +40,7 @@ export const Repo = {
       .select({
         id: repos.id,
         isPrivate: repos.isPrivate,
+        initStatus: repos.initStatus,
       })
       .from(repos)
       .where(and(eq(repos.ownerLogin, owner), eq(repos.name, name)));
@@ -52,6 +53,7 @@ export const Repo = {
       exists: true,
       id: result.id,
       isPrivate: result.isPrivate,
+      initStatus: result.initStatus,
     } as const;
   },
 

packages/core/src/semsearch/db.ts

@@ -16,7 +16,7 @@ import { usersToRepos } from "@/db/schema/entities/user-to-repo.sql";
 import { lower } from "@/db/utils/general";
 import { jsonAggBuildObjectFromJoin, jsonContains } from "@/db/utils/json";
 
-import type { SearchParams } from "./schema";
+import type { SearchParams } from "./schema.output";
 import { parseSearchQuery } from "./util";
 
 export function getBaseSelect() {

packages/core/src/semsearch/index.ts

@@ -22,8 +22,8 @@ import {
   calculateRecencyScore,
   calculateSimilarityScore,
 } from "./ranking";
-import type { SearchParams, SearchResult } from "./schema";
-import { parseSearchQuery } from "./util";
+import { getInputForEmbedding } from "./schema.input";
+import type { SearchParams, SearchResult } from "./schema.output";
 
 export async function routeSearch(
   params: SearchParams,
@@ -58,12 +58,12 @@ async function getCountsAndEmbedding(
   db: DbClient,
   openai: OpenAIClient,
 ) {
-  const parsedSearchQuery = parseSearchQuery(params.query);
+  const input = getInputForEmbedding(params.query);
   const [filteredIssueCount, embedding] = await Promise.all([
     getFilteredIssuesExactCount(params, db),
     createEmbedding(
       {
-        input: parsedSearchQuery.remainingQuery ?? params.query,
+        input: input ?? params.query,
       },
       openai,
     ),

packages/core/src/semsearch/schema.input.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest";
+
+import { operatorQuoteSchema, searchQuerySchema } from "./schema.input";
+
+describe("operatorQuoteSchema", () => {
+  it("should pass when quoted operators have quotes", () => {
+    const validQueries = [
+      'title:"hello world"',
+      'body:"some description"',
+      'label:"bug"',
+      'collection:"my collection"',
+      // Mixed with unquoted operators
+      'title:"hello" author:coder',
+      'state:open body:"detailed explanation"',
+      // Multiple quoted operators
+      'title:"hello" body:"world"',
+      // With other content
+      'title:"hello world" some other text',
+    ];
+
+    validQueries.forEach((query) => {
+      expect(() => operatorQuoteSchema.parse(query)).not.toThrow();
+    });
+  });
+
+  it("should fail when quoted operators lack quotes", () => {
+    const invalidQueries = [
+      "title:hello world",
+      "body:some description",
+      "label:bug",
+      "collection:my collection",
+      // Mixed cases
+      'title:"valid" body:invalid',
+      'title:invalid body:"valid"',
+      // With other content
+      "title:hello some other text",
+    ];
+
+    invalidQueries.forEach((query) => {
+      expect(() => operatorQuoteSchema.parse(query)).toThrow(/requires quotes/);
+    });
+  });
+
+  it("should pass when unquoted operators are used without quotes", () => {
+    const validQueries = [
+      "author:coder",
+      "state:open",
+      "repo:semhub",
+      "org:coder",
+      // Mixed with quoted operators
+      'author:coder title:"hello"',
+      // Multiple unquoted operators
+      "state:open author:coder",
+    ];
+
+    validQueries.forEach((query) => {
+      expect(() => operatorQuoteSchema.parse(query)).not.toThrow();
+    });
+  });
+});
+
+describe("searchQuerySchema", () => {
+  describe("multiple operator validation", () => {
+    it("should fail when multiple instances of unique operators are used", () => {
+      const invalidQueries = [
+        "state:open state:closed",
+        "repo:a repo:b",
+        "author:x author:y",
+        "org:a org:b",
+      ];
+
+      invalidQueries.forEach((query) => {
+        expect(() => searchQuerySchema.parse(query)).toThrow(/at most one/);
+      });
+    });
+  });
+
+  describe("empty query validation", () => {
+    it("should fail when no substantive query is provided", () => {
+      const emptyQueries = [
+        "",
+        " ",
+        "state:open", // only filter, no search content
+      ];
+
+      emptyQueries.forEach((query) => {
+        expect(() => searchQuerySchema.parse(query)).toThrow(
+          /substantive query/,
+        );
+      });
+    });
+
+    it("should pass when substantive query is provided", () => {
+      const validQueries = [
+        "hello world",
+        'title:"hello"',
+        'body:"description"',
+        "state:open hello",
+        '"exact match"',
+      ];
+
+      validQueries.forEach((query) => {
+        expect(() => searchQuerySchema.parse(query)).not.toThrow();
+      });
+    });
+  });
+});

packages/core/src/semsearch/schema.input.ts

@@ -0,0 +1,95 @@
+import { z } from "zod";
+
+import { SEARCH_OPERATORS } from "../constants/search.constant";
+import { parseSearchQuery } from "./util";
+
+export const operatorQuoteSchema = z.string().superRefine((query, ctx) => {
+  // Check for unquoted operators that require quotes
+  SEARCH_OPERATORS.forEach(({ operator, enclosedInQuotes }) => {
+    if (enclosedInQuotes) {
+      const unquotedPattern = new RegExp(`${operator}:([^"\\s]+)(?=\\s|$)`);
+      if (unquotedPattern.test(query)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `The ${operator} operator requires quotes (") around its value`,
+        });
+      }
+    }
+  });
+});
+
+export const searchQuerySchema = z.string().superRefine((query, ctx) => {
+  const input = getInputForEmbedding(query);
+  if (!input) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Please provide a substantive query",
+    });
+  }
+
+  // Run operator quote validation
+  const quoteValidation = operatorQuoteSchema.safeParse(query);
+  if (!quoteValidation.success) {
+    quoteValidation.error.issues.forEach((issue) => ctx.addIssue(issue));
+  }
+
+  const { stateQueries, repoQueries, authorQueries, ownerQueries } =
+    parseSearchQuery(query);
+
+  if (stateQueries.length > 1) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Please filter by at most one state",
+    });
+  }
+  if (repoQueries.length > 1) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Please filter by at most one repo",
+    });
+  }
+  if (repoQueries.length === 1 && ownerQueries.length === 0) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Please specify an org for the repo",
+    });
+  }
+  if (authorQueries.length > 1) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Please filter by at most one author",
+    });
+  }
+  if (ownerQueries.length > 1) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Please filter by at most one org",
+    });
+  }
+});
+
+export function getInputForEmbedding(query: string) {
+  const {
+    remainingQuery,
+    bodyQueries,
+    substringQueries,
+    titleQueries,
+    labelQueries,
+  } = parseSearchQuery(query);
+  if (
+    remainingQuery.length === 0 &&
+    bodyQueries.length === 0 &&
+    substringQueries.length === 0 &&
+    titleQueries.length === 0
+  ) {
+    // not enough to construct an embedding
+    return null;
+  }
+  return [
+    ...titleQueries.map((title) => `title:${title}`),
+    ...labelQueries.map((label) => `labelled as ${label}`),
+    ...bodyQueries,
+    ...substringQueries,
+    remainingQuery,
+  ].join(",");
+}

packages/core/src/semsearch/schema.ts renamed to packages/core/src/semsearch/schema.output.ts

@@ -112,3 +112,12 @@ export function modifyUserQuery(query: string) {
   // Normalize spaces - replace multiple spaces with single space
   return modifiedQuery.replace(/\s+/g, " ").trim();
 }
+export function extractOwnerAndRepo(query: string) {
+  const { ownerQueries, repoQueries } = parseSearchQuery(query);
+  const owner = ownerQueries[0];
+  const repo = repoQueries[0];
+  if (!owner || !repo) {
+    return null;
+  }
+  return { owner, repo };
+}

packages/core/src/semsearch/util.ts

@@ -0,0 +1,27 @@
+import { type FieldApi } from "@tanstack/react-form";
+import { AlertCircleIcon } from "lucide-react";
+
+interface ValidationErrorsProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  field: FieldApi<any, any, any, any, any>;
+  error: string | null;
+}
+
+export function ValidationErrors({ field, error }: ValidationErrorsProps) {
+  const validationError =
+    field.state.meta.isTouched && field.state.meta.errors.length
+      ? field.state.meta.errors
+          .filter((err: unknown): err is string => typeof err === "string")
+          .join(", ")
+      : null;
+
+  const errors = [validationError, error].filter(Boolean);
+  const displayError = errors.length > 0 ? errors.join(", ") : null;
+
+  return displayError ? (
+    <div className="flex items-center gap-2 text-sm text-red-500">
+      <AlertCircleIcon className="size-4" />
+      <span>{displayError}</span>
+    </div>
+  ) : null;
+}

packages/web/src/components/ValidationErrors.tsx

@@ -2,6 +2,7 @@ import { AlertCircleIcon, PlusIcon } from "lucide-react";
 import { useState } from "react";
 
 import { repoSchema } from "@/core/github/schema.rest";
+import { validateAndExtractGithubOwnerAndRepo } from "@/core/github/schema.validation";
 import { useDebounce } from "@/hooks/useDebounce";
 import {
   Dialog,
@@ -12,15 +13,12 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { ShineButton } from "@/components/ui/shine-button";
+import { githubRepoFormSchema } from "@/components/repos/form-schema";
 import {
   RepoPreview,
   RepoPreviewProps,
   RepoPreviewSkeleton,
 } from "@/components/repos/RepoPreview";
-import {
-  githubRepoFormSchema,
-  validateAndExtractGithubOwnerAndRepo,
-} from "@/components/repos/subscribe";
 
 import {
   CopyButton,