From 4bdcc4cafb03311f64eb6d561b6c6fd81d9ebce6 Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Tue, 13 Jan 2026 17:49:04 +0000
Subject: [PATCH] Right hand sidebar icon fix (#2017)

## Summary

Fixed the issue where the right sidebar (Git Panel) was using the left sidebar icon.

### Changes made to `frontend/src/components/ui-new/actions/index.ts`:

1. **Added imports** (line 1): `forwardRef` and `createElement` from React
2. **Created `RightSidebarIcon`** (lines 54-63): A wrapper component that renders `SidebarSimpleIcon` with `transform: scaleX(-1)` to mirror it horizontally, making it point to the right
3. **Updated `ToggleGitPanel`** (line 455): Changed from `SidebarSimpleIcon` to `RightSidebarIcon`

The fix uses CSS transform to flip the icon horizontally, maintaining visual consistency with the existing icon while correctly indicating that it controls the right sidebar.
---
 frontend/src/components/ui-new/actions/index.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui-new/actions/index.ts b/frontend/src/components/ui-new/actions/index.ts
index a3cd6366..646ec09e 100644
--- a/frontend/src/components/ui-new/actions/index.ts
+++ b/frontend/src/components/ui-new/actions/index.ts
@@ -1,4 +1,5 @@
-import type { Icon } from '@phosphor-icons/react';
+import { forwardRef, createElement } from 'react';
+import type { Icon, IconProps } from '@phosphor-icons/react';
 import type { NavigateFunction } from 'react-router-dom';
 import type { QueryClient } from '@tanstack/react-query';
 import type { EditorType, ExecutionProcess, Workspace } from 'shared/types';
@@ -50,6 +51,17 @@ import { getIdeName } from '@/components/ide/IdeIcon';
 import { EditorSelectionDialog } from '@/components/dialogs/tasks/EditorSelectionDialog';
 import { StartReviewDialog } from '@/components/dialogs/tasks/StartReviewDialog';
 
+// Mirrored sidebar icon for right sidebar toggle
+const RightSidebarIcon: Icon = forwardRef<SVGSVGElement, IconProps>(
+  (props, ref) =>
+    createElement(SidebarSimpleIcon, {
+      ref,
+      ...props,
+      style: { transform: 'scaleX(-1)', ...props.style },
+    })
+);
+RightSidebarIcon.displayName = 'RightSidebarIcon';
+
 // Special icon types for ContextBar
 export type SpecialIconType = 'ide-icon' | 'copy-icon';
 export type ActionIcon = Icon | SpecialIconType;
@@ -440,7 +452,7 @@ export const Actions = {
       useLayoutStore.getState().isGitPanelVisible
         ? 'Hide Git Panel'
         : 'Show Git Panel',
-    icon: SidebarSimpleIcon,
+    icon: RightSidebarIcon,
     requiresTarget: false,
     isActive: (ctx) => ctx.isGitPanelVisible,
     execute: () => {