Update features and dependencies

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

@@ -1,48 +1,75 @@
 import type { Metadata } from "next";
 import { headers } from "next/headers";
 import { auth } from "@/lib/auth/server";
-import { db, recipes, recipeIngredients } from "@epicure/db";
-import { eq, desc, and, ilike, or, sql } from "@epicure/db";
+import { db, recipes, sql } from "@epicure/db";
+import { eq, desc, asc, and, ilike, or } from "@epicure/db";
 import { RecipesHeader } from "@/components/recipe/recipes-header";
 import { RecipesEmptyState } from "@/components/recipe/recipes-empty-state";
 import { RecipesGrid } from "@/components/recipe/recipes-grid";
 
 export const metadata: Metadata = { title: "Recipes" };
 
-type SearchParams = Promise<{ q?: string }>;
+type SearchParams = Promise<{
+  q?: string;
+  sort?: string;
+  visibility?: string;
+  difficulty?: string;
+  tag?: string;
+}>;
+
+const SORT_MAP = {
+  updated_desc: desc(recipes.updatedAt),
+  updated_asc: asc(recipes.updatedAt),
+  created_desc: desc(recipes.createdAt),
+  created_asc: asc(recipes.createdAt),
+  title_asc: asc(recipes.title),
+  title_desc: desc(recipes.title),
+} as const;
+
+type SortKey = keyof typeof SORT_MAP;
 
 export default async function RecipesPage({ searchParams }: { searchParams: SearchParams }) {
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) return null;
 
-  const { q } = await searchParams;
-  const query = q?.trim() ?? "";
+  const { q, sort, visibility, difficulty, tag } = await searchParams;
+  const query = (q ?? "").trim().slice(0, 200);
+  const sortKey: SortKey = (sort && sort in SORT_MAP ? sort : "updated_desc") as SortKey;
+  const tagFilter = tag?.trim().slice(0, 50) || undefined;
 
-  const whereClause = query
-    ? and(
-        eq(recipes.authorId, session.user.id),
-        or(
-          ilike(recipes.title, `%${query}%`),
-          ilike(recipes.description, `%${query}%`)
-        )
-      )
-    : eq(recipes.authorId, session.user.id);
+  const visibilityFilter = visibility && ["private", "unlisted", "public"].includes(visibility)
+    ? (visibility as "private" | "unlisted" | "public")
+    : undefined;
+  const difficultyFilter = difficulty && ["easy", "medium", "hard"].includes(difficulty)
+    ? (difficulty as "easy" | "medium" | "hard")
+    : undefined;
 
   const userRecipes = await db.query.recipes.findMany({
-    where: whereClause,
-    orderBy: desc(recipes.updatedAt),
+    where: and(
+      eq(recipes.authorId, session.user.id),
+      query
+        ? or(ilike(recipes.title, `%${query}%`), ilike(recipes.description, `%${query}%`))
+        : undefined,
+      visibilityFilter ? eq(recipes.visibility, visibilityFilter) : undefined,
+      difficultyFilter ? eq(recipes.difficulty, difficultyFilter) : undefined,
+      tagFilter ? sql`${recipes.tags} @> ARRAY[${tagFilter}]::text[]` : undefined,
+    ),
+    orderBy: SORT_MAP[sortKey],
     with: { photos: true },
   });
 
-  const totalCount = query ? undefined : userRecipes.length;
-
   return (
     <div className="space-y-6">
-      <RecipesHeader count={totalCount ?? userRecipes.length} initialQuery={query} />
-
+      <RecipesHeader
+        count={userRecipes.length}
+        initialQuery={query}
+        initialSort={sortKey}
+        initialVisibility={visibilityFilter ?? ""}
+        initialDifficulty={difficultyFilter ?? ""}
+        initialTag={tagFilter ?? ""}
+      />
       <RecipesEmptyState query={query} count={userRecipes.length} />
-
-      <RecipesGrid recipes={userRecipes} />
+      <RecipesGrid key={`${query}-${sortKey}-${visibilityFilter}-${difficultyFilter}-${tagFilter}`} recipes={userRecipes} />
     </div>
   );
 }