astryx-dracula 0.2.1 → 0.3.0

package/templates/settings-dialog.tsx

@@ -1,6 +1,10 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC > Ctr[h=80vh] > B.primary"Open settings"[opens=#settings] ;; Dlg#settings > L > (LP[w=280 divider p=3] > V[g=4] > Hd"Account settings"[level=2] + (List > LI"Personal information"*8)) + (LC[p=6] > V[g=6] > DH"Account" + (V[g=4] > (H[j=between] > (V[g=0] > Tx"Legal name"[weight=semibold] + Tx"Vlad Dracul"[t=supporting color=secondary]) + Link"Edit")*4))
+//   L > LC > Ctr[h=80vh] > B.primary"Open settings"[opens=#settings] ;; Dlg#settings > L > (LP[w=280 divider p=3] > V[g=4] > Tx"Account settings"[t=label] + (UL > LI"Personal information"*8)) + (LC[p=6] > V[g=6] > DH"Account" + SE"Settings section" + (V[g=0] > TabList + (V[g=0] > Hd"Login"[level=3] + D + (H[j=between a=start] > (V[g=0] > Tx"Password"[weight=semibold] + Tx"Not created"[t=supporting]) + Lk"Create") + (H[g=3 a=start] > Ic + (V[g=0] > (H[g=2 a=center wrap] > Tx"OS X 10.15.7 Chrome"[weight=semibold] + SD) + Tx"March 30, 2026"[t=supporting])))))
+
+/**
+ * Settings Dialog — account sections inside one modal.  Frame: the trigger page, then a Dialog that sizes to (Frame/responsive/container: see XLE header above.)
+ */
 
 import React, {useState, type CSSProperties} from 'react';
 import {
@@ -22,29 +26,15 @@ import {Card} from '@astryxdesign/core/Card';
 import {Switch} from '@astryxdesign/core/Switch';
 import {Link} from '@astryxdesign/core/Link';
 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 {useMediaQuery} from '@astryxdesign/core/hooks';
-import {
-  User,
-  Lock,
-  Globe,
-  ShieldCheck,
-  Monitor,
-  Bell,
-  FileText,
-  CreditCard,
-  Briefcase,
-  SquarePen,
-  Share2,
-} from 'lucide-react';
-
-const iconBox: CSSProperties = {
-  borderRadius: 'var(--radius-container)',
-  backgroundColor: 'var(--color-background-surface)',
-  flexShrink: 0,
-};
+import {Lock, ShieldCheck, Monitor} 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 {DeviceRow, InfoTileData} from 'astryx-dracula/shared/settings-data';
+
 // Sticky dialog header bar — no Astryx prop for sticky/background/z-index.
 // Inline + block padding comes from the parent LayoutContent `padding`.
 const headerSticky: CSSProperties = {
@@ -58,63 +48,14 @@ const headerSticky: CSSProperties = {
 const contentMaxWidth: CSSProperties = {
   maxWidth: 680,
 };
-// Aligns the sidebar heading with list-item label text. No heading margin prop.
-const sideNavHeading: CSSProperties = {
-  marginInline: 'var(--spacing-4)',
-};
 const dialogHeight: CSSProperties = {
   height: '85vh',
 };
-// Keeps row actions ("Log out", "Deactivate") on one line: without this the
-// action column wraps mid-phrase at tablet widths while the info column still
-// has room to wrap instead.
-const actionNoWrap: CSSProperties = {
-  flexShrink: 0,
-  whiteSpace: 'nowrap',
-};
 
 // 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-dialog';
 
-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},
-];
-
-const LOGIN_ROWS = [
-  {label: 'Password', value: 'Not created', action: 'Create'},
-];
-
-const SOCIAL_ROWS = [
-  {label: 'Google', value: 'Connected', action: 'Disconnect'},
-];
-
-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',
-  },
-];
-
 const LANGUAGES = [
   {label: 'English (Canada)', value: 'en-CA'},
   {label: 'English (US)', value: 'en-US'},
@@ -141,84 +82,62 @@ const TIMEZONES = [
   {label: '(GMT+01:00) London', value: 'GMT+1'},
 ];
 
-interface ExpandableRowProps {
-  label: string;
-  value: string;
-  children: React.ReactNode;
-  isExpanded: boolean;
-  onEdit: () => void;
-  onCancel: () => void;
-  onSave: () => void;
+
+function InfoTile({icon, title, body}: InfoTileData) {
+  return (
+    <HStack gap={3} vAlign="start">
+      <Center width={48} height={48} style={iconBox}>
+        <Icon icon={icon} />
+      </Center>
+      <VStack gap={0}>
+        <Text type="body" weight="semibold" display="block">
+          {title}
+        </Text>
+        <Text type="body" color="secondary" display="block">
+          {body}
+        </Text>
+      </VStack>
+    </HStack>
+  );
 }
 
-function ExpandableRow({
-  label,
-  value,
-  children,
-  isExpanded,
-  onEdit,
-  onCancel,
-  onSave,
-}: ExpandableRowProps) {
+
+function DeviceRowItem({label, isCurrent, location, action}: DeviceRow) {
   return (
     <>
-      {isExpanded ? (
-        <VStack gap={4}>
-          <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">
+      <HStack gap={3} vAlign="start">
+        <Icon icon={Monitor} />
+        <StackItem size="fill">
           <VStack gap={0}>
-            <Text type="body" weight="semibold" display="block">
-              {label}
-            </Text>
-            <Text type="supporting" color="secondary" display="block">
-              {value}
+            {/* wrap: the label plus the session status exceed the compact
+                content width (~280px). */}
+            <HStack gap={2} vAlign="center" wrap="wrap">
+              <Text type="body" weight="semibold">
+                {label}
+              </Text>
+              {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>
+              {location}
             </Text>
           </VStack>
-          <Link
-            href={SELF_HASH}
-            onClick={(e: React.MouseEvent) => {
-              e.preventDefault();
-              onEdit();
-            }}>
-            Edit
+        </StackItem>
+        {action && (
+          <Link href={SELF_HASH} style={actionNoWrap}>
+            {action}
           </Link>
-        </HStack>
-      )}
-      <Divider />
-    </>
-  );
-}
-
-function InfoRowItem({
-  label,
-  value,
-  action,
-}: {
-  label: string;
-  value: string;
-  action: string;
-}) {
-  return (
-    <>
-      <HStack hAlign="between" vAlign="start">
-        <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={SELF_HASH}>{action}</Link>}
+        )}
       </HStack>
       <Divider />
     </>
@@ -264,6 +183,7 @@ export default function SettingsDialog() {
   return (
     <>
       <Layout
+        height="auto"
         content={
           <LayoutContent padding={0}>
             <Center height="80vh">
@@ -280,7 +200,9 @@ export default function SettingsDialog() {
       <Dialog
         isOpen={isOpen}
         onOpenChange={open => setIsOpen(open)}
-        width={isCompact ? 'calc(100vw - 32px)' : 900}
+        // One width for every viewport: below 932px the dialog shrinks with the
+        // window instead of clipping, so no compact branch is needed.
+        width="min(900px, calc(100vw - 32px))"
         maxHeight="85vh"
         padding={0}
         purpose="form"
@@ -291,9 +213,9 @@ export default function SettingsDialog() {
             isCompact ? undefined : (
               <LayoutPanel width={280} hasDivider role="navigation" padding={3}>
               <VStack gap={4}>
-                <Heading level={2} style={sideNavHeading}>
+                <Text type="label" style={sideNavHeading}>
                   Account settings
-                </Heading>
+                </Text>
                 <List density="spacious">
                   {NAV_ITEMS.map(item => (
                     <ListItem
@@ -351,7 +273,8 @@ export default function SettingsDialog() {
                           isExpanded={expandedRow === 'legalName'}
                           onEdit={() => handleEdit('legalName')}
                           onCancel={handleCancel}
-                          onSave={handleSave}>
+                          onSave={handleSave}
+                          href={SELF_HASH}>
                           <TextInput
                             label="Legal name"
                             isLabelHidden
@@ -365,7 +288,8 @@ export default function SettingsDialog() {
                           isExpanded={expandedRow === 'preferredName'}
                           onEdit={() => handleEdit('preferredName')}
                           onCancel={handleCancel}
-                          onSave={handleSave}>
+                          onSave={handleSave}
+                          href={SELF_HASH}>
                           <TextInput
                             label="Preferred first name"
                             isLabelHidden
@@ -379,7 +303,8 @@ export default function SettingsDialog() {
                           isExpanded={expandedRow === 'email'}
                           onEdit={() => handleEdit('email')}
                           onCancel={handleCancel}
-                          onSave={handleSave}>
+                          onSave={handleSave}
+                          href={SELF_HASH}>
                           <TextInput
                             label="Email address"
                             isLabelHidden
@@ -393,7 +318,8 @@ export default function SettingsDialog() {
                           isExpanded={expandedRow === 'phone'}
                           onEdit={() => handleEdit('phone')}
                           onCancel={handleCancel}
-                          onSave={handleSave}>
+                          onSave={handleSave}
+                          href={SELF_HASH}>
                           <TextInput
                             label="Phone number"
                             isLabelHidden
@@ -405,6 +331,7 @@ export default function SettingsDialog() {
                           label="Identity verification"
                           value="Verified"
                           action=""
+                        href={SELF_HASH}
                         />
                         <ExpandableRow
                           label="Residential address"
@@ -412,7 +339,8 @@ export default function SettingsDialog() {
                           isExpanded={expandedRow === 'address'}
                           onEdit={() => handleEdit('address')}
                           onCancel={handleCancel}
-                          onSave={handleSave}>
+                          onSave={handleSave}
+                          href={SELF_HASH}>
                           <TextInput
                             label="Residential address"
                             isLabelHidden
@@ -426,7 +354,8 @@ export default function SettingsDialog() {
                           isExpanded={expandedRow === 'mailingAddress'}
                           onEdit={() => handleEdit('mailingAddress')}
                           onCancel={handleCancel}
-                          onSave={handleSave}>
+                          onSave={handleSave}
+                          href={SELF_HASH}>
                           <TextInput
                             label="Mailing address"
                             isLabelHidden
@@ -440,7 +369,8 @@ export default function SettingsDialog() {
                           isExpanded={expandedRow === 'emergencyContact'}
                           onEdit={() => handleEdit('emergencyContact')}
                           onCancel={handleCancel}
-                          onSave={handleSave}>
+                          onSave={handleSave}
+                          href={SELF_HASH}>
                           <TextInput
                             label="Emergency contact"
                             isLabelHidden
@@ -452,70 +382,12 @@ export default function SettingsDialog() {
 
                       <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) => (
+                            <React.Fragment key={tile.title}>
+                              {i > 0 && <Divider />}
+                              <InfoTile {...tile} />
+                            </React.Fragment>
+                          ))}
                         </VStack>
                       </Card>
                     </VStack>
@@ -533,60 +405,34 @@ export default function SettingsDialog() {
 
                       {activeTab === 'login' && (
                         <VStack gap={8}>
-                          <VStack gap={4}>
+                          <VStack gap={0}>
                             <Heading level={3}>Login</Heading>
                             <Divider />
                             {LOGIN_ROWS.map(row => (
-                              <InfoRowItem key={row.label} {...row} />
+                              <InfoRowItem key={row.label} {...row} href={SELF_HASH} />
                             ))}
                           </VStack>
 
-                          <VStack gap={4}>
+                          <VStack gap={0}>
                             <Heading level={3}>Social accounts</Heading>
                             <Divider />
                             {SOCIAL_ROWS.map(row => (
-                              <InfoRowItem key={row.label} {...row} />
+                              <InfoRowItem key={row.label} {...row} href={SELF_HASH} />
                             ))}
                           </VStack>
 
-                          <VStack gap={4}>
+                          <VStack gap={0}>
                             <Heading level={3}>Device history</Heading>
                             <Divider />
-                            {DEVICE_ROWS.map((device, i) => (
-                              <React.Fragment key={i}>
-                                <HStack gap={3} vAlign="start">
-                                  <Icon icon={Monitor} />
-                                  <StackItem size="fill">
-                                    <VStack gap={0}>
-                                      <HStack gap={2} vAlign="center">
-                                        <Text type="body" weight="semibold">
-                                          {device.label}
-                                        </Text>
-                                        {device.badge && (
-                                          <Badge label={device.badge} />
-                                        )}
-                                      </HStack>
-                                      <Text
-                                        type="supporting"
-                                        color="secondary"
-                                        display="block"
-                                        hasTabularNumbers>
-                                        {device.location}
-                                      </Text>
-                                    </VStack>
-                                  </StackItem>
-                                  {device.action && (
-                                    <Link href={SELF_HASH} style={actionNoWrap}>
-                                      {device.action}
-                                    </Link>
-                                  )}
-                                </HStack>
-                                <Divider />
-                              </React.Fragment>
+                            {DEVICE_ROWS.map(device => (
+                              <DeviceRowItem
+                                key={device.location}
+                                {...device}
+                              />
                             ))}
                           </VStack>
 
-                          <VStack gap={4}>
+                          <VStack gap={0}>
                             <Heading level={3}>Account</Heading>
                             <Divider />
                             <HStack hAlign="between" vAlign="start">
@@ -618,9 +464,9 @@ export default function SettingsDialog() {
                             <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 trusted device.
+                              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>
 
@@ -630,13 +476,13 @@ export default function SettingsDialog() {
                                 <Icon icon={Lock} />
                               </Center>
                               <VStack gap={1}>
-                                <Text type="body" weight="bold">
-                                  Adding devices from people you trust
+                                <Text type="body">
+                                  Adding devices for your trusted coven
                                 </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
+                                  When you approve a request, you grant them
+                                  full passage through your crypt. They&apos;ll
+                                  be able to change bookings and send ravens
                                   on your behalf.
                                 </Text>
                               </VStack>
@@ -659,7 +505,8 @@ export default function SettingsDialog() {
                           isExpanded={expandedRow === 'language'}
                           onEdit={() => handleEdit('language')}
                           onCancel={handleCancel}
-                          onSave={handleSave}>
+                          onSave={handleSave}
+                          href={SELF_HASH}>
                           <Selector
                             label="Language"
                             isLabelHidden
@@ -678,7 +525,8 @@ export default function SettingsDialog() {
                           isExpanded={expandedRow === 'currency'}
                           onEdit={() => handleEdit('currency')}
                           onCancel={handleCancel}
-                          onSave={handleSave}>
+                          onSave={handleSave}
+                          href={SELF_HASH}>
                           <Selector
                             label="Currency"
                             isLabelHidden
@@ -697,7 +545,8 @@ export default function SettingsDialog() {
                           isExpanded={expandedRow === 'timezone'}
                           onEdit={() => handleEdit('timezone')}
                           onCancel={handleCancel}
-                          onSave={handleSave}>
+                          onSave={handleSave}
+                          href={SELF_HASH}>
                           <Selector
                             label="Time zone"
                             isLabelHidden
@@ -717,7 +566,7 @@ export default function SettingsDialog() {
                         <Heading level={3}>Notifications</Heading>
                         <Switch
                           label="Email notifications"
-                          description="Booking updates, reminders, and policy changes."
+                          description="Booking updates, reminders, and coven decrees."
                           value={emailNotif}
                           onChange={setEmailNotif}
                           labelPosition="start"
@@ -726,7 +575,7 @@ export default function SettingsDialog() {
                         <Divider />
                         <Switch
                           label="Push notifications"
-                          description="Time-sensitive alerts on this device."
+                          description="Time-sensitive alerts, delivered by raven."
                           value={pushNotif}
                           onChange={setPushNotif}
                           labelPosition="start"
@@ -743,14 +592,16 @@ export default function SettingsDialog() {
                         <Heading level={3}>Payments</Heading>
                         <Divider />
                         <InfoRowItem
-                          label="Payout method"
+                          label="Payout crypt"
                           value="Visa ending in 4821"
                           action=""
+                        href={SELF_HASH}
                         />
                         <InfoRowItem
-                          label="Billing history"
-                          value="No invoices yet"
+                          label="Past payouts"
+                          value="No tributes yet"
                           action=""
+                        href={SELF_HASH}
                         />
                       </VStack>
                     </VStack>
@@ -762,14 +613,16 @@ export default function SettingsDialog() {
                         <Heading level={3}>Taxes</Heading>
                         <Divider />
                         <InfoRowItem
-                          label="Tax profile"
+                          label="Tax scrolls"
                           value="Not submitted"
                           action=""
+                        href={SELF_HASH}
                         />
                         <InfoRowItem
-                          label="Tax documents"
-                          value="Available after your first payout"
+                          label="Past scrolls"
+                          value="Available after your first tribute"
                           action=""
+                        href={SELF_HASH}
                         />
                       </VStack>
                     </VStack>
@@ -780,8 +633,8 @@ export default function SettingsDialog() {
                       <VStack gap={4}>
                         <Heading level={3}>Travel for work</Heading>
                         <Switch
-                          label="Show work-trip options"
-                          description="Adds a work-trip toggle at checkout."
+                          label="Show night-errand options at checkout"
+                          description="Adds a night-errand toggle to your account."
                           value={workTravel}
                           onChange={setWorkTravel}
                           labelPosition="start"
@@ -816,8 +669,8 @@ export default function SettingsDialog() {
                         <VStack gap={4}>
                           <Heading level={3}>Listings</Heading>
                           <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"
@@ -828,13 +681,13 @@ export default function SettingsDialog() {
 
                         <VStack gap={4}>
                           <Heading level={3}>Reviews</Heading>
-                          <Text type="supporting" color="secondary">
+                          <Text type="body" color="secondary">
                             Choose what&apos;s shared when you write a review.{' '}
                             <Link href={SELF_HASH}>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}
@@ -842,8 +695,8 @@ export default function SettingsDialog() {
                               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"
@@ -858,8 +711,8 @@ export default function SettingsDialog() {
                               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"
@@ -897,10 +750,10 @@ export default function SettingsDialog() {
                                 <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={SELF_HASH}>