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/app/(app)/u/[username]/page.tsx

@@ -24,6 +24,7 @@ import { FollowButton } from "@/components/social/follow-button";
 import { BlockButton } from "@/components/social/block-button";
 import { MessageButton } from "@/components/social/message-button";
 import { getPublicUrl } from "@/lib/storage";
+import { RecipeCoverPlaceholder } from "@/components/recipe/recipe-cover-placeholder";
 import { ProfileTabs, type HistoryData, type PhotosData } from "@/components/profile/profile-tabs";
 
 const PAGE_SIZE = 24;
@@ -247,9 +248,7 @@ export default async function UserProfilePage({ params, searchParams }: Params)
                       className="object-cover group-hover:scale-105 transition-transform duration-200"
                     />
                   ) : (
-                    <div className="w-full h-full flex items-center justify-center text-muted-foreground text-3xl">
-                      🍽️
-                    </div>
+                    <RecipeCoverPlaceholder recipe={recipe} />
                   )}
                 </div>
                 <div className="p-2">