@oxy.so/bloom 2.8.0 → 2.10.0

package/src/map-marker/types.ts

@@ -1,16 +1,26 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 
+import type { ListingFact, ListingPriceLine, Offering } from '../listing-card/types';
+
 /**
  * `default` at rest; `active` for the marker whose listing is open (inverted
  * and raised); `visited` for one already opened (muted).
  */
 export type MapMarkerState = 'default' | 'active' | 'visited';
 
+/** `default` is 28 tall; `compact` is 22 tall, for a dense map. */
+export type MapPriceMarkerSize = 'default' | 'compact';
+
 export interface MapPriceMarkerProps {
-  /** The price as drawn, pre-formatted by the app ("€120"). */
+  /**
+   * The price as drawn, pre-formatted and SHORT — the app abbreviates it
+   * ("€120", "€950/mo", "€240K", "€1.2M"); the pill never truncates.
+   */
   price: string;
   /** Default `default`. */
   state?: MapMarkerState;
+  /** Default `default`. */
+  size?: MapPriceMarkerSize;
   /** Draws a small heart before the price. */
   saved?: boolean;
   onPress?: () => void;
@@ -49,12 +59,23 @@ export interface MapListingPreviewProps {
   reviewCount?: number | string;
   /** The secondary line ("Entire cabin · 2 beds"). */
   subtitle?: string;
-  /** Pre-formatted ("€120"). */
-  price: string;
+  /** Pre-formatted ("€120"). Optional when `priceLines` is given. */
+  price?: string;
   /** Drawn after the price in secondary text ("night", "total"). */
   priceDetail?: string;
   /** A struck-through earlier price before `price` ("€150"). */
   originalPrice?: string;
+  /**
+   * Stacked price lines, as on `ListingCard` ("€950 / month"; "€240,000 ·
+   * €3,200/m²"). Replaces `price`, `priceDetail` and `originalPrice`.
+   */
+  priceLines?: ReadonlyArray<ListingPriceLine>;
+  /** The facts row, as on `ListingCard` (bed 3 · bath 2 · 110 m²). */
+  facts?: ReadonlyArray<ListingFact>;
+  /** Offering badges, a small tinted row above the title. */
+  offerings?: ReadonlyArray<Offering>;
+  /** Replaces the English offering labels. */
+  offeringLabels?: Partial<Record<Offering, string>>;
   /** Whether the listing is saved. The heart shows only with `onFavoriteChange`. */
   favorite?: boolean;
   onFavoriteChange?: (favorite: boolean) => void;
@@ -77,6 +98,25 @@ export interface MapListingPreviewProps {
   testID?: string;
 }
 
+export interface MapAreaCircleProps {
+  /**
+   * The circle's radius in PIXELS. The app computes it from its map projection
+   * (metres at this latitude and zoom → pixels) and re-renders on zoom.
+   */
+  radius: number;
+  /** A small pill at the centre ("Approximate area", "~500 m"). */
+  label?: string;
+  /**
+   * The circle's name, which makes it an image to assistive technology
+   * ("Approximate location, within 500 metres"). Without it the circle is
+   * decorative and only its `label` is read.
+   */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-fill`, `-label`. */
+  testID?: string;
+}
+
 interface MapSearchAreaBase {
   /** Defaults to the variant's own sentence. */
   label?: string;

package/src/media-card/AlbumCard.tsx

@@ -0,0 +1,53 @@
+import React, { memo } from 'react';
+
+import { ExplicitBadge } from '../media-controls';
+import { RiDiscFill } from '../icons/remix/RiDiscFill';
+import { MediaCard } from './MediaCard';
+import { joinMeta } from './shared';
+import type { AlbumCardProps, AlbumCardType } from './types';
+
+export const ALBUM_TYPE_LABELS: Record<AlbumCardType, string> = {
+  album: 'Album',
+  single: 'Single',
+  ep: 'EP',
+  compilation: 'Compilation',
+};
+
+/**
+ * An album, single or EP: square cover (radius 8), the title, "2026 · Album"
+ * and the artist. A row puts it on one line: "Album · 2026 · Mara Vell".
+ *
+ * Name: "Low Tide, Album, 2026, Mara Vell".
+ */
+function AlbumCardComponent({
+  title,
+  artist,
+  year,
+  albumType = 'album',
+  typeLabels,
+  explicit = false,
+  layout = 'tile',
+  ...rest
+}: AlbumCardProps) {
+  const type = typeLabels?.[albumType] ?? ALBUM_TYPE_LABELS[albumType];
+  const row = layout === 'row';
+  return (
+    <MediaCard
+      {...rest}
+      layout={layout}
+      title={title}
+      typeLabel={type}
+      subtitle={row ? joinMeta([type, year, artist]) : joinMeta([year, type])}
+      meta={!row && artist ? [artist] : undefined}
+      accessibilityLabel={
+        rest.accessibilityLabel ??
+        [title, explicit ? 'Explicit' : null, type, year, artist].filter(Boolean).join(', ')
+      }
+      placeholderIcon={RiDiscFill}
+      titleAccessory={explicit ? <ExplicitBadge size="small" /> : undefined}
+    />
+  );
+}
+
+export const AlbumCard = memo(AlbumCardComponent);
+AlbumCard.displayName = 'AlbumCard';

package/src/media-card/ArtistCard.tsx

@@ -0,0 +1,55 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { RiUser3Fill } from '../icons/remix/RiUser3Fill';
+import { RiVerifiedBadgeFill } from '../icons/remix/RiVerifiedBadgeFill';
+import { useTheme } from '../theme/use-theme';
+import { MediaCard } from './MediaCard';
+import { joinMeta, resolveMediaCardPaint } from './shared';
+import type { ArtistCardProps } from './types';
+
+/**
+ * An artist: a ROUND photo (the only round cover besides a profile), the name
+ * with an accent verified mark, "Artist" and an optional follower count. A row
+ * draws a 56 round photo (48 at small) and "Artist · 1.2M followers".
+ *
+ * Name: "Mara Vell, Verified, Artist, 1.2M followers".
+ */
+function ArtistCardComponent({
+  name,
+  verified = false,
+  followers,
+  typeLabel = 'Artist',
+  verifiedLabel = 'Verified',
+  layout = 'tile',
+  ...rest
+}: ArtistCardProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const row = layout === 'row';
+  return (
+    <MediaCard
+      {...rest}
+      layout={layout}
+      title={name}
+      artworkShape="round"
+      placeholderIcon={RiUser3Fill}
+      subtitle={row ? joinMeta([typeLabel, followers]) : typeLabel}
+      meta={!row && followers ? [followers] : undefined}
+      accessibilityLabel={
+        rest.accessibilityLabel ??
+        [name, verified ? verifiedLabel : null, typeLabel, followers].filter(Boolean).join(', ')
+      }
+      titleAccessory={
+        verified ? (
+          <View style={{ flexShrink: 0 }}>
+            <RiVerifiedBadgeFill width={16} height={16} fill={paint.accent} />
+          </View>
+        ) : undefined
+      }
+    />
+  );
+}
+
+export const ArtistCard = memo(ArtistCardComponent);
+ArtistCard.displayName = 'ArtistCard';

package/src/media-card/AudiobookCard.tsx

@@ -0,0 +1,59 @@
+import React, { memo, useMemo } from 'react';
+
+import { RiBookOpenFill } from '../icons/remix/RiBookOpenFill';
+import { useTheme } from '../theme/use-theme';
+import { MediaCard } from './MediaCard';
+import { ListenProgress } from './parts';
+import { clampFraction, joinMeta, resolveMediaCardPaint } from './shared';
+import type { AudiobookCardProps } from './types';
+
+/** A book cover is 2:3. */
+export const AUDIOBOOK_ASPECT_RATIO = 2 / 3;
+
+/**
+ * An audiobook: a TALLER 2:3 cover (160 × 240 at medium; 56 × 84 in a row,
+ * radius 6), the title, the author, "Narrated by …", the duration, and a
+ * full-width listened bar when `progress` > 0.
+ *
+ * Name: "The Quiet Coast, Audiobook, Ines Calder, Narrated by Teo Marsh, 11 h 20 min".
+ */
+function AudiobookCardComponent({
+  title,
+  author,
+  narrator,
+  narratorPrefix = 'Narrated by',
+  duration,
+  progress,
+  typeLabel = 'Audiobook',
+  layout = 'tile',
+  testID,
+  ...rest
+}: AudiobookCardProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const row = layout === 'row';
+  const narratedBy = narrator ? `${narratorPrefix} ${narrator}` : undefined;
+  const heard = clampFraction(progress);
+  return (
+    <MediaCard
+      {...rest}
+      title={title}
+      layout={layout}
+      testID={testID}
+      typeLabel={typeLabel}
+      subtitle={author}
+      meta={row ? [joinMeta([narratedBy, duration])].filter(Boolean) : [narratedBy ?? '', duration ?? ''].filter(Boolean)}
+      artworkAspectRatio={AUDIOBOOK_ASPECT_RATIO}
+      artworkRadius={6}
+      placeholderIcon={RiBookOpenFill}
+      footer={
+        heard > 0 ? (
+          <ListenProgress value={heard} paint={paint} label={`${title} progress`} testID={testID ? `${testID}-progress` : undefined} />
+        ) : undefined
+      }
+    />
+  );
+}
+
+export const AudiobookCard = memo(AudiobookCardComponent);
+AudiobookCard.displayName = 'AudiobookCard';

package/src/media-card/EpisodeCard.tsx

@@ -0,0 +1,139 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { RiCheckboxCircleFill } from '../icons/remix/RiCheckboxCircleFill';
+import { RiMic2Fill } from '../icons/remix/RiMic2Fill';
+import { ExplicitBadge, PlayButton } from '../media-controls';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { MediaCard } from './MediaCard';
+import { ListenProgress } from './parts';
+import { clampFraction, joinMeta, resolveMediaCardPaint } from './shared';
+import type { EpisodeCardProps, MediaCardSize } from './types';
+
+/** An episode row's cover side. */
+export const EPISODE_ROW_ARTWORK: Record<MediaCardSize, number> = { large: 112, medium: 96, small: 72 };
+
+/** What the progress line draws: the check, the bar, or nothing. */
+export function episodeProgressState(played: boolean, progress: number | undefined): 'played' | 'progress' | 'none' {
+  if (played) return 'played';
+  return clampFraction(progress) > 0 ? 'progress' : 'none';
+}
+
+/**
+ * An episode.
+ *
+ *   tile   cover on top (radius 12); "12 Sep · 48 min", the title (2 lines),
+ *          the show, the description (2 lines); the progress line
+ *   row    cover left (112 / 96 / 72), the same text; under it the play button
+ *          — ALWAYS drawn in a row — then the progress line and `actions`
+ *
+ *   progress line   `played`: an accent check + "Played"; `progress` > 0: a
+ *                   48px bar + "12 min left"; else nothing
+ *
+ * Name: "Tide Tables, Explicit, Episode, Slow Signals, 12 Sep · 48 min, 12 min left".
+ */
+function EpisodeCardComponent({
+  title,
+  show,
+  date,
+  duration,
+  description,
+  explicit = false,
+  progress,
+  remaining,
+  played = false,
+  playedLabel = 'Played',
+  actions,
+  typeLabel = 'Episode',
+  layout = 'tile',
+  size = 'medium',
+  onPlay,
+  playing = false,
+  loading = false,
+  testID,
+  ...rest
+}: EpisodeCardProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const row = layout === 'row';
+  const state = episodeProgressState(played, progress);
+  const when = joinMeta([date, duration]);
+
+  const progressLine =
+    state === 'played' ? (
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }} testID={testID ? `${testID}-played` : undefined}>
+        <View aria-hidden>
+          <RiCheckboxCircleFill width={16} height={16} fill={paint.accent} />
+        </View>
+        <Text variant="caption-1-medium" style={{ color: paint.textSecondary }}>
+          {playedLabel}
+        </Text>
+      </View>
+    ) : state === 'progress' ? (
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, flexShrink: 1 }}>
+        <ListenProgress value={progress ?? 0} paint={paint} width={48} label={`${title} progress`} testID={testID ? `${testID}-progress` : undefined} />
+        {remaining ? (
+          <Text variant="caption-1-medium" numberOfLines={1} style={{ color: paint.textSecondary }}>
+            {remaining}
+          </Text>
+        ) : null}
+      </View>
+    ) : null;
+
+  const footer =
+    row || progressLine || actions ? (
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }} pointerEvents="box-none">
+        {row && onPlay ? (
+          <PlayButton playing={playing} loading={loading} onPress={onPlay} subject={title} size="small" testID={testID ? `${testID}-play` : undefined} />
+        ) : null}
+        {progressLine}
+        <View style={{ flex: 1 }} pointerEvents="none" />
+        {actions ? (
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }} pointerEvents="box-none">
+            {actions}
+          </View>
+        ) : null}
+      </View>
+    ) : undefined;
+
+  return (
+    <MediaCard
+      {...rest}
+      title={title}
+      layout={layout}
+      size={size}
+      testID={testID}
+      onPlay={row ? undefined : onPlay}
+      playing={playing}
+      loading={loading}
+      typeLabel={typeLabel}
+      eyebrow={when || undefined}
+      titleLines={2}
+      subtitle={show}
+      description={description}
+      artworkRadius={row ? 8 : 12}
+      artworkSize={row ? EPISODE_ROW_ARTWORK[size] : undefined}
+      rowAlign="top"
+      placeholderIcon={RiMic2Fill}
+      titleAccessory={explicit ? <ExplicitBadge size="small" /> : undefined}
+      accessibilityLabel={
+        rest.accessibilityLabel ??
+        [
+          title,
+          explicit ? 'Explicit' : null,
+          typeLabel,
+          show,
+          when || null,
+          state === 'played' ? playedLabel : state === 'progress' ? remaining : null,
+        ]
+          .filter(Boolean)
+          .join(', ')
+      }
+      footer={footer}
+    />
+  );
+}
+
+export const EpisodeCard = memo(EpisodeCardComponent);
+EpisodeCard.displayName = 'EpisodeCard';

package/src/media-card/EventCard.tsx

@@ -0,0 +1,122 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Badge } from '../badge';
+import { RiCalendarLine } from '../icons/remix/RiCalendarLine';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { MediaCard } from './MediaCard';
+import { joinMeta, resolveMediaCardPaint, type MediaCardPaint } from './shared';
+import type { EventCardProps } from './types';
+
+/** Month over day: the calendar leaf of an event. */
+export function DateBlock({
+  month,
+  day,
+  paint,
+  size,
+  filled = false,
+}: {
+  month: string;
+  day: string;
+  paint: MediaCardPaint;
+  size: number;
+  filled?: boolean;
+}) {
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: 8,
+        backgroundColor: filled ? paint.placeholder : paint.surface,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text variant="caption-2-semibold" numberOfLines={1} style={{ color: paint.accent, textTransform: 'uppercase' }}>
+        {month}
+      </Text>
+      <Text variant={size >= 56 ? 'title-3-bold' : 'headline-bold'} numberOfLines={1} style={{ color: paint.text, marginTop: -2 }}>
+        {day}
+      </Text>
+    </View>
+  );
+}
+
+/**
+ * A concert or live show.
+ *
+ *   tile   the image (square, radius 8) with a 48 date leaf — month in the
+ *          accent over the day — 8 in from its top-left; the title, "venue ·
+ *          city", the time; under it `action` (the tickets button)
+ *   row    the date leaf (56) takes the cover's place; the action trails
+ *
+ * `soldOut` replaces the action with a "Sold out" badge and names it.
+ *
+ * Name: "Mara Vell, Event, Oct 14, The Lantern Hall · Porto, Fri 20:00, Sold out".
+ */
+function EventCardComponent({
+  title,
+  month,
+  day,
+  image,
+  imageVariant,
+  venue,
+  city,
+  time,
+  action,
+  soldOut = false,
+  soldOutLabel = 'Sold out',
+  typeLabel = 'Event',
+  layout = 'tile',
+  testID,
+  ...rest
+}: EventCardProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const row = layout === 'row';
+  const where = joinMeta([venue, city]);
+  const status = soldOut ? (
+    <Badge content={soldOutLabel} variant="subtle" color="default" testID={testID ? `${testID}-sold-out` : undefined} />
+  ) : (
+    action
+  );
+
+  return (
+    <MediaCard
+      {...rest}
+      title={title}
+      layout={layout}
+      testID={testID}
+      playButton="never"
+      typeLabel={typeLabel}
+      artwork={row ? undefined : image}
+      artworkVariant={imageVariant}
+      placeholderIcon={RiCalendarLine}
+      subtitle={where || undefined}
+      meta={time ? [time] : undefined}
+      accessibilityLabel={
+        rest.accessibilityLabel ??
+        [title, typeLabel, `${month} ${day}`, where || null, time, soldOut ? soldOutLabel : null].filter(Boolean).join(', ')
+      }
+      renderArtwork={
+        row
+          ? () => <DateBlock month={month} day={day} paint={paint} size={56} filled />
+          : undefined
+      }
+      trailing={row ? status : undefined}
+      footer={!row && status ? <View style={{ alignItems: 'flex-start' }} pointerEvents="box-none">{status}</View> : undefined}
+      artworkOverlay={
+        row ? undefined : (
+          <View style={{ position: 'absolute', top: 8, left: 8 }}>
+            <DateBlock month={month} day={day} paint={paint} size={48} />
+          </View>
+        )
+      }
+    />
+  );
+}
+
+export const EventCard = memo(EventCardComponent);
+EventCard.displayName = 'EventCard';

package/src/media-card/FriendActivityCard.tsx

@@ -0,0 +1,150 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { RiDiscFill } from '../icons/remix/RiDiscFill';
+import { RiMusic2Fill } from '../icons/remix/RiMusic2Fill';
+import { RiUser3Fill } from '../icons/remix/RiUser3Fill';
+import { NowPlayingIndicator } from '../media-controls';
+import { Box as SkeletonBox, Circle as SkeletonCircle } from '../skeleton';
+import { borderRadius } from '../styles/tokens';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { Artwork, CardLink, useMediaCardCss } from './parts';
+import { composeName, resolveMediaCardPaint, ROW_PADDING, ROW_RADIUS, webData } from './shared';
+import type { FriendActivityCardProps } from './types';
+
+const AVATAR = 40;
+const DOT = 12;
+
+/**
+ * What a friend is listening to.
+ *
+ *   avatar   40 round; `live` adds a 12 accent dot ringed 2px in the page
+ *            colour at its bottom-right
+ *   line 1   the name (body-semibold) · right: the relative `time`, or — live —
+ *            the moving now-playing bars
+ *   line 2   "Track — Artist" (body-2-regular)
+ *   line 3   a note (playlist) or disc (album) glyph and the context (caption)
+ *
+ * A row with the same wash, padding and link-under-content as the other cards.
+ *
+ * Name: "Maya Ortiz, Listening now, Night Drive by Mara Vell, Late Hours".
+ */
+function FriendActivityCardComponent({
+  name,
+  avatar,
+  track,
+  artist,
+  context,
+  contextType = 'playlist',
+  live = false,
+  time,
+  liveLabel = 'Listening now',
+  onPress,
+  href,
+  selected = false,
+  skeleton = false,
+  accessibilityLabel,
+  style,
+  testID,
+}: FriendActivityCardProps) {
+  const theme = useTheme();
+  useMediaCardCss();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+
+  if (skeleton) {
+    return (
+      <View aria-busy accessibilityLabel="Loading" style={[{ flexDirection: 'row', gap: 12, padding: ROW_PADDING }, style]} testID={testID}>
+        <SkeletonCircle size={AVATAR} />
+        <View style={{ flex: 1, gap: 8, justifyContent: 'center' }}>
+          <SkeletonBox width="35%" height={12} borderRadius={4} />
+          <SkeletonBox width="60%" height={10} borderRadius={4} />
+        </View>
+      </View>
+    );
+  }
+
+  const label =
+    accessibilityLabel ??
+    composeName([name, live ? liveLabel : time, `${track} by ${artist}`, context]);
+  const ContextGlyph = contextType === 'album' ? RiDiscFill : RiMusic2Fill;
+
+  const rootStyle: WebCssStyle = {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12,
+    paddingLeft: ROW_PADDING,
+    paddingRight: ROW_PADDING,
+    paddingTop: ROW_PADDING,
+    paddingBottom: ROW_PADDING,
+    borderRadius: ROW_RADIUS,
+    backgroundColor: selected ? paint.selected : undefined,
+    '--bloom-media-card-hover': selected ? paint.selectedHover : paint.hover,
+  };
+
+  return (
+    <View
+      {...webData({ bloomMediaCard: 'activity', ...(onPress || href ? { bloomMediaCardHover: '' } : null) })}
+      style={[rootStyle, style]}
+      testID={testID}
+    >
+      <CardLink name={label} onPress={onPress} href={href} selected={selected} radius={ROW_RADIUS} paint={paint} testID={testID} />
+      <View pointerEvents="none" style={{ width: AVATAR, height: AVATAR }}>
+        <Artwork source={avatar} width={AVATAR} height={AVATAR} round radius={0} icon={RiUser3Fill} paint={paint} />
+        {live ? (
+          <View
+            testID={testID ? `${testID}-live-dot` : undefined}
+            style={{
+              position: 'absolute',
+              right: -2,
+              bottom: -2,
+              width: DOT + 4,
+              height: DOT + 4,
+              borderRadius: borderRadius.full,
+              backgroundColor: paint.surface,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <View style={{ width: DOT, height: DOT, borderRadius: borderRadius.full, backgroundColor: paint.accent }} />
+          </View>
+        ) : null}
+      </View>
+      <View pointerEvents="none" style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text variant="body-semibold" numberOfLines={1} style={{ flex: 1, minWidth: 0, color: paint.text }}>
+            {name}
+          </Text>
+          {live ? (
+            <NowPlayingIndicator size={12} label={liveLabel} testID={testID ? `${testID}-live` : undefined} />
+          ) : time ? (
+            <Text variant="caption-1-regular" numberOfLines={1} style={{ color: paint.textSecondary }}>
+              {time}
+            </Text>
+          ) : null}
+        </View>
+        <Text variant="body-2-regular" numberOfLines={1} style={{ color: paint.textSecondary }}>
+          <Text variant="body-2-medium" style={{ color: paint.text }}>
+            {track}
+          </Text>
+          {` — ${artist}`}
+        </Text>
+        {context ? (
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+            <View aria-hidden>
+              <ContextGlyph width={12} height={12} fill={paint.textSecondary} />
+            </View>
+            <Text variant="caption-1-regular" numberOfLines={1} style={{ flexShrink: 1, color: paint.textSecondary }}>
+              {context}
+            </Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+export const FriendActivityCard = memo(FriendActivityCardComponent);
+FriendActivityCard.displayName = 'FriendActivityCard';