Arnaud
51e6722f4c
Two changes to the no-photo cover placeholder shipped last version: 1. Muted the gradient palette (100/40-opacity tints instead of solid -200/ -950 stops) — the original was too saturated next to real cover photos in the same grid, per feedback. 2. New coverIcon/coverColor columns on recipes (nullable text, migration 0048, additive-only) let the author pin a specific color+icon from the recipe editor instead of the automatic per-id pick. getRecipePlaceholder now checks these first, falling back to the deterministic hash pick when unset — existing recipes are unaffected until edited. Wired coverIcon/coverColor through every explicit-column recipe select that feeds a grid card (explore trending/recent, search, feed, for-you) — the relational-query call sites (recipes page, collections, profile pages) already return all columns and needed no changes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
88 lines
3.9 KiB
TypeScript
88 lines
3.9 KiB
TypeScript
import {
|
|
Soup, Salad, Pizza, Sandwich, IceCream, Cookie, Beef, Fish, Cherry,
|
|
Carrot, Egg, Drumstick, Croissant, Donut, Cake, ChefHat,
|
|
Coffee, Wine, Beer, GlassWater, Martini, CupSoda,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
|
|
// Muted on purpose — these sit behind a lucide icon on every photo-less card
|
|
// in a grid, so anything more saturated than "barely-there tint" overpowers
|
|
// real cover photos next to it and reads as loud rather than as a placeholder.
|
|
export const GRADIENT_OPTIONS = [
|
|
{ key: "orange-rose", classes: "from-orange-100/70 to-rose-100/70 dark:from-orange-950/40 dark:to-rose-950/40" },
|
|
{ key: "amber-lime", classes: "from-amber-100/70 to-lime-100/70 dark:from-amber-950/40 dark:to-lime-950/40" },
|
|
{ key: "sky-indigo", classes: "from-sky-100/70 to-indigo-100/70 dark:from-sky-950/40 dark:to-indigo-950/40" },
|
|
{ key: "emerald-teal", classes: "from-emerald-100/70 to-teal-100/70 dark:from-emerald-950/40 dark:to-teal-950/40" },
|
|
{ key: "fuchsia-purple", classes: "from-fuchsia-100/70 to-purple-100/70 dark:from-fuchsia-950/40 dark:to-purple-950/40" },
|
|
{ key: "yellow-orange", classes: "from-yellow-100/70 to-orange-100/70 dark:from-yellow-950/40 dark:to-orange-950/40" },
|
|
{ key: "rose-pink", classes: "from-rose-100/70 to-pink-100/70 dark:from-rose-950/40 dark:to-pink-950/40" },
|
|
{ key: "teal-cyan", classes: "from-teal-100/70 to-cyan-100/70 dark:from-teal-950/40 dark:to-cyan-950/40" },
|
|
] as const;
|
|
|
|
export const DISH_ICON_OPTIONS = [
|
|
{ key: "chef-hat", Icon: ChefHat },
|
|
{ key: "soup", Icon: Soup },
|
|
{ key: "salad", Icon: Salad },
|
|
{ key: "pizza", Icon: Pizza },
|
|
{ key: "sandwich", Icon: Sandwich },
|
|
{ key: "ice-cream", Icon: IceCream },
|
|
{ key: "cookie", Icon: Cookie },
|
|
{ key: "beef", Icon: Beef },
|
|
{ key: "fish", Icon: Fish },
|
|
{ key: "cherry", Icon: Cherry },
|
|
{ key: "carrot", Icon: Carrot },
|
|
{ key: "egg", Icon: Egg },
|
|
{ key: "drumstick", Icon: Drumstick },
|
|
{ key: "croissant", Icon: Croissant },
|
|
{ key: "donut", Icon: Donut },
|
|
{ key: "cake", Icon: Cake },
|
|
] as const;
|
|
|
|
export const DRINK_ICON_OPTIONS = [
|
|
{ key: "coffee", Icon: Coffee },
|
|
{ key: "wine", Icon: Wine },
|
|
{ key: "beer", Icon: Beer },
|
|
{ key: "glass-water", Icon: GlassWater },
|
|
{ key: "martini", Icon: Martini },
|
|
{ key: "cup-soda", Icon: CupSoda },
|
|
] as const;
|
|
|
|
export const ALL_ICON_OPTIONS: { key: string; Icon: LucideIcon }[] = [...DISH_ICON_OPTIONS, ...DRINK_ICON_OPTIONS];
|
|
|
|
const ICON_BY_KEY = new Map<string, LucideIcon>(ALL_ICON_OPTIONS.map((o) => [o.key, o.Icon]));
|
|
const GRADIENT_BY_KEY = new Map<string, string>(GRADIENT_OPTIONS.map((o) => [o.key, o.classes]));
|
|
|
|
/** Small, fast, deterministic string hash (djb2) — same recipe always gets the same placeholder. */
|
|
function hashString(s: string): number {
|
|
let hash = 5381;
|
|
for (let i = 0; i < s.length; i++) {
|
|
hash = (hash * 33) ^ s.charCodeAt(i);
|
|
}
|
|
return hash >>> 0;
|
|
}
|
|
|
|
/** Resolves a recipe's cover placeholder — user-chosen coverIcon/coverColor
|
|
* win when set and recognized, else falls back to a deterministic pick
|
|
* from the recipe id so it's still stable without a fresh hash on rename. */
|
|
export function getRecipePlaceholder(recipe: {
|
|
id: string;
|
|
recipeType?: "dish" | "drink";
|
|
coverIcon?: string | null;
|
|
coverColor?: string | null;
|
|
}): { gradient: string; Icon: LucideIcon } {
|
|
const hash = hashString(recipe.id);
|
|
const dishOrDrinkIcons = recipe.recipeType === "drink" ? DRINK_ICON_OPTIONS : DISH_ICON_OPTIONS;
|
|
|
|
const gradient =
|
|
(recipe.coverColor ? GRADIENT_BY_KEY.get(recipe.coverColor) : undefined) ??
|
|
GRADIENT_OPTIONS[hash % GRADIENT_OPTIONS.length]!.classes;
|
|
|
|
const Icon =
|
|
(recipe.coverIcon ? ICON_BY_KEY.get(recipe.coverIcon) : undefined) ??
|
|
// Different modulus base than gradient's so icon/color pairing doesn't
|
|
// repeat in lockstep across ids that happen to share a gradient.
|
|
dishOrDrinkIcons[Math.floor(hash / GRADIENT_OPTIONS.length) % dishOrDrinkIcons.length]!.Icon;
|
|
|
|
return { gradient, Icon };
|
|
}
|