From eb98f8949f2d37e3579e8f3900cb859603481871 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Tue, 9 Dec 2025 12:45:10 +0100
Subject: [PATCH] fix(settings): complete global settings unification for
 remaining apps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ManaDeck: Remove duplicate theme controls, add appId="manadeck"
- Contacts: Remove duplicate theme controls, add appId="contacts"
- Clock: Add userSettings.load() in onMount for server sync

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/routes/(app)/settings/+page.svelte    |  5 ++
 .../src/routes/(app)/settings/+page.svelte    | 59 +------------------
 .../src/routes/(app)/settings/+page.svelte    | 59 +------------------
 3 files changed, 9 insertions(+), 114 deletions(-)

diff --git a/apps/clock/apps/web/src/routes/(app)/settings/+page.svelte b/apps/clock/apps/web/src/routes/(app)/settings/+page.svelte
index 69b8ea252..b350fab5e 100644
--- a/apps/clock/apps/web/src/routes/(app)/settings/+page.svelte
+++ b/apps/clock/apps/web/src/routes/(app)/settings/+page.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
 	import { GlobalSettingsSection } from '@manacore/shared-ui';
 
+	onMount(async () => {
+		await userSettings.load();
+	});
+
 	// Settings state
 	let clockFormat = $state<'24h' | '12h'>('24h');
 
diff --git a/apps/contacts/apps/web/src/routes/(app)/settings/+page.svelte b/apps/contacts/apps/web/src/routes/(app)/settings/+page.svelte
index ad5382f6a..6a9f4fc96 100644
--- a/apps/contacts/apps/web/src/routes/(app)/settings/+page.svelte
+++ b/apps/contacts/apps/web/src/routes/(app)/settings/+page.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { theme } from '$lib/stores/theme';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
-	import { THEME_DEFINITIONS } from '@manacore/shared-theme';
 	import {
 		SettingsPage,
 		SettingsSection,
@@ -21,61 +19,8 @@
 </svelte:head>
 
 <SettingsPage title="Einstellungen" subtitle="Passe die App an deine Vorlieben an.">
-	<!-- Appearance Section -->
-	<SettingsSection title="Darstellung">
-		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
-				/>
-			</svg>
-		{/snippet}
-
-		<SettingsCard>
-			<div class="px-5 py-4">
-				<p class="font-medium text-[hsl(var(--foreground))] mb-2">Farbmodus</p>
-				<p class="text-sm text-[hsl(var(--muted-foreground))] mb-4">
-					Wähle zwischen Hell, Dunkel oder System
-				</p>
-				<div class="flex gap-2">
-					{#each ['light', 'dark', 'system'] as mode}
-						<button
-							class="px-4 py-2 text-sm font-medium rounded-lg transition-colors {theme.mode === mode
-								? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-								: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
-							onclick={() => theme.setMode(mode as 'light' | 'dark' | 'system')}
-						>
-							{mode === 'light' ? 'Hell' : mode === 'dark' ? 'Dunkel' : 'System'}
-						</button>
-					{/each}
-				</div>
-			</div>
-
-			<div class="px-5 py-4 border-t border-[hsl(var(--border))]">
-				<p class="font-medium text-[hsl(var(--foreground))] mb-2">Theme</p>
-				<p class="text-sm text-[hsl(var(--muted-foreground))] mb-4">Wähle eine Farbpalette</p>
-				<div class="flex gap-2 flex-wrap">
-					{#each theme.variants as variant}
-						<button
-							class="px-4 py-2 text-sm font-medium rounded-lg transition-colors {theme.variant ===
-							variant
-								? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-								: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
-							onclick={() => theme.setVariant(variant)}
-						>
-							{THEME_DEFINITIONS[variant].label}
-						</button>
-					{/each}
-				</div>
-			</div>
-		</SettingsCard>
-	</SettingsSection>
-
-	<!-- Global Settings Section -->
-	<GlobalSettingsSection {userSettings} />
+	<!-- Global Settings Section (synced across all apps) -->
+	<GlobalSettingsSection {userSettings} appId="contacts" />
 
 	<!-- About Section -->
 	<SettingsSection title="Über">
diff --git a/apps/manadeck/apps/web/src/routes/(app)/settings/+page.svelte b/apps/manadeck/apps/web/src/routes/(app)/settings/+page.svelte
index 0306401ca..ccdf0ea3d 100644
--- a/apps/manadeck/apps/web/src/routes/(app)/settings/+page.svelte
+++ b/apps/manadeck/apps/web/src/routes/(app)/settings/+page.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { theme } from '$lib/stores/theme';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
-	import { THEME_DEFINITIONS } from '@manacore/shared-theme';
 	import {
 		SettingsPage,
 		SettingsSection,
@@ -21,61 +19,8 @@
 </svelte:head>
 
 <SettingsPage title="Einstellungen" subtitle="Passe die App an deine Vorlieben an.">
-	<!-- Appearance Section -->
-	<SettingsSection title="Darstellung">
-		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
-				/>
-			</svg>
-		{/snippet}
-
-		<SettingsCard>
-			<div class="px-5 py-4">
-				<p class="font-medium text-[hsl(var(--foreground))] mb-2">Farbmodus</p>
-				<p class="text-sm text-[hsl(var(--muted-foreground))] mb-4">
-					Wähle zwischen Hell, Dunkel oder System
-				</p>
-				<div class="flex gap-2">
-					{#each ['light', 'dark', 'system'] as mode}
-						<button
-							class="px-4 py-2 text-sm font-medium rounded-lg transition-colors {theme.mode === mode
-								? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-								: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
-							onclick={() => theme.setMode(mode as 'light' | 'dark' | 'system')}
-						>
-							{mode === 'light' ? 'Hell' : mode === 'dark' ? 'Dunkel' : 'System'}
-						</button>
-					{/each}
-				</div>
-			</div>
-
-			<div class="px-5 py-4 border-t border-[hsl(var(--border))]">
-				<p class="font-medium text-[hsl(var(--foreground))] mb-2">Theme</p>
-				<p class="text-sm text-[hsl(var(--muted-foreground))] mb-4">Wähle eine Farbpalette</p>
-				<div class="flex gap-2 flex-wrap">
-					{#each theme.variants as variant}
-						<button
-							class="px-4 py-2 text-sm font-medium rounded-lg transition-colors {theme.variant ===
-							variant
-								? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-								: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
-							onclick={() => theme.setVariant(variant)}
-						>
-							{THEME_DEFINITIONS[variant].label}
-						</button>
-					{/each}
-				</div>
-			</div>
-		</SettingsCard>
-	</SettingsSection>
-
-	<!-- Global Settings Section -->
-	<GlobalSettingsSection {userSettings} />
+	<!-- Global Settings Section (synced across all apps) -->
+	<GlobalSettingsSection {userSettings} appId="manadeck" />
 
 	<!-- About Section -->
 	<SettingsSection title="Über">