Copy old Dock

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

packages/business-features/dock-old/dock-tabs.tsx

@@ -0,0 +1,81 @@
+import React, { Fragment, useEffect, useRef, useState } from "react";
+import { Tabs } from "../tabs/tabs";
+import type { DockTab as DockTabModel } from "./store";
+import { cssVar } from "@k8slens/utilities";
+import { useResizeObserver } from "../../hooks";
+
+export interface DockTabsProps {
+  tabs: DockTabModel[];
+  autoFocus: boolean;
+  selectedTab: DockTabModel | undefined;
+  onChangeTab: (tab: DockTabModel) => void;
+}
+
+export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabsProps) => {
+  const elem = useRef<HTMLDivElement | null>(null);
+  const minTabSize = useRef<number>(0);
+  const [showScrollbar, setShowScrollbar] = useState(false);
+
+  const getTabElements = (): HTMLDivElement[] => {
+    return Array.from(elem.current?.querySelectorAll(".Tabs .Tab") ?? []);
+  };
+
+  const renderTab = (tab?: DockTabModel) => {
+    if (!tab) {
+      return null;
+    }
+
+    switch (tab.kind) {
+    }
+  };
+
+  const scrollActiveTabIntoView = () => {
+    const tab = elem.current?.querySelector(".Tab.active");
+
+    tab?.scrollIntoView();
+  };
+
+  const updateScrollbarVisibility = () => {
+    const allTabsShrunk = getTabElements().every((tab) => tab.offsetWidth == minTabSize.current);
+
+    setShowScrollbar(allTabsShrunk);
+  };
+
+  const scrollTabsWithMouseWheel = (left: number) => {
+    elem.current?.children[0]?.scrollBy({ left });
+  };
+
+  const onMouseWheel = (event: React.WheelEvent) => {
+    scrollTabsWithMouseWheel(event.deltaY);
+  };
+
+  useEffect(() => {
+    if (elem.current) {
+      const cssVars = cssVar(elem.current);
+
+      minTabSize.current = cssVars.get("--min-tab-width").valueOf();
+    }
+  });
+
+  useResizeObserver(elem.current, () => {
+    scrollActiveTabIntoView();
+    updateScrollbarVisibility();
+  });
+
+  return (
+    <div className={styles.dockTabs} ref={elem} role="tablist">
+      <Tabs
+        autoFocus={autoFocus}
+        value={selectedTab}
+        onChange={onChangeTab}
+        onWheel={onMouseWheel}
+        scrollable={showScrollbar}
+        className={styles.tabs}
+      >
+        {tabs.map((tab) => (
+          <Fragment key={tab.id}>{renderTab(tab)}</Fragment>
+        ))}
+      </Tabs>
+    </div>
+  );
+};