Recipe Browser with Detail View

Problem/Feature Description

A cooking website needs two SvelteKit pages: a recipe listing page and a recipe detail page. Both pages fetch data from a REST API on the server side.

The listing page at /recipes fetches all recipes and displays them as cards. Each card has a "View" button. The page also has a search input that filters the displayed recipes client-side as the user types (reactive filtering).

The detail page at /recipes/[id] fetches a single recipe by ID. If the recipe is not found, an appropriate HTTP error should be displayed. The detail page also shows a list of related recipes from the same cuisine, derived from the loaded data.

The team uses Svelte 5 and wants all components written with the latest conventions. They specifically want the page components to receive loaded data using the modern approach, not the legacy export let data pattern. The search filtering on the listing page should use reactive derived values. The "View" button click handlers should use the modern event syntax.

The API base URL is https://jsonplaceholder.typicode.com -- use /posts for the recipe list and /posts/{id} for individual recipes (treating posts as recipes). Use /posts?userId={userId} for related recipes.

Output Specification

Produce the following files:

• src/routes/recipes/+page.server.ts -- server load function for listing
• src/routes/recipes/+page.svelte -- recipe listing with reactive search filter
• src/routes/recipes/[id]/+page.server.ts -- server load function for detail
• src/routes/recipes/[id]/+page.svelte -- recipe detail page with related recipes
• src/routes/+error.svelte -- error page

Write the source files as they would appear in a working Svelte 5 SvelteKit project.