recipes: replace placeholder images with OKLAB dominant color backgrounds

Instead of generating/serving 20px placeholder images with blur CSS, extract a perceptually accurate dominant color (Gaussian-weighted OKLAB average) and use it as a solid background-color while the full image loads. Removes placeholder image generation, blur CSS/JS, and placeholder directory references across upload flows, API routes, service worker, and all card/hero components. Adds admin bulk tool to backfill colors for existing recipes.
2026-02-17 18:24:25 +01:00
14 changed files with 25 additions and 762 deletions
--- a/src/lib/components/FavoriteButton.svelte
+++ b/src/lib/components/FavoriteButton.svelte
@@ -41,7 +41,6 @@
 <style>
  .favorite-button {
    all: unset;
-    font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-fast);
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -99,7 +99,6 @@ nav{
 	box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
 	height: var(--header-h);
 	padding-left: 0.5rem;
-	view-transition-name: site-header;
 }
 .nav-toggle{
 	display: none;
--- a/src/lib/components/recipes/CompactCard.svelte
+++ b/src/lib/components/recipes/CompactCard.svelte
@@ -23,11 +23,6 @@
 	const img_color = $derived(recipe.images?.[0]?.color || '');

 	const isInSeason = $derived(icon_override || recipe.season?.includes(current_month));
-
-	function activateTransitions(event) {
-		const img = event.currentTarget.querySelector('.img-wrap img');
-		if (img) img.style.viewTransitionName = `recipe-${recipe.short_name}-img`;
-	}
 </script>
 <style>
 .compact-card {
@@ -68,7 +63,6 @@
 	height: 100%;
 	object-fit: cover;
 	transition: transform 0.4s ease;
-	border-radius: var(--radius-card) var(--radius-card) 0 0;
 }
 .info {
 	position: relative;
@@ -163,9 +157,7 @@
 }
 </style>

-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="compact-card" onclick={activateTransitions}>
+<div class="compact-card">
 	<a href="{routePrefix}/{recipe.short_name}" class="card-link" aria-label={recipe.name}></a>
 	{#if showFavoriteIndicator && isFavorite}
 		<span class="favorite">❤️</span>
@@ -175,7 +167,6 @@
 			src="https://bocken.org/static/rezepte/thumb/{img_name}"
 			alt={img_alt}
 			loading={loading_strat}
-			data-recipe={recipe.short_name}
 		/>
 	</div>
 	<div class="info">
--- a/src/lib/components/recipes/TitleImgParallax.svelte
+++ b/src/lib/components/recipes/TitleImgParallax.svelte
@@ -1,11 +1,16 @@
 <script>
 	import { onMount } from "svelte";

-	let { src, color = '', alt = "", transitionName = '', children } = $props();
+	let { src, color = '', alt = "", children } = $props();

+	let isloaded = $state(false);
 	let isredirected = $state(false);

 	onMount(() => {
+		const el = document.querySelector("img")
+		if(el?.complete){
+			isloaded = true
+		}
 		fetch(src, { method: 'HEAD' })
 		  .then(response => {
 			isredirected = response.redirected
@@ -16,7 +21,9 @@
 		if(isredirected){
 			return
 		}
-		document.querySelector("#img_carousel").showModal();
+		if(document.querySelector("img").complete){
+			document.querySelector("#img_carousel").showModal();
+		}
 	}
 	function close_dialog_img(){
 		document.querySelector("#img_carousel").close();
@@ -88,6 +95,8 @@
  position: absolute;
  top: 0;
  width: min(1000px, 100dvw);
+  opacity: 0;
+  transition: var(--transition-normal);
  height: max(60dvh,600px);
  object-fit: cover;
  object-position: 50% 20%;
@@ -103,6 +112,9 @@
 :global(h1){
 	width: 100%;
 }
+.unblur.image{
+	opacity: 1;
+}

 /* DIALOG */
 dialog{
@@ -143,13 +155,13 @@ dialog button{
    <figure class="image-container">
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-    	<div class:zoom-in={!isredirected} onclick={show_dialog_img}>
+    	<div class:zoom-in={isloaded && !isredirected} onclick={show_dialog_img}>
 		<div class="image-wrap" style:background-color={color}>
-			<img class="image" {src} {alt} style:view-transition-name={transitionName || null}/>
+			<img class="image" class:unblur={isloaded} {src} onload={() => {isloaded=true}}  {alt}/>
 		</div>
 		<noscript>
 			<div class="image-wrap" style:background-color={color}>
-				<img class="image" {src} {alt}/>
+				<img class="image unblur" {src} onload={() => {isloaded=true}}  {alt}/>
 			</div>
 		</noscript>
 	</div>
@@ -158,7 +170,7 @@ dialog button{
 </section>

 <dialog id=img_carousel>
-	<img {src} {alt}>
+	<img class:unblur={isloaded} {src} {alt}>
 	<button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} onclick={close_dialog_img}>
 		<Cross fill=white width=2rem height=2rem></Cross>
 	</button>
--- a/src/lib/components/recipes/ToTryCard.svelte
+++ b/src/lib/components/recipes/ToTryCard.svelte
@@ -1,162 +0,0 @@
-<script>
-	let { item, ondelete, onedit, isEnglish = false } = $props();
-
-	function getDomain(url) {
-		try {
-			return new URL(url).hostname.replace(/^www\./, '');
-		} catch {
-			return url;
-		}
-	}
-</script>
-
-<style>
-.card {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	border-radius: var(--radius-card);
-	overflow: hidden;
-	background: var(--color-surface);
-	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
-	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
-}
-.card:hover,
-.card:focus-within {
-	transform: translateY(-5px);
-	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
-}
-.accent {
-	height: 6px;
-	background: linear-gradient(90deg, var(--nord10), var(--nord9));
-}
-.body {
-	padding: 0.8em 0.9em 0.6em;
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5em;
-}
-.name {
-	font-size: 1.1rem;
-	font-weight: 600;
-	line-height: 1.3;
-	margin: 0;
-}
-.links {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.35em;
-}
-.link-pill {
-	font-size: 0.78rem;
-	padding: 0.15rem 0.55rem;
-	border-radius: var(--radius-pill);
-	background-color: var(--nord5);
-	color: var(--nord3);
-	text-decoration: none;
-	box-shadow: var(--shadow-sm);
-	transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
-}
-.link-pill:hover,
-.link-pill:focus-visible {
-	transform: scale(1.05);
-	background-color: var(--nord8);
-	box-shadow: var(--shadow-hover);
-	color: var(--nord0);
-}
-@media (prefers-color-scheme: dark) {
-	.link-pill {
-		background-color: var(--nord0);
-		color: var(--nord4);
-	}
-	.link-pill:hover,
-	.link-pill:focus-visible {
-		background-color: var(--nord8);
-		color: var(--nord0);
-	}
-}
-.notes {
-	font-size: 0.85rem;
-	color: var(--nord3);
-	margin: 0;
-	display: -webkit-box;
-	-webkit-line-clamp: 3;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
-@media (prefers-color-scheme: dark) {
-	.notes {
-		color: var(--nord4);
-	}
-}
-.footer {
-	font-size: 0.72rem;
-	color: var(--nord3);
-	margin-top: auto;
-	padding-top: 0.3em;
-}
-@media (prefers-color-scheme: dark) {
-	.footer {
-		color: var(--nord4);
-	}
-}
-.card-btn {
-	position: absolute;
-	top: 0.5em;
-	background: var(--nord11);
-	color: white;
-	border: none;
-	border-radius: var(--radius-pill);
-	width: 1.6em;
-	height: 1.6em;
-	font-size: 0.85rem;
-	cursor: pointer;
-	display: grid;
-	place-items: center;
-	opacity: 0;
-	transition: opacity var(--transition-fast);
-	z-index: 2;
-}
-.card:hover .card-btn,
-.card:focus-within .card-btn {
-	opacity: 1;
-}
-.delete-btn {
-	right: 0.5em;
-}
-.delete-btn:hover {
-	background: var(--nord12);
-}
-.edit-btn {
-	right: 2.4em;
-	background: var(--nord10);
-}
-.edit-btn:hover {
-	background: var(--nord9);
-}
-</style>
-
-<div class="card">
-	<div class="accent"></div>
-	<button class="card-btn edit-btn" onclick={() => onedit(item)} aria-label={isEnglish ? 'Edit' : 'Bearbeiten'}>✎</button>
-	<button class="card-btn delete-btn" onclick={() => ondelete(item._id)} aria-label={isEnglish ? 'Delete' : 'Löschen'}>✕</button>
-	<div class="body">
-		<p class="name">{item.name}</p>
-		{#if item.links?.length}
-			<div class="links">
-				{#each item.links as link (link.url)}
-					<a class="link-pill g-pill" href={link.url} target="_blank" rel="noopener noreferrer">
-						{link.label || getDomain(link.url)}
-					</a>
-				{/each}
-			</div>
-		{/if}
-		{#if item.notes}
-			<p class="notes">{item.notes}</p>
-		{/if}
-		<div class="footer">
-			{isEnglish ? 'Added by' : 'Hinzugefügt von'} {item.addedBy}
-		</div>
-	</div>
-</div>
--- a/src/models/ToTryRecipe.ts
+++ b/src/models/ToTryRecipe.ts
@@ -1,18 +0,0 @@
-import mongoose from 'mongoose';
-
-const ToTryRecipeSchema = new mongoose.Schema(
-  {
-    name: { type: String, required: true, trim: true },
-    links: [
-      {
-        url: { type: String, required: true },
-        label: { type: String, default: '' }
-      }
-    ],
-    notes: { type: String, default: '' },
-    addedBy: { type: String, required: true }
-  },
-  { timestamps: true }
-);
-
-export const ToTryRecipe = mongoose.model('ToTryRecipe', ToTryRecipeSchema);
--- a/src/routes/[recipeLang=recipeLang]/+layout.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+layout.svelte
@@ -1,47 +1,7 @@
 <script>
 import '$lib/css/recipe-links.css';
 import { page } from '$app/stores';
-import { onNavigate } from '$app/navigation';
 import Header from '$lib/components/Header.svelte'
-
-onNavigate((navigation) => {
-	if (!document.startViewTransition) return;
-
-	// Only use view transitions when navigating to/from a recipe detail page
-	const toRecipe = navigation.to?.params?.name;
-	const fromRecipe = navigation.from?.params?.name;
-	if (!toRecipe && !fromRecipe) return;
-	if (fromRecipe && toRecipe) return; // recipe-to-recipe: no view transition
-
-	// Measure title block position so the slide animation covers exactly the right distance
-	const title = document.querySelector('[style*="view-transition-name: recipe-title"]');
-	if (title) {
-		const dist = window.innerHeight - title.getBoundingClientRect().top;
-		document.documentElement.style.setProperty('--title-slide', `${dist}px`);
-	}
-
-	return new Promise((resolve) => {
-		const vt = document.startViewTransition(async () => {
-			resolve();
-			await navigation.complete;
-
-			// Hide .image-wrap background so the color box doesn't show behind the morphing image
-			const wrap = document.querySelector('.image-wrap');
-			if (wrap) wrap.style.backgroundColor = 'transparent';
-
-			// Set view-transition-name on the matching CompactCard/hero image for reverse morph
-			if (fromRecipe) {
-				const card = document.querySelector(`img[data-recipe="${fromRecipe}"]`);
-				if (card) card.style.viewTransitionName = `recipe-${fromRecipe}-img`;
-			}
-		});
-		// Restore background color once transition finishes
-		vt.finished.then(() => {
-			const wrap = document.querySelector('.image-wrap');
-			if (wrap) wrap.style.backgroundColor = '';
-		});
-	});
-});
 import UserHeader from '$lib/components/UserHeader.svelte';
 import LanguageSelector from '$lib/components/LanguageSelector.svelte';
 import OfflineSyncButton from '$lib/components/OfflineSyncButton.svelte';
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -352,7 +352,6 @@
 				src="https://bocken.org/static/rezepte/full/{heroImg}"
 				alt=""
 				loading="eager"
-				data-recipe={heroRecipe.short_name}
 			/>
 			<div class="hero-overlay"></div>
 		</figure>
@@ -361,11 +360,7 @@
 			<div class="hero-text">
 				<h1>{labels.title}</h1>
 				<p class="subheading">{labels.subheading}</p>
-				<a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured"
-				onclick={() => {
-					const img = document.querySelector('.hero-img');
-					if (img) img.style.viewTransitionName = `recipe-${heroRecipe.short_name}-img`;
-				}}>
+				<a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured">
 					<span class="recipe-name"><span class="recipe-icon">{heroRecipe.icon}</span> {@html heroRecipe.name}</span>
 					<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -197 535 410"><path d="M503 31c12-13 12-33 0-46L343-175c-13-12-33-12-46 0-12 13-12 33 0 46L403-24H32C14-24 0-10 0 8s14 32 32 32h371L297 145c-12 13-12 33 0 46 13 12 33 12 46 0L503 31z"/></svg>
 				</a>
--- a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
@@ -282,20 +282,6 @@ h2{
 	margin-bottom: 0;
 }

-/* View transition: slide title block up from bottom */
-:global(::view-transition-new(recipe-title)) {
-	animation: slide-up 0.35s ease both;
-}
-:global(::view-transition-old(recipe-title)) {
-	animation: slide-down 0.25s ease both;
-}
-@keyframes slide-up {
-	from { transform: translateY(var(--title-slide, 100vh)); }
-}
-@keyframes slide-down {
-	to { transform: translateY(var(--title-slide, 100vh)); }
-}
-
 </style>
 <svelte:head>
 	<title>{data.strippedName} - {labels.title}</title>
@@ -313,8 +299,8 @@ h2{
 	<link rel="alternate" hreflang="x-default" href="https://bocken.org/rezepte/{data.germanShortName}" />
 </svelte:head>

-<TitleImgParallax src={hero_img_src} color={img_color} alt={img_alt} transitionName="recipe-{data.short_name}-img">
-	<div class=title style="view-transition-name: recipe-title">
+<TitleImgParallax src={hero_img_src} color={img_color} alt={img_alt}>
+	<div class=title>
 		{#if data.category}
 			<a class="category g-pill g-btn-dark" href='/{data.recipeLang}/category/{data.category}'>{data.category}</a>
 		{/if}
--- a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
@@ -25,8 +25,7 @@
        emptyState2: isEnglish
            ? 'Visit a recipe and click the heart icon to add it to your favorites.'
            : 'Besuche ein Rezept und klicke auf das Herz-Symbol, um es zu deinen Favoriten hinzuzufügen.',
-        recipesLink: isEnglish ? 'recipe' : 'Rezept',
-        toTry: isEnglish ? 'Recipes to try' : 'Zum Ausprobieren'
+        recipesLink: isEnglish ? 'recipe' : 'Rezept'
    });

    const { filtered: filteredFavorites, handleSearchResults } = createSearchFilter(() => data.favorites);
@@ -48,28 +47,6 @@ h1{
    margin-top: 3rem;
    color: var(--nord3);
 }
-.to-try-link{
-    text-align: center;
-    margin-bottom: 1.5em;
-}
-.to-try-link a{
-    display: inline-block;
-    padding: 0.4em 1.2em;
-    border-radius: var(--radius-pill);
-    background: var(--nord10);
-    color: var(--nord6);
-    text-decoration: none;
-    font-size: 0.95rem;
-    font-weight: 500;
-    box-shadow: var(--shadow-sm);
-    transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-.to-try-link a:hover,
-.to-try-link a:focus-visible{
-    transform: scale(1.05);
-    background: var(--nord9);
-    box-shadow: var(--shadow-hover);
-}
 </style>

 <svelte:head>
@@ -86,8 +63,6 @@ h1{
    {/if}
 </p>

-<p class="to-try-link"><a href="/{data.recipeLang}/to-try">{labels.toTry} &rarr;</a></p>
-
 <Search favoritesOnly={true} lang={data.lang} recipes={data.favorites} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>

 {#if data.error}
--- a/src/routes/[recipeLang=recipeLang]/to-try/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/to-try/+page.server.ts
@@ -1,27 +0,0 @@
-import type { PageServerLoad } from "./$types";
-import { redirect } from '@sveltejs/kit';
-import { ToTryRecipe } from '$models/ToTryRecipe';
-import { dbConnect } from '$utils/db';
-
-export const load: PageServerLoad = async ({ locals, params }) => {
-    const session = await locals.auth();
-
-    if (!session?.user?.nickname) {
-        throw redirect(302, `/${params.recipeLang}`);
-    }
-
-    await dbConnect();
-
-    try {
-        const items = await ToTryRecipe.find().sort({ createdAt: -1 }).lean();
-        return {
-            items: JSON.parse(JSON.stringify(items)),
-            session
-        };
-    } catch (e) {
-        return {
-            items: [],
-            error: 'Failed to load to-try recipes'
-        };
-    }
-};
--- a/src/routes/[recipeLang=recipeLang]/to-try/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/to-try/+page.svelte
@@ -1,327 +0,0 @@
-<script>
-	import ToTryCard from '$lib/components/recipes/ToTryCard.svelte';
-
-	let { data } = $props();
-
-	let items = $state(data.items ?? []);
-
-	const isEnglish = $derived(data.lang === 'en');
-	const labels = $derived({
-		title: isEnglish ? 'To Try' : 'Zum Ausprobieren',
-		pageTitle: isEnglish ? 'Recipes To Try - Bocken Recipes' : 'Zum Ausprobieren - Bocken Rezepte',
-		metaDescription: isEnglish
-			? 'Recipes we want to try from around the web.'
-			: 'Rezepte, die wir ausprobieren wollen.',
-		count: isEnglish
-			? `${items.length} recipe${items.length !== 1 ? 's' : ''} to try`
-			: `${items.length} Rezept${items.length !== 1 ? 'e' : ''} zum Ausprobieren`,
-		noItems: isEnglish ? 'Nothing here yet' : 'Noch nichts vorhanden',
-		emptyState: isEnglish
-			? 'Add a recipe you want to try using the form below.'
-			: 'Füge ein Rezept hinzu, das du ausprobieren möchtest.',
-		name: isEnglish ? 'Recipe name' : 'Rezeptname',
-		url: 'URL',
-		label: isEnglish ? 'Label (optional)' : 'Bezeichnung (optional)',
-		notes: isEnglish ? 'Notes (optional)' : 'Notizen (optional)',
-		addLink: isEnglish ? 'Add link' : 'Link hinzufügen',
-		save: isEnglish ? 'Save' : 'Speichern',
-		cancel: isEnglish ? 'Cancel' : 'Abbrechen',
-		add: isEnglish ? 'Add recipe to try' : 'Rezept hinzufügen',
-		editHeading: isEnglish ? 'Edit recipe' : 'Rezept bearbeiten'
-	});
-	let showForm = $state(false);
-	let saving = $state(false);
-	let editingId = $state(null);
-
-	// Form state
-	let name = $state('');
-	let links = $state([{ url: '', label: '' }]);
-	let notes = $state('');
-
-	function addLinkRow() {
-		links.push({ url: '', label: '' });
-	}
-
-	function removeLinkRow(index) {
-		links.splice(index, 1);
-	}
-
-	function resetForm() {
-		name = '';
-		links = [{ url: '', label: '' }];
-		notes = '';
-		editingId = null;
-		showForm = false;
-	}
-
-	function handleEdit(item) {
-		name = item.name;
-		links = item.links.map(l => ({ url: l.url, label: l.label || '' }));
-		notes = item.notes || '';
-		editingId = item._id;
-		showForm = true;
-	}
-
-	async function handleSave() {
-		const validLinks = links.filter(l => l.url.trim());
-		if (!name.trim() || validLinks.length === 0) return;
-
-		saving = true;
-		try {
-			if (editingId) {
-				const res = await fetch(`/api/${data.recipeLang}/to-try`, {
-					method: 'PATCH',
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify({ id: editingId, name, links: validLinks, notes })
-				});
-				if (res.ok) {
-					const updated = await res.json();
-					items = items.map(i => i._id === editingId ? updated : i);
-					resetForm();
-				}
-			} else {
-				const res = await fetch(`/api/${data.recipeLang}/to-try`, {
-					method: 'POST',
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify({ name, links: validLinks, notes })
-				});
-				if (res.ok) {
-					const created = await res.json();
-					items = [created, ...items];
-					resetForm();
-				}
-			}
-		} finally {
-			saving = false;
-		}
-	}
-
-	async function handleDelete(id) {
-		const msg = isEnglish ? 'Delete this recipe?' : 'Dieses Rezept löschen?';
-		if (!confirm(msg)) return;
-
-		const res = await fetch(`/api/${data.recipeLang}/to-try`, {
-			method: 'DELETE',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ id })
-		});
-		if (res.ok) {
-			items = items.filter(i => i._id !== id);
-			if (editingId === id) resetForm();
-		}
-	}
-</script>
-
-<style>
-h1 {
-	text-align: center;
-	margin-bottom: 0;
-	font-size: 4rem;
-}
-.subheading {
-	text-align: center;
-	margin-top: 0;
-	font-size: 1.5rem;
-}
-.empty-state {
-	text-align: center;
-	margin-top: 3rem;
-	color: var(--nord3);
-}
-.add-bar {
-	text-align: center;
-	margin-bottom: 1.5em;
-}
-.add-btn {
-	background: var(--nord10);
-	color: white;
-	border: none;
-	border-radius: var(--radius-pill);
-	padding: 0.5em 1.2em;
-	font-size: 1rem;
-	cursor: pointer;
-	transition: background var(--transition-fast);
-}
-.add-btn:hover {
-	background: var(--nord9);
-}
-.form-card {
-	max-width: 540px;
-	margin: 0 auto 2em;
-	padding: 1.2em;
-	background: var(--color-surface);
-	border-radius: var(--radius-card);
-	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
-}
-.form-card input,
-.form-card textarea {
-	width: 100%;
-	padding: 0.5em;
-	border: 1px solid var(--nord4);
-	border-radius: 6px;
-	font-size: 0.95rem;
-	font-family: inherit;
-	background: inherit;
-	color: inherit;
-	box-sizing: border-box;
-}
-@media (prefers-color-scheme: dark) {
-	.form-card input,
-	.form-card textarea {
-		border-color: var(--nord3);
-	}
-}
-.form-card textarea {
-	resize: vertical;
-	min-height: 60px;
-}
-.field {
-	margin-bottom: 0.8em;
-}
-.field label {
-	display: block;
-	font-size: 0.85rem;
-	font-weight: 600;
-	margin-bottom: 0.25em;
-}
-.link-row {
-	display: flex;
-	gap: 0.4em;
-	margin-bottom: 0.4em;
-	align-items: center;
-}
-.link-row input {
-	flex: 1;
-}
-.link-remove {
-	background: var(--nord11);
-	color: white;
-	border: none;
-	border-radius: var(--radius-pill);
-	width: 1.5em;
-	height: 1.5em;
-	font-size: 0.8rem;
-	cursor: pointer;
-	display: grid;
-	place-items: center;
-	flex-shrink: 0;
-}
-.link-add {
-	background: none;
-	border: none;
-	color: var(--nord10);
-	cursor: pointer;
-	font-size: 0.85rem;
-	padding: 0.2em 0;
-}
-.link-add:hover {
-	text-decoration: underline;
-}
-.form-actions {
-	display: flex;
-	gap: 0.6em;
-	justify-content: flex-end;
-	margin-top: 1em;
-}
-.btn-save {
-	background: var(--nord14);
-	color: var(--nord0);
-	border: none;
-	border-radius: var(--radius-pill);
-	padding: 0.45em 1.2em;
-	font-size: 0.95rem;
-	cursor: pointer;
-	transition: background var(--transition-fast);
-}
-.btn-save:hover {
-	background: var(--nord7);
-}
-.btn-save:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
-.btn-cancel {
-	background: none;
-	border: 1px solid var(--nord4);
-	border-radius: var(--radius-pill);
-	padding: 0.45em 1.2em;
-	font-size: 0.95rem;
-	cursor: pointer;
-	color: inherit;
-}
-.form-heading {
-	margin: 0 0 0.6em;
-	font-size: 1.1rem;
-}
-</style>
-
-<svelte:head>
-	<title>{labels.pageTitle}</title>
-	<meta name="description" content={labels.metaDescription} />
-</svelte:head>
-
-<h1>{labels.title}</h1>
-<p class="subheading">
-	{#if items.length > 0}
-		{labels.count}
-	{:else}
-		{labels.noItems}
-	{/if}
-</p>
-
-<div class="add-bar">
-	{#if !showForm}
-		<button class="add-btn" onclick={() => showForm = true}>+ {labels.add}</button>
-	{/if}
-</div>
-
-{#if showForm}
-	<div class="form-card">
-		{#if editingId}
-			<h2 class="form-heading">{labels.editHeading}</h2>
-		{/if}
-		<div class="field">
-			<label for="totry-name">{labels.name}</label>
-			<input id="totry-name" type="text" bind:value={name} />
-		</div>
-
-		<div class="field">
-			<!-- svelte-ignore a11y_label_has_associated_control -->
-			<label>Links</label>
-			{#each links as link, i (i)}
-				<div class="link-row">
-					<input type="url" placeholder={labels.url} bind:value={link.url} />
-					<input type="text" placeholder={labels.label} bind:value={link.label} />
-					{#if links.length > 1}
-						<button class="link-remove" onclick={() => removeLinkRow(i)} aria-label="Remove link">✕</button>
-					{/if}
-				</div>
-			{/each}
-			<button class="link-add" onclick={addLinkRow}>+ {labels.addLink}</button>
-		</div>
-
-		<div class="field">
-			<label for="totry-notes">{labels.notes}</label>
-			<textarea id="totry-notes" bind:value={notes}></textarea>
-		</div>
-
-		<div class="form-actions">
-			<button class="btn-cancel" onclick={resetForm}>{labels.cancel}</button>
-			<button class="btn-save" onclick={handleSave} disabled={saving || !name.trim() || !links.some(l => l.url.trim())}>
-				{labels.save}
-			</button>
-		</div>
-	</div>
-{/if}
-
-{#if items.length > 0}
-	<div class="recipe-grid">
-		{#each items as item (item._id)}
-			<ToTryCard {item} ondelete={handleDelete} onedit={handleEdit} {isEnglish} />
-		{/each}
-	</div>
-{:else if !showForm}
-	<div class="empty-state">
-		<p>{labels.emptyState}</p>
-	</div>
-{/if}
--- a/src/routes/api/[recipeLang=recipeLang]/to-try/+server.ts
+++ b/src/routes/api/[recipeLang=recipeLang]/to-try/+server.ts
@@ -1,120 +0,0 @@
-import { json, error, type RequestHandler } from '@sveltejs/kit';
-import { ToTryRecipe } from '$models/ToTryRecipe';
-import { dbConnect } from '$utils/db';
-
-export const GET: RequestHandler = async ({ locals }) => {
-  const session = await locals.auth();
-
-  if (!session?.user?.nickname) {
-    throw error(401, 'Authentication required');
-  }
-
-  await dbConnect();
-
-  try {
-    const items = await ToTryRecipe.find().sort({ createdAt: -1 }).lean();
-    return json(items);
-  } catch (e) {
-    throw error(500, 'Failed to fetch to-try recipes');
-  }
-};
-
-export const POST: RequestHandler = async ({ request, locals }) => {
-  const session = await locals.auth();
-
-  if (!session?.user?.nickname) {
-    throw error(401, 'Authentication required');
-  }
-
-  const { name, links, notes } = await request.json();
-
-  if (!name?.trim()) {
-    throw error(400, 'Name is required');
-  }
-
-  if (!Array.isArray(links) || links.length === 0 || !links.some((l: any) => l.url?.trim())) {
-    throw error(400, 'At least one link is required');
-  }
-
-  await dbConnect();
-
-  try {
-    const item = await ToTryRecipe.create({
-      name: name.trim(),
-      links: links.filter((l: any) => l.url?.trim()),
-      notes: notes?.trim() || '',
-      addedBy: session.user.nickname
-    });
-    return json(item, { status: 201 });
-  } catch (e) {
-    throw error(500, 'Failed to create to-try recipe');
-  }
-};
-
-export const PATCH: RequestHandler = async ({ request, locals }) => {
-  const session = await locals.auth();
-
-  if (!session?.user?.nickname) {
-    throw error(401, 'Authentication required');
-  }
-
-  const { id, name, links, notes } = await request.json();
-
-  if (!id) {
-    throw error(400, 'ID is required');
-  }
-
-  if (!name?.trim()) {
-    throw error(400, 'Name is required');
-  }
-
-  if (!Array.isArray(links) || links.length === 0 || !links.some((l: any) => l.url?.trim())) {
-    throw error(400, 'At least one link is required');
-  }
-
-  await dbConnect();
-
-  try {
-    const item = await ToTryRecipe.findByIdAndUpdate(
-      id,
-      {
-        name: name.trim(),
-        links: links.filter((l: any) => l.url?.trim()),
-        notes: notes?.trim() || ''
-      },
-      { new: true }
-    ).lean();
-
-    if (!item) {
-      throw error(404, 'Item not found');
-    }
-
-    return json(item);
-  } catch (e) {
-    if (e instanceof Error && 'status' in e) throw e;
-    throw error(500, 'Failed to update to-try recipe');
-  }
-};
-
-export const DELETE: RequestHandler = async ({ request, locals }) => {
-  const session = await locals.auth();
-
-  if (!session?.user?.nickname) {
-    throw error(401, 'Authentication required');
-  }
-
-  const { id } = await request.json();
-
-  if (!id) {
-    throw error(400, 'ID is required');
-  }
-
-  await dbConnect();
-
-  try {
-    await ToTryRecipe.findByIdAndDelete(id);
-    return json({ success: true });
-  } catch (e) {
-    throw error(500, 'Failed to delete to-try recipe');
-  }
-};
--- a/src/utils/imageProcessing.ts
+++ b/src/utils/imageProcessing.ts
@@ -56,8 +56,8 @@ export async function extractDominantColor(input: Buffer | string): Promise<stri
 	const { width, height } = info;
 	const cx = (width - 1) / 2;
 	const cy = (height - 1) / 2;
-	const sigmaX = 0.15 * width;
-	const sigmaY = 0.15 * height;
+	const sigmaX = 0.3 * width;
+	const sigmaY = 0.3 * height;

 	let wL = 0, wa = 0, wb = 0, wSum = 0;