@oxy.so/bloom 2.8.0 → 2.10.0

package/src/listing-editor/AddressPrecisionPicker.tsx

@@ -0,0 +1,201 @@
+import React, { memo, useMemo, useState } from 'react';
+import { View } from 'react-native';
+
+import { mixColor, resolveButtonRamps } from '../button/shared';
+import { RiMapPin2Fill } from '../icons/remix/RiMapPin2Fill';
+import type { Theme } from '../theme/types';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { resolveSelectionPaint, SelectionCard } from './SelectionCard';
+import type { AddressPrecision, AddressPrecisionOption, AddressPrecisionPickerProps } from './types';
+
+/**
+ * How precisely the published listing shows where the home is: three radio
+ * cards, each with a map preview over its title and explanation.
+ *
+ *   layout    three cards side by side from 720 wide, stacked below
+ *   card      the listing editor's selection card (radius 16, 2px text-primary
+ *             border when selected) with Bloom's `RadioIndicator` at 20 beside
+ *             the title
+ *   map       112 tall (96 stacked), radius 12, inset 12 — `renderMap(precision)`
+ *             or Bloom's placeholder: a neutral-100 (dark neutral-800) street
+ *             grid with a pin (exact), the street drawn in the accent (street),
+ *             or an accent circle at 20% over the grid (approximate)
+ *   footnote  caption-1-regular, text-secondary, 12 under the cards
+ *
+ * THE CHOICE DECIDES WHAT IS PUBLISHED. The component only records it; the app
+ * must derive the public location from `value` on its server — exact
+ * coordinates for `exact`, the street's centreline for `street`, and a point
+ * jittered inside roughly 500 m for `approximate` — and never send the exact
+ * coordinates to a client that should not see them.
+ *
+ * Accessibility: a `radiogroup` of `radio`s with `aria-checked`, each named by
+ * its title with the explanation as its hint. The map previews are decorative.
+ */
+
+export const DEFAULT_ADDRESS_PRECISION_OPTIONS: ReadonlyArray<AddressPrecisionOption> = [
+  {
+    value: 'exact',
+    title: 'Exact address',
+    description: 'The pin sits on the building. Best for homes that are easy to find anyway.',
+  },
+  {
+    value: 'street',
+    title: 'Street only',
+    description: 'Shows the street, not the number. The exact address is shared after booking or signing.',
+  },
+  {
+    value: 'approximate',
+    title: 'Approximate area',
+    description: 'Shows a circle of about 500 m. The most private option.',
+  },
+];
+
+const DEFAULT_FOOTNOTE =
+  'The published map follows this choice. Your exact address is only shared with people you confirm.';
+
+interface MapPaint {
+  ground: string;
+  block: string;
+  road: string;
+  accent: string;
+  accentWash: string;
+  pin: string;
+}
+
+function resolveMapPaint(theme: Theme): MapPaint {
+  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const dark = theme.isDark;
+  const ground = dark ? n[800] : n[100];
+  return {
+    ground,
+    block: dark ? mixColor(n[800], n[700], 0.5) : n[200],
+    road: dark ? n[900] : n[50],
+    accent: accent[500],
+    accentWash: mixColor(ground, accent[500], 0.2),
+    pin: theme.colors.text,
+  };
+}
+
+/** Bloom's placeholder map for one precision. Decorative. */
+export function PrecisionMapPlaceholder({ precision, height }: { precision: AddressPrecision; height: number }) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMapPaint(theme), [theme]);
+  const circle = Math.round(height * 0.72);
+
+  return (
+    <View
+      aria-hidden
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={{ height, backgroundColor: paint.ground, overflow: 'hidden' }}
+    >
+      {/* City blocks */}
+      {[0.08, 0.62].map((top) =>
+        [0.04, 0.3, 0.62].map((left) => (
+          <View
+            key={`${top}-${left}`}
+            style={{
+              position: 'absolute',
+              top: `${top * 100}%`,
+              left: `${left * 100}%`,
+              width: '20%',
+              height: '28%',
+              borderRadius: 4,
+              backgroundColor: paint.block,
+            }}
+          />
+        )),
+      )}
+      {/* The street the home is on, and a cross street */}
+      <View
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: '44%',
+          height: 10,
+          backgroundColor: precision === 'street' ? paint.accent : paint.road,
+        }}
+      />
+      <View style={{ position: 'absolute', top: 0, bottom: 0, left: '55%', width: 8, backgroundColor: paint.road }} />
+      {precision === 'approximate' ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '42%',
+            width: circle,
+            height: circle,
+            marginTop: -circle / 2,
+            marginLeft: -circle / 2,
+            borderRadius: circle / 2,
+            borderWidth: 2,
+            borderColor: paint.accent,
+            backgroundColor: paint.accentWash,
+          }}
+        />
+      ) : null}
+      {precision === 'exact' ? (
+        <View style={{ position: 'absolute', top: '50%', left: '42%', marginTop: -30, marginLeft: -14 }}>
+          <RiMapPin2Fill width={28} height={28} fill={paint.pin} />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function AddressPrecisionPickerComponent({
+  value,
+  onValueChange,
+  renderMap,
+  options = DEFAULT_ADDRESS_PRECISION_OPTIONS,
+  footnote = DEFAULT_FOOTNOTE,
+  accessibilityLabel = 'Address precision',
+  disabled = false,
+  style,
+  testID,
+}: AddressPrecisionPickerProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveSelectionPaint(theme), [theme]);
+  const [width, setWidth] = useState(0);
+  const row = width >= 720;
+  const mapHeight = row ? 112 : 96;
+
+  return (
+    <View testID={testID} style={[{ gap: 12 }, style]} onLayout={(e) => setWidth(e.nativeEvent.layout.width)}>
+      <View
+        role="radiogroup"
+        accessibilityLabel={accessibilityLabel}
+        aria-disabled={disabled || undefined}
+        style={{ flexDirection: row ? 'row' : 'column', alignItems: row ? 'stretch' : undefined, gap: 12 }}
+      >
+        {options.map((option) => (
+          <SelectionCard
+            key={option.value}
+            selection="single"
+            indicator="radio"
+            selected={value === option.value}
+            onPress={() => {
+              if (value !== option.value) onValueChange(option.value);
+            }}
+            title={option.title}
+            description={option.description}
+            media={renderMap ? renderMap(option.value) : <PrecisionMapPlaceholder precision={option.value} height={mapHeight} />}
+            disabled={disabled}
+            style={row ? { flex: 1, flexBasis: 0 } : undefined}
+            testID={testID ? `${testID}-${option.value}` : undefined}
+          />
+        ))}
+      </View>
+      {footnote ? (
+        <Text variant="caption-1-regular" style={{ color: paint.textSecondary }}>
+          {footnote}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+export const AddressPrecisionPicker = memo(AddressPrecisionPickerComponent);
+AddressPrecisionPicker.displayName = 'AddressPrecisionPicker';

package/src/listing-editor/ListingPreviewPane.tsx

@@ -0,0 +1,189 @@
+import React, { memo, useMemo } from 'react';
+import { Image, View } from 'react-native';
+
+import { resolveButtonRamps } from '../button/shared';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { useImageResolver } from '../image-resolver/context';
+import { ListingCard } from '../listing-card';
+import { resolvePhoto } from '../listing-card/shared';
+import { ListingHeader } from '../listing-details';
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { ListingPreviewData, ListingPreviewMode, ListingPreviewPaneProps } from './types';
+
+/**
+ * A side panel that previews the listing while it is edited: Bloom's own
+ * `ListingCard`, or a compact listing page, switched by a toggle.
+ *
+ *   panel    neutral-50 (dark neutral-900) fill, radius 20, p 20, gap 16
+ *   head     title (headline-semibold) and description (body-2-regular,
+ *            text-secondary) over a `SegmentedControl` (`tabs`, stretched)
+ *   card     `ListingCard` at most 320 wide, centred, non-interactive
+ *   page     a 340-wide frame (radius 20, 1px neutral-200 / dark neutral-700,
+ *            the page background): the cover photo at 4:3, `ListingHeader`
+ *            at `medium`, the facts row, the description (six lines), and the
+ *            price line under a hairline
+ *
+ * The preview is DRAWN from `listing`, so it is live as long as the app passes
+ * the draft it is editing. `renderPage` replaces the built-in page.
+ */
+
+const CARD_MAX_WIDTH = 320;
+const PAGE_WIDTH = 340;
+
+function ListingPreviewPaneComponent({
+  listing,
+  mode: modeProp,
+  defaultMode = 'card',
+  onModeChange,
+  renderPage,
+  title = 'Preview',
+  description = 'This is how guests will see your listing.',
+  cardLabel = 'Card',
+  pageLabel = 'Page',
+  toggleLabel = 'Preview as',
+  style,
+  testID,
+}: ListingPreviewPaneProps) {
+  const theme = useTheme();
+  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const [mode, setMode] = useControllableState<ListingPreviewMode>({
+    value: modeProp,
+    defaultValue: defaultMode,
+    onChange: onModeChange,
+  });
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        {
+          gap: 16,
+          paddingTop: 20,
+          paddingBottom: 20,
+          paddingLeft: 20,
+          paddingRight: 20,
+          borderRadius: 20,
+          backgroundColor: theme.isDark ? neutral[900] : neutral[50],
+        },
+        style,
+      ]}
+    >
+      <View style={{ gap: 2 }}>
+        <Text variant="headline-semibold" style={{ color: theme.colors.text }}>
+          {title}
+        </Text>
+        {description ? (
+          <Text variant="body-2-regular" style={{ color: theme.colors.textSecondary }}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      <SegmentedControl
+        label={toggleLabel}
+        type="tabs"
+        value={mode}
+        onChange={(next) => setMode(next as ListingPreviewMode)}
+        style={{ alignSelf: 'stretch' }}
+      >
+        <SegmentedControlItem value="card" testID={testID ? `${testID}-card-tab` : undefined}>
+          <SegmentedControlItemText>{cardLabel}</SegmentedControlItemText>
+        </SegmentedControlItem>
+        <SegmentedControlItem value="page" testID={testID ? `${testID}-page-tab` : undefined}>
+          <SegmentedControlItemText>{pageLabel}</SegmentedControlItemText>
+        </SegmentedControlItem>
+      </SegmentedControl>
+      <View
+        role="tabpanel"
+        accessibilityLabel={mode === 'card' ? cardLabel : pageLabel}
+        testID={testID ? `${testID}-${mode}` : undefined}
+        style={{ alignItems: 'center' }}
+      >
+        {mode === 'card' ? (
+          <ListingCard {...listing} style={{ width: '100%', maxWidth: CARD_MAX_WIDTH }} />
+        ) : renderPage ? (
+          renderPage(listing)
+        ) : (
+          <PagePreview listing={listing} />
+        )}
+      </View>
+    </View>
+  );
+}
+
+function PagePreview({ listing }: { listing: ListingPreviewData }) {
+  const theme = useTheme();
+  const resolver = useImageResolver();
+  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const cover = listing.photos[0] ? resolvePhoto(listing.photos[0], resolver, listing.photoVariant) : undefined;
+  const hairline = theme.isDark ? neutral[700] : neutral[200];
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        maxWidth: PAGE_WIDTH,
+        borderRadius: 20,
+        borderWidth: 1,
+        borderColor: hairline,
+        backgroundColor: theme.colors.background,
+        overflow: 'hidden',
+      }}
+    >
+      <View style={{ width: '100%', aspectRatio: 4 / 3, backgroundColor: theme.isDark ? neutral[800] : neutral[100] }}>
+        {cover ? (
+          <Image source={{ uri: cover }} resizeMode="cover" style={{ width: '100%', height: '100%' }} />
+        ) : null}
+      </View>
+      <View style={{ gap: 12, paddingTop: 16, paddingBottom: 16, paddingLeft: 16, paddingRight: 16 }}>
+        <ListingHeader
+          title={listing.title}
+          size="medium"
+          headingLevel={2}
+          subtitle={listing.subtitle}
+          rating={listing.rating}
+          reviewsLabel={listing.reviewCount != null ? `${listing.reviewCount} reviews` : undefined}
+          location={listing.location}
+        />
+        {listing.facts && listing.facts.length > 0 ? (
+          <Text variant="body-2-regular" style={{ color: theme.colors.textSecondary }}>
+            {listing.facts.map((fact) => fact.accessibilityLabel ?? fact.label).join(' · ')}
+          </Text>
+        ) : null}
+        {listing.description ? (
+          <Text variant="body-regular" numberOfLines={6} style={{ color: theme.colors.text }}>
+            {listing.description}
+          </Text>
+        ) : null}
+      </View>
+      {listing.price || listing.total ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'baseline',
+            gap: 4,
+            borderTopWidth: 1,
+            borderTopColor: hairline,
+            paddingTop: 14,
+            paddingBottom: 14,
+            paddingLeft: 16,
+            paddingRight: 16,
+          }}
+        >
+          <Text variant="headline-semibold" style={{ color: theme.colors.text }}>
+            {listing.price ?? listing.total}
+          </Text>
+          {listing.price && listing.priceUnit ? (
+            <Text variant="body-regular" style={{ color: theme.colors.textSecondary }}>
+              {listing.priceUnit}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const ListingPreviewPane = memo(ListingPreviewPaneComponent);
+ListingPreviewPane.displayName = 'ListingPreviewPane';

package/src/listing-editor/ListingQualityMeter.tsx

@@ -0,0 +1,298 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { resolveButtonRamps } from '../button/shared';
+import { webDataSet } from '../checkbox/shared';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiArrowRightSLine } from '../icons/remix/RiArrowRightSLine';
+import { RiCheckboxBlankCircleLine } from '../icons/remix/RiCheckboxBlankCircleLine';
+import { RiCheckboxCircleFill } from '../icons/remix/RiCheckboxCircleFill';
+import { RiLightbulbFlashLine } from '../icons/remix/RiLightbulbFlashLine';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import type { WebCssStyle } from '../styles/web-view-style';
+import type { Theme } from '../theme/types';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { ListingQualityItem, ListingQualityMeterProps } from './types';
+
+/**
+ * How complete a listing is: a score ring, a checklist of what is left, and
+ * tips.
+ *
+ *   head      the 72 ring (6 stroke, track neutral-200 / dark neutral-700,
+ *             progress accent-500, round cap) with the score (headline-semibold)
+ *             in it; title (headline-semibold) and summary (body-regular,
+ *             text-secondary) beside it
+ *   rows      12 apart; a 20 glyph — filled success check when done, an empty
+ *             neutral-400 circle when not — the label (body-medium; done rows in
+ *             text-secondary) and the tip under an open row (caption-1-regular,
+ *             text-secondary). A row with `onPress` is a button with a chevron,
+ *             neutral-50 wash on hover (dark neutral-900), radius 12
+ *   tips      a neutral-50 panel (dark neutral-900), radius 16, p 16, a
+ *             lightbulb glyph and the tips as lines
+ *
+ * The score defaults to the done items' share of the total weight, rounded.
+ * The ring eases on web over 400ms (not under reduced motion); native snaps.
+ *
+ * Accessibility: the ring is a `progressbar` 0..100 named by
+ * `accessibilityLabel`; each row's name carries its state ("Add at least 5
+ * photos, To do").
+ */
+
+const IS_WEB = Platform.OS === 'web';
+const RING = 72;
+const STROKE = 6;
+
+const STYLE_ID = 'bloom-listing-quality-web-css';
+const ARC = '[data-bloom-quality-arc]';
+const ROW = '[data-bloom-quality-row]';
+const CSS = `
+${ARC} circle:last-child {
+  transition: stroke-dashoffset 400ms ease-out;
+}
+${ROW} {
+  outline: none;
+  cursor: pointer;
+}
+${ROW}:focus-visible {
+  outline: 2px solid var(--bloom-quality-ring, currentColor);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  ${ARC} circle:last-child {
+    transition: none;
+  }
+}
+`;
+
+/** The weighted share of done items, 0..100, rounded. Pure. */
+export function listingQualityScore(items: ReadonlyArray<ListingQualityItem>): number {
+  let total = 0;
+  let done = 0;
+  for (const item of items) {
+    const weight = Math.max(0, item.weight ?? 1);
+    total += weight;
+    if (item.done) done += weight;
+  }
+  return total === 0 ? 0 : Math.round((done / total) * 100);
+}
+
+interface QualityPaint {
+  track: string;
+  progress: string;
+  text: string;
+  textSecondary: string;
+  done: string;
+  todo: string;
+  wash: string;
+  ring: string;
+}
+
+function resolveQualityPaint(theme: Theme): QualityPaint {
+  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const dark = theme.isDark;
+  return {
+    track: dark ? n[700] : n[200],
+    progress: accent[500],
+    text: theme.colors.text,
+    textSecondary: theme.colors.textSecondary,
+    done: theme.colors.success,
+    todo: n[400],
+    wash: dark ? n[900] : n[50],
+    ring: accent[500],
+  };
+}
+
+function ListingQualityMeterComponent({
+  items,
+  score: scoreProp,
+  title = 'Listing quality',
+  summary,
+  tips,
+  tipsTitle = 'Tips',
+  formatScore = (score) => `${score}`,
+  accessibilityLabel = 'Listing quality score',
+  doneLabel = 'Done',
+  todoLabel = 'To do',
+  style,
+  testID,
+}: ListingQualityMeterProps) {
+  const theme = useTheme();
+  useEffect(() => {
+    if (IS_WEB) adoptStyleSheet(STYLE_ID, CSS);
+  }, []);
+  const paint = useMemo(() => resolveQualityPaint(theme), [theme]);
+  const score = Math.min(100, Math.max(0, Math.round(scoreProp ?? listingQualityScore(items))));
+  const line = summary ?? (score < 50 ? 'Needs work' : score < 80 ? 'Good' : 'Excellent');
+  const radius = (RING - STROKE) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  return (
+    <View testID={testID} style={[{ gap: 20 }, style]}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+        <View
+          role="progressbar"
+          accessibilityLabel={accessibilityLabel}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={score}
+          aria-valuetext={`${formatScore(score)}, ${line}`}
+          testID={testID ? `${testID}-ring` : undefined}
+          style={{ width: RING, height: RING, alignItems: 'center', justifyContent: 'center' }}
+        >
+          <View {...webDataSet({ bloomQualityArc: '' })} style={{ position: 'absolute', top: 0, left: 0 }}>
+            <Svg width={RING} height={RING} style={{ transform: [{ rotate: '-90deg' }] }}>
+              <Circle cx={RING / 2} cy={RING / 2} r={radius} stroke={paint.track} strokeWidth={STROKE} fill="none" />
+              <Circle
+                cx={RING / 2}
+                cy={RING / 2}
+                r={radius}
+                stroke={paint.progress}
+                strokeWidth={STROKE}
+                fill="none"
+                strokeLinecap={score > 0 ? 'round' : 'butt'}
+                strokeDasharray={`${circumference} ${circumference}`}
+                strokeDashoffset={circumference * (1 - score / 100)}
+              />
+            </Svg>
+          </View>
+          <Text variant="headline-semibold" style={{ color: paint.text, fontVariant: ['tabular-nums'] }}>
+            {formatScore(score)}
+          </Text>
+        </View>
+        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+          <Text variant="headline-semibold" style={{ color: paint.text }}>
+            {title}
+          </Text>
+          <Text variant="body-regular" style={{ color: paint.textSecondary }}>
+            {line}
+          </Text>
+        </View>
+      </View>
+
+      <View style={{ gap: 4 }}>
+        {items.map((item) => (
+          <QualityRow
+            key={item.key}
+            item={item}
+            paint={paint}
+            doneLabel={doneLabel}
+            todoLabel={todoLabel}
+            testID={testID ? `${testID}-item-${item.key}` : undefined}
+          />
+        ))}
+      </View>
+
+      {tips && tips.length > 0 ? (
+        <View
+          testID={testID ? `${testID}-tips` : undefined}
+          style={{
+            flexDirection: 'row',
+            gap: 12,
+            paddingTop: 16,
+            paddingBottom: 16,
+            paddingLeft: 16,
+            paddingRight: 16,
+            borderRadius: 16,
+            backgroundColor: paint.wash,
+          }}
+        >
+          <RiLightbulbFlashLine width={20} height={20} fill={paint.text} />
+          <View style={{ flex: 1, minWidth: 0, gap: 6 }}>
+            <Text variant="body-semibold" style={{ color: paint.text }}>
+              {tipsTitle}
+            </Text>
+            {tips.map((tip) => (
+              <Text key={tip} variant="body-2-regular" style={{ color: paint.textSecondary }}>
+                {tip}
+              </Text>
+            ))}
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function QualityRow({
+  item,
+  paint,
+  doneLabel,
+  todoLabel,
+  testID,
+}: {
+  item: ListingQualityItem;
+  paint: QualityPaint;
+  doneLabel: string;
+  todoLabel: string;
+  testID?: string;
+}) {
+  const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
+  const name = `${item.label}, ${item.done ? doneLabel : todoLabel}`;
+  const Glyph = item.done ? RiCheckboxCircleFill : RiCheckboxBlankCircleLine;
+
+  const content = (
+    <>
+      <View style={{ paddingTop: 1 }}>
+        <Glyph width={20} height={20} fill={item.done ? paint.done : paint.todo} />
+      </View>
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        <Text variant="body-medium" style={{ color: item.done ? paint.textSecondary : paint.text }}>
+          {item.label}
+        </Text>
+        {item.tip && !item.done ? (
+          <Text variant="caption-1-regular" style={{ color: paint.textSecondary }}>
+            {item.tip}
+          </Text>
+        ) : null}
+      </View>
+    </>
+  );
+
+  const rowStyle: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 8,
+    paddingRight: 8,
+    marginLeft: -8,
+    marginRight: -8,
+    borderRadius: 12,
+    '--bloom-quality-ring': paint.ring,
+  };
+
+  if (!item.onPress) {
+    return (
+      <View accessible accessibilityLabel={name} testID={testID} style={rowStyle}>
+        {content}
+      </View>
+    );
+  }
+
+  return (
+    <Pressable
+      role="button"
+      accessibilityLabel={name}
+      onPress={item.onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
+      {...webDataSet({ bloomQualityRow: '' })}
+      testID={testID}
+      style={{ ...rowStyle, backgroundColor: hovered || pressed ? paint.wash : 'transparent' }}
+    >
+      {content}
+      <View style={{ paddingTop: 1 }}>
+        <RiArrowRightSLine width={20} height={20} fill={paint.textSecondary} />
+      </View>
+    </Pressable>
+  );
+}
+
+export const ListingQualityMeter = memo(ListingQualityMeterComponent);
+ListingQualityMeter.displayName = 'ListingQualityMeter';