authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-18 12:55:13-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-18 12:55:13-07:00
logdec0732281f5b7e787ad3a84e5cbe9a1607ea4ca
tree8938aa8a3f6c7d6ab94515e00ff84cee11df030a
parent429d66c13666c4e243065bbd02bee48e1eea2307
signature Signed by PGP key B5690EEEBB952194

refactor(mobile): isolate thread row appearance by platform (#12383)

3 files changed, 129 insertions(+), 124 deletions(-)

apps/mobile/src/features/threads/thread-list-v2-items.tsx+34-124
...@@ -1,3 +1,11 @@...@@ -1,3 +1,11 @@
1import {
2 THREAD_LIST_V2_MONO_FONT as MONO_FONT,
3 THREAD_LIST_V2_ROW_CONTENT_CLASS_NAME,
4 THREAD_LIST_V2_ROW_DIVIDERS,
5 selectedThreadRowColors,
6 getThreadListV2NewBranchMenuTitle,
7 getThreadListV2RowAppearance,
8} from "./thread-list-v2-row-appearance";
1import { RowPressable } from "../../components/RowPressable";9import { RowPressable } from "../../components/RowPressable";
2import { CustomSnoozeSheet } from "./CustomSnoozeSheet";10import { CustomSnoozeSheet } from "./CustomSnoozeSheet";
3import { appAtomRegistry } from "../../state/atom-registry";11import { appAtomRegistry } from "../../state/atom-registry";
...@@ -13,7 +21,7 @@ import { canSnooze, resolveSnoozePresets } from "@t3tools/client-runtime/state/t...@@ -13,7 +21,7 @@ import { canSnooze, resolveSnoozePresets } from "@t3tools/client-runtime/state/t
13import { resolveSettledThreadTimestamp } from "@t3tools/client-runtime/state/thread-sort";21import { resolveSettledThreadTimestamp } from "@t3tools/client-runtime/state/thread-sort";
14import type { MenuAction } from "@react-native-menu/menu";22import type { MenuAction } from "@react-native-menu/menu";
15import { memo, useCallback, useEffect, useMemo, useState, type ComponentProps } from "react";23import { memo, useCallback, useEffect, useMemo, useState, type ComponentProps } from "react";
16import { Alert, Platform, Pressable, useWindowDimensions, View } from "react-native";24import { Alert, Pressable, useWindowDimensions, View } from "react-native";
17import type { SwipeableMethods } from "react-native-gesture-handler/ReanimatedSwipeable";25import type { SwipeableMethods } from "react-native-gesture-handler/ReanimatedSwipeable";
1826
19import { SymbolView } from "../../components/AppSymbol";27import { SymbolView } from "../../components/AppSymbol";
...@@ -49,12 +57,6 @@ import { ThreadSearchMatchExcerpt } from "./thread-search-match";...@@ -49,12 +57,6 @@ import { ThreadSearchMatchExcerpt } from "./thread-search-match";
49 * hierarchy rather than card fills.57 * hierarchy rather than card fills.
50 */58 */
5159
52const MONO_FONT = Platform.select({
53 ios: "Menlo",
54 android: "monospace",
55 default: "monospace",
56});
57
58// Status hues follow the system-wide convention set by sidebar v1 and the60// Status hues follow the system-wide convention set by sidebar v1 and the
59// Live Activity/widgets (amber approval, indigo input, sky working) so a61// Live Activity/widgets (amber approval, indigo input, sky working) so a
60// thread reads the same color everywhere it surfaces.62// thread reads the same color everywhere it surfaces.
...@@ -477,23 +479,9 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -477,23 +479,9 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
477 const pr = useThreadPr(thread);479 const pr = useThreadPr(thread);
478480
479 const theme = useUniwindTheme();481 const theme = useUniwindTheme();
480 const screenColor = theme["--color-screen"];
481 const drawerColor = theme["--color-drawer"];
482 const selectedBackgroundColor =
483 theme[Platform.OS === "android" ? "--color-thread-selected" : "--color-user-bubble"];
484 const sidebarPane = props.pane === "sidebar";482 const sidebarPane = props.pane === "sidebar";
485 const selected = props.selected === true;483 const selected = props.selected === true;
486 // The provider badge's border blends into the row's own surface, which484 const rowAppearance = getThreadListV2RowAppearance(theme, sidebarPane, selected);
487 // differs by pane and (for the sidebar pane) selection: the sidebar row
488 // background becomes the selected fill or the drawer surface, while the
489 // flat "screen" pane rows always sit on the screen background.
490 const providerIconSurfaceColor = sidebarPane
491 ? selected
492 ? selectedBackgroundColor
493 : Platform.OS === "android"
494 ? screenColor
495 : drawerColor
496 : screenColor;
497485
498 const status = resolveThreadListV2Status(thread);486 const status = resolveThreadListV2Status(thread);
499 const statusLabel = STATUS_LABEL_BY_STATUS[status];487 const statusLabel = STATUS_LABEL_BY_STATUS[status];
...@@ -788,11 +776,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -788,11 +776,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
788 <Text776 <Text
789 className={cn(777 className={cn(
790 "flex-1 text-sm font-t3-medium",778 "flex-1 text-sm font-t3-medium",
791 selected779 selected ? selectedThreadRowColors.mutedForegroundClassName : "text-foreground-muted",
792 ? Platform.OS === "android"
793 ? "text-thread-selected-foreground-muted"
794 : "text-user-bubble-foreground-muted"
795 : "text-foreground-muted",
796 )}780 )}
797 numberOfLines={1}781 numberOfLines={1}
798 >782 >
...@@ -811,9 +795,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -811,9 +795,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
811 className={cn(795 className={cn(
812 "text-xs tabular-nums",796 "text-xs tabular-nums",
813 selected797 selected
814 ? Platform.OS === "android"798 ? selectedThreadRowColors.foregroundClassName
815 ? "text-thread-selected-foreground"
816 : "text-user-bubble-foreground"
817 : (statusLabel?.className ?? "text-foreground-tertiary"),799 : (statusLabel?.className ?? "text-foreground-tertiary"),
818 )}800 )}
819 >801 >
...@@ -823,11 +805,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -823,11 +805,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
823 <Text805 <Text
824 className={cn(806 className={cn(
825 "mt-1 text-base font-t3-medium",807 "mt-1 text-base font-t3-medium",
826 selected808 selected ? selectedThreadRowColors.foregroundClassName : "text-foreground",
827 ? Platform.OS === "android"
828 ? "text-thread-selected-foreground"
829 : "text-user-bubble-foreground"
830 : "text-foreground",
831 )}809 )}
832 numberOfLines={2}810 numberOfLines={2}
833 >811 >
...@@ -848,9 +826,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -848,9 +826,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
848 className={cn(826 className={cn(
849 "flex-1 text-xs",827 "flex-1 text-xs",
850 selected828 selected
851 ? Platform.OS === "android"829 ? selectedThreadRowColors.mutedForegroundClassName
852 ? "text-thread-selected-foreground-muted"
853 : "text-user-bubble-foreground-muted"
854 : "text-danger-foreground",830 : "text-danger-foreground",
855 )}831 )}
856 numberOfLines={1}832 numberOfLines={1}
...@@ -869,9 +845,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -869,9 +845,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
869 className={cn(845 className={cn(
870 "shrink text-xs",846 "shrink text-xs",
871 selected847 selected
872 ? Platform.OS === "android"848 ? selectedThreadRowColors.mutedForegroundClassName
873 ? "text-thread-selected-foreground-muted"
874 : "text-user-bubble-foreground-muted"
875 : "text-foreground-muted",849 : "text-foreground-muted",
876 )}850 )}
877 numberOfLines={1}851 numberOfLines={1}
...@@ -881,9 +855,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -881,9 +855,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
881 className={cn(855 className={cn(
882 "text-xs",856 "text-xs",
883 selected857 selected
884 ? Platform.OS === "android"858 ? selectedThreadRowColors.mutedForegroundClassName
885 ? "text-thread-selected-foreground-muted"
886 : "text-user-bubble-foreground-muted"
887 : "text-foreground-muted",859 : "text-foreground-muted",
888 )}860 )}
889 style={{ fontFamily: MONO_FONT }}861 style={{ fontFamily: MONO_FONT }}
...@@ -897,9 +869,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -897,9 +869,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
897 className={cn(869 className={cn(
898 "text-xs",870 "text-xs",
899 selected871 selected
900 ? Platform.OS === "android"872 ? selectedThreadRowColors.mutedForegroundClassName
901 ? "text-thread-selected-foreground-muted"
902 : "text-user-bubble-foreground-muted"
903 : "text-foreground-tertiary",873 : "text-foreground-tertiary",
904 )}874 )}
905 >875 >
...@@ -913,9 +883,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -913,9 +883,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
913 size={11}883 size={11}
914 tintColorClassName={884 tintColorClassName={
915 selected885 selected
916 ? Platform.OS === "android"886 ? selectedThreadRowColors.mutedIconTintClassName
917 ? "accent-thread-selected-foreground-muted"
918 : "accent-user-bubble-foreground-muted"
919 : "accent-foreground-tertiary"887 : "accent-foreground-tertiary"
920 }888 }
921 />889 />
...@@ -932,9 +900,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -932,9 +900,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
932 size={12}900 size={12}
933 tintColorClassName={901 tintColorClassName={
934 selected902 selected
935 ? Platform.OS === "android"903 ? selectedThreadRowColors.iconTintClassName
936 ? "accent-thread-selected-foreground"
937 : "accent-user-bubble-foreground"
938 : pr.state === null || pr.isDraft904 : pr.state === null || pr.isDraft
939 ? "accent-foreground-muted"905 ? "accent-foreground-muted"
940 : pr.state === "open"906 : pr.state === "open"
...@@ -949,11 +915,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -949,11 +915,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
949 accessibilityLabel={pr.accessibilityLabel}915 accessibilityLabel={pr.accessibilityLabel}
950 className={cn(916 className={cn(
951 "text-xs",917 "text-xs",
952 selected918 selected ? selectedThreadRowColors.foregroundClassName : pr.textClassName,
953 ? Platform.OS === "android"
954 ? "text-thread-selected-foreground"
955 : "text-user-bubble-foreground"
956 : pr.textClassName,
957 )}919 )}
958 style={{ fontFamily: MONO_FONT }}920 style={{ fontFamily: MONO_FONT }}
959 >921 >
...@@ -968,7 +930,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -968,7 +930,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
968 displayName={props.providerInstance.displayName}930 displayName={props.providerInstance.displayName}
969 accentColor={props.providerInstance.accentColor}931 accentColor={props.providerInstance.accentColor}
970 showBadge={props.providerInstance.showBadge}932 showBadge={props.providerInstance.showBadge}
971 surfaceColor={providerIconSurfaceColor}933 surfaceColor={rowAppearance.providerIconSurfaceColor}
972 />934 />
973 ) : null}935 ) : null}
974 </View>936 </View>
...@@ -979,14 +941,8 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -979,14 +941,8 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
979 variant === "card" ? (941 variant === "card" ? (
980 <RowPressable942 <RowPressable
981 key={`${thread.environmentId}:${thread.id}`}943 key={`${thread.environmentId}:${thread.id}`}
982 interactionClassName={944 interactionClassName={rowAppearance.interactionClassName}
983 selected && (sidebarPane || Platform.OS === "android")945 className={rowAppearance.className}
984 ? Platform.OS === "android"
985 ? "bg-thread-selected-foreground"
986 : "bg-user-bubble-foreground"
987 : "bg-primary"
988 }
989 className={sidebarPane || Platform.OS === "android" ? undefined : "bg-screen"}
990 accessibilityHint={swipeAccessibilityHint}946 accessibilityHint={swipeAccessibilityHint}
991 accessibilityLabel={947 accessibilityLabel={
992 props.hasQueuedMessages ? `${thread.title}, messages queued to send` : thread.title948 props.hasQueuedMessages ? `${thread.title}, messages queued to send` : thread.title
...@@ -997,19 +953,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -997,19 +953,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
997 close();953 close();
998 onSelectThread(thread);954 onSelectThread(thread);
999 }}955 }}
1000 style={956 style={rowAppearance.cardStyle}
1001 sidebarPane || Platform.OS === "android"
1002 ? {
1003 backgroundColor: selected
1004 ? selectedBackgroundColor
1005 : sidebarPane && Platform.OS !== "android"
1006 ? drawerColor
1007 : screenColor,
1008 borderRadius: Platform.OS === "android" ? 20 : SIDEBAR_V2_ROW_RADIUS,
1009 ...(sidebarPane ? { paddingHorizontal: 12, paddingVertical: 10 } : null),
1010 }
1011 : undefined
1012 }
1013 >957 >
1014 {sidebarPane ? (958 {sidebarPane ? (
1015 cardContent959 cardContent
...@@ -1019,10 +963,8 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -1019,10 +963,8 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
1019 separates rows. The opaque screen background stays so swipe963 separates rows. The opaque screen background stays so swipe
1020 actions reveal behind the row. */964 actions reveal behind the row. */
1021 <View>965 <View>
1022 <View className={Platform.OS === "android" ? "px-3 py-2.5" : "px-5 py-2.5"}>966 <View className={THREAD_LIST_V2_ROW_CONTENT_CLASS_NAME}>{cardContent}</View>
1023 {cardContent}967 {THREAD_LIST_V2_ROW_DIVIDERS && props.showTrailingDivider !== false ? (
1024 </View>
1025 {Platform.OS !== "android" && props.showTrailingDivider !== false ? (
1026 <View className="ml-5 h-px bg-border-subtle" />968 <View className="ml-5 h-px bg-border-subtle" />
1027 ) : null}969 ) : null}
1028 </View>970 </View>
...@@ -1031,36 +973,19 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -1031,36 +973,19 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
1031 ) : (973 ) : (
1032 <RowPressable974 <RowPressable
1033 key={`${thread.environmentId}:${thread.id}`}975 key={`${thread.environmentId}:${thread.id}`}
1034 interactionClassName={976 interactionClassName={rowAppearance.interactionClassName}
1035 selected && (sidebarPane || Platform.OS === "android")
1036 ? Platform.OS === "android"
1037 ? "bg-thread-selected-foreground"
1038 : "bg-user-bubble-foreground"
1039 : "bg-primary"
1040 }
1041 accessibilityHint={swipeAccessibilityHint}977 accessibilityHint={swipeAccessibilityHint}
1042 accessibilityLabel={978 accessibilityLabel={
1043 props.hasQueuedMessages ? `${thread.title}, messages queued to send` : thread.title979 props.hasQueuedMessages ? `${thread.title}, messages queued to send` : thread.title
1044 }980 }
1045 accessibilityRole="button"981 accessibilityRole="button"
1046 accessibilityState={{ selected }}982 accessibilityState={{ selected }}
1047 className={sidebarPane || Platform.OS === "android" ? undefined : "bg-screen"}983 className={rowAppearance.className}
1048 onPress={() => {984 onPress={() => {
1049 close();985 close();
1050 onSelectThread(thread);986 onSelectThread(thread);
1051 }}987 }}
1052 style={988 style={rowAppearance.style}
1053 sidebarPane || Platform.OS === "android"
1054 ? {
1055 backgroundColor: selected
1056 ? selectedBackgroundColor
1057 : sidebarPane && Platform.OS !== "android"
1058 ? drawerColor
1059 : screenColor,
1060 borderRadius: Platform.OS === "android" ? 20 : SIDEBAR_V2_ROW_RADIUS,
1061 }
1062 : undefined
1063 }
1064 >989 >
1065 {/* Settled history recedes: dimmed favicon + muted title. */}990 {/* Settled history recedes: dimmed favicon + muted title. */}
1066 <View991 <View
...@@ -1084,11 +1009,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -1084,11 +1009,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
1084 <Text1009 <Text
1085 className={cn(1010 className={cn(
1086 "text-base",1011 "text-base",
1087 selected1012 selected ? selectedThreadRowColors.foregroundClassName : "text-foreground-muted",
1088 ? Platform.OS === "android"
1089 ? "text-thread-selected-foreground"
1090 : "text-user-bubble-foreground"
1091 : "text-foreground-muted",
1092 )}1013 )}
1093 numberOfLines={1}1014 numberOfLines={1}
1094 >1015 >
...@@ -1107,9 +1028,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -1107,9 +1028,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
1107 className={cn(1028 className={cn(
1108 "text-sm tabular-nums",1029 "text-sm tabular-nums",
1109 selected1030 selected
1110 ? Platform.OS === "android"1031 ? selectedThreadRowColors.mutedForegroundClassName
1111 ? "text-thread-selected-foreground-muted"
1112 : "text-user-bubble-foreground-muted"
1113 : snoozedRow1032 : snoozedRow
1114 ? "text-foreground-secondary"1033 ? "text-foreground-secondary"
1115 : "text-foreground-tertiary",1034 : "text-foreground-tertiary",
...@@ -1131,15 +1050,9 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -1131,15 +1050,9 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
1131 )}1050 )}
1132 <ThreadSwipeable1051 <ThreadSwipeable
1133 threadKey={`${thread.environmentId}:${thread.id}`}1052 threadKey={`${thread.environmentId}:${thread.id}`}
1134 backgroundColor={sidebarPane && Platform.OS !== "android" ? drawerColor : screenColor}1053 backgroundColor={rowAppearance.swipeBackgroundColor}
1135 compactActions={variant === "slim"}1054 compactActions={variant === "slim"}
1136 containerStyle={1055 containerStyle={rowAppearance.swipeContainerStyle}
1137 Platform.OS === "android"
1138 ? { borderRadius: 20, overflow: "hidden", marginHorizontal: 8, marginVertical: 2 }
1139 : sidebarPane
1140 ? { borderRadius: SIDEBAR_V2_ROW_RADIUS, overflow: "hidden" }
1141 : undefined
1142 }
1143 enableTrackpadSwipe1056 enableTrackpadSwipe
1144 // Full swipe commits the advertised lifecycle action (Settle /1057 // Full swipe commits the advertised lifecycle action (Settle /
1145 // Un-settle), never the secondary snooze action.1058 // Un-settle), never the secondary snooze action.
...@@ -1161,10 +1074,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {...@@ -1161,10 +1074,7 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
1161 ? [1074 ? [
1162 {1075 {
1163 id: "new-thread-on-branch",1076 id: "new-thread-on-branch",
1164 title:1077 title: getThreadListV2NewBranchMenuTitle(thread.branch),
1165 Platform.OS === "ios"
1166 ? "New thread on branch"
1167 : `New thread on ${thread.branch}`,
1168 image: "square.and.pencil",1078 image: "square.and.pencil",
1169 },1079 },
1170 ]1080 ]
apps/mobile/src/features/threads/thread-list-v2-row-appearance.android.ts created+46
...@@ -0,0 +1,46 @@
1import type { ViewStyle } from "react-native";
2import type { MobileThemeVariables } from "../../lib/mobileTheme";
3
4export const THREAD_LIST_V2_MONO_FONT = "monospace";
5export const THREAD_LIST_V2_ROW_CONTENT_CLASS_NAME = "px-3 py-2.5";
6export const THREAD_LIST_V2_ROW_DIVIDERS = false;
7
8export const selectedThreadRowColors = {
9 foregroundClassName: "text-thread-selected-foreground",
10 mutedForegroundClassName: "text-thread-selected-foreground-muted",
11 iconTintClassName: "accent-thread-selected-foreground",
12 mutedIconTintClassName: "accent-thread-selected-foreground-muted",
13};
14
15export function getThreadListV2NewBranchMenuTitle(branch: string) {
16 return `New thread on ${branch}`;
17}
18
19export function getThreadListV2RowAppearance(
20 theme: MobileThemeVariables,
21 sidebarPane: boolean,
22 selected: boolean,
23) {
24 const selectedBackgroundColor = theme["--color-thread-selected"];
25 const style: ViewStyle = {
26 backgroundColor: selected ? selectedBackgroundColor : theme["--color-screen"],
27 borderRadius: 20,
28 };
29 const swipeContainerStyle: ViewStyle = {
30 borderRadius: 20,
31 overflow: "hidden",
32 marginHorizontal: 8,
33 marginVertical: 2,
34 };
35
36 return {
37 className: undefined,
38 interactionClassName: selected ? "bg-thread-selected-foreground" : "bg-primary",
39 style,
40 cardStyle: sidebarPane ? { ...style, paddingHorizontal: 12, paddingVertical: 10 } : style,
41 swipeContainerStyle,
42 swipeBackgroundColor: theme["--color-screen"],
43 providerIconSurfaceColor:
44 sidebarPane && selected ? selectedBackgroundColor : theme["--color-screen"],
45 };
46}
apps/mobile/src/features/threads/thread-list-v2-row-appearance.ts created+49
...@@ -0,0 +1,49 @@
1import type { ViewStyle } from "react-native";
2import type { MobileThemeVariables } from "../../lib/mobileTheme";
3
4export const THREAD_LIST_V2_MONO_FONT = "Menlo";
5export const THREAD_LIST_V2_ROW_CONTENT_CLASS_NAME = "px-5 py-2.5";
6export const THREAD_LIST_V2_ROW_DIVIDERS = true;
7
8export const selectedThreadRowColors = {
9 foregroundClassName: "text-user-bubble-foreground",
10 mutedForegroundClassName: "text-user-bubble-foreground-muted",
11 iconTintClassName: "accent-user-bubble-foreground",
12 mutedIconTintClassName: "accent-user-bubble-foreground-muted",
13};
14
15export function getThreadListV2NewBranchMenuTitle(_branch: string) {
16 return "New thread on branch";
17}
18
19export function getThreadListV2RowAppearance(
20 theme: MobileThemeVariables,
21 sidebarPane: boolean,
22 selected: boolean,
23) {
24 const selectedBackgroundColor = theme["--color-user-bubble"];
25 const style: ViewStyle | undefined = sidebarPane
26 ? {
27 backgroundColor: selected ? selectedBackgroundColor : theme["--color-drawer"],
28 borderRadius: 12,
29 }
30 : undefined;
31 const swipeContainerStyle: ViewStyle | undefined = sidebarPane
32 ? { borderRadius: 12, overflow: "hidden" }
33 : undefined;
34
35 return {
36 className: sidebarPane ? undefined : "bg-screen",
37 interactionClassName: selected && sidebarPane ? "bg-user-bubble-foreground" : "bg-primary",
38 style,
39 cardStyle: sidebarPane ? { ...style, paddingHorizontal: 12, paddingVertical: 10 } : undefined,
40 swipeContainerStyle,
41 swipeBackgroundColor: theme[sidebarPane ? "--color-drawer" : "--color-screen"],
42 // Provider badges blend into the surface beneath them.
43 providerIconSurfaceColor: sidebarPane
44 ? selected
45 ? selectedBackgroundColor
46 : theme["--color-drawer"]
47 : theme["--color-screen"],
48 };
49}