Settings Page Architecture

Overview

The /settings route is the central hub where Visitors, Buyers, and Malet Owners manage their account, privacy, notifications, and security. As features grew (MFA, passkeys, cookie consent, GDPR export, session monitoring, security audit log), the page exceeded 3,000 lines.

To maintain developer velocity and prevent merge conflicts, the settings page was modularized into 9 self-contained section components backed by a shared CSS foundation.

src/routes/settings/+page.svelte   (448 lines — thin orchestrator)
src/lib/components/settings/
├── settings-shared.css             (shared design patterns)
├── ProfileSection.svelte
├── ContactInfoSection.svelte
├── ConnectedAccountsSection.svelte
├── PrivacySecuritySection.svelte
├── DataCookiesSection.svelte
├── NotificationsSection.svelte
├── AdminSection.svelte
├── SessionSecuritySection.svelte
├── DangerZoneSection.svelte
├── SessionActivityPanel.svelte     (sub-panel)
├── SecurityEventLog.svelte         (sub-panel)
├── DataExportPanel.svelte          (sub-panel)
└── AgeVerificationPanel.svelte     (sub-panel)

Architecture

Parent Page (Orchestrator)

The parent +page.svelte is responsible for exactly three things:

1. Auth Guard — Redirects unauthenticated users to /auth
2. Sidebar Navigation — Renders the nav items and tracks the active section via IntersectionObserver
3. Section Composition — Renders each section component in order

<!-- Simplified structure -->
<ProfileSection />
<ContactInfoSection />
<ConnectedAccountsSection />
<PrivacySecuritySection />
<DataCookiesSection />
<NotificationsSection />
{#if $currentUser?.is_privileged}
	<AdminSection />
{/if}
<SessionSecuritySection />
<DangerZoneSection />

The parent owns no business logic — all state, handlers, and API calls live inside each section component.

Section Components

Each section component follows this contract:

Design Decision: Stores vs Props

Following Svelte 5 best practices:

• Stores (direct import): Used for global singletons like authStore, currentUser, notificationStore — these are accessed by dozens of components across the app
• Props ($props()): Not used here because the component tree is only 1 level deep — props would add verbosity with no testability benefit
• Context (setContext/getContext): Not needed — no deep nesting

Shared CSS: `settings-shared.css`

The shared CSS file contains reusable patterns used across all section components. Each component imports it:

<style>
	@import './settings-shared.css';

	/* Component-specific styles below */
	.my-special-icon {
		background: rgba(102, 126, 234, 0.12);
		color: var(--mall-accent);
	}
</style>

What's in `settings-shared.css`

Section Reference

ProfileSection

State: displayName, editingName, nameInput, nameSaved

Displays the user banner (avatar + email), display name editing with save/cancel, username (read-only, "Coming Soon"), and user ID.

ContactInfoSection

State: Email and phone update flows with OTP verification

Two parallel flows (email and phone), each with: input → request OTP → enter OTP → confirm. Supports optimistic success messages.

ConnectedAccountsSection

State: unlinkLoading, activeProviders

Lists OAuth providers (Google, Apple, X, Facebook) with connect/unlink actions. Uses AUTH_API_URL for OAuth redirect URIs.

PrivacySecuritySection

State: 12 MFA-related variables, visibility toggle

The largest section. Contains:

• Profile visibility toggle (PUBLIC/PRIVATE)
• Full MFA wizard (enroll → QR → verify → backup codes)
• MFA management (disable, regenerate backup codes)
• Passkey registration

DataCookiesSection

State: None (delegates to sub-panels)

Thin wrapper that composes DataExportPanel (GDPR Article 20) and AgeVerificationPanel.

NotificationsSection

State: Notification categories (from notificationStore)

Per-category rows with email/SMS/push toggles and a master toggle.

AdminSection

State: None

Simple link to /admin dashboard. Only rendered when $currentUser?.is_privileged is true.

SessionSecuritySection

State: None (delegates to sub-panels)

Composes SessionActivityPanel (active device monitoring) and SecurityEventLog (audit trail), plus the Sign Out button.

DangerZoneSection

State: showDeactivateConfirm, showDeleteConfirm, deactivateInput, deactivateReason, dangerLoading, dangerError

Account deactivation (amber, reversible, 30-day window) and deletion (red, irreversible, requires typing "DELETE").

Adding a New Section

Step 1: Create the Component

touch src/lib/components/settings/MyNewSection.svelte

Step 2: Follow the Template

<script lang="ts">
	// Import stores directly
	import { currentUser } from '../../../stores/auth';

	// Self-contained state
	let myValue = $state('');
</script>

<section class="settings-section" id="section-mynew" data-testid="settings-mynew">
	<div class="section-header">
		<div class="section-icon mynew-icon">
			<!-- SVG icon -->
		</div>
		<div>
			<h2>My New Section</h2>
			<p class="section-desc">Description of this section</p>
		</div>
	</div>

	<!-- Content using setting-row pattern -->
	<div class="setting-row">
		<div class="setting-label">
			<span class="label-text">Setting Name</span>
			<span class="label-hint">Helpful description</span>
		</div>
		<div class="setting-control">
			<span class="current-value">{myValue || 'Not set'}</span>
		</div>
	</div>
</section>

<style>
	@import './settings-shared.css';

	.mynew-icon {
		background: rgba(59, 130, 246, 0.12);
		color: #3b82f6;
	}
</style>

Step 3: Register in Parent

Add to +page.svelte:

import MyNewSection from '$lib/components/settings/MyNewSection.svelte';

Add to the navSections array:

{ id: 'mynew', label: 'My New Section', icon: 'star' }

Add to template:

<MyNewSection />

The IntersectionObserver will automatically detect the new id="section-mynew" and update the sidebar highlight.

File Reference

Related

• Privacy & Security APIs — Backend APIs for cookie consent, data export, sessions, and security events
• MFA & Passkeys — Two-factor authentication and passkey enrollment managed via settings
• Organization & Malet Management — Organization-level settings (billing, notifications)
• Alerts & Notifications — Frontend notification system and channel toggles
• Handle System & Sigil Taxonomy — User handle claim/change UI in ProfileSection
• Malet Navigation Architecture — Customizable Malet nav bar (NavEditor in owner settings)