From 8a0df07b47a954fc52ccda1807666bae63b3c830 Mon Sep 17 00:00:00 2001
From: Mike Sawka <mike.sawka@gmail.com>
Date: Mon, 26 Feb 2024 23:55:45 -0800
Subject: [PATCH] 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                         |  2 +-
 src/app/line/line.less                   |  2 +-
 src/app/root.less                        |  9 ++--
 src/app/sidebar/sidebar.less             | 37 +++++++++++++----
 src/app/sidebar/sidebar.tsx              | 23 +++--------
 src/app/workspace/cmdinput/cmdinput.less |  5 ++-
 src/app/workspace/screen/tab.tsx         | 10 -----
 src/app/workspace/screen/tabs.less       | 52 ++++++++++++++++++------
 src/app/workspace/screen/tabs.tsx        | 24 ++++++++---
 9 files changed, 104 insertions(+), 60 deletions(-)

diff --git a/src/app/app.less b/src/app/app.less
index 7c80930e..6966e881 100644
--- a/src/app/app.less
+++ b/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);
diff --git a/src/app/line/line.less b/src/app/line/line.less
index 8b0bc84b..653c109e 100644
--- a/src/app/line/line.less
+++ b/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;
diff --git a/src/app/root.less b/src/app/root.less
index 4a9f5b9e..eb9de060 100644
--- a/src/app/root.less
+++ b/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);
diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less
index 9ca30230..f088880f 100644
--- a/src/app/sidebar/sidebar.less
+++ b/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 {
diff --git a/src/app/sidebar/sidebar.tsx b/src/app/sidebar/sidebar.tsx
index d09f1250..aef98961 100644
--- a/src/app/sidebar/sidebar.tsx
+++ b/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"
diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less
index ae4c978f..2a9e6351 100644
--- a/src/app/workspace/cmdinput/cmdinput.less
+++ b/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;
diff --git a/src/app/workspace/screen/tab.tsx b/src/app/workspace/screen/tab.tsx
index 639d9314..71f64501 100644
--- a/src/app/workspace/screen/tab.tsx
+++ b/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>
diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less
index 6a29ed54..7bac2039 100644
--- a/src/app/workspace/screen/tabs.less
+++ b/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 {
diff --git a/src/app/workspace/screen/tabs.tsx b/src/app/workspace/screen/tabs.tsx
index 4e382210..2c027a17 100644
--- a/src/app/workspace/screen/tabs.tsx
+++ b/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>
         );
     }