tweaks from Christin's feedback

Author: zxt-tzx

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

@@ -57,7 +57,7 @@ export const searchQuerySchema = z.string().superRefine((query, ctx) => {
   if (repoQueries.length === 0 && ownerQueries.length === 0) {
     ctx.addIssue({
       code: z.ZodIssueCode.custom,
-      message: "Please specify an org or repo for your search",
+      message: "Please filter by either an org or a repo",
     });
   }
   if (repoQueries.length === 1 && ownerQueries.length === 0) {

packages/web/src/components/embed/EmbedBadgePopover.tsx

@@ -33,7 +33,7 @@ export function EmbedBadgePopover({
       <PopoverTrigger asChild>
         <Button variant={buttonVariant} size="sm" className="gap-2">
           <PlusIcon className="size-4" />
-          <span>Embed</span>
+          <span>Add to Repo</span>
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-96" align="end">

packages/web/src/components/navbar/DarkModeToggle.tsx

@@ -1,5 +1,13 @@
+import { MonitorCogIcon, MoonIcon, SunIcon } from "lucide-react";
+
 import { useThemeToggle } from "@/lib/hooks/useThemeToggle";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 interface DarkModeToggleProps {
   onToggleCountChange: () => void;
@@ -8,15 +16,33 @@ interface DarkModeToggleProps {
 export function DarkModeToggle({ onToggleCountChange }: DarkModeToggleProps) {
   const { ThemeIcon, handleThemeChange } = useThemeToggle();
 
-  const handleClick = () => {
+  const setThemeAndNotify = (newTheme: string) => {
     onToggleCountChange();
-    handleThemeChange();
+    handleThemeChange(newTheme);
   };
 
   return (
-    <Button variant="ghost" size="icon" onClick={handleClick}>
-      <ThemeIcon className="size-[1.2rem] animate-in fade-in" />
-      <span className="sr-only">Toggle theme</span>
-    </Button>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <ThemeIcon className="size-[1.2rem] animate-in fade-in" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setThemeAndNotify("light")}>
+          <SunIcon className="mr-2 size-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setThemeAndNotify("dark")}>
+          <MoonIcon className="mr-2 size-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setThemeAndNotify("system")}>
+          <MonitorCogIcon className="mr-2 size-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }

packages/web/src/components/navbar/LoginButton.tsx

@@ -14,7 +14,7 @@ export function LoginButton() {
   return (
     <Button variant="outline" onClick={handleLogin} className="gap-2">
       <GithubIcon className="size-4" />
-      Sign in
+      Sign In
     </Button>
   );
 }

packages/web/src/components/navbar/Navbar.tsx

@@ -1,9 +1,10 @@
-import { Link } from "@tanstack/react-router";
+import { Link, useLocation } from "@tanstack/react-router";
 import { useTheme } from "next-themes";
 import { useEffect, useRef, useState } from "react";
 
 import { useSession } from "@/lib/hooks/useSession";
 import { useAudio } from "@/hooks/useAudio";
+import { EmbedBadgePopover } from "@/components/embed/EmbedBadgePopover";
 import { DarkModeToggle } from "@/components/navbar/DarkModeToggle";
 import { LoginButton } from "@/components/navbar/LoginButton";
 import { UserNav } from "@/components/navbar/UserNav";
@@ -64,6 +65,8 @@ export function Navbar() {
       </span>
     </h1>
   );
+
+  const location = useLocation();
   return (
     <div className="flex h-16 w-full items-center justify-between px-4">
       <div className="flex items-center gap-2">
@@ -73,6 +76,10 @@ export function Navbar() {
         </Link>
       </div>
       <nav className="flex items-center gap-4">
+        {/* avoids showing two EmbedBadgePopovers on the same page */}
+        {!location.pathname.startsWith("/r/") && (
+          <EmbedBadgePopover owner="your" repo="repo" />
+        )}
         {isAuthenticated ? (
           <>
             <Link

packages/web/src/components/navbar/UserNav.tsx

@@ -59,7 +59,7 @@ export function UserNav({ user }: { user: User }) {
         <div className="flex flex-col gap-1 p-2">
           <Button
             variant="ghost"
-            onClick={handleThemeChange}
+            onClick={() => handleThemeChange()}
             className="w-full justify-start gap-2 pl-2 text-muted-foreground hover:text-foreground"
           >
             <ThemeIcon className="size-4" />
@@ -71,7 +71,7 @@ export function UserNav({ user }: { user: User }) {
             className="w-full justify-start gap-2 pl-2 text-muted-foreground hover:text-foreground"
           >
             <LogOutIcon className="size-4" />
-            Sign out
+            Sign Out
           </Button>
         </div>
       </DropdownMenuContent>

packages/web/src/components/search/HighlightedInput.tsx

@@ -1,12 +1,9 @@
 import * as React from "react";
 import { useMemo } from "react";
 
-import type {
-  SearchOperator} from "@/core/constants/search.constant";
-import {
-  SEARCH_OPERATORS
-} from "@/core/constants/search.constant";
+import type { SearchOperator } from "@/core/constants/search.constant";
 import { cn } from "@/lib/utils";
+import { useOperatorHighlighting } from "@/hooks/useOperatorHighlighting";
 
 // component inspired by https://akashhamirwasia.com/blog/building-highlighted-input-field-in-react/
 // with significant modifications
@@ -18,20 +15,7 @@ const HighlightedInput = React.forwardRef<
   }
 >(({ className, type, value, removedOperators = [], ...props }, ref) => {
   const rendererRef = React.useRef<HTMLDivElement>(null);
-
-  const filteredSearchOperators = useMemo(() => {
-    return SEARCH_OPERATORS.filter(
-      (op) => !removedOperators.includes(op.operator),
-    );
-  }, [removedOperators]);
-
-  // Create regex pattern from filtered search operators that captures both operator and value
-  const operatorRegex = useMemo(() => {
-    return new RegExp(
-      `(${filteredSearchOperators.map(({ operator }) => `${operator}:`).join("|")})(?:"([^"]*)"|([^\\s]*))`,
-      "g",
-    );
-  }, [filteredSearchOperators]);
+  const highlightedParts = useOperatorHighlighting(value, removedOperators);
 
   const syncScroll = (e: React.UIEvent<HTMLInputElement>) => {
     if (rendererRef.current) {
@@ -46,51 +30,8 @@ const HighlightedInput = React.forwardRef<
   const textStyles =
     "font-sans text-[16px] leading-normal tracking-normal font-normal";
 
-  const inputWithHighlights = useMemo(() => {
-    const parts = [];
-    let lastIndex = 0;
-    let match;
-
-    while ((match = operatorRegex.exec(value)) !== null) {
-      // Add text before the match
-      if (match.index > lastIndex) {
-        parts.push({
-          text: value.slice(lastIndex, match.index),
-          type: "text",
-        });
-      }
-
-      // Add operator
-      parts.push({
-        text: match[1], // The operator with colon
-        type: "operator",
-      });
-
-      // Add value (including quotes if present)
-      if (match[0] && match[1]) {
-        const valueWithQuotes = match[0].slice(match[1].length); // Get everything after the operator
-        parts.push({
-          text: valueWithQuotes,
-          type: "value",
-        });
-      }
-
-      lastIndex = match.index + match[0].length;
-    }
-
-    // Add remaining text
-    if (lastIndex < value.length) {
-      parts.push({
-        text: value.slice(lastIndex),
-        type: "text",
-      });
-    }
-
-    return parts;
-  }, [value, operatorRegex]);
-
   const renderedContent = useMemo(() => {
-    return inputWithHighlights.map((part, i) => (
+    return highlightedParts.map((part, i) => (
       <span
         key={i}
         className={
@@ -104,7 +45,7 @@ const HighlightedInput = React.forwardRef<
         {part.text}
       </span>
     ));
-  }, [inputWithHighlights]);
+  }, [highlightedParts]);
 
   return (
     <div className="relative">

packages/web/src/components/search/HomepageSearch.tsx

@@ -11,16 +11,23 @@ export function HomepageSearch() {
     <div className="relative flex w-full justify-center pt-28">
       <div className="w-full max-w-screen-xl px-4 text-center">
         <h1 className="mb-4 font-serif text-5xl tracking-tight">
-          <span className="text-blue-600 dark:text-blue-400">Sem</span>antic
-          search for Git<span className="text-orange-500">Hub</span>
-          <span className="animate-cursor text-blue-600 dark:text-blue-400">
-            _
+          <span className="bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent dark:from-blue-400 dark:to-orange-400">
+            Sem
+          </span>
+          antic search for Git
+          <span className="bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent dark:from-blue-400 dark:to-orange-400">
+            Hub
           </span>
         </h1>
-        <HomepageSearchBar />
 
-        <div className="mx-auto mt-8 flex max-w-lg flex-col items-center gap-2">
-          {suggestedSearches.map((search) => (
+        {/* Search bar section */}
+        <div className="relative">
+          <HomepageSearchBar />
+        </div>
+
+        {/* Suggested searches section */}
+        <div className="mx-auto mt-24 grid max-w-xl grid-cols-1 gap-2 sm:mt-8 sm:grid-cols-2 sm:gap-4">
+          {suggestedSearches.slice(0, 4).map((search) => (
             <SuggestedSearchCard key={search} search={search} />
           ))}
         </div>