From bb8e7c207e61354a74dadd3b26e737928022ca64 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 23 Apr 2026 23:05:26 +0200
Subject: [PATCH] =?UTF-8?q?feat(onboarding):=20M5=20=E2=80=94=20settings?=
 =?UTF-8?q?=20re-trigger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a "Onboarding erneut durchlaufen" row in Settings → Allgemein
that calls onboardingStatus.reset() and goto('/onboarding/name'). The
guard picks it up on next load so the user lands on Screen 1 again,
with their previous name prefilled (from authStore.user.name) and
their theme preserved (it's saved as userSettings state independently
of the onboarding flag).

Doesn't touch the /welcome page — it stays as the public landing for
pre-signup visitors. Analytics events deferred until we have a broader
funnel-tracking pass on the onboarding flow.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../settings/sections/GeneralSection.svelte   | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/apps/mana/apps/web/src/lib/components/settings/sections/GeneralSection.svelte b/apps/mana/apps/web/src/lib/components/settings/sections/GeneralSection.svelte
index 06d5feba9..2d5f22358 100644
--- a/apps/mana/apps/web/src/lib/components/settings/sections/GeneralSection.svelte
+++ b/apps/mana/apps/web/src/lib/components/settings/sections/GeneralSection.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
 	import { Gear } from '@mana/shared-icons';
 	import type { ThemeMode, WeekStartDay } from '@mana/shared-theme';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
+	import { onboardingStatus } from '$lib/stores/onboarding-status.svelte';
 	import SettingsPanel from '../SettingsPanel.svelte';
 	import SettingsSectionHeader from '../SettingsSectionHeader.svelte';
 
@@ -48,6 +50,20 @@
 	async function setSounds(enabled: boolean) {
 		await userSettings.updateGeneral({ soundsEnabled: enabled });
 	}
+
+	let restartingOnboarding = $state(false);
+
+	async function restartOnboarding() {
+		if (restartingOnboarding) return;
+		restartingOnboarding = true;
+		try {
+			await onboardingStatus.reset();
+			await goto('/onboarding/name');
+		} catch (err) {
+			console.error('[settings] restart onboarding failed:', err);
+			restartingOnboarding = false;
+		}
+	}
 </script>
 
 <SettingsPanel id="global">
@@ -141,6 +157,21 @@
 				<span class="toggle-knob"></span>
 			</button>
 		</div>
+
+		<div class="row">
+			<div class="row-info">
+				<p class="row-title">Onboarding erneut durchlaufen</p>
+				<p class="row-desc">Name, Look und Module neu wählen</p>
+			</div>
+			<button
+				type="button"
+				class="restart-btn"
+				onclick={restartOnboarding}
+				disabled={restartingOnboarding}
+			>
+				{restartingOnboarding ? 'Starte…' : 'Starten'}
+			</button>
+		</div>
 	</div>
 </SettingsPanel>
 
@@ -264,4 +295,28 @@
 	.toggle.on .toggle-knob {
 		transform: translateX(1.25rem);
 	}
+
+	.restart-btn {
+		padding: 0.375rem 0.875rem;
+		border: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-surface, var(--color-background)));
+		color: hsl(var(--color-foreground));
+		font-size: 0.8125rem;
+		font-weight: 500;
+		border-radius: 0.5rem;
+		cursor: pointer;
+		transition:
+			background 0.15s ease,
+			border-color 0.15s ease;
+	}
+
+	.restart-btn:hover:not(:disabled) {
+		background: hsl(var(--color-muted) / 0.3);
+		border-color: hsl(var(--color-primary) / 0.4);
+	}
+
+	.restart-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 </style>