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.
This commit is contained in:
Louis Knight-Webb
2026-01-13 17:49:04 +00:00
committed by GitHub
parent cdfb081cf8
commit 4bdcc4cafb

View File

@@ -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: () => {