Tearing down of old Editor (File tree) (#31784)

* merging ide-redesign/components/file-tree into features/file-tree

* moving ide-redesign/contexts/settings-modal-context   to features/settings/contexts

* use-collapsible-file-tree.tsx → features/file-tree/hooks

* use-focus-on-setting.tsx → features/settings/hooks

* use-project-notification-preferences.ts → features/settings/hooks

* use-rail-overflow.tsx→ features/ide-react/hooks

* deleting use-switch-enable-new-editor-state.ts

* use-toolbar-menu-editor-commands.tsx → features/source-editor/hooks

* npm run extract-translations

* modifying the test to target correct buttons and removing a test for old component

* adding a test back and modifying it

* changing the test

GitOrigin-RevId: baa1e9a992c88b84313eea82161354d4958cf1ef

services/web/frontend/js/features/ide-react/components/rail/rail.tsx

@@ -6,7 +6,7 @@ import {
   RailTabKey,
   useRailContext,
 } from '@/features/ide-react/context/rail-context'
-import FileTreeOutlinePanel from '@/features/ide-redesign/components/file-tree/file-tree-outline-panel'
+import FileTreeOutlinePanel from '@/features/file-tree/components/file-tree-outline-panel'
 import ChatPane from '@/features/chat/components/chat-pane'
 import ChatIndicator from '@/features/chat/components/chat-indicator'
 import getMeta from '@/utils/meta'
@@ -29,7 +29,7 @@ import RailPanel from './rail-panel'
 import RailResizeHandle from './rail-resize-handle'
 import RailModals from './rail-modals'
 import RailOverflowDropdown from './rail-overflow-dropdown'
-import useRailOverflow from '@/features/ide-redesign/hooks/use-rail-overflow'
+import useRailOverflow from '@/features/ide-react/hooks/use-rail-overflow'
 import EditorTourRailTooltip from '@/features/ide-redesign/components/editor-tour/editor-tour-rail-tooltip'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 import EditorTourThemeTooltip from '@/features/ide-redesign/components/editor-tour/editor-tour-theme-tooltip'

services/web/frontend/js/features/ide-react/hooks/use-rail-overflow.tsx

@@ -0,0 +1,35 @@
+import { useCallback, useState } from 'react'
+import { RailElement } from '../util/rail-types'
+import { useResizeObserver } from '@/shared/hooks/use-resize-observer'
+
+const useRailOverflow = (railTabs: RailElement[]) => {
+  const [tabsInRail, setTabsInRail] = useState<RailElement[]>(railTabs)
+  const [tabsInOverflow, setTabsInOverflow] = useState<RailElement[]>([])
+
+  const handleResize = useCallback(
+    (element: Element) => {
+      const height = (element as HTMLElement).offsetHeight
+
+      const tabHeight =
+        (element.querySelector('.ide-rail-tab-link')?.clientHeight ?? 0) + 4 // 4px gap between tabs
+
+      const numTabsToFit = Math.floor(height / tabHeight)
+
+      if (numTabsToFit >= railTabs.length) {
+        setTabsInRail(railTabs)
+        setTabsInOverflow([])
+      } else {
+        const sliceIndex = Math.max(numTabsToFit - 1, 0)
+        setTabsInRail(railTabs.slice(0, sliceIndex))
+        setTabsInOverflow(railTabs.slice(sliceIndex))
+      }
+    },
+    [railTabs]
+  )
+
+  const { elementRef: tabWrapperRef } = useResizeObserver(handleResize)
+
+  return { tabsInRail, tabsInOverflow, tabWrapperRef }
+}
+
+export default useRailOverflow