From aebbcdd1c3a7a250e9a64ea62696131c191ff111 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 15 Apr 2026 21:48:41 +0200
Subject: [PATCH] refactor(settings): unify section headers across tabs

Every tab now leads with the same SettingsSectionHeader
(icon-circle + title + description), matching Credits and Data:

- AiSection wraps AiSettings with SettingsSectionHeader (Robot, indigo);
  AiSettings's inline icon+title is removed
- GeneralSection wraps GlobalSettingsSection with SettingsSectionHeader
  (Gear); suppresses the inner sticky pill header via title=""
- SecuritySection adds one top-level SettingsSectionHeader
  (ShieldCheck, blue) above the four sub-panels

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/components/settings/AiSettings.svelte    | 16 +---------------
 .../settings/sections/AiSection.svelte           | 10 +++++++++-
 .../settings/sections/GeneralSection.svelte      | 13 ++++++++++---
 .../settings/sections/SecuritySection.svelte     | 11 +++++++++++
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte b/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte
index 67f8fa271..c7c04db1d 100644
--- a/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte
+++ b/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte
@@ -123,21 +123,7 @@
 	const browserCacheReady = $derived(webgpuSupported && localLlmStatus.current.state === 'ready');
 </script>
 
-<div id="ai-options" class="scroll-mt-24 p-6">
-	<div class="mb-6 flex items-center gap-3">
-		<div
-			class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900/20 dark:text-indigo-400"
-		>
-			<Robot size={20} />
-		</div>
-		<div>
-			<div class="text-lg font-semibold">KI-Optionen</div>
-			<p class="text-sm text-muted-foreground">
-				Wähle, welche KI-Schichten Mana verwenden darf — von gar keiner bis zu allen
-			</p>
-		</div>
-	</div>
-
+<div>
 	<!-- Tier 0 explainer -->
 	<div class="mb-4 rounded-xl border border-border bg-muted/20 p-4">
 		<div class="flex items-start gap-3">
diff --git a/apps/mana/apps/web/src/lib/components/settings/sections/AiSection.svelte b/apps/mana/apps/web/src/lib/components/settings/sections/AiSection.svelte
index dc63a43f2..00bde639b 100644
--- a/apps/mana/apps/web/src/lib/components/settings/sections/AiSection.svelte
+++ b/apps/mana/apps/web/src/lib/components/settings/sections/AiSection.svelte
@@ -1,8 +1,16 @@
 <script lang="ts">
+	import { Robot } from '@mana/shared-icons';
 	import AiSettings from '../AiSettings.svelte';
 	import SettingsPanel from '../SettingsPanel.svelte';
+	import SettingsSectionHeader from '../SettingsSectionHeader.svelte';
 </script>
 
-<SettingsPanel padded={false}>
+<SettingsPanel id="ai-options">
+	<SettingsSectionHeader
+		icon={Robot}
+		title="KI-Optionen"
+		description="Wähle, welche KI-Schichten Mana verwenden darf — von gar keiner bis zu allen"
+		tone="indigo"
+	/>
 	<AiSettings />
 </SettingsPanel>
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 99f8a2b39..8e359fc26 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,14 +1,21 @@
 <script lang="ts">
-	import { GlobalSettingsSection } from '@mana/shared-ui';
 	import { onMount } from 'svelte';
+	import { Gear } from '@mana/shared-icons';
+	import { GlobalSettingsSection } from '@mana/shared-ui';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
 	import SettingsPanel from '../SettingsPanel.svelte';
+	import SettingsSectionHeader from '../SettingsSectionHeader.svelte';
 
 	onMount(() => {
 		void userSettings.load();
 	});
 </script>
 
-<SettingsPanel id="global" padded={false}>
-	<GlobalSettingsSection {userSettings} appId="mana" />
+<SettingsPanel id="global">
+	<SettingsSectionHeader
+		icon={Gear}
+		title="Allgemein"
+		description="Theme, Sprache & Benachrichtigungen"
+	/>
+	<GlobalSettingsSection {userSettings} appId="mana" title="" />
 </SettingsPanel>
diff --git a/apps/mana/apps/web/src/lib/components/settings/sections/SecuritySection.svelte b/apps/mana/apps/web/src/lib/components/settings/sections/SecuritySection.svelte
index 0dfc18f96..75fc4f5ac 100644
--- a/apps/mana/apps/web/src/lib/components/settings/sections/SecuritySection.svelte
+++ b/apps/mana/apps/web/src/lib/components/settings/sections/SecuritySection.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { ShieldCheck } from '@mana/shared-icons';
 	import { PasskeyManager, TwoFactorSetup, AuditLog, SessionManager } from '@mana/shared-auth-ui';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import SettingsPanel from '../SettingsPanel.svelte';
+	import SettingsSectionHeader from '../SettingsSectionHeader.svelte';
 
 	let passkeys = $state<any[]>([]);
 	let sessions = $state<any[]>([]);
@@ -28,6 +30,15 @@
 	});
 </script>
 
+<SettingsPanel>
+	<SettingsSectionHeader
+		icon={ShieldCheck}
+		title="Sicherheit"
+		description="Passkeys, 2FA & Sitzungen"
+		tone="blue"
+	/>
+</SettingsPanel>
+
 <SettingsPanel id="passkeys">
 	<PasskeyManager
 		{passkeys}