Skip to content

refactor(mobile): git sheets use uniwind platform variants instead of className ternaries #13185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusmarminge merged 1 commit into from
Sep 23, 2026
Merged

refactor(mobile): git sheets use uniwind platform variants instead of className ternaries #13185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 18 additions & 69 deletions apps/mobile/src/features/threads/git/GitBranchesSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export function GitBranchesSheet(_props: GitBranchesSheetProps) {
return (
<View
collapsable={false}
className={Platform.OS === "android" ? "bg-sheet" : "flex-1 bg-sheet"}
className="bg-sheet ios:flex-1"
style={Platform.OS === "android" ? { maxHeight: windowHeight * 0.92 } : undefined}
>
{Platform.OS === "android" ? (
Expand All @@ -83,39 +83,27 @@ export function GitBranchesSheet(_props: GitBranchesSheetProps) {
) : null}
<MaterialScreenContent fitToContents>
<ScrollView
className={Platform.OS === "android" ? "shrink grow-0" : "flex-1"}
className="android:shrink android:grow-0 ios:flex-1"
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}
contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}
contentContainerClassName={Platform.OS === "android" ? "gap-2 p-2" : "gap-4 px-5 pt-2"}
contentContainerClassName="android:gap-2 android:p-2 ios:gap-4 ios:px-5 ios:pt-2"
contentContainerStyle={
Platform.OS === "android"
? { paddingBottom: Math.max(insets.bottom, 18) + 18 }
: undefined
}
>
<View
className={
Platform.OS === "android"
? "gap-3 rounded-[20px] bg-card p-4"
: "gap-2 rounded-[18px] border border-border bg-card px-4 py-4"
}
>
<Text
className={
Platform.OS === "android"
? "text-foreground text-base font-t3-medium"
: "text-foreground-secondary text-2xs font-t3-bold tracking-[1px] uppercase"
}
>
<View className="bg-card android:gap-3 android:rounded-[20px] android:p-4 ios:gap-2 ios:rounded-[18px] ios:border ios:border-border ios:px-4 ios:py-4">
<Text className="android:text-foreground android:text-base android:font-t3-medium ios:text-foreground-secondary ios:text-2xs ios:font-t3-bold ios:tracking-[1px] ios:uppercase">
New branch
</Text>
<TextInput
value={newBranchName}
onChangeText={setNewBranchName}
placeholder="feature/mobile-polish"
accessibilityLabel="New branch name"
className={Platform.OS === "android" ? "rounded-xl bg-sheet-solid" : "rounded-[18px]"}
className="android:rounded-xl android:bg-sheet-solid ios:rounded-[18px]"
/>
<SheetActionButton
icon="plus"
Expand All @@ -133,20 +121,8 @@ export function GitBranchesSheet(_props: GitBranchesSheetProps) {
/>
</View>

<View
className={
Platform.OS === "android"
? "gap-3 rounded-[20px] bg-card p-4"
: "gap-2 rounded-[18px] border border-border bg-card px-4 py-4"
}
>
<Text
className={
Platform.OS === "android"
? "text-foreground text-base font-t3-medium"
: "text-foreground-secondary text-2xs font-t3-bold tracking-[1px] uppercase"
}
>
<View className="bg-card android:gap-3 android:rounded-[20px] android:p-4 ios:gap-2 ios:rounded-[18px] ios:border ios:border-border ios:px-4 ios:py-4">
<Text className="android:text-foreground android:text-base android:font-t3-medium ios:text-foreground-secondary ios:text-2xs ios:font-t3-bold ios:tracking-[1px] ios:uppercase">
New worktree
</Text>
{Platform.OS === "android" ? (
Expand All @@ -157,7 +133,7 @@ export function GitBranchesSheet(_props: GitBranchesSheetProps) {
onChangeText={setWorktreeBaseBranch}
placeholder="main"
accessibilityLabel="Worktree base branch"
className={Platform.OS === "android" ? "rounded-xl bg-sheet-solid" : "rounded-[18px]"}
className="android:rounded-xl android:bg-sheet-solid ios:rounded-[18px]"
/>
{Platform.OS === "android" ? (
<Text className="text-foreground-secondary text-sm">New branch</Text>
Expand All @@ -167,7 +143,7 @@ export function GitBranchesSheet(_props: GitBranchesSheetProps) {
onChangeText={setWorktreeBranchName}
placeholder="feature/mobile-thread"
accessibilityLabel="Worktree branch name"
className={Platform.OS === "android" ? "rounded-xl bg-sheet-solid" : "rounded-[18px]"}
className="android:rounded-xl android:bg-sheet-solid ios:rounded-[18px]"
/>
<SheetActionButton
icon="square.split.2x1"
Expand All @@ -193,32 +169,16 @@ export function GitBranchesSheet(_props: GitBranchesSheetProps) {
</View>

<View className="gap-2">
<Text
className={
Platform.OS === "android"
? "px-4 pb-1 pt-3 text-foreground-secondary text-sm font-t3-medium"
: "text-foreground-secondary text-2xs font-t3-bold tracking-[1px] uppercase"
}
>
<Text className="text-foreground-secondary android:px-4 android:pb-1 android:pt-3 android:text-sm android:font-t3-medium ios:text-2xs ios:font-t3-bold ios:tracking-[1px] ios:uppercase">
Existing branches
</Text>
{branchesLoading ? (
<Text
className={cn(
"text-foreground-secondary text-sm font-medium",
Platform.OS === "android" && "px-4",
)}
>
<Text className="text-foreground-secondary text-sm font-medium android:px-4">
Loading branches...
</Text>
) : null}
{!branchesLoading && availableBranches.length === 0 ? (
<Text
className={cn(
"text-foreground-secondary text-sm font-medium",
Platform.OS === "android" && "px-4",
)}
>
<Text className="text-foreground-secondary text-sm font-medium android:px-4">
No local branches found.
</Text>
) : null}
Expand All @@ -236,16 +196,10 @@ export function GitBranchesSheet(_props: GitBranchesSheetProps) {
<Pressable
key={branch.name}
className={cn(
"gap-1 px-4 py-3 disabled:opacity-[0.45]",
Platform.OS === "android"
? cn(
"rounded-[20px] active:bg-subtle",
branch.current ? "bg-secondary" : "bg-card",
)
: cn(
"rounded-[18px] border",
branch.current ? "border-subtle-strong" : "border-border",
),
"gap-1 px-4 py-3 disabled:opacity-[0.45] android:rounded-[20px] android:active:bg-subtle ios:rounded-[18px] ios:border",
branch.current
? "android:bg-secondary ios:border-subtle-strong"
: "android:bg-card ios:border-border",
)}
accessibilityRole="button"
accessibilityState={{ selected: branch.current, disabled: busy || disabled }}
Expand All @@ -259,12 +213,7 @@ export function GitBranchesSheet(_props: GitBranchesSheetProps) {
{Platform.OS !== "android" ? (
<View className="absolute inset-0 rounded-[18px] bg-card" />
) : null}
<Text
className={cn(
"text-foreground text-base",
Platform.OS === "android" ? "font-t3-medium" : "font-t3-bold",
)}
>
<Text className="text-foreground text-base android:font-t3-medium ios:font-t3-bold">
{branch.name}
</Text>
<Text className="text-foreground-secondary text-xs font-medium">{subtitle}</Text>
Expand Down
104 changes: 22 additions & 82 deletions apps/mobile/src/features/threads/git/GitCommitSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export function GitCommitSheet(_props: GitCommitSheetProps) {
return (
<View
collapsable={false}
className={Platform.OS === "android" ? "bg-sheet" : "flex-1 bg-sheet"}
className="bg-sheet ios:flex-1"
style={Platform.OS === "android" ? { maxHeight: windowHeight * 0.92 } : undefined}
>
{Platform.OS === "android" ? (
Expand All @@ -92,35 +92,21 @@ export function GitCommitSheet(_props: GitCommitSheetProps) {
) : null}
<MaterialScreenContent fitToContents>
<ScrollView
className={Platform.OS === "android" ? "shrink grow-0" : "flex-1"}
className="android:shrink android:grow-0 ios:flex-1"
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}
contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}
contentContainerClassName={Platform.OS === "android" ? "gap-2 p-2" : "gap-4 px-5 pt-2"}
contentContainerClassName="android:gap-2 android:p-2 ios:gap-4 ios:px-5 ios:pt-2"
contentContainerStyle={
Platform.OS === "android"
? { paddingBottom: Math.max(insets.bottom, 18) + 18 }
: undefined
}
>
<View
className={cn(
"gap-3 bg-card p-4",
Platform.OS === "android" ? "rounded-[20px]" : "rounded-[22px] border border-border",
)}
>
<View
className={
Platform.OS === "android" ? "gap-1" : "flex-row items-center justify-between gap-3"
}
>
<View className="gap-3 bg-card p-4 android:rounded-[20px] ios:rounded-[22px] ios:border ios:border-border">
<View className="android:gap-1 ios:flex-row ios:items-center ios:justify-between ios:gap-3">
<Text className="text-foreground-muted text-sm font-medium">Branch</Text>
<Text
className={cn(
"text-foreground text-base",
Platform.OS === "android" ? "font-t3-medium" : "font-t3-bold",
)}
>
<Text className="text-foreground text-base android:font-t3-medium ios:font-t3-bold">
{gitStatus.data?.refName ?? "(detached HEAD)"}
</Text>
</View>
Expand All @@ -131,20 +117,10 @@ export function GitCommitSheet(_props: GitCommitSheetProps) {
) : null}
</View>

<View
className={cn(
"gap-3 bg-card p-4",
Platform.OS === "android" ? "rounded-[20px]" : "rounded-[22px] border border-border",
)}
>
<View className="gap-3 bg-card p-4 android:rounded-[20px] ios:rounded-[22px] ios:border ios:border-border">
<View className="flex-row items-center justify-between gap-3">
<View className="gap-1">
<Text
className={cn(
"text-foreground text-base",
Platform.OS === "android" ? "font-t3-medium" : "font-t3-bold",
)}
>
<Text className="text-foreground text-base android:font-t3-medium ios:font-t3-bold">
Files
</Text>
<Text className="text-foreground-muted text-xs leading-normal">
Expand All @@ -154,39 +130,19 @@ export function GitCommitSheet(_props: GitCommitSheetProps) {
<View className="flex-row items-center gap-2">
{!allSelected && isEditingFiles ? (
<Pressable
className={
Platform.OS === "android"
? "min-h-12 justify-center rounded-full px-3 active:bg-subtle"
: "bg-subtle rounded-full px-3 py-2"
}
className="rounded-full px-3 android:min-h-12 android:justify-center android:active:bg-subtle ios:bg-subtle ios:py-2"
onPress={() => setExcludedFiles(new Set())}
>
<Text
className={
Platform.OS === "android"
? "text-primary-text text-sm font-t3-medium"
: "text-foreground text-2xs font-t3-bold uppercase"
}
>
<Text className="android:text-primary-text android:text-sm android:font-t3-medium ios:text-foreground ios:text-2xs ios:font-t3-bold ios:uppercase">
Reset
</Text>
</Pressable>
) : null}
<Pressable
className={
Platform.OS === "android"
? "min-h-12 justify-center rounded-full px-3 active:bg-subtle"
: "bg-subtle rounded-full px-3 py-2"
}
className="rounded-full px-3 android:min-h-12 android:justify-center android:active:bg-subtle ios:bg-subtle ios:py-2"
onPress={() => setIsEditingFiles((current) => !current)}
>
<Text
className={
Platform.OS === "android"
? "text-primary-text text-sm font-t3-medium"
: "text-foreground text-2xs font-t3-bold uppercase"
}
>
<Text className="android:text-primary-text android:text-sm android:font-t3-medium ios:text-foreground ios:text-2xs ios:font-t3-bold ios:uppercase">
{isEditingFiles ? "Done" : "Edit"}
</Text>
</Pressable>
Expand Down Expand Up @@ -226,15 +182,10 @@ export function GitCommitSheet(_props: GitCommitSheetProps) {
<Pressable
key={file.path}
className={cn(
"px-4 py-3",
Platform.OS === "android"
? included
? "rounded-xl bg-subtle"
: "rounded-xl"
: cn(
"rounded-[18px] border",
included ? "border-border" : "border-border-subtle",
),
"px-4 py-3 android:rounded-xl ios:rounded-[18px] ios:border",
included
? "android:bg-subtle ios:border-border"
: "ios:border-border-subtle",
)}
accessibilityRole="checkbox"
accessibilityLabel={file.path}
Expand Down Expand Up @@ -303,16 +254,8 @@ export function GitCommitSheet(_props: GitCommitSheetProps) {
)}
</View>

<View
className={Platform.OS === "android" ? "gap-3 rounded-[20px] bg-card p-4" : "gap-2"}
>
<Text
className={
Platform.OS === "android"
? "text-foreground text-base font-t3-medium"
: "text-foreground text-sm font-t3-bold"
}
>
<View className="android:gap-3 android:rounded-[20px] android:bg-card android:p-4 ios:gap-2">
<Text className="text-foreground android:text-base android:font-t3-medium ios:text-sm ios:font-t3-bold">
Commit message
</Text>
<TextInput
Expand All @@ -322,23 +265,20 @@ export function GitCommitSheet(_props: GitCommitSheetProps) {
onChangeText={setDialogCommitMessage}
placeholder="Leave empty to auto-generate"
textAlignVertical="top"
className={cn(
"min-h-[128px] px-4 py-3.5",
Platform.OS === "android" ? "rounded-xl bg-sheet-solid" : "rounded-[20px]",
)}
className="min-h-[128px] px-4 py-3.5 android:rounded-xl android:bg-sheet-solid ios:rounded-[20px]"
/>
</View>

<View className={Platform.OS === "android" ? "gap-2" : "flex-row gap-3"}>
<View className={Platform.OS === "android" ? undefined : "flex-1"}>
<View className="android:gap-2 ios:flex-row ios:gap-3">
<View className="ios:flex-1">
<SheetActionButton
icon="arrow.branch"
label="Commit on new branch"
disabled={noneSelected || busy}
onPress={() => void runCommitAction(true)}
/>
</View>
<View className={Platform.OS === "android" ? undefined : "flex-1"}>
<View className="ios:flex-1">
<SheetActionButton
icon="checkmark.circle"
label="Commit"
Expand Down
Loading
Loading