astryx-dracula 0.6.2 → 0.7.0

package/templates/settings-sidebar.tsx

@@ -31,6 +31,7 @@ import { Tab, TabList } from "@astryxdesign/core/TabList";
 import { Heading, Text } from "@astryxdesign/core/Text";
 import { TextInput } from "@astryxdesign/core/TextInput";
 import { Toolbar } from "@astryxdesign/core/Toolbar";
+import { VisuallyHidden } from "@astryxdesign/core/VisuallyHidden";
 import type { InfoRow } from "astryx-dracula/shared/settings-data";
 import {
 	actionNoWrap,
@@ -50,10 +51,13 @@ import { ArrowLeft, ChevronRight, Lock, Monitor, ShieldCheck, Wrench } from "luc
 import { type CSSProperties, useState } from "react";
 
 // Anchor the page to the viewport height so the sidebar + content fill the
-// screen. Layout height="fill" is min-height:100% which collapses when the
-// host container is content-sized; Layout has no viewport-height prop.
+// screen. `Layout height="fill"` is height:100%, which collapses to auto
+// against a content-sized host; 100dvh is definite and needs no ancestor.
+// `height`, not `minHeight`: a min-height lets the Layout grow with its
+// content and hands the scroll back to the document, which is the failure
+// the fill is supposed to prevent.
 const fillViewport: CSSProperties = {
-	minHeight: "100dvh",
+	height: "100dvh",
 };
 const rowPadding: CSSProperties = {
 	paddingBlock: "var(--spacing-4)",
@@ -157,642 +161,657 @@ export default function SettingsSidebar() {
 	// Mobile, nav view: show only the menu (full width, no sidebar slot).
 	if (isNarrow && mobileView === "nav") {
 		return (
-			<Layout
-				height="fill"
-				style={fillViewport}
-				// padding={0}, not padding={2}. This wraps the SAME navList element
-				// the desktop LayoutPanel renders with padding={0}, and the navList's
-				// own paddingBlock/paddingInline props supply the 16px/12px inset.
-				// The extra 8px here is what made the same nav list measure 20px on
-				// mobile against 12px on desktop -- and against 24px further down,
-				// disagreed with each other too. The container owns no gutter; the
-				// list owns its own.
-				content={<LayoutContent padding={0}>{navList}</LayoutContent>}
-			/>
+			<>
+				{/* This branch is the whole page on a phone and the nav list carries no
+				    heading of its own, so the document would have none. */}
+				<VisuallyHidden>
+					<Heading level={1}>Settings</Heading>
+				</VisuallyHidden>
+				<Layout
+					height="fill"
+					style={fillViewport}
+					// padding={0}, not padding={2}. This wraps the SAME navList element
+					// the desktop LayoutPanel renders with padding={0}, and the navList's
+					// own paddingBlock/paddingInline props supply the 16px/12px inset.
+					// The extra 8px here is what made the same nav list measure 20px on
+					// mobile against 12px on desktop -- and against 24px further down,
+					// disagreed with each other too. The container owns no gutter; the
+					// list owns its own.
+					content={<LayoutContent padding={0}>{navList}</LayoutContent>}
+				/>
+			</>
 		);
 	}
 
 	return (
-		<Layout
-			height="fill"
-			contentWidth={1200}
-			style={fillViewport}
-			start={
-				isNarrow ? undefined : (
-					<LayoutPanel hasDivider padding={0}>
-						{navList}
-					</LayoutPanel>
-				)
-			}
-			content={
-				<LayoutContent padding={6}>
-					<VStack gap={0}>
-						{/* Mobile detail view: a back button sits beside the section title
+		<>
+			{/* The nav list is the whole page at narrow width, and lists no heading. */}
+			{isNarrow && (
+				<VisuallyHidden>
+					<Heading level={1}>Settings</Heading>
+				</VisuallyHidden>
+			)}
+			<Layout
+				height="fill"
+				contentWidth={1200}
+				style={fillViewport}
+				start={
+					isNarrow ? undefined : (
+						<LayoutPanel hasDivider padding={0}>
+							{navList}
+						</LayoutPanel>
+					)
+				}
+				content={
+					<LayoutContent padding={6}>
+						<VStack gap={0}>
+							{/* Mobile detail view: a back button sits beside the section title
                 (the per-section headings below are hidden on mobile). Toolbar's
                 start slot edge-compensates the ghost button so its icon aligns
                 flush with the content edge. */}
-						{isNarrow && (
-							<Toolbar
-								label={`Back to Account settings: ${activeNav === HOSTING_TOOLS_TITLE ? "Hosting tools" : activeNav}`}
-								gap={2}
-								startContent={
-									<>
-										<Button
-											label="Back to Account settings"
-											variant="ghost"
-											size="sm"
-											isIconOnly
-											icon={<Icon icon={ArrowLeft} size="sm" />}
-											onClick={() => setMobileView("nav")}
-										/>
-										<Heading level={1}>
-											{activeNav === HOSTING_TOOLS_TITLE ? "Hosting tools" : activeNav}
-										</Heading>
-									</>
-								}
-							/>
-						)}
-						{activeNav === "Login & security" && (
-							<VStack gap={6}>
-								{!isNarrow && <Heading level={1}>Login &amp; security</Heading>}
-
-								<TabList value={activeTab} onChange={setActiveTab} hasDivider>
-									<Tab value="login" label="Login" />
-									<Tab value="shared" label="Shared access" />
-								</TabList>
-
-								{activeTab === "login" && (
-									<VStack gap={8}>
-										<VStack gap={2}>
-											<Heading level={2}>Login</Heading>
-											{LOGIN_ROWS.map((row) => (
-												<InfoRowItem
-													key={row.label}
-													{...row}
-													hasDivider={false}
-													style={rowPadding}
-												/>
-											))}
-										</VStack>
-
-										<VStack gap={2}>
-											<Heading level={2}>Social accounts</Heading>
-											{SOCIAL_ROWS.map((row) => (
-												<InfoRowItem
-													key={row.label}
-													{...row}
-													hasDivider={false}
-													style={rowPadding}
-												/>
-											))}
-										</VStack>
-
-										<VStack gap={2}>
-											<Heading level={2}>Device history</Heading>
-											{DEVICE_ROWS.map((device) => (
-												<HStack key={device.location} gap={3} vAlign="start" style={rowPadding}>
-													<Icon icon={Monitor} />
-													<StackItem size="fill">
-														<VStack gap={1}>
-															<HStack gap={2} vAlign="center" wrap="wrap">
-																<Text type="body" weight="semibold">
-																	{device.label}
+							{isNarrow && (
+								<Toolbar
+									label={`Back to Account settings: ${activeNav === HOSTING_TOOLS_TITLE ? "Hosting tools" : activeNav}`}
+									gap={2}
+									startContent={
+										<>
+											<Button
+												label="Back to Account settings"
+												variant="ghost"
+												size="sm"
+												isIconOnly
+												icon={<Icon icon={ArrowLeft} size="sm" />}
+												onClick={() => setMobileView("nav")}
+											/>
+											<Heading level={1}>
+												{activeNav === HOSTING_TOOLS_TITLE ? "Hosting tools" : activeNav}
+											</Heading>
+										</>
+									}
+								/>
+							)}
+							{activeNav === "Login & security" && (
+								<VStack gap={6}>
+									{!isNarrow && <Heading level={1}>Login &amp; security</Heading>}
+
+									<TabList value={activeTab} onChange={setActiveTab} hasDivider>
+										<Tab value="login" label="Login" />
+										<Tab value="shared" label="Shared access" />
+									</TabList>
+
+									{activeTab === "login" && (
+										<VStack gap={8}>
+											<VStack gap={2}>
+												<Heading level={2}>Login</Heading>
+												{LOGIN_ROWS.map((row) => (
+													<InfoRowItem
+														key={row.label}
+														{...row}
+														hasDivider={false}
+														style={rowPadding}
+													/>
+												))}
+											</VStack>
+
+											<VStack gap={2}>
+												<Heading level={2}>Social accounts</Heading>
+												{SOCIAL_ROWS.map((row) => (
+													<InfoRowItem
+														key={row.label}
+														{...row}
+														hasDivider={false}
+														style={rowPadding}
+													/>
+												))}
+											</VStack>
+
+											<VStack gap={2}>
+												<Heading level={2}>Device history</Heading>
+												{DEVICE_ROWS.map((device) => (
+													<HStack key={device.location} gap={3} vAlign="start" style={rowPadding}>
+														<Icon icon={Monitor} />
+														<StackItem size="fill">
+															<VStack gap={1}>
+																<HStack gap={2} vAlign="center" wrap="wrap">
+																	<Text type="body" weight="semibold">
+																		{device.label}
+																	</Text>
+																	{device.isCurrent && (
+																		<HStack gap={1} vAlign="center">
+																			<StatusDot variant="success" label="Current session" />
+																			<Text type="supporting" color="secondary">
+																				Current session
+																			</Text>
+																		</HStack>
+																	)}
+																</HStack>
+																<Text
+																	type="supporting"
+																	color="secondary"
+																	display="block"
+																	hasTabularNumbers
+																>
+																	{device.location}
 																</Text>
-																{device.isCurrent && (
-																	<HStack gap={1} vAlign="center">
-																		<StatusDot variant="success" label="Current session" />
-																		<Text type="supporting" color="secondary">
-																			Current session
-																		</Text>
-																	</HStack>
-																)}
-															</HStack>
-															<Text
-																type="supporting"
-																color="secondary"
-																display="block"
-																hasTabularNumbers
-															>
-																{device.location}
-															</Text>
-														</VStack>
-													</StackItem>
-													{device.action && (
-														<Button
-															label={device.action}
-															variant="secondary"
-															size="sm"
-															onClick={() => {}}
-															style={actionNoWrap}
-														/>
-													)}
+															</VStack>
+														</StackItem>
+														{device.action && (
+															/* No handler: the showcase has no backend, and an
+														   empty onClick makes an unwired control look wired.
+														   The shared rows take the same stance. */
+															<Button
+																label={device.action}
+																variant="secondary"
+																size="sm"
+																style={actionNoWrap}
+															/>
+														)}
+													</HStack>
+												))}
+											</VStack>
+
+											<VStack gap={2}>
+												<Heading level={2}>Account</Heading>
+												<HStack hAlign="between" vAlign="start" style={rowPadding}>
+													<VStack gap={1}>
+														<Text type="body" weight="semibold" display="block">
+															Deactivate your account
+														</Text>
+														<Text type="supporting" color="secondary" display="block">
+															This action cannot be undone
+														</Text>
+													</VStack>
+													<Button
+														label="Deactivate"
+														variant="secondary"
+														size="sm"
+														style={actionNoWrap}
+													/>
 												</HStack>
-											))}
-										</VStack>
-
-										<VStack gap={2}>
-											<Heading level={2}>Account</Heading>
-											<HStack hAlign="between" vAlign="start" style={rowPadding}>
-												<VStack gap={1}>
-													<Text type="body" weight="semibold" display="block">
-														Deactivate your account
-													</Text>
-													<Text type="supporting" color="secondary" display="block">
-														This action cannot be undone
-													</Text>
-												</VStack>
-												<Button
-													label="Deactivate"
-													variant="secondary"
-													size="sm"
-													onClick={() => {}}
-													style={actionNoWrap}
-												/>
-											</HStack>
+											</VStack>
 										</VStack>
-									</VStack>
-								)}
-
-								{activeTab === "shared" && (
-									<VStack gap={8}>
-										<VStack gap={2}>
-											<Heading level={2}>Shared access</Heading>
-											<Text type="body" color="secondary">
-												Review each request carefully before approving access. We&apos;ll email your
-												kin or coven-mate a 4-digit code that lets them enter your crypt from their
-												trusted device.
-											</Text>
+									)}
+
+									{activeTab === "shared" && (
+										<VStack gap={8}>
+											<VStack gap={2}>
+												<Heading level={2}>Shared access</Heading>
+												<Text type="body" color="secondary">
+													Review each request carefully before approving access. We&apos;ll email
+													your kin or coven-mate a 4-digit code that lets them enter your crypt from
+													their trusted device.
+												</Text>
+											</VStack>
+
+											<Card variant="muted">
+												<HStack gap={4} vAlign="start">
+													<Center width={48} height={48} style={iconBox}>
+														<Icon icon={Lock} />
+													</Center>
+													<VStack gap={1}>
+														<Text type="body">Adding devices from people you trust</Text>
+														<Text type="body" color="secondary">
+															When you approve a request, you grant someone full access to your
+															account. They&apos;ll be able to change reservations and send messages
+															on your behalf.
+														</Text>
+													</VStack>
+												</HStack>
+											</Card>
 										</VStack>
-
-										<Card variant="muted">
-											<HStack gap={4} vAlign="start">
-												<Center width={48} height={48} style={iconBox}>
-													<Icon icon={Lock} />
-												</Center>
-												<VStack gap={1}>
-													<Text type="body">Adding devices from people you trust</Text>
-													<Text type="body" color="secondary">
-														When you approve a request, you grant someone full access to your
-														account. They&apos;ll be able to change reservations and send messages
-														on your behalf.
-													</Text>
-												</VStack>
-											</HStack>
-										</Card>
-									</VStack>
-								)}
-							</VStack>
-						)}
-
-						{activeNav === "Languages & currency" && (
-							<VStack gap={6}>
-								{!isNarrow && <Heading level={1}>Languages &amp; currency</Heading>}
-								<VStack gap={0}>
-									<ExpandableRow
-										label="Preferred language"
-										value={LANGUAGES.find((l) => l.value === language)?.label ?? language}
-										isExpanded={expandedRow === "language"}
-										onEdit={() => setExpandedRow("language")}
-										onCancel={() => setExpandedRow(null)}
-										onSave={() => setExpandedRow(null)}
-										hasDivider={false}
-										style={rowPadding}
-									>
-										<Selector
-											label="Language"
-											isLabelHidden
-											size="lg"
-											value={language}
-											onChange={setLanguage}
-											options={LANGUAGES}
-										/>
-									</ExpandableRow>
-									<ExpandableRow
-										label="Preferred currency"
-										value={CURRENCIES.find((c) => c.value === currency)?.label ?? currency}
-										isExpanded={expandedRow === "currency"}
-										onEdit={() => setExpandedRow("currency")}
-										onCancel={() => setExpandedRow(null)}
-										onSave={() => setExpandedRow(null)}
-										hasDivider={false}
-										style={rowPadding}
-									>
-										<Selector
-											label="Currency"
-											isLabelHidden
-											size="lg"
-											value={currency}
-											onChange={setCurrency}
-											options={CURRENCIES}
-										/>
-									</ExpandableRow>
-									<ExpandableRow
-										label="Time zone"
-										value={TIMEZONES.find((t) => t.value === timezone)?.label ?? timezone}
-										isExpanded={expandedRow === "timezone"}
-										onEdit={() => setExpandedRow("timezone")}
-										onCancel={() => setExpandedRow(null)}
-										onSave={() => setExpandedRow(null)}
-										hasDivider={false}
-										style={rowPadding}
-									>
-										<Selector
+									)}
+								</VStack>
+							)}
+
+							{activeNav === "Languages & currency" && (
+								<VStack gap={6}>
+									{!isNarrow && <Heading level={1}>Languages &amp; currency</Heading>}
+									<VStack gap={0}>
+										<ExpandableRow
+											label="Preferred language"
+											value={LANGUAGES.find((l) => l.value === language)?.label ?? language}
+											isExpanded={expandedRow === "language"}
+											onEdit={() => setExpandedRow("language")}
+											onCancel={() => setExpandedRow(null)}
+											onSave={() => setExpandedRow(null)}
+											hasDivider={false}
+											style={rowPadding}
+										>
+											<Selector
+												label="Language"
+												isLabelHidden
+												size="lg"
+												value={language}
+												onChange={setLanguage}
+												options={LANGUAGES}
+											/>
+										</ExpandableRow>
+										<ExpandableRow
+											label="Preferred currency"
+											value={CURRENCIES.find((c) => c.value === currency)?.label ?? currency}
+											isExpanded={expandedRow === "currency"}
+											onEdit={() => setExpandedRow("currency")}
+											onCancel={() => setExpandedRow(null)}
+											onSave={() => setExpandedRow(null)}
+											hasDivider={false}
+											style={rowPadding}
+										>
+											<Selector
+												label="Currency"
+												isLabelHidden
+												size="lg"
+												value={currency}
+												onChange={setCurrency}
+												options={CURRENCIES}
+											/>
+										</ExpandableRow>
+										<ExpandableRow
 											label="Time zone"
-											isLabelHidden
-											size="lg"
-											value={timezone}
-											onChange={setTimezone}
-											options={TIMEZONES}
-										/>
-									</ExpandableRow>
+											value={TIMEZONES.find((t) => t.value === timezone)?.label ?? timezone}
+											isExpanded={expandedRow === "timezone"}
+											onEdit={() => setExpandedRow("timezone")}
+											onCancel={() => setExpandedRow(null)}
+											onSave={() => setExpandedRow(null)}
+											hasDivider={false}
+											style={rowPadding}
+										>
+											<Selector
+												label="Time zone"
+												isLabelHidden
+												size="lg"
+												value={timezone}
+												onChange={setTimezone}
+												options={TIMEZONES}
+											/>
+										</ExpandableRow>
+									</VStack>
 								</VStack>
-							</VStack>
-						)}
-
-						{activeNav === "Personal information" && (
-							<VStack gap={6}>
-								{!isNarrow && <Heading level={1}>Personal information</Heading>}
-								<VStack gap={0}>
-									<ExpandableRow
-										label="Legal name"
-										value={legalName}
-										isExpanded={expandedRow === "legalName"}
-										onEdit={() => setExpandedRow("legalName")}
-										onCancel={() => setExpandedRow(null)}
-										onSave={() => setExpandedRow(null)}
-										hasDivider={false}
-										style={rowPadding}
-									>
-										<TextInput
+							)}
+
+							{activeNav === "Personal information" && (
+								<VStack gap={6}>
+									{!isNarrow && <Heading level={1}>Personal information</Heading>}
+									<VStack gap={0}>
+										<ExpandableRow
 											label="Legal name"
-											isLabelHidden
 											value={legalName}
-											onChange={setLegalName}
-										/>
-									</ExpandableRow>
-									<ExpandableRow
-										label="Preferred first name"
-										value={preferredName || "Not provided"}
-										isExpanded={expandedRow === "preferredName"}
-										onEdit={() => setExpandedRow("preferredName")}
-										onCancel={() => setExpandedRow(null)}
-										onSave={() => setExpandedRow(null)}
-										hasDivider={false}
-										style={rowPadding}
-									>
-										<TextInput
+											isExpanded={expandedRow === "legalName"}
+											onEdit={() => setExpandedRow("legalName")}
+											onCancel={() => setExpandedRow(null)}
+											onSave={() => setExpandedRow(null)}
+											hasDivider={false}
+											style={rowPadding}
+										>
+											<TextInput
+												label="Legal name"
+												isLabelHidden
+												value={legalName}
+												onChange={setLegalName}
+											/>
+										</ExpandableRow>
+										<ExpandableRow
 											label="Preferred first name"
-											isLabelHidden
-											value={preferredName}
-											onChange={setPreferredName}
-										/>
-									</ExpandableRow>
-									<ExpandableRow
-										label="Email address"
-										value={email}
-										isExpanded={expandedRow === "email"}
-										onEdit={() => setExpandedRow("email")}
-										onCancel={() => setExpandedRow(null)}
-										onSave={() => setExpandedRow(null)}
-										hasDivider={false}
-										style={rowPadding}
-									>
-										<TextInput
+											value={preferredName || "Not provided"}
+											isExpanded={expandedRow === "preferredName"}
+											onEdit={() => setExpandedRow("preferredName")}
+											onCancel={() => setExpandedRow(null)}
+											onSave={() => setExpandedRow(null)}
+											hasDivider={false}
+											style={rowPadding}
+										>
+											<TextInput
+												label="Preferred first name"
+												isLabelHidden
+												value={preferredName}
+												onChange={setPreferredName}
+											/>
+										</ExpandableRow>
+										<ExpandableRow
 											label="Email address"
-											isLabelHidden
 											value={email}
-											onChange={setEmail}
-										/>
-									</ExpandableRow>
-									<ExpandableRow
-										label="Phone number"
-										value={phone}
-										isExpanded={expandedRow === "phone"}
-										onEdit={() => setExpandedRow("phone")}
-										onCancel={() => setExpandedRow(null)}
-										onSave={() => setExpandedRow(null)}
-										hasDivider={false}
-										style={rowPadding}
-									>
-										<TextInput
+											isExpanded={expandedRow === "email"}
+											onEdit={() => setExpandedRow("email")}
+											onCancel={() => setExpandedRow(null)}
+											onSave={() => setExpandedRow(null)}
+											hasDivider={false}
+											style={rowPadding}
+										>
+											<TextInput
+												label="Email address"
+												isLabelHidden
+												value={email}
+												onChange={setEmail}
+											/>
+										</ExpandableRow>
+										<ExpandableRow
 											label="Phone number"
-											isLabelHidden
 											value={phone}
-											onChange={setPhone}
+											isExpanded={expandedRow === "phone"}
+											onEdit={() => setExpandedRow("phone")}
+											onCancel={() => setExpandedRow(null)}
+											onSave={() => setExpandedRow(null)}
+											hasDivider={false}
+											style={rowPadding}
+										>
+											<TextInput
+												label="Phone number"
+												isLabelHidden
+												value={phone}
+												onChange={setPhone}
+											/>
+										</ExpandableRow>
+										<InfoRowItem
+											label="Identity verification"
+											value="Verified"
+											action=""
+											hasDivider={false}
+											style={rowPadding}
 										/>
-									</ExpandableRow>
-									<InfoRowItem
-										label="Identity verification"
-										value="Verified"
-										action=""
-										hasDivider={false}
-										style={rowPadding}
-									/>
-									<ExpandableRow
-										label="Residential address"
-										value={address || "Not provided"}
-										isExpanded={expandedRow === "address"}
-										onEdit={() => setExpandedRow("address")}
-										onCancel={() => setExpandedRow(null)}
-										onSave={() => setExpandedRow(null)}
-										hasDivider={false}
-										style={rowPadding}
-									>
-										<TextInput
+										<ExpandableRow
 											label="Residential address"
-											isLabelHidden
-											value={address}
-											onChange={setAddress}
-										/>
-									</ExpandableRow>
-									<ExpandableRow
-										label="Mailing address"
-										value={mailingAddress || "Not provided"}
-										isExpanded={expandedRow === "mailingAddress"}
-										onEdit={() => setExpandedRow("mailingAddress")}
-										onCancel={() => setExpandedRow(null)}
-										onSave={() => setExpandedRow(null)}
-										hasDivider={false}
-										style={rowPadding}
-									>
-										<TextInput
+											value={address || "Not provided"}
+											isExpanded={expandedRow === "address"}
+											onEdit={() => setExpandedRow("address")}
+											onCancel={() => setExpandedRow(null)}
+											onSave={() => setExpandedRow(null)}
+											hasDivider={false}
+											style={rowPadding}
+										>
+											<TextInput
+												label="Residential address"
+												isLabelHidden
+												value={address}
+												onChange={setAddress}
+											/>
+										</ExpandableRow>
+										<ExpandableRow
 											label="Mailing address"
-											isLabelHidden
-											value={mailingAddress}
-											onChange={setMailingAddress}
-										/>
-									</ExpandableRow>
-									<ExpandableRow
-										label="Emergency contact"
-										value={emergencyContact}
-										isExpanded={expandedRow === "emergencyContact"}
-										onEdit={() => setExpandedRow("emergencyContact")}
-										onCancel={() => setExpandedRow(null)}
-										onSave={() => setExpandedRow(null)}
-										hasDivider={false}
-										style={rowPadding}
-									>
-										<TextInput
+											value={mailingAddress || "Not provided"}
+											isExpanded={expandedRow === "mailingAddress"}
+											onEdit={() => setExpandedRow("mailingAddress")}
+											onCancel={() => setExpandedRow(null)}
+											onSave={() => setExpandedRow(null)}
+											hasDivider={false}
+											style={rowPadding}
+										>
+											<TextInput
+												label="Mailing address"
+												isLabelHidden
+												value={mailingAddress}
+												onChange={setMailingAddress}
+											/>
+										</ExpandableRow>
+										<ExpandableRow
 											label="Emergency contact"
-											isLabelHidden
 											value={emergencyContact}
-											onChange={setEmergencyContact}
-										/>
-									</ExpandableRow>
+											isExpanded={expandedRow === "emergencyContact"}
+											onEdit={() => setExpandedRow("emergencyContact")}
+											onCancel={() => setExpandedRow(null)}
+											onSave={() => setExpandedRow(null)}
+											hasDivider={false}
+											style={rowPadding}
+										>
+											<TextInput
+												label="Emergency contact"
+												isLabelHidden
+												value={emergencyContact}
+												onChange={setEmergencyContact}
+											/>
+										</ExpandableRow>
+									</VStack>
+
+									<Card padding={4}>
+										<VStack gap={4}>
+											{INFO_TILES.map((tile) => (
+												<HStack key={tile.title} gap={3} vAlign="start">
+													<Center width={48} height={48} style={iconBox}>
+														<Icon icon={tile.icon} />
+													</Center>
+													<VStack gap={1}>
+														<Text type="body" weight="semibold" display="block">
+															{tile.title}
+														</Text>
+														<Text type="body" color="secondary" display="block">
+															{tile.body}
+														</Text>
+													</VStack>
+												</HStack>
+											))}
+										</VStack>
+									</Card>
 								</VStack>
+							)}
 
-								<Card padding={4}>
-									<VStack gap={4}>
-										{INFO_TILES.map((tile) => (
-											<HStack key={tile.title} gap={3} vAlign="start">
-												<Center width={48} height={48} style={iconBox}>
-													<Icon icon={tile.icon} />
-												</Center>
-												<VStack gap={1}>
-													<Text type="body" weight="semibold" display="block">
-														{tile.title}
-													</Text>
-													<Text type="body" color="secondary" display="block">
-														{tile.body}
-													</Text>
-												</VStack>
-											</HStack>
-										))}
-									</VStack>
-								</Card>
-							</VStack>
-						)}
+							{activeNav === "Privacy" && (
+								<VStack gap={6}>
+									{!isNarrow && <Heading level={1}>Privacy</Heading>}
 
-						{activeNav === "Privacy" && (
-							<VStack gap={6}>
-								{!isNarrow && <Heading level={1}>Privacy</Heading>}
+									<VStack gap={8}>
+										<VStack gap={2}>
+											<Heading level={2}>Messages</Heading>
+											<VStack style={rowPadding}>
+												<Switch
+													label="Show people when I've read their messages."
+													value={readReceipts}
+													onChange={setReadReceipts}
+													labelPosition="start"
+													labelSpacing="spread"
+												/>
+											</VStack>
+											<HStack hAlign="between" vAlign="center" style={rowPadding}>
+												<Text type="body" weight="semibold">
+													Blocked people
+												</Text>
+												<Link href={SELF_HASH}>View</Link>
+											</HStack>
+										</VStack>
 
-								<VStack gap={8}>
-									<VStack gap={2}>
-										<Heading level={2}>Messages</Heading>
-										<VStack style={rowPadding}>
-											<Switch
-												label="Show people when I've read their messages."
-												value={readReceipts}
-												onChange={setReadReceipts}
-												labelPosition="start"
-												labelSpacing="spread"
-											/>
+										<VStack gap={2}>
+											<Heading level={2}>Listings</Heading>
+											<VStack style={rowPadding}>
+												<Switch
+													label="List my wares in the scrying mirrors"
+													description="Turning this on means scrying engines, like Google, will show your wares to seekers."
+													value={searchEngines}
+													onChange={setSearchEngines}
+													labelPosition="start"
+													labelSpacing="spread"
+												/>
+											</VStack>
 										</VStack>
-										<HStack hAlign="between" vAlign="center" style={rowPadding}>
-											<Text type="body" weight="semibold">
-												Blocked people
+
+										<VStack gap={4}>
+											<Heading level={2}>Reviews</Heading>
+											<Text type="body" color="secondary">
+												Choose what&apos;s shared when you write a review.{" "}
+												<Link href={SELF_HASH} type="body" hasUnderline>
+													Learn more
+												</Link>
 											</Text>
-											<Link href={SELF_HASH}>View</Link>
-										</HStack>
-									</VStack>
+											<VStack gap={4}>
+												<Switch
+													label="Show my home haunt and country"
+													description="Ex: City and country"
+													value={showCity}
+													onChange={setShowCity}
+													labelPosition="start"
+													labelSpacing="spread"
+												/>
+												<Switch
+													label="Show my journey type"
+													description="Ex: Rested with kin or familiars"
+													value={showTripType}
+													onChange={setShowTripType}
+													labelPosition="start"
+													labelSpacing="spread"
+												/>
+												<Switch
+													label="Show my length of stay"
+													description="Ex: A few nights, about a week, etc."
+													value={showStayLength}
+													onChange={setShowStayLength}
+													labelPosition="start"
+													labelSpacing="spread"
+												/>
+												<Switch
+													label="Show my booked revels"
+													description="Ex: Midnight feasts and tasting rituals"
+													value={showServices}
+													onChange={setShowServices}
+													labelPosition="start"
+													labelSpacing="spread"
+												/>
+											</VStack>
+										</VStack>
 
-									<VStack gap={2}>
-										<Heading level={2}>Listings</Heading>
-										<VStack style={rowPadding}>
+										<VStack gap={4}>
+											<Heading level={2}>Data privacy</Heading>
+											<Card>
+												<HStack hAlign="between" vAlign="center">
+													<Text type="body">Request my personal data</Text>
+													<Button
+														label="Request"
+														variant="secondary"
+														size="sm"
+														style={actionNoWrap}
+													/>
+												</HStack>
+											</Card>
 											<Switch
-												label="List my wares in the scrying mirrors"
-												description="Turning this on means scrying engines, like Google, will show your wares to seekers."
-												value={searchEngines}
-												onChange={setSearchEngines}
+												label="Help improve AI-powered features"
+												description="When this is on, we use your data to develop and improve AI models."
+												value={aiFeatures}
+												onChange={setAiFeatures}
 												labelPosition="start"
 												labelSpacing="spread"
 											/>
+											<Card>
+												<HStack hAlign="between" vAlign="center">
+													<Text type="body">Delete my account</Text>
+													<Button
+														label="Delete"
+														variant="secondary"
+														size="sm"
+														style={actionNoWrap}
+													/>
+												</HStack>
+											</Card>
+											<Card variant="muted">
+												<HStack gap={4} vAlign="start">
+													<Center width={48} height={48} style={iconBox}>
+														<Icon icon={ShieldCheck} />
+													</Center>
+													<VStack gap={1}>
+														<Text type="body">Committed to privacy</Text>
+														<Text type="body" color="secondary">
+															We&apos;re committed to keeping your data protected. See details in
+															our{" "}
+															<Link href={SELF_HASH} type="supporting" hasUnderline>
+																Privacy Policy
+															</Link>
+															.
+														</Text>
+													</VStack>
+												</HStack>
+											</Card>
 										</VStack>
 									</VStack>
+								</VStack>
+							)}
 
-									<VStack gap={4}>
-										<Heading level={2}>Reviews</Heading>
-										<Text type="body" color="secondary">
-											Choose what&apos;s shared when you write a review.{" "}
-											<Link href={SELF_HASH} type="body" hasUnderline>
-												Learn more
-											</Link>
-										</Text>
-										<VStack gap={4}>
-											<Switch
-												label="Show my home haunt and country"
-												description="Ex: City and country"
-												value={showCity}
-												onChange={setShowCity}
-												labelPosition="start"
-												labelSpacing="spread"
-											/>
-											<Switch
-												label="Show my journey type"
-												description="Ex: Rested with kin or familiars"
-												value={showTripType}
-												onChange={setShowTripType}
-												labelPosition="start"
-												labelSpacing="spread"
-											/>
+							{activeNav === "Notifications" && (
+								<VStack gap={6}>
+									{!isNarrow && <Heading level={1}>Notifications</Heading>}
+									<VStack gap={2}>
+										<Heading level={2}>Messages</Heading>
+										<VStack gap={4} style={rowPadding}>
 											<Switch
-												label="Show my length of stay"
-												description="Ex: A few nights, about a week, etc."
-												value={showStayLength}
-												onChange={setShowStayLength}
+												label="Email notifications"
+												description="Coven updates, journey reminders, and crypt activity."
+												value={emailNotif}
+												onChange={setEmailNotif}
 												labelPosition="start"
 												labelSpacing="spread"
 											/>
 											<Switch
-												label="Show my booked revels"
-												description="Ex: Midnight feasts and tasting rituals"
-												value={showServices}
-												onChange={setShowServices}
+												label="Push notifications"
+												description="Swift ravens for messages and booking requests."
+												value={pushNotif}
+												onChange={setPushNotif}
 												labelPosition="start"
 												labelSpacing="spread"
 											/>
 										</VStack>
 									</VStack>
+								</VStack>
+							)}
 
-									<VStack gap={4}>
-										<Heading level={2}>Data privacy</Heading>
-										<Card>
-											<HStack hAlign="between" vAlign="center">
-												<Text type="body">Request my personal data</Text>
-												<Button
-													label="Request"
-													variant="secondary"
-													size="sm"
-													onClick={() => {}}
-													style={actionNoWrap}
-												/>
-											</HStack>
-										</Card>
-										<Switch
-											label="Help improve AI-powered features"
-											description="When this is on, we use your data to develop and improve AI models."
-											value={aiFeatures}
-											onChange={setAiFeatures}
-											labelPosition="start"
-											labelSpacing="spread"
-										/>
-										<Card>
-											<HStack hAlign="between" vAlign="center">
-												<Text type="body">Delete my account</Text>
-												<Button
-													label="Delete"
-													variant="secondary"
-													size="sm"
-													onClick={() => {}}
-													style={actionNoWrap}
-												/>
-											</HStack>
-										</Card>
-										<Card variant="muted">
-											<HStack gap={4} vAlign="start">
-												<Center width={48} height={48} style={iconBox}>
-													<Icon icon={ShieldCheck} />
-												</Center>
-												<VStack gap={1}>
-													<Text type="body">Committed to privacy</Text>
-													<Text type="body" color="secondary">
-														We&apos;re committed to keeping your data protected. See details in our{" "}
-														<Link href={SELF_HASH} type="supporting" hasUnderline>
-															Privacy Policy
-														</Link>
-														.
-													</Text>
-												</VStack>
-											</HStack>
-										</Card>
+							{activeNav === "Taxes" && (
+								<VStack gap={6}>
+									{!isNarrow && <Heading level={1}>Taxes</Heading>}
+									<VStack gap={2}>
+										<Heading level={2}>Tax scrolls</Heading>
+										{TAX_ROWS.map((row) => (
+											<InfoRowItem key={row.label} {...row} hasDivider={false} style={rowPadding} />
+										))}
 									</VStack>
 								</VStack>
-							</VStack>
-						)}
-
-						{activeNav === "Notifications" && (
-							<VStack gap={6}>
-								{!isNarrow && <Heading level={1}>Notifications</Heading>}
-								<VStack gap={2}>
-									<Heading level={2}>Messages</Heading>
-									<VStack gap={4} style={rowPadding}>
-										<Switch
-											label="Email notifications"
-											description="Coven updates, journey reminders, and crypt activity."
-											value={emailNotif}
-											onChange={setEmailNotif}
-											labelPosition="start"
-											labelSpacing="spread"
-										/>
-										<Switch
-											label="Push notifications"
-											description="Swift ravens for messages and booking requests."
-											value={pushNotif}
-											onChange={setPushNotif}
-											labelPosition="start"
-											labelSpacing="spread"
-										/>
+							)}
+
+							{activeNav === "Payments" && (
+								<VStack gap={6}>
+									{!isNarrow && <Heading level={1}>Payments</Heading>}
+									<VStack gap={2}>
+										<Heading level={2}>Payout crypt</Heading>
+										{PAYOUT_ROWS.map((row) => (
+											<InfoRowItem key={row.label} {...row} hasDivider={false} style={rowPadding} />
+										))}
 									</VStack>
 								</VStack>
-							</VStack>
-						)}
-
-						{activeNav === "Taxes" && (
-							<VStack gap={6}>
-								{!isNarrow && <Heading level={1}>Taxes</Heading>}
-								<VStack gap={2}>
-									<Heading level={2}>Tax scrolls</Heading>
-									{TAX_ROWS.map((row) => (
-										<InfoRowItem key={row.label} {...row} hasDivider={false} style={rowPadding} />
-									))}
-								</VStack>
-							</VStack>
-						)}
-
-						{activeNav === "Payments" && (
-							<VStack gap={6}>
-								{!isNarrow && <Heading level={1}>Payments</Heading>}
-								<VStack gap={2}>
-									<Heading level={2}>Payout crypt</Heading>
-									{PAYOUT_ROWS.map((row) => (
-										<InfoRowItem key={row.label} {...row} hasDivider={false} style={rowPadding} />
-									))}
-								</VStack>
-							</VStack>
-						)}
-
-						{activeNav === "Travel for work" && (
-							<VStack gap={6}>
-								{!isNarrow && <Heading level={1}>Travel for work</Heading>}
-								<VStack gap={2}>
-									<Heading level={2}>Work haunts</Heading>
-									<VStack style={rowPadding}>
-										<Switch
-											label="Show night-errand options at checkout"
-											description="Add a coven address to expense night errands and unlock travel-ready wares."
-											value={workTrips}
-											onChange={setWorkTrips}
-											labelPosition="start"
-											labelSpacing="spread"
-										/>
+							)}
+
+							{activeNav === "Travel for work" && (
+								<VStack gap={6}>
+									{!isNarrow && <Heading level={1}>Travel for work</Heading>}
+									<VStack gap={2}>
+										<Heading level={2}>Work haunts</Heading>
+										<VStack style={rowPadding}>
+											<Switch
+												label="Show night-errand options at checkout"
+												description="Add a coven address to expense night errands and unlock travel-ready wares."
+												value={workTrips}
+												onChange={setWorkTrips}
+												labelPosition="start"
+												labelSpacing="spread"
+											/>
+										</VStack>
 									</VStack>
 								</VStack>
-							</VStack>
-						)}
-
-						{activeNav === "Professional hosting tools" && (
-							<VStack gap={6}>
-								{!isNarrow && <Heading level={1}>Professional hosting tools</Heading>}
-								<Card variant="muted">
-									<HStack gap={4} vAlign="start">
-										<Center width={48} height={48} style={iconBox}>
-											<Icon icon={Wrench} />
-										</Center>
-										<VStack gap={1}>
-											<Text type="body">Hosting grimoire</Text>
-											<Text type="body" color="secondary">
-												Manage multiple listings, route tasks to co-hosts, and review consolidated
-												payouts from one place.
-											</Text>
-										</VStack>
-									</HStack>
-								</Card>
-							</VStack>
-						)}
-					</VStack>
-				</LayoutContent>
-			}
-		/>
+							)}
+
+							{activeNav === "Professional hosting tools" && (
+								<VStack gap={6}>
+									{!isNarrow && <Heading level={1}>Professional hosting tools</Heading>}
+									<Card variant="muted">
+										<HStack gap={4} vAlign="start">
+											<Center width={48} height={48} style={iconBox}>
+												<Icon icon={Wrench} />
+											</Center>
+											<VStack gap={1}>
+												<Text type="body">Hosting grimoire</Text>
+												<Text type="body" color="secondary">
+													Manage multiple listings, route tasks to co-hosts, and review consolidated
+													payouts from one place.
+												</Text>
+											</VStack>
+										</HStack>
+									</Card>
+								</VStack>
+							)}
+						</VStack>
+					</LayoutContent>
+				}
+			/>
+		</>
 	);
 }