add route matcher to fix /login and /logout routes

Use SvelteKit param matcher to constrain [recipeLang] to only match
'recipes' or 'rezepte', preventing it from catching /login, /logout,
and other non-recipe routes.

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import '$lib/css/nordtheme.css';
+    import Recipes from '$lib/components/Recipes.svelte';
+    import MediaScroller from '$lib/components/MediaScroller.svelte';
+    import SeasonLayout from '$lib/components/SeasonLayout.svelte'
+    import Card from '$lib/components/Card.svelte';
+    import Search from '$lib/components/Search.svelte';
+    let { data }: { data: PageData } = $props();
+</script>
+<style>
+	a{
+		font-family: "Noto Color Emoji", emoji, sans-serif;
+		--padding: 0.5em;
+		font-size: 3rem;
+		text-decoration: none;
+		padding: var(--padding);
+		background-color: var(--nord4);
+		border-radius: 1000px;
+    		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
+		text-align: center;
+		--width: calc(1.2em + var(--padding) * 2);
+		width: var(--width);
+		line-height: calc(var(--width) - 2*var(--padding));
+		height: var(--width);
+
+
+	}
+	a:hover,
+	a:focus-visible
+	{
+		--angle: 15deg;
+		animation: shake 0.5s ease forwards;
+	}
+	.flex{
+		display:flex;
+		flex-wrap:wrap;
+		gap: 1rem;
+		max-width: 500px;
+		justify-content: center;
+		margin:4rem auto;
+	}
+
+@keyframes shake{
+    0%{
+      transform: rotate(0)
+		scale(1,1);
+    }
+    25%{
+    	box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+      	transform: rotate(var(--angle))
+      		scale(1.2,1.2)
+      ;
+    }
+    50%{
+
+    	box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+      	transform: rotate(calc(-1* var(--angle)))
+      		scale(1.2,1.2);
+    }
+    74%{
+
+    	box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+  	transform: rotate(var(--angle))
+  		scale(1.2, 1.2);
+	}
+	100%{
+      transform: rotate(0)
+      	scale(1.2,1.2);
+      box-shadow: 0em 0em 0.6em 0.3em rgba(0, 0, 0, 0.2);
+
+    }
+  }
+
+</style>
+<div class=flex>
+{#each data.icons as icon}
+	<a href="/{data.recipeLang}/icon/{icon}">{icon}</a>
+{/each}
+</div>

src/routes/[recipeLang=recipeLang]/icon/+page.ts

@@ -0,0 +1,10 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch }) {
+    let current_month = new Date().getMonth() + 1
+    const res_icons = await fetch(`/api/rezepte/items/icon`);
+    const item = await res_icons.json();
+    return {
+	    icons: item,
+    };
+};

src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.server.ts

@@ -0,0 +1,25 @@
+import type { PageServerLoad } from "./$types";
+import { getUserFavorites, addFavoriteStatusToRecipes } from "$lib/server/favorites";
+
+export const load: PageServerLoad = async ({ fetch, locals, params }) => {
+    const isEnglish = params.recipeLang === 'recipes';
+    const apiBase = isEnglish ? '/api/recipes' : '/api/rezepte';
+
+    const res_season = await fetch(`${apiBase}/items/icon/` + params.icon);
+    const res_icons = await fetch(`/api/rezepte/items/icon`); // Icons are shared across languages
+    const icons = await res_icons.json();
+    const item_season = await res_season.json();
+
+    // Get user favorites and session
+    const [userFavorites, session] = await Promise.all([
+        getUserFavorites(fetch, locals),
+        locals.auth()
+    ]);
+
+    return {
+        icons: icons,
+        icon: params.icon,
+        season: addFavoriteStatusToRecipes(item_season, userFavorites),
+        session
+    };
+};

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import Recipes from '$lib/components/Recipes.svelte';
+    import IconLayout from '$lib/components/IconLayout.svelte';
+    import MediaScroller from '$lib/components/MediaScroller.svelte';
+    import Card from '$lib/components/Card.svelte';
+    import Search from '$lib/components/Search.svelte';
+    let { data }: { data: PageData } = $props();
+    import { rand_array } from '$lib/js/randomize';
+</script>
+<IconLayout icons={data.icons} active_icon={data.icon} routePrefix="/{data.recipeLang}" lang={data.lang}>
+<Recipes slot=recipes>
+	{#each rand_array(data.season) as recipe}
+		<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+	{/each}
+</Recipes>
+</IconLayout>