PR.29 feature/searchbox

feat: implement search UI with responsive mobile and desktop experiences

Author: michellepace

app/(app)/search/page.tsx

@@ -0,0 +1,25 @@
+type SearchPageProps = {
+  searchParams: Promise<{ q?: string }>;
+};
+
+export default async function SearchPage({ searchParams }: SearchPageProps) {
+  const { q } = await searchParams;
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-heading-lg">Search Results</h1>
+      {q ? (
+        <p className="text-muted-foreground">
+          Showing results for: <strong className="text-foreground">{q}</strong>
+        </p>
+      ) : (
+        <p className="text-muted-foreground">Enter a search query to begin.</p>
+      )}
+
+      {/* TODO: Implement search results */}
+      <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
+        Do Search on mock data (+TDD) → then Convex.
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -61,7 +61,7 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* Custom */
+  /* Custom: Overlay */
   --color-overlay: var(--overlay);
 }
 
@@ -75,23 +75,23 @@
   --radius: 0.625rem;
 
   /* shadcn/ui: Core */
-  --background: oklch(0.99 0 0); /* #FDFDFD */
+  --background: oklch(0.99 0 0);
   --foreground: oklch(0.129 0.042 264.695);
-  --card: oklch(0.9722 0.0034 247.86); /* #F4F6F8 */
-  --card-foreground: oklch(0.129 0.042 264.695);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(0.9722 0.0034 247.86);
+  --card-foreground: var(--foreground);
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
   --primary: oklch(0.7089 0.1967 46.81);
   --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.9147 0.0205 264.47); /* #DCE3F1 - Figma */
+  --secondary: oklch(0.9147 0.0205 264.47);
   --secondary-foreground: oklch(0.208 0.042 265.755);
   --muted: oklch(0.968 0.007 247.896);
   --muted-foreground: oklch(0.554 0.046 257.417);
-  --accent: oklch(0.968 0.007 247.896);
-  --accent-foreground: oklch(0.208 0.042 265.755);
+  --accent: var(--muted);
+  --accent-foreground: var(--secondary-foreground);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.929 0.013 255.508);
-  --input: oklch(0.929 0.013 255.508);
+  --input: var(--border);
   --ring: oklch(0.704 0.04 256.788);
 
   /* shadcn/ui: Charts */
@@ -102,55 +102,52 @@
   --chart-5: oklch(0.769 0.188 70.08);
 
   /* shadcn/ui: Sidebar */
-  --sidebar: oklch(1 0 0); /* Figma #ffffff */
-  --sidebar-foreground: oklch(0.2102 0.0185 270.39); /* #151821 */
-  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.2102 0.0185 270.39);
+  --sidebar-primary: var(--secondary-foreground);
   --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.968 0.007 247.896);
-  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.9722 0.0034 247.86); /* #F4F6F8 */
-  --sidebar-ring: oklch(0.704 0.04 256.788);
+  --sidebar-accent: var(--muted);
+  --sidebar-accent-foreground: var(--secondary-foreground);
+  --sidebar-border: var(--card);
+  --sidebar-ring: var(--ring);
 
   /* Custom: Gradients */
-  --primary-gradient-to: oklch(0.7434 0.115 58.23); /* #E2995F */
+  --primary-gradient-to: oklch(0.7434 0.115 58.23);
   --gradient-primary: linear-gradient(
     93.22deg,
     var(--primary) -13.95%,
     var(--primary-gradient-to) 99.54%
   );
 
   /* Custom: Overlay */
-  --overlay: oklch(0 0 0); /* black, both modes */
+  --overlay: oklch(0 0 0);
 
   /* Custom: Assets (theme-aware URLs) */
   --logo-full-themed: url("/images/logo-light.svg");
   --auth-bg: url("/images/auth-bg-light.webp");
 
   /* Custom: Tag badges */
-  --tag-bg: oklch(0.9722 0.0034 247.86); /* #F4F6F8 */
-  --tag-text: oklch(0.6504 0.0475 272.34); /* #858EAD */
+  --tag-bg: var(--card);
+  --tag-text: oklch(0.6504 0.0475 272.34);
 }
 
 /* Dark mode overrides — these values take precedence over :root when .dark is active */
 .dark {
-  /* Base */
-  --radius: 0.625rem; /* same as root */
-
   /* shadcn/ui: Core */
-  --background: oklch(0 0 0); /* #000000 */
+  --background: oklch(0 0 0);
   --foreground: oklch(0.984 0.003 247.858);
-  --card: oklch(0.1783 0.0128 270.6); /* #0F1117 */
-  --card-foreground: oklch(0.984 0.003 247.858);
-  --popover: oklch(0.208 0.042 265.755);
-  --popover-foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.1783 0.0128 270.6);
+  --card-foreground: var(--foreground);
+  --popover: oklch(0.2741 0.023 270.44);
+  --popover-foreground: var(--foreground);
   --primary: oklch(0.7089 0.1967 46.81);
   --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.2728 0.0257 265.4); /* #212734 - Figma */
-  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.2728 0.0257 265.4);
+  --secondary-foreground: var(--foreground);
   --muted: oklch(0.279 0.041 260.031);
   --muted-foreground: oklch(0.704 0.04 256.788);
-  --accent: oklch(0.279 0.041 260.031);
-  --accent-foreground: oklch(0.984 0.003 247.858);
+  --accent: var(--muted);
+  --accent-foreground: var(--foreground);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
@@ -164,33 +161,33 @@
   --chart-5: oklch(0.645 0.246 16.439);
 
   /* shadcn/ui: Sidebar */
-  --sidebar: oklch(0.1783 0.0128 270.6); /* Figma #0F1117 */
-  --sidebar-foreground: oklch(1 0 0); /* #FFFFFF */
+  --sidebar: var(--card);
+  --sidebar-foreground: oklch(1 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.279 0.041 260.031);
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary-foreground: var(--foreground);
+  --sidebar-accent: var(--muted);
+  --sidebar-accent-foreground: var(--foreground);
   --sidebar-border: transparent;
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --sidebar-ring: var(--ring);
 
   /* Custom: Gradients */
-  --primary-gradient-to: oklch(0.7434 0.115 58.23); /* same as root */
+  --primary-gradient-to: oklch(0.7434 0.115 58.23);
   --gradient-primary: linear-gradient(
     93.22deg,
     var(--primary) -13.95%,
     var(--primary-gradient-to) 99.54%
-  ); /* same as root */
+  );
 
   /* Custom: Overlay */
-  --overlay: oklch(0 0 0); /* same as root */
+  --overlay: oklch(0 0 0);
 
   /* Custom: Assets (theme-aware URLs) */
   --logo-full-themed: url("/images/logo-dark.svg");
   --auth-bg: url("/images/auth-bg-dark.webp");
 
   /* Custom: Tag badges */
-  --tag-bg: oklch(0.2102 0.0185 270.39); /* #151821 */
-  --tag-text: oklch(0.6547 0.0897 269.9); /* #7B8EC8 */
+  --tag-bg: oklch(0.2102 0.0185 270.39);
+  --tag-text: oklch(0.6547 0.0897 269.9);
 }
 
 @layer base {
@@ -257,11 +254,8 @@
     @apply invert dark:invert-0;
   }
 
-  /* Subtle directional shadow for navigation edges (light mode only) */
+  /* Subtle directional shadow for navigation edges */
   .shadow-light {
     box-shadow: -10px 10px 20px 0px oklch(0.877 0.006 17.26 / 10%);
   }
-  .dark .shadow-light {
-    box-shadow: none;
-  }
 }

components/navigation/desktop-topbar.tsx

@@ -1,14 +1,14 @@
 import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
-import { Searchbox } from "@/components/search/searchbox";
+import { DesktopSearch } from "@/components/search/desktop-search";
 import { Button } from "@/components/ui/button";
 
 export function DesktopTopBar() {
   return (
     <header className="sticky top-0 z-40 hidden h-(--top-bar-height) items-center bg-background md:flex">
-      {/* Left section: matches main content structure (padding + max-w-5xl centering) */}
+      {/* Left section: search bar narrower than content (max-w-2xl vs content's max-w-5xl) */}
       <div className="flex flex-1 items-center md:px-8 lg:px-10 xl:px-14">
-        <div className="mx-auto w-full max-w-5xl">
-          <Searchbox />
+        <div className="mx-auto w-full max-w-2xl">
+          <DesktopSearch />
         </div>
       </div>
 

components/navigation/mobile-topbar.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { MobileNav } from "@/components/navigation/mobile-nav";
+import { MobileSearch } from "@/components/search/mobile-search";
 
 export function MobileTopBar() {
   return (
@@ -10,7 +11,10 @@ export function MobileTopBar() {
         <img src="/images/site-logo.svg" className="size-8" />
       </Link>
 
-      <MobileNav />
+      <div className="flex items-center">
+        <MobileSearch />
+        <MobileNav />
+      </div>
     </header>
   );
 }

components/search/desktop-search.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { SearchHints } from "@/components/search/search-hints";
+import { SearchInput } from "@/components/search/search-input";
+import { SearchPopoverContent } from "@/components/search/search-popover-content";
+import { Popover, PopoverAnchor } from "@/components/ui/popover";
+import { useSearch } from "@/hooks/use-search";
+
+export function DesktopSearch() {
+  const {
+    isOpen,
+    query,
+    setQuery,
+    inputRef,
+    open,
+    close,
+    handleSubmit,
+    handleKeyDown,
+  } = useSearch();
+
+  return (
+    <Popover open={isOpen} onOpenChange={(open) => !open && close()}>
+      <PopoverAnchor asChild>
+        <form data-slot="searchbox" onSubmit={handleSubmit} className="w-full">
+          <SearchInput
+            ref={inputRef}
+            value={query}
+            onChange={setQuery}
+            onFocus={open}
+            onKeyDown={handleKeyDown}
+            highlighted={isOpen}
+          />
+        </form>
+      </PopoverAnchor>
+      <SearchPopoverContent>
+        <SearchHints variant="desktop" onClose={close} />
+      </SearchPopoverContent>
+    </Popover>
+  );
+}

components/search/mobile-search.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { useEffect, useState } from "react";
+import { SearchHints } from "@/components/search/search-hints";
+import { SearchInput } from "@/components/search/search-input";
+import { SearchPopoverContent } from "@/components/search/search-popover-content";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverAnchor } from "@/components/ui/popover";
+import { useSearch } from "@/hooks/use-search";
+import { cn } from "@/lib/utils";
+
+export function MobileSearch() {
+  const [showHints, setShowHints] = useState(false);
+
+  const {
+    isOpen,
+    query,
+    setQuery,
+    inputRef,
+    open,
+    reset,
+    handleSubmit,
+    handleKeyDown,
+  } = useSearch({
+    onClose: () => setShowHints(false),
+  });
+
+  // Auto-focus input when overlay opens
+  useEffect(() => {
+    if (isOpen) {
+      const timer = setTimeout(() => inputRef.current?.focus(), 50);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, inputRef]);
+
+  // 0.5s delay before showing hints
+  useEffect(() => {
+    if (!isOpen) {
+      setShowHints(false);
+      return;
+    }
+
+    const timer = setTimeout(() => setShowHints(true), 500);
+    return () => clearTimeout(timer);
+  }, [isOpen]);
+
+  return (
+    <>
+      {/* Search icon trigger button */}
+      <Button
+        variant="ghost"
+        size="icon-lg"
+        onClick={open}
+        className={cn(
+          "text-foreground md:hidden",
+          isOpen && "bg-accent text-accent-foreground",
+        )}
+        aria-label="Search"
+      >
+        <Search className="size-6" />
+      </Button>
+
+      {/* Overlay and search panel (only when active) */}
+      {isOpen && (
+        <>
+          {/* Backdrop overlay - click to close */}
+          <button
+            type="button"
+            tabIndex={-1}
+            data-slot="mobile-search-overlay"
+            className="animate-in fade-in-0 fixed inset-0 z-50 cursor-default bg-overlay/50 duration-300 md:hidden"
+            onClick={reset}
+            aria-label="Close search"
+          />
+
+          {/* Search input bar - separate card floating below topbar */}
+          <div
+            data-slot="mobile-search-input-bar"
+            className="animate-in slide-in-from-top-2 fade-in-0 fixed left-0 right-0 top-(--top-bar-height) z-50 border-b bg-card px-4 py-3 shadow-sm duration-300 md:hidden"
+          >
+            <Popover open={showHints} onOpenChange={setShowHints}>
+              <PopoverAnchor asChild>
+                <form data-slot="mobile-search-form" onSubmit={handleSubmit}>
+                  <SearchInput
+                    ref={inputRef}
+                    value={query}
+                    onChange={setQuery}
+                    onKeyDown={handleKeyDown}
+                    highlighted={isOpen}
+                  />
+                </form>
+              </PopoverAnchor>
+
+              {/* Hints panel - separate floating card below input */}
+              <SearchPopoverContent sideOffset={12}>
+                <SearchHints variant="mobile" onClose={reset} />
+              </SearchPopoverContent>
+            </Popover>
+          </div>
+        </>
+      )}
+    </>
+  );
+}

components/search/search-hints-data.ts

@@ -0,0 +1,10 @@
+export const SEARCH_HINTS = [
+  { syntax: "[tag]", description: "search within a tag" },
+  { syntax: "user:1234", description: "search by author" },
+  { syntax: '"words here"', description: "exact phrase" },
+  { syntax: "answers:0", description: "unanswered questions" },
+  { syntax: "score:3", description: "posts with a 3+ score" },
+  { syntax: "is:question", description: "type of post" },
+] as const;
+
+export type SearchHint = (typeof SEARCH_HINTS)[number];