import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider"; import { appAtomRegistry } from "../../state/atom-registry"; import { threadArrangementOpenAtom } from "../../state/thread-order"; import type { ThreadMoveDestination } from "./threadOrder"; import type { EnvironmentProject, EnvironmentThreadShell, } from "@t3tools/client-runtime/state/shell"; import type { EnvironmentThreadSearchMatch } from "@t3tools/client-runtime/state/thread-search"; import type { EnvironmentMachineKind } from "@t3tools/contracts"; import { canSnooze, resolveSnoozePresets } from "@t3tools/client-runtime/state/thread-settled"; import { resolveSettledThreadTimestamp } from "@t3tools/client-runtime/state/thread-sort"; import type { MenuAction } from "@react-native-menu/menu"; import { memo, useCallback, useEffect, useMemo, useState, type ComponentProps } from "react"; import { Alert, Platform, Pressable, useWindowDimensions, View } from "react-native"; import type { SwipeableMethods } from "react-native-gesture-handler/ReanimatedSwipeable"; import { SymbolView } from "../../components/AppSymbol"; import { AppText as Text } from "../../components/AppText"; import { ControlPillMenu } from "../../components/ControlPill"; import { EnvironmentMachineSymbol } from "../../components/EnvironmentMachineSymbol"; import { ProjectFavicon } from "../../components/ProjectFavicon"; import { ProviderInstanceIcon } from "../../components/ProviderIcon"; import type { ThreadRowProviderInstance } from "./thread-provider-instance"; import { cn } from "../../lib/cn"; import { relativeTime } from "../../lib/time"; import { useUniwindTheme } from "../../lib/useUniwindTheme"; import type { PendingNewTask } from "../../state/use-pending-new-tasks"; import { useThreadPr } from "../../state/use-thread-pr"; import { ThreadSwipeable } from "../home/thread-swipe-actions"; import { buildThreadTitleRegenerationMenuItems } from "./thread-title-regeneration-menu"; import { resolveThreadListV2SnoozeMenuSelection, resolveThreadListV2SnoozeGateExpiryMs, resolveThreadListV2Status, resolveThreadListV2SwipeActions, type ThreadListV2Status, } from "./threadListV2"; import { QueuedMessageIcon } from "./queued-message-icon"; import { ThreadSearchMatchExcerpt } from "./thread-search-match"; /** * Thread List v2 renders one flat native list: rich edge-to-edge rows for * active work and a receded settled tail, all with native swipe and * long-press actions. State reads through colored status labels and text * hierarchy rather than card fills. */ const MONO_FONT = Platform.select({ ios: "Menlo", android: "monospace", default: "monospace", }); // Status hues follow the system-wide convention set by sidebar v1 and the // Live Activity/widgets (amber approval, indigo input, sky working) so a // thread reads the same color everywhere it surfaces. const STATUS_LABEL_BY_STATUS: Partial< Record > = { approval: { label: "Approval", className: "text-warning-foreground" }, input: { label: "Input", className: "text-foreground-secondary" }, working: { label: "Working", className: "text-adaptive-sky-600-400" }, failed: { label: "Failed", className: "text-danger-foreground" }, }; function threadTimeLabel(thread: EnvironmentThreadShell): string { return relativeTime(thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt); } // Menus keep lifecycle and title regeneration together. Archive keeps its // own surface (thread screen / settings) rather than crowding v2 rows. const CARD_MENU_ACTIONS: MenuAction[] = [ { id: "settle", title: "Settle", image: "checkmark" }, { id: "delete", title: "Delete", image: "trash", attributes: { destructive: true } }, ]; const SLIM_MENU_ACTIONS: MenuAction[] = [ { id: "unsettle", title: "Un-settle", image: "arrow.uturn.backward" }, { id: "delete", title: "Delete", image: "trash", attributes: { destructive: true } }, ]; const SNOOZED_MENU_ACTIONS: MenuAction[] = [ { id: "unsnooze", title: "Wake thread", image: "clock" }, { id: "delete", title: "Delete", image: "trash", attributes: { destructive: true } }, ]; // Pre-settlement servers: no lifecycle items, archive fills the gap. const LEGACY_MENU_ACTIONS: MenuAction[] = [ { id: "archive", title: "Archive", image: "archivebox" }, { id: "delete", title: "Delete", image: "trash", attributes: { destructive: true } }, ]; /** Rounded-row radius shared with the v1 sidebar rows. */ const SIDEBAR_V2_ROW_RADIUS = 12; /** Section label + rule: the only structure in an otherwise flat list. */ export const ThreadListV2SectionDivider = memo(function ThreadListV2SectionDivider(props: { readonly label: string; readonly pane?: "screen" | "sidebar"; }) { return ( {props.label} ); }); export const ThreadListV2SnoozedShelfHeader = memo(function ThreadListV2SnoozedShelfHeader(props: { readonly count: number; readonly disabled?: boolean; readonly expanded: boolean; readonly onToggle: () => void; readonly pane?: "screen" | "sidebar"; }) { return ( ({ opacity: pressed ? 0.6 : 1 })} > {props.expanded ? "Snoozed" : `Snoozed (${props.count})`} ); }); export const ThreadListV2SettledShelfHeader = memo(function ThreadListV2SettledShelfHeader(props: { readonly count: number; readonly disabled?: boolean; readonly expanded: boolean; readonly onToggle: () => void; readonly pane?: "screen" | "sidebar"; }) { return ( ({ opacity: pressed ? 0.6 : 1 })} > {props.expanded ? "Settled" : `Settled (${props.count})`} ); }); const PENDING_TASK_MENU_ACTIONS: MenuAction[] = [ { id: "delete", title: "Delete", image: "trash", attributes: { destructive: true } }, ]; const DRAFT_TASK_MENU_ACTIONS: MenuAction[] = [ { id: "delete", title: "Discard", image: "trash", attributes: { destructive: true } }, ]; /** * Unsent work, in the same idiom as an active v2 row: it is work the user * wrote, so it reads like the thread it will become. The status slot says * what happens next, not where the item sits: "Sends on reconnect" stays * uncolored because nothing is asked of the user; "Draft" takes the amber the * web sidebar uses for drafts, because this one waits on the user. */ export const ThreadListV2PendingRow = memo(function ThreadListV2PendingRow(props: { readonly pendingTask: PendingNewTask; readonly project: EnvironmentProject | null; readonly projectTitle?: string; readonly environmentLabel: string | null; /** Drawn beside the label; ignored while the label is null. */ readonly environmentMachine?: EnvironmentMachineKind; readonly pane?: "screen" | "sidebar"; /** Draws the "Unsent" divider above the first draft or queued row. */ readonly showPendingDivider: boolean; /** Keeps row hairlines inside a section; section headers draw their own rule. */ readonly showTrailingDivider?: boolean; readonly onSelectPendingTask: (pendingTask: PendingNewTask) => void; readonly onDeletePendingTask: (pendingTask: PendingNewTask) => void; }) { const { pendingTask, onSelectPendingTask, onDeletePendingTask } = props; const sidebarPane = props.pane === "sidebar"; const isDraft = pendingTask.kind === "draft"; const projectTitle = props.projectTitle ?? props.project?.title ?? pendingTask.projectTitle ?? ""; const branch = pendingTask.branch; const handleMenuAction = useCallback( ({ nativeEvent }: { readonly nativeEvent: { readonly event: string } }) => { if (nativeEvent.event === "delete") onDeletePendingTask(pendingTask); }, [onDeletePendingTask, pendingTask], ); const rowContent = ( <> {props.project ? ( ) : null} {projectTitle} {isDraft ? ( Draft ) : ( Sends on reconnect )} {/* One line, unlike the two an active row allows: a queued title is derived from the whole prompt rather than written as a title, so the second line is usually a stray word or emoji rather than meaning. */} {pendingTask.title} {branch || props.environmentLabel ? ( {branch ? ( {branch} ) : null} {branch && props.environmentLabel ? " · " : null} {props.environmentLabel ? ( {props.environmentLabel} ) : null} {props.environmentLabel && props.environmentMachine ? ( ) : null} ) : null} ); return ( <> {props.showPendingDivider ? ( ) : null} onSelectPendingTask(pendingTask)} style={ sidebarPane ? { borderRadius: SIDEBAR_V2_ROW_RADIUS, paddingHorizontal: 12, paddingVertical: 10, } : ({ pressed }) => ({ opacity: pressed ? 0.7 : 1 }) } > {sidebarPane ? ( rowContent ) : ( {rowContent} {props.showTrailingDivider !== false ? ( ) : null} )} ); }); export const ThreadListV2Row = memo(function ThreadListV2Row(props: { readonly thread: EnvironmentThreadShell; readonly variant: "card" | "slim"; /** A message for this thread is waiting in the outbox. */ readonly hasQueuedMessages?: boolean; /** Snoozed-shelf row: shows its wake time and offers Wake. */ readonly snoozed?: boolean; /** Pinned-block row: shows the pin glyph and offers Unpin. */ readonly pinned?: boolean; /** Preformatted against the parent minute tick so this memoized row's countdown keeps moving. */ readonly snoozeWakeLabelText?: string; /** Parent minute tick passed as a prop so this memoized row refreshes its native snooze menu while mounted. */ readonly snoozePresetMinute: string; readonly project: EnvironmentProject | null; readonly projectTitle?: string; readonly providerInstance: ThreadRowProviderInstance | null; /** Which machine hosts the thread. Null when only one environment is connected — repeating the same label on every row is noise. Mirrors the web sidebar's remote-environment cloud icon, but as text since phones have no hover tooltips. */ readonly environmentLabel: string | null; /** Drawn after the label so the machine reads at a glance; ignored while the label is null. */ readonly environmentMachine?: EnvironmentMachineKind; /** Hosting surface. "screen" (default) renders the compact Home idiom: flat edge-to-edge rows on the screen background with inset hairlines. "sidebar" renders the iPad split-view idiom: rounded rows blending into the drawer surface, selection filled with the accent color — matching the v1 sidebar rows. */ readonly pane?: "screen" | "sidebar"; /** Keeps row hairlines inside a section; section headers draw their own rule. */ readonly showTrailingDivider?: boolean; /** Highlights the thread open in the detail pane (iPad split view). The compact Home list never sets it — phones navigate away on select. */ readonly selected?: boolean; /** Override for narrow panes (iPad sidebar); defaults to window width. */ readonly fullSwipeWidth?: number; readonly onSelectThread: (thread: EnvironmentThreadShell) => void; readonly onDeleteThread: (thread: EnvironmentThreadShell) => void; readonly onNewThreadOnBranch: (thread: EnvironmentThreadShell) => void; readonly onRegenerateThreadTitle: (thread: EnvironmentThreadShell) => void; readonly onSettleThread: (thread: EnvironmentThreadShell) => Promise; readonly onSnoozeThread: (thread: EnvironmentThreadShell, snoozedUntil: string) => void; readonly onUnsnoozeThread: (thread: EnvironmentThreadShell) => void; readonly onUnsettleThread: (thread: EnvironmentThreadShell) => void; readonly onArchiveThread: (thread: EnvironmentThreadShell) => void; readonly onPinThread: (thread: EnvironmentThreadShell) => void; readonly onUnpinThread: (thread: EnvironmentThreadShell) => void; /** False on environments whose server predates thread.settle/unsettle: swipe + menu fall back to Archive instead of failing on use. */ readonly settlementSupported: boolean; /** False on servers that predate thread.snooze/unsnooze. */ readonly snoozeSupported: boolean; /** False on servers that predate thread.pin/unpin. */ readonly pinningSupported: boolean; /** False on servers that predate thread title regeneration. */ readonly titleRegenerationSupported: boolean; /** Server supports reordering this card's section. */ readonly reorderSupported?: boolean; readonly onMoveThread?: ( thread: EnvironmentThreadShell, direction: ThreadMoveDestination, ) => void; /** Position flags for the card's section so the menu disables the move that would fall off the end of the list. */ readonly canMoveUp?: boolean; readonly canMoveDown?: boolean; readonly onSwipeableWillOpen: (methods: SwipeableMethods) => void; readonly onSwipeableClose: (methods: SwipeableMethods) => void; readonly searchMatch?: EnvironmentThreadSearchMatch; readonly searchQuery?: string; readonly simultaneousSwipeGesture?: ComponentProps< typeof ThreadSwipeable >["simultaneousWithExternalGesture"]; }) { const { width: windowWidth } = useWindowDimensions(); const { thread, variant, onSelectThread, onDeleteThread, onRegenerateThreadTitle, onNewThreadOnBranch, onSettleThread, onSnoozeThread, onUnsnoozeThread, onUnsettleThread, onArchiveThread, onPinThread, onUnpinThread, onMoveThread, } = props; const snoozedRow = props.snoozed === true; const pinnedRow = props.pinned === true; const pr = useThreadPr(thread); const { materialYouStyleLayoutActive } = useAppearancePreferences(); const theme = useUniwindTheme(); const screenColor = theme["--color-screen"]; const drawerColor = theme["--color-drawer"]; const pressedBackgroundColor = theme["--color-subtle"]; const selectedBackgroundColor = theme[materialYouStyleLayoutActive ? "--color-thread-selected" : "--color-user-bubble"]; const sidebarPane = props.pane === "sidebar"; const selected = props.selected === true; // The provider badge's border blends into the row's own surface, which // differs by pane and (for the sidebar pane) selection: the sidebar row // background becomes the selected fill or the drawer surface, while the // flat "screen" pane rows always sit on the screen background. const providerIconSurfaceColor = sidebarPane ? selected ? selectedBackgroundColor : drawerColor : screenColor; const status = resolveThreadListV2Status(thread); const statusLabel = STATUS_LABEL_BY_STATUS[status]; // Settled rows label by the same stamp they sort by, so order and label // can't disagree. updatedAt is always present, so the resolver never // returns null here. const settledTimestamp = variant === "slim" && !snoozedRow ? resolveSettledThreadTimestamp(thread) : null; const timeLabel = settledTimestamp !== null ? relativeTime(settledTimestamp) : threadTimeLabel(thread); const handleDelete = useCallback(() => onDeleteThread(thread), [onDeleteThread, thread]); const handleRegenerateTitle = useCallback( () => onRegenerateThreadTitle(thread), [onRegenerateThreadTitle, thread], ); const handleSettle = useCallback(() => onSettleThread(thread), [onSettleThread, thread]); const handleSnooze = useCallback( (snoozedUntil: string) => onSnoozeThread(thread, snoozedUntil), [onSnoozeThread, thread], ); const handleUnsnooze = useCallback(() => onUnsnoozeThread(thread), [onUnsnoozeThread, thread]); const handleUnsettle = useCallback(() => onUnsettleThread(thread), [onUnsettleThread, thread]); const handlePin = useCallback(() => onPinThread(thread), [onPinThread, thread]); const handleUnpin = useCallback(() => onUnpinThread(thread), [onUnpinThread, thread]); const handleMoveUp = useCallback(() => onMoveThread?.(thread, "up"), [onMoveThread, thread]); const handleMoveDown = useCallback(() => onMoveThread?.(thread, "down"), [onMoveThread, thread]); const handleArchive = useCallback(() => onArchiveThread(thread), [onArchiveThread, thread]); // Swipe: the v2 primary action is the lifecycle transition. Un-settling a // settled row keeps it active until new activity clears the user override. const canUnsettle = variant === "slim"; const [snoozeGateTick, bumpSnoozeGateTick] = useState(0); const snoozeGateExpiryMs = props.snoozeSupported ? resolveThreadListV2SnoozeGateExpiryMs(thread, { now: new Date().toISOString() }) : null; useEffect(() => { if (snoozeGateExpiryMs === null) return; const delayMs = Math.min(Math.max(0, snoozeGateExpiryMs - Date.now()) + 50, 2_147_483_647); const id = setTimeout(() => bumpSnoozeGateTick((tick) => tick + 1), delayMs); return () => clearTimeout(id); }, [snoozeGateExpiryMs, snoozeGateTick]); const swipeActions = resolveThreadListV2SwipeActions({ variant, settlementSupported: props.settlementSupported, snoozeSupported: props.snoozeSupported, snoozable: canSnooze(thread, { now: new Date().toISOString() }), snoozed: snoozedRow, }); const snoozePresets = useMemo( () => (swipeActions.secondary === "snooze" ? resolveSnoozePresets(new Date()) : ([] as const)), [props.snoozePresetMinute, swipeActions.secondary], ); const snoozePresetActions = useMemo( () => snoozePresets.map((preset) => ({ id: `snooze:${preset.id}`, title: preset.label, subtitle: preset.whenLabel, })), [snoozePresets], ); // Pinned cards keep the full lifecycle menu; only the pin item flips to // Unpin. (Settling a pinned thread clears the pin server-side; snoozing // hides the card until wake with the pin intact.) const arrangementMenuItems = useMemo( () => [ ...(props.reorderSupported === true ? [ { id: "arrange", title: "Arrange threads…", image: "line.3.horizontal" }, { id: "move-up", title: "Move up", image: "arrow.up", attributes: { disabled: props.canMoveUp !== true }, } satisfies MenuAction, { id: "move-down", title: "Move down", image: "arrow.down", attributes: { disabled: props.canMoveDown !== true }, } satisfies MenuAction, ] : []), ...(props.pinningSupported ? [ thread.pinnedAt != null ? { id: "unpin", title: "Unpin", image: "pin.slash" } : { id: "pin", title: "Pin", image: "pin" }, ] : []), ], [ props.canMoveDown, props.canMoveUp, props.reorderSupported, props.pinningSupported, thread.pinnedAt, variant, ], ); const titleRegenerationMenuItems = useMemo( () => buildThreadTitleRegenerationMenuItems({ supported: props.titleRegenerationSupported, isRegenerating: thread.titleRegeneration != null, }), [props.titleRegenerationSupported, thread.titleRegeneration], ); const snoozableCardMenuActions = useMemo( () => [ { id: "settle", title: "Settle", image: "checkmark" }, { id: "snooze", title: "Snooze", image: "clock", subactions: snoozePresetActions, }, ...arrangementMenuItems, ...titleRegenerationMenuItems, { id: "delete", title: "Delete", image: "trash", attributes: { destructive: true } }, ], [arrangementMenuItems, snoozePresetActions, titleRegenerationMenuItems], ); const cardMenuActions = useMemo( () => [ CARD_MENU_ACTIONS[0]!, ...arrangementMenuItems, ...titleRegenerationMenuItems, ...CARD_MENU_ACTIONS.slice(1), ], [arrangementMenuItems, titleRegenerationMenuItems], ); const slimMenuActions = useMemo( () => [ SLIM_MENU_ACTIONS[0]!, ...arrangementMenuItems.filter( (action) => action.id !== "move-up" && action.id !== "move-down", ), ...titleRegenerationMenuItems, SLIM_MENU_ACTIONS[1]!, ], [arrangementMenuItems, titleRegenerationMenuItems], ); const snoozedMenuActions = useMemo( () => [SNOOZED_MENU_ACTIONS[0]!, ...titleRegenerationMenuItems, SNOOZED_MENU_ACTIONS[1]!], [titleRegenerationMenuItems], ); const legacyMenuActions = useMemo( () => [ LEGACY_MENU_ACTIONS[0]!, ...arrangementMenuItems, ...titleRegenerationMenuItems, LEGACY_MENU_ACTIONS[1]!, ], [arrangementMenuItems, titleRegenerationMenuItems], ); const handleMenuAction = useCallback( ({ nativeEvent }: { readonly nativeEvent: { readonly event: string } }) => { if (nativeEvent.event === "new-thread-on-branch") onNewThreadOnBranch(thread); if (nativeEvent.event === "settle") handleSettle(); if (nativeEvent.event === "unsettle") handleUnsettle(); if (nativeEvent.event === "unsnooze") handleUnsnooze(); if (nativeEvent.event === "pin") handlePin(); if (nativeEvent.event === "unpin") handleUnpin(); if (nativeEvent.event === "arrange") appAtomRegistry.set(threadArrangementOpenAtom, true); if (nativeEvent.event === "move-up") handleMoveUp(); if (nativeEvent.event === "move-down") handleMoveDown(); if (nativeEvent.event === "archive") handleArchive(); if (nativeEvent.event === "regenerate-title") handleRegenerateTitle(); if (nativeEvent.event === "delete") handleDelete(); const snoozeSelection = resolveThreadListV2SnoozeMenuSelection({ event: nativeEvent.event, displayedPresets: snoozePresets, now: new Date(), }); if (snoozeSelection._tag === "selected") { handleSnooze(snoozeSelection.preset.snoozedUntil); } else if (snoozeSelection._tag === "expired") { Alert.alert("Could not snooze thread", "That snooze time has passed. Choose another time."); } }, [ onNewThreadOnBranch, thread, handleArchive, handleDelete, handleRegenerateTitle, handleMoveDown, handleMoveUp, handlePin, handleSettle, handleSnooze, handleUnpin, handleUnsettle, handleUnsnooze, snoozePresets, ], ); const primaryAction = useMemo(() => { // Pre-settlement server: archive is the swipe action, as in v1. (Slim // rows cannot occur here — unsupported environments never classify as // settled.) if (swipeActions.primary === "archive") { return { accessibilityLabel: `Archive ${thread.title}`, icon: "archivebox" as const, label: "Archive", onPress: handleArchive, }; } if (swipeActions.primary === "unsnooze") { return { accessibilityLabel: `Wake ${thread.title} now`, icon: "clock" as const, label: "Wake", onPress: handleUnsnooze, }; } return swipeActions.primary === "unsettle" ? { accessibilityLabel: `Un-settle ${thread.title}`, icon: "arrow.uturn.backward" as const, label: "Un-settle", onPress: handleUnsettle, } : { accessibilityLabel: `Settle ${thread.title}`, icon: "checkmark" as const, label: "Settle", onPress: handleSettle, }; }, [ handleArchive, handleSettle, handleUnsettle, handleUnsnooze, swipeActions.primary, thread.title, ]); const secondaryAction = useMemo( () => swipeActions.secondary === "snooze" ? { accessibilityLabel: `Choose when to snooze ${thread.title}`, icon: "clock" as const, label: "Snooze", menu: { actions: snoozePresetActions, onPressAction: handleMenuAction, title: "Snooze until", }, onPress: () => undefined, } : null, [handleMenuAction, snoozePresetActions, swipeActions.secondary, thread.title], ); const swipeAccessibilityHint = secondaryAction === null ? `Opens the thread. Swipe left to ${primaryAction.label.toLowerCase()}.` : `Opens the thread. Swipe left for ${primaryAction.label.toLowerCase()} and snooze actions.`; // The sidebar pane fills selected rows with the theme's message surface, so // every piece of row text must use that surface's paired foreground. const cardContent = ( <> {props.project ? ( ) : null} {props.projectTitle ?? props.project?.title ?? ""} {props.hasQueuedMessages ? : null} {pinnedRow ? ( ) : null} {statusLabel?.label ?? timeLabel} {thread.title} {props.searchMatch ? ( ) : null} {status === "failed" && thread.session?.lastError ? ( {thread.session.lastError} ) : thread.branch || props.environmentLabel ? ( /* "branch · machine" share one truncating line. The machine sits last so a tight fit cuts the repetitive label, not the branch — and machine-only fills the row for non-git projects. The glyph hugs the label (it cannot live inside the Text without breaking truncation), and the wrapper takes the slack so the trailers stay pinned right. */ {thread.branch ? ( {thread.branch} ) : null} {thread.branch && props.environmentLabel ? " · " : null} {props.environmentLabel ? ( {props.environmentLabel} ) : null} {props.environmentLabel && props.environmentMachine ? ( ) : null} ) : ( )} {pr ? ( {pr.kind === "stack" || pr.others > 0 ? ( ) : null} {pr.kind === "stack" || pr.others > 0 ? pr.label : `#${pr.label}`} ) : null} {props.providerInstance ? ( ) : null} ); const rowContent = (close: () => void) => variant === "card" ? ( { close(); onSelectThread(thread); }} style={ sidebarPane || materialYouStyleLayoutActive ? ({ pressed }) => ({ backgroundColor: selected ? selectedBackgroundColor : pressed ? pressedBackgroundColor : sidebarPane ? drawerColor : screenColor, borderRadius: SIDEBAR_V2_ROW_RADIUS, ...(sidebarPane ? { paddingHorizontal: 12, paddingVertical: 10 } : null), }) : ({ pressed }) => ({ opacity: pressed ? 0.7 : 1 }) } > {sidebarPane ? ( cardContent ) : ( /* Flat native list rows: no tonal containers — colored status labels and text hierarchy carry state, an inset hairline separates rows. The opaque screen background stays so swipe actions reveal behind the row. */ {cardContent} {props.showTrailingDivider !== false ? ( ) : null} )} ) : ( { close(); onSelectThread(thread); }} style={ sidebarPane || materialYouStyleLayoutActive ? ({ pressed }) => ({ backgroundColor: selected ? selectedBackgroundColor : pressed ? pressedBackgroundColor : sidebarPane ? drawerColor : screenColor, borderRadius: SIDEBAR_V2_ROW_RADIUS, }) : ({ pressed }) => ({ opacity: pressed ? 0.7 : 1 }) } > {/* Settled history recedes: dimmed favicon + muted title. */} {props.project ? ( ) : null} {thread.title} {props.searchMatch ? ( ) : null} {props.hasQueuedMessages ? : null} {snoozedRow && props.snoozeWakeLabelText !== undefined ? props.snoozeWakeLabelText : timeLabel} ); return ( <> {(close) => ( {rowContent(close)} )} ); });