-
- Farbmodus
- Wähle zwischen Hell, Dunkel oder System
-
-
-
-
-
-
Speicher
-
-
-
-
Speicherplatz
-
Dein genutzter Speicherplatz
+
+
Theme
+
Wähle eine Farbpalette
+
+ {#each theme.variants as variant}
+
+ {/each}
+
-
-
+
+
+
+
+
+ {#snippet icon()}
+
+ {/snippet}
+
+
+
+
Speicherplatz
+
Dein genutzter Speicherplatz
+
+
2.5 GB von 10 GB verwendet
-
+
+
-
-
Über
+
+
-
-
- Version
- Storage App v1.0.0
-
-
-
-
+
+
+ {#snippet icon()}
+
+ {/snippet}
-
+
+
+ 1.0.0
+
+
+
+
diff --git a/apps/zitare/apps/web/src/routes/settings/+page.svelte b/apps/zitare/apps/web/src/routes/settings/+page.svelte
index 19b8efc19..07bb9eade 100644
--- a/apps/zitare/apps/web/src/routes/settings/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/settings/+page.svelte
@@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { theme } from '$lib/stores/theme';
+ import { userSettings } from '$lib/stores/user-settings.svelte';
import { THEME_DEFINITIONS } from '@manacore/shared-theme';
import { ThemeColorPreview } from '@manacore/shared-theme-ui';
import {
@@ -12,6 +13,7 @@
SettingsToggle,
SettingsDangerZone,
SettingsDangerButton,
+ GlobalSettingsSection,
} from '@manacore/shared-ui';
// Settings state
@@ -19,12 +21,15 @@
let userName = $state('');
// Load settings from localStorage on mount
- onMount(() => {
+ onMount(async () => {
const savedLanguage = localStorage.getItem('language');
const savedUserName = localStorage.getItem('userName');
if (savedLanguage) language = savedLanguage as 'de' | 'en';
if (savedUserName) userName = savedUserName;
+
+ // Load user settings from server
+ await userSettings.load();
});
// Save settings to localStorage
@@ -227,6 +232,9 @@
+
+
+
+ import type { UserSettingsStore, NavPosition, ThemeMode } from '@manacore/shared-theme';
+ import SettingsSection from './SettingsSection.svelte';
+ import SettingsCard from './SettingsCard.svelte';
+
+ interface Props {
+ /** User settings store instance */
+ userSettings: UserSettingsStore;
+ /** Whether to show navigation settings */
+ showNavigation?: boolean;
+ /** Whether to show theme settings */
+ showTheme?: boolean;
+ /** Whether to show language settings */
+ showLanguage?: boolean;
+ /** Section title */
+ title?: string;
+ /** Section description */
+ description?: string;
+ }
+
+ let {
+ userSettings,
+ showNavigation = true,
+ showTheme = true,
+ showLanguage = true,
+ title = 'App-Einstellungen',
+ description = 'Diese Einstellungen gelten für alle Mana Apps',
+ }: Props = $props();
+
+ // Navigation position handler
+ async function handleNavPositionChange(position: NavPosition) {
+ await userSettings.updateGlobal({
+ nav: { ...userSettings.globalSettings.nav, desktopPosition: position },
+ });
+ }
+
+ // Sidebar collapsed handler
+ async function handleSidebarChange(collapsed: boolean) {
+ await userSettings.updateGlobal({
+ nav: { ...userSettings.globalSettings.nav, sidebarCollapsed: collapsed },
+ });
+ }
+
+ // Theme mode handler
+ async function handleThemeModeChange(mode: ThemeMode) {
+ await userSettings.updateGlobal({
+ theme: { ...userSettings.globalSettings.theme, mode },
+ });
+ }
+
+ // Color scheme handler
+ async function handleColorSchemeChange(colorScheme: string) {
+ await userSettings.updateGlobal({
+ theme: { ...userSettings.globalSettings.theme, colorScheme },
+ });
+ }
+
+ // Locale handler
+ async function handleLocaleChange(locale: string) {
+ await userSettings.updateGlobal({ locale });
+ }
+
+ const colorSchemes = [
+ { id: 'ocean', label: 'Ozean', color: 'bg-blue-500' },
+ { id: 'nature', label: 'Natur', color: 'bg-green-500' },
+ { id: 'lume', label: 'Lume', color: 'bg-amber-500' },
+ { id: 'stone', label: 'Stein', color: 'bg-slate-500' },
+ ];
+
+ const languages = [
+ { id: 'de', label: 'DE' },
+ { id: 'en', label: 'EN' },
+ { id: 'fr', label: 'FR' },
+ { id: 'es', label: 'ES' },
+ { id: 'it', label: 'IT' },
+ ];
+
+
+
+ {#snippet icon()}
+
+ {/snippet}
+
+
+
+
{description}
+
+
+ {#if showNavigation}
+
+
+
+ Navigation
+
+
+
+
+
Position (Desktop)
+
+ Position der Navigation auf großen Bildschirmen
+
+
+
+
+
+
+
+
+
+
+
Sidebar eingeklappt
+
Standard-Zustand der Sidebar
+
+
+
+
+ {/if}
+
+ {#if showTheme}
+
+
+
+ Erscheinungsbild
+
+
+
+
+
Farbmodus
+
Hell, Dunkel oder automatisch
+
+
+ {#each ['light', 'dark', 'system'] as mode}
+
+ {/each}
+
+
+
+
+
+
Farbschema
+
Akzentfarbe der Benutzeroberfläche
+
+
+ {#each colorSchemes as scheme}
+
+ {/each}
+
+
+
+ {/if}
+
+ {#if showLanguage}
+
+
+
+ Sprache
+
+
+
+
+
Anzeigesprache
+
Sprache der Benutzeroberfläche
+
+
+ {#each languages as lang}
+
+ {/each}
+
+
+
+ {/if}
+
+
+ {#if userSettings.syncing}
+
+ {/if}
+