@oxy.so/bloom 5.2.0 → 5.4.0

package/src/mail-list/MailRow.tsx

@@ -41,26 +41,11 @@ import type { MailAction, MailRowProps } from './types';
 /**
  * One message thread in the inbox.
  *
- *   comfortable  72 tall · 16 padding · 48 avatar · sender and time on the
- *                first line, subject and snippet on the second, the star on
- *                the right where it is a control
- *   compact      40 tall · 12 padding · 24 avatar · sender, then subject and
- *                snippet on ONE baseline, then the states and the time
+ * Compact uses one baseline; comfortable and cozy stack sender above subject
+ * and snippet. All three share a geometry table, content, paint and actions.
  *
- * ONE component, two rungs of a geometry table. There is no second row
- * component for the desktop: everything a compact row draws, a comfortable row
- * draws too, and a density that forked into two files is a density that drifts.
- *
- * TWO LINES, NOT THREE, AND NOTHING DRAWN AT REST THAT IS NOT INFORMATION.
- * The phone row is the same 72/48 as a conversation row, so an inbox and a
- * messages screen read as one library. What paid for the third line: the
- * subject and the snippet share line two, the labels collapse to a chip and
- * dots, and the star is drawn only where it is a control.
- *
- * THE SUBJECT AND THE SNIPPET ARE ONE `Text`, at both densities. Two
- * neighbouring flex children each want to be as wide as their content, and the
- * result of a long one is a row that pushes sideways or a subject clipped to
- * nothing. One string with a nested span truncates where the line ends.
+ * The subject and snippet share ONE Text at every density, so a long snippet
+ * cannot claim its own flex width and push the subject out of the row.
  *
  * UNREAD IS THE WHOLE ROW, NOT A DOT. The sender and the subject go semibold
  * and every rung of text moves up to the primary colour; a read row sits on the
@@ -97,6 +82,7 @@ function MailRowComponent({
   checked = false,
   onCheckedChange,
   density = 'comfortable',
+  showAvatar = true,
   onPress,
   onLongPress,
   href,
@@ -210,6 +196,7 @@ function MailRowComponent({
 
   const paperclip = hasAttachment ? (
     <View
+      pointerEvents="none"
       aria-hidden
       importantForAccessibility="no-hide-descendants"
       style={{ flexShrink: 0 }}
@@ -222,6 +209,7 @@ function MailRowComponent({
   const threadBadge =
     (threadCount ?? 0) > 1 ? (
       <View
+        pointerEvents="none"
         aria-hidden
         importantForAccessibility="no-hide-descendants"
         style={{ flexShrink: 0 }}
@@ -233,20 +221,22 @@ function MailRowComponent({
 
   const timeText =
     time === undefined ? null : (
-      <Text
-        variant={geo.timeVariant}
-        numberOfLines={1}
-        style={{ color: timeColor, flexShrink: 0 }}
-        testID={testID ? `${testID}-time` : undefined}
-      >
-        {time}
-      </Text>
+      <View pointerEvents="none" style={{ flexShrink: 0 }}>
+        <Text
+          variant={geo.timeVariant}
+          numberOfLines={1}
+          style={{ color: timeColor, flexShrink: 0 }}
+          testID={testID ? `${testID}-time` : undefined}
+        >
+          {time}
+        </Text>
+      </View>
     );
 
   // --- the leading slot: a checkbox when the list can multi-select ----------
   const leading =
     onCheckedChange !== undefined ? (
-      <View style={{ width: geo.avatar, alignItems: 'center', flexShrink: 0 }}>
+      <View pointerEvents="box-none" style={{ width: geo.avatar, alignItems: 'center', flexShrink: 0 }}>
         <Checkbox
           checked={checked}
           onCheckedChange={onCheckedChange}
@@ -255,7 +245,7 @@ function MailRowComponent({
           testID={testID ? `${testID}-checkbox` : undefined}
         />
       </View>
-    ) : (
+    ) : showAvatar ? (
       <View
         pointerEvents="none"
         aria-hidden
@@ -269,7 +259,7 @@ function MailRowComponent({
           testID={testID ? `${testID}-avatar` : undefined}
         />
       </View>
-    );
+    ) : null;
 
   // --- the text column -----------------------------------------------------
   const column = compact ? (
@@ -283,7 +273,7 @@ function MailRowComponent({
         flexDirection: 'row',
         alignItems: 'center',
         gap: geo.gap,
-        marginLeft: geo.gap,
+        marginLeft: leading === null ? 0 : geo.gap,
       }}
     >
       <Text
@@ -318,7 +308,7 @@ function MailRowComponent({
       pointerEvents="none"
       aria-hidden
       importantForAccessibility="no-hide-descendants"
-      style={{ flex: 1, minWidth: 0, marginLeft: geo.gap, gap: geo.lineGap }}
+      style={{ flex: 1, minWidth: 0, marginLeft: leading === null ? 0 : geo.gap, gap: geo.lineGap }}
     >
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
         <Text
@@ -374,7 +364,7 @@ function MailRowComponent({
   // and every star press would open the thread. Everything else in here is
   // hidden from assistive technology; the row's composed name already says it.
   const states = paperclip || threadBadge || onStarredChange !== undefined ? (
-    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+    <View pointerEvents="box-none" style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
       {paperclip}
       {threadBadge}
       {onStarredChange === undefined ? (starred ? star : null) : star}
@@ -447,6 +437,7 @@ function MailRowComponent({
         testID={testID ? `${testID}-link` : undefined}
       />
       <View
+        pointerEvents="box-none"
         style={{
           flexDirection: 'row',
           alignItems: 'center',

package/src/mail-list/messages.ts

@@ -1,4 +1,4 @@
-import type { MessageCatalog } from '../locale/messages';
+import { defineMessages, type MessageCatalog } from '../locale/messages';
 import { plural } from '../locale/plural';
 import type { MailStrings } from './types';
 
@@ -12,293 +12,21 @@ export interface MailListMessages extends MailStrings {
   list: string;
 }
 
-export const MAIL_LIST_MESSAGES: MessageCatalog<MailListMessages> = {
-  en: {
-    draft: 'Draft:',
-    unread: 'Unread',
-    starred: 'Starred',
-    star: 'Star',
-    attachment: 'Has attachment',
-    select: 'Select',
-    threadCount: (n) => plural('en', n, { one: '{n} message', other: '{n} messages' }),
-    moreLabels: (n) => plural('en', n, { one: '{n} more label', other: '{n} more labels' }),
-    selectedCount: (n) => `${n} selected`,
-    selectAll: 'Select all',
-    clearSelection: 'Clear selection',
-    emptyTitle: 'Nothing here',
-    emptyDescription: 'New mail lands in this folder.',
-    today: 'Today',
-    yesterday: 'Yesterday',
-    list: 'Mail',
-  },
-  es: {
-    draft: 'Borrador:',
-    unread: 'No leído',
-    starred: 'Destacado',
-    star: 'Destacar',
-    attachment: 'Tiene archivo adjunto',
-    select: 'Seleccionar',
-    threadCount: (n) => plural('es', n, { one: '{n} mensaje', other: '{n} mensajes' }),
-    moreLabels: (n) => plural('es', n, { one: '{n} etiqueta más', other: '{n} etiquetas más' }),
-    selectedCount: (n) => plural('es', n, { one: '{n} seleccionado', other: '{n} seleccionados' }),
-    selectAll: 'Seleccionar todo',
-    clearSelection: 'Borrar selección',
-    emptyTitle: 'No hay nada aquí',
-    emptyDescription: 'El correo nuevo llega a esta carpeta.',
-    today: 'Hoy',
-    yesterday: 'Ayer',
-    list: 'Correo',
-  },
-  ca: {
-    draft: 'Esborrany:',
-    unread: 'No llegit',
-    starred: 'Destacat',
-    star: 'Destaca',
-    attachment: 'Té un fitxer adjunt',
-    select: 'Selecciona',
-    threadCount: (n) => plural('ca', n, { one: '{n} missatge', other: '{n} missatges' }),
-    moreLabels: (n) => plural('ca', n, { one: '{n} etiqueta més', other: '{n} etiquetes més' }),
-    selectedCount: (n) => plural('ca', n, { one: '{n} seleccionat', other: '{n} seleccionats' }),
-    selectAll: 'Selecciona-ho tot',
-    clearSelection: 'Esborra la selecció',
-    emptyTitle: 'Aquí no hi ha res',
-    emptyDescription: 'El correu nou arriba a aquesta carpeta.',
-    today: 'Avui',
-    yesterday: 'Ahir',
-    list: 'Correu',
-  },
-  de: {
-    draft: 'Entwurf:',
-    unread: 'Ungelesen',
-    starred: 'Markiert',
-    star: 'Markieren',
-    attachment: 'Mit Anhang',
-    select: 'Auswählen',
-    threadCount: (n) => plural('de', n, { one: '{n} Nachricht', other: '{n} Nachrichten' }),
-    moreLabels: (n) => plural('de', n, { one: '{n} weiteres Label', other: '{n} weitere Labels' }),
-    selectedCount: (n) => `${n} ausgewählt`,
-    selectAll: 'Alle auswählen',
-    clearSelection: 'Auswahl aufheben',
-    emptyTitle: 'Hier ist nichts',
-    emptyDescription: 'Neue E-Mails landen in diesem Ordner.',
-    today: 'Heute',
-    yesterday: 'Gestern',
-    list: 'E-Mail',
-  },
-  fr: {
-    draft: 'Brouillon :',
-    unread: 'Non lu',
-    starred: 'Suivi',
-    star: 'Suivre',
-    attachment: 'Contient une pièce jointe',
-    select: 'Sélectionner',
-    threadCount: (n) => plural('fr', n, { one: '{n} message', other: '{n} messages' }),
-    moreLabels: (n) => plural('fr', n, { one: '{n} autre libellé', other: '{n} autres libellés' }),
-    selectedCount: (n) => plural('fr', n, { one: '{n} sélectionné', other: '{n} sélectionnés' }),
-    selectAll: 'Tout sélectionner',
-    clearSelection: 'Effacer la sélection',
-    emptyTitle: 'Rien ici',
-    emptyDescription: 'Les nouveaux e-mails arrivent dans ce dossier.',
-    today: "Aujourd'hui",
-    yesterday: 'Hier',
-    list: 'Messagerie',
-  },
-  it: {
-    draft: 'Bozza:',
-    unread: 'Non letto',
-    starred: 'Speciale',
-    star: 'Aggiungi a Speciali',
-    attachment: 'Con allegato',
-    select: 'Seleziona',
-    threadCount: (n) => plural('it', n, { one: '{n} messaggio', other: '{n} messaggi' }),
-    moreLabels: (n) => plural('it', n, { one: 'altra {n} etichetta', other: 'altre {n} etichette' }),
-    selectedCount: (n) => plural('it', n, { one: '{n} selezionato', other: '{n} selezionati' }),
-    selectAll: 'Seleziona tutto',
-    clearSelection: 'Cancella selezione',
-    emptyTitle: 'Nessun elemento',
-    emptyDescription: 'I nuovi messaggi arrivano in questa cartella.',
-    today: 'Oggi',
-    yesterday: 'Ieri',
-    list: 'Posta',
-  },
-  pt: {
-    draft: 'Rascunho:',
-    unread: 'Não lido',
-    starred: 'Com estrela',
-    star: 'Marcar com estrela',
-    attachment: 'Com anexo',
-    select: 'Selecionar',
-    threadCount: (n) => plural('pt', n, { one: '{n} mensagem', other: '{n} mensagens' }),
-    moreLabels: (n) => plural('pt', n, { one: 'mais {n} marcador', other: 'mais {n} marcadores' }),
-    selectedCount: (n) => plural('pt', n, { one: '{n} selecionado', other: '{n} selecionados' }),
-    selectAll: 'Selecionar tudo',
-    clearSelection: 'Limpar seleção',
-    emptyTitle: 'Nada aqui',
-    emptyDescription: 'Os novos e-mails chegam a esta pasta.',
-    today: 'Hoje',
-    yesterday: 'Ontem',
-    list: 'E-mail',
-  },
-  ru: {
-    draft: 'Черновик:',
-    unread: 'Не прочитано',
-    starred: 'Помечено',
-    star: 'Пометить',
-    attachment: 'Есть вложение',
-    select: 'Выбрать',
-    threadCount: (n) =>
-      plural('ru', n, { one: '{n} сообщение', few: '{n} сообщения', many: '{n} сообщений', other: '{n} сообщения' }),
-    moreLabels: (n) =>
-      plural('ru', n, { one: 'ещё {n} ярлык', few: 'ещё {n} ярлыка', many: 'ещё {n} ярлыков', other: 'ещё {n} ярлыка' }),
-    selectedCount: (n) => `Выбрано: ${n}`,
-    selectAll: 'Выбрать все',
-    clearSelection: 'Снять выделение',
-    emptyTitle: 'Здесь пусто',
-    emptyDescription: 'Новые письма появятся в этой папке.',
-    today: 'Сегодня',
-    yesterday: 'Вчера',
-    list: 'Почта',
-  },
-  tr: {
-    draft: 'Taslak:',
-    unread: 'Okunmadı',
-    starred: 'Yıldızlı',
-    star: 'Yıldız ekle',
-    attachment: 'Ek içeriyor',
-    select: 'Seç',
-    threadCount: (n) => plural('tr', n, { other: '{n} ileti' }),
-    moreLabels: (n) => plural('tr', n, { other: '{n} etiket daha' }),
-    selectedCount: (n) => `${n} seçildi`,
-    selectAll: 'Tümünü seç',
-    clearSelection: 'Seçimi temizle',
-    emptyTitle: 'Burada bir şey yok',
-    emptyDescription: 'Yeni postalar bu klasöre gelir.',
-    today: 'Bugün',
-    yesterday: 'Dün',
-    list: 'Posta',
-  },
-  ja: {
-    draft: '下書き:',
-    unread: '未読',
-    starred: 'スター付き',
-    star: 'スターを付ける',
-    attachment: '添付ファイルあり',
-    select: '選択',
-    threadCount: (n) => plural('ja', n, { other: '{n}件のメッセージ' }),
-    moreLabels: (n) => plural('ja', n, { other: '他{n}個のラベル' }),
-    selectedCount: (n) => `${n}件選択済み`,
-    selectAll: 'すべて選択',
-    clearSelection: '選択を解除',
-    emptyTitle: '何もありません',
-    emptyDescription: '新しいメールはこのフォルダに届きます。',
-    today: '今日',
-    yesterday: '昨日',
-    list: 'メール',
-  },
-  zh: {
-    draft: '草稿：',
-    unread: '未读',
-    starred: '已加星标',
-    star: '加星标',
-    attachment: '有附件',
-    select: '选择',
-    threadCount: (n) => plural('zh', n, { other: '{n} 封邮件' }),
-    moreLabels: (n) => plural('zh', n, { other: '另外 {n} 个标签' }),
-    selectedCount: (n) => `已选择 ${n} 项`,
-    selectAll: '全选',
-    clearSelection: '清除选择',
-    emptyTitle: '这里什么都没有',
-    emptyDescription: '新邮件会出现在此文件夹中。',
-    today: '今天',
-    yesterday: '昨天',
-    list: '邮件',
-  },
-  ar: {
-    draft: 'مسودة:',
-    unread: 'غير مقروءة',
-    starred: 'مميّزة بنجمة',
-    star: 'تمييز بنجمة',
-    attachment: 'تحتوي على مرفق',
-    select: 'تحديد',
-    threadCount: (n) =>
-      plural('ar', n, {
-        zero: 'لا رسائل',
-        one: 'رسالة واحدة',
-        two: 'رسالتان',
-        few: '{n} رسائل',
-        many: '{n} رسالة',
-        other: '{n} رسالة',
-      }),
-    moreLabels: (n) =>
-      plural('ar', n, {
-        zero: 'لا تصنيفات أخرى',
-        one: 'تصنيف آخر',
-        two: 'تصنيفان آخران',
-        few: '{n} تصنيفات أخرى',
-        many: '{n} تصنيفًا آخر',
-        other: '{n} تصنيف آخر',
-      }),
-    selectedCount: (n) => `تم تحديد ${n}`,
-    selectAll: 'تحديد الكل',
-    clearSelection: 'مسح التحديد',
-    emptyTitle: 'لا يوجد شيء هنا',
-    emptyDescription: 'يصل البريد الجديد إلى هذا المجلد.',
-    today: 'اليوم',
-    yesterday: 'أمس',
-    list: 'البريد',
-  },
-  hi: {
-    draft: 'ड्राफ़्ट:',
-    unread: 'अपठित',
-    starred: 'तारांकित',
-    star: 'तारांकित करें',
-    attachment: 'अटैचमेंट है',
-    select: 'चुनें',
-    threadCount: (n) => plural('hi', n, { other: '{n} संदेश' }),
-    moreLabels: (n) => plural('hi', n, { other: 'और {n} लेबल' }),
-    selectedCount: (n) => `${n} चुने गए`,
-    selectAll: 'सभी चुनें',
-    clearSelection: 'चयन हटाएं',
-    emptyTitle: 'यहाँ कुछ नहीं है',
-    emptyDescription: 'नए ईमेल इस फ़ोल्डर में आते हैं।',
-    today: 'आज',
-    yesterday: 'कल',
-    list: 'मेल',
-  },
-  bn: {
-    draft: 'খসড়া:',
-    unread: 'অপঠিত',
-    starred: 'তারকাচিহ্নিত',
-    star: 'তারকাচিহ্নিত করুন',
-    attachment: 'সংযুক্তি আছে',
-    select: 'নির্বাচন করুন',
-    threadCount: (n) => plural('bn', n, { other: '{n}টি বার্তা' }),
-    moreLabels: (n) => plural('bn', n, { other: 'আরও {n}টি লেবেল' }),
-    selectedCount: (n) => `${n}টি নির্বাচিত`,
-    selectAll: 'সব নির্বাচন করুন',
-    clearSelection: 'নির্বাচন মুছুন',
-    emptyTitle: 'এখানে কিছু নেই',
-    emptyDescription: 'নতুন মেইল এই ফোল্ডারে আসে।',
-    today: 'আজ',
-    yesterday: 'গতকাল',
-    list: 'মেইল',
-  },
-  id: {
-    draft: 'Draf:',
-    unread: 'Belum dibaca',
-    starred: 'Berbintang',
-    star: 'Beri bintang',
-    attachment: 'Ada lampiran',
-    select: 'Pilih',
-    threadCount: (n) => plural('id', n, { other: '{n} pesan' }),
-    moreLabels: (n) => plural('id', n, { other: '{n} label lainnya' }),
-    selectedCount: (n) => `${n} dipilih`,
-    selectAll: 'Pilih semua',
-    clearSelection: 'Hapus pilihan',
-    emptyTitle: 'Tidak ada apa-apa',
-    emptyDescription: 'Email baru masuk ke folder ini.',
-    today: 'Hari ini',
-    yesterday: 'Kemarin',
-    list: 'Email',
-  },
-};
+export const MAIL_LIST_MESSAGES: MessageCatalog<MailListMessages> = defineMessages<MailListMessages>('MAIL_LIST_MESSAGES', {
+  draft: 'Draft:',
+  unread: 'Unread',
+  starred: 'Starred',
+  star: 'Star',
+  attachment: 'Has attachment',
+  select: 'Select',
+  threadCount: (n) => plural('en', n, { one: '{n} message', other: '{n} messages' }),
+  moreLabels: (n) => plural('en', n, { one: '{n} more label', other: '{n} more labels' }),
+  selectedCount: (n) => `${n} selected`,
+  selectAll: 'Select all',
+  clearSelection: 'Clear selection',
+  emptyTitle: 'Nothing here',
+  emptyDescription: 'New mail lands in this folder.',
+  today: 'Today',
+  yesterday: 'Yesterday',
+  list: 'Mail',
+});

package/src/mail-list/shared.ts

@@ -1,5 +1,7 @@
 import { Platform } from 'react-native';
 
+import { space } from '../styles/tokens';
+
 import { RiInbox2Line } from '../icons/remix/RiInbox2Line';
 import { formatGregorian } from '../locale/format-date';
 import { pickMessages } from '../locale/messages';
@@ -31,7 +33,7 @@ export const IS_WEB = Platform.OS === 'web';
 export const MAIL_EMPTY_ICON = RiInbox2Line;
 
 // ---------------------------------------------------------------------------
-//  Geometry — the whole difference between the two densities
+//  Geometry — the whole difference between the densities
 // ---------------------------------------------------------------------------
 
 export interface MailRowGeometry {
@@ -85,15 +87,8 @@ export interface MailRowGeometry {
 }
 
 /**
- * 64 tall with two lines on a phone, 40 tall with one on a desktop. The avatar
- * is centred in both, so a row with no snippet is the same height as one with a
- * snippet and a label.
- *
- * The phone rung is the same 72/48 as a `chat-list` row on purpose: a mail row
- * and a conversation row are the same kind of object, and an inbox that stands
- * 16px taller per row than the messages screen reads as a different library.
- * Two lines is what pays for it — the sender and the time share the first, the
- * subject and the snippet the second.
+ * Two stacked lines at comfortable/cozy, one baseline at compact. Stacked rows
+ * grow with their content; cozy gives the same facts more breathing room.
  */
 export const MAIL_ROW_GEOMETRY: Record<MailDensity, MailRowGeometry> = {
   comfortable: {
@@ -121,6 +116,27 @@ export const MAIL_ROW_GEOMETRY: Record<MailDensity, MailRowGeometry> = {
     actionGlyph: 18,
     starControl: 24,
   },
+  cozy: {
+    minHeight: 80,
+    paddingVertical: space.lg,
+    paddingHorizontal: space.lg,
+    avatar: 48,
+    gap: space.md,
+    lineGap: space._2xs,
+    glyph: space.lg,
+    senderWidth: 0,
+    senderMinWidth: 0,
+    senderMaxWidth: '100%',
+    senderVariant: 'headline-regular',
+    senderUnreadVariant: 'headline-semibold',
+    subjectVariant: 'body-regular',
+    subjectUnreadVariant: 'body-semibold',
+    snippetVariant: 'body-regular',
+    timeVariant: 'caption-1-regular',
+    action: 44,
+    actionGlyph: 18,
+    starControl: space._2xl,
+  },
   compact: {
     minHeight: 40,
     height: 40,
@@ -164,6 +180,7 @@ export const MAIL_LABEL_DOT = 8;
 /** The selection bar's height, per density. */
 export const MAIL_SELECTION_BAR_HEIGHT: Record<MailDensity, number> = {
   comfortable: 56,
+  cozy: 56,
   compact: 44,
 };
 

package/src/mail-list/types.ts

@@ -5,13 +5,11 @@ 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.
+ * One row at three densities: compact is a single 40px baseline, comfortable
+ * stacks two lines at a 64px floor, cozy keeps those lines with an 80px floor
+ * and a larger avatar and insets. All share the same content and actions.
  */
-export type MailDensity = 'comfortable' | 'compact';
+export type MailDensity = 'comfortable' | 'cozy' | 'compact';
 
 /** Who a message is from, as a row draws them. */
 export interface MailSender {
@@ -154,6 +152,8 @@ export interface MailRowProps {
    */
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
+  /** Show sender avatars. Selection checkboxes remain visible when enabled. */
+  showAvatar?: boolean;
   density?: MailDensity;
   onPress?: () => void;
   onLongPress?: () => void;
@@ -203,6 +203,8 @@ export interface MailListProps {
   sections?: readonly MailListSection[];
   /** One unlabelled run, for a list that is not bucketed. */
   mails?: readonly MailSummary[];
+  /** Show sender avatars. Selection checkboxes remain visible when enabled. */
+  showAvatar?: boolean;
   density?: MailDensity;
   /** The row the reading pane is showing. */
   selectedId?: string;