import type {  EnvironmentProject,  EnvironmentThreadShell,} from "@t3tools/client-runtime/state/shell";import type { EnvironmentThreadSearchMatch } from "@t3tools/client-runtime/state/thread-search";import { canSnooze, resolveSnoozePresets } from "@t3tools/client-runtime/state/thread-settled";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 { ProjectFavicon } from "../../components/ProjectFavicon";import { ProviderIcon } from "../../components/ProviderIcon";import { cn } from "../../lib/cn";import { relativeTime } from "../../lib/time";import { useThemeColor } from "../../lib/useThemeColor";import type { PendingNewTask } from "../../state/use-pending-new-tasks";import { useThreadPr } from "../../state/use-thread-pr";import { ThreadSwipeable } from "../home/thread-swipe-actions";import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";import { buildThreadTitleRegenerationMenuItems } from "./thread-title-regeneration-menu";import {  resolveThreadListV2SnoozeMenuSelection,  resolveThreadListV2SnoozeGateExpiryMs,  resolveThreadListV2Status,  resolveThreadListV2SwipeActions,  type ThreadListV2Status,} from "./threadListV2";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<ThreadListV2Status, { label: string; className: string }>> = {  approval: { label: "Approval", className: "text-amber-700 dark:text-amber-300" },  input: { label: "Input", className: "text-indigo-600 dark:text-indigo-300" },  working: { label: "Working", className: "text-sky-600 dark:text-sky-400" },  failed: { label: "Failed", className: "text-red-700 dark:text-red-300" },}; 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";}) {  const borderColor = useThemeColor("--color-border");  return (    <View      className={cn(        "mb-1.5 mt-4 flex-row items-center gap-2.5",        props.pane === "sidebar" ? "px-3" : "px-5",      )}    >      <Text className="text-xs font-t3-medium text-foreground-tertiary">{props.label}</Text>      <View className="h-px flex-1" style={{ backgroundColor: borderColor }} />    </View>  );}); const SNOOZE_ACCENT_LIGHT = "#2563eb";const SNOOZE_ACCENT_DARK = "#60a5fa"; export const ThreadListV2SnoozedShelfHeader = memo(function ThreadListV2SnoozedShelfHeader(props: {  readonly count: number;  readonly expanded: boolean;  readonly onToggle: () => void;  readonly pane?: "screen" | "sidebar";}) {  const { themeAppearance: colorScheme } = useAppearancePreferences();  return (    <Pressable      accessibilityHint={        props.expanded ? "Collapses the snoozed threads." : "Expands the snoozed threads."      }      accessibilityLabel={props.count === 1 ? "1 snoozed thread" : `${props.count} snoozed threads`}      accessibilityRole="button"      accessibilityState={{ expanded: props.expanded }}      className={cn(        "mb-1.5 mt-4 flex-row items-center gap-2.5",        props.pane === "sidebar" ? "px-3" : "px-5",      )}      onPress={props.onToggle}      style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}    >      <Text className="text-xs font-t3-medium text-blue-600 dark:text-blue-400">        {props.expanded ? "Snoozed" : `Snoozed (${props.count})`}      </Text>      <View className="h-px flex-1 bg-blue-500/20 dark:bg-blue-400/15" />      <SymbolView        name="chevron.down"        size={10}        tintColor={colorScheme === "dark" ? SNOOZE_ACCENT_DARK : SNOOZE_ACCENT_LIGHT}        type="monochrome"        style={{ transform: [{ rotate: props.expanded ? "180deg" : "0deg" }] }}      />    </Pressable>  );}); export const ThreadListV2SettledShelfHeader = memo(function ThreadListV2SettledShelfHeader(props: {  readonly count: number;  readonly expanded: boolean;  readonly onToggle: () => void;  readonly pane?: "screen" | "sidebar";}) {  const mutedColor = useThemeColor("--color-foreground-muted");  return (    <Pressable      accessibilityHint={        props.expanded ? "Collapses the settled threads." : "Expands the settled threads."      }      accessibilityLabel={props.count === 1 ? "1 settled thread" : `${props.count} settled threads`}      accessibilityRole="button"      accessibilityState={{ expanded: props.expanded }}      className={cn(        "mb-1.5 mt-4 flex-row items-center gap-2.5",        props.pane === "sidebar" ? "px-3" : "px-5",      )}      onPress={props.onToggle}      style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}    >      <Text className="text-xs font-t3-medium text-foreground-tertiary">        {props.expanded ? "Settled" : `Settled (${props.count})`}      </Text>      <View className="h-px flex-1 bg-border" />      <SymbolView        name="chevron.down"        size={10}        tintColor={mutedColor}        type="monochrome"        style={{ transform: [{ rotate: props.expanded ? "180deg" : "0deg" }] }}      />    </Pressable>  );}); const PENDING_TASK_MENU_ACTIONS: MenuAction[] = [  { id: "delete", title: "Delete", image: "trash", attributes: { destructive: true } },]; /** * A queued new task, in the same idiom as an active v2 row: it is work the * user wrote, so it reads like the threads it will become. "Queued" takes * the status slot — the state is the one thing that differs — and stays * uncolored because nothing is asked of the user; the environment is simply * not reachable yet. */export const ThreadListV2PendingRow = memo(function ThreadListV2PendingRow(props: {  readonly pendingTask: PendingNewTask;  readonly project: EnvironmentProject | null;  readonly projectTitle?: string;  readonly environmentLabel: string | null;  readonly pane?: "screen" | "sidebar";  /** Draws the "Pending" divider above the first 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 drawerColor = useThemeColor("--color-drawer");  const pressedBackgroundColor = useThemeColor("--color-subtle");  const sidebarPane = props.pane === "sidebar";  const projectTitle =    props.projectTitle ?? props.project?.title ?? pendingTask.creation.projectTitle ?? "";  const branch = pendingTask.creation.branch;   const handleMenuAction = useCallback(    ({ nativeEvent }: { readonly nativeEvent: { readonly event: string } }) => {      if (nativeEvent.event === "delete") onDeletePendingTask(pendingTask);    },    [onDeletePendingTask, pendingTask],  );   const rowContent = (    <>      <View className="flex-row items-center gap-1.5">        {props.project ? (          <ProjectFavicon            environmentId={pendingTask.message.environmentId}            faviconPath={props.project.faviconPath}            size={15}            projectTitle={projectTitle}            workspaceRoot={props.project.workspaceRoot}          />        ) : null}        <Text className="flex-1 text-sm font-t3-medium text-foreground-muted" numberOfLines={1}>          {projectTitle}        </Text>        <Text className="text-xs text-foreground-tertiary">Queued</Text>      </View>      {/* 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. */}      <Text className="mt-1 text-base font-t3-medium text-foreground" numberOfLines={1}>        {pendingTask.title}      </Text>      {branch || props.environmentLabel ? (        <Text className="mt-1 text-xs text-foreground-muted" numberOfLines={1}>          {branch ? (            <Text className="text-xs text-foreground-muted" style={{ fontFamily: MONO_FONT }}>              {branch}            </Text>          ) : null}          {branch && props.environmentLabel ? "  ·  " : null}          {props.environmentLabel ? (            <Text className="text-xs text-foreground-tertiary">{props.environmentLabel}</Text>          ) : null}        </Text>      ) : null}    </>  );   return (    <>      {props.showPendingDivider ? (        <ThreadListV2SectionDivider label="Pending" pane={props.pane} />      ) : null}      <ControlPillMenu        actions={PENDING_TASK_MENU_ACTIONS}        onPressAction={handleMenuAction}        shouldOpenOnLongPress      >        <Pressable          accessibilityHint="Opens the queued task for editing"          accessibilityLabel={pendingTask.title}          accessibilityRole="button"          onPress={() => onSelectPendingTask(pendingTask)}          style={            sidebarPane              ? ({ pressed }) => ({                  backgroundColor: pressed ? pressedBackgroundColor : drawerColor,                  borderRadius: SIDEBAR_V2_ROW_RADIUS,                  paddingHorizontal: 12,                  paddingVertical: 10,                })              : ({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })          }        >          {sidebarPane ? (            rowContent          ) : (            <View className="bg-screen">              <View className="px-5 py-2.5">{rowContent}</View>              {props.showTrailingDivider !== false ? (                <View className="ml-5 h-px bg-border-subtle" />              ) : null}            </View>          )}        </Pressable>      </ControlPillMenu>    </>  );}); export const ThreadListV2Row = memo(function ThreadListV2Row(props: {  readonly thread: EnvironmentThreadShell;  readonly variant: "card" | "slim";  /** 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 providerDriver: string | 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;  /** 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 onRegenerateThreadTitle: (thread: EnvironmentThreadShell) => void;  readonly onSettleThread: (thread: EnvironmentThreadShell) => void;  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;  /** False on servers that predate thread.pin.reorder. Gates the pinned      Move up / Move down menu items. */  readonly pinReorderSupported?: boolean;  readonly onMovePinnedThread?: (thread: EnvironmentThreadShell, direction: "up" | "down") => void;  /** Position flags for the pinned block so the menu disables the move that      would fall off the end of the list. */  readonly canMovePinnedUp?: boolean;  readonly canMovePinnedDown?: boolean;  readonly onSwipeableWillOpen: (methods: SwipeableMethods) => void;  readonly onSwipeableClose: (methods: SwipeableMethods) => void;  /** Reports this row's live PR state for the partition's merge and close      rules. Mirrors web's onChangeRequestState. */  readonly onChangeRequestState?: (    threadKey: string,    state: "open" | "closed" | "merged" | null,  ) => void;  readonly projectCwd?: string | null;  readonly searchMatch?: EnvironmentThreadSearchMatch;  readonly searchQuery?: string;  readonly simultaneousSwipeGesture?: ComponentProps<    typeof ThreadSwipeable  >["simultaneousWithExternalGesture"];}) {  const { width: windowWidth } = useWindowDimensions();  const {    thread,    variant,    onSelectThread,    onDeleteThread,    onRegenerateThreadTitle,    onSettleThread,    onSnoozeThread,    onUnsnoozeThread,    onUnsettleThread,    onArchiveThread,    onPinThread,    onUnpinThread,    onMovePinnedThread,    onChangeRequestState,  } = props;  const snoozedRow = props.snoozed === true;  const pinnedRow = props.pinned === true;   const pr = useThreadPr(thread, props.projectCwd ?? props.project?.workspaceRoot ?? null);  const prState = pr?.state ?? null;  const threadKey = `${thread.environmentId}:${thread.id}`;  useEffect(() => {    onChangeRequestState?.(threadKey, prState);  }, [onChangeRequestState, prState, threadKey]);   const screenColor = useThemeColor("--color-screen");  const drawerColor = useThemeColor("--color-drawer");  const pressedBackgroundColor = useThemeColor("--color-subtle");  const selectedBackgroundColor = useThemeColor("--color-user-bubble");  const pinTintColor = useThemeColor("--color-foreground-muted");  const sidebarPane = props.pane === "sidebar";  const selected = props.selected === true;   const status = resolveThreadListV2Status(thread);  const statusLabel = STATUS_LABEL_BY_STATUS[status];  const timeLabel = 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 handleMovePinnedUp = useCallback(    () => onMovePinnedThread?.(thread, "up"),    [onMovePinnedThread, thread],  );  const handleMovePinnedDown = useCallback(    () => onMovePinnedThread?.(thread, "down"),    [onMovePinnedThread, thread],  );  const handleArchive = useCallback(() => onArchiveThread(thread), [onArchiveThread, thread]);   // Swipe: the v2 primary action is the lifecycle transition. Every settled  // row can un-settle — explicit settles clear the override, auto-settled  // rows get pinned active until real activity clears the pin.  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<MenuAction[]>(    () =>      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 pinMenuItem = useMemo<MenuAction[]>(    () =>      props.pinningSupported        ? [            ...(pinnedRow && props.pinReorderSupported === true              ? [                  {                    id: "move-pin-up",                    title: "Move up",                    image: "arrow.up",                    attributes: { disabled: props.canMovePinnedUp !== true },                  } satisfies MenuAction,                  {                    id: "move-pin-down",                    title: "Move down",                    image: "arrow.down",                    attributes: { disabled: props.canMovePinnedDown !== true },                  } satisfies MenuAction,                ]              : []),

Lines 1–500 of 946. Load more