fix: varied gradient+icon placeholders for recipes without a cover photo (v0.50.2)

Replaces the single flat emoji-on-muted-bg fallback (same 🍽️/🍹 everywhere)
with a deterministic gradient + food/drink icon per recipe id — pulled from
a small curated palette/icon pool via a string hash, so it's stable across
re-renders but visually varied across a grid of photo-less recipes.

New shared lib/recipe-placeholder.ts + components/recipe/recipe-cover-
placeholder.tsx, applied everywhere the old inline emoji fallback lived:
recipe-grid-card.tsx, recipe-card.tsx, recipes-grid.tsx, and the public
profile page's recipe grid.

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

apps/web/components/recipe/recipe-card.tsx

@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
 import { Clock, Users, Lock, Globe, Link2, ExternalLink, UserCheck } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
+import { RecipeCoverPlaceholder } from "@/components/recipe/recipe-cover-placeholder";
 import { getPublicUrl } from "@/lib/storage";
 
 type Recipe = {
@@ -57,9 +58,7 @@ export function RecipeCard({ recipe }: { recipe: Recipe }) {
             />
           </div>
         ) : (
-          <div className="aspect-video bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center text-4xl">
-            {recipe.recipeType === "drink" ? "🍹" : "🍽️"}
-          </div>
+          <RecipeCoverPlaceholder recipe={recipe} className="aspect-video" iconClassName="h-12 w-12" />
         )}
         <CardHeader className="pb-2">
           <h3 className="font-semibold leading-tight line-clamp-2 group-hover:text-primary transition-colors">