Add custom scrollbar on hover

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/dock-tab.module.scss

@@ -7,7 +7,7 @@
   padding: var(--padding);
   height: 32px;
   position: relative;
-  background: no-repeat left 50% linear-gradient(0deg, #43424d, #43424d);
+  border-right: 1px solid #43424d;
   background-size: 1px 3ch;
   overflow: hidden;
 
@@ -17,6 +17,10 @@
   flex-basis: 0;
   max-width: fit-content;
 
+  &:last-child {
+    border-right: none;
+  }
+
   &.pinned {
     padding-right: var(--padding);
   }
@@ -28,7 +32,7 @@
   &:global(.active) {
     background-color: hsl(245deg 8% 28%);
     background-image: none;
-    border-bottom: 2px solid var(--primary);
+    border-bottom: 1px solid var(--primary);
 
     .close {
       opacity: 1;

src/renderer/components/dock/dock-tabs.module.scss

@@ -9,6 +9,28 @@
   display: flex;
   overflow: hidden;
 
+  &.scrollable {
+    overflow: auto;
+    overflow-x: overlay;
+
+    &::-webkit-scrollbar-thumb {
+      background-color: transparent;
+    }
+
+    &:hover {
+      &::-webkit-scrollbar {
+        width: 100%;
+        height: 3px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 0;
+        height: 3px;
+        background-color: rgba(106, 115, 125, 0.2);
+      }
+    }
+  }
+
   > div {
     width: 100%;
   }

src/renderer/components/dock/dock-tabs.tsx

@@ -13,7 +13,7 @@ import type { DockTab as DockTabModel } from "./dock/store";
 import { TabKind } from "./dock/store";
 import { TerminalTab } from "./terminal/dock-tab";
 import { useResizeObserver } from "../../hooks";
-import { cssVar } from "../../utils";
+import { cssNames, cssVar } from "../../utils";
 
 export interface DockTabsProps {
   tabs: DockTabModel[];
@@ -62,12 +62,12 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
   useResizeObserver(elem.current, updateScrollbarVisibility);
 
   return (
-    <div className={styles.dockTabs} ref={elem}>
+    <div className={cssNames(styles.dockTabs, { [styles.scrollable]: showScrollbar })} ref={elem}>
       <Tabs
         autoFocus={autoFocus}
         value={selectedTab}
         onChange={onChangeTab}
-        scrollable={showScrollbar}
+        scrollable={false}
       >
         {tabs.map(tab => <Fragment key={tab.id}>{renderTab(tab)}</Fragment>)}
       </Tabs>