feat(onboarding): M5 — settings re-trigger

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>
This commit is contained in:
Till JS 2026-04-23 23:05:26 +02:00
parent aa7909076c
commit bb8e7c207e

View file

@ -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>