arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Arnaud
2026-07-13 15:38:29 +02:00
parent 6dd48b5c25
commit 79cdb8cd04
9 changed files with 109 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/search/explore-page-content.tsx
+82 -38
View File
@@ -1,17 +1,18 @@
"use client";
import { useState, useEffect, useRef, useCallback } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Flame, Clock, ChefHat, Search, Sparkles, Wand2, ArrowRight, Shuffle } from "lucide-react";
import { Flame, Clock, ChefHat, Search, Sparkles, Wand2, ArrowRight, Shuffle, Users } from "lucide-react";
import { useTranslations } from "next-intl";
import type { RecipeResult as ExploreRecipeResult } from "@/app/(app)/explore/page";
import { SearchResultCard } from "@/components/recipe/search-result-card";
import { PeopleSearch } from "@/components/social/people-search";
import { FollowButton } from "@/components/social/follow-button";
const DIFFICULTY_COLORS: Record<string, string> = {
easy: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
@@ -36,6 +37,14 @@ type SearchResponse = {
offset: number;
};
type PersonResult = {
id: string;
name: string;
username: string | null;
avatarUrl: string | null;
bio: string | null;
};
type RecipeIdea = {
title: string;
description: string;
@@ -70,17 +79,15 @@ type Props = {
trending: ExploreRecipeResult[];
recent: ExploreRecipeResult[];
initialQuery: string;
initialTab: "recipes" | "people";
};
export function ExplorePageContent({ trending, recent, initialQuery, initialTab }: Props) {
export function ExplorePageContent({ trending, recent, initialQuery }: Props) {
const router = useRouter();
const searchParams = useSearchParams();
const t = useTranslations("explore");
const tCommon = useTranslations("common");
const tRecipe = useTranslations("recipe");
const [activeTab, setActiveTab] = useState<"recipes" | "people">(initialTab);
const tPeople = useTranslations("people");
const [inputValue, setInputValue] = useState(initialQuery);
const [query, setQuery] = useState(initialQuery);
@@ -92,6 +99,9 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
const [loading, setLoading] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
const [peopleResults, setPeopleResults] = useState<PersonResult[]>([]);
const [peopleLoading, setPeopleLoading] = useState(false);
const [ideasPrompt, setIdeasPrompt] = useState("");
const [ideas, setIdeas] = useState<RecipeIdea[]>([]);
const [ideasLoading, setIdeasLoading] = useState(false);
@@ -129,8 +139,27 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
[]
);
const fetchPeople = useCallback(async (q: string) => {
if (q.trim().length < 2) {
setPeopleResults([]);
return;
}
setPeopleLoading(true);
try {
const res = await fetch(`/api/v1/users/search?q=${encodeURIComponent(q.trim())}`);
if (!res.ok) return;
const data = (await res.json()) as { users: PersonResult[] };
setPeopleResults(data.users);
} finally {
setPeopleLoading(false);
}
}, []);
useEffect(() => {
if (initialQuery) fetchResults(initialQuery, "any", "", 0);
if (initialQuery) {
fetchResults(initialQuery, "any", "", 0);
fetchPeople(initialQuery);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -144,18 +173,6 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
[router, searchParams]
);
const handleTabChange = useCallback(
(value: string | null) => {
const next = value === "people" ? "people" : "recipes";
setActiveTab(next);
const params = new URLSearchParams(searchParams.toString());
if (next === "people") params.set("tab", "people");
else params.delete("tab");
router.replace(`/explore?${params}`, { scroll: false });
},
[router, searchParams]
);
const fetchIdeas = useCallback(async (prompt: string) => {
setIdeasLoading(true);
setIdeas([]);
@@ -197,6 +214,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
setQuery(value);
updateUrl(value);
fetchResults(value, difficulty, maxMins, 0);
fetchPeople(value);
}, 300);
};
@@ -206,6 +224,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
setQuery(inputValue);
updateUrl(inputValue);
fetchResults(inputValue, difficulty, maxMins, 0);
fetchPeople(inputValue);
};
const handleDifficultyChange = (value: string | null) => {
@@ -224,6 +243,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
const hasQuery = query.trim().length > 0;
const hasMore = results.length < total;
const hasNoResults = hasQuery && !loading && !peopleLoading && results.length === 0 && peopleResults.length === 0;
return (
<div className="max-w-5xl mx-auto space-y-6">
@@ -231,15 +251,8 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
<h1 className="text-3xl font-bold">{t("title")}</h1>
</div>
<Tabs value={activeTab} onValueChange={handleTabChange} className="gap-6">
<TabsList>
<TabsTrigger value="recipes">{t("tabRecipes")}</TabsTrigger>
<TabsTrigger value="people">{t("tabPeople")}</TabsTrigger>
</TabsList>
<TabsContent value="recipes">
<div className="space-y-10">
{/* Search bar */}
<div className="space-y-10">
{/* Search bar — one query finds both recipes and people */}
<div className="space-y-3">
<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" />
@@ -283,7 +296,40 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
)}
</div>
{/* Search results */}
{/* People results */}
{hasQuery && (peopleLoading || peopleResults.length > 0) && (
<section className="space-y-3">
<div className="flex items-center gap-2">
<Users className="h-4 w-4 text-muted-foreground" />
<h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{t("peopleHeading")}</h2>
</div>
{peopleLoading ? (
<p className="text-sm text-muted-foreground">{tPeople("searching")}</p>
) : (
<div className="space-y-2">
{peopleResults.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>
)}
</section>
)}
{/* Recipe search results */}
{hasQuery && loading && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{Array.from({ length: 8 }).map((_, i) => (
@@ -296,7 +342,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
</div>
)}
{hasQuery && !loading && results.length === 0 && (
{hasNoResults && (
<div className="flex flex-col items-center justify-center py-24 text-muted-foreground">
<ChefHat className="h-12 w-12 mb-4 opacity-30" />
<p className="text-lg font-medium">{t("noResultsTitle", { query })}</p>
@@ -306,6 +352,10 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
{hasQuery && !loading && results.length > 0 && (
<>
<div className="flex items-center gap-2">
<ChefHat className="h-4 w-4 text-muted-foreground" />
<h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{t("recipesHeading")}</h2>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{results.map((recipe) => (
<SearchResultCard key={recipe.id} recipe={recipe} />
@@ -469,13 +519,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
</section>
</>
)}
</div>
</TabsContent>
<TabsContent value="people">
<PeopleSearch />
</TabsContent>
</Tabs>
</div>
</div>
);
}