From 7deb5b9a1e0774877647cbf19b3e0c570ae07ae2 Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Sat, 29 Nov 2025 13:22:12 +0100 Subject: [PATCH] feat(shared-ui): add reusable settings components with glass styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add SettingsPage, SettingsSection, SettingsCard components - Add SettingsRow, SettingsToggle for interactive elements - Add SettingsDangerZone, SettingsDangerButton for destructive actions - Apply glass morphism styling matching PillNavigation - Migrate settings pages in manacore, presi, zitare apps - Migrate archived apps: maerchenzauber, memoro, nutriphi, uload 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../routes/(protected)/settings/+page.svelte | 521 ++++++------ .../routes/(protected)/settings/+page.svelte | 757 +++++++++++------- .../routes/(protected)/settings/+page.svelte | 301 ++++--- .../src/routes/(app)/settings/+page.svelte | 21 +- .../src/routes/(app)/settings/+page.svelte | 219 +++-- .../apps/web/src/routes/settings/+page.svelte | 233 +++--- .../apps/web/src/routes/settings/+page.svelte | 559 +++++-------- packages/shared-ui/src/index.ts | 11 + .../src/settings/SettingsCard.svelte | 107 +++ .../src/settings/SettingsDangerButton.svelte | 180 +++++ .../src/settings/SettingsDangerZone.svelte | 71 ++ .../src/settings/SettingsPage.svelte | 92 +++ .../shared-ui/src/settings/SettingsRow.svelte | 240 ++++++ .../src/settings/SettingsSection.svelte | 91 +++ .../src/settings/SettingsToggle.svelte | 202 +++++ packages/shared-ui/src/settings/index.ts | 8 + 16 files changed, 2391 insertions(+), 1222 deletions(-) create mode 100644 packages/shared-ui/src/settings/SettingsCard.svelte create mode 100644 packages/shared-ui/src/settings/SettingsDangerButton.svelte create mode 100644 packages/shared-ui/src/settings/SettingsDangerZone.svelte create mode 100644 packages/shared-ui/src/settings/SettingsPage.svelte create mode 100644 packages/shared-ui/src/settings/SettingsRow.svelte create mode 100644 packages/shared-ui/src/settings/SettingsSection.svelte create mode 100644 packages/shared-ui/src/settings/SettingsToggle.svelte create mode 100644 packages/shared-ui/src/settings/index.ts diff --git a/apps-archived/maerchenzauber/apps/web/src/routes/(protected)/settings/+page.svelte b/apps-archived/maerchenzauber/apps/web/src/routes/(protected)/settings/+page.svelte index 4ac83a1af..d95fb9405 100644 --- a/apps-archived/maerchenzauber/apps/web/src/routes/(protected)/settings/+page.svelte +++ b/apps-archived/maerchenzauber/apps/web/src/routes/(protected)/settings/+page.svelte @@ -4,6 +4,15 @@ import { goto } from '$app/navigation'; import { dataService } from '$lib/api'; import { toastStore } from '$lib/stores/toast.svelte'; + import { + SettingsPage, + SettingsSection, + SettingsCard, + SettingsRow, + SettingsToggle, + SettingsDangerZone, + SettingsDangerButton, + } from '@manacore/shared-ui'; // Stats let storyCount = $state(0); @@ -76,22 +85,19 @@ toastStore.success('Bildmodell gespeichert'); } } + + async function handleLogout() { + await authStore.signOut(); + goto('/login'); + } Einstellungen | Märchenzauber -
- -
-

Einstellungen

-

- Verwalte dein Konto und deine Einstellungen -

-
- - + +
@@ -136,65 +142,65 @@
- -
-

Darstellung

+ + + {#snippet icon()} + + + + {/snippet} -
- -
-
-
- {#if isDarkMode} - - - - {:else} - - - - {/if} -
-
-

Dunkelmodus

-

- {isDarkMode ? 'Aktiviert' : 'Deaktiviert'} -

-
-
- -
-
-
+ + + {#snippet icon()} + {#if isDarkMode} + + + + {:else} + + + + {/if} + {/snippet} + + + - -
-

Bildgenerierung

-

+ + + {#snippet icon()} + + + + {/snippet} + +

Wähle das KI-Modell für die Illustration deiner Geschichten

@@ -205,13 +211,13 @@ class="flex w-full items-center gap-3 rounded-xl p-4 text-left transition-all {selectedImageModel === model.id ? 'bg-pink-50 ring-2 ring-pink-500 dark:bg-pink-900/20' - : 'bg-gray-50 hover:bg-gray-100 dark:bg-gray-700/50 dark:hover:bg-gray-700'}" + : 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted)/0.8)]'}" >
-

{model.name}

-

{model.description}

+

{model.name}

+

{model.description}

{model.speed} {#if selectedImageModel === model.id} - + {/each} -
+ -
-

Geschichten

+ + {#snippet icon()} + + + + {/snippet} -
- - -
- + + + {#snippet icon()} + -
-
-

Kreative wählen

-

Autoren & Illustratoren Stil

-
- - - - - - - + -
- + {#snippet icon()} + -
-
-

Story-Vorlagen

-

Inspiration fĂĽr neue Geschichten

-
- - - - - - - + -
- + {#snippet icon()} + -
-
-

Sammlungen

-

Geschichten organisieren

-
- - - - -
-
+ {/snippet} + + + -
-

Charaktere

+ + {#snippet icon()} + + + + {/snippet} -
- - + -
- + {#snippet icon()} + -
-
-

Charakter importieren

-

Mit Teilen-Code importieren

-
- - - - -
-
+ {/snippet} + + + -
-

Konto

+ + {#snippet icon()} + + + + {/snippet} -
- -
-
-

E-Mail

-

{authStore.user?.email || '-'}

-
-
- - -
-
-

Benutzer-ID

-

- {authStore.user?.id || '-'} -

-
-
-
-
+ + + {#snippet icon()} + + + + {/snippet} + + + {#snippet icon()} + + + + {/snippet} + + {authStore.user?.id || '-'} + + + + -
-

Abonnement

+ + {#snippet icon()} + + + + {/snippet}
-

Mana verwalten

-

Abonnement und Guthaben

+

Mana verwalten

+

Abonnement und Guthaben

- + -
+ - -
-

Mehr

+ + + {#snippet icon()} + + + + {/snippet} -
- - -
- + + + {#snippet icon()} + -
-
-

Feedback & Ideen

-

Stimme fĂĽr Features ab

-
- - - - - - - + -
- + {#snippet icon()} + -
-
-

Archiv

-

- Archivierte Geschichten und Charaktere -

-
- - - - - - - -
- + {/snippet} + + + {#snippet icon()} + -
-
-

Hilfe

-

FAQ und Support

-
- - - - + {/snippet} + + + - - -
-
- + + + + {#snippet icon()} + + + + {/snippet} + + + diff --git a/apps-archived/memoro/apps/web/src/routes/(protected)/settings/+page.svelte b/apps-archived/memoro/apps/web/src/routes/(protected)/settings/+page.svelte index 56c9972b3..cf33b502f 100644 --- a/apps-archived/memoro/apps/web/src/routes/(protected)/settings/+page.svelte +++ b/apps-archived/memoro/apps/web/src/routes/(protected)/settings/+page.svelte @@ -4,9 +4,15 @@ import { theme } from '$lib/stores/theme'; import { settings } from '$lib/stores/settings'; import type { ThemeMode } from '$lib/stores/theme'; - import SettingsToggle from '$lib/components/SettingsToggle.svelte'; - import SectionHeader from '$lib/components/SectionHeader.svelte'; - import { onMount } from 'svelte'; + import { + SettingsPage, + SettingsSection, + SettingsCard, + SettingsRow, + SettingsToggle, + SettingsDangerZone, + SettingsDangerButton, + } from '@manacore/shared-ui'; // theme is a Svelte 5 runes-based store, access properties directly let currentMode = $derived(theme.mode); @@ -51,7 +57,7 @@ } function handleRateApp() { - alert('Thank you for your interest! Rating feature coming soon for the web version. 🌟'); + alert('Thank you for your interest! Rating feature coming soon for the web version.'); } // Copy app info @@ -78,7 +84,7 @@ User: ${currentUser?.email || 'N/A'}`; settings.setDeveloperMode(newMode); alert( newMode - ? '🎉 Developer Mode activated!\nAdvanced settings are now visible.' + ? 'Developer Mode activated! Advanced settings are now visible.' : 'Developer Mode deactivated.' ); } @@ -87,7 +93,7 @@ User: ${currentUser?.email || 'N/A'}`; // Delete account confirmation function handleDeleteAccount() { const confirmed = confirm( - '⚠️ Are you sure you want to delete your account?\n\nThis action cannot be undone. All your data will be permanently deleted.' + 'Are you sure you want to delete your account?\n\nThis action cannot be undone. All your data will be permanently deleted.' ); if (confirmed) { const doubleConfirm = confirm( @@ -98,270 +104,406 @@ User: ${currentUser?.email || 'N/A'}`; } } } + + function handleResetSettings() { + if (confirm('Reset all settings to defaults?')) { + settings.reset(); + alert('Settings reset to defaults!'); + } + } Settings - Memoro -
- -
-
-

Settings

- - -
- -
-

Theme Mode

-
- {#each themeModes as mode} - - {/each} -
-

- Choose how Memoro looks. System automatically matches your device's theme. -

-
-
- - - (showUIElements = !showUIElements)} - /> - {#if showUIElements} -
- - - - -
- {/if} - - - -
- + + + {#snippet icon()} + + - -
+ + {/snippet} - - -
- - -
- - -
- -
- - {#if showMoreSettings} -
-

Delete Account

-

- If you delete your account, all your data will be permanently deleted. This action - cannot be undone. -

+ +

Theme Mode

+
+ {#each themeModes as mode} + {/each} +
+

+ Choose how Memoro looks. System automatically matches your device's theme. +

+ + + + + + {#snippet icon()} + + + + {/snippet} + + + + {#if showUIElements} + + + {#snippet icon()} + - Delete Account - -
- {/if} + {/snippet} + + + {#snippet icon()} + + + + {/snippet} + + + {#snippet icon()} + + + + {/snippet} + + + {#snippet icon()} + + + + {/snippet} + + + {/if} + - - {#if currentSettings.developerMode} - -
- - { - if (confirm('Reset all settings to defaults?')) { - settings.reset(); - alert('Settings reset to defaults!'); - } - }} - /> -
- {/if} + + + {#snippet icon()} + + + + {/snippet} - - -
- {#if currentUser} -
- -

{currentUser.email || 'No email available'}

-
- {/if} - - -
+ {/snippet} + + + {#snippet icon()} + + + + {/snippet} + + + - - -
+ + + {#snippet icon()} + + + + {/snippet} + + + + {#snippet icon()} + + + + {/snippet} + + + {#snippet icon()} + + + + {/snippet} + + + + + + + {#snippet icon()} + + + + {/snippet} + + + + {#snippet icon()} + + + + {/snippet} + + + + + + {#if currentSettings.developerMode} + + {#snippet icon()} + + + + {/snippet} + + + + {#snippet icon()} + + + + {/snippet} + + + {#snippet icon()} + + + + {/snippet} + + + + {/if} + + + + {#snippet icon()} + + + + {/snippet} + + +
-
-
- Version - 0.1.0 -
-
- Platform - Web -
-
- Build - Beta -
-
- Browser - {navigator.userAgent.split(' ').slice(-2).join(' ')} -
-
+ + 0.1.0 + + + Web + + + Beta + + + + {navigator.userAgent.split(' ').slice(-2).join(' ')} + + + + - -
- -

Made with ❤️ in Germany

- {#if clickCount > 0 && clickCount < 7} -

{7 - clickCount} more clicks...

- {/if} -
-
+ + + + {#if showMoreSettings} + + + {#snippet icon()} + + + + {/snippet} + + + {/if} + + + + + {#snippet icon()} + + + + {/snippet} + + + + +
+ +

Made with love in Germany

+ {#if clickCount > 0 && clickCount < 7} +

+ {7 - clickCount} more clicks... +

+ {/if}
-
- - + diff --git a/apps-archived/nutriphi/apps/web/src/routes/(protected)/settings/+page.svelte b/apps-archived/nutriphi/apps/web/src/routes/(protected)/settings/+page.svelte index a38da9ed3..bbebc3b7e 100644 --- a/apps-archived/nutriphi/apps/web/src/routes/(protected)/settings/+page.svelte +++ b/apps-archived/nutriphi/apps/web/src/routes/(protected)/settings/+page.svelte @@ -2,6 +2,15 @@ import { goto } from '$app/navigation'; import { auth, user } from '$lib/stores/auth'; import { theme } from '$lib/stores/theme'; + import { + SettingsPage, + SettingsSection, + SettingsCard, + SettingsRow, + SettingsToggle, + SettingsDangerZone, + SettingsDangerButton, + } from '@manacore/shared-ui'; let isDeleting = $state(false); let showDeleteConfirm = $state(false); @@ -25,129 +34,215 @@ await auth.signOut(); goto('/login'); } + + function toggleDarkMode(value: boolean) { + theme.toggleMode(); + } -
- -
-

Einstellungen

-

Verwalte dein Konto und App-Einstellungen

-
+ + + + {#snippet icon()} + + + + {/snippet} - -
-

Konto

-
-
-
-

E-Mail

-

{$user?.email || 'Nicht angemeldet'}

-
-
-
-
-

Benutzer-ID

-

{$user?.id || '—'}

-
-
-
-
+ + + {#snippet icon()} + + + + {/snippet} + + + {#snippet icon()} + + + + {/snippet} + {$user?.id || '—'} + + + - -
-

Erscheinungsbild

-
-
-
-

Dunkles Design

-

- Aktiviere den Dark Mode fĂĽr eine augenfreundliche Ansicht -

-
- -
-
-
+ + + {#snippet icon()} + + + + {/snippet} - -
-

Datenverwaltung

-
-
-
-

Daten exportieren

-

- Exportiere alle deine Mahlzeiten und Statistiken -

-
- -
+ + + -
- -
-
-

Alle Daten löschen

-

- Löscht alle deine Mahlzeiten und Statistiken unwiderruflich -

-
- {#if showDeleteConfirm} + + {#if showDeleteConfirm} +
+
+

Alle Daten löschen

+

+ Löscht alle deine Mahlzeiten und Statistiken unwiderruflich +

+
- {:else} - - {/if} -
-
-
+
+ {:else} + + {#snippet icon()} + + + + {/snippet} + + {/if} + + - - + + + + {#snippet icon()} + + + + {/snippet} + + -
-

Nutriphi Web v0.1.0

-

Teil des Mana Core Ă–kosystems

-
-
+ + {#snippet icon()} + + + + {/snippet} + + + + 0.1.0 + + + +

+ Teil des Mana Core Ă–kosystems +

+ + diff --git a/apps-archived/uload/apps/web/src/routes/(app)/settings/+page.svelte b/apps-archived/uload/apps/web/src/routes/(app)/settings/+page.svelte index 03a62e227..3fcfff0f5 100644 --- a/apps-archived/uload/apps/web/src/routes/(app)/settings/+page.svelte +++ b/apps-archived/uload/apps/web/src/routes/(app)/settings/+page.svelte @@ -4,6 +4,14 @@ import { page } from '$app/stores'; import { toastMessages, notify } from '$lib/services/toast'; import * as m from '$paraglide/messages'; + import { + SettingsPage, + SettingsSection, + SettingsCard, + SettingsRow, + SettingsDangerZone, + SettingsDangerButton, + } from '@manacore/shared-ui'; let { data, form }: { data: PageData; form: ActionData } = $props(); let isSubmitting = $state(false); @@ -28,14 +36,8 @@ } -
-
-
-

Settings

-

Manage your account and preferences

-
- -
+ +

@@ -779,5 +781,4 @@

-
-
+ diff --git a/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte index 94b5b9f3f..1d1a07429 100644 --- a/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte +++ b/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte @@ -1,24 +1,34 @@ -
-
-

Settings

-

- Manage your account settings and preferences -

-
- -
- - -

Profile Information

+ + + + {#snippet icon()} + + + + {/snippet} +
{#if form?.success}
@@ -59,15 +70,15 @@ id="email" value={data.session?.user?.email || ''} disabled - class="bg-gray-50 dark:bg-gray-900" + class="bg-[hsl(var(--muted))]" /> -

Email cannot be changed

+

Email cannot be changed

@@ -83,7 +94,7 @@
@@ -101,74 +112,116 @@
- + + - - -

Account Information

+ + + {#snippet icon()} + + + + {/snippet} -
-
-
- Available Credits - - {data.profile?.credits || 0} - -
-
+ + + {#snippet icon()} + + + + {/snippet} + + {data.profile?.credits || 0} + + -
-
- Subscription Plan - - {data.profile?.subscription_plan_id || 'Free'} - -
-
+ + {#snippet icon()} + + + + {/snippet} + + {data.profile?.subscription_plan_id || 'Free'} + + -
- Subscription Status - - {data.profile?.subscription_status || 'inactive'} - -
+ + {#snippet icon()} + + + + {/snippet} + + {data.profile?.subscription_status || 'inactive'} + + -
- Member Since - - {data.profile?.created_at - ? new Date(data.profile.created_at).toLocaleDateString() - : 'N/A'} - -
-
- + + {#snippet icon()} + + + + {/snippet} + + {data.profile?.created_at + ? new Date(data.profile.created_at).toLocaleDateString() + : 'N/A'} + + + + - - -

Danger Zone

- -
-
-

Delete Account

-

- Once you delete your account, there is no going back. Please be certain. -

- -
-
- -
-
+ + + {}} + disabled + border={false} + > + {#snippet icon()} + + + + {/snippet} + + + diff --git a/apps/presi/apps/web/src/routes/settings/+page.svelte b/apps/presi/apps/web/src/routes/settings/+page.svelte index 024313f84..c5e816257 100644 --- a/apps/presi/apps/web/src/routes/settings/+page.svelte +++ b/apps/presi/apps/web/src/routes/settings/+page.svelte @@ -2,125 +2,168 @@ import { goto } from '$app/navigation'; import { auth } from '$lib/stores/auth.svelte'; import { theme } from '$lib/stores/theme'; - import { User, Mail, Shield, LogOut, Sun, Moon, Monitor } from 'lucide-svelte'; + import { + SettingsPage, + SettingsSection, + SettingsCard, + SettingsRow, + SettingsToggle, + SettingsDangerZone, + SettingsDangerButton, + } from '@manacore/shared-ui'; function handleLogout() { auth.logout(); goto('/login'); } + + function setThemeMode(mode: 'light' | 'dark' | 'system') { + theme.setMode(mode); + } Settings - Presi -
-

Settings

+ + + + {#snippet icon()} + + + + {/snippet} -
- -
-
-

- - Account -

-
-
-
-
- -
-

Email

-

{auth.user?.email}

-
-
-
-
-
- -
-

User ID

-

{auth.user?.id}

-
-
-
-
-
+ + + {#snippet icon()} + + + + {/snippet} + + + {#snippet icon()} + + + + {/snippet} + {auth.user?.id || '-'} + + + - -
-
-

- - Appearance -

-
-
-

Choose your preferred theme

+ + + {#snippet icon()} + + + + {/snippet} + + +
+

Theme

+

+ Choose your preferred theme +

-
+ + - -
+ + -
-

Danger Zone

-
-
-
-
-

Sign out

-

- Sign out of your account on this device -

-
- -
-
-
-
-
+ {#snippet icon()} + + + + {/snippet} + + + diff --git a/apps/zitare/apps/web/src/routes/settings/+page.svelte b/apps/zitare/apps/web/src/routes/settings/+page.svelte index c1f7f0c7e..ad5be416c 100644 --- a/apps/zitare/apps/web/src/routes/settings/+page.svelte +++ b/apps/zitare/apps/web/src/routes/settings/+page.svelte @@ -4,15 +4,15 @@ import { theme } from '$lib/stores/theme'; import { THEME_DEFINITIONS } from '@manacore/shared-theme'; import { ThemeColorPreview } from '@manacore/shared-theme-ui'; - import { Sparkle, Leaf, Hexagon, Waves } from '@manacore/shared-icons'; - - // Theme icon mapping - const themeIcons = { - sparkle: Sparkle, - leaf: Leaf, - hexagon: Hexagon, - waves: Waves, - } as const; + import { + SettingsPage, + SettingsSection, + SettingsCard, + SettingsRow, + SettingsToggle, + SettingsDangerZone, + SettingsDangerButton, + } from '@manacore/shared-ui'; // Settings state let language = $state<'de' | 'en'>('de'); @@ -32,7 +32,7 @@ localStorage.setItem(key, String(value)); } - function toggleDarkMode() { + function toggleDarkMode(value: boolean) { theme.toggleMode(); } @@ -59,388 +59,191 @@ Einstellungen - Zitare -
-
-

Einstellungen

-
- + -
-

Persönlich

+ + {#snippet icon()} + + + + {/snippet} -
-
-

Dein Name

+ +
+ +

+ Wird als Standard-Autor fĂĽr eigene Zitate verwendet +

- -

Wird als Standard-Autor fĂĽr eigene Zitate verwendet

-
-
+ + -
-

Aussehen

- - -
-
-
-

Dark Mode

-

Dunkles Farbschema verwenden

-
- -
-
- - -
-
-
-

Aktuelles Theme

-

- {#if THEME_DEFINITIONS[theme.variant].icon && themeIcons[THEME_DEFINITIONS[theme.variant].icon as keyof typeof themeIcons]} - - {/if} - {THEME_DEFINITIONS[theme.variant].label} -

-
- -
-
- - -
-
-

Farbvorschau

-

So sieht die App mit dem aktuellen Theme aus

-
- -
- + {#snippet icon()} + + + + {/snippet} + + + + {#snippet icon()} + + + + {/snippet} + + + goto('/themes')} + > + {#snippet icon()} + + + + {/snippet} + + Themes wählen + + + +
+

Farbvorschau

+

+ So sieht die App mit dem aktuellen Theme aus +

+
+ +
-
-
+ + -
-

Sprache

+ + {#snippet icon()} + + + + {/snippet} -
-
-
-

Sprache

-

Sprache der App und Zitate

-
-
- - + +
+
+
+

Sprache

+

Sprache der App und Zitate

+
+
+ + +
-
-
+ + -
-

Ăśber

+ + {#snippet icon()} + + + + {/snippet} -
-
- Version - 1.0.0 -
-
-
+ + + 1.0.0 + + + -
-

Daten

- -
- -
-
-
- - + + + {#snippet icon()} + + + + {/snippet} + + + diff --git a/packages/shared-ui/src/index.ts b/packages/shared-ui/src/index.ts index 0c1580b28..8995b34f1 100644 --- a/packages/shared-ui/src/index.ts +++ b/packages/shared-ui/src/index.ts @@ -47,3 +47,14 @@ export type { PillNavElement, PillNavigationProps, } from './navigation'; + +// Settings +export { + SettingsPage, + SettingsSection, + SettingsCard, + SettingsRow, + SettingsToggle, + SettingsDangerZone, + SettingsDangerButton, +} from './settings'; diff --git a/packages/shared-ui/src/settings/SettingsCard.svelte b/packages/shared-ui/src/settings/SettingsCard.svelte new file mode 100644 index 000000000..9ebf35ee1 --- /dev/null +++ b/packages/shared-ui/src/settings/SettingsCard.svelte @@ -0,0 +1,107 @@ + + +
+ {#if title || description} +
+ {#if title} +

{title}

+ {/if} + {#if description} +

{description}

+ {/if} +
+ {/if} + +
+ {@render children()} +
+
+ + diff --git a/packages/shared-ui/src/settings/SettingsDangerButton.svelte b/packages/shared-ui/src/settings/SettingsDangerButton.svelte new file mode 100644 index 000000000..a0278d453 --- /dev/null +++ b/packages/shared-ui/src/settings/SettingsDangerButton.svelte @@ -0,0 +1,180 @@ + + +
+
+ {#if icon} + + {@render icon()} + + {/if} +
+ {label} + {#if description} + {description} + {/if} +
+
+ + +
+ + diff --git a/packages/shared-ui/src/settings/SettingsDangerZone.svelte b/packages/shared-ui/src/settings/SettingsDangerZone.svelte new file mode 100644 index 000000000..9b256d179 --- /dev/null +++ b/packages/shared-ui/src/settings/SettingsDangerZone.svelte @@ -0,0 +1,71 @@ + + +
+
+

{title}

+
+ +
+ {@render children()} +
+
+ + diff --git a/packages/shared-ui/src/settings/SettingsPage.svelte b/packages/shared-ui/src/settings/SettingsPage.svelte new file mode 100644 index 000000000..87665c36b --- /dev/null +++ b/packages/shared-ui/src/settings/SettingsPage.svelte @@ -0,0 +1,92 @@ + + +
+
+
+

{title}

+ {#if subtitle} +

{subtitle}

+ {/if} +
+ +
+ {@render children()} +
+
+
+ + diff --git a/packages/shared-ui/src/settings/SettingsRow.svelte b/packages/shared-ui/src/settings/SettingsRow.svelte new file mode 100644 index 000000000..c8ef8df0e --- /dev/null +++ b/packages/shared-ui/src/settings/SettingsRow.svelte @@ -0,0 +1,240 @@ + + +{#if href} + +
+ {#if icon} + + {@render icon()} + + {/if} +
+ {label} + {#if description} + {description} + {/if} +
+
+
+ {#if children} + {@render children()} + {:else} + + + + {/if} +
+ +{:else if onclick} + +{:else} +
+
+ {#if icon} + + {@render icon()} + + {/if} +
+ {label} + {#if description} + {description} + {/if} +
+
+ {#if children} +
+ {@render children()} +
+ {/if} +
+{/if} + + diff --git a/packages/shared-ui/src/settings/SettingsSection.svelte b/packages/shared-ui/src/settings/SettingsSection.svelte new file mode 100644 index 000000000..8600633bf --- /dev/null +++ b/packages/shared-ui/src/settings/SettingsSection.svelte @@ -0,0 +1,91 @@ + + +
+ {#if title} +
+ {#if icon} + + {@render icon()} + + {/if} +

{title}

+
+ {/if} + +
+ {@render children()} +
+
+ + diff --git a/packages/shared-ui/src/settings/SettingsToggle.svelte b/packages/shared-ui/src/settings/SettingsToggle.svelte new file mode 100644 index 000000000..68ce3a707 --- /dev/null +++ b/packages/shared-ui/src/settings/SettingsToggle.svelte @@ -0,0 +1,202 @@ + + +
+
+ {#if icon} + + {@render icon()} + + {/if} +
+ {label} + {#if description} + {description} + {/if} +
+
+ + +
+ + diff --git a/packages/shared-ui/src/settings/index.ts b/packages/shared-ui/src/settings/index.ts new file mode 100644 index 000000000..6e4d3f0db --- /dev/null +++ b/packages/shared-ui/src/settings/index.ts @@ -0,0 +1,8 @@ +// Settings Components +export { default as SettingsPage } from './SettingsPage.svelte'; +export { default as SettingsSection } from './SettingsSection.svelte'; +export { default as SettingsCard } from './SettingsCard.svelte'; +export { default as SettingsRow } from './SettingsRow.svelte'; +export { default as SettingsToggle } from './SettingsToggle.svelte'; +export { default as SettingsDangerZone } from './SettingsDangerZone.svelte'; +export { default as SettingsDangerButton } from './SettingsDangerButton.svelte';