new tabs design (#99)

frontend/app/block/block.less

@@ -114,6 +114,7 @@
                     justify-content: center;
                     align-items: center;
                     opacity: 0.5;
+                    cursor: pointer;
 
                     &:hover {
                         opacity: 1;
@@ -128,6 +129,7 @@
                     font-size: 11px;
                     width: 24px;
                     padding: 4px 6px;
+                    cursor: pointer;
 
                     &:hover {
                         opacity: 1;

frontend/app/tab/tab.less

@@ -2,17 +2,22 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .tab {
-    cursor: pointer;
     width: 130px;
     height: 100%;
     position: absolute;
     box-sizing: border-box;
-    cursor: pointer;
     font-weight: bold;
     color: var(--secondary-text-color);
-    white-space: nowrap;
+    padding: 4px 3px;
-    border-top: 2px solid transparent;
+
-    background-color: rgba(0, 8, 3, 0);
+    .tab-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        white-space: nowrap;
+        border-radius: 6px;
+        background: rgba(255, 255, 255, 0.05);
+    }
 
     &.animate {
         transition:
@@ -21,8 +26,13 @@
     }
 
     &.active {
-        border-top: 2px solid var(--tab-green);
+        .tab-inner {
-        background-color: var(--tab-green);
+            background: radial-gradient(
+                133.33% 73.57% at 50% 100%,
+                rgba(118, 255, 53, 0.3) 0%,
+                rgba(255, 255, 255, 0.1) 100%
+            );
+        }
     }
 
     .name {
@@ -30,8 +40,11 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        -webkit-user-select: none;
+        user-select: none;
         z-index: 3;
+        font-size: 11px;
+        font-style: normal;
+        font-weight: 500;
 
         &.focused {
             outline: none;
@@ -71,10 +84,11 @@
         z-index: 3;
         transform: translateY(-50%);
         right: 5px;
+        opacity: 0.5;
 
         &:hover {
-            border: 1px solid var(--border-color);
+            opacity: 1;
-            border-radius: 2px;
+            cursor: pointer;
         }
 
         i {
@@ -82,7 +96,7 @@
         }
     }
 
-    &:hover .close {
+    &.active:hover .close {
         visibility: visible;
     }
 
@@ -92,25 +106,25 @@
         }
     }
 
-    &.active {
+    // &.active {
-        .mask {
+    //     .mask {
-            position: absolute;
+    //         position: absolute;
-            height: 100%;
+    //         height: 100%;
-            width: 100%;
+    //         width: 100%;
-            top: 0;
+    //         top: 0;
-            left: 0;
+    //         left: 0;
-            z-index: 2;
+    //         z-index: 2;
-            background-image: linear-gradient(
+    //         background-image: linear-gradient(
-                to top,
+    //             to top,
-                rgba(0, 0, 0, 0.9) 20%,
+    //             rgba(0, 0, 0, 0.9) 20%,
-                rgba(0, 0, 0, 0.8) 60%,
+    //             rgba(0, 0, 0, 0.8) 60%,
-                rgba(0, 0, 0, 0.7) 100%
+    //             rgba(0, 0, 0, 0.7) 100%
-            );
+    //         );
-            pointer-events: none;
+    //         pointer-events: none;
-        }
+    //     }
-    }
+    // }
 
     &.isDragging:not(.active) {
-        background-color: rgba(0, 8, 3, 1);
+        // background-color: rgba(0, 8, 3, 1);
     }
 }

frontend/app/tab/tab.tsx

@@ -127,7 +127,7 @@ const Tab = React.memo(
                     onContextMenu={handleContextMenu}
                     data-tab-id={id}
                 >
-                    {isFirst && <div className="vertical-line first" />}
+                    {/* {isFirst && <div className="vertical-line first" />}
                     <div
                         ref={editableRef}
                         className={clsx("name", { focused: isEditable })}
@@ -143,7 +143,28 @@ const Tab = React.memo(
                     {active && <div className="mask" />}
                     <Button className="secondary ghost close" onClick={onClose} onMouseDown={handleMouseDownOnClose}>
                         <i className="fa fa-solid fa-xmark" />
-                    </Button>
+                    </Button> */}
+                    <div className="tab-inner">
+                        <div
+                            ref={editableRef}
+                            className={clsx("name", { focused: isEditable })}
+                            contentEditable={isEditable}
+                            onDoubleClick={handleDoubleClick}
+                            onBlur={handleBlur}
+                            onKeyDown={handleKeyDown}
+                            suppressContentEditableWarning={true}
+                        >
+                            {tabData?.name}
+                        </div>
+                        {active && <div className="mask" />}
+                        <Button
+                            className="secondary ghost close"
+                            onClick={onClose}
+                            onMouseDown={handleMouseDownOnClose}
+                        >
+                            <i className="fa fa-solid fa-xmark" />
+                        </Button>
+                    </div>
                 </div>
             );
         }

frontend/app/tab/tabbar.less

@@ -10,7 +10,7 @@
     .tab-bar {
         position: relative; // Needed for absolute positioning of child tabs
         margin-left: 100px;
-        height: 34px;
+        height: 38px;
         // 36 is the width of add tab button
         // 100 is offset from the left, for macOS window controls and dragging
         // 50 right offset for dragging
@@ -30,6 +30,15 @@
         align-items: center;
         justify-content: center;
         background-color: var(--main-bg-color);
+        opacity: 0.5;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        i {
+            font-size: 11px;
+        }
     }
 
     .window-drag {

frontend/app/theme.less

@@ -18,6 +18,7 @@
     --error-color: rgb(229, 77, 46);
     --warning-color: rgb(224, 185, 86);
     --success-color: rgb(78, 154, 6);
+    --hover-bg-color: rgba(255, 255, 255, 0.1);
 
     /* scrollbar colors */
     --scrollbar-background-color: var(--main-bg-color);