@vibesdotdev/account 0.0.0-stage → 1.0.0-rc.3

package/dist/svelte/components/AccountSettingsDirectory.svelte

@@ -0,0 +1,540 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import { EmptyState } from '@vibesdotdev/kit/components/layout';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import type { AccountSettingsRecord } from '@vibesdotdev/account/api';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import {
+		createAccountSettingsDirectoryFacets,
+		createAccountSettingsDirectoryGroups,
+		createAccountSettingsDirectoryItems,
+		filterAccountSettingsDirectoryItems,
+		formatDirectoryFacetLabel,
+		mergeAccountSettingsDirectoryRouteOverrides,
+		type AccountSettingsDirectoryItem,
+		type AccountSettingsDirectoryItemInput,
+		type AccountSettingsDirectoryManifest,
+		type AccountSettingsDirectoryRouteOverride,
+		type AccountSettingsDirectoryScope,
+		type AccountSettingsDirectoryStatus,
+		type AccountSettingsDirectorySyncState
+	} from '../settings-directory.js';
+	import {
+		createAccountSettingsSectionRouteOverrides,
+		createAccountSettingsSectionStateRouteOverrides,
+		listAccountSettingsSectionDefinitions,
+		type AccountSettingsSectionDefinition
+	} from '../settings-sections.js';
+
+	type Props = {
+		manifests?: readonly AccountSettingsDirectoryManifest[];
+		sectionDefinitions?: readonly AccountSettingsSectionDefinition[];
+		includeRegisteredSections?: boolean;
+		items?: readonly AccountSettingsDirectoryItemInput[];
+		routeOverrides?: Record<string, AccountSettingsDirectoryRouteOverride>;
+		settingsRecord?: AccountSettingsRecord | null;
+		useAccountState?: boolean;
+		emptyTitle?: string;
+		emptyDescription?: string;
+		showControls?: boolean;
+		searchPlaceholder?: string;
+		layout?: 'grid' | 'curated';
+		featuredItemIds?: readonly string[];
+		class?: string;
+	};
+
+	const DEFAULT_FEATURED_ITEM_IDS = [
+		'user.profile',
+		'user.appearance',
+		'user.notifications',
+		'user.privacy',
+		'user.project-defaults',
+		'account.security',
+		'account.billing'
+	] as const;
+
+	let {
+		manifests = [],
+		sectionDefinitions,
+		includeRegisteredSections = false,
+		items = [],
+		routeOverrides = {},
+		settingsRecord = undefined,
+		useAccountState = true,
+		emptyTitle = 'No settings available',
+		emptyDescription = 'Settings sections will appear here when they are registered.',
+		showControls = true,
+		searchPlaceholder = 'Search settings',
+		layout = 'grid',
+		featuredItemIds = DEFAULT_FEATURED_ITEM_IDS,
+		class: className = ''
+	}: Props = $props();
+
+	let query = $state('');
+	let selectedScope = $state<AccountSettingsDirectoryScope | 'all'>('all');
+	let selectedSection = $state('all');
+	let selectedStatus = $state<AccountSettingsDirectoryStatus | 'all'>('all');
+	let selectedSyncState = $state<AccountSettingsDirectorySyncState | 'all'>('all');
+	let filtersOpen = $state(false);
+
+	const activeSectionDefinitions = $derived(
+		sectionDefinitions ?? (includeRegisteredSections ? listAccountSettingsSectionDefinitions() : [])
+	);
+	const usingAccountStateRecord = $derived(settingsRecord === undefined && useAccountState);
+	const effectiveSettingsRecord = $derived(
+		settingsRecord !== undefined
+			? settingsRecord
+			: useAccountState
+				? accountState.userSettings
+				: null
+	);
+	const effectiveManifests = $derived([
+		...manifests,
+		...activeSectionDefinitions.map((definition) => definition.manifest)
+	]);
+	const effectiveRouteOverrides = $derived(
+		mergeAccountSettingsDirectoryRouteOverrides(
+			createAccountSettingsSectionRouteOverrides(activeSectionDefinitions),
+			createAccountSettingsSectionStateRouteOverrides(
+				effectiveSettingsRecord,
+				activeSectionDefinitions,
+				{
+					loading: usingAccountStateRecord ? accountState.loading : false,
+					error: usingAccountStateRecord ? accountState.error : null
+				}
+			),
+			routeOverrides
+		)
+	);
+	const directoryItems = $derived(
+		createAccountSettingsDirectoryItems(effectiveManifests, {
+			routeOverrides: effectiveRouteOverrides,
+			extraItems: items
+		})
+	);
+	const facets = $derived(createAccountSettingsDirectoryFacets(directoryItems));
+	const filteredItems = $derived(
+		filterAccountSettingsDirectoryItems(directoryItems, {
+			query,
+			scope: selectedScope === 'all' ? 'all' : selectedScope,
+			section: selectedSection,
+			status: selectedStatus === 'all' ? 'all' : selectedStatus,
+			syncState: selectedSyncState === 'all' ? 'all' : selectedSyncState
+		})
+	);
+	const hasActiveFilters = $derived(
+		query.trim().length > 0 ||
+			selectedScope !== 'all' ||
+			selectedSection !== 'all' ||
+			selectedStatus !== 'all' ||
+			selectedSyncState !== 'all'
+	);
+	const activeFilterCount = $derived(
+		[
+			selectedScope !== 'all',
+			selectedSection !== 'all',
+			selectedStatus !== 'all',
+			selectedSyncState !== 'all'
+		].filter(Boolean).length
+	);
+	const useCuratedLayout = $derived(layout === 'curated' && !hasActiveFilters);
+	const featuredItems = $derived(
+		useCuratedLayout
+			? featuredItemIds
+					.map((id) => filteredItems.find((item) => item.id === id))
+					.filter((item): item is AccountSettingsDirectoryItem => Boolean(item))
+			: []
+	);
+	const featuredItemIdsSet = $derived(new Set(featuredItems.map((item) => item.id)));
+	const secondaryItems = $derived(
+		useCuratedLayout ? filteredItems.filter((item) => !featuredItemIdsSet.has(item.id)) : []
+	);
+	const secondaryGroups = $derived(createAccountSettingsDirectoryGroups(secondaryItems));
+
+	function formatLabel(value: string): string {
+		return formatDirectoryFacetLabel(value);
+	}
+
+	function resetFilters(): void {
+		query = '';
+		selectedScope = 'all';
+		selectedSection = 'all';
+		selectedStatus = 'all';
+		selectedSyncState = 'all';
+		filtersOpen = false;
+	}
+
+	function toDirectoryScope(value: string): AccountSettingsDirectoryScope | 'all' {
+		if (value === 'all') return 'all';
+		if (
+			value === 'user' ||
+			value === 'organization' ||
+			value === 'security' ||
+			value === 'billing' ||
+			value === 'system' ||
+			value === 'account'
+		) {
+			return value;
+		}
+		return 'all';
+	}
+
+	function toDirectoryStatus(value: string): AccountSettingsDirectoryStatus | 'all' {
+		if (value === 'live' || value === 'planned') return value;
+		return 'all';
+	}
+
+	function toDirectorySyncState(value: string): AccountSettingsDirectorySyncState | 'all' {
+		if (
+			value === 'current' ||
+			value === 'attention' ||
+			value === 'syncing' ||
+			value === 'unknown'
+		) {
+			return value;
+		}
+		return 'all';
+	}
+
+	function selectedLabel(
+		value: string,
+		fallback: string,
+		facets: readonly { value: string; label: string; count: number }[]
+	): string {
+		if (value === 'all') return fallback;
+		return facets.find((facet) => facet.value === value)?.label ?? formatLabel(value);
+	}
+
+	function syncStateLabel(value: string): string {
+		if (value === 'attention') return 'Needs Attention';
+		return formatLabel(value);
+	}
+
+	function formatSavedAt(value: string): string {
+		return new Date(value).toLocaleDateString();
+	}
+
+	function formatItemMeta(item: AccountSettingsDirectoryItem): string {
+		if (item.lastSavedAt) return `Saved ${formatSavedAt(item.lastSavedAt)}`;
+		if (item.fieldCount > 0) {
+			return `${item.fieldCount} ${item.fieldCount === 1 ? 'field' : 'fields'}`;
+		}
+		if (item.external) return `Opens ${item.badge ?? 'app'}`;
+		return 'Account';
+	}
+</script>
+
+<div class={`account-settings-directory ${className}`}>
+	{#if directoryItems.length === 0}
+		<EmptyState
+			icon="lucide:settings"
+			title={emptyTitle}
+			description={emptyDescription}
+			size="sm"
+		/>
+	{:else}
+		{#if showControls}
+			<div class="mb-5 space-y-3">
+				<div class="flex flex-col gap-3 lg:flex-row lg:items-center">
+					<div class="min-w-0 flex-1">
+						<Input
+							type="search"
+							value={query}
+							placeholder={searchPlaceholder}
+							aria-label="Search settings"
+							oninput={(event) => {
+								query = event.currentTarget.value;
+							}}
+						/>
+					</div>
+					<div class="flex flex-wrap items-center gap-2 lg:justify-end">
+						<span class="text-xs text-muted-foreground">
+							{filteredItems.length} of {directoryItems.length} sections
+						</span>
+						<Button
+							type="button"
+							variant={filtersOpen || activeFilterCount > 0 ? 'secondary' : 'outline'}
+							class="gap-2"
+							onclick={() => {
+								filtersOpen = !filtersOpen;
+							}}
+						>
+							<Icon icon="lucide:sliders-horizontal" class="h-4 w-4" />
+							Filters{activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}
+						</Button>
+						{#if hasActiveFilters}
+							<Button type="button" variant="ghost" onclick={resetFilters}>Reset</Button>
+						{/if}
+					</div>
+				</div>
+
+				{#if filtersOpen}
+					<div class="grid gap-2 rounded-md border bg-muted/20 p-3 sm:grid-cols-2 xl:grid-cols-4">
+						<Select.Root
+							type="single"
+							value={selectedScope}
+							onValueChange={(value: string) => {
+								selectedScope = toDirectoryScope(value);
+							}}
+						>
+							<Select.Trigger aria-label="Filter by scope">
+								<span>{selectedLabel(selectedScope, 'All Scopes', facets.scopes)}</span>
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="all">All Scopes</Select.Item>
+								{#each facets.scopes as facet (facet.value)}
+									<Select.Item value={facet.value}>{facet.label} ({facet.count})</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+
+						<Select.Root
+							type="single"
+							value={selectedSection}
+							onValueChange={(value: string) => {
+								selectedSection = value;
+							}}
+						>
+							<Select.Trigger aria-label="Filter by section">
+								<span>{selectedLabel(selectedSection, 'All Sections', facets.sections)}</span>
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="all">All Sections</Select.Item>
+								{#each facets.sections as facet (facet.value)}
+									<Select.Item value={facet.value}>{facet.label} ({facet.count})</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+
+						<Select.Root
+							type="single"
+							value={selectedStatus}
+							onValueChange={(value: string) => {
+								selectedStatus = toDirectoryStatus(value);
+							}}
+						>
+							<Select.Trigger aria-label="Filter by status">
+								<span>{selectedLabel(selectedStatus, 'All Statuses', facets.statuses)}</span>
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="all">All Statuses</Select.Item>
+								{#each facets.statuses as facet (facet.value)}
+									<Select.Item value={facet.value}>{facet.label} ({facet.count})</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+
+						<Select.Root
+							type="single"
+							value={selectedSyncState}
+							onValueChange={(value: string) => {
+								selectedSyncState = toDirectorySyncState(value);
+							}}
+						>
+							<Select.Trigger aria-label="Filter by sync state">
+								<span>{selectedLabel(selectedSyncState, 'All States', facets.syncStates)}</span>
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="all">All States</Select.Item>
+								{#each facets.syncStates as facet (facet.value)}
+									<Select.Item value={facet.value}
+										>{syncStateLabel(facet.value)} ({facet.count})</Select.Item
+									>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if filteredItems.length === 0}
+			<EmptyState
+				icon="lucide:search"
+				title="No matching settings"
+				description="Adjust the search or filters to show more settings."
+				size="sm"
+			/>
+		{:else}
+			{#if useCuratedLayout}
+				<div class="space-y-5">
+					{#if featuredItems.length > 0}
+						<section aria-labelledby="account-settings-essentials">
+							<div class="mb-2 flex items-center justify-between gap-3">
+								<h2 id="account-settings-essentials" class="text-sm font-medium">Start here</h2>
+								<span class="text-xs text-muted-foreground">Most used</span>
+							</div>
+							<div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+								{#each featuredItems as item (item.id)}
+									<a
+										href={item.href}
+										class="group block h-full rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+									>
+										<Card
+											class="h-full rounded-lg transition-colors group-hover:border-primary/60 group-hover:bg-accent/30"
+										>
+											<CardHeader class="gap-3">
+												<div class="flex items-start justify-between gap-3">
+													<div
+														class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border bg-background text-primary"
+													>
+														<Icon icon={item.icon} class="h-4 w-4" />
+													</div>
+													<div class="flex flex-wrap justify-end gap-2">
+														{#if item.badge}
+															<Badge variant="secondary">{item.badge}</Badge>
+														{/if}
+														{#if item.status === 'planned'}
+															<Badge variant="outline">Planned</Badge>
+														{/if}
+														{#if item.syncState === 'attention'}
+															<Badge variant="destructive">Needs Attention</Badge>
+														{:else if item.syncState === 'syncing'}
+															<Badge variant="outline">Syncing</Badge>
+														{/if}
+													</div>
+												</div>
+												<div class="space-y-2">
+													<CardTitle class="flex items-center gap-2 text-base leading-tight">
+														<span>{item.label}</span>
+														{#if item.external}
+															<Icon icon="lucide:arrow-up-right" class="h-3.5 w-3.5 text-muted-foreground" />
+														{/if}
+													</CardTitle>
+													<CardDescription class="line-clamp-3">{item.description}</CardDescription>
+												</div>
+											</CardHeader>
+											<CardContent
+												class="mt-auto flex items-center justify-between gap-3 pt-0 text-xs text-muted-foreground"
+											>
+												<span>{formatLabel(item.category)}</span>
+												<span>{formatItemMeta(item)}</span>
+											</CardContent>
+										</Card>
+									</a>
+								{/each}
+							</div>
+						</section>
+					{/if}
+
+					{#if secondaryGroups.length > 0}
+						<div class="pt-1">
+							<h2 class="text-sm font-medium">More settings by area</h2>
+						</div>
+						<div class="grid gap-3 xl:grid-cols-2">
+							{#each secondaryGroups as group (group.id)}
+								<section class="overflow-hidden rounded-lg border bg-card" aria-labelledby={`account-settings-group-${group.id}`}>
+									<div class="flex items-center justify-between gap-3 border-b px-4 py-3">
+										<h2 id={`account-settings-group-${group.id}`} class="text-sm font-medium">
+											{group.label}
+										</h2>
+										<span class="text-xs text-muted-foreground">{group.items.length}</span>
+									</div>
+									<div class="divide-y">
+										{#each group.items as item (item.id)}
+											<a
+												href={item.href}
+												class="group flex min-h-20 items-center gap-3 p-3 transition-colors hover:bg-accent/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+											>
+												<div
+													class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border bg-background text-primary"
+												>
+													<Icon icon={item.icon} class="h-4 w-4" />
+												</div>
+												<div class="min-w-0 flex-1 space-y-1">
+													<div class="flex flex-wrap items-center gap-2">
+														<span class="truncate text-sm font-medium">{item.label}</span>
+														{#if item.external}
+															<Icon icon="lucide:arrow-up-right" class="h-3.5 w-3.5 text-muted-foreground" />
+														{/if}
+														{#if item.badge}
+															<Badge variant="secondary" class="text-[10px]">{item.badge}</Badge>
+														{/if}
+														{#if item.status === 'planned'}
+															<Badge variant="outline" class="text-[10px]">Planned</Badge>
+														{/if}
+														{#if item.syncState === 'attention'}
+															<Badge variant="destructive" class="text-[10px]">Needs Attention</Badge>
+														{:else if item.syncState === 'syncing'}
+															<Badge variant="outline" class="text-[10px]">Syncing</Badge>
+														{/if}
+													</div>
+													<p class="line-clamp-2 text-sm text-muted-foreground">{item.description}</p>
+												</div>
+												<div class="hidden shrink-0 text-right text-xs text-muted-foreground sm:block">
+													{formatItemMeta(item)}
+												</div>
+											</a>
+										{/each}
+									</div>
+								</section>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{:else}
+				<div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+					{#each filteredItems as item (item.id)}
+						<a
+							href={item.href}
+							class="group block h-full rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+						>
+							<Card
+								class="h-full rounded-lg transition-colors group-hover:border-primary/60 group-hover:bg-accent/30"
+							>
+								<CardHeader class="gap-3">
+									<div class="flex items-start justify-between gap-3">
+										<div
+											class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border bg-background text-primary"
+										>
+											<Icon icon={item.icon} class="h-4 w-4" />
+										</div>
+										<div class="flex flex-wrap justify-end gap-2">
+											{#if item.badge}
+												<Badge variant="secondary">{item.badge}</Badge>
+											{/if}
+											{#if item.status === 'planned'}
+												<Badge variant="outline">Planned</Badge>
+											{/if}
+											{#if item.syncState === 'attention'}
+												<Badge variant="destructive">Needs Attention</Badge>
+											{:else if item.syncState === 'syncing'}
+												<Badge variant="outline">Syncing</Badge>
+											{/if}
+										</div>
+									</div>
+									<div class="space-y-2">
+										<CardTitle class="flex items-center gap-2 text-base leading-tight">
+											<span>{item.label}</span>
+											{#if item.external}
+												<Icon icon="lucide:arrow-up-right" class="h-3.5 w-3.5 text-muted-foreground" />
+											{/if}
+										</CardTitle>
+										<CardDescription class="line-clamp-3">{item.description}</CardDescription>
+									</div>
+								</CardHeader>
+								<CardContent
+									class="mt-auto flex items-center justify-between gap-3 pt-0 text-xs text-muted-foreground"
+								>
+									<span>{formatLabel(item.category)}</span>
+									<span>{formatItemMeta(item)}</span>
+								</CardContent>
+							</Card>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		{/if}
+	{/if}
+</div>

package/dist/svelte/components/AccountSettingsDirectory.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { AccountSettingsRecord } from '@vibesdotdev/account/api';
+import { type AccountSettingsDirectoryItemInput, type AccountSettingsDirectoryManifest, type AccountSettingsDirectoryRouteOverride } from '../settings-directory.ts';
+import { type AccountSettingsSectionDefinition } from '../settings-sections.ts';
+type Props = {
+    manifests?: readonly AccountSettingsDirectoryManifest[];
+    sectionDefinitions?: readonly AccountSettingsSectionDefinition[];
+    includeRegisteredSections?: boolean;
+    items?: readonly AccountSettingsDirectoryItemInput[];
+    routeOverrides?: Record<string, AccountSettingsDirectoryRouteOverride>;
+    settingsRecord?: AccountSettingsRecord | null;
+    useAccountState?: boolean;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    showControls?: boolean;
+    searchPlaceholder?: string;
+    layout?: 'grid' | 'curated';
+    featuredItemIds?: readonly string[];
+    class?: string;
+};
+declare const AccountSettingsDirectory: import("svelte").Component<Props, {}, "">;
+type AccountSettingsDirectory = ReturnType<typeof AccountSettingsDirectory>;
+export default AccountSettingsDirectory;
+//# sourceMappingURL=AccountSettingsDirectory.svelte.d.ts.map

package/dist/svelte/components/AccountSettingsDirectory.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountSettingsDirectory.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountSettingsDirectory.svelte.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAQL,KAAK,iCAAiC,EACtC,KAAK,gCAAgC,EACrC,KAAK,qCAAqC,EAI1C,MAAM,0BAA0B,CAAC;AACnC,OAAO,EAIL,KAAK,gCAAgC,EACrC,MAAM,yBAAyB,CAAC;AAGjC,KAAK,KAAK,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,gCAAgC,EAAE,CAAC;IACxD,kBAAkB,CAAC,EAAE,SAAS,gCAAgC,EAAE,CAAC;IACjE,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,iCAAiC,EAAE,CAAC;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qCAAqC,CAAC,CAAC;IACvE,cAAc,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAybH,QAAA,MAAM,wBAAwB,2CAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}