fix: align mobile workspace header icons with desktop

Use same explorer toggle icons (SourceControlPanelIcon/PanelRight) on
mobile as desktop, use vertical kebab icon for mobile header menu.

packages/app/src/components/icons/source-control-panel-icon.tsx

@@ -3,11 +3,13 @@ import Svg, { Rect, Line } from "react-native-svg";
 interface SourceControlPanelIconProps {
   size?: number;
   color?: string;
+  strokeWidth?: number;
 }
 
 export function SourceControlPanelIcon({
   size = 16,
   color = "currentColor",
+  strokeWidth = 2,
 }: SourceControlPanelIconProps) {
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
@@ -18,15 +20,15 @@ export function SourceControlPanelIcon({
         height={18}
         rx={2}
         stroke={color}
-        strokeWidth={2}
+        strokeWidth={strokeWidth}
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       {/* Plus */}
-      <Line x1={9} y1={9.5} x2={15} y2={9.5} stroke={color} strokeWidth={2} strokeLinecap="round" />
+      <Line x1={9} y1={9.5} x2={15} y2={9.5} stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
-      <Line x1={12} y1={6.5} x2={12} y2={12.5} stroke={color} strokeWidth={2} strokeLinecap="round" />
+      <Line x1={12} y1={6.5} x2={12} y2={12.5} stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
       {/* Minus */}
-      <Line x1={9} y1={16} x2={15} y2={16} stroke={color} strokeWidth={2} strokeLinecap="round" />
+      <Line x1={9} y1={16} x2={15} y2={16} stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
     </Svg>
   );
 }

packages/app/src/screens/workspace/workspace-screen.tsx

@@ -13,9 +13,8 @@ import * as Clipboard from "expo-clipboard";
 import {
   ChevronDown,
   Copy,
-  Folder,
-  GitBranch,
   Ellipsis,
+  EllipsisVertical,
   PanelRight,
   Plus,
   SquareTerminal,
@@ -1560,12 +1559,15 @@ function WorkspaceScreenContent({
                       accessibilityRole="button"
                       accessibilityLabel="Workspace actions"
                     >
-                      {({ hovered, open }) => (
+                      {({ hovered, open }) => {
-                        <Ellipsis
+                        const Icon = isMobile ? EllipsisVertical : Ellipsis;
-                          size={theme.iconSize.md}
+                        return (
-                          color={hovered || open ? theme.colors.foreground : theme.colors.foregroundMuted}
+                          <Icon
-                        />
+                            size={theme.iconSize.md}
-                      )}
+                            color={hovered || open ? theme.colors.foreground : theme.colors.foregroundMuted}
+                          />
+                        );
+                      }}
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="start"
@@ -1690,8 +1692,8 @@ function WorkspaceScreenContent({
                     {({ hovered }) => {
                       const color = isExplorerOpen || hovered ? theme.colors.foreground : theme.colors.foregroundMuted;
                       return isGitCheckout
-                        ? <GitBranch size={theme.iconSize.lg} color={color} />
+                        ? <SourceControlPanelIcon size={theme.iconSize.lg} color={color} strokeWidth={1.5} />
-                        : <Folder size={theme.iconSize.lg} color={color} />;
+                        : <PanelRight size={theme.iconSize.lg} color={color} />;
                     }}
                   </HeaderToggleButton>
                 ) : null}