diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 0ea5acf19c..73d697970f 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -1117,6 +1117,8 @@ "more_editor_toolbar_item": "", "more_info": "", "more_options": "", + "move_to_the_left": "", + "move_to_the_right": "", "my_library": "", "n_items": "", "n_items_plural": "", diff --git a/services/web/frontend/js/features/ide-redesign/components/rail/rail-panel-header.tsx b/services/web/frontend/js/features/ide-redesign/components/rail/rail-panel-header.tsx index 3099245ee1..27bd2a8812 100644 --- a/services/web/frontend/js/features/ide-redesign/components/rail/rail-panel-header.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/rail/rail-panel-header.tsx @@ -10,7 +10,7 @@ export default function RailPanelHeader({ onClose, }: { title: React.ReactNode - actions?: React.ReactNode[] + actions?: React.ReactElement onClose?: () => void }) { const { t } = useTranslation() diff --git a/services/web/frontend/js/features/ide-redesign/components/rail/rail-tab.tsx b/services/web/frontend/js/features/ide-redesign/components/rail/rail-tab.tsx index 11478e8a5e..0cdfa51649 100644 --- a/services/web/frontend/js/features/ide-redesign/components/rail/rail-tab.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/rail/rail-tab.tsx @@ -1,7 +1,7 @@ import OLTooltip from '@/shared/components/ol/ol-tooltip' import MaterialIcon from '@/shared/components/material-icon' import classNames from 'classnames' -import { forwardRef, ReactElement } from 'react' +import { ComponentProps, forwardRef, ReactElement } from 'react' import { NavLink } from 'react-bootstrap' import { RailElement } from '../../utils/rail-types' @@ -9,13 +9,12 @@ const RailTab = forwardRef< HTMLAnchorElement, { icon: RailElement['icon'] - eventKey: string + eventKey?: string open: boolean indicator?: ReactElement title: string - disabled?: boolean - } ->(({ icon, eventKey, open, indicator, title, disabled = false }, ref) => { + } & ComponentProps<'button'> +>(({ icon, eventKey, className, open, indicator, title, ...props }, ref) => { return ( {indicator} diff --git a/services/web/frontend/js/features/ide-redesign/components/rail/rail.tsx b/services/web/frontend/js/features/ide-redesign/components/rail/rail.tsx index 9a7add4e42..51e17352af 100644 --- a/services/web/frontend/js/features/ide-redesign/components/rail/rail.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/rail/rail.tsx @@ -32,6 +32,7 @@ import EditorTourThemeTooltip from '../editor-tour/editor-tour-theme-tooltip' import EditorTourGotQuestionsTooltip from '../editor-tour/editor-tour-got-questions' import { shouldIncludeElement } from '../../utils/rail-utils' import { useEditorContext } from '@/shared/context/editor-context' +import useEventListener from '@/shared/hooks/use-event-listener' const moduleRailEntries = ( importOverleafModules('railEntries') as { @@ -39,6 +40,7 @@ const moduleRailEntries = ( path: string }[] ).map(({ import: { default: element } }) => element) + const moduleRailPopovers = ( importOverleafModules('railPopovers') as { import: { @@ -56,7 +58,8 @@ const moduleRailPopovers = ( export const RailLayout = () => { const { sendEvent } = useEditorAnalytics() const { t } = useTranslation() - const { selectedTab, openTab, isOpen, togglePane } = useRailContext() + const { selectedTab, openTab, isOpen, setIsOpen, togglePane, selectTab } = + useRailContext() const { features } = useProjectContext() const { isRestrictedTokenMember } = useEditorContext() const gitBridgeEnabled = getMeta('ol-gitBridgeEnabled') @@ -71,6 +74,23 @@ export const RailLayout = () => { const fileTreeRef = useRef(null) const settingsRef = useRef(null) + useEventListener( + 'ui:select-rail-tab', + useCallback( + (event: Event) => { + const { + detail: { tab, open }, + } = event as CustomEvent<{ + tab: RailTabKey + open: boolean + }> + selectTab(tab) + setIsOpen(open) + }, + [selectTab, setIsOpen] + ) + ) + const railTabs: RailElement[] = useMemo( () => [ { @@ -253,18 +273,21 @@ export const RailLayout = () => {
{tabsInRail .filter(shouldIncludeElement) - .map(({ icon, key, indicator, title, disabled, ref }) => ( - - ))} + .map(({ icon, key, indicator, title, disabled, ref, tab }) => { + const Component = tab ?? RailTab + return ( + + ) + })}