feat(mana/web): redesign settings page + pill-nav compute selector

Settings page now uses a sidebar layout with category buttons (Profil,
Allgemein, KI, Sicherheit, Credits, Daten & Sync), an inline search field
that jumps to the matching section, and componentized sections under
lib/components/settings/. Each section owns its own data loading; the
+page.svelte shrinks from 617 to ~85 lines as a thin orchestrator.

The pill-nav AI tier dropdown now renders an icon per option (cpu, server,
cloud) and a power icon for the off state, and the "KI-Einstellungen"
shortcut deep-links to /settings#ai-options which auto-selects the KI tab
and scrolls to the panel.

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

packages/shared-ui/src/navigation/PillDropdown.svelte

@@ -128,6 +128,14 @@
 		help: 'M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm2-1.645A3.502 3.502 0 0012 6.5 3.501 3.501 0 008.645 9h2.012A1.5 1.5 0 0112 8.5c.828 0 1.5.672 1.5 1.5 0 .828-.672 1.5-1.5 1.5a1 1 0 00-1 1V14h2v-.645z',
 		// Mana icon (water drop)
 		mana: 'M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z',
+		// Compute / AI tier icons
+		cpu: 'M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z',
+		server:
+			'M5 12V7a2 2 0 012-2h10a2 2 0 012 2v5M5 12h14M5 12v5a2 2 0 002 2h10a2 2 0 002-2v-5M9 8h.01M9 16h.01',
+		cloud:
+			'M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z',
+		power: 'M12 3v9m6.364-6.364a9 9 0 11-12.728 0',
+		download: 'M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3',
 	};
 
 	function getIcon(iconName: string) {

packages/shared-ui/src/navigation/PillNavigation.svelte

@@ -247,6 +247,8 @@
 		aiTierItems?: PillDropdownItem[];
 		/** Current AI tier label, e.g. "Browser" or "Server" */
 		currentAiTierLabel?: string;
+		/** Current AI tier icon name (passed to the dropdown trigger) */
+		currentAiTierIcon?: string;
 		/** Show sync status dropdown */
 		showSyncStatus?: boolean;
 		/** Sync status dropdown items */
@@ -348,6 +350,7 @@
 		showAiTierSelector = false,
 		aiTierItems = [],
 		currentAiTierLabel = 'KI',
+		currentAiTierIcon = 'cpu',
 		showSyncStatus = false,
 		syncStatusItems = [],
 		currentSyncLabel = 'Sync',
@@ -675,7 +678,7 @@
 					items={aiTierItems}
 					direction={dropdownDirection}
 					label={currentAiTierLabel}
-					icon="cpu"
+					icon={currentAiTierIcon}
 				/>
 			{/if}