feat: user search/discovery

Previously the only way to find someone to follow was knowing their
exact username. Add GET /api/v1/users/search (name/username ilike,
excludes blocked-either-way) and a /people page with debounced search
+ inline follow buttons. Linked from the Explore page.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/app/(app)/people/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import { PeopleSearch } from "@/components/social/people-search";
+
+export const metadata: Metadata = { title: "Find People — Epicure" };
+
+export default function PeoplePage() {
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">Find People</h1>
+        <p className="text-muted-foreground text-sm mt-1">Search for cooks to follow by name or username.</p>
+      </div>
+      <PeopleSearch />
+    </div>
+  );
+}

apps/web/app/api/v1/users/search/route.ts

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db, users, userBlocks, eq, and, or, ne, ilike, isNotNull } from "@epicure/db";
+import { requireSession } from "@/lib/api-auth";
+
+export async function GET(req: NextRequest) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const q = req.nextUrl.searchParams.get("q")?.trim().slice(0, 50) ?? "";
+  if (q.length < 2) return NextResponse.json({ users: [] });
+
+  const blocked = await db
+    .select({ blockedId: userBlocks.blockedId })
+    .from(userBlocks)
+    .where(eq(userBlocks.blockerId, session!.user.id));
+  const blockedByMe = new Set(blocked.map((b) => b.blockedId));
+
+  const blockedMe = await db
+    .select({ blockerId: userBlocks.blockerId })
+    .from(userBlocks)
+    .where(eq(userBlocks.blockedId, session!.user.id));
+  const haveBlockedMe = new Set(blockedMe.map((b) => b.blockerId));
+
+  const rows = await db
+    .select({
+      id: users.id,
+      name: users.name,
+      username: users.username,
+      avatarUrl: users.avatarUrl,
+      bio: users.bio,
+    })
+    .from(users)
+    .where(
+      and(
+        isNotNull(users.username),
+        ne(users.id, session!.user.id),
+        or(ilike(users.name, `%${q}%`), ilike(users.username, `%${q}%`))
+      )
+    )
+    .limit(20);
+
+  const filtered = rows.filter((u) => !blockedByMe.has(u.id) && !haveBlockedMe.has(u.id));
+
+  return NextResponse.json({ users: filtered });
+}

apps/web/components/search/explore-page-content.tsx

@@ -244,7 +244,12 @@ export function ExplorePageContent({ trending, recent, initialQuery }: Props) {
     <div className="max-w-5xl mx-auto space-y-10">
       {/* Search bar */}
       <div className="space-y-3">
-        <h1 className="text-3xl font-bold">{t("title")}</h1>
+        <div className="flex items-center justify-between">
+          <h1 className="text-3xl font-bold">{t("title")}</h1>
+          <Link href="/people" className="text-sm text-muted-foreground hover:text-foreground underline underline-offset-4">
+            Find people
+          </Link>
+        </div>
         <form onSubmit={handleSubmit} className="relative">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground pointer-events-none" />
           <Input

apps/web/components/social/people-search.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Input } from "@/components/ui/input";
+import { FollowButton } from "@/components/social/follow-button";
+import { Search } from "lucide-react";
+
+type PersonResult = {
+  id: string;
+  name: string;
+  username: string | null;
+  avatarUrl: string | null;
+  bio: string | null;
+};
+
+export function PeopleSearch() {
+  const [q, setQ] = useState("");
+  const [results, setResults] = useState<PersonResult[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (q.trim().length < 2) {
+      setResults([]);
+      return;
+    }
+    const timeout = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const res = await fetch(`/api/v1/users/search?q=${encodeURIComponent(q.trim())}`);
+        if (res.ok) {
+          const data = (await res.json()) as { users: PersonResult[] };
+          setResults(data.users);
+        }
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [q]);
+
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          placeholder="Search people by name or username…"
+          className="pl-9"
+        />
+      </div>
+
+      {loading && <p className="text-sm text-muted-foreground">Searching…</p>}
+
+      {!loading && q.trim().length >= 2 && results.length === 0 && (
+        <p className="text-sm text-muted-foreground">No one found.</p>
+      )}
+
+      <div className="space-y-2">
+        {results.map((person) => (
+          <div key={person.id} className="flex items-center gap-3 rounded-lg border p-3">
+            <Link href={`/u/${person.username}`} className="flex items-center gap-3 flex-1 min-w-0">
+              <Avatar className="h-10 w-10 shrink-0">
+                {person.avatarUrl && <AvatarImage src={person.avatarUrl} alt={person.name} />}
+                <AvatarFallback>{person.name.slice(0, 2).toUpperCase()}</AvatarFallback>
+              </Avatar>
+              <div className="min-w-0">
+                <p className="font-medium text-sm truncate">{person.name}</p>
+                <p className="text-xs text-muted-foreground truncate">@{person.username}</p>
+              </div>
+            </Link>
+            {person.username && (
+              <FollowButton targetUserId={person.id} targetUsername={person.username} />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}