jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(app): add tooltip with shortcut hint to source control explorer toggle

Browse Source 
The git checkout mode explorer button was missing the tooltip that
the non-git and mobile variants already had via HeaderToggleButton.
This commit is contained in:
Mohamed Boudra
2026-03-23 13:25:41 +07:00
parent a6f24508e8
commit 12ea75ab65
1 changed files with 68 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/screens/workspace/workspace-screen.tsx
+68 -34
View File
@@ -2046,40 +2046,61 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
serverId={normalizedServerId} serverId={normalizedServerId}
cwd={normalizedWorkspaceId} cwd={normalizedWorkspaceId}
/> />
<Pressable <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
testID="workspace-explorer-toggle" <TooltipTrigger asChild>
onPress={handleToggleExplorer} <Pressable
accessibilityRole="button" testID="workspace-explorer-toggle"
accessibilityLabel={isExplorerOpen ? "Close explorer" : "Open explorer"} onPress={handleToggleExplorer}
accessibilityState={{ expanded: isExplorerOpen }} accessibilityRole="button"
style={({ hovered, pressed }) => [ accessibilityLabel={
styles.sourceControlButton, isExplorerOpen ? "Close explorer" : "Open explorer"
workspaceDescriptor?.diffStat && styles.sourceControlButtonWithStats, }
(hovered || pressed || isExplorerOpen) && styles.sourceControlButtonHovered, accessibilityState={{ expanded: isExplorerOpen }}
]} style={({ hovered, pressed }) => [
> styles.sourceControlButton,
{({ hovered, pressed }) => { workspaceDescriptor?.diffStat && styles.sourceControlButtonWithStats,
const active = isExplorerOpen || hovered || pressed; (hovered || pressed || isExplorerOpen) &&
const iconColor = active styles.sourceControlButtonHovered,
? theme.colors.foreground ]}
: theme.colors.foregroundMuted; >
return ( {({ hovered, pressed }) => {
<> const active = isExplorerOpen || hovered || pressed;
<SourceControlPanelIcon size={theme.iconSize.md} color={iconColor} /> const iconColor = active
{workspaceDescriptor?.diffStat ? ( ? theme.colors.foreground
<View style={styles.diffStatRow}> : theme.colors.foregroundMuted;
<Text style={styles.diffStatAdditions}> return (
+{workspaceDescriptor.diffStat.additions} <>
</Text> <SourceControlPanelIcon
<Text style={styles.diffStatDeletions}> size={theme.iconSize.md}
-{workspaceDescriptor.diffStat.deletions} color={iconColor}
</Text> />
</View> {workspaceDescriptor?.diffStat ? (
) : null} <View style={styles.diffStatRow}>
</> <Text style={styles.diffStatAdditions}>
); +{workspaceDescriptor.diffStat.additions}
}} </Text>
</Pressable> <Text style={styles.diffStatDeletions}>
-{workspaceDescriptor.diffStat.deletions}
</Text>
</View>
) : null}
</>
);
}}
</Pressable>
</TooltipTrigger>
<TooltipContent
testID="workspace-explorer-toggle-tooltip"
side="left"
align="center"
offset={8}
>
<View style={styles.explorerTooltipRow}>
<Text style={styles.explorerTooltipText}>Toggle explorer</Text>
<Shortcut keys={["mod", "E"]} style={styles.explorerTooltipShortcut} />
</View>
</TooltipContent>
</Tooltip>
</> </>
) : null} ) : null}
{!isMobile && !isGitCheckout ? ( {!isMobile && !isGitCheckout ? (
@@ -2347,6 +2368,19 @@ const styles = StyleSheet.create((theme) => ({
backgroundColor: theme.colors.surface3, backgroundColor: theme.colors.surface3,
borderColor: theme.colors.borderAccent, borderColor: theme.colors.borderAccent,
}, },
explorerTooltipRow: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
},
explorerTooltipText: {
fontSize: theme.fontSize.sm,
color: theme.colors.popoverForeground,
},
explorerTooltipShortcut: {
backgroundColor: theme.colors.surface3,
borderColor: theme.colors.borderAccent,
},
mobileTabsRow: { mobileTabsRow: {
backgroundColor: theme.colors.surface0, backgroundColor: theme.colors.surface0,
borderBottomWidth: theme.borderWidth[1], borderBottomWidth: theme.borderWidth[1],