feat: merge people search into the recipe search bar on Explore

People search existed but was buried in its own tab with no entry point from anywhere else — easy to conclude it "doesn't work" since nobody would find it. Now one query on Explore hits both /api/v1/search and /api/v1/users/search and renders People/Recipes sections together; the standalone people tab and its now-dead PeopleSearch component are gone. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-13 15:38:29 +02:00
parent 6dd48b5c25
commit 79cdb8cd04
9 changed files with 109 additions and 146 deletions
@@ -1,84 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { useTranslations } from "next-intl";
-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 t = useTranslations("people");
-  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={t("searchPlaceholder")}
-          className="pl-9"
-        />
-      </div>
-
-      {loading && <p className="text-sm text-muted-foreground">{t("searching")}</p>}
-
-      {!loading && q.trim().length >= 2 && results.length === 0 && (
-        <p className="text-sm text-muted-foreground">{t("noneFound")}</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>
-  );
-}