From 12ea75ab654664fcc800ece9926bce2ea65c5696 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Mon, 23 Mar 2026 13:25:41 +0700
Subject: [PATCH] fix(app): add tooltip with shortcut hint to source control
 explorer toggle

The git checkout mode explorer button was missing the tooltip that
the non-git and mobile variants already had via HeaderToggleButton.
---
 .../screens/workspace/workspace-screen.tsx    | 102 ++++++++++++------
 1 file changed, 68 insertions(+), 34 deletions(-)

diff --git a/packages/app/src/screens/workspace/workspace-screen.tsx b/packages/app/src/screens/workspace/workspace-screen.tsx
index 98a368c4a..913aff9f1 100644
--- a/packages/app/src/screens/workspace/workspace-screen.tsx
+++ b/packages/app/src/screens/workspace/workspace-screen.tsx
@@ -2046,40 +2046,61 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
                       serverId={normalizedServerId}
                       cwd={normalizedWorkspaceId}
                     />
-                    <Pressable
-                      testID="workspace-explorer-toggle"
-                      onPress={handleToggleExplorer}
-                      accessibilityRole="button"
-                      accessibilityLabel={isExplorerOpen ? "Close explorer" : "Open explorer"}
-                      accessibilityState={{ expanded: isExplorerOpen }}
-                      style={({ hovered, pressed }) => [
-                        styles.sourceControlButton,
-                        workspaceDescriptor?.diffStat && styles.sourceControlButtonWithStats,
-                        (hovered || pressed || isExplorerOpen) && styles.sourceControlButtonHovered,
-                      ]}
-                    >
-                      {({ hovered, pressed }) => {
-                        const active = isExplorerOpen || hovered || pressed;
-                        const iconColor = active
-                          ? theme.colors.foreground
-                          : theme.colors.foregroundMuted;
-                        return (
-                          <>
-                            <SourceControlPanelIcon size={theme.iconSize.md} color={iconColor} />
-                            {workspaceDescriptor?.diffStat ? (
-                              <View style={styles.diffStatRow}>
-                                <Text style={styles.diffStatAdditions}>
-                                  +{workspaceDescriptor.diffStat.additions}
-                                </Text>
-                                <Text style={styles.diffStatDeletions}>
-                                  -{workspaceDescriptor.diffStat.deletions}
-                                </Text>
-                              </View>
-                            ) : null}
-                          </>
-                        );
-                      }}
-                    </Pressable>
+                    <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+                      <TooltipTrigger asChild>
+                        <Pressable
+                          testID="workspace-explorer-toggle"
+                          onPress={handleToggleExplorer}
+                          accessibilityRole="button"
+                          accessibilityLabel={
+                            isExplorerOpen ? "Close explorer" : "Open explorer"
+                          }
+                          accessibilityState={{ expanded: isExplorerOpen }}
+                          style={({ hovered, pressed }) => [
+                            styles.sourceControlButton,
+                            workspaceDescriptor?.diffStat && styles.sourceControlButtonWithStats,
+                            (hovered || pressed || isExplorerOpen) &&
+                              styles.sourceControlButtonHovered,
+                          ]}
+                        >
+                          {({ hovered, pressed }) => {
+                            const active = isExplorerOpen || hovered || pressed;
+                            const iconColor = active
+                              ? theme.colors.foreground
+                              : theme.colors.foregroundMuted;
+                            return (
+                              <>
+                                <SourceControlPanelIcon
+                                  size={theme.iconSize.md}
+                                  color={iconColor}
+                                />
+                                {workspaceDescriptor?.diffStat ? (
+                                  <View style={styles.diffStatRow}>
+                                    <Text style={styles.diffStatAdditions}>
+                                      +{workspaceDescriptor.diffStat.additions}
+                                    </Text>
+                                    <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}
                 {!isMobile && !isGitCheckout ? (
@@ -2347,6 +2368,19 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.surface3,
     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: {
     backgroundColor: theme.colors.surface0,
     borderBottomWidth: theme.borderWidth[1],