feat(settings): Community-Section mit Klarname-Toggle + Avatar/Karma-Preview

Settings → Community zeigt Pseudonym + Avatar + Tier-Badge + Karma,
plus Switch für 'Klarname neben Eule zeigen'. Optimistic-Update mit
Rollback bei Fehler. Suchindex + 5 Locales aktualisiert.

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

apps/mana/apps/web/src/lib/components/settings/searchIndex.ts

@@ -8,9 +8,16 @@
  * `getSearchIndex()` so components stay reactive to locale changes.
  */
 import type { Component } from 'svelte';
-import { Gear, Robot, ShieldCheck, Cloud, Tag } from '@mana/shared-icons';
+import { Gear, Robot, ShieldCheck, Cloud, Tag, Megaphone } from '@mana/shared-icons';
 
-export type CategoryId = 'general' | 'ai' | 'security' | 'privacy' | 'data' | 'tag-presets';
+export type CategoryId =
+	| 'general'
+	| 'ai'
+	| 'security'
+	| 'privacy'
+	| 'community'
+	| 'data'
+	| 'tag-presets';
 
 export interface Category {
 	id: CategoryId;
@@ -39,6 +46,7 @@ const CATEGORY_DEFS: Record<CategoryId, CategoryDef> = {
 		i18nKey: 'security',
 	},
 	privacy: { icon: ShieldCheck, anchors: ['privacy'], i18nKey: 'privacy' },
+	community: { icon: Megaphone, anchors: ['community-identity'], i18nKey: 'community' },
 	data: {
 		icon: Cloud,
 		anchors: [
@@ -110,6 +118,9 @@ const SEARCH_ENTRY_DEFS: SearchEntryDef[] = [
 	// Privacy
 	{ i18nKey: 'privacy_overview', category: 'privacy', anchor: 'privacy' },
 	{ i18nKey: 'reset_all_private', category: 'privacy', anchor: 'privacy' },
+	// Community
+	{ i18nKey: 'community_show_real_name', category: 'community', anchor: 'community-identity' },
+	{ i18nKey: 'community_karma', category: 'community', anchor: 'community-identity' },
 	// Data
 	{ i18nKey: 'cloud_sync', category: 'data', anchor: 'cloud-sync' },
 	{ i18nKey: 'data_export', category: 'data', anchor: 'my-data' },

apps/mana/apps/web/src/lib/components/settings/sections/CommunitySection.svelte

@@ -0,0 +1,323 @@
+<!--
+  CommunitySection — Identity opt-ins für den Public-Community-Hub.
+  Aktuell:
+    - Avatar-Preview + Pseudonym-Anzeige
+    - Karma + Tier-Badge
+    - Klarname-Toggle (community_show_real_name)
+  Zukünftig könnten hier Pseudonym-Reset, Notification-Präferenzen, etc.
+  landen.
+-->
+<script lang="ts">
+	import { EulenAvatar, KARMA_TIER_CONFIG, tierFromKarma } from '@mana/feedback';
+	import SettingsPanel from '../SettingsPanel.svelte';
+	import SettingsSectionHeader from '../SettingsSectionHeader.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { browser } from '$app/environment';
+	import { Megaphone } from '@mana/shared-icons';
+
+	function getAuthUrl(): string {
+		if (browser && typeof window !== 'undefined') {
+			const injected = (window as unknown as { __PUBLIC_MANA_AUTH_URL__?: string })
+				.__PUBLIC_MANA_AUTH_URL__;
+			if (injected) return injected;
+		}
+		return import.meta.env.DEV ? 'http://localhost:3001' : '';
+	}
+
+	type ProfileBlob = {
+		displayHash?: string;
+		displayName?: string;
+		communityShowRealName?: boolean;
+		communityKarma?: number;
+	};
+
+	let profile = $state<ProfileBlob>({});
+	let loading = $state(true);
+	let saving = $state(false);
+	let error = $state<string | null>(null);
+
+	async function load() {
+		loading = true;
+		error = null;
+		try {
+			const token = await authStore.getValidToken();
+			if (!token) throw new Error('not authenticated');
+			// We don't have a "get my community profile" endpoint yet — but the
+			// my-feedback endpoint is enough to derive everything we need:
+			// most-recent post carries the displayHash + displayName, the
+			// auth.users karma comes back via /me/data.
+			const [profileRes, dataRes] = await Promise.all([
+				fetch(`${getAuthUrl()}/api/v1/me/data`, {
+					headers: { Authorization: `Bearer ${token}` },
+				}),
+				fetch(`${getAuthUrl()}/api/v1/me/profile`, {
+					headers: { Authorization: `Bearer ${token}` },
+				}).catch(() => null),
+			]);
+			if (!profileRes.ok) throw new Error(`profile load ${profileRes.status}`);
+			const data = (await profileRes.json()) as {
+				auth?: {
+					communityShowRealName?: boolean;
+					communityKarma?: number;
+				};
+			};
+			profile = {
+				...profile,
+				communityShowRealName: data.auth?.communityShowRealName ?? false,
+				communityKarma: data.auth?.communityKarma ?? 0,
+			};
+			if (dataRes && dataRes.ok) {
+				const fields = (await dataRes.json()) as ProfileBlob;
+				profile = { ...profile, ...fields };
+			}
+		} catch (err) {
+			console.warn('[community-section] load failed:', err);
+			error = err instanceof Error ? err.message : 'Konnte die Community-Daten nicht laden';
+		} finally {
+			loading = false;
+		}
+	}
+
+	$effect(() => {
+		void load();
+	});
+
+	async function toggleRealName(next: boolean) {
+		if (saving) return;
+		saving = true;
+		const previous = profile.communityShowRealName;
+		profile = { ...profile, communityShowRealName: next }; // optimistic
+		try {
+			const token = await authStore.getValidToken();
+			const res = await fetch(`${getAuthUrl()}/api/v1/me/profile`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${token}`,
+				},
+				body: JSON.stringify({ communityShowRealName: next }),
+			});
+			if (!res.ok) throw new Error(`update ${res.status}`);
+		} catch (err) {
+			console.warn('[community-section] toggle failed:', err);
+			error = 'Speichern fehlgeschlagen — versuch es nochmal.';
+			profile = { ...profile, communityShowRealName: previous }; // rollback
+		} finally {
+			saving = false;
+		}
+	}
+
+	let karma = $derived(profile.communityKarma ?? 0);
+	let tier = $derived(tierFromKarma(karma));
+	let tierCfg = $derived(KARMA_TIER_CONFIG[tier]);
+</script>
+
+<SettingsPanel id="community-identity">
+	<SettingsSectionHeader
+		icon={Megaphone}
+		title="Community-Identität"
+		description="Wie du in der Mana-Community auftauchst — Pseudonym, Karma, Klarname-Toggle."
+	/>
+
+	{#if loading}
+		<div class="state">Lade…</div>
+	{:else}
+		<div class="profile-card">
+			<EulenAvatar
+				displayHash={profile.displayHash ?? null}
+				size={56}
+				title={profile.displayName ?? ''}
+			/>
+			<div class="profile-info">
+				<div class="display-name">
+					<span class="tier-dot" style:background-color={tierCfg.color}></span>
+					<strong>{profile.displayName ?? 'Wachsame Eule (noch unbenutzt)'}</strong>
+					{#if authStore.user?.name && profile.communityShowRealName}
+						<span class="real-name">· {authStore.user.name}</span>
+					{/if}
+				</div>
+				<div class="karma-row">
+					<span
+						class="tier-pill"
+						style:background-color="{tierCfg.color}22"
+						style:color={tierCfg.color}
+					>
+						{tierCfg.label}-Eule
+					</span>
+					<span class="karma">{karma} Karma</span>
+				</div>
+				<p class="hint">
+					Dein Pseudonym ist deterministisch aus deiner User-ID abgeleitet — es bleibt dasselbe,
+					solange du derselbe Account bist. Niemand außer dem Mana-Team kann es zurückführen.
+				</p>
+			</div>
+		</div>
+
+		<div class="toggle-row">
+			<div>
+				<div class="toggle-label">Klarnamen neben dem Pseudonym zeigen</div>
+				<div class="toggle-hint">
+					Wenn aktiv, sehen eingeloggte Mana-User in der Community deinen Namen ({authStore.user
+						?.name ?? 'kein Name'}) neben deiner Eule. Auf der öffentlichen community.mana.how-Seite
+					(ohne Login) wird der Klarname <strong>nie</strong> gezeigt.
+				</div>
+			</div>
+			<button
+				type="button"
+				class="switch"
+				class:on={profile.communityShowRealName}
+				disabled={saving}
+				role="switch"
+				aria-label="Klarnamen neben Pseudonym zeigen"
+				aria-checked={profile.communityShowRealName}
+				onclick={() => toggleRealName(!profile.communityShowRealName)}
+			>
+				<span class="switch-thumb"></span>
+			</button>
+		</div>
+
+		{#if error}
+			<p class="error">{error}</p>
+		{/if}
+	{/if}
+</SettingsPanel>
+
+<style>
+	.state {
+		padding: 1.5rem;
+		text-align: center;
+		color: hsl(var(--color-muted-foreground));
+		font-size: 0.875rem;
+	}
+
+	.profile-card {
+		display: flex;
+		gap: 0.875rem;
+		padding: 0.75rem;
+		background: hsl(var(--color-muted) / 0.25);
+		border-radius: 0.75rem;
+	}
+
+	.profile-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+		min-width: 0;
+		flex: 1;
+	}
+
+	.display-name {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-size: 0.9375rem;
+	}
+
+	.tier-dot {
+		display: inline-block;
+		width: 0.625rem;
+		height: 0.625rem;
+		border-radius: 50%;
+		box-shadow: 0 0 0 1px hsl(0 0% 0% / 0.1);
+	}
+
+	.real-name {
+		color: hsl(var(--color-muted-foreground));
+		font-weight: 400;
+	}
+
+	.karma-row {
+		display: flex;
+		gap: 0.375rem;
+		align-items: center;
+		font-size: 0.75rem;
+	}
+
+	.tier-pill {
+		padding: 0.125rem 0.5rem;
+		border-radius: 999px;
+		font-weight: 700;
+	}
+
+	.karma {
+		padding: 0.125rem 0.5rem;
+		border-radius: 999px;
+		background: hsl(var(--color-muted) / 0.5);
+		color: hsl(var(--color-muted-foreground));
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.hint {
+		margin: 0.25rem 0 0;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+		line-height: 1.45;
+	}
+
+	.toggle-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 0.75rem 0.875rem;
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.75rem;
+		background: hsl(var(--color-card));
+	}
+
+	.toggle-label {
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+
+	.toggle-hint {
+		margin-top: 0.25rem;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+		line-height: 1.45;
+	}
+
+	.switch {
+		flex-shrink: 0;
+		width: 2.5rem;
+		height: 1.5rem;
+		border: none;
+		border-radius: 999px;
+		background: hsl(var(--color-muted) / 0.6);
+		position: relative;
+		cursor: pointer;
+		transition: background 0.15s ease;
+	}
+
+	.switch.on {
+		background: hsl(var(--color-primary));
+	}
+
+	.switch:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.switch-thumb {
+		position: absolute;
+		top: 0.125rem;
+		left: 0.125rem;
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: 50%;
+		background: white;
+		box-shadow: 0 1px 3px hsl(0 0% 0% / 0.18);
+		transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+
+	.switch.on .switch-thumb {
+		transform: translateX(1rem);
+	}
+
+	.error {
+		margin: 0.5rem 0 0;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-error, 0 84% 60%));
+	}
+</style>

apps/mana/apps/web/src/lib/i18n/locales/settings/de.json

@@ -10,6 +10,10 @@
 			"label": "Privatsphäre",
 			"description": "Was ist gerade öffentlich oder per Link geteilt — mit Kill-Switch."
 		},
+		"community": {
+			"label": "Community",
+			"description": "Wie du in der Community auftauchst — Eulen-Pseudonym, Klarname, Karma."
+		},
 		"data": { "label": "Daten & Sync", "description": "Cloud-Sync, Export, Backup & DSGVO" },
 		"tag_presets": { "label": "Tag-Presets", "description": "Tag-Sets für neue Spaces" }
 	},
@@ -47,6 +51,14 @@
 			"label": "Alle auf privat zurücksetzen",
 			"keywords": "kill-switch, kill switch, reset, privat, widerrufen"
 		},
+		"community_show_real_name": {
+			"label": "Klarname in der Community",
+			"keywords": "name, eule, pseudonym, klarname, anonym"
+		},
+		"community_karma": {
+			"label": "Karma & Tier",
+			"keywords": "karma, tier, bronze, silver, gold, platin, eule"
+		},
 		"cloud_sync": { "label": "Cloud Sync", "keywords": "sync, geräte" },
 		"data_export": { "label": "Daten exportieren", "keywords": "export, dsgvo, gdpr, json" },
 		"auth_data": { "label": "Authentifizierung", "keywords": "sessions, 2fa, login" },

apps/mana/apps/web/src/lib/i18n/locales/settings/en.json

@@ -7,6 +7,10 @@
 			"label": "Privacy",
 			"description": "What is currently public or shared via link — with kill switch."
 		},
+		"community": {
+			"label": "Community",
+			"description": "How you appear in the community — owl pseudonym, real name, karma."
+		},
 		"data": { "label": "Data & Sync", "description": "Cloud sync, export, backup & GDPR" },
 		"tag_presets": { "label": "Tag presets", "description": "Tag sets for new spaces" }
 	},
@@ -41,6 +45,14 @@
 			"label": "Reset all to private",
 			"keywords": "kill-switch, kill switch, reset, private, revoke"
 		},
+		"community_show_real_name": {
+			"label": "Real name in community",
+			"keywords": "name, owl, pseudonym, anonymous, identity"
+		},
+		"community_karma": {
+			"label": "Karma & Tier",
+			"keywords": "karma, tier, bronze, silver, gold, platinum, owl"
+		},
 		"cloud_sync": { "label": "Cloud Sync", "keywords": "sync, devices" },
 		"data_export": { "label": "Export data", "keywords": "export, dsgvo, gdpr, json" },
 		"auth_data": { "label": "Authentication", "keywords": "sessions, 2fa, login" },

apps/mana/apps/web/src/lib/i18n/locales/settings/es.json

@@ -7,6 +7,10 @@
 			"label": "Privacidad",
 			"description": "Qué es público o compartido por enlace ahora mismo — con interruptor de emergencia."
 		},
+		"community": {
+			"label": "Comunidad",
+			"description": "Cómo apareces en la comunidad — pseudónimo de búho, nombre real, karma."
+		},
 		"data": {
 			"label": "Datos y sincronización",
 			"description": "Cloud sync, exportación, copia de seguridad y RGPD"
@@ -47,6 +51,14 @@
 			"label": "Restablecer todo a privado",
 			"keywords": "kill-switch, reset, privado, revocar"
 		},
+		"community_show_real_name": {
+			"label": "Nombre real en la comunidad",
+			"keywords": "nombre, búho, pseudónimo, anónimo, identidad"
+		},
+		"community_karma": {
+			"label": "Karma y nivel",
+			"keywords": "karma, nivel, bronce, plata, oro, platino, búho"
+		},
 		"cloud_sync": { "label": "Cloud Sync", "keywords": "sync, dispositivos" },
 		"data_export": { "label": "Exportar datos", "keywords": "export, rgpd, gdpr, json" },
 		"auth_data": { "label": "Autenticación", "keywords": "sesiones, 2fa, login" },

apps/mana/apps/web/src/lib/i18n/locales/settings/fr.json

@@ -7,6 +7,10 @@
 			"label": "Confidentialité",
 			"description": "Ce qui est public ou partagé par lien actuellement — avec interrupteur d'urgence."
 		},
+		"community": {
+			"label": "Communauté",
+			"description": "Comment tu apparais dans la communauté — pseudonyme de chouette, vrai nom, karma."
+		},
 		"data": {
 			"label": "Données et synchro",
 			"description": "Cloud sync, export, sauvegarde et RGPD"
@@ -47,6 +51,14 @@
 			"label": "Tout repasser en privé",
 			"keywords": "kill-switch, reset, privé, révoquer"
 		},
+		"community_show_real_name": {
+			"label": "Vrai nom dans la communauté",
+			"keywords": "nom, chouette, pseudonyme, anonyme, identité"
+		},
+		"community_karma": {
+			"label": "Karma & niveau",
+			"keywords": "karma, niveau, bronze, argent, or, platine, chouette"
+		},
 		"cloud_sync": { "label": "Cloud Sync", "keywords": "sync, appareils" },
 		"data_export": { "label": "Exporter les données", "keywords": "export, rgpd, gdpr, json" },
 		"auth_data": { "label": "Authentification", "keywords": "sessions, 2fa, login" },

apps/mana/apps/web/src/lib/i18n/locales/settings/it.json

@@ -7,6 +7,10 @@
 			"label": "Privacy",
 			"description": "Cosa è pubblico o condiviso tramite link adesso — con interruttore di emergenza."
 		},
+		"community": {
+			"label": "Community",
+			"description": "Come appari nella community — pseudonimo di gufo, nome reale, karma."
+		},
 		"data": {
 			"label": "Dati e sincronizzazione",
 			"description": "Cloud sync, esportazione, backup e GDPR"
@@ -44,6 +48,14 @@
 			"label": "Riporta tutto a privato",
 			"keywords": "kill-switch, reset, privato, revocare"
 		},
+		"community_show_real_name": {
+			"label": "Nome reale nella community",
+			"keywords": "nome, gufo, pseudonimo, anonimo, identità"
+		},
+		"community_karma": {
+			"label": "Karma e tier",
+			"keywords": "karma, tier, bronzo, argento, oro, platino, gufo"
+		},
 		"cloud_sync": { "label": "Cloud Sync", "keywords": "sync, dispositivi" },
 		"data_export": { "label": "Esporta i dati", "keywords": "export, gdpr, json" },
 		"auth_data": { "label": "Autenticazione", "keywords": "sessioni, 2fa, login" },

apps/mana/apps/web/src/lib/modules/settings/ListView.svelte

@@ -16,6 +16,7 @@
 	import AiSection from '$lib/components/settings/sections/AiSection.svelte';
 	import SecuritySection from '$lib/components/settings/sections/SecuritySection.svelte';
 	import PrivacySection from '$lib/components/settings/sections/PrivacySection.svelte';
+	import CommunitySection from '$lib/components/settings/sections/CommunitySection.svelte';
 	import DataSection from '$lib/components/settings/sections/DataSection.svelte';
 	import TagPresetsSection from '$lib/components/settings/sections/TagPresetsSection.svelte';
 
@@ -79,6 +80,8 @@
 			<SecuritySection />
 		{:else if activeCategory === 'privacy'}
 			<PrivacySection />
+		{:else if activeCategory === 'community'}
+			<CommunitySection />
 		{:else if activeCategory === 'data'}
 			<DataSection />
 		{:else if activeCategory === 'tag-presets'}