feat: add server persistence for rosary streak

- Add RosaryStreak MongoDB model for logged-in users
- Add /api/glaube/rosary-streak GET/POST endpoints
- Sync streak to server when logged in, merge local/server data
- Auto-sync when coming back online (PWA offline support)
- Falls back to localStorage for guests

src/lib/components/StreakCounter.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+import { browser } from '$app/environment';
+import { getRosaryStreak } from '$lib/stores/rosaryStreak.svelte';
+
+interface Props {
+	user?: { nickname?: string } | null;
+}
+
+let { user = null }: Props = $props();
+
+const streak = browser ? getRosaryStreak() : null;
+
+// Sync with server when user is logged in
+$effect(() => {
+	if (browser && streak) {
+		streak.setLoggedIn(!!user?.nickname);
+	}
+});
+</script>
+
+<div class="streak-container">
+	<div class="streak-display">
+		<span class="streak-number">{streak?.length ?? 0}</span>
+		<span class="streak-label">Tage</span>
+	</div>
+	<button
+		class="streak-button"
+		onclick={() => streak?.recordPrayer()}
+		disabled={streak?.prayedToday}
+		aria-label="Gebet als gebetet markieren"
+	>
+		{#if streak?.prayedToday}
+			Heute gebetet
+		{:else}
+			Gebetet
+		{/if}
+	</button>
+</div>
+
+<style>
+.streak-container {
+	display: flex;
+	align-items: center;
+	gap: 1.5rem;
+	padding: 1rem 1.5rem;
+	background: var(--nord1);
+	border-radius: 12px;
+	width: fit-content;
+}
+
+@media (prefers-color-scheme: light) {
+	.streak-container {
+		background: var(--nord5);
+	}
+}
+
+.streak-display {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.streak-number {
+	font-size: 2.5rem;
+	font-weight: 700;
+	color: var(--nord13);
+	line-height: 1;
+}
+
+.streak-label {
+	font-size: 0.85rem;
+	color: var(--nord4);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+@media (prefers-color-scheme: light) {
+	.streak-label {
+		color: var(--nord3);
+	}
+}
+
+.streak-button {
+	padding: 0.75rem 1.5rem;
+	border: none;
+	border-radius: 8px;
+	background: var(--nord10);
+	color: white;
+	font-size: 1rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.streak-button:hover:not(:disabled) {
+	background: var(--nord9);
+	transform: translateY(-2px);
+}
+
+.streak-button:disabled {
+	background: var(--nord3);
+	cursor: default;
+	opacity: 0.7;
+}
+
+@media (prefers-color-scheme: light) {
+	.streak-button:disabled {
+		background: var(--nord4);
+	}
+}
+</style>

src/lib/stores/rosaryStreak.svelte.ts

@@ -0,0 +1,207 @@
+import { browser } from '$app/environment';
+
+const STORAGE_KEY = 'rosary_streak';
+
+interface StreakData {
+	length: number;
+	lastPrayed: string | null; // ISO date string (YYYY-MM-DD)
+}
+
+function getToday(): string {
+	return new Date().toISOString().split('T')[0];
+}
+
+function isYesterday(dateStr: string): boolean {
+	const yesterday = new Date();
+	yesterday.setDate(yesterday.getDate() - 1);
+	return dateStr === yesterday.toISOString().split('T')[0];
+}
+
+function loadFromStorage(): StreakData {
+	if (!browser) return { length: 0, lastPrayed: null };
+
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		if (stored) {
+			return JSON.parse(stored);
+		}
+	} catch {
+		// Invalid data, return default
+	}
+	return { length: 0, lastPrayed: null };
+}
+
+function saveToStorage(data: StreakData): void {
+	if (!browser) return;
+	localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+}
+
+async function fetchFromServer(): Promise<StreakData | null> {
+	try {
+		const res = await fetch('/api/glaube/rosary-streak');
+		if (res.ok) {
+			return await res.json();
+		}
+	} catch {
+		// Server unavailable, return null
+	}
+	return null;
+}
+
+async function saveToServer(data: StreakData): Promise<boolean> {
+	try {
+		const res = await fetch('/api/glaube/rosary-streak', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(data)
+		});
+		return res.ok;
+	} catch {
+		return false;
+	}
+}
+
+// Merge local and server data, preferring the more recent/higher streak
+function mergeStreakData(local: StreakData, server: StreakData | null): StreakData {
+	if (!server) return local;
+
+	// If same lastPrayed date, take the higher length
+	if (local.lastPrayed === server.lastPrayed) {
+		return local.length >= server.length ? local : server;
+	}
+
+	// Otherwise take whichever was prayed more recently
+	if (!local.lastPrayed) return server;
+	if (!server.lastPrayed) return local;
+
+	return local.lastPrayed > server.lastPrayed ? local : server;
+}
+
+class RosaryStreakStore {
+	#length = $state(0);
+	#lastPrayed = $state<string | null>(null);
+	#isLoggedIn = $state(false);
+	#initialized = false;
+	#syncing = $state(false);
+	#pendingSync = false; // Track if we have unsynced changes
+
+	constructor() {
+		if (browser) {
+			this.#init();
+			this.#setupOnlineListener();
+		}
+	}
+
+	#init() {
+		if (this.#initialized) return;
+		const data = loadFromStorage();
+		this.#length = data.length;
+		this.#lastPrayed = data.lastPrayed;
+		this.#initialized = true;
+	}
+
+	#setupOnlineListener() {
+		window.addEventListener('online', () => {
+			if (this.#isLoggedIn && this.#pendingSync) {
+				this.#syncWithServer();
+			}
+		});
+	}
+
+	get length() {
+		return this.#length;
+	}
+
+	get lastPrayed() {
+		return this.#lastPrayed;
+	}
+
+	get prayedToday(): boolean {
+		return this.#lastPrayed === getToday();
+	}
+
+	get isLoggedIn() {
+		return this.#isLoggedIn;
+	}
+
+	get syncing() {
+		return this.#syncing;
+	}
+
+	// Call this when user session is available
+	async setLoggedIn(loggedIn: boolean): Promise<void> {
+		this.#isLoggedIn = loggedIn;
+
+		if (loggedIn && browser) {
+			await this.#syncWithServer();
+		}
+	}
+
+	async #syncWithServer(): Promise<void> {
+		if (this.#syncing) return;
+		this.#syncing = true;
+
+		try {
+			const serverData = await fetchFromServer();
+			const localData: StreakData = { length: this.#length, lastPrayed: this.#lastPrayed };
+			const merged = mergeStreakData(localData, serverData);
+
+			// Update local state
+			this.#length = merged.length;
+			this.#lastPrayed = merged.lastPrayed;
+			saveToStorage(merged);
+
+			// If local had newer data, push to server
+			if (!serverData || merged.length !== serverData.length || merged.lastPrayed !== serverData.lastPrayed) {
+				const success = await saveToServer(merged);
+				this.#pendingSync = !success;
+			} else {
+				this.#pendingSync = false;
+			}
+		} catch {
+			this.#pendingSync = true;
+		} finally {
+			this.#syncing = false;
+		}
+	}
+
+	async recordPrayer(): Promise<void> {
+		const today = getToday();
+
+		// Already prayed today - no change
+		if (this.#lastPrayed === today) {
+			return;
+		}
+
+		// Determine new streak length
+		let newLength: number;
+		if (this.#lastPrayed && isYesterday(this.#lastPrayed)) {
+			// Continuing streak from yesterday
+			newLength = this.#length + 1;
+		} else {
+			// Starting new streak (either first time or gap > 1 day)
+			newLength = 1;
+		}
+
+		this.#length = newLength;
+		this.#lastPrayed = today;
+
+		const data: StreakData = { length: newLength, lastPrayed: today };
+		saveToStorage(data);
+
+		// Sync to server if logged in
+		if (this.#isLoggedIn) {
+			const success = await saveToServer(data);
+			this.#pendingSync = !success;
+		}
+	}
+}
+
+let instance: RosaryStreakStore | null = null;
+
+export function getRosaryStreak(): RosaryStreakStore {
+	if (!instance) {
+		instance = new RosaryStreakStore();
+	}
+	return instance;
+}

src/models/RosaryStreak.ts

@@ -0,0 +1,12 @@
+import mongoose from 'mongoose';
+
+const RosaryStreakSchema = new mongoose.Schema(
+  {
+    username: { type: String, required: true, unique: true },
+    length: { type: Number, required: true, default: 0 },
+    lastPrayed: { type: String, default: null } // ISO date string (YYYY-MM-DD)
+  },
+  { timestamps: true }
+);
+
+export const RosaryStreak = mongoose.models.RosaryStreak || mongoose.model("RosaryStreak", RosaryStreakSchema);

src/routes/api/glaube/rosary-streak/+server.ts

@@ -0,0 +1,61 @@
+import { json, error, type RequestHandler } from '@sveltejs/kit';
+import { RosaryStreak } from '../../../../models/RosaryStreak';
+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 streak = await RosaryStreak.findOne({
+      username: session.user.nickname
+    }).lean();
+
+    return json({
+      length: streak?.length ?? 0,
+      lastPrayed: streak?.lastPrayed ?? null
+    });
+  } catch (e) {
+    throw error(500, 'Failed to fetch rosary streak');
+  }
+};
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+  const session = await locals.auth();
+
+  if (!session?.user?.nickname) {
+    throw error(401, 'Authentication required');
+  }
+
+  const { length, lastPrayed } = await request.json();
+
+  if (typeof length !== 'number' || length < 0) {
+    throw error(400, 'Valid streak length required');
+  }
+
+  if (lastPrayed !== null && typeof lastPrayed !== 'string') {
+    throw error(400, 'Invalid lastPrayed format');
+  }
+
+  await dbConnect();
+
+  try {
+    const updated = await RosaryStreak.findOneAndUpdate(
+      { username: session.user.nickname },
+      { length, lastPrayed },
+      { upsert: true, new: true }
+    ).lean();
+
+    return json({
+      length: updated.length,
+      lastPrayed: updated.lastPrayed
+    });
+  } catch (e) {
+    throw error(500, 'Failed to update rosary streak');
+  }
+};

src/routes/glaube/rosenkranz/+page.svelte

@@ -16,6 +16,7 @@ import CounterButton from "$lib/components/CounterButton.svelte";
 import BibleModal from "$lib/components/BibleModal.svelte";
 import Toggle from "$lib/components/Toggle.svelte";
 import LanguageToggle from "$lib/components/LanguageToggle.svelte";
+import StreakCounter from "$lib/components/StreakCounter.svelte";
 
 let { data } = $props();
 
@@ -888,14 +889,29 @@ h1 {
 	margin-bottom: 2rem;
 }
 
+/* Controls row: toggles + streak counter */
+.controls-row {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1.5rem;
+	margin: 0 auto 2rem auto;
+}
+
+@media (min-width: 700px) {
+	.controls-row {
+		flex-direction: row;
+		justify-content: center;
+		gap: 3rem;
+	}
+}
+
 /* Toggle controls container */
 .toggle-controls {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 0.5rem;
-	max-width: fit-content;
-	margin: 0 auto 2rem auto;
 }
 
 /* Mystery selector grid */
@@ -1208,17 +1224,21 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
 		{/if}
 	</div>
 
-	<!-- Toggle Controls -->
+	<!-- Toggle Controls & Streak Counter -->
-	<div class="toggle-controls">
+	<div class="controls-row">
-		<!-- Luminous Mysteries Toggle -->
+		<div class="toggle-controls">
-		<Toggle
+			<!-- Luminous Mysteries Toggle -->
-			bind:checked={includeLuminous}
+			<Toggle
-			label="Lichtreiche Geheimnisse einbeziehen"
+				bind:checked={includeLuminous}
-			on:change={handleToggleChange}
+				label="Lichtreiche Geheimnisse einbeziehen"
-		/>
+				on:change={handleToggleChange}
+			/>
 
-		<!-- Language Toggle -->
+			<!-- Language Toggle -->
-		<LanguageToggle />
+			<LanguageToggle />
+		</div>
+
+		<StreakCounter user={data.session?.user} />
 	</div>
 
 	<div class="rosary-layout">