authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-02 20:02:29-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-03 03:02:29+00:00
log85f2479ffe5c9d8ffa91f1bfae5234df4061292f
treebbedb0a2a3a5410e418d8c681eaa879abf61caa0
parentb9b1b8fdddf9d006fdb820af770063e1f968345b
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+4-9
......@@ -12,7 +12,6 @@ import Animated, {
1212import type { ComponentProps } from "react";
1313
1414import { AppText as Text } from "../../../../components/AppText";
15import { useUniwindTheme } from "../../../../lib/useUniwindTheme";
1615
1716type SymbolName = ComponentProps<typeof SymbolView>["name"];
1817
......@@ -36,10 +35,6 @@ export function FontSizeSliderRow(props: {
3635 readonly value: number;
3736 readonly onChange: (value: number) => void;
3837}) {
39 const theme = useUniwindTheme();
40 const trackColor = theme["--color-secondary-border"];
41 const fillColor = theme["--color-primary"];
42
4338 const latest = useRef(props);
4439 latest.current = props;
4540
......@@ -172,12 +167,12 @@ export function FontSizeSliderRow(props: {
172167 }}
173168 >
174169 <View
175 className="w-full rounded-full"
176 style={{ backgroundColor: trackColor, height: TRACK_HEIGHT }}
170 className="w-full rounded-full bg-secondary-border"
171 style={{ height: TRACK_HEIGHT }}
177172 >
178173 <Animated.View
179 className="absolute inset-y-0 left-0 rounded-full"
180 style={[{ backgroundColor: fillColor }, fillStyle]}
174 className="absolute inset-y-0 left-0 rounded-full bg-primary"
175 style={fillStyle}
181176 />
182177 </View>
183178 <Animated.View
apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx+1-6
......@@ -23,8 +23,6 @@ import { SymbolView } from "../../components/AppSymbol";
2323import { AppText as Text } from "../../components/AppText";
2424import { ThemedSwitch } from "../../components/ThemedSwitch";
2525import { cn } from "../../lib/cn";
26import { useFontFamily } from "../../lib/useFontFamily";
27import { useUniwindTheme } from "../../lib/useUniwindTheme";
2826import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";
2927import { useAtomCommand } from "../../state/use-atom-command";
3028import { vcsEnvironment } from "../../state/vcs";
......@@ -193,8 +191,6 @@ export function NewTaskBranchPickerRouteScreen() {
193191 const flow = useNewTaskFlow();
194192 const navigation = useNavigation();
195193 const insets = useSafeAreaInsets();
196 const foregroundColor = useUniwindTheme()["--color-foreground"];
197 const fontFamily = useFontFamily("regular");
198194 const switchRef = useAtomCommand(vcsEnvironment.switchRef, { reportFailure: false });
199195 const [switchingBranchName, setSwitchingBranchName] = useState<string | null>(null);
200196 const selectingBranchNameRef = useRef<string | null>(null);
......@@ -417,11 +413,10 @@ export function NewTaskBranchPickerRouteScreen() {
417413 <TextInput
418414 autoCapitalize="none"
419415 autoCorrect={false}
420 className="h-11 rounded-xl bg-card px-4 text-base text-foreground"
416 className="h-11 rounded-xl bg-card px-4 font-sans text-base text-foreground"
421417 onChangeText={flow.setBranchQuery}
422418 placeholder="Find a branch"
423419 placeholderTextColorClassName={"accent-placeholder"}
424 style={{ color: foregroundColor, fontFamily }}
425420 value={flow.branchQuery}
426421 />
427422 </View>
apps/mobile/src/features/threads/thread-list-items.tsx+9-41
......@@ -276,9 +276,6 @@ export const PendingTaskListRow = memo(function PendingTaskListRow(props: {
276276 readonly onDeletePendingTask: (pendingTask: PendingNewTask) => void;
277277}) {
278278 const compact = props.variant === "compact";
279 const theme = useUniwindTheme();
280 const separatorColor = theme["--color-separator"];
281 const pressedBackgroundColor = theme["--color-subtle"];
282279
283280 const { pendingTask, onSelectPendingTask, onDeletePendingTask } = props;
284281 const timestamp = relativeTime(pendingTask.message.createdAt);
......@@ -333,25 +330,11 @@ export const PendingTaskListRow = memo(function PendingTaskListRow(props: {
333330 accessibilityHint="Opens the queued task for editing"
334331 accessibilityLabel={pendingTask.title}
335332 accessibilityRole="button"
336 className="bg-screen"
333 className="bg-screen active:opacity-70"
337334 onPress={() => onSelectPendingTask(pendingTask)}
338 style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
339335 >
340 <View
341 style={{
342 paddingLeft: THREAD_LIST_COMPACT_INSET,
343 paddingRight: 18,
344 paddingTop: 10,
345 }}
346 >
347 <View
348 style={{
349 gap: 3,
350 borderBottomWidth: props.isLast ? 0 : 1,
351 borderBottomColor: separatorColor,
352 paddingBottom: 10,
353 }}
354 >
336 <View className="pr-[18px] pt-[10px]" style={{ paddingLeft: THREAD_LIST_COMPACT_INSET }}>
337 <View className={cn("gap-[3px] pb-[10px]", !props.isLast && "border-b border-separator")}>
355338 <View className="flex-row items-center justify-between gap-2">
356339 <Text className="flex-1 text-lg font-t3-bold text-foreground" numberOfLines={1}>
357340 {pendingTask.title}
......@@ -376,16 +359,16 @@ export const PendingTaskListRow = memo(function PendingTaskListRow(props: {
376359 accessibilityHint="Opens the queued task for editing"
377360 accessibilityLabel={pendingTask.title}
378361 accessibilityRole="button"
362 className="active:bg-subtle"
379363 onPress={() => onSelectPendingTask(pendingTask)}
380 style={({ pressed }) => ({
381 backgroundColor: pressed ? pressedBackgroundColor : "transparent",
364 style={{
382365 borderRadius: SIDEBAR_ROW_RADIUS,
383366 cursor: "pointer",
384367 minHeight: 64,
385368 justifyContent: "center",
386369 paddingHorizontal: 12,
387370 paddingVertical: 10,
388 })}
371 }}
389372 >
390373 <View className="gap-[3px]">
391374 <View className="flex-row items-center justify-between gap-2">
......@@ -455,7 +438,6 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
455438 const [hovered, setHovered] = useRecyclingState(false);
456439
457440 const theme = useUniwindTheme();
458 const separatorColor = theme["--color-separator"];
459441 const screenColor = theme["--color-screen"];
460442 const drawerColor = theme["--color-drawer"];
461443 const pressedBackgroundColor = theme["--color-subtle"];
......@@ -589,28 +571,14 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
589571 accessibilityHint="Swipe left for archive and delete actions"
590572 accessibilityLabel={threadAccessibilityLabel}
591573 accessibilityRole="button"
592 className="bg-screen"
574 className="bg-screen active:opacity-70"
593575 onPress={() => {
594576 close();
595577 onSelectThread(thread);
596578 }}
597 style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
598579 >
599 <View
600 style={{
601 paddingLeft: THREAD_LIST_COMPACT_INSET,
602 paddingRight: 18,
603 paddingTop: 10,
604 }}
605 >
606 <View
607 style={{
608 gap: 3,
609 borderBottomWidth: props.isLast ? 0 : 1,
610 borderBottomColor: separatorColor,
611 paddingBottom: 10,
612 }}
613 >
580 <View className="pr-[18px] pt-[10px]" style={{ paddingLeft: THREAD_LIST_COMPACT_INSET }}>
581 <View className={cn("gap-[3px] pb-[10px]", !props.isLast && "border-b border-separator")}>
614582 <View className="flex-row items-center justify-between gap-2">
615583 <Text className="flex-1 text-lg font-t3-bold text-foreground" numberOfLines={1}>
616584 {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
214214 readonly onDeletePendingTask: (pendingTask: PendingNewTask) => void;
215215}) {
216216 const { pendingTask, onSelectPendingTask, onDeletePendingTask } = props;
217 const theme = useUniwindTheme();
218 const drawerColor = theme["--color-drawer"];
219 const pressedBackgroundColor = theme["--color-subtle"];
220217 const sidebarPane = props.pane === "sidebar";
221218 const projectTitle =
222219 props.projectTitle ?? props.project?.title ?? pendingTask.creation.projectTitle ?? "";
......@@ -291,15 +288,15 @@ export const ThreadListV2PendingRow = memo(function ThreadListV2PendingRow(props
291288 accessibilityHint="Opens the queued task for editing"
292289 accessibilityLabel={pendingTask.title}
293290 accessibilityRole="button"
291 className={sidebarPane ? "bg-drawer active:bg-subtle" : undefined}
294292 onPress={() => onSelectPendingTask(pendingTask)}
295293 style={
296294 sidebarPane
297 ? ({ pressed }) => ({
298 backgroundColor: pressed ? pressedBackgroundColor : drawerColor,
295 ? {
299296 borderRadius: SIDEBAR_V2_ROW_RADIUS,
300297 paddingHorizontal: 12,
301298 paddingVertical: 10,
302 })
299 }
303300 : ({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })
304301 }
305302 >
vite.config.ts-2
......@@ -144,9 +144,7 @@ export default defineConfig({
144144 "apps/mobile/src/features/review/useNativeReviewDiffBridge.ts",
145145 "apps/mobile/src/features/settings/SettingsEnvironmentsRouteScreen.tsx",
146146 "apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx",
147 "apps/mobile/src/features/settings/appearance/components/FontSizeSliderRow.tsx",
148147 "apps/mobile/src/features/threads/GitActionProgressOverlay.tsx",
149 "apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx",
150148 "apps/mobile/src/features/threads/NewTaskDraftScreen.tsx",
151149 "apps/mobile/src/features/threads/ThreadComposer.tsx",
152150 "apps/mobile/src/features/threads/ThreadFeed.tsx",