From a8b0d3c722dc0002f091b4648313b1d0327f4ef2 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 23 Apr 2026 16:05:19 +0200
Subject: [PATCH] style(recipes): swap heart emoji for lucide icon

Replaces heart/black-heart emoji on the favorite button and the
card favorite indicators with the lucide Heart icon. Favorited
state uses a vivid #ff2d55 fill with layered drop-shadows so the
mark reads against colorful recipe photos; unfavorited button
shows an outlined white heart.
---
 package.json                                  |  2 +-
 src/lib/components/FavoriteButton.svelte      | 24 +++++++++++++------
 src/lib/components/recipes/Card.svelte        | 16 +++++++++----
 src/lib/components/recipes/CompactCard.svelte | 13 ++++++----
 4 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 91c888d4..c5eeb96f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.46.27",
+	"version": "1.46.28",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/FavoriteButton.svelte b/src/lib/components/FavoriteButton.svelte
index c43f7df1..0f9eace2 100644
--- a/src/lib/components/FavoriteButton.svelte
+++ b/src/lib/components/FavoriteButton.svelte
@@ -2,6 +2,7 @@
   import { browser } from '$app/environment';
   import { enhance } from '$app/forms';
   import { page } from '$app/stores';
+  import Heart from '@lucide/svelte/icons/heart';
 
   let { recipeId, isFavorite = $bindable(false), isLoggedIn = false } = $props<{ recipeId: string, isFavorite?: boolean, isLoggedIn?: boolean }>();
 
@@ -44,21 +45,28 @@
 <style>
   .favorite-button {
     all: unset;
-    font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
-    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
     transition: var(--transition-fast);
-    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+    filter:
+      drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6))
+      drop-shadow(0 0 3px rgba(0, 0, 0, 0.45));
     position: absolute;
     bottom: 0.5em;
     right: 0.5em;
+    color: white;
   }
-  
+  .favorite-button.is-favorite {
+    color: #ff2d55;
+  }
+
   .favorite-button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
-  
+
   .favorite-button:hover,
   .favorite-button:focus-visible {
     transform: scale(1.2);
@@ -69,14 +77,16 @@
   <form method="post" action="?/toggleFavorite" style="display: inline;" use:enhance>
     <input type="hidden" name="recipeId" value={recipeId} />
     <input type="hidden" name="isFavorite" value={isFavorite} />
-    <button 
+    <button
       type="submit"
       class="favorite-button"
+      class:is-favorite={isFavorite}
       disabled={isLoading}
       onclick={toggleFavorite}
+      aria-label={isFavorite ? 'Favorit entfernen' : 'Als Favorit speichern'}
       title={isFavorite ? 'Favorit entfernen' : 'Als Favorit speichern'}
     >
-      {isFavorite ? '❤️' : '🖤'}
+      <Heart size={24} strokeWidth={2} fill={isFavorite ? 'currentColor' : 'none'} />
     </button>
   </form>
 {/if}
\ No newline at end of file
diff --git a/src/lib/components/recipes/Card.svelte b/src/lib/components/recipes/Card.svelte
index eeea5cd8..60bd7bf0 100644
--- a/src/lib/components/recipes/Card.svelte
+++ b/src/lib/components/recipes/Card.svelte
@@ -2,6 +2,7 @@
 import "$lib/css/shake.css";
 import "$lib/css/icon.css";
 import { onMount } from "svelte";
+import Heart from '@lucide/svelte/icons/heart';
 
 let {
 	recipe,
@@ -182,10 +183,13 @@ function preloadHeroImage() {
 
 .favorite-indicator{
 	position: absolute;
-	font-size: 2rem;
-	top: 0.1em;
-	left: 0.1em;
-	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
+	top: 0.4em;
+	left: 0.4em;
+	display: flex;
+	color: #ff2d55;
+	filter:
+		drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7))
+		drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
 }
 
 .translation-badge{
@@ -240,7 +244,9 @@ function preloadHeroImage() {
 		<img class="image" class:loaded={isloaded} src={'https://bocken.org/static/rezepte/thumb/' + img_name} loading={loading_strat} alt="{img_alt}" onload={() => isloaded=true}/>
 	</div>
 	{#if showFavoriteIndicator && isFavorite}
-		<div class="favorite-indicator">❤️</div>
+		<div class="favorite-indicator" aria-label="Favorit">
+			<Heart size={28} strokeWidth={2} fill="currentColor" />
+		</div>
 	{/if}
 	{#if translationStatus !== undefined}
 		<div class="translation-badge {translationStatus || 'none'}">
diff --git a/src/lib/components/recipes/CompactCard.svelte b/src/lib/components/recipes/CompactCard.svelte
index 7dd5ae90..21e49934 100644
--- a/src/lib/components/recipes/CompactCard.svelte
+++ b/src/lib/components/recipes/CompactCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import "$lib/css/shake.css";
+	import Heart from '@lucide/svelte/icons/heart';
 
 	let {
 		recipe,
@@ -143,9 +144,11 @@
 	position: absolute;
 	top: 0.5em;
 	left: 0.5em;
-	font-size: 1.1rem;
-	font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
-	filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
+	display: flex;
+	color: #ff2d55;
+	filter:
+		drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7))
+		drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
 	z-index: 2;
 	pointer-events: none;
 }
@@ -156,7 +159,9 @@
 <div class="compact-card" onclick={activateTransitions}>
 	<a href="{routePrefix}/{recipe.short_name}" class="card-link" aria-label={recipe.name}></a>
 	{#if showFavoriteIndicator && isFavorite}
-		<span class="favorite">❤️</span>
+		<span class="favorite" aria-label="Favorit">
+			<Heart size={18} strokeWidth={2} fill="currentColor" />
+		</span>
 	{/if}
 	<div class="img-wrap" style:background-color={img_color}>
 		<img