diff --git a/packages/app/src/components/add-host-modal.tsx b/packages/app/src/components/add-host-modal.tsx index 10a2f962d..554750dad 100644 --- a/packages/app/src/components/add-host-modal.tsx +++ b/packages/app/src/components/add-host-modal.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef, useState } from "react"; +import { useCallback, useMemo, useRef, useState } from "react"; import { Alert, Text, TextInput, View } from "react-native"; import { StyleSheet, useUnistyles } from "react-native-unistyles"; import { useIsCompactFormFactor } from "@/constants/layout"; @@ -160,6 +160,11 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved }: AddHostMod hostInputRef.current?.clear(); }, []); + const connectIcon = useMemo( + () => , + [theme.colors.palette.white], + ); + const handleClose = useCallback(() => { if (isSaving) return; clearInput(); @@ -289,7 +294,7 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved }: AddHostMod variant="default" onPress={handleSavePress} disabled={isSaving} - leftIcon={} + leftIcon={connectIcon} testID="direct-host-submit" > {isSaving ? "Connecting..." : "Connect"} diff --git a/packages/app/src/components/branch-switcher.tsx b/packages/app/src/components/branch-switcher.tsx index b7baa728e..5544996e0 100644 --- a/packages/app/src/components/branch-switcher.tsx +++ b/packages/app/src/components/branch-switcher.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef } from "react"; +import { useCallback, useMemo, useRef } from "react"; import { Pressable, View, type PressableStateCallbackType } from "react-native"; import { useQueryClient } from "@tanstack/react-query"; import { ChevronDown, GitBranch } from "lucide-react-native"; @@ -62,6 +62,11 @@ export function BranchSwitcher({ [], ); + const branchLeadingSlot = useMemo( + () => , + [theme.colors.foregroundMuted], + ); + const renderBranchOption = useCallback>( ({ option, selected, active, onPress }) => ( } + leadingSlot={branchLeadingSlot} /> ), - [theme.colors.foregroundMuted], + [branchLeadingSlot], ); if (!currentBranchName) { diff --git a/packages/app/src/components/composer.tsx b/packages/app/src/components/composer.tsx index 4e33fcacc..899a4e7a7 100644 --- a/packages/app/src/components/composer.tsx +++ b/packages/app/src/components/composer.tsx @@ -235,6 +235,15 @@ function GithubPickerOption({ const handlePress = useCallback(() => { onToggle(item); }, [onToggle, item]); + const leadingSlot = useMemo( + () => + item.kind === "pr" ? ( + + ) : ( + + ), + [item.kind, theme.iconSize.sm, theme.colors.foregroundMuted], + ); return ( - ) : ( - - ) - } + leadingSlot={leadingSlot} /> ); } diff --git a/packages/app/src/components/pair-link-modal.tsx b/packages/app/src/components/pair-link-modal.tsx index 789d66b24..f03f4b0c2 100644 --- a/packages/app/src/components/pair-link-modal.tsx +++ b/packages/app/src/components/pair-link-modal.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef, useState } from "react"; +import { useCallback, useMemo, useRef, useState } from "react"; import { Alert, Text, TextInput, View } from "react-native"; import { StyleSheet, useUnistyles } from "react-native-unistyles"; import { useIsCompactFormFactor } from "@/constants/layout"; @@ -74,6 +74,11 @@ export function PairLinkModal({ visible, onClose, onCancel, onSaved }: PairLinkM inputRef.current?.clear(); }, []); + const pairIcon = useMemo( + () => , + [theme.colors.palette.white], + ); + const handleClose = useCallback(() => { if (isSaving) return; clearInput(); @@ -209,7 +214,7 @@ export function PairLinkModal({ visible, onClose, onCancel, onSaved }: PairLinkM testID="pair-link-submit" accessibilityRole="button" accessibilityLabel="Pair" - leftIcon={} + leftIcon={pairIcon} > {isSaving ? "Pairing..." : "Pair"} diff --git a/packages/app/src/components/pr-pane.tsx b/packages/app/src/components/pr-pane.tsx index 4a6875a54..945837cfa 100644 --- a/packages/app/src/components/pr-pane.tsx +++ b/packages/app/src/components/pr-pane.tsx @@ -72,6 +72,23 @@ export function PrPane({ data }: { data: PrPaneData }) { [data.activity], ); + const checkSuccessIcon = useMemo( + () => , + [theme.colors.statusSuccess], + ); + const checkDangerIcon = useMemo( + () => , + [theme.colors.statusDanger], + ); + const checkWarningIcon = useMemo( + () => , + [theme.colors.statusWarning], + ); + const commentIcon = useMemo( + () => , + [theme.colors.foregroundMuted], + ); + return ( @@ -105,17 +122,13 @@ export function PrPane({ data }: { data: PrPaneData }) { } - /> - } + icon={checkSuccessIcon} /> + } + icon={checkWarningIcon} /> } @@ -136,17 +149,17 @@ export function PrPane({ data }: { data: PrPaneData }) { } + icon={checkSuccessIcon} /> } + icon={checkDangerIcon} /> } + icon={commentIcon} /> } diff --git a/packages/app/src/components/sidebar-workspace-list.tsx b/packages/app/src/components/sidebar-workspace-list.tsx index 7d806f661..a2de544aa 100644 --- a/packages/app/src/components/sidebar-workspace-list.tsx +++ b/packages/app/src/components/sidebar-workspace-list.tsx @@ -884,6 +884,11 @@ function ProjectHeaderRow({ [isDragging, selected, isHovered], ); + const removeProjectLeadingIcon = useMemo( + () => , + [theme.colors.foregroundMuted], + ); + const rowChildren = ( <> @@ -938,7 +943,7 @@ function ProjectHeaderRow({ } + leading={removeProjectLeadingIcon} status={removeProjectStatus} pendingLabel="Removing..." onSelect={onRemoveProject} @@ -1078,6 +1083,18 @@ function WorkspaceRowInner({ ], [isHovered, isCreating], ); + const copyLeadingIcon = useMemo( + () => , + [theme.colors.foregroundMuted], + ); + const archiveLeadingIcon = useMemo( + () => , + [theme.colors.foregroundMuted], + ); + const archiveTrailing = useMemo( + () => (archiveShortcutKeys ? : null), + [archiveShortcutKeys], + ); return ( @@ -1143,7 +1160,7 @@ function WorkspaceRowInner({ {onCopyPath ? ( } + leading={copyLeadingIcon} onSelect={onCopyPath} > Copy path @@ -1152,7 +1169,7 @@ function WorkspaceRowInner({ {onCopyBranchName ? ( } + leading={copyLeadingIcon} onSelect={onCopyBranchName} > Copy branch name @@ -1160,10 +1177,8 @@ function WorkspaceRowInner({ ) : null} } - trailing={ - archiveShortcutKeys ? : null - } + leading={archiveLeadingIcon} + trailing={archiveTrailing} status={archiveStatus} pendingLabel={archivePendingLabel} onSelect={onArchive}