More UI Updates (sidebar, border radius, shelltag, colors, etc) (#344)

* tab hover

* border radius fix, and lighter scrollbar background

* tone down colors a bit

* fix shelltag

* hack collapsable sidebar (needs cleanup)

src/app/app.less

@@ -639,7 +639,7 @@ a.a-block {
     display: flex;
     flex-direction: column;
     position: relative;
-    border-radius: 0 var(--app-border-radius) var(--app-border-radius) var(--app-border-radius);
+    border-radius: 0 var(--app-border-radius) var(--app-border-radius) 0;
     border-bottom: 1px solid var(--app-border-color);
     border-right: 1px solid var(--app-border-color);
     border-left: 1px solid var(--app-border-color);

src/app/line/line.less

@@ -1,7 +1,7 @@
 @import "@/common/themes/themes.less";
 
 .line {
-    margin: 0 10px 0 0;
+    margin: 0;
     padding: var(--termpad) var(--termpad) calc(var(--termpad) + 1px) calc(var(--termpad) * 2);
     display: flex;
     overflow: hidden;

src/app/root.less

@@ -10,6 +10,9 @@
     --termlineheight: 15px;
     --termpad: 7px; // padding value (scaled to termfontsize)
 
+    // magic
+    --screentabs-height: 38px;
+
     // global colors
     --app-accent-color: rgb(88, 193, 66);
     --app-error-color: rgb(204, 0, 0);
@@ -28,7 +31,7 @@
 
     // scrollbar colors
     // --scrollbar-background-color: rgba(21, 23, 21, 1);
-    --scrollbar-background-color: #171717;
+    --scrollbar-background-color: #030303;
     --scrollbar-thumb-color: #333;
     --scrollbar-thumb-hover-color: rgb(211, 215, 207);
 
@@ -142,8 +145,8 @@
     --line-warning-color: #ffa500;
     --line-base-soft-blue-color: #729fcf;
     --line-active-border-color: rgb(97, 158, 72);
-    --line-selected-bg-color: rgba(255, 255, 255, 0.1);
-    --line-selected-border-left-color: #ccc;
+    --line-selected-bg-color: rgba(255, 255, 255, 0.05);
+    --line-selected-border-left-color: #777777;
     --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
     --line-selected-error-bg-color: rgb(19, 4, 3);
     --line-error-bg-color: rgba(200, 0, 0, 0.1);

src/app/sidebar/sidebar.less

@@ -10,20 +10,36 @@
     line-height: 20px;
     backdrop-filter: blur(4px);
     z-index: 20;
-    border-radius: var(--app-border-radius) 0 var(--app-border-radius) var(--app-border-radius);
+    border-radius: var(--app-border-radius) 0 0 var(--app-border-radius);
     border-left: 1px solid var(--app-border-color);
     border-bottom: 1px solid var(--app-border-color);
 
     .title-bar-drag {
         -webkit-app-region: drag;
-        height: 30px;
-        position: absolute;
+        height: calc(var(--screentabs-height) + 1px);
         top: 0;
         left: 0;
         width: 100%;
+        border-bottom: 1px solid var(--app-border-color);
+        position: relative;
+
+        .close-button {
+            -webkit-app-region: no-drag;
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 100%;
+            padding: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
     }
 
     &.collapsed {
+        display: none;
+
         width: 6em;
         min-width: 6em;
         .arrow-container,
@@ -31,9 +47,14 @@
             transform: rotate(180deg);
             margin-top: 20px;
         }
-        .contents {
-            margin-top: 26px;
 
+        .title-bar-drag {
+            .close-button {
+                display: none;
+            }
+        }
+
+        .contents {
             .top,
             .workspaces,
             .middle,
@@ -79,7 +100,7 @@
     }
 
     .contents {
-        margin-top: 36px;
+        margin-top: 16px;
     }
 
     .logo {
@@ -89,7 +110,9 @@
 
         .logo-container {
             flex-shrink: 0;
-            width: 100px;
+            img {
+                width: 40px;
+            }
         }
 
         .spacer {

src/app/sidebar/sidebar.tsx

@@ -243,25 +243,12 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
             >
                 {(toggleCollapse) => (
                     <React.Fragment>
-                        <div className="title-bar-drag" />
-                        <div className="contents">
-                            <div className="logo">
-                                <If condition={isCollapsed}>
-                                    <div className="logo-container" onClick={toggleCollapse}>
-                                        <img src="public/logos/wave-logo.png" />
-                                    </div>
-                                </If>
-                                <If condition={!isCollapsed}>
-                                    <div className="logo-container">
-                                        <img src="public/logos/wave-dark.png" />
-                                    </div>
-                                    <div className="spacer" />
-                                    <div className="collapse-button" onClick={toggleCollapse}>
-                                        <LeftChevronIcon className="icon" />
-                                    </div>
-                                </If>
+                        <div className="title-bar-drag">
+                            <div className="close-button">
+                                <i className="fa-sharp fa-solid fa-xmark-large" onClick={toggleCollapse} />
                             </div>
-                            <div className="separator" />
+                        </div>
+                        <div className="contents">
                             <div className="top">
                                 <SideBarItem
                                     key="history"

src/app/workspace/cmdinput/cmdinput.less

@@ -117,12 +117,12 @@
             .shelltag {
                 position: absolute;
                 // 13px = 10px height + 3px padding.  subtract termpad to account for textareainput-div padding (2px not sure?)
-                bottom: calc(-13px + var(--termpad) + 2px);
+                bottom: calc(-13px + var(--termpad));
                 right: 0px;
                 font-size: 10px;
                 color: var(--app-text-secondary-color);
                 line-height: 1;
-                padding: 0px 8px 3px 8px;
+                padding: 1px 8px 3px 8px;
                 background-color: var(--cmdinput-textarea-bg-color);
                 border-radius: 0 0 5px 5px;
             }
@@ -139,6 +139,7 @@
             border: none;
             line-height: var(--termlineheight);
             font-size: var(--termfontsize);
+            border-radius: 4px 4px 0 4px; // 0 is for shelltag
 
             &.display-disabled {
                 background-color: #444;

src/app/workspace/screen/tab.tsx

@@ -77,15 +77,6 @@ class ScreenTab extends React.Component<
 
     render() {
         let { screen, activeScreenId, index, onSwitchScreen } = this.props;
-
-        let tabIndex = null;
-        if (index + 1 <= 9) {
-            tabIndex = (
-                <CenteredIcon className="tab-index">
-                    <div>{renderCmdText(String(index + 1))}</div>
-                </CenteredIcon>
-            );
-        }
         let archived = screen.archived.get() ? (
             <i title="archived" className="fa-sharp fa-solid fa-box-archive" />
         ) : null;
@@ -123,7 +114,6 @@ class ScreenTab extends React.Component<
                 </div>
                 <div className="end-icons">
                     <StatusIndicator level={statusIndicatorLevel} runningCommands={runningCommands} />
-                    {tabIndex}
                     <ActionsIcon onClick={(e) => this.openScreenSettings(e, screen)} />
                 </div>
             </Reorder.Item>

src/app/workspace/screen/tabs.less

@@ -10,6 +10,16 @@
     //     border-radius: var(--app-border-radius) 0px 0px 0px;
     // }
 
+    &:not(:hover) .status-indicator {
+        .status-indicator-visible;
+    }
+
+    &:hover {
+        .actions {
+            .positional-icon-visible;
+        }
+    }
+
     &.color-green,
     &.color-default {
         svg.svg-icon-inner path {
@@ -222,6 +232,35 @@
     display: flex;
     position: relative;
     overflow: hidden;
+    height: var(--screentabs-height);
+
+    &.sidebar-collapsed .logo-button-container {
+        width: 105px;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        -webkit-app-region: drag;
+
+        .logo-button {
+            width: 25px;
+            height: 25px;
+            margin-right: 6px;
+            cursor: pointer;
+            user-select: none;
+            -webkit-app-region: no-drag;
+
+            &:hover {
+                background-color: #333;
+                border-radius: 4px;
+            }
+        }
+    }
+
+    .logo-button {
+        width: 20px;
+    }
 
     &:hover {
         z-index: 200;
@@ -285,19 +324,6 @@
                 }
             }
         }
-
-        &:not(:hover) .status-indicator {
-            .status-indicator-visible;
-        }
-
-        &:hover {
-            .screen-tab:not(:hover) .tab-index {
-                .positional-icon-visible;
-            }
-            .screen-tab:hover .actions {
-                .positional-icon-visible;
-            }
-        }
     }
 
     .new-screen {

src/app/workspace/screen/tabs.tsx

@@ -6,7 +6,8 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { sprintf } from "sprintf-js";
 import { boundMethod } from "autobind-decorator";
-import { For } from "tsx-control-statements/components";
+import { For, If } from "tsx-control-statements/components";
+import cn from "classnames";
 import { GlobalModel, GlobalCommandRunner, Session, Screen } from "@/models";
 import { ReactComponent as AddIcon } from "@/assets/icons/add.svg";
 import { Reorder } from "framer-motion";
@@ -167,6 +168,12 @@ class ScreenTabs extends React.Component<
         // For touchpad events, do nothing and let the browser handle it
     }
 
+    @boundMethod
+    openSidebar() {
+        const width = GlobalModel.mainSidebarModel.getWidth(true);
+        GlobalCommandRunner.clientSetSidebar(width, false);
+    }
+
     render() {
         let { showingScreens } = this.state;
         let { session } = this.props;
@@ -176,11 +183,18 @@ class ScreenTabs extends React.Component<
         let screen: Screen | null = null;
         let index = 0;
         let activeScreenId = this.getActiveScreenId();
-
+        const sidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
         return (
-            <div className="screen-tabs-container">
+            <div className={cn("screen-tabs-container", { "sidebar-collapsed": sidebarCollapsed })}>
+                <If condition={sidebarCollapsed}>
+                    <div key="logo-button" className="logo-button-container">
+                        <div className="logo-button" onClick={this.openSidebar}>
+                            <img src="public/logos/wave-logo.png" alt="logo" />
+                        </div>
+                    </div>
+                </If>
                 {/* Inner container ensures that hovering over the scrollbar doesn't trigger the hover effect on the tabs. This prevents weird flickering of the icons when the mouse is moved over the scrollbar. */}
-                <div className="screen-tabs-container-inner hideScrollbarUntillHover">
+                <div key="container-inner" className="screen-tabs-container-inner hideScrollbarUntillHover">
                     <Reorder.Group
                         className="screen-tabs"
                         ref={this.tabsRef}
@@ -205,7 +219,7 @@ class ScreenTabs extends React.Component<
                 <div key="new-screen" className="new-screen" onClick={this.handleNewScreen}>
                     <AddIcon className="icon hoverEffect" />
                 </div>
-                <div className="tabs-end-spacer" />
+                <div key="spacer" className="tabs-end-spacer" />
             </div>
         );
     }