@oxy.so/bloom 2.10.0 → 2.11.0

package/src/chat-list/ChatListItemSkeleton.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import * as Skeleton from '../skeleton';
+import { CHAT_ROW_GEOMETRY } from './shared';
+import type { ChatListItemSkeletonProps } from './types';
+
+/**
+ * Placeholder rows with `ChatListItem`'s exact geometry, so the list does not
+ * jump when the conversations arrive. The name and preview widths vary a little
+ * per row — a block of identical bars reads as a table, not as a list of names.
+ *
+ * Hidden from assistive technology: announce loading once on the surrounding
+ * region (`ChatList` does), not eight times.
+ */
+export function ChatListItemSkeleton({
+  count = 1,
+  density = 'comfortable',
+  style,
+  testID,
+}: ChatListItemSkeletonProps) {
+  const geo = CHAT_ROW_GEOMETRY[density];
+  return (
+    <View
+      aria-hidden
+      importantForAccessibility="no-hide-descendants"
+      style={style}
+      testID={testID}
+    >
+      {Array.from({ length: count }, (_, index) => {
+        const nameWidth = 38 + ((index * 37) % 26);
+        const previewWidth = 46 + ((index * 23) % 34);
+        return (
+          <View
+            key={index}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              height: geo.height,
+              paddingLeft: geo.paddingHorizontal,
+              paddingRight: geo.paddingHorizontal,
+            }}
+            testID={testID ? `${testID}-row-${index}` : undefined}
+          >
+            <Skeleton.Circle size={geo.avatar} />
+            <View style={{ flex: 1, minWidth: 0, marginLeft: geo.gap, gap: geo.lineGap + 3 }}>
+              <Skeleton.Box width={`${nameWidth}%`} height={12} borderRadius={4} />
+              <Skeleton.Box width={`${previewWidth}%`} height={10} borderRadius={4} />
+            </View>
+            <View style={{ alignItems: 'flex-end', gap: geo.lineGap + 3, marginLeft: geo.gap }}>
+              <Skeleton.Box width={32} height={10} borderRadius={4} />
+              <Skeleton.Box width={18} height={18} borderRadius={9} />
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/chat-list/ChatSearchField.tsx

@@ -0,0 +1,167 @@
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, TextInput, View, type TextStyle } from 'react-native';
+
+import { webDataSet } from '../styles/web-data';
+import { RiCloseLine } from '../icons/remix/RiCloseLine';
+import { RiSearchLine } from '../icons/remix/RiSearchLine';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { borderRadius } from '../styles/tokens';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { SANS_FONT_FAMILY } from '../text-field/shared';
+import { useTheme } from '../theme/use-theme';
+import { TYPE_SCALE } from '../typography/scale';
+import { ChatGlyphButton } from './parts';
+import {
+  CHAT_LIST_CSS,
+  CHAT_LIST_STYLE_ID,
+  IS_WEB,
+  resolveChatListPaint,
+} from './shared';
+import type { ChatSearchFieldProps } from './types';
+
+/**
+ * The search pill above the conversations.
+ *
+ *   40 tall, full pill · 10 · search glyph 20 · 8 · input body-medium ·
+ *   clear (×, 28 round) once there is text · any `trailing` slot
+ *
+ *   rest   the background 6% toward the text colour (dark 9%), transparent border
+ *   hover  10% (dark 14%)
+ *   focus  the border takes the text colour — no size change, so nothing reflows
+ *
+ * Pressing anywhere on the pill focuses the input; the pill itself is not a
+ * control, the input is.
+ *
+ * WHY NOT `Search` OR the music library's field. `Search` is a `TextField` with a
+ * floating LABEL — taller, and a label above a one-word search box is chrome a
+ * chat header has no room for. The music field is the right geometry but it is
+ * 48 tall with a Browse toggle and a divider baked in, and reusing it would make
+ * a messaging screen import the music library's whole module graph for a pill.
+ * The shape is small; the coupling would not be.
+ */
+
+export const CHAT_SEARCH_FIELD_HEIGHT = 40;
+const INPUT_TYPE = TYPE_SCALE['body-medium'];
+
+const inputStyle: TextStyle = {
+  flex: 1,
+  minWidth: 0,
+  fontFamily: SANS_FONT_FAMILY,
+  fontSize: INPUT_TYPE.fontSize,
+  lineHeight: INPUT_TYPE.lineHeight,
+  fontWeight: INPUT_TYPE.fontWeight,
+  height: CHAT_SEARCH_FIELD_HEIGHT - 2,
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  borderWidth: 0,
+  backgroundColor: 'transparent',
+};
+
+function ChatSearchFieldComponent({
+  value,
+  onChangeText,
+  onClear,
+  onSubmit,
+  onFocus,
+  onBlur,
+  placeholder = 'Search',
+  accessibilityLabel = 'Search chats',
+  clearLabel = 'Clear search',
+  trailing,
+  autoFocus,
+  style,
+  testID,
+}: ChatSearchFieldProps) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(CHAT_LIST_STYLE_ID, CHAT_LIST_CSS);
+  }, []);
+  const paint = useMemo(() => resolveChatListPaint(theme), [theme]);
+  const inputRef = useRef<TextInput>(null);
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const hasText = value.length > 0;
+
+  const pillStyle: WebCssStyle = {
+    height: CHAT_SEARCH_FIELD_HEIGHT,
+    borderRadius: borderRadius.full,
+    borderWidth: 1,
+    borderColor: focused ? paint.text : 'transparent',
+    backgroundColor: hovered && !focused ? paint.selected : paint.hover,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 10,
+    paddingRight: 6,
+    gap: 8,
+    ...(IS_WEB
+      ? { transitionProperty: 'background-color, border-color', transitionDuration: '120ms' }
+      : null),
+  };
+
+  return (
+    <Pressable
+      // A press on the pill's padding lands in the input. Not a control of its
+      // own: the input is the focusable element.
+      accessible={false}
+      {...webDataSet({ bloomChatSearchPill: '' })}
+      {...(IS_WEB ? { tabIndex: -1 } : null)}
+      onPress={() => inputRef.current?.focus()}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      style={[pillStyle, style]}
+      testID={testID}
+    >
+      <RiSearchLine width={20} height={20} fill={focused ? paint.text : paint.textMuted} />
+      <TextInput
+        ref={inputRef}
+        {...webDataSet({ bloomChatInput: '' })}
+        value={value}
+        onChangeText={onChangeText}
+        onSubmitEditing={onSubmit ? () => onSubmit(value) : undefined}
+        onFocus={() => {
+          setFocused(true);
+          onFocus?.();
+        }}
+        onBlur={() => {
+          setFocused(false);
+          onBlur?.();
+        }}
+        placeholder={placeholder}
+        placeholderTextColor={paint.textMuted}
+        accessibilityLabel={accessibilityLabel}
+        role="searchbox"
+        returnKeyType="search"
+        enterKeyHint="search"
+        autoCapitalize="none"
+        autoCorrect={false}
+        autoComplete="off"
+        autoFocus={autoFocus}
+        keyboardAppearance={theme.isDark ? 'dark' : 'light'}
+        style={[inputStyle, { color: paint.text }]}
+        testID={testID ? `${testID}-input` : undefined}
+      />
+      {hasText ? (
+        <ChatGlyphButton
+          label={clearLabel}
+          icon={RiCloseLine}
+          size={28}
+          glyph={18}
+          color={paint.textMuted}
+          hoverFill={paint.selected}
+          ring={paint.ring}
+          onPress={() => {
+            onClear?.();
+            inputRef.current?.focus();
+          }}
+          testID={testID ? `${testID}-clear` : undefined}
+        />
+      ) : null}
+      {trailing !== undefined ? <View>{trailing}</View> : null}
+    </Pressable>
+  );
+}
+
+export const ChatSearchField = memo(ChatSearchFieldComponent);
+ChatSearchField.displayName = 'ChatSearchField';

package/src/chat-list/ChatSearchResults.tsx

@@ -0,0 +1,234 @@
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+
+import { webDataSet } from '../styles/web-data';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { ChatListItemSkeleton } from './ChatListItemSkeleton';
+import { HighlightedText } from './HighlightedText';
+import { ChatAvatar, RowLink, SectionHeading } from './parts';
+import {
+  CHAT_LIST_CSS,
+  CHAT_LIST_STYLE_ID,
+  CHAT_ROW_GEOMETRY,
+  CHAT_ROW_RADIUS,
+  DEFAULT_ITEM_LABELS,
+  DEFAULT_SEARCH_LABELS,
+  IS_WEB,
+  chatMarker,
+  groupSearchResults,
+  resolveChatListPaint,
+} from './shared';
+import type { ChatSearchResult, ChatSearchResultsProps } from './types';
+
+/**
+ * Search hits, grouped Chats / Messages / Contacts.
+ *
+ * The groups are in a fixed order and an EMPTY group is dropped — a heading over
+ * nothing is a dead end. Inside a group the app's own order is kept, so
+ * relevance stays the backend's decision.
+ *
+ * Each row is `ChatListItem`'s compact geometry with the matched run of the name
+ * and of the detail line marked in the accent colour (`HighlightedText`). The
+ * highlight is COLOUR only; see that component for why.
+ *
+ * ACCESSIBILITY: a region named `accessibilityLabel`, each group a `role="list"`
+ * named by its heading, each row one link/button carrying "name, detail, time".
+ */
+
+function ResultRow({
+  result,
+  query,
+  density,
+  onPress,
+  testID,
+}: {
+  result: ChatSearchResult;
+  query: string;
+  density: 'comfortable' | 'compact';
+  onPress?: (id: string) => void;
+  testID?: string;
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveChatListPaint(theme), [theme]);
+  const [pressed, setPressed] = useState(false);
+  const geo = CHAT_ROW_GEOMETRY[density];
+  const marker = chatMarker(result.chatKind, result.verified, DEFAULT_ITEM_LABELS);
+  const name = [result.name, marker?.label, result.detail, result.time]
+    .filter((part): part is string => typeof part === 'string' && part.length > 0)
+    .join(', ');
+
+  const rowStyle: WebCssStyle = {
+    position: 'relative',
+    height: geo.height,
+    borderRadius: CHAT_ROW_RADIUS,
+    justifyContent: 'center',
+    '--bloom-chat-hover': paint.hover,
+    '--bloom-chat-selected': paint.selected,
+    ...(IS_WEB
+      ? { transitionProperty: 'background-color', transitionDuration: '120ms' }
+      : { backgroundColor: pressed ? paint.hover : 'transparent' }),
+  };
+
+  return (
+    <View {...webDataSet({ bloomChatRow: '', selected: 'false' })} style={rowStyle} testID={testID}>
+      <RowLink
+        name={name}
+        onPress={onPress ? () => onPress(result.id) : undefined}
+        href={result.href}
+        paint={paint}
+        onPressedChange={setPressed}
+        testID={testID ? `${testID}-link` : undefined}
+      />
+      <View
+        pointerEvents="none"
+        aria-hidden
+        importantForAccessibility="no-hide-descendants"
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          height: geo.height,
+          paddingLeft: geo.paddingHorizontal,
+          paddingRight: geo.paddingHorizontal,
+        }}
+      >
+        <ChatAvatar
+          name={result.name}
+          avatar={result.avatar}
+          faces={result.faces}
+          status={result.status}
+          size={geo.avatar}
+          paint={paint}
+        />
+        <View style={{ flex: 1, minWidth: 0, marginLeft: geo.gap, gap: geo.lineGap }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, minWidth: 0 }}>
+            <HighlightedText
+              text={result.name}
+              query={query}
+              variant={geo.nameVariant}
+              numberOfLines={1}
+              style={{ flexShrink: 1, minWidth: 0 }}
+              testID={testID ? `${testID}-name` : undefined}
+            />
+            {marker ? (
+              <marker.icon
+                width={geo.glyph}
+                height={geo.glyph}
+                fill={marker.accent ? paint.accent : paint.textMuted}
+              />
+            ) : null}
+          </View>
+          {result.detail !== undefined ? (
+            <HighlightedText
+              text={result.detail}
+              query={query}
+              variant={geo.previewVariant}
+              color={paint.textMuted}
+              numberOfLines={1}
+              testID={testID ? `${testID}-detail` : undefined}
+            />
+          ) : null}
+        </View>
+        {result.time !== undefined ? (
+          <Text
+            variant={geo.timeVariant}
+            numberOfLines={1}
+            style={{ color: paint.textMuted, marginLeft: geo.gap }}
+          >
+            {result.time}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function ChatSearchResultsComponent({
+  query,
+  results,
+  labels,
+  onResultPress,
+  loading = false,
+  loadingCount = 6,
+  density = 'comfortable',
+  accessibilityLabel = 'Search results',
+  style,
+  testID,
+}: ChatSearchResultsProps) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(CHAT_LIST_STYLE_ID, CHAT_LIST_CSS);
+  }, []);
+  const paint = useMemo(() => resolveChatListPaint(theme), [theme]);
+  const text = useMemo(() => ({ ...DEFAULT_SEARCH_LABELS, ...labels }), [labels]);
+  const groups = useMemo(() => groupSearchResults(results), [results]);
+  const geo = CHAT_ROW_GEOMETRY[density];
+
+  if (loading) {
+    return (
+      <View
+        role="region"
+        accessibilityLabel={accessibilityLabel}
+        aria-busy
+        accessibilityState={{ busy: true }}
+        style={style}
+        testID={testID}
+      >
+        <ChatListItemSkeleton
+          count={loadingCount}
+          density={density}
+          testID={testID ? `${testID}-skeleton` : undefined}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View role="region" accessibilityLabel={accessibilityLabel} style={style} testID={testID}>
+      {groups.length === 0 ? (
+        <View
+          style={{
+            paddingLeft: geo.paddingHorizontal,
+            paddingRight: geo.paddingHorizontal,
+            paddingTop: 24,
+            paddingBottom: 24,
+            alignItems: 'center',
+          }}
+          testID={testID ? `${testID}-empty` : undefined}
+        >
+          <Text variant="body-regular" style={{ color: paint.textMuted }}>
+            {text.empty}
+          </Text>
+        </View>
+      ) : (
+        groups.map((group) => (
+          <View key={group.kind}>
+            <SectionHeading
+              title={text[group.kind]}
+              paint={paint}
+              paddingHorizontal={geo.paddingHorizontal}
+              testID={testID ? `${testID}-heading-${group.kind}` : undefined}
+            />
+            <View role="list" accessibilityLabel={text[group.kind]}>
+              {group.results.map((result) => (
+                <ResultRow
+                  key={result.id}
+                  result={result}
+                  query={query}
+                  density={density}
+                  onPress={onResultPress}
+                  testID={testID ? `${testID}-result-${result.id}` : undefined}
+                />
+              ))}
+            </View>
+          </View>
+        ))
+      )}
+    </View>
+  );
+}
+
+export const ChatSearchResults = memo(ChatSearchResultsComponent);
+ChatSearchResults.displayName = 'ChatSearchResults';

package/src/chat-list/ChatSwipeRow.tsx

@@ -0,0 +1,217 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { Text } from '../typography';
+import { actionPanePaint } from './parts';
+import {
+  CHAT_ROW_RADIUS,
+  SWIPE_ACTION_WIDTH,
+  SWIPE_COMMIT_FRACTION,
+  SWIPE_TAP_SLOP,
+  type ChatListPaint,
+} from './shared';
+import type { ChatAction, ChatSwipeActions } from './types';
+
+export interface ChatSwipeRowProps {
+  actions: ChatSwipeActions;
+  onAction?: (key: string) => void;
+  /** The row's height, so the panes match it exactly. */
+  height: number;
+  paint: ChatListPaint;
+  /** Names the tap target that closes an open pane. Default `'Close actions'`. */
+  closeLabel?: string;
+  children: React.ReactNode;
+  testID?: string;
+}
+
+/**
+ * The drag affordance behind a chat row, on touch.
+ *
+ * Dragging RIGHT uncovers `actions.left` from the left edge, dragging LEFT
+ * uncovers `actions.right`. The row travels with the finger up to the pane's
+ * full width (`SWIPE_ACTION_WIDTH` per action) and snaps open past
+ * `SWIPE_COMMIT_FRACTION` of it, closed below — so a half-hearted drag never
+ * leaves a row stuck ajar. Anything under `SWIPE_TAP_SLOP` is a tap and the
+ * gesture springs straight back.
+ *
+ * The gesture activates only past a horizontal threshold and FAILS on vertical
+ * travel, so a list scroll never turns into a swipe. Panes are laid under the
+ * row and grow with it rather than sliding in from outside: the row is what
+ * moves, and the action underneath is revealed, not pushed.
+ *
+ * WEB gets none of this. `ChatListItem` renders the same actions as hover
+ * buttons there, because a drag is undiscoverable with a mouse and a
+ * `pointerdown`-driven pan fights text selection.
+ *
+ * Reduced motion keeps the panes and drops the SNAP animation — the row jumps
+ * to its resting position instead of easing to it.
+ */
+export function ChatSwipeRow({
+  actions,
+  onAction,
+  height,
+  paint,
+  closeLabel = 'Close actions',
+  children,
+  testID,
+}: ChatSwipeRowProps) {
+  const translateX = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+  const [open, setOpen] = useState<'left' | 'right' | null>(null);
+
+  const left = actions.left ?? [];
+  const right = actions.right ?? [];
+  const leftWidth = left.length * SWIPE_ACTION_WIDTH;
+  const rightWidth = right.length * SWIPE_ACTION_WIDTH;
+
+  const settle = useCallback((next: 'left' | 'right' | null) => {
+    setOpen(next);
+  }, []);
+
+  const close = useCallback(() => {
+    translateX.value = reducedMotion ? 0 : withTiming(0, { duration: 160 });
+    setOpen(null);
+  }, [reducedMotion, translateX]);
+
+  const pan = useMemo(
+    () =>
+      Gesture.Pan()
+        .activeOffsetX([-12, 12])
+        .failOffsetY([-12, 12])
+        .onChange((event) => {
+          'worklet';
+          const next = translateX.value + event.changeX;
+          translateX.value = Math.max(-rightWidth, Math.min(leftWidth, next));
+        })
+        .onFinalize(() => {
+          'worklet';
+          const travelled = Math.abs(translateX.value);
+          if (travelled < SWIPE_TAP_SLOP) {
+            translateX.value = 0;
+            runOnJS(settle)(null);
+            return;
+          }
+          const opening = translateX.value > 0 ? 'left' : 'right';
+          const full = opening === 'left' ? leftWidth : rightWidth;
+          const commit = travelled >= full * SWIPE_COMMIT_FRACTION && full > 0;
+          const target = commit ? (opening === 'left' ? leftWidth : -rightWidth) : 0;
+          translateX.value = reducedMotion ? target : withTiming(target, { duration: 160 });
+          runOnJS(settle)(commit ? opening : null);
+        }),
+    [leftWidth, reducedMotion, rightWidth, settle, translateX],
+  );
+
+  const rowStyle = useAnimatedStyle(
+    () => ({ transform: [{ translateX: translateX.value }] }),
+    [translateX],
+  );
+  const leftPaneStyle = useAnimatedStyle(
+    () => ({ width: Math.max(0, translateX.value) }),
+    [translateX],
+  );
+  const rightPaneStyle = useAnimatedStyle(
+    () => ({ width: Math.max(0, -translateX.value) }),
+    [translateX],
+  );
+
+  // The buttons keep their full width and are CLIPPED by the growing pane, so
+  // they are revealed in place rather than squashed as the row travels.
+  const pane = (list: readonly ChatAction[], side: 'left' | 'right') => (
+    <View
+      style={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        ...(side === 'left' ? { left: 0 } : { right: 0 }),
+        flexDirection: 'row',
+      }}
+    >
+      {list.map((action) => {
+        const tone = actionPanePaint(action, paint);
+        const Icon = action.icon;
+        return (
+          <Pressable
+            key={action.key}
+            role="button"
+            accessibilityLabel={action.label}
+            onPress={() => {
+              action.onPress?.();
+              onAction?.(action.key);
+              close();
+            }}
+            style={{
+              width: SWIPE_ACTION_WIDTH,
+              height,
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 4,
+              backgroundColor: tone.background,
+            }}
+            testID={testID ? `${testID}-action-${action.key}` : undefined}
+          >
+            <Icon width={22} height={22} fill={tone.foreground} />
+            <Text
+              variant="caption-2-medium"
+              numberOfLines={1}
+              style={{ color: tone.foreground }}
+            >
+              {action.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+
+  return (
+    <View
+      style={{ position: 'relative', height, borderRadius: CHAT_ROW_RADIUS, overflow: 'hidden' }}
+      testID={testID}
+    >
+      {leftWidth > 0 ? (
+        <Animated.View
+          style={[
+            { position: 'absolute', left: 0, top: 0, bottom: 0, overflow: 'hidden' },
+            leftPaneStyle,
+          ]}
+        >
+          {pane(left, 'left')}
+        </Animated.View>
+      ) : null}
+      {rightWidth > 0 ? (
+        <Animated.View
+          style={[
+            { position: 'absolute', right: 0, top: 0, bottom: 0, overflow: 'hidden' },
+            rightPaneStyle,
+          ]}
+        >
+          {pane(right, 'right')}
+        </Animated.View>
+      ) : null}
+      <GestureDetector gesture={pan}>
+        <Animated.View style={[{ height }, rowStyle]}>
+          {children}
+          {open !== null ? (
+            // While a pane is open the row itself closes it rather than opening
+            // the conversation — the same rule a tap outside an open menu follows.
+            <Pressable
+              role="button"
+              accessibilityLabel={closeLabel}
+              onPress={close}
+              style={StyleSheet.absoluteFill}
+              testID={testID ? `${testID}-dismiss` : undefined}
+            />
+          ) : null}
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+}