feat(recipes): add RecipeCard component with compact/full image variants

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

frontend/src/lib/recipes/RecipeCard.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	type RecipeSummary = {
+		id: string;
+		name: string;
+		cookTimeMin?: number;
+		effort?: string;
+		heroImageUrl?: string;
+	};
+
+	let { recipe, compact = false }: { recipe: RecipeSummary; compact?: boolean } = $props();
+
+	let metadata = $derived(
+		[
+			recipe.cookTimeMin != null ? `${recipe.cookTimeMin} Min` : null,
+			recipe.effort ?? null
+		]
+			.filter(Boolean)
+			.join(' · ')
+	);
+</script>
+
+<a
+	href="/recipes/{recipe.id}"
+	class="block rounded-[var(--radius-md)] overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] hover:shadow-[var(--shadow-card)]"
+>
+	<div
+		data-testid="image-area"
+		class="w-full overflow-hidden {compact ? 'h-[64px]' : 'h-[100px]'}"
+	>
+		{#if recipe.heroImageUrl}
+			<img src={recipe.heroImageUrl} alt={recipe.name} class="w-full h-full object-cover" />
+		{:else}
+			<div
+				data-testid="image-placeholder"
+				class="w-full h-full bg-[var(--color-border)] flex items-center justify-center"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+					class="text-[var(--color-text-muted)] opacity-50"
+				>
+					<!-- plate -->
+					<circle cx="12" cy="13" r="6" />
+					<path d="M12 7V5" />
+					<!-- fork tines -->
+					<path d="M8 3v3c0 1.1.9 2 2 2h4" />
+				</svg>
+			</div>
+		{/if}
+	</div>
+
+	<div class="px-2 py-1.5">
+		<p class="font-medium text-[13px] text-[var(--color-text)] truncate">{recipe.name}</p>
+		{#if metadata}
+			<p class="text-[11px] text-[var(--color-text-muted)]">{metadata}</p>
+		{/if}
+	</div>
+</a>