authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-22 19:35:56-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-22 19:35:56-07:00
logdb898a30629a9d87ad0a9bc4bde1b13e672fa2d3
treed43ed7f863dbe63d7bfaa5f32059fcec0855790a
parent21be723addfc01c797acd0b7a1e6547c9be6bff0
signature Signed by PGP key B5690EEEBB952194

refactor(mobile): remaining className platform ternaries become class variants (#13188)

Co-authored-by: julusy <julius@t3.codes>

9 files changed, 18 insertions(+), 44 deletions(-)

apps/mobile/src/features/connection/ConnectionsNewRouteScreen.tsx+1-1
...@@ -264,7 +264,7 @@ export function ConnectionsNewRouteScreen({...@@ -264,7 +264,7 @@ export function ConnectionsNewRouteScreen({
264264
265 {pairingConnectionError ? <ErrorBanner message={pairingConnectionError} /> : null}265 {pairingConnectionError ? <ErrorBanner message={pairingConnectionError} /> : null}
266266
267 <View className={Platform.OS === "android" ? "flex-row justify-end" : undefined}>267 <View className="android:flex-row android:justify-end">
268 <ConnectionSheetButton268 <ConnectionSheetButton
269 icon="plus"269 icon="plus"
270 label={isSubmitting ? "Pairing..." : "Add environment"}270 label={isSubmitting ? "Pairing..." : "Add environment"}
apps/mobile/src/features/files/thread-file-navigator-pane.tsx+1-1
...@@ -147,7 +147,7 @@ export function ThreadFileNavigatorPane(props: {...@@ -147,7 +147,7 @@ export function ThreadFileNavigatorPane(props: {
147 }147 }
148 >148 >
149 <View149 <View
150 className={Platform.OS === "android" ? "bg-header" : "border-b border-border"}150 className="ios:border-b ios:border-border android:bg-header"
151 style={{ paddingTop: Platform.OS === "android" ? 0 : props.headerInset }}151 style={{ paddingTop: Platform.OS === "android" ? 0 : props.headerInset }}
152 >152 >
153 {Platform.OS === "android" ? (153 {Platform.OS === "android" ? (
apps/mobile/src/features/home/HomeScreen.tsx+3-3
...@@ -1106,7 +1106,7 @@ export function HomeScreen(props: HomeScreenProps) {...@@ -1106,7 +1106,7 @@ export function HomeScreen(props: HomeScreenProps) {
11061106
1107 if (!hasAnyThreads) {1107 if (!hasAnyThreads) {
1108 return (1108 return (
1109 <View className={Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 bg-screen"}>1109 <View className="flex-1 bg-screen android:bg-header">
1110 <View1110 <View
1111 className={cn(1111 className={cn(
1112 "flex-1 items-center justify-center bg-screen px-8",1112 "flex-1 items-center justify-center bg-screen px-8",
...@@ -1217,7 +1217,7 @@ export function HomeScreen(props: HomeScreenProps) {...@@ -1217,7 +1217,7 @@ export function HomeScreen(props: HomeScreenProps) {
12171217
1218 if (threadListV2Enabled) {1218 if (threadListV2Enabled) {
1219 return (1219 return (
1220 <View className={Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 bg-screen"}>1220 <View className="flex-1 bg-screen android:bg-header">
1221 <View1221 <View
1222 className={1222 className={
1223 Platform.OS === "android"1223 Platform.OS === "android"
...@@ -1263,7 +1263,7 @@ export function HomeScreen(props: HomeScreenProps) {...@@ -1263,7 +1263,7 @@ export function HomeScreen(props: HomeScreenProps) {
1263 }1263 }
12641264
1265 return (1265 return (
1266 <View className={Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 bg-screen"}>1266 <View className="flex-1 bg-screen android:bg-header">
1267 <View1267 <View
1268 className={1268 className={
1269 Platform.OS === "android"1269 Platform.OS === "android"
apps/mobile/src/features/review/ReviewSheet.tsx+1-1
...@@ -735,7 +735,7 @@ export function ReviewSheet(props: ReviewSheetProps) {...@@ -735,7 +735,7 @@ export function ReviewSheet(props: ReviewSheetProps) {
735 />735 />
736736
737 <MaterialScreenContent>737 <MaterialScreenContent>
738 <View className={Platform.OS === "android" ? "flex-1 bg-sheet-solid" : "flex-1 bg-sheet"}>738 <View className="flex-1 bg-sheet android:bg-sheet-solid">
739 {showConnectionNotice ? (739 {showConnectionNotice ? (
740 <View className="flex-1" style={{ paddingTop: topContentInset }}>740 <View className="flex-1" style={{ paddingTop: topContentInset }}>
741 <EnvironmentConnectionNotice741 <EnvironmentConnectionNotice
apps/mobile/src/features/settings/SettingsThreadsRouteScreen.tsx+4-17
...@@ -3,13 +3,12 @@ import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollVie...@@ -3,13 +3,12 @@ import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollVie
3import { useAtomSet, useAtomValue } from "@effect/atom-react";3import { useAtomSet, useAtomValue } from "@effect/atom-react";
4import { AsyncResult } from "effect/unstable/reactivity";4import { AsyncResult } from "effect/unstable/reactivity";
5import { useRef, useState } from "react";5import { useRef, useState } from "react";
6import { Platform, Pressable, View } from "react-native";6import { Pressable, View } from "react-native";
7import { useSafeAreaInsets } from "react-native-safe-area-context";7import { useSafeAreaInsets } from "react-native-safe-area-context";
88
9import { DEFAULT_SERVER_SETTINGS } from "@t3tools/contracts";9import { DEFAULT_SERVER_SETTINGS } from "@t3tools/contracts";
10import { supportsSharedSettingsSync } from "@t3tools/client-runtime/state/shared-settings";10import { supportsSharedSettingsSync } from "@t3tools/client-runtime/state/shared-settings";
11import { AppText as Text } from "../../components/AppText";11import { AppText as Text } from "../../components/AppText";
12import { cn } from "../../lib/cn";
13import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";12import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
14import { serverEnvironment } from "../../state/server";13import { serverEnvironment } from "../../state/server";
15import { useAtomCommand } from "../../state/use-atom-command";14import { useAtomCommand } from "../../state/use-atom-command";
...@@ -182,21 +181,9 @@ function AutoSettleSettingsRows() {...@@ -182,21 +181,9 @@ function AutoSettleSettingsRows() {
182 }181 }
183 />182 />
184 {afterDays !== null ? (183 {afterDays !== null ? (
185 <View184 <View className="flex-row items-center gap-4 px-4 py-4 android:min-h-14 android:py-3">
186 className={cn(185 <View className="w-[22px] android:w-6" />
187 "flex-row items-center gap-4 px-4",186 <Text className="flex-1 text-foreground text-lg android:text-base">Inactive days</Text>
188 Platform.OS === "android" ? "min-h-14 py-3" : "py-4",
189 )}
190 >
191 <View style={{ width: Platform.OS === "android" ? 24 : 22 }} />
192 <Text
193 className={cn(
194 "flex-1 text-foreground",
195 Platform.OS === "android" ? "text-base" : "text-lg",
196 )}
197 >
198 Inactive days
199 </Text>
200 <AutoSettleDaysField187 <AutoSettleDaysField
201 value={afterDays}188 value={afterDays}
202 disabled={disabled}189 disabled={disabled}
apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx+2-2
...@@ -402,7 +402,7 @@ export function NewTaskBranchPickerRouteScreen() {...@@ -402,7 +402,7 @@ export function NewTaskBranchPickerRouteScreen() {
402 const branchContent =402 const branchContent =
403 flow.filteredBranches.length === 0 ? (403 flow.filteredBranches.length === 0 ? (
404 <ScrollView404 <ScrollView
405 className={Platform.OS === "android" ? "flex-1 bg-sheet-solid" : "flex-1 bg-sheet"}405 className="flex-1 bg-sheet android:bg-sheet-solid"
406 contentInsetAdjustmentBehavior="automatic"406 contentInsetAdjustmentBehavior="automatic"
407 contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, paddingTop: 16 }}407 contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, paddingTop: 16 }}
408 scrollEnabled={false}408 scrollEnabled={false}
...@@ -443,7 +443,7 @@ export function NewTaskBranchPickerRouteScreen() {...@@ -443,7 +443,7 @@ export function NewTaskBranchPickerRouteScreen() {
443 alwaysBounceVertical={false}443 alwaysBounceVertical={false}
444 automaticallyAdjustsScrollIndicatorInsets444 automaticallyAdjustsScrollIndicatorInsets
445 automaticallyAdjustKeyboardInsets={Platform.OS === "ios"}445 automaticallyAdjustKeyboardInsets={Platform.OS === "ios"}
446 className={Platform.OS === "android" ? "flex-1 bg-sheet-solid" : "flex-1 bg-sheet"}446 className="flex-1 bg-sheet android:bg-sheet-solid"
447 contentInsetAdjustmentBehavior="automatic"447 contentInsetAdjustmentBehavior="automatic"
448 contentContainerStyle={branchListContentStyle}448 contentContainerStyle={branchListContentStyle}
449 data={flow.filteredBranches}449 data={flow.filteredBranches}
apps/mobile/src/features/threads/ThreadRouteScreen.tsx+1-12
...@@ -947,18 +947,7 @@ function ThreadRouteContent(...@@ -947,18 +947,7 @@ function ThreadRouteContent(
947 <>947 <>
948 <GitActionProgressOverlay progress={gitActionProgress} onDismiss={dismissGitActionResult} />948 <GitActionProgressOverlay progress={gitActionProgress} onDismiss={dismissGitActionResult} />
949949
950 <View950 <View className="flex-1 bg-screen android:overflow-hidden android:rounded-t-[28px] android:bg-thread-canvas">
951 className={Platform.OS === "android" ? "flex-1 bg-thread-canvas" : "flex-1 bg-screen"}
952 style={
953 Platform.OS === "android"
954 ? {
955 borderTopLeftRadius: 28,
956 borderTopRightRadius: 28,
957 overflow: "hidden",
958 }
959 : undefined
960 }
961 >
962 <ThreadDetailScreen951 <ThreadDetailScreen
963 selectedThread={selectedThreadWithDraftSettings ?? selectedThread}952 selectedThread={selectedThreadWithDraftSettings ?? selectedThread}
964 contentPresentation={contentPresentation}953 contentPresentation={contentPresentation}
apps/mobile/src/features/threads/ThreadSettingsSheet.tsx+2-4
...@@ -158,9 +158,8 @@ function ProviderHeader(props: {...@@ -158,9 +158,8 @@ function ProviderHeader(props: {
158 accessibilityLabel={`${props.label}, ${props.modelCount} models`}158 accessibilityLabel={`${props.label}, ${props.modelCount} models`}
159 accessibilityRole="button"159 accessibilityRole="button"
160 accessibilityState={{ expanded: !props.collapsed }}160 accessibilityState={{ expanded: !props.collapsed }}
161 className="mx-4 mt-1 min-h-11 flex-row items-center gap-2 rounded-xl px-1 pt-2 active:opacity-60"161 className="mx-4 mt-1 min-h-11 flex-row items-center gap-2 rounded-xl px-1 pt-2 active:opacity-60 android:min-h-12"
162 onPress={props.onToggle}162 onPress={props.onToggle}
163 style={Platform.OS === "android" ? { minHeight: 48 } : undefined}
164 >163 >
165 {content}164 {content}
166 </Pressable>165 </Pressable>
...@@ -185,9 +184,8 @@ function DisclosureRow(props: {...@@ -185,9 +184,8 @@ function DisclosureRow(props: {
185 <Pressable184 <Pressable
186 accessibilityRole="button"185 accessibilityRole="button"
187 onPress={props.onPress}186 onPress={props.onPress}
188 style={Platform.OS === "android" ? { minHeight: 56 } : undefined}
189 className={cn(187 className={cn(
190 "min-h-11 flex-row items-center gap-2 bg-card px-4 py-2 active:bg-subtle",188 "min-h-11 flex-row items-center gap-2 bg-card px-4 py-2 active:bg-subtle android:min-h-14",
191 !props.isLast && "border-b border-border-subtle",189 !props.isLast && "border-b border-border-subtle",
192 )}190 )}
193 >191 >
apps/mobile/src/features/usage/UsageRouteScreen.tsx+3-3
...@@ -267,20 +267,20 @@ export function UsageRouteScreen() {...@@ -267,20 +267,20 @@ export function UsageRouteScreen() {
267 <>267 <>
268 {/* Period and metric together: neither applies to Limits, and268 {/* Period and metric together: neither applies to Limits, and
269 both change every number below, so they share one bar. */}269 both change every number below, so they share one bar. */}
270 <View className={cn("gap-3", Platform.OS !== "android" && "flex-row items-center")}>270 <View className="gap-3 ios:flex-row ios:items-center">
271 <SegmentedControl271 <SegmentedControl
272 options={WINDOW_OPTIONS}272 options={WINDOW_OPTIONS}
273 selected={windowDays}273 selected={windowDays}
274 onSelect={selectWindow}274 onSelect={selectWindow}
275 size="compact"275 size="compact"
276 className={Platform.OS === "android" ? "w-full" : "flex-1"}276 className="w-full ios:flex-1"
277 />277 />
278 <SegmentedControl278 <SegmentedControl
279 options={METRIC_OPTIONS}279 options={METRIC_OPTIONS}
280 selected={metric}280 selected={metric}
281 onSelect={setMetric}281 onSelect={setMetric}
282 size="compact"282 size="compact"
283 className={Platform.OS === "android" ? "w-full" : "w-36"}283 className="w-full ios:w-36"
284 />284 />
285 </View>285 </View>
286 {merged.duplicateSources.length > 0 ? (286 {merged.duplicateSources.length > 0 ? (