move indicator to left side

Author: sawka

cmd/wsh/cmd/wshcmd-tabindicator.go

@@ -74,10 +74,9 @@ func tabIndicatorRun(cmd *cobra.Command, args []string) (rtnErr error) {
 	}
 
 	event := wps.WaveEvent{
-		Event:   wps.Event_TabIndicator,
-		Scopes:  []string{waveobj.MakeORef(waveobj.OType_Tab, tabId).String()},
-		Data:    eventData,
-		Persist: 1024,
+		Event:  wps.Event_TabIndicator,
+		Scopes: []string{waveobj.MakeORef(waveobj.OType_Tab, tabId).String()},
+		Data:   eventData,
 	}
 
 	err := wshclient.EventPublishCommand(RpcClient, event, &wshrpc.RpcOpts{NoResponse: true})

frontend/app/tab/tab.scss

@@ -81,6 +81,21 @@
         }
     }
 
+    .tab-indicator {
+        position: absolute;
+        top: 50%;
+        left: 4px;
+        transform: translate3d(0, -50%, 0);
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: var(--zindex-tab-name);
+        padding: 1px 2px;
+        transition: none !important;
+    }
+
     .wave-button {
         position: absolute;
         top: 50%;

frontend/app/tab/tab.tsx

@@ -230,7 +230,7 @@ const Tab = memo(
                     onContextMenu={handleContextMenu}
                     data-tab-id={id}
                 >
-                    <div className="tab-inner group">
+                    <div className="tab-inner">
                         <div
                             ref={editableRef}
                             className={clsx("name", { focused: isEditable })}
@@ -244,7 +244,7 @@ const Tab = memo(
                         </div>
                         {indicator && (
                             <div
-                                className="bell wave-button pointer-events-none group-hover:opacity-80"
+                                className="tab-indicator pointer-events-none"
                                 style={{ color: indicator.color || "#fbbf24" }}
                                 title="Activity notification"
                             >