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:
committed by
GitHub
parent
cdfb081cf8
commit
4bdcc4cafb
@@ -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: () => {
|
||||
|
||||
Reference in New Issue
Block a user