@oxy.so/bloom 3.5.0 → 4.0.0

package/src/mail-list/types.ts

@@ -0,0 +1,272 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { AccentTone } from '../theme/accent-colors';
+
+/**
+ * The two rungs of ONE row, not two components.
+ *
+ * `comfortable` is the phone inbox: avatar, three lines, 88 tall. `compact` is
+ * the desktop list: one line, 40 tall, the same facts on a single baseline.
+ * Nothing but the geometry table changes between them.
+ */
+export type MailDensity = 'comfortable' | 'compact';
+
+/** Who a message is from, as a row draws them. */
+export interface MailSender {
+  /** The display name, or the address when there is no name. */
+  name: string;
+  /** An avatar URL, or an id the `ImageResolver` knows. */
+  avatar?: string;
+}
+
+/**
+ * A mailbox label — a first-class datum in this domain, which is why the prop
+ * that carries them is `labels` and the i18n strings prop is `strings`.
+ *
+ * The COLOUR is a tone, never a hex: the chip paints it through
+ * `resolveAccentColors`, so a label reads the same way a status badge does and
+ * survives a preset change.
+ */
+export interface MailLabel {
+  id: string;
+  name: string;
+  /** Defaults to `'default'`, the neutral tint. */
+  tone?: AccentTone;
+}
+
+/** How loudly a row action is painted. */
+export type MailActionTone = 'default' | 'accent' | 'negative';
+
+/** One of the actions a row or the selection bar offers. */
+export interface MailAction {
+  key: string;
+  /** The accessible name, and the selection bar's tooltip text. */
+  label: string;
+  icon: BloomIconComponent;
+  /** Defaults to `'default'`. */
+  tone?: MailActionTone;
+  /** Called on its own, in addition to the list's `onMailAction`/`onBulkAction`. */
+  onPress?: () => void;
+}
+
+/**
+ * Where a row's `actions` are drawn AT REST.
+ *
+ * `hover` is the desktop rail: the buttons appear over the right column on
+ * hover and keyboard focus, and are hidden outright where the pointer cannot
+ * hover. `inline` draws them always — a kiosk or a tablet list with no pointer
+ * and no gesture. `none` draws nothing.
+ *
+ * Defaults to `hover` on web and `none` on native. A touch list reaches its
+ * actions by DRAGGING: pass `swipeActions`, never `inline`, or the phone row
+ * carries three icons it does not need at rest.
+ */
+export type MailActionPlacement = 'hover' | 'inline' | 'none';
+
+/**
+ * The actions behind a row, per side. `left` is uncovered by dragging RIGHT and
+ * `right` by dragging left — the side names the EDGE the pane is anchored to.
+ *
+ * It is a separate prop from `actions` because they answer different questions:
+ * `actions` is the whole menu a pointer gets at once, and a pane is ONE action
+ * a thumb reaches in one direction. Archive right, delete left is a convention
+ * a mail app owns, not one this family should guess from an array's order.
+ */
+export interface MailSwipeActions {
+  left?: readonly MailAction[];
+  right?: readonly MailAction[];
+}
+
+/** Every string this family draws that is not app data. */
+export interface MailStrings {
+  /** Prefix on a draft's snippet. Default `'Draft:'`. */
+  draft: string;
+  /** Announced for an unread row. Default `'Unread'`. */
+  unread: string;
+  /** Announced for a starred row, and the star button's name when it is on. */
+  starred: string;
+  /** The star button's name when the row is not starred. Default `'Star'`. */
+  star: string;
+  /** Announced when the row carries an attachment. Default `'Has attachment'`. */
+  attachment: string;
+  /** The row's checkbox. Default `'Select'`. */
+  select: string;
+  /** `(3) => '3 messages'` — the thread count, read aloud. */
+  threadCount: (count: number) => string;
+  /** `(2) => '2 more labels'` — the label overflow chip. */
+  moreLabels: (count: number) => string;
+  /** `(3) => '3 selected'` — the selection bar's count. */
+  selectedCount: (count: number) => string;
+  /** The selection bar's select-all checkbox. Default `'Select all'`. */
+  selectAll: string;
+  /** The selection bar's clear button. Default `'Clear selection'`. */
+  clearSelection: string;
+  /** Empty-state heading. */
+  emptyTitle: string;
+  /** Empty-state body. */
+  emptyDescription: string;
+  /** The day buckets {@link groupMailByDay} names. */
+  today: string;
+  yesterday: string;
+}
+
+export interface MailRowProps {
+  /** Who it is from. */
+  sender: MailSender;
+  /** The subject line. Drawn on its own line in `comfortable`, inline in `compact`. */
+  subject: string;
+  /** The first words of the body. One line, always. */
+  snippet?: string;
+  /** Already formatted by the app — this family never formats a clock. */
+  time?: string;
+  /**
+   * Nothing on this row is read yet. The WHOLE row changes weight: sender and
+   * subject go semibold and every rung of text moves up to the primary colour.
+   * There is no dot.
+   */
+  unread?: boolean;
+  /** Starred/flagged. Pressable when {@link onStarredChange} is given. */
+  starred?: boolean;
+  onStarredChange?: (starred: boolean) => void;
+  /** Draws the paperclip. The app decides what counts. */
+  hasAttachment?: boolean;
+  /** How many messages the thread holds. Drawn as a badge from 2 up. */
+  threadCount?: number;
+  /** An unsent draft is the newest message. Leads the snippet in the negative colour. */
+  draft?: boolean;
+  /** The mailbox labels. */
+  labels?: readonly MailLabel[];
+  /**
+   * How many label MARKS the row draws before the rest go unsaid. Default 2.
+   *
+   * On a one-line row a mark is a chip and the overflow count is one of them
+   * (`visibleLabels`); on a two-line row the first is a chip and the rest are
+   * dots (`labelMarks`). Either way the composed name says every label.
+   */
+  maxLabels?: number;
+  /** The row the reading pane is showing. */
+  selected?: boolean;
+  /**
+   * The row's multi-selection state. Passing `onCheckedChange` is what makes
+   * the checkbox appear at all — a list with no bulk actions draws avatars.
+   */
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  density?: MailDensity;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  /** A real href on web, so the row is a link and opens in a new tab. */
+  href?: string;
+  actions?: readonly MailAction[];
+  actionsPlacement?: MailActionPlacement;
+  /** What a drag uncovers on a touch pointer. */
+  swipeActions?: MailSwipeActions;
+  /**
+   * Turns the drag on or off explicitly. Defaults to `useSwipeAvailable()` —
+   * on for every touch pointer, off for a mouse, which has the rail instead.
+   */
+  swipeEnabled?: boolean;
+  /** Called with the action's `key`, from the rail, the drag or the rotor alike. */
+  onAction?: (key: string) => void;
+  /** Overrides the composed name. Pass it only to translate the whole sentence. */
+  accessibilityLabel?: string;
+  strings?: Partial<MailStrings>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** One row's data, as a list holds it. */
+export interface MailSummary
+  extends Omit<
+    MailRowProps,
+    'onPress' | 'onLongPress' | 'onAction' | 'onCheckedChange' | 'onStarredChange' | 'density' | 'testID'
+  > {
+  id: string;
+  /**
+   * When the message arrived, in epoch milliseconds. Only
+   * {@link groupMailByDay} reads it — a row draws {@link MailRowProps.time}.
+   */
+  date?: number;
+}
+
+export interface MailListSection {
+  key: string;
+  /** "Today", "Yesterday", "14 Mar". Absent renders one unlabelled run. */
+  title?: string;
+  mails: readonly MailSummary[];
+}
+
+export interface MailListProps {
+  /** Day sections. {@link groupMailByDay} builds them from a flat list. */
+  sections?: readonly MailListSection[];
+  /** One unlabelled run, for a list that is not bucketed. */
+  mails?: readonly MailSummary[];
+  density?: MailDensity;
+  /** The row the reading pane is showing. */
+  selectedId?: string;
+  /**
+   * The multi-selection. Passing `onCheckedIdsChange` turns the checkboxes on
+   * AND makes the selection bar appear — it is not a component the app places.
+   */
+  checkedIds?: readonly string[];
+  onCheckedIdsChange?: (ids: string[]) => void;
+  /** What the selection bar offers. */
+  bulkActions?: readonly MailAction[];
+  onBulkAction?: (key: string, ids: readonly string[]) => void;
+  /** Row actions shared by every row. A row's own `actions` wins. */
+  rowActions?: readonly MailAction[];
+  /** Swipe actions shared by every row. A row's own `swipeActions` wins. */
+  rowSwipeActions?: MailSwipeActions;
+  actionsPlacement?: MailActionPlacement;
+  /** Turns the drag on or off for every row. */
+  swipeEnabled?: boolean;
+  onMailPress?: (id: string) => void;
+  onMailLongPress?: (id: string) => void;
+  onMailAction?: (key: string, id: string) => void;
+  onMailStarredChange?: (id: string, starred: boolean) => void;
+  loading?: boolean;
+  /** Placeholder rows while `loading`. Default 8. */
+  loadingCount?: number;
+  /** Replaces the built-in empty state. */
+  empty?: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  strings?: Partial<MailStrings>;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface MailListSkeletonProps {
+  count?: number;
+  density?: MailDensity;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface MailSelectionBarProps {
+  /** How many rows are selected. The bar draws nothing at 0. */
+  count: number;
+  /** How many rows there are, for the select-all checkbox's indeterminate state. */
+  total: number;
+  onSelectAll?: (checked: boolean) => void;
+  onClear?: () => void;
+  actions?: readonly MailAction[];
+  onAction?: (key: string) => void;
+  density?: MailDensity;
+  strings?: Partial<MailStrings>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** What {@link groupMailByDay} needs that it cannot decide itself. */
+export interface MailDayGroupingOptions {
+  /** "Now", for the Today/Yesterday boundary. Defaults to `Date.now()`. */
+  now?: number;
+  /** The two bucket names. */
+  strings?: Partial<Pick<MailStrings, 'today' | 'yesterday'>>;
+  /** How an older bucket is titled. Defaults to a short local date. */
+  formatDate?: (date: Date) => string;
+}

package/src/mail-thread/MailAddressLine.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Button } from '../button';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { resolveMailPaint } from '../mail-list/shared';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import {
+  MAIL_THREAD_CSS,
+  MAIL_THREAD_STYLE_ID,
+  addressName,
+  mailThreadStrings,
+  visibleAddresses,
+} from './shared';
+import type { MailAddressLineProps } from './types';
+
+/**
+ * One `to` or `cc` line: the label, the names, and the overflow.
+ *
+ * THE OVERFLOW IS A CONTROL, NOT AN ELLIPSIS. A line truncated with "…" tells
+ * the reader there are more recipients and gives them no way to find out who —
+ * which, on a message they are about to reply-all to, is the one fact that
+ * changes what they write. So the surplus collapses into a "+3 more" button
+ * that reveals the rest in place, and the names stay selectable text either way.
+ *
+ * It draws a `to`/`cc` line inside a message header and it draws the same line
+ * anywhere else — a reading pane's summary, a confirmation dialog. It owns no
+ * state it does not have to: give it `expanded` and it is controlled.
+ */
+export function MailAddressLine({
+  label,
+  addresses,
+  maxVisible = 3,
+  expanded,
+  onExpandedChange,
+  strings,
+  style,
+  testID,
+}: MailAddressLineProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  useEffect(() => {
+    adoptStyleSheet(MAIL_THREAD_STYLE_ID, MAIL_THREAD_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMailPaint(theme, surface), [theme, surface]);
+  const text = useMemo(() => mailThreadStrings(strings), [strings]);
+  const [open, setOpen] = useControllableState<boolean>({
+    value: expanded,
+    defaultValue: false,
+    onChange: onExpandedChange,
+  });
+
+  const { shown, overflow } = visibleAddresses(addresses, open ? 0 : maxVisible);
+  if (addresses.length === 0) return null;
+
+  return (
+    <View
+      style={[
+        { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 4, minWidth: 0 },
+        style,
+      ]}
+      testID={testID}
+    >
+      <Text
+        variant="caption-1-regular"
+        style={{ color: paint.textTertiary, flexShrink: 0 }}
+        testID={testID ? `${testID}-label` : undefined}
+      >
+        {label}
+      </Text>
+      <Text
+        variant="caption-1-regular"
+        numberOfLines={open ? undefined : 1}
+        style={{ color: paint.textSecondary, flexShrink: 1, minWidth: 0 }}
+        testID={testID ? `${testID}-names` : undefined}
+      >
+        {shown.map(addressName).join(', ')}
+      </Text>
+      {overflow > 0 ? (
+        <Button
+          variant="link"
+          size="xs"
+          linkTone="secondary"
+          onPress={() => setOpen(true)}
+          accessibilityLabel={text.moreAddresses(overflow)}
+          testID={testID ? `${testID}-more` : undefined}
+        >
+          {`+${overflow}`}
+        </Button>
+      ) : null}
+    </View>
+  );
+}

package/src/mail-thread/MailMessage.tsx

@@ -0,0 +1,318 @@
+import React, { useEffect, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Avatar } from '../avatar';
+import { ButtonGroup, ButtonGroupItem } from '../button-group';
+import { Card } from '../card';
+import { useContainerWidth } from '../hooks/use-container-width';
+import { ComposerAttachmentStrip } from '../chat-composer';
+import { Chip } from '../chip';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { RiAttachment2 } from '../icons/remix/RiAttachment2';
+import { RiCornerUpLeftLine } from '../icons/remix/RiCornerUpLeftLine';
+import { RiFileTextLine } from '../icons/remix/RiFileTextLine';
+import { RiGroupLine } from '../icons/remix/RiGroupLine';
+import { RiShareForwardLine } from '../icons/remix/RiShareForwardLine';
+import { MailStar } from '../mail-list/parts';
+import { mailStrings, resolveMailPaint } from '../mail-list/shared';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { webDataSet } from '../styles/web-data';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { MailAddressLine } from './MailAddressLine';
+import { MailQuoteToggle } from './MailQuoteToggle';
+import {
+  MAIL_BODY_INSET,
+  MAIL_THREAD_CSS,
+  MAIL_THREAD_GEOMETRY,
+  MAIL_THREAD_STYLE_ID,
+  addressName,
+  mailThreadStrings,
+  replyLabelsFit,
+} from './shared';
+import type { MailMessageProps } from './types';
+
+/**
+ * One message in a thread, collapsed or open.
+ *
+ * COLLAPSED it is one line: who, the first words, and when. OPEN it grows a
+ * full header (the addresses, the full date), the body slot, the trimmed-content
+ * toggle, the attachments and the three replies.
+ *
+ * THE TWO STATES SHARE ONE HEADER ROW, and that is the whole reason the
+ * transition does not leave a gap. Both draw the same avatar at the same
+ * `paddingVertical` in the same leading column; the only thing that changes is
+ * what the text column holds and whether a body is drawn under it. A collapsed
+ * state written as its own compact row — its own padding, its own avatar size —
+ * is a row that jumps by a few pixels every time it opens, which reads as the
+ * list resettling rather than as the message opening.
+ *
+ * THE BODY IS A SLOT. This family renders no HTML and no rich text; a mail body
+ * is markup from a stranger and sanitising it is the app's decision, not a
+ * component's. What Bloom owns around it is the frame, the indent (the body
+ * starts under the NAME, not under the avatar) and the trimmed-content toggle.
+ *
+ * ACCESSIBILITY: the disclosure is a `button` carrying `aria-expanded` and the
+ * native `accessibilityState.expanded`, named "Expand message: <sender>" so a
+ * list of them is not eight identically-named buttons. The star, the overflow
+ * slot and the three replies are SIBLINGS of it, never children — a button
+ * inside a button is invalid, and the press target would be ambiguous.
+ */
+export function MailMessage({
+  sender,
+  to,
+  cc,
+  date,
+  time,
+  preview,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  unread = false,
+  starred = false,
+  onStarredChange,
+  attachments,
+  children,
+  trimmed,
+  onReply,
+  onReplyAll,
+  onForward,
+  menu,
+  strings,
+  style,
+  testID,
+}: MailMessageProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  useEffect(() => {
+    adoptStyleSheet(MAIL_THREAD_STYLE_ID, MAIL_THREAD_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMailPaint(theme, surface), [theme, surface]);
+  const text = useMemo(() => mailThreadStrings(strings), [strings]);
+  const rowStrings = useMemo(
+    () => mailStrings({ starred: text.starred, star: text.star }),
+    [text.star, text.starred],
+  );
+  const [open, setOpen] = useControllableState<boolean>({
+    value: expanded,
+    defaultValue: defaultExpanded,
+    onChange: onExpandedChange,
+  });
+
+  const geo = MAIL_THREAD_GEOMETRY;
+  const { width, onLayout } = useContainerWidth();
+  const name = addressName(sender);
+  const stamp = open ? (date ?? time) : (time ?? date);
+  const hasAttachments = (attachments ?? []).length > 0;
+
+  const toggleStyle: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    minWidth: 0,
+    borderRadius: 6,
+    '--bloom-mail-ring': paint.accent,
+  };
+
+  const replies = [
+    onReply === undefined
+      ? null
+      : { key: 'reply', label: text.reply, icon: RiCornerUpLeftLine, onPress: onReply },
+    onReplyAll === undefined
+      ? null
+      : { key: 'reply-all', label: text.replyAll, icon: RiGroupLine, onPress: onReplyAll },
+    onForward === undefined
+      ? null
+      : { key: 'forward', label: text.forward, icon: RiShareForwardLine, onPress: onForward },
+  ].filter((entry): entry is NonNullable<typeof entry> => entry !== null);
+
+  // An OPEN message is a surface, and Bloom's surface is a `Card` — the card
+  // fill, the hairline, the radius scale — not a grey wash painted by hand. A
+  // COLLAPSED one paints nothing, so a thread reads as one list with a card
+  // opened inside it rather than as a column of blocks.
+  // Three labelled actions need about 320 of the message's own width; under
+  // that the group keeps the glyphs and drops the words, which is what
+  // `ButtonGroupItem` is built for — the accessible name is the label either
+  // way, so nothing is lost by the labels going.
+  const compactReplies = !replyLabelsFit(width);
+  const Shell = open ? Card : View;
+  const shellProps = open
+    ? { variant: 'outlined' as const, radius: 'radius-16' as const, testID }
+    : { testID };
+  return (
+    <Shell
+      {...shellProps}
+      style={[open ? { paddingBottom: geo.paddingVertical } : null, style]}
+    >
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: open ? 'flex-start' : 'center',
+          paddingTop: geo.paddingVertical,
+          paddingBottom: geo.paddingVertical,
+          paddingLeft: geo.paddingHorizontal,
+          paddingRight: geo.paddingHorizontal,
+          gap: geo.gap,
+        }}
+      >
+        <View pointerEvents="none" aria-hidden importantForAccessibility="no-hide-descendants">
+          <Avatar
+            source={sender.avatar ?? null}
+            name={name}
+            size={geo.avatar}
+            testID={testID ? `${testID}-avatar` : undefined}
+          />
+        </View>
+        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+          <Pressable
+            {...webDataSet({ bloomMailThreadFocusable: '' })}
+            role="button"
+            accessibilityLabel={`${open ? text.collapse : text.expand}: ${name}`}
+            aria-expanded={open}
+            accessibilityState={{ expanded: open }}
+            onPress={() => setOpen(!open)}
+            style={toggleStyle}
+            testID={testID ? `${testID}-toggle` : undefined}
+          >
+            <Text
+              variant={unread ? 'body-semibold' : 'body-medium'}
+              numberOfLines={1}
+              // Shrinkable: the row's own date is not, so a long sender on a
+              // narrow pane has to give way or it overruns the star beside it
+              // (measured at 390px, where the two overlapped by a few pixels).
+              style={{ color: paint.text, flexShrink: 1, minWidth: 0, maxWidth: '60%' }}
+              testID={testID ? `${testID}-sender` : undefined}
+            >
+              {name}
+            </Text>
+            {open ? (
+              <View style={{ flex: 1 }} />
+            ) : (
+              <Text
+                variant="body-2-regular"
+                numberOfLines={1}
+                style={{ color: paint.textTertiary, flex: 1, minWidth: 0 }}
+                testID={testID ? `${testID}-preview` : undefined}
+              >
+                {preview}
+              </Text>
+            )}
+            {hasAttachments ? (
+              <View
+                aria-hidden
+                importantForAccessibility="no-hide-descendants"
+                style={{ flexShrink: 0 }}
+                testID={testID ? `${testID}-attachment-marker` : undefined}
+              >
+                <RiAttachment2 width={geo.glyph} height={geo.glyph} fill={paint.textGraphical} />
+              </View>
+            ) : null}
+            {stamp === undefined ? null : (
+              <Text
+                variant="caption-1-regular"
+                numberOfLines={1}
+                style={{ color: paint.textTertiary, flexShrink: 0 }}
+                testID={testID ? `${testID}-time` : undefined}
+              >
+                {stamp}
+              </Text>
+            )}
+          </Pressable>
+          {open ? (
+            <View style={{ gap: 2 }}>
+              {(to ?? []).length > 0 ? (
+                <MailAddressLine
+                  label={text.to}
+                  addresses={to as NonNullable<typeof to>}
+                  strings={strings}
+                  testID={testID ? `${testID}-to` : undefined}
+                />
+              ) : null}
+              {(cc ?? []).length > 0 ? (
+                <MailAddressLine
+                  label={text.cc}
+                  addresses={cc as NonNullable<typeof cc>}
+                  strings={strings}
+                  testID={testID ? `${testID}-cc` : undefined}
+                />
+              ) : null}
+            </View>
+          ) : null}
+        </View>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, flexShrink: 0 }}>
+          <MailStar
+            starred={starred}
+            onStarredChange={onStarredChange}
+            size={geo.action}
+            glyph={18}
+            paint={paint}
+            strings={rowStrings}
+            testID={testID ? `${testID}-star` : undefined}
+          />
+          {menu}
+        </View>
+      </View>
+
+      {open ? (
+        <View
+          // The BODY is what measures itself, not the card: the reply group
+          // lives in here, and `Card` has no `onLayout` of its own to borrow.
+          onLayout={onLayout}
+          style={{
+            paddingLeft: MAIL_BODY_INSET,
+            paddingRight: geo.paddingHorizontal,
+            gap: 12,
+          }}
+          testID={testID ? `${testID}-body` : undefined}
+        >
+          {children}
+          {trimmed === undefined ? null : (
+            <MailQuoteToggle
+              strings={strings}
+              testID={testID ? `${testID}-trimmed` : undefined}
+            >
+              {trimmed}
+            </MailQuoteToggle>
+          )}
+          {hasAttachments ? (
+            <ComposerAttachmentStrip
+              // The tile's one line is the NAME: a column of "1.2 MB" says
+              // nothing about which file it is. The size travels in the
+              // accessible name instead, where it costs no width.
+              attachments={(attachments ?? []).map((attachment) => ({
+                id: attachment.id,
+                name: attachment.name,
+                icon: attachment.icon,
+              }))}
+              openLabel={(tile) => {
+                const size = (attachments ?? []).find((entry) => entry.id === tile.id)?.size;
+                return size === undefined ? tile.name : `${tile.name} · ${size}`;
+              }}
+              onOpen={(id) => (attachments ?? []).find((entry) => entry.id === id)?.onPress?.()}
+              accessibilityLabel={text.attachments}
+              testID={testID ? `${testID}-attachments` : undefined}
+            />
+          ) : null}
+          {replies.length > 0 ? (
+            <ButtonGroup accessibilityLabel={text.attachments} style={{ alignSelf: 'flex-start' }}>
+              {replies.map((reply) => (
+                <ButtonGroupItem
+                  key={reply.key}
+                  leadingIcon={reply.icon}
+                  iconOnly={compactReplies}
+                  accessibilityLabel={reply.label}
+                  onPress={reply.onPress}
+                  testID={testID ? `${testID}-${reply.key}` : undefined}
+                >
+                  {reply.label}
+                </ButtonGroupItem>
+              ))}
+            </ButtonGroup>
+          ) : null}
+        </View>
+      ) : null}
+    </Shell>
+  );
+}