astryx-dracula 0.2.0 → 0.3.0

package/templates/messaging-shell.tsx

@@ -1,22 +1,9 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LP[w=68] > V > Av + (V > IB*4) + IB) + (LP[w=260] > V > (H > Hd"Messages"[level=1] + IB) + TI"Jump to…" + (V > Tx"Channels"[t=label] + (List > (ListItem)*4)) + (V > Tx"Direct messages"[t=label] + (List > (ListItem)*3))) + (LC[p=0] > V > (H > Hd"design-systems"[level=2] + SD + IB) + (ChL > ChML > (ChM > ChB)*6 + ChC)) + (LP[w=340] > V > (H > Tx"Thread"[weight=semibold] + IB) + (ChL > ChML > (ChM > ChB)*3 + ChC))
 
 /**
- * Messaging Shell — Slack-style column frame for team messaging tools.
- *
- * Frame (desktop, left to right):
- *   workspace rail 68px | channel sidebar 260px | message stream (fill) | thread panel 340px
- *
- * Container policy: dense rows, zero Cards. Channels and DMs are List/ListItem
- * rows, presence is AvatarStatusDot/StatusDot, unread counts are the only
- * Badge usage. The stream and thread are built on the Chat component family.
- *
- * Responsive contract:
- *   >1024px  — full four-column frame (rail | sidebar | stream | thread)
- *   <=1024px — thread panel hidden; stream takes the reclaimed width
- *   <=768px  — sidebar also hidden; rail + stream keep full width
- *
- * Fixtures are deterministic: fixed ISO timestamps rendered via <Timestamp>,
- * no Date.now()/Math.random() anywhere.
+ * Messaging Shell — Slack-style column frame for team messaging tools.  Frame (desktop, left to right): (Frame/responsive/container: see XLE header above.)
  */
 
 import {useState, type CSSProperties} from 'react';
@@ -86,9 +73,6 @@ const styles: Record<string, CSSProperties> = {
     paddingTop: 'var(--spacing-3)',
     paddingBottom: 'var(--spacing-3)',
   },
-  railSpacer: {
-    flex: 1,
-  },
   sidebar: {
     height: '100%',
     minHeight: 0,
@@ -102,15 +86,22 @@ const styles: Record<string, CSSProperties> = {
     paddingInline: 'var(--spacing-3)',
     paddingBottom: 'var(--spacing-2)',
   },
+  // Block-start only: the inline (8px) and bottom (12px) edges already clear
+  // Two different jobs on one object, so the two different values are not
+  // redundant. INLINE is a content gutter: it must equal sidebarHeader and
+  // sidebarSearch above it (both var(--spacing-3) = 12px) because the channel
+  // list sits directly under the search field in the same 260px start panel --
+  // at 8px the body sat 4px inside the field above it. BLOCK-START is a ring
+  // budget, not a gutter: 4px = ring offset 2 + thickness 2, so the focus ring
+  // lands inside this clip instead of on its edge. The bottom edge stays 12px
+  // because the list scrolls into it, not into a ring.
   sidebarScroll: {
     minHeight: 0,
     overflowY: 'auto',
-    paddingInline: 'var(--spacing-2)',
+    paddingInline: 'var(--spacing-3)',
+    paddingBlockStart: 'var(--spacing-1)',
     paddingBottom: 'var(--spacing-3)',
   },
-  sectionGap: {
-    marginTop: 'var(--spacing-4)',
-  },
   streamColumn: {
     height: '100%',
     minHeight: 0,
@@ -139,7 +130,7 @@ const styles: Record<string, CSSProperties> = {
   threadHeader: {
     alignItems: 'center',
     paddingInline: 'var(--spacing-3)',
-    paddingBlock: 'var(--spacing-2)',
+    paddingBlock: 'var(--spacing-3)',
   },
   threadScroll: {
     minHeight: 0,
@@ -211,7 +202,7 @@ const DIRECT_MESSAGES: DirectMessage[] = [
   {id: 'dm-sasha', userId: 'sasha', presence: 'offline', unread: 0},
 ];
 
-// AvatarStatusDot supports success | neutral | error (no warning).
+// AvatarStatusDot supports success | neutral | error (no warning): busy stays error (do-not-disturb), never warning.
 const PRESENCE_VARIANT: Record<Presence, 'success' | 'error' | 'neutral'> = {
   online: 'success',
   busy: 'error',
@@ -224,12 +215,18 @@ const PRESENCE_LABEL: Record<Presence, string> = {
   offline: 'Offline',
 };
 
+/** One bubble's copy. Ids key the bubble; its position only sets the grouping. */
+interface StreamBubble {
+  id: string;
+  text: string;
+}
+
 /** One message group: consecutive bubbles from the same sender. */
 interface StreamMessage {
   id: string;
   userId: string;
   time: string;
-  bubbles: string[];
+  bubbles: StreamBubble[];
 }
 
 const MESSAGES_BY_CHANNEL: Record<string, StreamMessage[]> = {
@@ -239,23 +236,40 @@ const MESSAGES_BY_CHANNEL: Record<string, StreamMessage[]> = {
       userId: 'mira',
       time: '2026-06-30T09:12:00',
       bubbles: [
-        'Morning! The Timestamp component now supports a `system_date` format — worth switching the audit log over.',
-        'I put the migration notes in the wiki under Decisions.',
+        {
+          id: 'm1-1',
+          text: 'Morning! The Timestamp component now supports a `system_date` format, worth switching the audit log over.',
+        },
+        {
+          id: 'm1-2',
+          text: 'I put the migration notes in the wiki under Decisions.',
+        },
       ],
     },
     {
       id: 'm2',
       userId: 'devon',
       time: '2026-06-30T09:15:00',
-      bubbles: ['Nice. Does that unblock the incident console timeline work?'],
+      bubbles: [
+        {
+          id: 'm2-1',
+          text: 'Nice. Does that unblock the incident console timeline work?',
+        },
+      ],
     },
     {
       id: 'm3',
       userId: 'you',
       time: '2026-06-30T09:17:00',
       bubbles: [
-        'It does — I will pick that up after the template review.',
-        'One question on the List density defaults, will start a thread.',
+        {
+          id: 'm3-1',
+          text: 'It does. I will pick that up after the template review.',
+        },
+        {
+          id: 'm3-2',
+          text: 'One question on the List density defaults, will start a thread.',
+        },
       ],
     },
     {
@@ -263,14 +277,17 @@ const MESSAGES_BY_CHANNEL: Record<string, StreamMessage[]> = {
       userId: 'sasha',
       time: '2026-06-30T09:24:00',
       bubbles: [
-        'Heads up: the token sync job ran clean overnight, no drift between core and the theme packages.',
+        {
+          id: 'm4-1',
+          text: 'Heads up: the token sync job ran clean overnight, no drift between core and the theme packages.',
+        },
       ],
     },
     {
       id: 'm5',
       userId: 'mira',
       time: '2026-06-30T09:26:00',
-      bubbles: ['Great — closing out the drift task then.'],
+      bubbles: [{id: 'm5-1', text: 'Great, closing out the drift task then.'}],
     },
   ],
   'frontend-guild': [
@@ -279,14 +296,17 @@ const MESSAGES_BY_CHANNEL: Record<string, StreamMessage[]> = {
       userId: 'devon',
       time: '2026-06-30T08:40:00',
       bubbles: [
-        'Guild sync moved to Thursday this week to avoid the release freeze.',
+        {
+          id: 'g1-1',
+          text: 'Guild sync moved to Thursday this week to avoid the release freeze.',
+        },
       ],
     },
     {
       id: 'g2',
       userId: 'you',
       time: '2026-06-30T08:44:00',
-      bubbles: ['Works for me — agenda doc is updated.'],
+      bubbles: [{id: 'g2-1', text: 'Works for me, agenda doc is updated.'}],
     },
   ],
 };
@@ -302,7 +322,7 @@ const THREAD_ROOT: ThreadReply = {
   id: 't0',
   userId: 'you',
   time: '2026-06-30T09:17:30',
-  text: 'One question on the List density defaults — should channel sidebars use compact or balanced? The spec shows both.',
+  text: 'One question on the List density defaults: should channel sidebars use compact or balanced? The spec shows both.',
 };
 
 const THREAD_REPLIES: ThreadReply[] = [
@@ -316,7 +336,7 @@ const THREAD_REPLIES: ThreadReply[] = [
     id: 't2',
     userId: 'devon',
     time: '2026-06-30T09:21:00',
-    text: 'Agreed — the sidebar rows here are a good reference implementation.',
+    text: 'Agreed, the sidebar rows here are a good reference implementation.',
   },
 ];
 
@@ -341,9 +361,9 @@ function StreamMessageGroup({message}: {message: StreamMessage}) {
     <ChatMessage
       sender={isSelf ? 'user' : 'assistant'}
       avatar={isSelf ? undefined : <Avatar name={user.name} size="md" />}>
-      {message.bubbles.map((text, index) => (
+      {message.bubbles.map((bubble, index) => (
         <ChatMessageBubble
-          key={`${message.id}-${index}`}
+          key={bubble.id}
           group={
             message.bubbles.length === 1
               ? undefined
@@ -361,7 +381,7 @@ function StreamMessageGroup({message}: {message: StreamMessage}) {
               />
             ) : undefined
           }>
-          {text}
+          {bubble.text}
         </ChatMessageBubble>
       ))}
     </ChatMessage>
@@ -398,7 +418,7 @@ export default function MessagingShell() {
 
   const workspaceRail = (
     <VStack gap={2} style={styles.rail}>
-      <Avatar name="Night Watch" size="md" />
+      <Avatar name="Night watch" size="md" />
       {RAIL_ITEMS.map(item => (
         <IconButton
           key={item.id}
@@ -409,7 +429,7 @@ export default function MessagingShell() {
           onClick={() => {}}
         />
       ))}
-      <div style={styles.railSpacer} />
+      <StackItem size="fill" />
       <IconButton
         label="Settings"
         tooltip="Settings"
@@ -429,7 +449,7 @@ export default function MessagingShell() {
     <Stack direction="vertical" style={styles.sidebar}>
       <HStack gap={2} style={styles.sidebarHeader}>
         <StackItem size="fill">
-          <Heading level={5}>Night Watch</Heading>
+          <Heading level={1}>Messages</Heading>
         </StackItem>
         <IconButton
           label="New message"
@@ -440,18 +460,23 @@ export default function MessagingShell() {
           onClick={() => {}}
         />
       </HStack>
-      <div style={styles.sidebarSearch}>
+      <VStack gap={0} style={styles.sidebarSearch}>
         <TextInput
           label="Jump to"
           isLabelHidden
           size="sm"
-          placeholder="Jump to..."
+          placeholder="Jump to…"
           startIcon={Search}
           value={searchQuery}
           onChange={setSearchQuery}
         />
-      </div>
-      <StackItem size="fill" style={styles.sidebarScroll}>
+      </VStack>
+      <StackItem
+        size="fill"
+        style={styles.sidebarScroll}
+        role="region"
+        aria-label="Channels and direct messages"
+        tabIndex={0}>
         <List
           density="compact"
           hasDividers={false}
@@ -480,42 +505,43 @@ export default function MessagingShell() {
             />
           ))}
         </List>
-        <div style={styles.sectionGap}>
-          <List
-            density="compact"
-            hasDividers={false}
-            header={
-              <Text type="label" size="sm" color="secondary">
-                Direct messages
-              </Text>
-            }>
-            {visibleDms.map(dm => (
-              <ListItem
-                key={dm.id}
-                label={USERS[dm.userId].name}
-                isSelected={selectedDmId === dm.id}
-                onClick={() => setSelectedDmId(dm.id)}
-                startContent={
-                  <Avatar
-                    name={USERS[dm.userId].name}
-                    size="sm"
-                    status={
-                      <AvatarStatusDot
-                        variant={PRESENCE_VARIANT[dm.presence]}
-                        label={PRESENCE_LABEL[dm.presence]}
-                      />
-                    }
-                  />
-                }
-                endContent={
-                  dm.unread > 0 ? (
-                    <Badge label={String(dm.unread)} variant="neutral" />
-                  ) : undefined
-                }
-              />
-            ))}
-          </List>
-        </div>
+        {/* The section gap rides on this List's own margin: List is the row
+            container, so no wrapper element is needed. */}
+        <List
+          density="compact"
+          hasDividers={false}
+          style={styles.sectionGap}
+          header={
+            <Text type="label" size="sm" color="secondary">
+              Direct messages
+            </Text>
+          }>
+          {visibleDms.map(dm => (
+            <ListItem
+              key={dm.id}
+              label={USERS[dm.userId].name}
+              isSelected={selectedDmId === dm.id}
+              onClick={() => setSelectedDmId(dm.id)}
+              startContent={
+                <Avatar
+                  name={USERS[dm.userId].name}
+                  size="sm"
+                  status={
+                    <AvatarStatusDot
+                      variant={PRESENCE_VARIANT[dm.presence]}
+                      label={PRESENCE_LABEL[dm.presence]}
+                    />
+                  }
+                />
+              }
+              endContent={
+                dm.unread > 0 ? (
+                  <Badge label={String(dm.unread)} variant="neutral" />
+                ) : undefined
+              }
+            />
+          ))}
+        </List>
       </StackItem>
     </Stack>
   );
@@ -524,9 +550,9 @@ export default function MessagingShell() {
     <Stack direction="vertical" style={styles.streamColumn}>
       <HStack gap={3} style={styles.streamHeader}>
         <Icon icon={Hash} size="sm" color="secondary" />
-        <Heading level={5}>{selectedChannel.name}</Heading>
+        <Heading level={2}>{selectedChannel.name}</Heading>
         <StackItem size="fill" style={styles.streamTopic}>
-          <Text type="supporting" color="secondary" maxLines={1}>
+          <Text type="body" color="secondary" maxLines={1}>
             {selectedChannel.topic}
           </Text>
         </StackItem>
@@ -542,36 +568,35 @@ export default function MessagingShell() {
       </HStack>
       <Divider />
       <StackItem size="fill" style={styles.chatArea}>
-        <div style={styles.chatFill}>
-          <ChatLayout
-            composer={
-              <ChatComposer
-                placeholder={`Message #${selectedChannel.name}`}
-                onSubmit={() => {}}
-              />
-            }
-            emptyState={
-              <EmptyState
-                icon={<Icon icon={Inbox} size="lg" />}
-                title="No messages yet"
-                description="Start the conversation — messages posted here are visible to the whole channel."
-              />
-            }>
-            {messages.length > 0 ? (
-              <ChatMessageList density="balanced">
-                <ChatSystemMessage variant="divider">
-                  Tuesday, June 30
-                </ChatSystemMessage>
-                <ChatSystemMessage>
-                  Sasha Ortiz joined #{selectedChannel.name}
-                </ChatSystemMessage>
-                {messages.map(message => (
-                  <StreamMessageGroup key={message.id} message={message} />
-                ))}
-              </ChatMessageList>
-            ) : null}
-          </ChatLayout>
-        </div>
+        <ChatLayout
+          style={styles.chatFill}
+          composer={
+            <ChatComposer
+              placeholder={`Message #${selectedChannel.name}`}
+              onSubmit={() => {}}
+            />
+          }
+          emptyState={
+            <EmptyState
+              icon={<Icon icon={Inbox} size="lg" color="secondary" />}
+              title="No messages yet"
+              description="Start the conversation. Messages posted here are visible to the whole channel."
+            />
+          }>
+          {messages.length > 0 ? (
+            <ChatMessageList density="balanced">
+              <ChatSystemMessage variant="divider">
+                Tuesday, June 30
+              </ChatSystemMessage>
+              <ChatSystemMessage>
+                Sasha Ortiz joined #{selectedChannel.name}
+              </ChatSystemMessage>
+              {messages.map(message => (
+                <StreamMessageGroup key={message.id} message={message} />
+              ))}
+            </ChatMessageList>
+          ) : null}
+        </ChatLayout>
       </StackItem>
     </Stack>
   );
@@ -597,7 +622,12 @@ export default function MessagingShell() {
         />
       </HStack>
       <Divider />
-      <StackItem size="fill" style={styles.threadScroll}>
+      <StackItem
+        size="fill"
+        style={styles.threadScroll}
+        role="region"
+        aria-label="Thread messages"
+        tabIndex={0}>
         <ChatMessageList density="compact">
           <ChatMessage
             sender="assistant"
@@ -635,41 +665,40 @@ export default function MessagingShell() {
           ))}
         </ChatMessageList>
       </StackItem>
-      <div style={styles.threadComposer}>
+      <VStack gap={0} style={styles.threadComposer}>
         <ChatComposer
           density="compact"
-          placeholder="Reply in thread..."
+          placeholder="Reply in thread…"
           onSubmit={() => {}}
         />
-      </div>
+      </VStack>
     </Stack>
   );
 
   return (
-    <div style={styles.root}>
-      <Layout
-        height="fill"
-        start={
-          <>
-            <LayoutPanel width={68} padding={0}>
-              {workspaceRail}
+    <Layout
+      height="fill"
+      style={styles.root}
+      start={
+        <>
+          <LayoutPanel width={68} padding={0}>
+            {workspaceRail}
+          </LayoutPanel>
+          {!isSidebarHidden && (
+            <LayoutPanel width={260} padding={0}>
+              {channelSidebar}
             </LayoutPanel>
-            {!isSidebarHidden && (
-              <LayoutPanel width={260} padding={0}>
-                {channelSidebar}
-              </LayoutPanel>
-            )}
-          </>
-        }
-        end={
-          showThreadPanel ? (
-            <LayoutPanel width={340} padding={0}>
-              {threadPanel}
-            </LayoutPanel>
-          ) : undefined
-        }
-        content={<LayoutContent padding={0}>{messageStream}</LayoutContent>}
-      />
-    </div>
+          )}
+        </>
+      }
+      end={
+        showThreadPanel ? (
+          <LayoutPanel width={340} padding={0}>
+            {threadPanel}
+          </LayoutPanel>
+        ) : undefined
+      }
+      content={<LayoutContent padding={0}>{messageStream}</LayoutContent>}
+    />
   );
 }