Add separators and scroll button

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

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

@@ -5,7 +5,6 @@
 
 .DockTab {
   padding: $padding;
-  padding-right: 0;
 
   .Icon {
     &.material {
@@ -36,4 +35,8 @@
   &:last-child {
     padding-right: $padding;
   }
+
+  border-right-width: 2px;
+  border-right-color: var(--dockInfoBackground);
+  border-right-style: solid;
 }

src/renderer/components/dock/dock.tsx

@@ -91,6 +91,20 @@ class NonInjectedDock extends React.Component<Props & Dependencies> {
     }
   }
 
+  isScrollableRight = (): boolean => {
+    if(!this.element) return false;
+    const child = document.querySelector(".DockTabs");
+
+    const parentWidth = this.element.current.clientWidth;
+    const childWidth = child && child.clientWidth || 0;
+
+    return childWidth > parentWidth;
+  };
+
+  scrollToRight = (): void => {
+    console.log("Current", this.element?.current);
+  };
+
   renderTabContent() {
     const { isOpen, height, selectedTab } = this.props.dockStore;
 
@@ -132,6 +146,11 @@ class NonInjectedDock extends React.Component<Props & Dependencies> {
             onChangeTab={this.onChangeTab}
           />
           <div className="toolbar flex gaps align-center box grow">
+            <Icon
+              material="keyboard_arrow_right"
+              tooltip="Show tabs to the right"
+              onClick={this.scrollToRight}
+            />
             <div className="dock-menu box grow">
               <MenuActions usePortal triggerIcon={{ material: "add", className: "new-dock-tab", tooltip: "New tab" }} closeOnScroll={false}>
                 <MenuItem className="create-terminal-tab" onClick={() => this.props.createTerminalTab()}>