feat: scrollable tabs list

app/client/packages/design-system/ads/src/DismissibleTab/DismissibleTabBar.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import {
@@ -72,20 +72,6 @@ const Template = (props: StoryProps) => {
     setActiveTabId(tabId);
   };
 
-  useEffect(
-    function scrollAddedTabIntoView() {
-      const activeTabElement = document.querySelector(".editor-tab.active");
-
-      if (activeTabElement) {
-        activeTabElement.scrollIntoView({
-          inline: "nearest",
-          behavior: "smooth",
-        });
-      }
-    },
-    [activeTabId],
-  );
-
   return (
     <div style={{ width: containerWidth }}>
       <DismissibleTabBar disableAdd={disableAdd} onTabAdd={handleTabAdd}>

app/client/packages/design-system/ads/src/DismissibleTab/DismissibleTabBar.styles.ts

@@ -1,14 +1,27 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { Button } from "..";
 
-export const Root = styled.div`
+export const animatedLeftBorder = (showLeftBorder: boolean) => css`
+  transition: border-color 0.5s ease;
+  border-left: 1px solid transparent;
+
+  border-left-color: ${showLeftBorder
+    ? "var(--ads-v2-color-border-muted)"
+    : "transparent"};
+`;
+
+export const Root = styled.div<{
+  $showLeftBorder?: boolean;
+}>`
   display: flex;
   align-items: center;
   overflow: hidden;
   white-space: nowrap;
   position: relative;
   height: 32px;
+
+  ${({ $showLeftBorder }) => animatedLeftBorder($showLeftBorder ?? false)};
 `;
 
 export const TabsContainer = styled.div`
@@ -21,9 +34,10 @@ export const TabsContainer = styled.div`
 
 export const StickySentinel = styled.div`
   width: 1px;
+  height: 100%;
 `;
 
-export const PlusButtonContainer = styled.div<{ $isStuck?: boolean }>`
+export const PlusButtonContainer = styled.div<{ $showLeftBorder?: boolean }>`
   position: sticky;
   right: 0;
   border: none;
@@ -33,11 +47,7 @@ export const PlusButtonContainer = styled.div<{ $isStuck?: boolean }>`
   align-items: center;
   justify-content: center;
 
-  ${({ $isStuck }) =>
-    $isStuck &&
-    `
-      border-left: 1px solid var(--ads-v2-color-border-muted);
-    `}
+  ${({ $showLeftBorder }) => animatedLeftBorder($showLeftBorder ?? false)};
 `;
 
 export const PlusButton = styled(Button)`

app/client/packages/design-system/ads/src/DismissibleTab/DismissibleTabBar.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { noop } from "lodash";
+import { usePrevious } from "@mantine/hooks";
 
 import { ScrollArea } from "../ScrollArea";
 
@@ -23,37 +24,66 @@ export const DismissibleTabBar = ({
   disableAdd = false,
   onTabAdd,
 }: DismissibleTabBarProps) => {
-  const [isStuck, setIsStuck] = useState(false);
+  const [isLeftStuck, setIsLeftStuck] = useState(false);
+  const [isRightStuck, setIsRightStuck] = useState(false);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const sentinelLeftRef = useRef<HTMLDivElement | null>(null);
+  const sentinelRightRef = useRef<HTMLDivElement | null>(null);
+
+  const totalChildren = React.Children.count(children);
+  const prevTotalChildren = usePrevious(totalChildren) ?? totalChildren;
 
   const handleAdd = disableAdd ? noop : onTabAdd;
 
   useEffect(function observeSticky() {
-    if (!containerRef.current || !sentinelRef.current) return;
+    if (
+      !containerRef.current ||
+      !sentinelLeftRef.current ||
+      !sentinelRightRef.current
+    )
+      return;
 
     const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsStuck(false);
-        } else {
-          setIsStuck(true);
-        }
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.target === sentinelLeftRef.current) {
+            setIsLeftStuck(!entry.isIntersecting);
+          }
+
+          if (entry.target === sentinelRightRef.current) {
+            setIsRightStuck(!entry.isIntersecting);
+          }
+        });
       },
       {
         root: containerRef.current,
         threshold: 1.0,
       },
     );
 
-    observer.observe(sentinelRef.current);
+    observer.observe(sentinelLeftRef.current);
+    observer.observe(sentinelRightRef.current);
 
     return () => observer.disconnect();
   }, []);
 
+  useEffect(
+    function scrollAddedTabIntoView() {
+      const element = sentinelRightRef.current;
+
+      if (element && totalChildren > prevTotalChildren) {
+        element.scrollIntoView({
+          inline: "center",
+          behavior: "smooth",
+        });
+      }
+    },
+    [totalChildren, prevTotalChildren],
+  );
+
   return (
-    <Styled.Root>
+    <Styled.Root $showLeftBorder={isLeftStuck}>
       <ScrollArea
         data-testid="t--editor-tabs"
         options={SCROLL_AREA_OPTIONS}
@@ -62,13 +92,14 @@ export const DismissibleTabBar = ({
         style={SCROLL_AREA_STYLE}
       >
         <Styled.TabsContainer data-testid="t--tabs-container" role="tablist">
+          <Styled.StickySentinel ref={sentinelLeftRef} />
           {children}
-          <Styled.StickySentinel ref={sentinelRef} />
+          <Styled.StickySentinel ref={sentinelRightRef} />
         </Styled.TabsContainer>
       </ScrollArea>
-      <Styled.PlusButtonContainer $isStuck={isStuck}>
+      <Styled.PlusButtonContainer $showLeftBorder={isRightStuck}>
         <Styled.PlusButton
-          disabled={disableAdd}
+          isDisabled={disableAdd}
           isIconButton
           kind="tertiary"
           onClick={handleAdd}