@oxy.so/bloom 2.10.0 → 2.11.0

package/src/chat-screen/ChatBackground.tsx

@@ -0,0 +1,180 @@
+import React, { memo, useId } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import Svg, { Defs, LinearGradient, Path, Pattern, Rect, Stop } from 'react-native-svg';
+
+import {
+  CHAT_PATTERN_GLYPHS,
+  CHAT_PATTERN_TILE,
+  DEFAULT_PATTERN_OPACITY,
+  useChatScreenPaint,
+  useResolvedImageSource,
+  type ChatScreenPaint,
+} from './shared';
+import type { ChatBackgroundProps } from './types';
+
+/**
+ * The repeated-glyph wallpaper, as ONE `<Pattern>` tile the renderer repeats.
+ *
+ * The glyphs are stroked, not filled, and written directly in tile coordinates —
+ * `react-native-svg`'s per-element transform props are deprecated and the string
+ * form has to agree across two renderers, so nothing here is placed by a
+ * transform.
+ *
+ * The ink is a neutral ramp step, never the accent: an accent-tinted wallpaper
+ * competes with the outgoing bubble, which IS the accent.
+ */
+function PatternLayer({
+  paint,
+  tint,
+  opacity,
+}: {
+  paint: ChatScreenPaint;
+  tint?: string;
+  opacity: number;
+}) {
+  // One id per instance. Two wallpapers on one page (a split layout showing two
+  // conversations) would otherwise both resolve `url(#chat-pattern)` to whichever
+  // `<Defs>` the document happened to parse last.
+  const id = `chat-pattern-${useId().replace(/[^A-Za-z0-9-]/g, '')}`;
+  const ink = tint ?? paint.patternTint;
+  return (
+    // The `testID` sits on a View, not on the `<Svg>`: an SVG host element is not
+    // a react-native-web View, so `testID` reaches it as a lowercase DOM
+    // attribute and never becomes `data-testid`.
+    <View
+      pointerEvents="none"
+      testID="chat-background-pattern"
+      style={StyleSheet.absoluteFillObject}
+    >
+      <Svg style={StyleSheet.absoluteFillObject} width="100%" height="100%">
+        <Defs>
+          <Pattern
+            id={id}
+            x={0}
+            y={0}
+            width={CHAT_PATTERN_TILE}
+            height={CHAT_PATTERN_TILE}
+            patternUnits="userSpaceOnUse"
+          >
+            {CHAT_PATTERN_GLYPHS.map((d, i) => (
+              <Path
+                key={i}
+                d={d}
+                fill="none"
+                stroke={ink}
+                strokeOpacity={opacity}
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            ))}
+          </Pattern>
+        </Defs>
+        <Rect x={0} y={0} width="100%" height="100%" fill={`url(#${id})`} />
+      </Svg>
+    </View>
+  );
+}
+
+function GradientLayer({ colors }: { colors: string[] }) {
+  const id = `chat-gradient-${useId().replace(/[^A-Za-z0-9-]/g, '')}`;
+  const last = colors.length - 1;
+  return (
+    <View
+      pointerEvents="none"
+      testID="chat-background-gradient"
+      style={StyleSheet.absoluteFillObject}
+    >
+      <Svg style={StyleSheet.absoluteFillObject} width="100%" height="100%">
+        <Defs>
+          <LinearGradient id={id} x1="0" y1="0" x2="0.35" y2="1">
+            {colors.map((color, i) => (
+              // Opaque stops only: react-native-svg DISCARDS the alpha inside
+              // `stopColor`, so an `rgba()` token here renders correctly on web
+              // and opaque on native — the wallpaper would differ per platform
+              // with nothing to say so.
+              <Stop key={i} offset={last === 0 ? 0 : i / last} stopColor={color} />
+            ))}
+          </LinearGradient>
+        </Defs>
+        <Rect x={0} y={0} width="100%" height="100%" fill={`url(#${id})`} />
+      </Svg>
+    </View>
+  );
+}
+
+/**
+ * The wallpaper behind the transcript, and the container the transcript sits in.
+ *
+ * Four variants, all of them OPAQUE from the page colour up, so a bubble drawn
+ * over any of them is composited over a known colour rather than over whatever
+ * the app's own background happens to be.
+ *
+ * WHY THE IMAGE DIM IS NOT OPTIONAL: a consumer photo has no knowable extremes,
+ * so nothing can be proven about a bubble's separation from it. Dimming toward a
+ * fixed neutral (a mid-light step in light, near-black in dark) at a fixed
+ * opacity gives the wallpaper a measurable lightest and darkest pixel — see
+ * `chatBackgroundExtremes` and the measured table in `docs/chat-screen.mdx`.
+ * Dimming toward pure WHITE was the first attempt and it is the bug: the
+ * wallpaper's brightest reachable pixel then lands exactly on the card colour, so
+ * a white incoming bubble over a bright photo separates by 1.00. Lowering
+ * `overlayOpacity` is a legibility decision, not a taste one.
+ *
+ * Bubble text is unaffected by any of this: a bubble is an opaque fill, so its
+ * own label contrast is a property of the bubble, not of what is behind it. What
+ * the wallpaper CAN do is stop the bubble being told apart from the page.
+ */
+function ChatBackgroundComponent({
+  variant = 'plain',
+  source,
+  overlayOpacity,
+  tint,
+  patternOpacity = DEFAULT_PATTERN_OPACITY,
+  colors,
+  children,
+  style,
+  testID,
+}: ChatBackgroundProps) {
+  const paint = useChatScreenPaint();
+  const image = useResolvedImageSource(source, 'large');
+  const dim = overlayOpacity ?? paint.imageDimOpacity;
+  const gradientColors = colors ?? [...paint.gradient];
+
+  return (
+    <View
+      testID={testID}
+      style={[{ flex: 1, overflow: 'hidden', backgroundColor: paint.page }, style]}
+    >
+      {variant === 'pattern' ? (
+        <PatternLayer paint={paint} tint={tint} opacity={patternOpacity} />
+      ) : null}
+      {variant === 'gradient' ? <GradientLayer colors={gradientColors} /> : null}
+      {variant === 'image' && image ? (
+        <>
+          <Image
+            source={image}
+            resizeMode="cover"
+            accessibilityIgnoresInvertColors
+            aria-hidden
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            testID="chat-background-image"
+            style={StyleSheet.absoluteFillObject}
+          />
+          <View
+            pointerEvents="none"
+            testID="chat-background-dim"
+            style={[
+              StyleSheet.absoluteFillObject,
+              { backgroundColor: paint.imageDim, opacity: dim },
+            ]}
+          />
+        </>
+      ) : null}
+      {children}
+    </View>
+  );
+}
+
+export const ChatBackground = memo(ChatBackgroundComponent);
+ChatBackground.displayName = 'ChatBackground';

package/src/chat-screen/ChatDateHeader.tsx

@@ -0,0 +1,99 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import type { WebCssStyle } from '../styles/web-view-style';
+import { Text } from '../typography';
+import { useChatScreenPaint } from './shared';
+import type { ChatDateHeaderProps } from './types';
+
+/**
+ * The date pill that hovers over the transcript.
+ *
+ * `label` is PRE-FORMATTED — "Today", "Yesterday", "14 March". Nothing here
+ * reads a clock, and nothing here decides what "today" means in the reader's
+ * timezone.
+ *
+ * `visible={false}` fades the pill to nothing and hides it from assistive tech
+ * rather than unmounting it — unlike the jump buttons, this control is not
+ * focusable, so there is no phantom tab stop to worry about, and keeping it
+ * mounted stops the label re-announcing every time a scroll crosses a day
+ * boundary. Hiding is `opacity`, never `display: none`: collapsing an element
+ * inside a scroller is how a restored scroll offset gets clamped to 0.
+ *
+ * `floating` (the default) positions itself over the transcript, so the pill is
+ * `pointerEvents="none"` inside a `box-none` wrapper — a strip across the top of
+ * a conversation that swallowed taps would eat every press on the newest
+ * messages. Both are PROPS, not style entries: react-native-web drops
+ * `pointerEvents` given as a style.
+ */
+function ChatDateHeaderComponent({
+  label,
+  visible = true,
+  placement = 'floating',
+  offset = 8,
+  style,
+  textStyle,
+  testID,
+}: ChatDateHeaderProps) {
+  const paint = useChatScreenPaint();
+
+  const pill: WebCssStyle = {
+    alignSelf: 'center',
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingTop: 4,
+    paddingBottom: 4,
+    borderRadius: 999,
+    backgroundColor: paint.floatingSurface,
+    borderWidth: 1,
+    borderColor: paint.floatingBorder,
+    boxShadow: paint.floatingShadow,
+    opacity: visible ? 1 : 0,
+  };
+
+  const pillNode = (
+    <View
+      pointerEvents="none"
+      aria-hidden={visible ? undefined : true}
+      accessibilityElementsHidden={!visible}
+      importantForAccessibility={visible ? 'yes' : 'no-hide-descendants'}
+      testID={testID ? `${testID}-pill` : undefined}
+      style={pill}
+    >
+      <Text
+        variant="caption-1-medium"
+        numberOfLines={1}
+        style={[{ color: paint.textSecondary }, textStyle]}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+
+  if (placement === 'inline') {
+    return (
+      <View
+        testID={testID}
+        style={[{ alignItems: 'center', paddingTop: 8, paddingBottom: 8 }, style]}
+      >
+        {pillNode}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      pointerEvents="box-none"
+      testID={testID}
+      style={[
+        { position: 'absolute', top: offset, left: 0, right: 0, alignItems: 'center', zIndex: 1 },
+        style,
+      ]}
+    >
+      {pillNode}
+    </View>
+  );
+}
+
+export const ChatDateHeader = memo(ChatDateHeaderComponent);
+ChatDateHeader.displayName = 'ChatDateHeader';

package/src/chat-screen/ChatEmptyState.tsx

@@ -0,0 +1,113 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { RiLock2Line } from '../icons/remix/RiLock2Line';
+import { Text } from '../typography';
+import { CHAT_SCREEN_LABELS, useChatScreenPaint } from './shared';
+import type { ChatEmptyStateProps } from './types';
+
+/**
+ * What a conversation with nothing in it shows.
+ *
+ * THE NOTICE HAS NO DEFAULT, and that is the point. "Messages are end-to-end
+ * encrypted" is a claim about an app's transport, not about a component — a
+ * default would make it on behalf of every app that mounts this, including the
+ * ones that cannot keep it. Pass the wording you can stand behind, or pass
+ * nothing and the line is not drawn.
+ *
+ * The title DOES default ("No messages yet"), because an empty transcript is a
+ * fact this component can see for itself.
+ */
+function ChatEmptyStateComponent({
+  title = CHAT_SCREEN_LABELS.emptyTitle,
+  description,
+  illustration,
+  notice,
+  noticeIcon,
+  action,
+  style,
+  testID,
+}: ChatEmptyStateProps) {
+  const paint = useChatScreenPaint();
+  const NoticeIcon = noticeIcon === false ? null : (noticeIcon ?? RiLock2Line);
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        {
+          flexGrow: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 16,
+          paddingLeft: 24,
+          paddingRight: 24,
+          paddingTop: 32,
+          paddingBottom: 32,
+        },
+        style,
+      ]}
+    >
+      {illustration ? (
+        <View testID={testID ? `${testID}-illustration` : undefined}>{illustration}</View>
+      ) : null}
+
+      <View style={{ alignItems: 'center', gap: 6, maxWidth: 360 }}>
+        <Text
+          variant="headline-semibold"
+          accessibilityRole="header"
+          style={{ color: paint.text, textAlign: 'center' }}
+        >
+          {title}
+        </Text>
+        {description ? (
+          <Text
+            variant="body-regular"
+            style={{ color: paint.textSecondary, textAlign: 'center' }}
+          >
+            {description}
+          </Text>
+        ) : null}
+      </View>
+
+      {notice ? (
+        <View
+          testID={testID ? `${testID}-notice` : undefined}
+          style={{
+            flexDirection: 'row',
+            // `alignSelf` so the pill hugs its text; `flex-start` on the cross
+            // axis so a wrapped second line still sits under the first rather
+            // than the glyph drifting to the middle of two lines.
+            alignSelf: 'center',
+            alignItems: 'flex-start',
+            gap: 6,
+            maxWidth: 340,
+            paddingLeft: 12,
+            paddingRight: 12,
+            paddingTop: 6,
+            paddingBottom: 6,
+            borderRadius: 12,
+            backgroundColor: paint.surfaceSubtle,
+          }}
+        >
+          {NoticeIcon ? (
+            <View style={{ paddingTop: 1 }}>
+              <NoticeIcon width={14} height={14} fill={paint.textSecondary} />
+            </View>
+          ) : null}
+          <Text
+            variant="caption-1-regular"
+            style={{ flexShrink: 1, color: paint.textSecondary }}
+          >
+            {notice}
+          </Text>
+        </View>
+      ) : null}
+
+      {action}
+    </View>
+  );
+}
+
+export const ChatEmptyState = memo(ChatEmptyStateComponent);
+ChatEmptyState.displayName = 'ChatEmptyState';