Tweak the color of the output status indicator, adjust the placement of the tab end-icons a bit (#236)

* Tweak the color of the output status indicator, adjust the placement of the tab end-icons a bit

* adjust the margins a bit more

* a few more slight adjustments to even out the spacing

* save work

* fix nullref, some smaller tweaks to the front icon

* made the tab slightly smaller so that the ratios made more sense

* remove unnecessary width

* format fix

src/app/common/common.less

@@ -1160,7 +1160,6 @@
 .status-indicator {
     position: relative;
     top: 1px;
-    margin-right: 3px;
 
     &.error {
         color: @term-red;
@@ -1169,6 +1168,6 @@
         color: @term-green;
     }
     &.output {
-        color: @text-primary;
+        color: @term-white;
     }
 }

src/app/workspace/screen/tab.tsx

@@ -124,9 +124,11 @@ class ScreenTab extends React.Component<
                     {screen.name.get()}
                 </div>
                 <div className="end-icon">
-                    <StatusIndicator level={statusIndicatorLevel} />
+                    <div className="end-icon-inner">
-                    {tabIndex}
+                        <StatusIndicator level={statusIndicatorLevel}/>
-                    {settings}
+                        {tabIndex}
+                        {settings}
+                    </div>
                 </div>
             </Reorder.Item>
         );

src/app/workspace/screen/tabs.less

@@ -6,6 +6,7 @@
 
     &:first-child {
         border-radius: 8px 0px 0px 0px;
+        padding-left: 5px;
     }
 
     &.color-green,
@@ -261,21 +262,21 @@
             display: flex;
             flex-direction: row;
             height: 3em;
-            min-width: 14em;
+            min-width: 13.6em;
-            max-width: 14em;
+            max-width: 13.6em;
             align-items: center;
             cursor: pointer;
+            padding: 0 8px 0 8px;
 
             .front-icon {
-                margin: 0 12px;
+                margin-right: 5px;
                 .svg-icon svg {
-                        width: 14px;
+                    width: 14px;
-                        height: 14px;
+                    height: 14px;
                 }
                 .fa-icon {
                     font-size: 16px;
                 }
-    
             }
 
             .tab-name {
@@ -293,23 +294,32 @@
                 }
             }
 
+            // Only one of these will be visible at a time
             .end-icon {
-                margin: 0 6px;
+                // This makes the calculations below easier since we don't need to account for the right margin on the parent tab.
-                .icon {
+                margin: 0 -8px 0 0;
-                    margin: 0;
+                .end-icon-inner {
-                    padding: 0 6px;
+                    & > div {
-                    width: 0;
+                        text-align: center;
-                    border-radius: 50%;
+                        align-items: center;
+                        & > * {
+                            margin: auto auto;
+                        }
+                        width: 20px;
+                    }
                 }
                 .status-indicator {
                     display: block;
+                    // The status indicator is a little shorter than the text; this raises it up a bit so it's more centered vertically
+                    padding-bottom: 1px;
+                    margin-top: -1px;
                 }
                 .tab-gear {
                     display: none;
-                    // Account for the fact that the ellipsis icon is a little taller than the other icons
+                    .icon {
-                    margin-bottom: -2px;
+                        border-radius: 50%;
+                    }
                 }
-
                 .tab-index {
                     display: none;
                     font-size: 0.9em;

src/model/model.ts

@@ -4056,7 +4056,7 @@ class Model {
             this.inputModel.setOpenAICmdInfoChat(update.openaicmdinfochat);
         }
         if ("screenstatusindicator" in update) {
-            this.getScreenById_single(update.screenstatusindicator.screenid).setStatusIndicator(update.screenstatusindicator.status);
+            this.getScreenById_single(update.screenstatusindicator.screenid)?.setStatusIndicator(update.screenstatusindicator.status);
         }
         // console.log("run-update>", Date.now(), interactive, update);
     }