@oxy.so/bloom 4.34.0 → 4.34.2

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;

package/src/settings-modal/SettingsModal.tsx

@@ -25,6 +25,7 @@ import { PageHeader } from '../page-header';
 import { ButtonGroup, ButtonGroupItem } from '../button-group';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { Backdrop, OverlayRoot } from '../overlay';
+import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
@@ -135,6 +136,7 @@ export function SettingsModal({
   labels,
   testID,
 }: SettingsModalProps) {
+  const panelRef = useRef<View>(null);
   const common = useCommonMessages();
   useSettingsWebCss();
   const palette = useSettingsPalette();
@@ -248,21 +250,6 @@ export function SettingsModal({
     if (mayLeave('navigation')) setCompactPageOpen(false);
   }, [mayLeave]);
 
-  // Escape closes (web). On `window`, not `document`: a menu or popover opened
-  // inside the modal handles Escape on `document` and stops propagation there,
-  // so the innermost surface closes first and the modal stays open.
-  useEffect(() => {
-    if (!mounted || !IS_WEB || typeof window === 'undefined') return;
-    const handler = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.stopPropagation();
-        requestClose();
-      }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [mounted, requestClose]);
-
   const compactPageOpenRef = useRef(false);
   compactPageOpenRef.current = compactPageOpen && layoutRef.current === 'compact';
 
@@ -350,6 +337,14 @@ export function SettingsModal({
     <ModalPortal>
       <SettingsModalContext.Provider value={context}>
         <OverlayRoot onRequestClose={onHardwareBack} modal>
+          {IS_WEB ? (
+            <ModalKeyboard
+              panelRef={panelRef}
+              closing={!visible && wasVisible.current}
+              dismissible
+              dismiss={requestClose}
+            />
+          ) : null}
           <Backdrop
             onPress={requestClose}
             progress={progress}
@@ -372,6 +367,8 @@ export function SettingsModal({
                 ]}
               >
                 <View
+                  ref={panelRef}
+                  tabIndex={IS_WEB ? -1 : undefined}
                   role="dialog"
                   aria-modal
                   aria-label={labels?.dialog ?? 'Settings'}