Enhance Dashboard Tabs with Sticky Visuals and Improved Masking

- Added CSS styles for sticky tab behavior, including new masking effects for better visual integration during scrolling.
- Updated JavaScript logic to manage sticky visuals and tab metrics, improving user interaction and responsiveness.
- Adjusted padding and layout properties for dashboard tab items to enhance overall aesthetics and usability.

assets/stylesheets/App.css

@@ -3470,12 +3470,60 @@ body.objectKanbanColumnResizing * {
   min-width: 0;
   align-self: stretch;
   height: 42px;
+  position: relative;
+  --tab-mask-fade: 14px;
 }
 
 .dashboard-tabs-wrap {
   flex: 1;
   min-width: 0;
   height: 100%;
+  position: relative;
+}
+
+.dashboard-tabs-wrap .simplebar-mask {
+  --tab-mask-left: 0px;
+  --tab-mask-right: 0px;
+  -webkit-clip-path: inset(0 var(--tab-mask-right) 0 var(--tab-mask-left));
+  clip-path: inset(0 var(--tab-mask-right) 0 var(--tab-mask-left));
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent var(--tab-mask-left),
+    #000 calc(var(--tab-mask-left) + var(--tab-mask-fade)),
+    #000 calc(100% - var(--tab-mask-right) - var(--tab-mask-fade)),
+    transparent calc(100% - var(--tab-mask-right))
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent var(--tab-mask-left),
+    #000 calc(var(--tab-mask-left) + var(--tab-mask-fade)),
+    #000 calc(100% - var(--tab-mask-right) - var(--tab-mask-fade)),
+    transparent calc(100% - var(--tab-mask-right))
+  );
+}
+
+.dashboard-tabs-wrap::before,
+.dashboard-tabs-wrap::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  width: var(--tab-mask-fade);
+  height: 1px;
+  pointer-events: none;
+  z-index: 2;
+  background: var(--color-header-border);
+}
+
+.dashboard-tabs-wrap::before {
+  left: 0;
+  -webkit-mask-image: linear-gradient(to right, #000, transparent);
+  mask-image: linear-gradient(to right, #000, transparent);
+}
+
+.dashboard-tabs-wrap::after {
+  right: 0.2px;
+  -webkit-mask-image: linear-gradient(to left, #000, transparent);
+  mask-image: linear-gradient(to left, #000, transparent);
 }
 
 .dashboard-tabs-wrap .simplebar-track.simplebar-vertical {
@@ -3497,7 +3545,7 @@ body.objectKanbanColumnResizing * {
   display: flex;
   align-items: flex-start;
   gap: 4px;
-  padding-left: 14px;
+  padding-left: 20px;
   height: 100%;
   max-height: 42px;
 }
@@ -3505,6 +3553,7 @@ body.objectKanbanColumnResizing * {
 .dashboard-tab-item-container {
   height: 42px;
   position: relative;
+  flex-shrink: 0;
 }
 
 .dashboard-tab-item-container-active {
@@ -3553,7 +3602,7 @@ body.objectKanbanColumnResizing * {
   justify-content: center;
   overflow: visible;
   margin: 5px 0 0 0;
-  padding: 0 8px 0 8px;
+  padding: 0 10px 0 10px;
   border: 1px solid var(--color-list-view-tabs-border);
   border-radius: 12px;
   background: transparent;
@@ -3566,12 +3615,19 @@ body.objectKanbanColumnResizing * {
   outline: none;
 }
 
+.dashboard-tab-item-body {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
 .dashboard-tab-item-icon {
   display: flex;
   align-items: center;
   min-height: 30px;
   line-height: 30px;
   margin-right: 6px;
+  flex-shrink: 0;
 }
 
 .dashboard-tab-item:focus-visible {
@@ -3729,6 +3785,88 @@ body.objectKanbanColumnResizing * {
 
 .dashboard-tabs-label {
   max-width: 280px;
+  min-width: 0;
+}
+
+.dashboard-tab-item-container[data-sticky-placeholder='true']
+  > .dashboard-tab-item {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.dashboard-tabs[data-sticky-edge] .dashboard-tab-item-container:before,
+.dashboard-tabs[data-sticky-edge] .dashboard-tabs-add-button-container:before,
+.dashboard-tabs[data-sticky-edge] .dashboard-tabs-wrap::before,
+.dashboard-tabs[data-sticky-edge] .dashboard-tabs-wrap::after {
+  content: none;
+  display: none;
+}
+
+.dashboard-tabs-sticky-line {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 3;
+  border-bottom: 1px solid var(--color-header-border);
+}
+
+.dashboard-tabs-sticky-line[data-edge] {
+  display: block;
+}
+
+.dashboard-tab-sticky-clone {
+  position: absolute;
+  top: 0;
+  height: 42px;
+  z-index: 5;
+  visibility: hidden;
+  pointer-events: none;
+  box-sizing: border-box;
+  flex: none;
+  overflow: visible;
+}
+
+.dashboard-tab-sticky-clone[data-edge] {
+  visibility: visible;
+  width: var(--tab-sticky-width);
+}
+
+.dashboard-tab-sticky-clone[data-edge] .dashboard-tab-item {
+  pointer-events: auto;
+  box-sizing: border-box;
+  width: var(--tab-sticky-width);
+  min-width: var(--tab-sticky-width);
+  max-width: var(--tab-sticky-width);
+  justify-content: flex-start;
+  overflow: visible;
+}
+
+.dashboard-tab-sticky-clone[data-edge] .dashboard-tab-item-body {
+  width: 100%;
+  overflow: hidden;
+}
+
+.dashboard-tab-sticky-clone[data-edge] .dashboard-tab-item-icon {
+  margin-right: calc(6px * var(--tab-label-opacity, 1));
+}
+
+.dashboard-tab-sticky-clone[data-edge] .dashboard-tabs-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  opacity: var(--tab-label-opacity, 1);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.dashboard-tab-sticky-clone[data-edge] .dashboard-tabs-label .ant-typography {
+  max-width: 100% !important;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.dashboard-tab-sticky-clone[data-faded='true'] .dashboard-tabs-label {
+  pointer-events: none;
 }
 
 .dashboard-tabs-close {
@@ -3745,6 +3883,11 @@ body.objectKanbanColumnResizing * {
   opacity: 0.7;
   cursor: pointer;
   flex-shrink: 0;
+  transition: opacity 0.2s ease;
+}
+
+.dashboard-tabs-close:hover {
+  opacity: 1;
 }
 
 .dashboard-tabs-close::before {

src/components/Dashboard/common/DashboardTabs.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { useCallback, useState } from 'react'
+import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import { Button, Flex, Typography } from 'antd'
 import classNames from 'classnames'
 import ScrollBox from './ScrollBox'
@@ -64,6 +64,354 @@ DashboardTabLabel.propTypes = {
   onClose: PropTypes.func
 }
 
+const DashboardTabItem = ({
+  tab,
+  tabIndex,
+  isSelected,
+  isDragging,
+  dropPosition,
+  onDragStart,
+  onDragEnd,
+  onClick,
+  onKeyDown,
+  onDragOver,
+  onDrop,
+  onClose
+}) => {
+  const model = tab.modelName ? getModelByName(tab.modelName) : null
+  const Icon = model?.icon || HomeIcon
+
+  return (
+    <button
+      type='button'
+      role='tab'
+      aria-selected={isSelected}
+      tabIndex={isSelected ? 0 : -1}
+      className={classNames(
+        'dashboard-tab-item',
+        'electrobun-webkit-app-region-no-drag',
+        {
+          'dashboard-tab-item-active': isSelected,
+          'dashboard-tab-item-dragging': isDragging,
+          'dashboard-tab-item-drop-before': dropPosition === 'before',
+          'dashboard-tab-item-drop-after': dropPosition === 'after'
+        }
+      )}
+      draggable
+      onDragStart={(event) => onDragStart(event, tab.id)}
+      onDragEnd={onDragEnd}
+      onClick={() => onClick(tab.id)}
+      onKeyDown={(event) => onKeyDown(event, tabIndex)}
+      onDragOver={(event) => onDragOver(event, tab)}
+      onDrop={(event) => onDrop(event, tab)}
+    >
+      <DashboardTabChrome />
+      <span className='dashboard-tab-item-body'>
+        <span className='dashboard-tab-item-icon'>
+          <Icon style={{ fontSize: 14 }} color='secondary' />
+        </span>
+        <DashboardTabLabel tab={tab} onClose={onClose} />
+      </span>
+    </button>
+  )
+}
+
+DashboardTabItem.propTypes = {
+  tab: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    modelName: PropTypes.string
+  }).isRequired,
+  tabIndex: PropTypes.number.isRequired,
+  isSelected: PropTypes.bool,
+  isDragging: PropTypes.bool,
+  dropPosition: PropTypes.oneOf(['before', 'after']),
+  onDragStart: PropTypes.func.isRequired,
+  onDragEnd: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
+  onDragOver: PropTypes.func.isRequired,
+  onDrop: PropTypes.func.isRequired,
+  onClose: PropTypes.func
+}
+
+const STICKY_EDGE_INSET = 20
+const STICKY_LINE_CORNER_GAP = 16
+const STICKY_MASK_INSET = 58
+
+const measureTabMetrics = (container) => {
+  const button = container.querySelector('.dashboard-tab-item')
+  const icon = container.querySelector('.dashboard-tab-item-icon')
+  if (!button || !icon) {
+    return {
+      naturalWidth: container.offsetWidth,
+      minWidth: container.offsetWidth
+    }
+  }
+
+  const styles = window.getComputedStyle(button)
+  const minWidth = Math.ceil(
+    icon.getBoundingClientRect().width +
+      parseFloat(styles.paddingLeft) +
+      parseFloat(styles.paddingRight) +
+      parseFloat(styles.borderLeftWidth) +
+      parseFloat(styles.borderRightWidth)
+  )
+
+  return {
+    naturalWidth: container.offsetWidth,
+    minWidth: Math.max(minWidth, 1)
+  }
+}
+
+const hideStickyClone = (cloneEl) => {
+  if (!cloneEl) return
+  delete cloneEl.dataset.edge
+  delete cloneEl.dataset.faded
+  cloneEl.style.removeProperty('--tab-sticky-width')
+  cloneEl.style.removeProperty('--tab-label-opacity')
+  cloneEl.style.left = ''
+  cloneEl.style.right = ''
+  cloneEl.setAttribute('inert', '')
+}
+
+const setSimplebarMaskInset = (maskEl, edge, inset) => {
+  if (!maskEl) return
+  if (!edge) {
+    maskEl.style.removeProperty('--tab-mask-left')
+    maskEl.style.removeProperty('--tab-mask-right')
+    return
+  }
+  if (edge === 'left') {
+    maskEl.style.setProperty('--tab-mask-left', `${inset}px`)
+    maskEl.style.removeProperty('--tab-mask-right')
+  } else {
+    maskEl.style.removeProperty('--tab-mask-left')
+    maskEl.style.setProperty('--tab-mask-right', `${inset}px`)
+  }
+}
+
+const setStickyStripLine = (root, lineEl, edge, lineInset) => {
+  if (root) {
+    if (!edge) delete root.dataset.stickyEdge
+    else root.dataset.stickyEdge = edge
+  }
+  const padding = 4
+  if (!lineEl) return
+  if (!edge) {
+    delete lineEl.dataset.edge
+    lineEl.style.left = ''
+    lineEl.style.right = ''
+    return
+  }
+  lineEl.dataset.edge = edge
+  if (edge === 'left') {
+    lineEl.style.left = `${lineInset + padding}px`
+    lineEl.style.right = '0px'
+  } else {
+    lineEl.style.left = '0px'
+    lineEl.style.right = `${lineInset + padding}px`
+  }
+}
+
+const setOriginalStickyState = (container, sticky) => {
+  if (!container) return
+  if (sticky) {
+    container.dataset.stickyPlaceholder = 'true'
+    container.setAttribute('inert', '')
+  } else {
+    delete container.dataset.stickyPlaceholder
+    container.removeAttribute('inert')
+  }
+}
+
+const bindActiveTabStickyScroll = (scrollEl, list, cloneEl, root, lineEl) => {
+  const state = {
+    activeEl: null,
+    updating: false
+  }
+  const maskEl = scrollEl.closest('.simplebar-mask')
+  const wrapperEl = scrollEl.closest('.simplebar-wrapper') || scrollEl
+
+  const clearStickyVisuals = () => {
+    hideStickyClone(cloneEl)
+    setStickyStripLine(root, lineEl, null)
+    setSimplebarMaskInset(maskEl, null)
+  }
+
+  const update = () => {
+    if (state.updating) return
+    state.updating = true
+
+    try {
+      const container = list.querySelector(
+        '.dashboard-tab-item-container-active'
+      )
+      if (state.activeEl && state.activeEl !== container) {
+        setOriginalStickyState(state.activeEl, false)
+      }
+      state.activeEl = container
+
+      if (!container || !cloneEl) {
+        clearStickyVisuals()
+        return
+      }
+
+      const metrics = measureTabMetrics(container)
+      const naturalWidth = metrics.naturalWidth
+      const minWidth = Math.min(metrics.minWidth, naturalWidth)
+      const maxShrink = Math.max(0, naturalWidth - minWidth)
+      const scrollLeft = scrollEl.scrollLeft
+      const viewportWidth = wrapperEl.clientWidth
+      if (viewportWidth <= 0) {
+        setOriginalStickyState(container, false)
+        clearStickyVisuals()
+        return
+      }
+
+      const wrapperRect = wrapperEl.getBoundingClientRect()
+      const containerRect = container.getBoundingClientRect()
+      const naturalLeft = scrollLeft + (containerRect.left - wrapperRect.left)
+      const isFirstTab = container === list.firstElementChild
+      if (isFirstTab && scrollLeft < 1) {
+        setOriginalStickyState(container, false)
+        clearStickyVisuals()
+        return
+      }
+      const overflowLeft = scrollLeft + STICKY_EDGE_INSET - naturalLeft
+      const overflowRight =
+        naturalLeft +
+        naturalWidth -
+        (scrollLeft + viewportWidth - STICKY_EDGE_INSET)
+
+      let edge = null
+      let overflow = 0
+      if (overflowLeft > 0.5 && overflowLeft >= overflowRight) {
+        edge = 'left'
+        overflow = overflowLeft
+      } else if (overflowRight > 0.5) {
+        edge = 'right'
+        overflow = overflowRight
+      }
+
+      if (!edge) {
+        setOriginalStickyState(container, false)
+        clearStickyVisuals()
+        return
+      }
+
+      const shrink = Math.min(overflow, maxShrink)
+      const visualWidth = Math.max(minWidth, naturalWidth - shrink)
+      const shrinkProgress = maxShrink === 0 ? 1 : shrink / maxShrink
+      const fade = 1 - shrinkProgress
+      const maskInset = STICKY_MASK_INSET * shrinkProgress
+
+      setOriginalStickyState(container, true)
+      cloneEl.removeAttribute('inert')
+      cloneEl.dataset.edge = edge
+      if (fade < 0.25) cloneEl.dataset.faded = 'true'
+      else delete cloneEl.dataset.faded
+
+      const parentRect =
+        cloneEl.offsetParent?.getBoundingClientRect() || wrapperRect
+      const cloneOffset =
+        edge === 'left'
+          ? wrapperRect.left - parentRect.left + STICKY_EDGE_INSET
+          : parentRect.right - wrapperRect.right + STICKY_EDGE_INSET
+      if (edge === 'left') {
+        cloneEl.style.left = `${cloneOffset}px`
+        cloneEl.style.right = 'auto'
+      } else {
+        cloneEl.style.left = 'auto'
+        cloneEl.style.right = `${cloneOffset}px`
+      }
+      cloneEl.style.setProperty('--tab-sticky-width', `${visualWidth}px`)
+      cloneEl.style.setProperty('--tab-label-opacity', String(fade))
+      setSimplebarMaskInset(maskEl, edge, maskInset)
+      setStickyStripLine(
+        root,
+        lineEl,
+        edge,
+        cloneOffset + visualWidth + STICKY_LINE_CORNER_GAP
+      )
+    } finally {
+      state.updating = false
+    }
+  }
+
+  let frame = 0
+  const scheduleUpdate = () => {
+    if (frame) return
+    frame = window.requestAnimationFrame(() => {
+      frame = 0
+      update()
+    })
+  }
+
+  update()
+  scrollEl.addEventListener('scroll', scheduleUpdate, { passive: true })
+  window.addEventListener('resize', scheduleUpdate)
+
+  const observer = new ResizeObserver(scheduleUpdate)
+  observer.observe(scrollEl)
+  if (wrapperEl !== scrollEl) observer.observe(wrapperEl)
+
+  return () => {
+    scrollEl.removeEventListener('scroll', scheduleUpdate)
+    window.removeEventListener('resize', scheduleUpdate)
+    observer.disconnect()
+    if (frame) window.cancelAnimationFrame(frame)
+    setOriginalStickyState(state.activeEl, false)
+    clearStickyVisuals()
+  }
+}
+
+const useActiveTabStickyScroll = (activeTabId, tabs) => {
+  const rootRef = useRef(null)
+  const listRef = useRef(null)
+  const cloneRef = useRef(null)
+  const lineRef = useRef(null)
+  const tabLayoutKey = `${activeTabId}:${tabs.map((tab) => `${tab.id}:${tab.title || ''}`).join('|')}`
+
+  useLayoutEffect(() => {
+    const root = rootRef.current
+    const list = listRef.current
+    const cloneEl = cloneRef.current
+    const lineEl = lineRef.current
+    if (!root || !list) return undefined
+
+    let cancelled = false
+    let teardown = () => {}
+    let frame = 0
+
+    const tryBind = () => {
+      if (cancelled) return
+      const scrollEl = root.querySelector('.simplebar-content-wrapper')
+      if (!scrollEl) {
+        frame = window.requestAnimationFrame(tryBind)
+        return
+      }
+      teardown = bindActiveTabStickyScroll(
+        scrollEl,
+        list,
+        cloneEl,
+        root,
+        lineEl
+      )
+    }
+
+    tryBind()
+
+    return () => {
+      cancelled = true
+      if (frame) window.cancelAnimationFrame(frame)
+      teardown()
+    }
+  }, [tabLayoutKey])
+
+  return { rootRef, listRef, cloneRef, lineRef }
+}
+
 const DashboardTabs = () => {
   const {
     tabs,
@@ -76,6 +424,10 @@ const DashboardTabs = () => {
     handleTabDragEnd,
     handleExternalTabDrop
   } = useNavigationTabs()
+  const { rootRef, listRef, cloneRef, lineRef } = useActiveTabStickyScroll(
+    activeTabId,
+    tabs
+  )
   const [draggedValue, setDraggedValue] = useState(null)
   const [dropTarget, setDropTarget] = useState(null)
 
@@ -232,9 +584,24 @@ const DashboardTabs = () => {
   }
 
   const isReordering = draggedValue != null || dropTarget != null
+  const activeTab = tabs.find((tab) => tab.id === activeTabId)
+  const activeTabIndex = activeTab
+    ? tabs.findIndex((tab) => tab.id === activeTabId)
+    : 0
+
+  const tabItemProps = {
+    onDragStart: handleItemDragStart,
+    onDragEnd: handleItemDragEnd,
+    onClick: selectTab,
+    onKeyDown: handleKeyDown,
+    onDragOver: handleItemDragOver,
+    onDrop: handleItemDrop,
+    onClose: closeTab
+  }
 
   return (
     <Flex
+      ref={rootRef}
       align='flex-start'
       gap={4}
       className={classNames(
@@ -248,6 +615,7 @@ const DashboardTabs = () => {
       <ScrollBox className='dashboard-tabs-wrap' horizontal>
         <Flex align='flex-start' gap={8} className='dashboard-tabs-inner'>
           <div
+            ref={listRef}
             className={classNames('dashboard-tabs-list', {
               'dashboard-tabs-reordering': isReordering
             })}
@@ -256,8 +624,6 @@ const DashboardTabs = () => {
             onDrop={handleListDrop}
           >
             {tabs.map((tab, index) => {
-              const model = tab.modelName ? getModelByName(tab.modelName) : null
-              const Icon = model?.icon || HomeIcon
               const isSelected = tab.id === activeTabId
               const isDragging =
                 draggedValue != null && String(draggedValue) === String(tab.id)
@@ -273,37 +639,20 @@ const DashboardTabs = () => {
                     'dashboard-tab-item-container-active': isSelected
                   })}
                 >
-                  <button
-                    type='button'
-                    role='tab'
-                    aria-selected={isSelected}
-                    tabIndex={isSelected ? 0 : -1}
-                    className={classNames(
-                      'dashboard-tab-item',
-                      'electrobun-webkit-app-region-no-drag',
-                      {
-                        'dashboard-tab-item-active': isSelected,
-                        'dashboard-tab-item-dragging': isDragging,
-                        'dashboard-tab-item-drop-before':
-                          isDropTarget && dropTarget.insertBefore,
-                        'dashboard-tab-item-drop-after':
-                          isDropTarget && !dropTarget.insertBefore
-                      }
-                    )}
-                    draggable
-                    onDragStart={(event) => handleItemDragStart(event, tab.id)}
-                    onDragEnd={handleItemDragEnd}
-                    onClick={() => selectTab(tab.id)}
-                    onKeyDown={(event) => handleKeyDown(event, index)}
-                    onDragOver={(event) => handleItemDragOver(event, tab)}
-                    onDrop={(event) => handleItemDrop(event, tab)}
-                  >
-                    <DashboardTabChrome />
-                    <span className='dashboard-tab-item-icon'>
-                      <Icon style={{ fontSize: 14 }} color='secondary' />
-                    </span>
-                    <DashboardTabLabel tab={tab} onClose={closeTab} />
-                  </button>
+                  <DashboardTabItem
+                    tab={tab}
+                    tabIndex={index}
+                    isSelected={isSelected}
+                    isDragging={isDragging}
+                    dropPosition={
+                      isDropTarget
+                        ? dropTarget.insertBefore
+                          ? 'before'
+                          : 'after'
+                        : undefined
+                    }
+                    {...tabItemProps}
+                  />
                 </div>
               )
             })}
@@ -319,6 +668,28 @@ const DashboardTabs = () => {
           </div>
         </Flex>
       </ScrollBox>
+      <div
+        ref={lineRef}
+        className='dashboard-tabs-sticky-line'
+        aria-hidden='true'
+      />
+      {activeTab ? (
+        <div
+          ref={cloneRef}
+          className='dashboard-tab-sticky-clone dashboard-tab-item-container dashboard-tab-item-container-active'
+        >
+          <DashboardTabItem
+            tab={activeTab}
+            tabIndex={activeTabIndex}
+            isSelected
+            isDragging={
+              draggedValue != null &&
+              String(draggedValue) === String(activeTab.id)
+            }
+            {...tabItemProps}
+          />
+        </div>
+      ) : null}
     </Flex>
   )
 }