feat(apps): add missing help, feedback, profile, themes, auth pages for cross-app consistency

New pages created:
- Help: citycorners, matrix (with i18n help content)
- Feedback: citycorners, matrix, photos, planta, questions
- Profile: citycorners, mukke, photos, planta, questions, todo, zitare
- Themes: citycorners, photos, planta, questions, zitare
- Forgot-password: citycorners
- Reset-password: citycorners, picture, storage

PillNavigation updated in all 18 layouts:
- helpHref, profileHref, themesHref, feedbackHref consistently set
- Dependencies added (shared-profile-ui, shared-theme-ui, shared-feedback-ui)

All 17 standard apps now have: help, feedback, profile, themes, settings,
forgot-password, reset-password, offline pages. Matrix excluded for profile/themes/auth
(uses own Matrix protocol auth).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/calendar/apps/web/src/routes/(app)/+layout.svelte

@@ -495,6 +495,8 @@
 					settingsHref="/settings"
 					manaHref="/mana"
 					profileHref="/profile"
+					themesHref="/themes"
+					helpHref="/help"
 					allAppsHref="/apps"
 					onOpenInPanel={handleOpenInPanel}
 					ariaLabel="Hauptnavigation"

apps/chat/apps/web/src/routes/(protected)/+layout.svelte

@@ -202,6 +202,8 @@
 			settingsHref="/settings"
 			manaHref="/mana"
 			profileHref="/profile"
+			themesHref="/themes"
+			helpHref="/help"
 			allAppsHref="/apps"
 		/>
 

apps/citycorners/apps/web/package.json

@@ -35,11 +35,17 @@
 		"@manacore/shared-auth-ui": "workspace:*",
 		"@manacore/shared-branding": "workspace:*",
 		"@manacore/shared-error-tracking": "workspace:*",
+		"@manacore/shared-feedback-service": "workspace:*",
+		"@manacore/shared-feedback-ui": "workspace:*",
+		"@manacore/shared-help-types": "workspace:*",
+		"@manacore/shared-help-ui": "workspace:*",
 		"@manacore/shared-i18n": "workspace:*",
 		"@manacore/shared-icons": "workspace:*",
+		"@manacore/shared-profile-ui": "workspace:*",
 		"@manacore/shared-stores": "workspace:*",
 		"@manacore/shared-tailwind": "workspace:*",
 		"@manacore/shared-theme": "workspace:*",
+		"@manacore/shared-theme-ui": "workspace:*",
 		"@manacore/shared-ui": "workspace:*",
 		"leaflet": "^1.9.4",
 		"leaflet.markercluster": "^1.5.3",

apps/citycorners/apps/web/src/lib/stores/auth.svelte.ts

@@ -215,6 +215,27 @@ export const authStore = {
 		}
 	},
 
+	/**
+	 * Reset password with token (from reset email link)
+	 */
+	async resetPasswordWithToken(token: string, newPassword: string) {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.resetPassword(token, newPassword);
+			if (!result.success) {
+				return { success: false, error: result.error || 'Failed to reset password' };
+			}
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	async getAccessToken() {
 		const authService = getAuthService();
 		if (!authService) return null;

apps/citycorners/apps/web/src/routes/(app)/+layout.svelte

@@ -190,6 +190,9 @@
 			{appItems}
 			{userEmail}
 			settingsHref="/settings"
+			themesHref="/themes"
+			helpHref="/help"
+			profileHref="/profile"
 		/>
 	{/if}
 

apps/citycorners/apps/web/src/routes/(app)/feedback/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { FeedbackPage } from '@manacore/shared-feedback-ui';
+	import { createFeedbackService } from '@manacore/shared-feedback-service';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
+
+	function getAuthUrl(): string {
+		if (browser && typeof window !== 'undefined') {
+			const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
+				.__PUBLIC_MANA_CORE_AUTH_URL__;
+			return injectedUrl || 'http://localhost:3001';
+		}
+		return 'http://localhost:3001';
+	}
+
+	const feedbackService = createFeedbackService({
+		appId: 'citycorners',
+		apiUrl: getAuthUrl(),
+		getAuthToken: () => authStore.getValidToken(),
+	});
+</script>
+
+<FeedbackPage {feedbackService} appName="CityCorners" currentUserId={authStore.user?.id} />

apps/citycorners/apps/web/src/routes/(app)/help/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { locale } from 'svelte-i18n';
+	import { HelpPage, getHelpTranslations } from '@manacore/shared-help-ui';
+	import { getCityCornersHelpContent } from '$lib/content/help/index.js';
+
+	const content = $derived(getCityCornersHelpContent($locale ?? 'de'));
+	const translations = $derived(
+		getHelpTranslations($locale ?? 'de', {
+			subtitle:
+				$locale === 'de'
+					? 'Finde Antworten und lerne CityCorners kennen'
+					: 'Find answers and learn how to use CityCorners',
+		})
+	);
+</script>
+
+<svelte:head>
+	<title>{translations.title} | CityCorners</title>
+</svelte:head>
+
+<HelpPage
+	{content}
+	appName="CityCorners"
+	appId="citycorners"
+	{translations}
+	showBackButton
+	onBack={() => goto('/')}
+	showGettingStarted={false}
+	showChangelog={false}
+	defaultSection="faq"
+/>

apps/citycorners/apps/web/src/routes/(app)/profile/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { ProfilePage } from '@manacore/shared-profile-ui';
+	import { authStore } from '$lib/stores/auth.svelte';
+</script>
+
+<ProfilePage user={authStore.user} appName="CityCorners" />

apps/citycorners/apps/web/src/routes/(app)/themes/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { ThemePage } from '@manacore/shared-theme-ui';
+	import { theme } from '$lib/stores/theme.svelte';
+</script>
+
+<svelte:head>
+	<title>Themes | CityCorners</title>
+</svelte:head>
+
+<ThemePage
+	currentVariant={theme.variant}
+	onSelectTheme={(v) => theme.setVariant(v)}
+	showModeSelector={true}
+	currentMode={theme.mode}
+	onModeChange={(m) => theme.setMode(m)}
+	showBackButton={true}
+	onBack={() => goto('/')}
+/>

apps/citycorners/apps/web/src/routes/(auth)/forgot-password/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { locale } from 'svelte-i18n';
+	import { ForgotPasswordPage } from '@manacore/shared-auth-ui';
+	import { getForgotPasswordTranslations } from '@manacore/shared-i18n';
+	import { CitycornersLogo } from '@manacore/shared-branding';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
+
+	// Get translations based on current locale
+	const translations = $derived(getForgotPasswordTranslations($locale || 'de'));
+
+	async function handleForgotPassword(email: string) {
+		return authStore.resetPassword(email);
+	}
+</script>
+
+<svelte:head>
+	<title>{translations.titleForm} - CityCorners</title>
+</svelte:head>
+
+<ForgotPasswordPage
+	appName="CityCorners"
+	logo={CitycornersLogo}
+	primaryColor="#2563eb"
+	onForgotPassword={handleForgotPassword}
+	{goto}
+	loginPath="/login"
+	lightBackground="#eff6ff"
+	darkBackground="#1e1b4b"
+	{translations}
+/>

apps/citycorners/apps/web/src/routes/(auth)/reset-password/+page.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { CitycornersLogo } from '@manacore/shared-branding';
+	import { authStore } from '$lib/stores/auth.svelte';
+
+	let loading = $state(false);
+	let hasToken = $state(false);
+	let token = $state<string | null>(null);
+	let password = $state('');
+	let confirmPassword = $state('');
+	let error = $state<string | null>(null);
+	let success = $state(false);
+
+	onMount(() => {
+		token = $page.url.searchParams.get('token');
+		hasToken = !!token;
+	});
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		error = null;
+
+		if (!token) {
+			error = 'Invalid or missing token';
+			return;
+		}
+		if (password !== confirmPassword) {
+			error = 'Passwords do not match';
+			return;
+		}
+		if (password.length < 8) {
+			error = 'Password must be at least 8 characters';
+			return;
+		}
+
+		loading = true;
+		try {
+			const result = await authStore.resetPasswordWithToken(token, password);
+			if (!result.success) {
+				error = result.error || 'Failed to reset password';
+			} else {
+				success = true;
+				setTimeout(() => goto('/login'), 3000);
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'An error occurred';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Reset Password - CityCorners</title>
+</svelte:head>
+
+<div
+	class="flex min-h-screen flex-col bg-gradient-to-b from-blue-100 to-white dark:from-slate-900 dark:to-slate-800"
+>
+	<header class="flex items-center justify-between p-4">
+		<a href="/" class="flex items-center gap-2">
+			<CitycornersLogo class="h-8 w-8" />
+			<span class="text-xl font-semibold" style="color: #2563eb">CityCorners</span>
+		</a>
+	</header>
+
+	<main class="flex flex-1 items-center justify-center p-4">
+		<div class="w-full max-w-md">
+			<div class="text-center mb-8">
+				<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Reset Password</h1>
+				<p class="mt-2 text-gray-600 dark:text-gray-400">
+					{#if success}Password reset successfully
+					{:else if hasToken}Enter your new password
+					{:else}Invalid or missing token{/if}
+				</p>
+			</div>
+
+			{#if success}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<div class="text-center">
+						<div class="mb-4 text-6xl">&#x2705;</div>
+						<p class="mb-6 text-gray-600 dark:text-gray-400">
+							Your password has been reset successfully. You will be redirected to the login page
+							shortly.
+						</p>
+						<a
+							href="/login"
+							class="inline-block rounded-lg px-6 py-3 font-medium text-white transition-colors"
+							style="background-color: #2563eb"
+						>
+							Go to login
+						</a>
+					</div>
+				</div>
+			{:else if hasToken}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<form onsubmit={handleSubmit}>
+						{#if error}
+							<div
+								class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400"
+							>
+								{error}
+							</div>
+						{/if}
+						<div class="space-y-4">
+							<div>
+								<label
+									for="password"
+									class="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100"
+									>New Password</label
+								>
+								<input
+									type="password"
+									id="password"
+									autocomplete="new-password"
+									placeholder="Enter new password"
+									required
+									minlength={8}
+									bind:value={password}
+									class="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:outline-none focus:ring-2 dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-400"
+									style="--tw-ring-color: #2563eb80; border-color: #2563eb"
+								/>
+								<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">At least 8 characters</p>
+							</div>
+							<div>
+								<label
+									for="confirmPassword"
+									class="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100"
+									>Confirm Password</label
+								>
+								<input
+									type="password"
+									id="confirmPassword"
+									autocomplete="new-password"
+									placeholder="Confirm password"
+									required
+									minlength={8}
+									bind:value={confirmPassword}
+									class="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:outline-none focus:ring-2 dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-400"
+								/>
+							</div>
+							<button
+								type="submit"
+								disabled={loading}
+								class="w-full rounded-lg px-4 py-3 font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+								style="background-color: #2563eb"
+							>
+								{loading ? 'Updating password...' : 'Update Password'}
+							</button>
+						</div>
+					</form>
+				</div>
+			{:else}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<div class="text-center">
+						<div class="mb-4 text-6xl">&#x26A0;&#xFE0F;</div>
+						<p class="mb-6 text-gray-600 dark:text-gray-400">
+							This password reset link is invalid or has expired.
+						</p>
+						<a
+							href="/forgot-password"
+							class="inline-block rounded-lg px-6 py-3 font-medium text-white transition-colors"
+							style="background-color: #2563eb"
+						>
+							Request a new link
+						</a>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</main>
+</div>

apps/clock/apps/web/src/routes/(app)/+layout.svelte

@@ -290,6 +290,8 @@
 			settingsHref="/settings"
 			manaHref="/mana"
 			profileHref="/profile"
+			themesHref="/themes"
+			helpHref="/help"
 			allAppsHref="/apps"
 		/>
 

apps/contacts/apps/web/src/routes/(app)/+layout.svelte

@@ -325,6 +325,8 @@
 					settingsHref="/settings"
 					manaHref="/mana"
 					profileHref="/profile"
+					themesHref="/themes"
+					helpHref="/help"
 					allAppsHref="/apps"
 					onOpenInPanel={handleOpenInPanel}
 					ariaLabel="Hauptnavigation"

apps/context/apps/web/src/routes/(app)/+layout.svelte

@@ -249,6 +249,8 @@
 		settingsHref="/settings"
 		manaHref="/mana"
 		profileHref="/profile"
+		themesHref="/themes"
+		helpHref="/help"
 		allAppsHref="/apps"
 	/>
 

apps/manacore/apps/web/src/routes/(app)/+layout.svelte

@@ -256,6 +256,8 @@
 			settingsHref="/settings"
 			manaHref="/mana"
 			profileHref="/profile"
+			themesHref="/themes"
+			helpHref="/help"
 			allAppsHref="/apps"
 		/>
 

apps/manadeck/apps/web/src/routes/(app)/+layout.svelte

@@ -224,6 +224,8 @@
 			settingsHref="/settings"
 			manaHref="/mana"
 			profileHref="/profile"
+			themesHref="/themes"
+			helpHref="/help"
 			allAppsHref="/apps"
 		/>
 

apps/matrix/apps/web/package.json

@@ -41,6 +41,10 @@
 		"@manacore/shared-auth": "workspace:*",
 		"@manacore/shared-branding": "workspace:*",
 		"@manacore/shared-error-tracking": "workspace:*",
+		"@manacore/shared-feedback-service": "workspace:*",
+		"@manacore/shared-feedback-ui": "workspace:*",
+		"@manacore/shared-help-types": "workspace:*",
+		"@manacore/shared-help-ui": "workspace:*",
 		"@manacore/shared-i18n": "workspace:*",
 		"@manacore/shared-icons": "workspace:*",
 		"@manacore/shared-tailwind": "workspace:*",

apps/matrix/apps/web/src/routes/(app)/+layout.svelte

@@ -417,6 +417,7 @@
 				{appItems}
 				{userEmail}
 				settingsHref="/settings"
+				helpHref="/help"
 				allAppsHref="https://mana.how"
 			/>
 		{/if}

apps/matrix/apps/web/src/routes/(app)/feedback/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { FeedbackPage } from '@manacore/shared-feedback-ui';
+	import { createFeedbackService } from '@manacore/shared-feedback-service';
+	import { matrixStore } from '$lib/matrix';
+
+	function getAuthUrl(): string {
+		if (browser && typeof window !== 'undefined') {
+			const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
+				.__PUBLIC_MANA_CORE_AUTH_URL__;
+			return injectedUrl || 'http://localhost:3001';
+		}
+		return 'http://localhost:3001';
+	}
+
+	const feedbackService = createFeedbackService({
+		appId: 'matrix',
+		apiUrl: getAuthUrl(),
+	});
+</script>
+
+<FeedbackPage
+	{feedbackService}
+	appName="Manalink"
+	currentUserId={matrixStore.userId || undefined}
+/>

apps/matrix/apps/web/src/routes/(app)/help/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { locale } from 'svelte-i18n';
+	import { HelpPage, getHelpTranslations } from '@manacore/shared-help-ui';
+	import { getManalinkHelpContent } from '$lib/content/help/index.js';
+
+	const content = $derived(getManalinkHelpContent($locale ?? 'de'));
+	const translations = $derived(
+		getHelpTranslations($locale ?? 'de', {
+			subtitle:
+				$locale === 'de'
+					? 'Finde Antworten und lerne Manalink kennen'
+					: 'Find answers and learn how to use Manalink',
+		})
+	);
+</script>
+
+<svelte:head>
+	<title>{translations.title} | Manalink</title>
+</svelte:head>
+
+<HelpPage
+	{content}
+	appName="Manalink"
+	appId="matrix"
+	{translations}
+	showBackButton
+	onBack={() => goto('/')}
+	showGettingStarted={false}
+	showChangelog={false}
+	defaultSection="faq"
+/>

apps/mukke/apps/web/package.json

@@ -47,6 +47,7 @@
 		"@manacore/shared-help-types": "workspace:*",
 		"@manacore/shared-help-ui": "workspace:*",
 		"@manacore/shared-icons": "workspace:*",
+		"@manacore/shared-profile-ui": "workspace:*",
 		"@manacore/shared-splitscreen": "workspace:^",
 		"@manacore/shared-stores": "workspace:*",
 		"@manacore/shared-tailwind": "workspace:*",

apps/mukke/apps/web/src/routes/(app)/+layout.svelte

@@ -204,6 +204,9 @@
 				{appItems}
 				{userEmail}
 				settingsHref="/settings"
+				themesHref="/themes"
+				helpHref="/help"
+				profileHref="/profile"
 				onOpenInPanel={handleOpenInPanel}
 				ariaLabel="Main navigation"
 			/>

apps/mukke/apps/web/src/routes/(app)/profile/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { ProfilePage } from '@manacore/shared-profile-ui';
+	import { authStore } from '$lib/stores/auth.svelte';
+</script>
+
+<ProfilePage user={authStore.user} appName="Mukke" />

apps/photos/apps/web/src/routes/(app)/+layout.svelte

@@ -106,6 +106,9 @@
 			primaryColor="#8b5cf6"
 			{userEmail}
 			settingsHref="/settings"
+			themesHref="/themes"
+			helpHref="/help"
+			profileHref="/profile"
 		/>
 
 		<!-- Quick Input Bar -->

apps/photos/apps/web/src/routes/(app)/feedback/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { FeedbackPage } from '@manacore/shared-feedback-ui';
+	import { createFeedbackService } from '@manacore/shared-feedback-service';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
+
+	function getAuthUrl(): string {
+		if (browser && typeof window !== 'undefined') {
+			const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
+				.__PUBLIC_MANA_CORE_AUTH_URL__;
+			return injectedUrl || 'http://localhost:3001';
+		}
+		return 'http://localhost:3001';
+	}
+
+	const feedbackService = createFeedbackService({
+		appId: 'photos',
+		apiUrl: getAuthUrl(),
+		getAuthToken: () => authStore.getValidToken(),
+	});
+</script>
+
+<FeedbackPage {feedbackService} appName="Photos" currentUserId={authStore.user?.id} />

apps/photos/apps/web/src/routes/(app)/profile/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { ProfilePage } from '@manacore/shared-profile-ui';
+	import { authStore } from '$lib/stores/auth.svelte';
+</script>
+
+<ProfilePage user={authStore.user} appName="Photos" />

apps/photos/apps/web/src/routes/(app)/themes/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { ThemePage } from '@manacore/shared-theme-ui';
+	import { theme } from '$lib/stores/theme';
+</script>
+
+<svelte:head>
+	<title>Themes | Photos</title>
+</svelte:head>
+
+<ThemePage
+	currentVariant={theme.variant}
+	onSelectTheme={(v) => theme.setVariant(v)}
+	showModeSelector={true}
+	currentMode={theme.mode}
+	onModeChange={(m) => theme.setMode(m)}
+	showBackButton={true}
+	onBack={() => goto('/')}
+/>

apps/picture/apps/web/src/routes/app/+layout.svelte

@@ -257,6 +257,9 @@
 				settingsHref="/app/settings"
 				manaHref="/app/mana"
 				profileHref="/app/profile"
+				themesHref="/app/themes"
+				helpHref="/app/help"
+				feedbackHref="/app/feedback"
 				allAppsHref="/app/apps"
 			/>
 		{/if}

apps/picture/apps/web/src/routes/auth/reset-password/+page.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import PictureLogo from '$lib/components/branding/PictureLogo.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
+
+	let loading = $state(false);
+	let hasToken = $state(false);
+	let token = $state<string | null>(null);
+	let password = $state('');
+	let confirmPassword = $state('');
+	let error = $state<string | null>(null);
+	let success = $state(false);
+
+	onMount(() => {
+		token = $page.url.searchParams.get('token');
+		hasToken = !!token;
+	});
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		error = null;
+
+		if (!token) {
+			error = 'Invalid or missing token';
+			return;
+		}
+		if (password !== confirmPassword) {
+			error = 'Passwords do not match';
+			return;
+		}
+		if (password.length < 8) {
+			error = 'Password must be at least 8 characters';
+			return;
+		}
+
+		loading = true;
+		try {
+			const result = await authStore.resetPasswordWithToken(token, password);
+			if (!result.success) {
+				error = result.error || 'Failed to reset password';
+			} else {
+				success = true;
+				setTimeout(() => goto('/auth/login'), 3000);
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'An error occurred';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Reset Password - Picture</title>
+</svelte:head>
+
+<div
+	class="flex min-h-screen flex-col bg-gradient-to-b from-blue-100 to-white dark:from-slate-900 dark:to-slate-800"
+>
+	<header class="flex items-center justify-between p-4">
+		<a href="/" class="flex items-center gap-2">
+			<PictureLogo class="h-8 w-8" />
+			<span class="text-xl font-semibold" style="color: #3b82f6">Picture</span>
+		</a>
+	</header>
+
+	<main class="flex flex-1 items-center justify-center p-4">
+		<div class="w-full max-w-md">
+			<div class="text-center mb-8">
+				<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Reset Password</h1>
+				<p class="mt-2 text-gray-600 dark:text-gray-400">
+					{#if success}Password reset successfully
+					{:else if hasToken}Enter your new password
+					{:else}Invalid or missing token{/if}
+				</p>
+			</div>
+
+			{#if success}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<div class="text-center">
+						<div class="mb-4 text-6xl">&#x2705;</div>
+						<p class="mb-6 text-gray-600 dark:text-gray-400">
+							Your password has been reset successfully. You will be redirected to the login page
+							shortly.
+						</p>
+						<a
+							href="/auth/login"
+							class="inline-block rounded-lg px-6 py-3 font-medium text-white transition-colors"
+							style="background-color: #3b82f6"
+						>
+							Go to login
+						</a>
+					</div>
+				</div>
+			{:else if hasToken}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<form onsubmit={handleSubmit}>
+						{#if error}
+							<div
+								class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400"
+							>
+								{error}
+							</div>
+						{/if}
+						<div class="space-y-4">
+							<div>
+								<label
+									for="password"
+									class="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100"
+									>New Password</label
+								>
+								<input
+									type="password"
+									id="password"
+									autocomplete="new-password"
+									placeholder="Enter new password"
+									required
+									minlength={8}
+									bind:value={password}
+									class="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:outline-none focus:ring-2 dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-400"
+									style="--tw-ring-color: #3b82f680; border-color: #3b82f6"
+								/>
+								<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">At least 8 characters</p>
+							</div>
+							<div>
+								<label
+									for="confirmPassword"
+									class="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100"
+									>Confirm Password</label
+								>
+								<input
+									type="password"
+									id="confirmPassword"
+									autocomplete="new-password"
+									placeholder="Confirm password"
+									required
+									minlength={8}
+									bind:value={confirmPassword}
+									class="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:outline-none focus:ring-2 dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-400"
+								/>
+							</div>
+							<button
+								type="submit"
+								disabled={loading}
+								class="w-full rounded-lg px-4 py-3 font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+								style="background-color: #3b82f6"
+							>
+								{loading ? 'Updating password...' : 'Update Password'}
+							</button>
+						</div>
+					</form>
+				</div>
+			{:else}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<div class="text-center">
+						<div class="mb-4 text-6xl">&#x26A0;&#xFE0F;</div>
+						<p class="mb-6 text-gray-600 dark:text-gray-400">
+							This password reset link is invalid or has expired.
+						</p>
+						<a
+							href="/auth/forgot-password"
+							class="inline-block rounded-lg px-6 py-3 font-medium text-white transition-colors"
+							style="background-color: #3b82f6"
+						>
+							Request a new link
+						</a>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</main>
+</div>

apps/planta/apps/web/package.json

@@ -36,9 +36,12 @@
 		"@manacore/shared-branding": "workspace:*",
 		"@manacore/shared-error-tracking": "workspace:*",
 		"@manacore/shared-i18n": "workspace:*",
+		"@manacore/shared-feedback-service": "workspace:*",
+		"@manacore/shared-feedback-ui": "workspace:*",
 		"@manacore/shared-help-types": "workspace:*",
 		"@manacore/shared-help-ui": "workspace:*",
 		"@manacore/shared-icons": "workspace:*",
+		"@manacore/shared-profile-ui": "workspace:*",
 		"@manacore/shared-tailwind": "workspace:*",
 		"@manacore/shared-theme": "workspace:*",
 		"@manacore/shared-theme-ui": "workspace:*",

apps/planta/apps/web/src/routes/(app)/+layout.svelte

@@ -96,6 +96,10 @@
 			onLogout={handleLogout}
 			loginHref="/login"
 			primaryColor="#10b981"
+			settingsHref="/settings"
+			themesHref="/themes"
+			helpHref="/help"
+			profileHref="/profile"
 		/>
 
 		<!-- Quick Input Bar -->

apps/planta/apps/web/src/routes/(app)/feedback/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { FeedbackPage } from '@manacore/shared-feedback-ui';
+	import { createFeedbackService } from '@manacore/shared-feedback-service';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
+
+	function getAuthUrl(): string {
+		if (browser && typeof window !== 'undefined') {
+			const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
+				.__PUBLIC_MANA_CORE_AUTH_URL__;
+			return injectedUrl || 'http://localhost:3001';
+		}
+		return 'http://localhost:3001';
+	}
+
+	const feedbackService = createFeedbackService({
+		appId: 'planta',
+		apiUrl: getAuthUrl(),
+		getAuthToken: () => authStore.getValidToken(),
+	});
+</script>
+
+<FeedbackPage {feedbackService} appName="Planta" currentUserId={authStore.user?.id} />

apps/planta/apps/web/src/routes/(app)/profile/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { ProfilePage } from '@manacore/shared-profile-ui';
+	import { authStore } from '$lib/stores/auth.svelte';
+</script>
+
+<ProfilePage user={authStore.user} appName="Planta" />

apps/planta/apps/web/src/routes/(app)/themes/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { ThemePage } from '@manacore/shared-theme-ui';
+	import { theme } from '$lib/stores/theme';
+</script>
+
+<svelte:head>
+	<title>Themes | Planta</title>
+</svelte:head>
+
+<ThemePage
+	currentVariant={theme.variant}
+	onSelectTheme={(v) => theme.setVariant(v)}
+	showModeSelector={true}
+	currentMode={theme.mode}
+	onModeChange={(m) => theme.setMode(m)}
+	showBackButton={true}
+	onBack={() => goto('/')}
+/>

apps/presi/apps/web/src/routes/(app)/+layout.svelte

@@ -184,6 +184,8 @@
 			settingsHref="/settings"
 			manaHref="/mana"
 			profileHref="/profile"
+			themesHref="/themes"
+			helpHref="/help"
 			allAppsHref="/apps"
 		/>
 

apps/questions/apps/web/package.json

@@ -40,9 +40,12 @@
 		"@manacore/shared-branding": "workspace:*",
 		"@manacore/shared-error-tracking": "workspace:*",
 		"@manacore/shared-i18n": "workspace:*",
+		"@manacore/shared-feedback-service": "workspace:*",
+		"@manacore/shared-feedback-ui": "workspace:*",
 		"@manacore/shared-help-types": "workspace:*",
 		"@manacore/shared-help-ui": "workspace:*",
 		"@manacore/shared-icons": "workspace:*",
+		"@manacore/shared-profile-ui": "workspace:*",
 		"@manacore/shared-app-onboarding": "workspace:*",
 		"@manacore/shared-tailwind": "workspace:*",
 		"@manacore/shared-theme": "workspace:*",

apps/questions/apps/web/src/routes/(app)/+layout.svelte

@@ -204,6 +204,9 @@
 		{appItems}
 		{userEmail}
 		settingsHref="/settings"
+		themesHref="/themes"
+		helpHref="/help"
+		profileHref="/profile"
 	/>
 
 	<!-- Quick Input Bar -->

apps/questions/apps/web/src/routes/(app)/feedback/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { FeedbackPage } from '@manacore/shared-feedback-ui';
+	import { createFeedbackService } from '@manacore/shared-feedback-service';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
+
+	function getAuthUrl(): string {
+		if (browser && typeof window !== 'undefined') {
+			const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
+				.__PUBLIC_MANA_CORE_AUTH_URL__;
+			return injectedUrl || 'http://localhost:3001';
+		}
+		return 'http://localhost:3001';
+	}
+
+	const feedbackService = createFeedbackService({
+		appId: 'questions',
+		apiUrl: getAuthUrl(),
+		getAuthToken: () => authStore.getValidToken(),
+	});
+</script>
+
+<FeedbackPage {feedbackService} appName="Questions" currentUserId={authStore.user?.id} />

apps/questions/apps/web/src/routes/(app)/profile/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { ProfilePage } from '@manacore/shared-profile-ui';
+	import { authStore } from '$lib/stores/auth.svelte';
+</script>
+
+<ProfilePage user={authStore.user} appName="Questions" />

apps/questions/apps/web/src/routes/(app)/themes/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { ThemePage } from '@manacore/shared-theme-ui';
+	import { theme } from '$lib/stores/theme';
+</script>
+
+<svelte:head>
+	<title>Themes | Questions</title>
+</svelte:head>
+
+<ThemePage
+	currentVariant={theme.variant}
+	onSelectTheme={(v) => theme.setVariant(v)}
+	showModeSelector={true}
+	currentMode={theme.mode}
+	onModeChange={(m) => theme.setMode(m)}
+	showBackButton={true}
+	onBack={() => goto('/')}
+/>

apps/storage/apps/web/src/routes/+layout.svelte

@@ -192,6 +192,7 @@
 				settingsHref="/settings"
 				manaHref="/mana"
 				profileHref="/profile"
+				themesHref="/themes"
 				helpHref="/help"
 				allAppsHref="/apps"
 			/>

apps/storage/apps/web/src/routes/reset-password/+page.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { ManaIcon } from '@manacore/shared-branding';
+	import { authStore } from '$lib/stores/auth.svelte';
+
+	let loading = $state(false);
+	let hasToken = $state(false);
+	let token = $state<string | null>(null);
+	let password = $state('');
+	let confirmPassword = $state('');
+	let error = $state<string | null>(null);
+	let success = $state(false);
+
+	onMount(() => {
+		token = $page.url.searchParams.get('token');
+		hasToken = !!token;
+	});
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		error = null;
+
+		if (!token) {
+			error = 'Invalid or missing token';
+			return;
+		}
+		if (password !== confirmPassword) {
+			error = 'Passwords do not match';
+			return;
+		}
+		if (password.length < 8) {
+			error = 'Password must be at least 8 characters';
+			return;
+		}
+
+		loading = true;
+		try {
+			const result = await authStore.resetPasswordWithToken(token, password);
+			if (!result.success) {
+				error = result.error || 'Failed to reset password';
+			} else {
+				success = true;
+				setTimeout(() => goto('/login'), 3000);
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'An error occurred';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Reset Password - Storage</title>
+</svelte:head>
+
+<div
+	class="flex min-h-screen flex-col bg-gradient-to-b from-blue-100 to-white dark:from-slate-900 dark:to-slate-800"
+>
+	<header class="flex items-center justify-between p-4">
+		<a href="/" class="flex items-center gap-2">
+			<ManaIcon class="h-8 w-8" />
+			<span class="text-xl font-semibold" style="color: #3b82f6">Storage</span>
+		</a>
+	</header>
+
+	<main class="flex flex-1 items-center justify-center p-4">
+		<div class="w-full max-w-md">
+			<div class="text-center mb-8">
+				<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Reset Password</h1>
+				<p class="mt-2 text-gray-600 dark:text-gray-400">
+					{#if success}Password reset successfully
+					{:else if hasToken}Enter your new password
+					{:else}Invalid or missing token{/if}
+				</p>
+			</div>
+
+			{#if success}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<div class="text-center">
+						<div class="mb-4 text-6xl">&#x2705;</div>
+						<p class="mb-6 text-gray-600 dark:text-gray-400">
+							Your password has been reset successfully. You will be redirected to the login page
+							shortly.
+						</p>
+						<a
+							href="/login"
+							class="inline-block rounded-lg px-6 py-3 font-medium text-white transition-colors"
+							style="background-color: #3b82f6"
+						>
+							Go to login
+						</a>
+					</div>
+				</div>
+			{:else if hasToken}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<form onsubmit={handleSubmit}>
+						{#if error}
+							<div
+								class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400"
+							>
+								{error}
+							</div>
+						{/if}
+						<div class="space-y-4">
+							<div>
+								<label
+									for="password"
+									class="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100"
+									>New Password</label
+								>
+								<input
+									type="password"
+									id="password"
+									autocomplete="new-password"
+									placeholder="Enter new password"
+									required
+									minlength={8}
+									bind:value={password}
+									class="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:outline-none focus:ring-2 dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-400"
+									style="--tw-ring-color: #3b82f680; border-color: #3b82f6"
+								/>
+								<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">At least 8 characters</p>
+							</div>
+							<div>
+								<label
+									for="confirmPassword"
+									class="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100"
+									>Confirm Password</label
+								>
+								<input
+									type="password"
+									id="confirmPassword"
+									autocomplete="new-password"
+									placeholder="Confirm password"
+									required
+									minlength={8}
+									bind:value={confirmPassword}
+									class="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:outline-none focus:ring-2 dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-400"
+								/>
+							</div>
+							<button
+								type="submit"
+								disabled={loading}
+								class="w-full rounded-lg px-4 py-3 font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+								style="background-color: #3b82f6"
+							>
+								{loading ? 'Updating password...' : 'Update Password'}
+							</button>
+						</div>
+					</form>
+				</div>
+			{:else}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<div class="text-center">
+						<div class="mb-4 text-6xl">&#x26A0;&#xFE0F;</div>
+						<p class="mb-6 text-gray-600 dark:text-gray-400">
+							This password reset link is invalid or has expired.
+						</p>
+						<a
+							href="/forgot-password"
+							class="inline-block rounded-lg px-6 py-3 font-medium text-white transition-colors"
+							style="background-color: #3b82f6"
+						>
+							Request a new link
+						</a>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</main>
+</div>

apps/todo/apps/web/src/routes/(app)/+layout.svelte

@@ -348,6 +348,7 @@
 						allAppsHref="/apps"
 						themesHref="/themes"
 						spiralHref="/spiral"
+						helpHref="/help"
 						onOpenInPanel={handleOpenInPanel}
 						ariaLabel="Hauptnavigation"
 					/>

apps/todo/apps/web/src/routes/(app)/profile/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { ProfilePage } from '@manacore/shared-profile-ui';
+	import { authStore } from '$lib/stores/auth.svelte';
+</script>
+
+<ProfilePage user={authStore.user} appName="Todo" />

apps/zitare/apps/web/src/routes/(app)/profile/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { ProfilePage } from '@manacore/shared-profile-ui';
+	import { authStore } from '$lib/stores/auth.svelte';
+</script>
+
+<ProfilePage user={authStore.user} appName="Zitare" />

apps/zitare/apps/web/src/routes/(app)/themes/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { ThemePage } from '@manacore/shared-theme-ui';
+	import { theme } from '$lib/stores/theme.svelte';
+</script>
+
+<svelte:head>
+	<title>Themes | Zitare</title>
+</svelte:head>
+
+<ThemePage
+	currentVariant={theme.variant}
+	onSelectTheme={(v) => theme.setVariant(v)}
+	showModeSelector={true}
+	currentMode={theme.mode}
+	onModeChange={(m) => theme.setMode(m)}
+	showBackButton={true}
+	onBack={() => goto('/')}
+/>