diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css index 63a6392a..b09ca991 100644 --- a/assets/stylesheets/App.css +++ b/assets/stylesheets/App.css @@ -192,10 +192,6 @@ bottom: 0; } -.dashboard-menu-container-navigation-labels:after { - right: -6px; -} - .electron-navigation-leading, .electron-navigation-trailing { align-self: stretch; diff --git a/src/components/Dashboard/common/DashboardTabs.jsx b/src/components/Dashboard/common/DashboardTabs.jsx index 20cbbbeb..2bbc511d 100644 --- a/src/components/Dashboard/common/DashboardTabs.jsx +++ b/src/components/Dashboard/common/DashboardTabs.jsx @@ -1,5 +1,12 @@ import PropTypes from 'prop-types' -import { useCallback, useEffect, useLayoutEffect, useRef, useState, memo } from 'react' +import { + useCallback, + useEffect, + useLayoutEffect, + useRef, + useState, + memo +} from 'react' import { Button, Flex, Popover, Typography } from 'antd' import DashboardTabPreview from './DashboardTabPreview' import classNames from 'classnames' @@ -9,7 +16,10 @@ import XMarkIcon from '../../Icons/XMarkIcon' import HomeIcon from '../../Icons/HomeIcon' import { getModelByName } from '../../../database/ObjectModels' import { getSidebarIconComponent } from '../../Icons/sidebarIconMap' -import { useNavigationTabs, useTabPreview } from '../context/NavigationTabsContext' +import { + useNavigationTabs, + useTabPreview +} from '../context/NavigationTabsContext' import { getDesktopWindowId } from '../../../electrobun-bridge.js' import { hasExternalTabDrag, writeTabDragData } from './tabDrag' @@ -509,31 +519,6 @@ const useActiveTabStickyScroll = (activeTabId, tabs) => { if (!lastTab || pendingScrollTabIdRef.current !== lastTab.id) { return undefined } - - const list = listRef.current - const scrollEl = rootRef.current?.querySelector( - '.simplebar-content-wrapper' - ) - const outlineEl = list?.lastElementChild?.querySelector( - '.dashboard-tab-item-outline-container' - ) - if (!scrollEl || !outlineEl) return undefined - - const scrollToEndIfReady = () => { - if (outlineEl.getBoundingClientRect().width <= 36) return false - scrollEl.scrollLeft = scrollEl.scrollWidth - pendingScrollTabIdRef.current = null - return true - } - - if (scrollToEndIfReady()) return undefined - - const observer = new ResizeObserver(() => { - if (scrollToEndIfReady()) observer.disconnect() - }) - observer.observe(outlineEl) - - return () => observer.disconnect() }, [activeTabId, tabs]) return { rootRef, listRef, cloneRef, lineRef } @@ -711,6 +696,34 @@ const DashboardTabs = () => { selectTab(tabs[nextIndex].id) } + const handleAddTab = () => { + addTab() + + const scrollEl = rootRef.current?.querySelector( + '.simplebar-content-wrapper' + ) + + if (!scrollEl) return + + let lastMaxScrollLeft = scrollEl.scrollWidth - scrollEl.clientWidth + let unchangedChecks = 0 + + const interval = setInterval(() => { + const maxScrollLeft = scrollEl.scrollWidth - scrollEl.clientWidth + if (maxScrollLeft !== lastMaxScrollLeft) { + scrollEl.scrollLeft = maxScrollLeft + lastMaxScrollLeft = maxScrollLeft + unchangedChecks = 0 + } else { + unchangedChecks++ + } + + if (unchangedChecks >= 15) { + clearInterval(interval) + } + }, 10) + } + const isReordering = draggedValue != null || dropTarget != null const activeTab = tabs.find((tab) => tab.id === activeTabId) const activeTabIndex = activeTab @@ -790,7 +803,7 @@ const DashboardTabs = () => {