From db898a30629a9d87ad0a9bc4bde1b13e672fa2d3 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 19:35:56 -0700
Subject: [PATCH] refactor(mobile): remaining className platform ternaries
 become class variants (#13188)

Co-authored-by: julusy <julius@t3.codes>
---
 .../connection/ConnectionsNewRouteScreen.tsx  |  2 +-
 .../files/thread-file-navigator-pane.tsx      |  2 +-
 apps/mobile/src/features/home/HomeScreen.tsx  |  6 +++---
 .../src/features/review/ReviewSheet.tsx       |  2 +-
 .../settings/SettingsThreadsRouteScreen.tsx   | 21 ++++---------------
 .../threads/NewTaskContextPickerScreens.tsx   |  4 ++--
 .../features/threads/ThreadRouteScreen.tsx    | 13 +-----------
 .../features/threads/ThreadSettingsSheet.tsx  |  6 ++----
 .../src/features/usage/UsageRouteScreen.tsx   |  6 +++---
 9 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/apps/mobile/src/features/connection/ConnectionsNewRouteScreen.tsx b/apps/mobile/src/features/connection/ConnectionsNewRouteScreen.tsx
index 5c58dfc1eaf9edc0275401eb71a7036da9f6e94f..bfcaf4013ab175ade29b0de3d9e1e4175bb631ec 100644
--- a/apps/mobile/src/features/connection/ConnectionsNewRouteScreen.tsx
+++ b/apps/mobile/src/features/connection/ConnectionsNewRouteScreen.tsx
@@ -264,7 +264,7 @@ export function ConnectionsNewRouteScreen({
 
               {pairingConnectionError ? <ErrorBanner message={pairingConnectionError} /> : null}
 
-              <View className={Platform.OS === "android" ? "flex-row justify-end" : undefined}>
+              <View className="android:flex-row android:justify-end">
                 <ConnectionSheetButton
                   icon="plus"
                   label={isSubmitting ? "Pairing..." : "Add environment"}
diff --git a/apps/mobile/src/features/files/thread-file-navigator-pane.tsx b/apps/mobile/src/features/files/thread-file-navigator-pane.tsx
index c3c906e3d515411dfafd61b72634d36ace9d3566..dfe0c05743c2e571b340ac98d80e8f7c9255e058 100644
--- a/apps/mobile/src/features/files/thread-file-navigator-pane.tsx
+++ b/apps/mobile/src/features/files/thread-file-navigator-pane.tsx
@@ -147,7 +147,7 @@ export function ThreadFileNavigatorPane(props: {
       }
     >
       <View
-        className={Platform.OS === "android" ? "bg-header" : "border-b border-border"}
+        className="ios:border-b ios:border-border android:bg-header"
         style={{ paddingTop: Platform.OS === "android" ? 0 : props.headerInset }}
       >
         {Platform.OS === "android" ? (
diff --git a/apps/mobile/src/features/home/HomeScreen.tsx b/apps/mobile/src/features/home/HomeScreen.tsx
index a01f5fbe606e069ffbcf09ab647ddcba67e8fa75..946672ca711746c919b923a053841b998e206a4b 100644
--- a/apps/mobile/src/features/home/HomeScreen.tsx
+++ b/apps/mobile/src/features/home/HomeScreen.tsx
@@ -1106,7 +1106,7 @@ export function HomeScreen(props: HomeScreenProps) {
 
   if (!hasAnyThreads) {
     return (
-      <View className={Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 bg-screen"}>
+      <View className="flex-1 bg-screen android:bg-header">
         <View
           className={cn(
             "flex-1 items-center justify-center bg-screen px-8",
@@ -1217,7 +1217,7 @@ export function HomeScreen(props: HomeScreenProps) {
 
   if (threadListV2Enabled) {
     return (
-      <View className={Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 bg-screen"}>
+      <View className="flex-1 bg-screen android:bg-header">
         <View
           className={
             Platform.OS === "android"
@@ -1263,7 +1263,7 @@ export function HomeScreen(props: HomeScreenProps) {
   }
 
   return (
-    <View className={Platform.OS === "android" ? "flex-1 bg-header" : "flex-1 bg-screen"}>
+    <View className="flex-1 bg-screen android:bg-header">
       <View
         className={
           Platform.OS === "android"
diff --git a/apps/mobile/src/features/review/ReviewSheet.tsx b/apps/mobile/src/features/review/ReviewSheet.tsx
index 2fac5376e5b1fc4f50d095d4363a20fa7e3e575a..08888dd469d23aaa2d7fa5faf82ed822a2b80c9f 100644
--- a/apps/mobile/src/features/review/ReviewSheet.tsx
+++ b/apps/mobile/src/features/review/ReviewSheet.tsx
@@ -735,7 +735,7 @@ export function ReviewSheet(props: ReviewSheetProps) {
       />
 
       <MaterialScreenContent>
-        <View className={Platform.OS === "android" ? "flex-1 bg-sheet-solid" : "flex-1 bg-sheet"}>
+        <View className="flex-1 bg-sheet android:bg-sheet-solid">
           {showConnectionNotice ? (
             <View className="flex-1" style={{ paddingTop: topContentInset }}>
               <EnvironmentConnectionNotice
diff --git a/apps/mobile/src/features/settings/SettingsThreadsRouteScreen.tsx b/apps/mobile/src/features/settings/SettingsThreadsRouteScreen.tsx
index bd8ec325215561d19867403b39e37be99c767bf3..9a98481d5be44763f496b8008f33bd1abe7d71ae 100644
--- a/apps/mobile/src/features/settings/SettingsThreadsRouteScreen.tsx
+++ b/apps/mobile/src/features/settings/SettingsThreadsRouteScreen.tsx
@@ -3,13 +3,12 @@ import { ScreenScrollView as ScrollView } from "../../components/ScreenScrollVie
 import { useAtomSet, useAtomValue } from "@effect/atom-react";
 import { AsyncResult } from "effect/unstable/reactivity";
 import { useRef, useState } from "react";
-import { Platform, Pressable, View } from "react-native";
+import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { DEFAULT_SERVER_SETTINGS } from "@t3tools/contracts";
 import { supportsSharedSettingsSync } from "@t3tools/client-runtime/state/shared-settings";
 import { AppText as Text } from "../../components/AppText";
-import { cn } from "../../lib/cn";
 import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
 import { serverEnvironment } from "../../state/server";
 import { useAtomCommand } from "../../state/use-atom-command";
@@ -182,21 +181,9 @@ function AutoSettleSettingsRows() {
           }
         />
         {afterDays !== null ? (
-          <View
-            className={cn(
-              "flex-row items-center gap-4 px-4",
-              Platform.OS === "android" ? "min-h-14 py-3" : "py-4",
-            )}
-          >
-            <View style={{ width: Platform.OS === "android" ? 24 : 22 }} />
-            <Text
-              className={cn(
-                "flex-1 text-foreground",
-                Platform.OS === "android" ? "text-base" : "text-lg",
-              )}
-            >
-              Inactive days
-            </Text>
+          <View className="flex-row items-center gap-4 px-4 py-4 android:min-h-14 android:py-3">
+            <View className="w-[22px] android:w-6" />
+            <Text className="flex-1 text-foreground text-lg android:text-base">Inactive days</Text>
             <AutoSettleDaysField
               value={afterDays}
               disabled={disabled}
diff --git a/apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx b/apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx
index 7edb07f4e3d84c61a6c6455eb77b7d97513b931a..b30175b5b0dee73b0b7e28dc1dd6081203f80ab5 100644
--- a/apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx
+++ b/apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx
@@ -402,7 +402,7 @@ export function NewTaskBranchPickerRouteScreen() {
   const branchContent =
     flow.filteredBranches.length === 0 ? (
       <ScrollView
-        className={Platform.OS === "android" ? "flex-1 bg-sheet-solid" : "flex-1 bg-sheet"}
+        className="flex-1 bg-sheet android:bg-sheet-solid"
         contentInsetAdjustmentBehavior="automatic"
         contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, paddingTop: 16 }}
         scrollEnabled={false}
@@ -443,7 +443,7 @@ export function NewTaskBranchPickerRouteScreen() {
         alwaysBounceVertical={false}
         automaticallyAdjustsScrollIndicatorInsets
         automaticallyAdjustKeyboardInsets={Platform.OS === "ios"}
-        className={Platform.OS === "android" ? "flex-1 bg-sheet-solid" : "flex-1 bg-sheet"}
+        className="flex-1 bg-sheet android:bg-sheet-solid"
         contentInsetAdjustmentBehavior="automatic"
         contentContainerStyle={branchListContentStyle}
         data={flow.filteredBranches}
diff --git a/apps/mobile/src/features/threads/ThreadRouteScreen.tsx b/apps/mobile/src/features/threads/ThreadRouteScreen.tsx
index e5bfc1590cf002cc1748b08e9aad61ea2b9ed4c4..3cc9852ea8a3dcab584c3924e601c3a7c3eb57f1 100644
--- a/apps/mobile/src/features/threads/ThreadRouteScreen.tsx
+++ b/apps/mobile/src/features/threads/ThreadRouteScreen.tsx
@@ -947,18 +947,7 @@ function ThreadRouteContent(
     <>
       <GitActionProgressOverlay progress={gitActionProgress} onDismiss={dismissGitActionResult} />
 
-      <View
-        className={Platform.OS === "android" ? "flex-1 bg-thread-canvas" : "flex-1 bg-screen"}
-        style={
-          Platform.OS === "android"
-            ? {
-                borderTopLeftRadius: 28,
-                borderTopRightRadius: 28,
-                overflow: "hidden",
-              }
-            : undefined
-        }
-      >
+      <View className="flex-1 bg-screen android:overflow-hidden android:rounded-t-[28px] android:bg-thread-canvas">
         <ThreadDetailScreen
           selectedThread={selectedThreadWithDraftSettings ?? selectedThread}
           contentPresentation={contentPresentation}
diff --git a/apps/mobile/src/features/threads/ThreadSettingsSheet.tsx b/apps/mobile/src/features/threads/ThreadSettingsSheet.tsx
index dc989a4de2d98c7d7966253cafba371995ff8291..97282f6948c4efe1cc9a83c641b3252e936b31b5 100644
--- a/apps/mobile/src/features/threads/ThreadSettingsSheet.tsx
+++ b/apps/mobile/src/features/threads/ThreadSettingsSheet.tsx
@@ -158,9 +158,8 @@ function ProviderHeader(props: {
         accessibilityLabel={`${props.label}, ${props.modelCount} models`}
         accessibilityRole="button"
         accessibilityState={{ expanded: !props.collapsed }}
-        className="mx-4 mt-1 min-h-11 flex-row items-center gap-2 rounded-xl px-1 pt-2 active:opacity-60"
+        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"
         onPress={props.onToggle}
-        style={Platform.OS === "android" ? { minHeight: 48 } : undefined}
       >
         {content}
       </Pressable>
@@ -185,9 +184,8 @@ function DisclosureRow(props: {
     <Pressable
       accessibilityRole="button"
       onPress={props.onPress}
-      style={Platform.OS === "android" ? { minHeight: 56 } : undefined}
       className={cn(
-        "min-h-11 flex-row items-center gap-2 bg-card px-4 py-2 active:bg-subtle",
+        "min-h-11 flex-row items-center gap-2 bg-card px-4 py-2 active:bg-subtle android:min-h-14",
         !props.isLast && "border-b border-border-subtle",
       )}
     >
diff --git a/apps/mobile/src/features/usage/UsageRouteScreen.tsx b/apps/mobile/src/features/usage/UsageRouteScreen.tsx
index d1bec8cbc140e74244c17b5da3defd994e452e19..7494ac9b34bdb177d03f8e9edfe3847d18bed1b5 100644
--- a/apps/mobile/src/features/usage/UsageRouteScreen.tsx
+++ b/apps/mobile/src/features/usage/UsageRouteScreen.tsx
@@ -267,20 +267,20 @@ export function UsageRouteScreen() {
             <>
               {/* Period and metric together: neither applies to Limits, and
                 both change every number below, so they share one bar. */}
-              <View className={cn("gap-3", Platform.OS !== "android" && "flex-row items-center")}>
+              <View className="gap-3 ios:flex-row ios:items-center">
                 <SegmentedControl
                   options={WINDOW_OPTIONS}
                   selected={windowDays}
                   onSelect={selectWindow}
                   size="compact"
-                  className={Platform.OS === "android" ? "w-full" : "flex-1"}
+                  className="w-full ios:flex-1"
                 />
                 <SegmentedControl
                   options={METRIC_OPTIONS}
                   selected={metric}
                   onSelect={setMetric}
                   size="compact"
-                  className={Platform.OS === "android" ? "w-full" : "w-36"}
+                  className="w-full ios:w-36"
                 />
               </View>
               {merged.duplicateSources.length > 0 ? (
-- 
2.54.0