Function TabList

frontend/src/react/components/sql-editor/TabList.tsx:62–381

()

 * right-click context menu delegated to TabContextMenu.
 */
export function TabList() {
  const { t } = useTranslation();
  const createWorksheet = useSQLEditorStore((s) => s.createWorksheet);

  // Zustand's selector subscribes to in-place tab mutations because
  // `updateTab` reassigns / triggers an immer produce on `tabsById`,
  // bumping the slice identity.
  const tabs = useOpenTabList();
  const currentTabId = useSQLEditorTabState((s) => s.currentTabId);

  const scrollRef = useRef<HTMLDivElement>(null);
  const contextMenuRef = useRef<TabContextMenuHandle>(null);

  const [loading, setLoading] = useState(false);
  const [scrollState, setScrollState] = useState({
    moreLeft: false,
    moreRight: false,
  });
  const [pendingClose, setPendingClose] = useState<PendingClose | null>(null);

  const recalculateScrollState = useCallback(() => {
    contextMenuRef.current?.hide();
    const el = scrollRef.current;
    if (!el) return;
    const { scrollWidth, offsetWidth, scrollLeft } = el;
    setScrollState({
      moreLeft: scrollLeft > 0,
      moreRight:
        scrollWidth > offsetWidth
          ? scrollLeft + offsetWidth < scrollWidth
          : false,
    });
  }, []);

  // Initial measure + resize observer.
  useLayoutEffect(() => {
    recalculateScrollState();
    const el = scrollRef.current;
    if (!el) return;
    const ro = new ResizeObserver(() => recalculateScrollState());
    ro.observe(el);
    return () => ro.disconnect();
  }, [recalculateScrollState]);

  // Prevent the trackpad / horizontal wheel from triggering browser
  // back/forward navigation when the tab list can't scroll further.
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const handler = (e: WheelEvent) => {
      const maxX = el.scrollWidth - el.clientWidth;
      const target = el.scrollLeft + e.deltaX;
      if (target < 0 || target > maxX) {
        e.preventDefault();
      }
    };
    el.addEventListener("wheel", handler, { passive: false });
    return () => el.removeEventListener("wheel", handler);