diff --git a/packages/app/src/screens/new-workspace-screen.tsx b/packages/app/src/screens/new-workspace-screen.tsx index bce285305..9559859f4 100644 --- a/packages/app/src/screens/new-workspace-screen.tsx +++ b/packages/app/src/screens/new-workspace-screen.tsx @@ -50,6 +50,55 @@ interface PickerSelection { const BRANCH_OPTION_PREFIX = "branch:"; const PR_OPTION_PREFIX = "github-pr:"; +function PickerOptionItem({ + testID, + label, + description, + selected, + active, + disabled, + onPress, + isBranch, + iconColor, + iconSize, +}: { + testID: string; + label: string; + description: string | undefined; + selected: boolean; + active: boolean; + disabled: boolean; + onPress: () => void; + isBranch: boolean; + iconColor: string; + iconSize: number; +}) { + const leadingSlot = useMemo( + () => ( + + {isBranch ? ( + + ) : ( + + )} + + ), + [isBranch, iconSize, iconColor], + ); + return ( + + ); +} + function branchOptionId(name: string): string { return `${BRANCH_OPTION_PREFIX}${name}`; } @@ -433,16 +482,6 @@ export function NewWorkspaceScreen({ const isBranch = item.kind === "branch"; - const leadingSlot = ( - - {isBranch ? ( - - ) : ( - - )} - - ); - const testID = isBranch ? `new-workspace-ref-picker-branch-${item.name}` : `new-workspace-ref-picker-pr-${item.item.number}`; @@ -451,7 +490,7 @@ export function NewWorkspaceScreen({ !isBranch && item.item.baseRefName ? `into ${item.item.baseRefName}` : undefined; return ( - ); }, diff --git a/packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx b/packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx index 05daed306..64d896615 100644 --- a/packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx +++ b/packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx @@ -52,6 +52,7 @@ import { import { buildWorkspaceDesktopTabActions, type WorkspaceDesktopTabActions, + type WorkspaceTabMenuEntry, } from "@/screens/workspace/workspace-tab-menu"; import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types"; @@ -62,6 +63,50 @@ function newTabActionButtonStyle({ hovered, pressed }: PressableStateCallbackTyp return [styles.newTabActionButton, (hovered || pressed) && styles.newTabActionButtonHovered]; } +function TabContextMenuItem({ + entry, + iconColor, +}: { + entry: Extract; + iconColor: string; +}) { + const leading = useMemo(() => { + switch (entry.icon) { + case "copy": + return ; + case "rotate-cw": + return ; + case "arrow-left-to-line": + return ; + case "arrow-right-to-line": + return ; + case "copy-x": + return ; + case "x": + return ; + default: + return undefined; + } + }, [entry.icon, iconColor]); + const trailing = useMemo( + () => (entry.hint ? {entry.hint} : undefined), + [entry.hint], + ); + return ( + + {entry.label} + + ); +} + function tabKeyExtractor(tab: WorkspaceDesktopTabRowItem) { return `${tab.tab.key}:${tab.tab.kind}`; } @@ -366,38 +411,11 @@ function TabChip({ entry.kind === "separator" ? ( ) : ( - { - const iconColor = theme.colors.foregroundMuted; - switch (entry.icon) { - case "copy": - return ; - case "rotate-cw": - return ; - case "arrow-left-to-line": - return ; - case "arrow-right-to-line": - return ; - case "copy-x": - return ; - case "x": - return ; - default: - return undefined; - } - })()} - trailing={ - entry.hint ? {entry.hint} : undefined - } - > - {entry.label} - + entry={entry} + iconColor={theme.colors.foregroundMuted} + /> ), )} diff --git a/packages/app/src/screens/workspace/workspace-open-in-editor-button.tsx b/packages/app/src/screens/workspace/workspace-open-in-editor-button.tsx index 8bd6a6081..89ff13feb 100644 --- a/packages/app/src/screens/workspace/workspace-open-in-editor-button.tsx +++ b/packages/app/src/screens/workspace/workspace-open-in-editor-button.tsx @@ -38,11 +38,19 @@ interface EditorMenuItemProps { function EditorMenuItem({ editor, isPreferred, onOpen, foregroundMuted }: EditorMenuItemProps) { const handleSelect = useCallback(() => onOpen(editor.id), [onOpen, editor.id]); + const leading = useMemo( + () => , + [editor.id, foregroundMuted], + ); + const trailing = useMemo( + () => (isPreferred ? : undefined), + [isPreferred, foregroundMuted], + ); return ( } - trailing={isPreferred ? : undefined} + leading={leading} + trailing={trailing} onSelect={handleSelect} > {editor.label}