faith: progressive enhancement for all faith pages without JS

- Rosary: mystery selection, luminous toggle, and latin toggle fall back
  to URL params (?mystery=, ?luminous=, ?latin=) for no-JS navigation
- Prayers/Angelus: latin toggle uses URL param fallback
- Search on prayers page hidden without JS (requires DOM queries)
- Toggle component supports href prop for link-based no-JS self-submit
- LanguageSelector uses <a> links with computed paths and :focus-within
  dropdown for no-JS; displays correct language via server-provided prop
- Recipe language links use translated slugs from $page.data
- URL params cleaned via replaceState after hydration to avoid clutter

src/routes/[faithLang=faithLang]/+layout.svelte

@@ -33,11 +33,11 @@ function isActive(path) {
 	{/snippet}
 
 	{#snippet language_selector_mobile()}
-		<LanguageSelector />
+		<LanguageSelector lang={data.lang} />
 	{/snippet}
 
 	{#snippet language_selector_desktop()}
-		<LanguageSelector />
+		<LanguageSelector lang={data.lang} />
 	{/snippet}
 
 	{#snippet right_side()}

src/routes/[faithLang=faithLang]/[prayers=prayersLang]/+page.server.ts

@@ -0,0 +1,12 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+  const latinParam = url.searchParams.get('latin');
+  const hasUrlLatin = latinParam !== null;
+  const initialLatin = hasUrlLatin ? latinParam !== '0' : true;
+
+  return {
+    initialLatin,
+    hasUrlLatin
+  };
+};

src/routes/[faithLang=faithLang]/[prayers=prayersLang]/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { createLanguageContext } from "$lib/contexts/languageContext.js";
 	import "$lib/css/christ.css";
@@ -22,7 +23,7 @@
 	let { data } = $props();
 
 	// Create language context for prayer components
-	const langContext = createLanguageContext({ urlLang: data.lang });
+	const langContext = createLanguageContext({ urlLang: data.lang, initialLatin: data.initialLatin });
 
 	// Update lang store when data.lang changes (e.g., after navigation)
 	$effect(() => {
@@ -57,9 +58,19 @@
 		textMatch: isEnglish ? 'Match in prayer text' : 'Treffer im Gebetstext'
 	});
 
-	// Search state
+	// JS-only search (hidden without JS)
+	let jsEnabled = $state(false);
 	let searchQuery = $state('');
 
+	onMount(() => {
+		jsEnabled = true;
+
+		// Clean up URL params after hydration (state is now in component state)
+		if (window.location.search) {
+			history.replaceState({}, '', window.location.pathname);
+		}
+	});
+
 	// Match results: 'primary' (name/terms), 'secondary' (text only), or null (no match)
 	/** @type {Map<string, 'primary' | 'secondary'>} */
 	let matchResults = $state(/** @type {Map<string, 'primary' | 'secondary'>} */ (new Map()));
@@ -165,6 +176,7 @@
 
 	// Helper to get match class for a prayer
 	function getMatchClass(id) {
+		if (!jsEnabled) return '';
 		const match = matchResults.get(id);
 		if (!searchQuery.trim()) return '';
 		if (match === 'primary') return '';
@@ -202,6 +214,9 @@
 		joseph: { bilingue: false },
 		confiteor: { bilingue: true }
 	};
+
+	// Toggle href for no-JS fallback (navigates to opposite latin state)
+	const latinToggleHref = $derived(data.initialLatin ? '?latin=0' : '?');
 </script>
 
 <svelte:head>
@@ -264,18 +279,33 @@ h1{
 		color: var(--nord0);
 	}
 }
+
+/* Search is hidden without JS */
+.js-only {
+	display: none;
+}
+.js-enabled .js-only {
+	display: block;
+}
 </style>
+<div class:js-enabled={jsEnabled}>
 <h1>{labels.title}</h1>
 
 <div class="toggle-controls">
-	<LanguageToggle />
+	<LanguageToggle
+		initialLatin={data.initialLatin}
+		hasUrlLatin={data.hasUrlLatin}
+		href={latinToggleHref}
+	/>
 </div>
 
-<SearchInput
-	bind:value={searchQuery}
-	placeholder={labels.searchPlaceholder}
-	clearTitle={labels.clearSearch}
-/>
+<div class="js-only">
+	<SearchInput
+		bind:value={searchQuery}
+		placeholder={labels.searchPlaceholder}
+		clearTitle={labels.clearSearch}
+	/>
+</div>
 
 <div class="ccontainer">
 <div class=container>
@@ -317,3 +347,4 @@ h1{
 {/each}
 </div>
 </div>
+</div>

src/routes/[faithLang=faithLang]/[prayers=prayersLang]/[prayer]/+page.server.ts

@@ -17,12 +17,18 @@ const validSlugs = new Set([
 	'das-confiteor', 'the-confiteor'
 ]);
 
-export const load: PageServerLoad = async ({ params }) => {
+export const load: PageServerLoad = async ({ params, url }) => {
 	if (!validSlugs.has(params.prayer)) {
 		throw error(404, 'Prayer not found');
 	}
 
+	const latinParam = url.searchParams.get('latin');
+	const hasUrlLatin = latinParam !== null;
+	const initialLatin = hasUrlLatin ? latinParam !== '0' : true;
+
 	return {
-		prayer: params.prayer
+		prayer: params.prayer,
+		initialLatin,
+		hasUrlLatin
 	};
 };

src/routes/[faithLang=faithLang]/[prayers=prayersLang]/[prayer]/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { onMount } from 'svelte';
 	import { createLanguageContext } from "$lib/contexts/languageContext.js";
 	import "$lib/css/christ.css";
 	import "$lib/css/nordtheme.css";
@@ -18,7 +19,7 @@
 
 	let { data } = $props();
 
-	const langContext = createLanguageContext({ urlLang: data.lang });
+	const langContext = createLanguageContext({ urlLang: data.lang, initialLatin: data.initialLatin });
 
 	$effect(() => {
 		langContext.lang.set(data.lang);
@@ -59,6 +60,16 @@
 	const gloriaIntro = $derived(isEnglish
 		? 'This ancient hymn begins with the words the angels used to celebrate the newborn Savior. It first praises God the Father, then God the Son; it concludes with homage to the Most Holy Trinity, during which one makes the sign of the cross.'
 		: 'Der uralte Gesang beginnt mit den Worten, mit denen die Engelscharen den neugeborenen Welterlöser feierten. Er preist zunächst Gott Vater, dann Gott Sohn; er schliesst mit einer Huldigung an die Heiligste Dreifaltigkeit, wobei man sich mit dem grossen Kreuze bezeichnet.');
+
+	// Toggle href for no-JS fallback (navigates to opposite latin state)
+	const latinToggleHref = $derived(data.initialLatin ? '?latin=0' : '?');
+
+	onMount(() => {
+		// Clean up URL params after hydration (state is now in component state)
+		if (window.location.search) {
+			history.replaceState({}, '', window.location.pathname);
+		}
+	});
 </script>
 
 <svelte:head>
@@ -121,7 +132,11 @@ h1 {
 	<h1>{prayerName}</h1>
 
 	<div class="toggle-controls">
-		<LanguageToggle />
+		<LanguageToggle
+			initialLatin={data.initialLatin}
+			hasUrlLatin={data.hasUrlLatin}
+			href={latinToggleHref}
+		/>
 	</div>
 
 	<div class="gebet-wrapper">

src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.server.ts

@@ -6,9 +6,62 @@ interface StreakData {
   lastPrayed: string | null;
 }
 
-export const load: PageServerLoad = async ({ fetch, locals }) => {
+const validMysteries = ['freudenreich', 'schmerzhaften', 'glorreichen', 'lichtreichen'] as const;
+
+function getMysteryForWeekday(date: Date, includeLuminous: boolean): string {
+  const dayOfWeek = date.getDay();
+
+  if (includeLuminous) {
+    const schedule: Record<number, string> = {
+      0: 'glorreichen',
+      1: 'freudenreich',
+      2: 'schmerzhaften',
+      3: 'glorreichen',
+      4: 'lichtreichen',
+      5: 'schmerzhaften',
+      6: 'freudenreich'
+    };
+    return schedule[dayOfWeek];
+  } else {
+    const schedule: Record<number, string> = {
+      0: 'glorreichen',
+      1: 'freudenreich',
+      2: 'schmerzhaften',
+      3: 'glorreichen',
+      4: 'freudenreich',
+      5: 'schmerzhaften',
+      6: 'glorreichen'
+    };
+    return schedule[dayOfWeek];
+  }
+}
+
+export const load: PageServerLoad = async ({ url, fetch, locals }) => {
   const session = await locals.auth();
 
+  // Read toggle/mystery state from URL search params (for no-JS progressive enhancement)
+  const luminousParam = url.searchParams.get('luminous');
+  const latinParam = url.searchParams.get('latin');
+  const mysteryParam = url.searchParams.get('mystery');
+
+  const hasUrlLuminous = luminousParam !== null;
+  const hasUrlLatin = latinParam !== null;
+  const hasUrlMystery = mysteryParam !== null;
+
+  const initialLuminous = hasUrlLuminous ? luminousParam !== '0' : true;
+  const initialLatin = hasUrlLatin ? latinParam !== '0' : true;
+
+  const todaysMystery = getMysteryForWeekday(new Date(), initialLuminous);
+
+  let initialMystery = (validMysteries as readonly string[]).includes(mysteryParam ?? '')
+    ? mysteryParam!
+    : todaysMystery;
+
+  // If luminous is off and luminous mystery was selected, fall back
+  if (!initialLuminous && initialMystery === 'lichtreichen') {
+    initialMystery = todaysMystery;
+  }
+
   // Fetch streak data for logged-in users via API route
   let streakData: StreakData | null = null;
   if (session?.user?.nickname) {
@@ -24,6 +77,13 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
 
   return {
     mysteryDescriptions: mysteryVerseData,
-    streakData
+    streakData,
+    initialMystery,
+    todaysMystery,
+    initialLuminous,
+    initialLatin,
+    hasUrlMystery,
+    hasUrlLuminous,
+    hasUrlLatin
   };
 };

src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte

@@ -180,14 +180,14 @@ const mysteryTitlesEnglish = {
 	]
 };
 
-// Toggle for including Luminous mysteries
-let includeLuminous = $state(true);
+// Toggle for including Luminous mysteries (initialized from URL param or default)
+let includeLuminous = $state(data.initialLuminous);
 
 // Flag to prevent saving before we've loaded from localStorage
 let hasLoadedFromStorage = false;
 
 // Create language context for prayer components (LanguageToggle will use this)
-const langContext = createLanguageContext({ urlLang: data.lang });
+const langContext = createLanguageContext({ urlLang: data.lang, initialLatin: data.initialLatin });
 
 // Update lang store when data.lang changes (e.g., after navigation)
 $effect(() => {
@@ -268,10 +268,9 @@ function getMysteryForWeekday(date, includeLuminous) {
 	}
 }
 
-// Determine which mystery to use based on current weekday
-const initialMystery = getMysteryForWeekday(new Date(), true); // Use literal true to avoid capturing reactive state
-let selectedMystery = $state(initialMystery);
-let todaysMystery = $state(initialMystery); // Track today's auto-selected mystery
+// Use server-computed initial values (supports no-JS via URL params)
+let selectedMystery = $state(data.initialMystery);
+let todaysMystery = $state(data.todaysMystery);
 
 // Derive these values from selectedMystery so they update automatically
 let currentMysteries = $derived(mysteries[selectedMystery]);
@@ -285,6 +284,23 @@ function selectMystery(mysteryType) {
 	selectedMystery = mysteryType;
 }
 
+// Build URLs preserving full state (for no-JS fallback)
+function buildHref({ mystery = selectedMystery, luminous = includeLuminous, latin = data.initialLatin } = {}) {
+	const params = new URLSearchParams();
+	params.set('mystery', mystery);
+	if (!luminous) params.set('luminous', '0');
+	if (!latin) params.set('latin', '0');
+	return `?${params.toString()}`;
+}
+
+function mysteryHref(mystery) {
+	return buildHref({ mystery });
+}
+
+// Toggle hrefs navigate to opposite state (for no-JS self-submit)
+let luminousToggleHref = $derived(buildHref({ luminous: !includeLuminous }));
+let latinToggleHref = $derived(buildHref({ latin: !data.initialLatin }));
+
 // When luminous toggle changes, update today's mystery and fix invalid selection
 $effect(() => {
 	todaysMystery = getMysteryForWeekday(new Date(), includeLuminous);
@@ -385,16 +401,24 @@ for (let d = 1; d < 5; d++) {
 const pos = sectionPositions;
 
 onMount(() => {
-	// Load toggle state from localStorage
-	const savedIncludeLuminous = localStorage.getItem('rosary_includeLuminous');
-
-	if (savedIncludeLuminous !== null) {
-		includeLuminous = savedIncludeLuminous === 'true';
+	// Load toggle state from localStorage only if not overridden by URL params
+	if (!data.hasUrlLuminous) {
+		const savedIncludeLuminous = localStorage.getItem('rosary_includeLuminous');
+		if (savedIncludeLuminous !== null) {
+			includeLuminous = savedIncludeLuminous === 'true';
+		}
 	}
 
-	// Recalculate mystery based on loaded includeLuminous value
-	todaysMystery = getMysteryForWeekday(new Date(), includeLuminous);
-	selectMystery(todaysMystery);
+	// If no mystery was specified in URL, recompute based on loaded preferences
+	if (!data.hasUrlMystery) {
+		todaysMystery = getMysteryForWeekday(new Date(), includeLuminous);
+		selectMystery(todaysMystery);
+	}
+
+	// Clean up URL params after hydration (state is now in component state)
+	if (window.location.search) {
+		history.replaceState({}, '', window.location.pathname);
+	}
 
 	// Now allow saving to localStorage
 	hasLoadedFromStorage = true;
@@ -1095,6 +1119,8 @@ h1 {
 	align-items: center;
 	gap: 1rem;
 	position: relative;
+	text-decoration: none;
+	color: inherit;
 }
 
 @media(prefers-color-scheme: light) {
@@ -1266,49 +1292,53 @@ h1 {
 
 
 	<h2 style="text-align:center;">{labels.mysteries}</h2>
-	<!-- Mystery Selector -->
+	<!-- Mystery Selector (links for no-JS, enhanced with onclick for JS) -->
 	<div class="mystery-selector" class:four-mysteries={includeLuminous}>
-		<button
+		<a
 			class="mystery-button"
 			class:selected={selectedMystery === 'freudenreich'}
-			onclick={() => selectMystery('freudenreich')}
+			href={mysteryHref('freudenreich')}
+			onclick={(e) => { e.preventDefault(); selectMystery('freudenreich'); }}
 		>
 			{#if todaysMystery === 'freudenreich'}
 				<span class="today-badge">{labels.today}</span>
 			{/if}
 				<MysteryIcon type="joyful" />
 			<h3>{labels.joyful}</h3>
-		</button>
+		</a>
 
-		<button
+		<a
 			class="mystery-button"
 			class:selected={selectedMystery === 'schmerzhaften'}
-			onclick={() => selectMystery('schmerzhaften')}
+			href={mysteryHref('schmerzhaften')}
+			onclick={(e) => { e.preventDefault(); selectMystery('schmerzhaften'); }}
 		>
 			{#if todaysMystery === 'schmerzhaften'}
 				<span class="today-badge">{labels.today}</span>
 			{/if}
 			<MysteryIcon type="sorrowful" />
 			<h3>{labels.sorrowful}</h3>
-		</button>
+		</a>
 
-		<button
+		<a
 			class="mystery-button"
 			class:selected={selectedMystery === 'glorreichen'}
-			onclick={() => selectMystery('glorreichen')}
+			href={mysteryHref('glorreichen')}
+			onclick={(e) => { e.preventDefault(); selectMystery('glorreichen'); }}
 		>
 			{#if todaysMystery === 'glorreichen'}
 				<span class="today-badge">{labels.today}</span>
 			{/if}
 		<MysteryIcon type="glorious" />
 			<h3>{labels.glorious}</h3>
-		</button>
+		</a>
 
 		{#if includeLuminous}
-		<button
+		<a
 			class="mystery-button"
 			class:selected={selectedMystery === 'lichtreichen'}
-			onclick={() => selectMystery('lichtreichen')}
+			href={mysteryHref('lichtreichen')}
+			onclick={(e) => { e.preventDefault(); selectMystery('lichtreichen'); }}
 		>
 			{#if todaysMystery === 'lichtreichen'}
 				<span class="today-badge">{labels.today}</span>
@@ -1316,7 +1346,7 @@ h1 {
 					<MysteryIcon type="luminous" />
 
 			<h3>{labels.luminous}</h3>
-		</button>
+		</a>
 		{/if}
 	</div>
 
@@ -1324,14 +1354,19 @@ h1 {
 	<div class="controls-row">
 		<StreakCounter streakData={data.streakData} lang={data.lang} />
 		<div class="toggle-controls">
-			<!-- Luminous Mysteries Toggle -->
+			<!-- Luminous Mysteries Toggle (link for no-JS, enhanced with onclick for JS) -->
 			<Toggle
 				bind:checked={includeLuminous}
 				label={labels.includeLuminous}
+				href={luminousToggleHref}
 			/>
 
-			<!-- Language Toggle -->
-			<LanguageToggle />
+			<!-- Language Toggle (link for no-JS, enhanced with onclick for JS) -->
+			<LanguageToggle
+				initialLatin={data.initialLatin}
+				hasUrlLatin={data.hasUrlLatin}
+				href={latinToggleHref}
+			/>
 		</div>
 	</div>
 

src/routes/[faithLang=faithLang]/angelus/+page.server.ts

@@ -0,0 +1,12 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+  const latinParam = url.searchParams.get('latin');
+  const hasUrlLatin = latinParam !== null;
+  const initialLatin = hasUrlLatin ? latinParam !== '0' : true;
+
+  return {
+    initialLatin,
+    hasUrlLatin
+  };
+};

src/routes/[faithLang=faithLang]/angelus/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { onMount } from 'svelte';
 	import { createLanguageContext } from "$lib/contexts/languageContext.js";
 	import LanguageToggle from "$lib/components/LanguageToggle.svelte";
 	import Prayer from '$lib/components/prayers/Prayer.svelte';
@@ -9,12 +10,22 @@
 	let { data } = $props();
 
 	// Create language context for prayer components
-	const langContext = createLanguageContext({ urlLang: data.lang });
+	const langContext = createLanguageContext({ urlLang: data.lang, initialLatin: data.initialLatin });
+
+	// Toggle href for no-JS fallback (navigates to opposite latin state)
+	const latinToggleHref = $derived(data.initialLatin ? '?latin=0' : '?');
 
 	// Update lang store when data.lang changes (e.g., after navigation)
 	$effect(() => {
 		langContext.lang.set(data.lang);
 	});
+
+	onMount(() => {
+		// Clean up URL params after hydration (state is now in component state)
+		if (window.location.search) {
+			history.replaceState({}, '', window.location.pathname);
+		}
+	});
 </script>
 
 <svelte:head>
@@ -25,7 +36,11 @@
 <div class="angelus-page">
 	<h1>Angelus</h1>
 	<div class="toggle-controls">
-	<LanguageToggle />
+	<LanguageToggle
+		initialLatin={data.initialLatin}
+		hasUrlLatin={data.hasUrlLatin}
+		href={latinToggleHref}
+	/>
 	</div>
 
 <div class="prayers-content">