astryx-dracula 0.2.1 → 0.3.0

package/templates/settings-sidebar.tsx

@@ -1,8 +1,12 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LP > V[g=4] > Hd"Account settings"[level=2] + (UL > LI*8) + D + LI) + (LC[p=4] > V[g=6] > Hd"Personal info"[level=2] + (V > (H[j=between a=center] > (V > Tx"Legal name" + Tx"Vlad Dracul"[t=supporting]) + Lk"Edit")*7) + (C.muted > V[g=4] > (H[g=3 a=start] > Ic + (V[g=1] > Tx"Why is info hidden" + Tx[t=supporting]))*3))
+//   L > (LP[p=0] > V[g=4] > Tx"Account settings"[t=label] + (UL > LI*8) + D + LI"Professional hosting tools") + (LC[p=6] > V[g=0] > (Tbar > B.ghost + Hd"Personal info"[level=1]) + Hd"Personal info"[level=1] + (V[g=0] > (H[j=between a=start] > (V[g=0] > Tx"Legal name"[weight=semibold] + Tx"Vlad Dracul"[t=supporting]) + Lk"Edit")*7) + (C.muted > V[g=4] > (H[g=3 a=start] > Ic + (V[g=1] > Tx"Why is info hidden?"[weight=semibold] + Tx[t=supporting]))*3))
 
-import {useState, type CSSProperties} from 'react';
+/**
+ * Settings Panels — account sections with a nav panel and divided rows.  Frame: Layout nav panel (fill) | content column of section views. One (Frame/responsive/container: see XLE header above.)
+ */
+
+import {Fragment, useState, type CSSProperties} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {
   VStack,
@@ -23,18 +27,12 @@ import {Card} from '@astryxdesign/core/Card';
 import {Switch} from '@astryxdesign/core/Switch';
 import {Divider} from '@astryxdesign/core/Divider';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
-import {Badge} from '@astryxdesign/core/Badge';
+import {StatusDot} from '@astryxdesign/core/StatusDot';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Center} from '@astryxdesign/core/Center';
 import {
-  User,
   Lock,
   ShieldCheck,
-  Bell,
-  FileText,
-  CreditCard,
-  Globe,
-  Briefcase,
   Wrench,
   Monitor,
   SquarePen,
@@ -42,6 +40,9 @@ import {
   ArrowLeft,
   ChevronRight,
 } from 'lucide-react';
+import {NAV_ITEMS, LOGIN_ROWS, SOCIAL_ROWS, DEVICE_ROWS, INFO_TILES, iconBox, actionNoWrap, sideNavHeading} from 'astryx-dracula/shared/settings-data';
+import {InfoRowItem, ExpandableRow} from 'astryx-dracula/shared/settings-rows';
+import type {InfoRow} from 'astryx-dracula/shared/settings-data';
 
 // 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
@@ -49,11 +50,6 @@ import {
 const fillViewport: CSSProperties = {
   minHeight: '100dvh',
 };
-const iconBox: CSSProperties = {
-  borderRadius: 'var(--radius-container)',
-  backgroundColor: 'var(--color-background-surface)',
-  flexShrink: 0,
-};
 const rowPadding: CSSProperties = {
   paddingBlock: 'var(--spacing-4)',
 };
@@ -61,25 +57,15 @@ const sideNavPadding: CSSProperties = {
   paddingBlock: 'var(--spacing-4)',
   paddingInline: 'var(--spacing-3)',
 };
-const sideNavHeading: CSSProperties = {
-  marginInline: 'var(--spacing-4)',
-};
 
-const NAV_ITEMS = [
-  {label: 'Personal information', icon: User},
-  {label: 'Login & security', icon: Lock},
-  {label: 'Privacy', icon: ShieldCheck},
-  {label: 'Notifications', icon: Bell},
-  {label: 'Taxes', icon: FileText},
-  {label: 'Payments', icon: CreditCard},
-  {label: 'Languages & currency', icon: Globe},
-  {label: 'Travel for work', icon: Briefcase},
-];
+// Same-route hash: demo links stay focusable anchors without escaping the
+// template through the hash router (bare "#" would drop back to the home page).
+const SELF_HASH = '#/templates/settings-sidebar';
 
 // Section title shown beside the mobile back button (matches each section's
 // in-content heading, which is hidden on mobile to avoid a duplicate).
 const SECTION_TITLES: Record<string, string> = {
-  'Personal information': 'Personal info',
+  'Personal information': 'Personal information',
   'Login & security': 'Login & security',
   Privacy: 'Privacy',
   Notifications: 'Notifications',
@@ -90,124 +76,16 @@ const SECTION_TITLES: Record<string, string> = {
   'Professional hosting tools': 'Hosting tools',
 };
 
-interface InfoRow {
-  label: string;
-  value: string;
-  action: string;
-}
-
-const LOGIN_ROWS: InfoRow[] = [
-  {label: 'Password', value: 'Not created', action: 'Create'},
-];
-
-const SOCIAL_ROWS: InfoRow[] = [
-  {label: 'Google', value: 'Connected', action: 'Disconnect'},
-];
-
 const TAX_ROWS: InfoRow[] = [
-  {label: 'Taxpayer information', value: 'Not provided', action: 'Add'},
-  {label: 'Tax documents', value: 'No documents yet', action: 'View'},
+  {label: 'Tax scrolls', value: 'Not provided', action: 'Add'},
+  {label: 'Past scrolls', value: 'No scrolls yet', action: 'View'},
 ];
 
 const PAYOUT_ROWS: InfoRow[] = [
-  {label: 'Payout method', value: 'Not set up', action: 'Add'},
-  {label: 'Past payments', value: 'No payments yet', action: 'View'},
-];
-
-const DEVICE_ROWS: {
-  label: string;
-  badge?: string;
-  location: string;
-  action?: string;
-}[] = [
-  {
-    label: 'OS X 10.15.7 · Chrome',
-    badge: 'CURRENT SESSION',
-    location: 'Brașov, Transylvania · March 30, 2026 at 19:31',
-  },
-  {label: 'Session', location: 'August 9, 2023 at 04:19', action: 'Log out'},
-  {
-    label: 'OS X 10.15.7 · unknown',
-    location: 'Whitby, England · April 14, 2023 at 17:47',
-    action: 'Log out',
-  },
+  {label: 'Payout crypt', value: 'Not set up', action: 'Add'},
+  {label: 'Past payouts', value: 'No tributes yet', action: 'View'},
 ];
 
-function InfoRowItem({label, value, action}: InfoRow) {
-  return (
-    <>
-      <HStack hAlign="between" vAlign="start" style={rowPadding}>
-        <VStack gap={0}>
-          <Text type="body" weight="semibold" display="block">
-            {label}
-          </Text>
-          <Text type="supporting" color="secondary" display="block">
-            {value}
-          </Text>
-        </VStack>
-        {action && <Link href="#/templates/settings-sidebar">{action}</Link>}
-      </HStack>
-      <Divider />
-    </>
-  );
-}
-
-interface ExpandableRowProps {
-  label: string;
-  value: string;
-  children: React.ReactNode;
-  isExpanded: boolean;
-  onEdit: () => void;
-  onCancel: () => void;
-  onSave: () => void;
-}
-
-function ExpandableRow({
-  label,
-  value,
-  children,
-  isExpanded,
-  onEdit,
-  onCancel,
-  onSave,
-}: ExpandableRowProps) {
-  return (
-    <>
-      {isExpanded ? (
-        <VStack gap={4} style={rowPadding}>
-          <Text type="body" weight="semibold" display="block">
-            {label}
-          </Text>
-          {children}
-          <HStack gap={2}>
-            <Button label="Save" variant="primary" onClick={onSave} />
-            <Button label="Cancel" variant="ghost" onClick={onCancel} />
-          </HStack>
-        </VStack>
-      ) : (
-        <HStack hAlign="between" vAlign="start" style={rowPadding}>
-          <VStack gap={0}>
-            <Text type="body" weight="semibold" display="block">
-              {label}
-            </Text>
-            <Text type="supporting" color="secondary" display="block">
-              {value}
-            </Text>
-          </VStack>
-          <Link
-            href="#/templates/settings-sidebar"
-            onClick={(e: React.MouseEvent) => {
-              e.preventDefault();
-              onEdit();
-            }}>
-            Edit
-          </Link>
-        </HStack>
-      )}
-      <Divider />
-    </>
-  );
-}
 
 const LANGUAGES = [
   {label: 'English (Canada)', value: 'en-CA'},
@@ -274,9 +152,9 @@ export default function SettingsSidebar() {
 
   const navList = (
     <VStack gap={4} style={sideNavPadding}>
-      <Heading level={2} style={sideNavHeading}>
+      <Text type="label" style={sideNavHeading}>
         Account settings
-      </Heading>
+      </Text>
       <List density="spacious">
         {NAV_ITEMS.map(item => (
           <ListItem
@@ -298,7 +176,6 @@ export default function SettingsSidebar() {
         <ListItem
           label="Professional hosting tools"
           startContent={<Icon icon={Wrench} />}
-          onClick={() => {}}
         />
       </List>
     </VStack>
@@ -310,7 +187,14 @@ export default function SettingsSidebar() {
       <Layout
         height="fill"
         style={fillViewport}
-        content={<LayoutContent padding={2}>{navList}</LayoutContent>}
+        // padding={0}, not padding={2}. This wraps the SAME navList element
+        // the desktop LayoutPanel renders with padding={0}, and sideNavPadding
+        // already supplies the list's 12px inline 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, so the two mobile states
+        // disagreed with each other too. The container owns no gutter; the
+        // list owns its own.
+        content={<LayoutContent padding={0}>{navList}</LayoutContent>}
       />
     );
   }
@@ -328,7 +212,7 @@ export default function SettingsSidebar() {
         )
       }
       content={
-        <LayoutContent padding={4}>
+        <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
@@ -336,7 +220,7 @@ export default function SettingsSidebar() {
                 flush with the content edge. */}
             {isNarrow && (
               <Toolbar
-                label={`Back to Account settings — ${SECTION_TITLES[activeNav]}`}
+                label={`Back to Account settings: ${SECTION_TITLES[activeNav]}`}
                 gap={2}
                 startContent={
                   <>
@@ -348,14 +232,14 @@ export default function SettingsSidebar() {
                       icon={<Icon icon={ArrowLeft} size="sm" />}
                       onClick={() => setMobileView('nav')}
                     />
-                    <Heading level={2}>{SECTION_TITLES[activeNav]}</Heading>
+                    <Heading level={1}>{SECTION_TITLES[activeNav]}</Heading>
                   </>
                 }
               />
             )}
             {activeNav === 'Login & security' && (
               <VStack gap={6}>
-                {!isNarrow && <Heading level={2}>Login &amp; security</Heading>}
+                {!isNarrow && <Heading level={1}>Login &amp; security</Heading>}
 
                 <TabList value={activeTab} onChange={setActiveTab} hasDivider>
                   <Tab value="login" label="Login" />
@@ -365,38 +249,60 @@ export default function SettingsSidebar() {
                 {activeTab === 'login' && (
                   <VStack gap={8}>
                     <VStack gap={0}>
-                      <Heading level={3}>Login</Heading>
+                      <Heading level={2}>Login</Heading>
                       <Divider />
                       {LOGIN_ROWS.map(row => (
-                        <InfoRowItem key={row.label} {...row} />
+                        <InfoRowItem
+                          key={row.label}
+                          {...row}
+                          href={SELF_HASH}
+                          style={rowPadding}
+                        />
                       ))}
                     </VStack>
 
                     <VStack gap={0}>
-                      <Heading level={3}>Social accounts</Heading>
+                      <Heading level={2}>Social accounts</Heading>
                       <Divider />
                       {SOCIAL_ROWS.map(row => (
-                        <InfoRowItem key={row.label} {...row} />
+                        <InfoRowItem
+                          key={row.label}
+                          {...row}
+                          href={SELF_HASH}
+                          style={rowPadding}
+                        />
                       ))}
                     </VStack>
 
                     <VStack gap={0}>
-                      <Heading level={3}>Device history</Heading>
+                      <Heading level={2}>Device history</Heading>
                       <Divider />
-                      {DEVICE_ROWS.map((device, i) => (
+                      {DEVICE_ROWS.map((device) => (
                         <HStack
-                          key={i}
+                          key={device.location}
                           gap={3}
                           vAlign="start"
                           style={rowPadding}>
                           <Icon icon={Monitor} />
                           <StackItem size="fill">
                             <VStack gap={0}>
-                              <HStack gap={2} vAlign="center">
+                              {/* wrap: the label plus the session status
+                                  exceed the content width on a phone. */}
+                              <HStack gap={2} vAlign="center" wrap="wrap">
                                 <Text type="body" weight="semibold">
                                   {device.label}
                                 </Text>
-                                {device.badge && <Badge label={device.badge} />}
+                                {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"
@@ -408,7 +314,9 @@ export default function SettingsSidebar() {
                             </VStack>
                           </StackItem>
                           {device.action && (
-                            <Link href="#/templates/settings-sidebar">{device.action}</Link>
+                            <Link href={SELF_HASH} style={actionNoWrap}>
+                              {device.action}
+                            </Link>
                           )}
                         </HStack>
                       ))}
@@ -416,7 +324,7 @@ export default function SettingsSidebar() {
                     </VStack>
 
                     <VStack gap={0}>
-                      <Heading level={3}>Account</Heading>
+                      <Heading level={2}>Account</Heading>
                       <Divider />
                       <HStack
                         hAlign="between"
@@ -433,7 +341,9 @@ export default function SettingsSidebar() {
                             This action cannot be undone
                           </Text>
                         </VStack>
-                        <Link href="#/templates/settings-sidebar">Deactivate</Link>
+                        <Link href={SELF_HASH} style={actionNoWrap}>
+                          Deactivate
+                        </Link>
                       </HStack>
                       <Divider />
                     </VStack>
@@ -443,12 +353,12 @@ export default function SettingsSidebar() {
                 {activeTab === 'shared' && (
                   <VStack gap={8}>
                     <VStack gap={2}>
-                      <Heading level={3}>Shared access</Heading>
+                      <Heading level={2}>Shared access</Heading>
                       <Divider />
                       <Text type="body" color="secondary">
                         Review each request carefully before approving access.
-                        We&apos;ll email your employee or co-worker a 4-digit
-                        code that lets them log into your account with their
+                        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>
@@ -459,7 +369,7 @@ export default function SettingsSidebar() {
                           <Icon icon={Lock} />
                         </Center>
                         <VStack gap={1}>
-                          <Text type="body" weight="bold">
+                          <Text type="body">
                             Adding devices from people you trust
                           </Text>
                           <Text type="body" color="secondary">
@@ -479,7 +389,7 @@ export default function SettingsSidebar() {
             {activeNav === 'Languages & currency' && (
               <VStack gap={6}>
                 {!isNarrow && (
-                  <Heading level={2}>Languages &amp; currency</Heading>
+                  <Heading level={1}>Languages &amp; currency</Heading>
                 )}
                 <VStack gap={0}>
                   <ExpandableRow
@@ -491,7 +401,9 @@ export default function SettingsSidebar() {
                     isExpanded={expandedRow === 'language'}
                     onEdit={() => setExpandedRow('language')}
                     onCancel={() => setExpandedRow(null)}
-                    onSave={() => setExpandedRow(null)}>
+                    onSave={() => setExpandedRow(null)}
+                    href={SELF_HASH}
+                    style={rowPadding}>
                     <Selector
                       label="Language"
                       isLabelHidden
@@ -510,7 +422,9 @@ export default function SettingsSidebar() {
                     isExpanded={expandedRow === 'currency'}
                     onEdit={() => setExpandedRow('currency')}
                     onCancel={() => setExpandedRow(null)}
-                    onSave={() => setExpandedRow(null)}>
+                    onSave={() => setExpandedRow(null)}
+                    href={SELF_HASH}
+                    style={rowPadding}>
                     <Selector
                       label="Currency"
                       isLabelHidden
@@ -529,7 +443,9 @@ export default function SettingsSidebar() {
                     isExpanded={expandedRow === 'timezone'}
                     onEdit={() => setExpandedRow('timezone')}
                     onCancel={() => setExpandedRow(null)}
-                    onSave={() => setExpandedRow(null)}>
+                    onSave={() => setExpandedRow(null)}
+                    href={SELF_HASH}
+                    style={rowPadding}>
                     <Selector
                       label="Time zone"
                       isLabelHidden
@@ -545,7 +461,9 @@ export default function SettingsSidebar() {
 
             {activeNav === 'Personal information' && (
               <VStack gap={6}>
-                {!isNarrow && <Heading level={2}>Personal info</Heading>}
+                {!isNarrow && (
+                  <Heading level={1}>Personal information</Heading>
+                )}
                 <VStack gap={0}>
                   <ExpandableRow
                     label="Legal name"
@@ -553,7 +471,9 @@ export default function SettingsSidebar() {
                     isExpanded={expandedRow === 'legalName'}
                     onEdit={() => setExpandedRow('legalName')}
                     onCancel={() => setExpandedRow(null)}
-                    onSave={() => setExpandedRow(null)}>
+                    onSave={() => setExpandedRow(null)}
+                    href={SELF_HASH}
+                    style={rowPadding}>
                     <TextInput
                       label="Legal name"
                       isLabelHidden
@@ -567,7 +487,9 @@ export default function SettingsSidebar() {
                     isExpanded={expandedRow === 'preferredName'}
                     onEdit={() => setExpandedRow('preferredName')}
                     onCancel={() => setExpandedRow(null)}
-                    onSave={() => setExpandedRow(null)}>
+                    onSave={() => setExpandedRow(null)}
+                    href={SELF_HASH}
+                    style={rowPadding}>
                     <TextInput
                       label="Preferred first name"
                       isLabelHidden
@@ -581,7 +503,9 @@ export default function SettingsSidebar() {
                     isExpanded={expandedRow === 'email'}
                     onEdit={() => setExpandedRow('email')}
                     onCancel={() => setExpandedRow(null)}
-                    onSave={() => setExpandedRow(null)}>
+                    onSave={() => setExpandedRow(null)}
+                    href={SELF_HASH}
+                    style={rowPadding}>
                     <TextInput
                       label="Email address"
                       isLabelHidden
@@ -595,7 +519,9 @@ export default function SettingsSidebar() {
                     isExpanded={expandedRow === 'phone'}
                     onEdit={() => setExpandedRow('phone')}
                     onCancel={() => setExpandedRow(null)}
-                    onSave={() => setExpandedRow(null)}>
+                    onSave={() => setExpandedRow(null)}
+                    href={SELF_HASH}
+                    style={rowPadding}>
                     <TextInput
                       label="Phone number"
                       isLabelHidden
@@ -607,6 +533,8 @@ export default function SettingsSidebar() {
                     label="Identity verification"
                     value="Verified"
                     action=""
+                    href={SELF_HASH}
+                    style={rowPadding}
                   />
                   <ExpandableRow
                     label="Residential address"
@@ -614,7 +542,9 @@ export default function SettingsSidebar() {
                     isExpanded={expandedRow === 'address'}
                     onEdit={() => setExpandedRow('address')}
                     onCancel={() => setExpandedRow(null)}
-                    onSave={() => setExpandedRow(null)}>
+                    onSave={() => setExpandedRow(null)}
+                    href={SELF_HASH}
+                    style={rowPadding}>
                     <TextInput
                       label="Residential address"
                       isLabelHidden
@@ -628,7 +558,9 @@ export default function SettingsSidebar() {
                     isExpanded={expandedRow === 'mailingAddress'}
                     onEdit={() => setExpandedRow('mailingAddress')}
                     onCancel={() => setExpandedRow(null)}
-                    onSave={() => setExpandedRow(null)}>
+                    onSave={() => setExpandedRow(null)}
+                    href={SELF_HASH}
+                    style={rowPadding}>
                     <TextInput
                       label="Mailing address"
                       isLabelHidden
@@ -642,7 +574,9 @@ export default function SettingsSidebar() {
                     isExpanded={expandedRow === 'emergencyContact'}
                     onEdit={() => setExpandedRow('emergencyContact')}
                     onCancel={() => setExpandedRow(null)}
-                    onSave={() => setExpandedRow(null)}>
+                    onSave={() => setExpandedRow(null)}
+                    href={SELF_HASH}
+                    style={rowPadding}>
                     <TextInput
                       label="Emergency contact"
                       isLabelHidden
@@ -654,61 +588,27 @@ export default function SettingsSidebar() {
 
                 <Card padding={4}>
                   <VStack gap={4}>
-                    <HStack gap={3} vAlign="start">
-                      <Center width={48} height={48} style={iconBox}>
-                        <Icon icon={Lock} />
-                      </Center>
-                      <VStack gap={0}>
-                        <Text type="body" weight="semibold" display="block">
-                          Why isn&apos;t my info shown here?
-                        </Text>
-                        <Text
-                          type="supporting"
-                          color="secondary"
-                          display="block">
-                          We&apos;re hiding some account details to protect your
-                          identity.
-                        </Text>
-                      </VStack>
-                    </HStack>
-                    <Divider />
-                    <HStack gap={3} vAlign="start">
-                      <Center width={48} height={48} style={iconBox}>
-                        <Icon icon={SquarePen} />
-                      </Center>
-                      <VStack gap={0}>
-                        <Text type="body" weight="semibold" display="block">
-                          Which details can be edited?
-                        </Text>
-                        <Text
-                          type="supporting"
-                          color="secondary"
-                          display="block">
-                          Contact info and personal details can be edited. If
-                          this info was used to verify your identity,
-                          you&apos;ll need to get verified again the next time
-                          you book—or to continue hosting.
-                        </Text>
-                      </VStack>
-                    </HStack>
-                    <Divider />
-                    <HStack gap={3} vAlign="start">
-                      <Center width={48} height={48} style={iconBox}>
-                        <Icon icon={Share2} />
-                      </Center>
-                      <VStack gap={0}>
-                        <Text type="body" weight="semibold" display="block">
-                          What info is shared with others?
-                        </Text>
-                        <Text
-                          type="supporting"
-                          color="secondary"
-                          display="block">
-                          We only release contact information after a
-                          reservation is confirmed.
-                        </Text>
-                      </VStack>
-                    </HStack>
+                    {INFO_TILES.map((tile, i) => (
+                      <Fragment key={tile.title}>
+                        {i > 0 && <Divider />}
+                        <HStack gap={3} vAlign="start">
+                          <Center width={48} height={48} style={iconBox}>
+                            <Icon icon={tile.icon} />
+                          </Center>
+                          <VStack gap={0}>
+                            <Text type="body" weight="semibold" display="block">
+                              {tile.title}
+                            </Text>
+                            <Text
+                              type="body"
+                              color="secondary"
+                              display="block">
+                              {tile.body}
+                            </Text>
+                          </VStack>
+                        </HStack>
+                      </Fragment>
+                    ))}
                   </VStack>
                 </Card>
               </VStack>
@@ -716,11 +616,11 @@ export default function SettingsSidebar() {
 
             {activeNav === 'Privacy' && (
               <VStack gap={6}>
-                {!isNarrow && <Heading level={2}>Privacy</Heading>}
+                {!isNarrow && <Heading level={1}>Privacy</Heading>}
 
                 <VStack gap={8}>
                   <VStack gap={0}>
-                    <Heading level={3}>Messages</Heading>
+                    <Heading level={2}>Messages</Heading>
                     <VStack style={rowPadding}>
                       <Switch
                         label="Show people when I've read their messages."
@@ -734,17 +634,17 @@ export default function SettingsSidebar() {
                       <Text type="body" weight="semibold">
                         Blocked people
                       </Text>
-                      <Link href="#/templates/settings-sidebar">View</Link>
+                      <Link href={SELF_HASH}>View</Link>
                     </HStack>
                     <Divider />
                   </VStack>
 
                   <VStack gap={0}>
-                    <Heading level={3}>Listings</Heading>
+                    <Heading level={2}>Listings</Heading>
                     <VStack style={rowPadding}>
                       <Switch
-                        label="Include my listing(s) in search engines"
-                        description="Turning this on means search engines, like Google, will display your listing page(s) in search results."
+                        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"
@@ -755,16 +655,16 @@ export default function SettingsSidebar() {
                   </VStack>
 
                   <VStack gap={4}>
-                    <Heading level={3}>Reviews</Heading>
+                    <Heading level={2}>Reviews</Heading>
                     <Text type="body" color="secondary">
                       Choose what&apos;s shared when you write a review.{' '}
-                      <Link href="#/templates/settings-sidebar" type="supporting">
+                      <Link href={SELF_HASH} type="body">
                         Learn more
                       </Link>
                     </Text>
                     <VStack gap={4}>
                       <Switch
-                        label="Show my home city and country"
+                        label="Show my home haunt and country"
                         description="Ex: City and country"
                         value={showCity}
                         onChange={setShowCity}
@@ -772,8 +672,8 @@ export default function SettingsSidebar() {
                         labelSpacing="spread"
                       />
                       <Switch
-                        label="Show my trip type"
-                        description="Ex: Stayed with kids or pets"
+                        label="Show my journey type"
+                        description="Ex: Rested with kin or familiars"
                         value={showTripType}
                         onChange={setShowTripType}
                         labelPosition="start"
@@ -788,8 +688,8 @@ export default function SettingsSidebar() {
                         labelSpacing="spread"
                       />
                       <Switch
-                        label="Show my booked services"
-                        description="Ex: Gourmet brunch or tasting menu"
+                        label="Show my booked revels"
+                        description="Ex: Midnight feasts and tasting rituals"
                         value={showServices}
                         onChange={setShowServices}
                         labelPosition="start"
@@ -800,11 +700,11 @@ export default function SettingsSidebar() {
                   </VStack>
 
                   <VStack gap={4}>
-                    <Heading level={3}>Data privacy</Heading>
+                    <Heading level={2}>Data privacy</Heading>
                     <Card>
                       <HStack hAlign="between" vAlign="center">
                         <Text type="body">Request my personal data</Text>
-                        <Link href="#/templates/settings-sidebar">Request</Link>
+                        <Link href={SELF_HASH}>Request</Link>
                       </HStack>
                     </Card>
                     <Switch
@@ -818,7 +718,7 @@ export default function SettingsSidebar() {
                     <Card>
                       <HStack hAlign="between" vAlign="center">
                         <Text type="body">Delete my account</Text>
-                        <Link href="#/templates/settings-sidebar">Delete</Link>
+                        <Link href={SELF_HASH}>Delete</Link>
                       </HStack>
                     </Card>
                     <Card variant="muted">
@@ -827,13 +727,13 @@ export default function SettingsSidebar() {
                           <Icon icon={ShieldCheck} />
                         </Center>
                         <VStack gap={1}>
-                          <Text type="body" weight="bold">
+                          <Text type="body">
                             Committed to privacy
                           </Text>
-                          <Text type="supporting" color="secondary">
+                          <Text type="body" color="secondary">
                             We&apos;re committed to keeping your data protected.
                             See details in our{' '}
-                            <Link href="#/templates/settings-sidebar" type="supporting">
+                            <Link href={SELF_HASH} type="supporting">
                               Privacy Policy
                             </Link>
                             .
@@ -848,13 +748,13 @@ export default function SettingsSidebar() {
 
             {activeNav === 'Notifications' && (
               <VStack gap={6}>
-                {!isNarrow && <Heading level={2}>Notifications</Heading>}
+                {!isNarrow && <Heading level={1}>Notifications</Heading>}
                 <VStack gap={0}>
-                  <Heading level={3}>Messages</Heading>
+                  <Heading level={2}>Messages</Heading>
                   <VStack style={rowPadding}>
                     <Switch
                       label="Email notifications"
-                      description="Listing updates, trip reminders, and account activity."
+                      description="Coven updates, journey reminders, and crypt activity."
                       value={emailNotif}
                       onChange={setEmailNotif}
                       labelPosition="start"
@@ -865,7 +765,7 @@ export default function SettingsSidebar() {
                   <VStack style={rowPadding}>
                     <Switch
                       label="Push notifications"
-                      description="Instant alerts for messages and reservation requests."
+                      description="Swift ravens for messages and booking requests."
                       value={pushNotif}
                       onChange={setPushNotif}
                       labelPosition="start"
@@ -879,12 +779,17 @@ export default function SettingsSidebar() {
 
             {activeNav === 'Taxes' && (
               <VStack gap={6}>
-                {!isNarrow && <Heading level={2}>Taxes</Heading>}
+                {!isNarrow && <Heading level={1}>Taxes</Heading>}
                 <VStack gap={0}>
-                  <Heading level={3}>Tax documents</Heading>
+                  <Heading level={2}>Tax scrolls</Heading>
                   <Divider />
                   {TAX_ROWS.map(row => (
-                    <InfoRowItem key={row.label} {...row} />
+                    <InfoRowItem
+                          key={row.label}
+                          {...row}
+                          href={SELF_HASH}
+                          style={rowPadding}
+                        />
                   ))}
                 </VStack>
               </VStack>
@@ -892,12 +797,17 @@ export default function SettingsSidebar() {
 
             {activeNav === 'Payments' && (
               <VStack gap={6}>
-                {!isNarrow && <Heading level={2}>Payments</Heading>}
+                {!isNarrow && <Heading level={1}>Payments</Heading>}
                 <VStack gap={0}>
-                  <Heading level={3}>Payouts</Heading>
+                  <Heading level={2}>Payout crypt</Heading>
                   <Divider />
                   {PAYOUT_ROWS.map(row => (
-                    <InfoRowItem key={row.label} {...row} />
+                    <InfoRowItem
+                          key={row.label}
+                          {...row}
+                          href={SELF_HASH}
+                          style={rowPadding}
+                        />
                   ))}
                 </VStack>
               </VStack>
@@ -905,13 +815,13 @@ export default function SettingsSidebar() {
 
             {activeNav === 'Travel for work' && (
               <VStack gap={6}>
-                {!isNarrow && <Heading level={2}>Travel for work</Heading>}
+                {!isNarrow && <Heading level={1}>Travel for work</Heading>}
                 <VStack gap={0}>
-                  <Heading level={3}>Work trips</Heading>
+                  <Heading level={2}>Work haunts</Heading>
                   <VStack style={rowPadding}>
                     <Switch
-                      label="Show work-trip options at checkout"
-                      description="Add a work email to expense trips and unlock business-ready listings."
+                      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"
@@ -926,7 +836,7 @@ export default function SettingsSidebar() {
             {activeNav === 'Professional hosting tools' && (
               <VStack gap={6}>
                 {!isNarrow && (
-                  <Heading level={2}>Professional hosting tools</Heading>
+                  <Heading level={1}>Professional hosting tools</Heading>
                 )}
                 <Card variant="muted">
                   <HStack gap={4} vAlign="start">
@@ -934,10 +844,10 @@ export default function SettingsSidebar() {
                       <Icon icon={Wrench} />
                     </Center>
                     <VStack gap={1}>
-                      <Text type="body" weight="bold">
-                        Tools for professional hosts
+                      <Text type="body">
+                        Hosting grimoire
                       </Text>
-                      <Text type="supporting" color="secondary">
+                      <Text type="body" color="secondary">
                         Manage multiple listings, route tasks to co-hosts, and
                         review consolidated payouts from one place.
                       </Text>