feat: add more option button in tab bar

Author: devvaannsh

src/extensionsIntegrated/TabBar/html/tabbar-pane.html

@@ -1,5 +1,8 @@
 <div id="tab-bar-container" class="tab-bar-container">
     <div id="phoenix-tab-bar" class="phoenix-tab-bar">
-        
+
+    </div>
+    <div id="tab-bar-more-options" class="tab-bar-more-options">
+        <i class="fa-solid fa-ellipsis-vertical"></i>
     </div>
 </div>

src/extensionsIntegrated/TabBar/html/tabbar-second-pane.html

@@ -1,5 +1,8 @@
 <div id="tab-bar-container" class="tab-bar-container">
     <div id="phoenix-tab-bar-2" class="phoenix-tab-bar">
-        
+
+    </div>
+    <div id="tab-bar-more-options" class="tab-bar-more-options">
+        <i class="fa-solid fa-ellipsis-vertical"></i>
     </div>
 </div>

src/styles/Extn-TabBar.less

@@ -1,33 +1,64 @@
 .tab-bar-container {
-    position: relative;
+    display: flex;
+    align-items: center;
     background-color: #1E1E1E;
     border-bottom: 1px solid #333;
+    position: relative;
+    overflow: hidden;
 }
 
+
 .phoenix-tab-bar {
-    height: 28px;
-    background-color: #1E1E1E;
+    flex: 1;
+    height: 2rem;
     display: flex;
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
     transition: height 0.3s ease;
     scroll-behavior: smooth;
+    background-color: #1E1E1E;
 }
 
+
 .phoenix-tab-bar::-webkit-scrollbar {
-    height: 4px;
+    height: 0.25rem;
+}
+
+
+.tab-bar-more-options {
+    display: flex;
+    align-items: center;
+    height: 2rem;
+    padding: 0 0.5rem;
+    cursor: pointer;
+    position: relative;
+    z-index: 2;
+    margin-left: auto;
 }
 
-.phoenix-tab-bar .hover {
+
+.tab-bar-more-options:hover {
     background-color: #333;
 }
 
+
+.tab-bar-more-options::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -1rem;
+    width: 1rem;
+    height: 100%;
+    pointer-events: none;
+    background: linear-gradient(to right, rgba(30, 30, 30, 0), #1E1E1E);
+}
+
+
 .tab {
     display: inline-flex;
     align-items: center;
-    padding: 0 8px;
-    padding-top: 1px;
+    padding: 0 0.5rem;
     height: 100%;
     background-color: #2D2D2D;
     border-right: 1px solid #333;
@@ -39,89 +70,104 @@
     transition: transform 60ms ease, opacity 60ms ease;
 }
 
-.tab, .tab-close, .tab-icon, .tab-name {
+
+.tab,
+.tab-close,
+.tab-icon,
+.tab-name {
     transition: all 120ms ease-out;
 }
 
+
 .tab-icon {
     display: flex;
     align-items: center;
     margin-bottom: -2px;
 }
 
+
 .tab-name {
     display: inline-flex;
     align-items: center;
-    font-size: 12px;
+    font-size: 0.75rem;
     letter-spacing: 0.4px;
     word-spacing: 0.75px;
 }
 
+
 .tab .tab-dirname {
-    font-size: 10px;
+    font-size: 0.65rem;
     opacity: 0.7;
     font-weight: normal;
 }
 
+
 .tab.active {
     background-color: #3D3D3D;
 }
 
+
 .tab:hover {
     background-color: #4d4949;
     cursor: pointer;
 }
 
+
 .tab.active::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    height: 2.2px;
+    height: 0.15rem;
     background-color: #75BEFF;
 }
 
+
 .tab.dirty::before {
     content: "•";
     color: #8D8D8E;
-    font-size: 26px;
-    margin-right: 4px;
+    font-size: 1.6rem;
+    margin-right: 0.25rem;
     position: absolute;
-    left: 5px;
-    top: 4px;
+    left: 0.3rem;
+    top: 0.25rem;
 }
 
 .tab.dirty .tab-icon {
-    margin-left: 10px;
+    margin-left: 1rem;
 }
 
+
 .tab-close {
-    font-size: 12px;
+    font-size: 0.75rem;
     font-weight: 300;
-    padding: 1px 4px 0.4px 4px;
-    margin-left: 4px;
-    margin-top: -1px;
+    padding: 0.2rem 0.5rem;
+    margin-left: 0.5rem;
+    margin-top: -0.1rem;
     color: #CCC;
     transition: all 0.2s ease;
-    border-radius: 3px;
+    border-radius: 0.25rem;
     visibility: hidden;
     opacity: 0;
     pointer-events: none;
 }
 
+
 .tab:hover .tab-close,
 .tab.active .tab-close {
     visibility: visible;
     opacity: 1;
     pointer-events: auto;
 }
 
+
 .tab-close:hover {
     cursor: pointer;
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+
 .tab.dragging {
     opacity: 0.7;
     transform: scale(0.95);
@@ -134,6 +180,7 @@
     background-color: #383838;
 }
 
+
 .tab-drag-indicator {
     position: fixed;
     width: 2px;
@@ -150,9 +197,11 @@
     0% {
         opacity: 0.7;
     }
+
     50% {
         opacity: 1;
     }
+
     100% {
         opacity: 0.7;
     }