Commit 85f2479ffe5c9d8ffa91f1bfae5234df4061292f | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-09-02 20:02:29-07:00
committer	GitHub <noreply@github.com> 2026-09-03 03:02:29+00:00
log	85f2479ffe5c9d8ffa91f1bfae5234df4061292f
tree	bbedb0a2a3a5410e418d8c681eaa879abf61caa0
parent	b9b1b8fdddf9d006fdb820af770063e1f968345b
signature	Signed by PGP key B5690EEEBB952194

refactor(mobile): style plain views with Uniwind classes instead of the theme bridge (#9322)

Co-authored-by: Julius Marminge <julius@mac.lan>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

5 files changed, 17 insertions(+), 64 deletions(-)

apps
- mobile
  - src
    features
    settings
    appearance
    components
    FontSizeSliderRow.tsx
    threads
    NewTaskContextPickerScreens.tsx
    thread-list-items.tsx
    thread-list-v2-items.tsx
vite.config.ts

apps/mobile/src/features/settings/appearance/components/FontSizeSliderRow.tsx+4-9

 @@ -12,7 +12,6 @@ import Animated, {
 import type { ComponentProps } from "react";
 import { AppText as Text } from "../../../../components/AppText";
-import { useUniwindTheme } from "../../../../lib/useUniwindTheme";
 type SymbolName = ComponentProps<typeof SymbolView>["name"];
 @@ -36,10 +35,6 @@ export function FontSizeSliderRow(props: {
   readonly value: number;
   readonly onChange: (value: number) => void;
 }) {
-  const theme = useUniwindTheme();
-  const trackColor = theme["--color-secondary-border"];
-  const fillColor = theme["--color-primary"];
   const latest = useRef(props);
   latest.current = props;
 @@ -172,12 +167,12 @@ export function FontSizeSliderRow(props: {
             }}
           >
             <View
-              className="w-full rounded-full"
+              className="w-full rounded-full bg-secondary-border"
-              style={{ backgroundColor: trackColor, height: TRACK_HEIGHT }}
+              style={{ height: TRACK_HEIGHT }}
             >
               <Animated.View
-                className="absolute inset-y-0 left-0 rounded-full"
+                className="absolute inset-y-0 left-0 rounded-full bg-primary"
-                style={[{ backgroundColor: fillColor }, fillStyle]}
+                style={fillStyle}
               />
             </View>
             <Animated.View

apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx+1-6

 @@ -23,8 +23,6 @@ import { SymbolView } from "../../components/AppSymbol";
 import { AppText as Text } from "../../components/AppText";
 import { ThemedSwitch } from "../../components/ThemedSwitch";
 import { cn } from "../../lib/cn";
-import { useFontFamily } from "../../lib/useFontFamily";
-import { useUniwindTheme } from "../../lib/useUniwindTheme";
 import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { vcsEnvironment } from "../../state/vcs";
 @@ -193,8 +191,6 @@ export function NewTaskBranchPickerRouteScreen() {
   const flow = useNewTaskFlow();
   const navigation = useNavigation();
   const insets = useSafeAreaInsets();
-  const foregroundColor = useUniwindTheme()["--color-foreground"];
-  const fontFamily = useFontFamily("regular");
   const switchRef = useAtomCommand(vcsEnvironment.switchRef, { reportFailure: false });
   const [switchingBranchName, setSwitchingBranchName] = useState<string | null>(null);
   const selectingBranchNameRef = useRef<string | null>(null);
 @@ -417,11 +413,10 @@ export function NewTaskBranchPickerRouteScreen() {
           <TextInput
             autoCapitalize="none"
             autoCorrect={false}
-            className="h-11 rounded-xl bg-card px-4 text-base text-foreground"
+            className="h-11 rounded-xl bg-card px-4 font-sans text-base text-foreground"
             onChangeText={flow.setBranchQuery}
             placeholder="Find a branch"
             placeholderTextColorClassName={"accent-placeholder"}
-            style={{ color: foregroundColor, fontFamily }}
             value={flow.branchQuery}
           />
         </View>

apps/mobile/src/features/threads/thread-list-items.tsx+9-41

 @@ -276,9 +276,6 @@ export const PendingTaskListRow = memo(function PendingTaskListRow(props: {
   readonly onDeletePendingTask: (pendingTask: PendingNewTask) => void;
 }) {
   const compact = props.variant === "compact";
-  const theme = useUniwindTheme();
-  const separatorColor = theme["--color-separator"];
-  const pressedBackgroundColor = theme["--color-subtle"];
   const { pendingTask, onSelectPendingTask, onDeletePendingTask } = props;
   const timestamp = relativeTime(pendingTask.message.createdAt);
 @@ -333,25 +330,11 @@ export const PendingTaskListRow = memo(function PendingTaskListRow(props: {
       accessibilityHint="Opens the queued task for editing"
       accessibilityLabel={pendingTask.title}
       accessibilityRole="button"
-      className="bg-screen"
+      className="bg-screen active:opacity-70"
       onPress={() => onSelectPendingTask(pendingTask)}
-      style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
     >
-      <View
+      <View className="pr-[18px] pt-[10px]" style={{ paddingLeft: THREAD_LIST_COMPACT_INSET }}>
-        style={{
+        <View className={cn("gap-[3px] pb-[10px]", !props.isLast && "border-b border-separator")}>
-          paddingLeft: THREAD_LIST_COMPACT_INSET,
-          paddingRight: 18,
-          paddingTop: 10,
-        }}
-      >
-        <View
-          style={{
-            gap: 3,
-            borderBottomWidth: props.isLast ? 0 : 1,
-            borderBottomColor: separatorColor,
-            paddingBottom: 10,
-          }}
-        >
           <View className="flex-row items-center justify-between gap-2">
             <Text className="flex-1 text-lg font-t3-bold text-foreground" numberOfLines={1}>
               {pendingTask.title}
 @@ -376,16 +359,16 @@ export const PendingTaskListRow = memo(function PendingTaskListRow(props: {
       accessibilityHint="Opens the queued task for editing"
       accessibilityLabel={pendingTask.title}
       accessibilityRole="button"
+      className="active:bg-subtle"
       onPress={() => onSelectPendingTask(pendingTask)}
-      style={({ pressed }) => ({
+      style={{
-        backgroundColor: pressed ? pressedBackgroundColor : "transparent",
         borderRadius: SIDEBAR_ROW_RADIUS,
         cursor: "pointer",
         minHeight: 64,
         justifyContent: "center",
         paddingHorizontal: 12,
         paddingVertical: 10,
-      })}
+      }}
     >
       <View className="gap-[3px]">
         <View className="flex-row items-center justify-between gap-2">
 @@ -455,7 +438,6 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   const [hovered, setHovered] = useRecyclingState(false);
   const theme = useUniwindTheme();
-  const separatorColor = theme["--color-separator"];
   const screenColor = theme["--color-screen"];
   const drawerColor = theme["--color-drawer"];
   const pressedBackgroundColor = theme["--color-subtle"];
 @@ -589,28 +571,14 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
         accessibilityHint="Swipe left for archive and delete actions"
         accessibilityLabel={threadAccessibilityLabel}
         accessibilityRole="button"
-        className="bg-screen"
+        className="bg-screen active:opacity-70"
         onPress={() => {
           close();
           onSelectThread(thread);
         }}
-        style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
       >
-        <View
+        <View className="pr-[18px] pt-[10px]" style={{ paddingLeft: THREAD_LIST_COMPACT_INSET }}>
-          style={{
+          <View className={cn("gap-[3px] pb-[10px]", !props.isLast && "border-b border-separator")}>
-            paddingLeft: THREAD_LIST_COMPACT_INSET,
-            paddingRight: 18,
-            paddingTop: 10,
-          }}
-        >
-          <View
-            style={{
-              gap: 3,
-              borderBottomWidth: props.isLast ? 0 : 1,
-              borderBottomColor: separatorColor,
-              paddingBottom: 10,
-            }}
-          >
             <View className="flex-row items-center justify-between gap-2">
               <Text className="flex-1 text-lg font-t3-bold text-foreground" numberOfLines={1}>
                 {thread.title}

apps/mobile/src/features/threads/thread-list-v2-items.tsx+3-6

 @@ -214,9 +214,6 @@ export const ThreadListV2PendingRow = memo(function ThreadListV2PendingRow(props
   readonly onDeletePendingTask: (pendingTask: PendingNewTask) => void;
 }) {
   const { pendingTask, onSelectPendingTask, onDeletePendingTask } = props;
-  const theme = useUniwindTheme();
-  const drawerColor = theme["--color-drawer"];
-  const pressedBackgroundColor = theme["--color-subtle"];
   const sidebarPane = props.pane === "sidebar";
   const projectTitle =
     props.projectTitle ?? props.project?.title ?? pendingTask.creation.projectTitle ?? "";
 @@ -291,15 +288,15 @@ export const ThreadListV2PendingRow = memo(function ThreadListV2PendingRow(props
           accessibilityHint="Opens the queued task for editing"
           accessibilityLabel={pendingTask.title}
           accessibilityRole="button"
+          className={sidebarPane ? "bg-drawer active:bg-subtle" : undefined}
           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 })
           }
         >

vite.config.ts-2

 @@ -144,9 +144,7 @@ export default defineConfig({
           "apps/mobile/src/features/review/useNativeReviewDiffBridge.ts",
           "apps/mobile/src/features/settings/SettingsEnvironmentsRouteScreen.tsx",
           "apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx",
-          "apps/mobile/src/features/settings/appearance/components/FontSizeSliderRow.tsx",
           "apps/mobile/src/features/threads/GitActionProgressOverlay.tsx",
-          "apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx",
           "apps/mobile/src/features/threads/NewTaskDraftScreen.tsx",
           "apps/mobile/src/features/threads/ThreadComposer.tsx",
           "apps/mobile/src/features/threads/ThreadFeed.tsx",