recipes: add shared "to try" list for external recipes

Household-shared list of external recipes to try, with name, multiple
links, and optional notes. Includes add/edit/delete with confirmation.
Linked from the favorites page via a styled pill button.

src/lib/components/recipes/ToTryCard.svelte

@@ -0,0 +1,162 @@
+<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>

src/models/ToTryRecipe.ts

@@ -0,0 +1,18 @@
+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);

src/routes/[recipeLang=recipeLang]/favorites/+page.svelte

@@ -25,7 +25,8 @@
         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'
+        recipesLink: isEnglish ? 'recipe' : 'Rezept',
+        toTry: isEnglish ? 'Recipes to try' : 'Zum Ausprobieren'
     });
 
     const { filtered: filteredFavorites, handleSearchResults } = createSearchFilter(() => data.favorites);
@@ -47,6 +48,28 @@ 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>
@@ -63,6 +86,8 @@ 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}

src/routes/[recipeLang=recipeLang]/to-try/+page.server.ts

@@ -0,0 +1,27 @@
+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'
+        };
+    }
+};

src/routes/[recipeLang=recipeLang]/to-try/+page.svelte

@@ -0,0 +1,327 @@
+<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}

src/routes/api/[recipeLang=recipeLang]/to-try/+server.ts

@@ -0,0 +1,120 @@
+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');
+  }
+};