playing with tab styles

* Add delimiters to screen tab, make active gradient a translucent mask

* make delimiter slightly shorter

* move end icon a bit to provide more separation

* fix zindex for tab contents

* fix magic layout

* make the tabs closer to the width they used to be

.github/workflows/regression.yml

@@ -0,0 +1,26 @@
+name: TestDriver.ai Regression Testing
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+  schedule:
+    - cron: "0 21 * * *" # every day at 9pm
+  workflow_dispatch:
+
+jobs:
+  test:
+    name: "TestDriver"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dashcamio/testdriver@main
+        id: testdriver
+        # note that .testdriver/prerun.sh runs before this, so the app has launched already
+        with:
+          prompt: |
+            2. click "Continue"
+            2. focus the Wave input with the keyboard shorcut Command + I
+            3. type 'ls' into the input
+            4. press return
+            5. validate Wave shows the result of 'ls'

.testdriver/prerun.sh

@@ -0,0 +1,20 @@
+rm ~/Desktop/WITH-LOVE-FROM-AMERICA.txt
+brew install go
+brew tap scripthaus-dev/scripthaus
+brew install scripthaus
+npm install -g yarn
+mkdir ~/build
+cd ~/build
+git clone https://github.com/wavetermdev/waveterm.git
+cd waveterm
+scripthaus run build-backend
+echo "Yarn"
+yarn
+echo "Rebuild"
+scripthaus run electron-rebuild
+echo "Webpack"
+scripthaus run webpack-build
+echo "Starting Electron"
+scripthaus run electron 1>/dev/null 2>&1 &
+echo "Electron Done"
+exit

buildres/upload-release.sh

@@ -0,0 +1,86 @@
+#!/bin/bash
+# This script is used to upload signed and notarized releases to S3 and update the Electron auto-update release feeds.
+
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+
+BUILDS_DIR=$SCRIPT_DIR/builds
+TEMP2_DIR=$SCRIPT_DIR/temp2
+
+MAIN_RELEASE_PATH="dl.waveterm.dev/build"
+AUTOUPDATE_RELEASE_PATH="dl.waveterm.dev/autoupdate"
+
+# Copy the builds to the temp2 directory
+echo "Copying builds to temp2"
+rm -rf $TEMP2_DIR
+mkdir -p $TEMP2_DIR
+cp -r $BUILDS_DIR/* $TEMP2_DIR
+
+UVERSION=$(cat $TEMP2_DIR/version.txt)
+
+if [ -z "$UVERSION" ]; then
+    echo "version.txt is empty"
+    exit 1
+fi
+
+# Find the DMG file
+echo "Finding DMG"
+DMG=$(find $TEMP2_DIR -type f -iname "*.dmg")
+# Ensure there is only one
+NUM_DMGS=$(echo $DMG | wc -l)
+if [ "0" -eq "$NUM_DMGS" ]; then
+    echo "no DMG found in $TEMP2_DIR"
+    exit 1
+elif [ "1" -lt "$NUM_DMGS" ]; then
+    echo "multiple DMGs found in $TEMP2_DIR"
+    exit 1
+fi
+
+# Find the Mac zip
+echo "Finding Mac zip"
+MAC_ZIP=$(find $TEMP2_DIR -type f -iname "*mac*.zip")
+# Ensure there is only one
+NUM_MAC_ZIPS=$(echo $MAC_ZIP | wc -l)
+if [ "0" -eq "$NUM_MAC_ZIPS" ]; then
+    echo "no Mac zip found in $TEMP2_DIR"
+    exit 1
+elif [ "1" -lt "$NUM_MAC_ZIPS" ]; then
+    echo "multiple Mac zips found in $TEMP2_DIR"
+    exit 1
+fi
+
+# Find the Linux zips
+echo "Finding Linux zips"
+LINUX_ZIPS=$(find $TEMP2_DIR -type f -iname "*linux*.zip")
+# Ensure there is at least one
+NUM_LINUX_ZIPS=$(echo $LINUX_ZIPS | wc -l)
+if [ "0" -eq "$NUM_LINUX_ZIPS" ]; then
+    echo "no Linux zips found in $TEMP2_DIR"
+    exit 1
+fi
+
+# Upload the DMG
+echo "Uploading DMG"
+DMG_NAME=$(basename $DMG)
+aws s3 cp $DMG s3:/$MAIN_RELEASE_PATH/$DMG_NAME
+
+# Upload the Linux zips
+echo "Uploading Linux zips"
+for LINUX_ZIP in $LINUX_ZIPS; do
+    LINUX_ZIP_NAME=$(basename $LINUX_ZIP)
+    aws s3 cp $LINUX_ZIP s3://$MAIN_RELEASE_PATH/$LINUX_ZIP_NAME
+done
+
+# Upload the autoupdate Mac zip
+echo "Uploading Mac zip"
+MAC_ZIP_NAME=$(basename $MAC_ZIP)
+aws s3 cp $MAC_ZIP s3://$AUTOUPDATE_RELEASE_PATH/$MAC_ZIP_NAME
+
+# Update the autoupdate feeds
+echo "Updating autoupdate feeds"
+RELEASES_CONTENTS="{\"name\":\"$UVERSION\",\"notes\":\"\",\"url\":\"https://$AUTOUPDATE_RELEASE_PATH/$MAC_ZIP_NAME\"}"
+aws s3 cp - s3://$AUTOUPDATE_RELEASE_PATH/darwin/arm64/RELEASES.json <<< $RELEASES_CONTENTS
+aws s3 cp - s3://$AUTOUPDATE_RELEASE_PATH/darwin/x64/RELEASES.json <<< $RELEASES_CONTENTS
+
+# Clean up
+echo "Cleaning up"
+rm -rf $TEMP2_DIR

package.json

@@ -71,7 +71,7 @@
         "babel-plugin-jsx-control-statements": "^4.1.2",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.7.1",
-        "electron": "28.1.3",
+        "electron": "29.0.1",
         "file-loader": "^6.2.0",
         "http-server": "^14.1.1",
         "less": "^4.1.2",
@@ -90,4 +90,4 @@
         "webpack-merge": "^5.8.0"
     },
     "scripts": {}
-}
+}

public/fontawesome/css/sharp-regular.min.css

@@ -1,5 +1,5 @@
 /*!
- * Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com
+ * Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
  * Copyright 2023 Fonticons, Inc.
  */

public/fontawesome/css/sharp-solid.min.css

@@ -1,5 +1,5 @@
 /*!
- * Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com
+ * Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
  * Copyright 2023 Fonticons, Inc.
  */

public/fontawesome/css/solid.min.css

@@ -1,5 +1,5 @@
 /*!
- * Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com
+ * Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
  * Copyright 2023 Fonticons, Inc.
  */

public/index-dev.html

@@ -7,6 +7,7 @@
         <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
         <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
         <link rel="stylesheet" href="dist-dev/waveterm.css" />

public/index.html

@@ -7,6 +7,7 @@
         <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
         <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
         <link rel="stylesheet" href="dist/waveterm.css" />

src/app/app.less

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @import "./root.less";
+@import "./overrides.less";
 
 html,
 body {
@@ -16,12 +17,12 @@ body {
 
 body {
     &.is-dev .sidebar {
-        background-color: var(--app-bg-color-dev);
+        // background-color: var(--app-panel-bg-color-dev);
     }
 }
 
 body .sidebar {
-    background-color: var(--app-bg-color);
+    background-color: var(--app-panel-bg-color);
 }
 
 textarea {
@@ -30,7 +31,6 @@ textarea {
     font-size: 12px;
     font-weight: 300;
     line-height: 1.5;
-    background: var(--app-bg-color);
     color: var(--app-text-color);
 }
 
@@ -117,7 +117,7 @@ svg.icon {
     cursor: pointer;
 }
 
-.hideScrollbarUntillHover {
+.scrollbar-hide-until-hover {
     overflow: scroll;
 
     &::-webkit-scrollbar-thumb,
@@ -153,6 +153,12 @@ svg.icon {
     background-color: var(--scrollbar-thumb-hover-color) !important;
 }
 
+.no-highlight-scrollbar {
+    &::-webkit-scrollbar-thumb:hover {
+        background-color: var(--scrollbar-thumb-color) !important;
+    }
+}
+
 .hide-scrollbar {
     &::-webkit-scrollbar {
         display: none;
@@ -243,6 +249,36 @@ a.a-block {
     }
 }
 
+.logo-button-container {
+    width: 105px;
+    flex-shrink: 0;
+    position: absolute;
+    z-index: 25;
+    top: 7px;
+    left: 0px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    -webkit-app-region: drag;
+    pointer-events: none;
+
+    .logo-button {
+        width: 25px;
+        height: 25px;
+        margin-right: 6px;
+        cursor: pointer;
+        user-select: none;
+        -webkit-app-region: no-drag;
+        pointer-events: all;
+
+        &:hover {
+            background-color: #333;
+            border-radius: 4px;
+        }
+    }
+}
+
 .copied-indicator {
     position: absolute;
     top: 0;
@@ -634,42 +670,6 @@ a.a-block {
     }
 }
 
-.mainview {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    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);
-    background-color: black;
-
-    &.is-hidden {
-        display: none;
-    }
-
-    .header {
-        -webkit-app-region: drag;
-        padding: 24px 18px;
-        margin: 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .close-div {
-            -webkit-app-region: no-drag;
-            font-size: 1.5em;
-        }
-
-        &.bottom-border {
-            border-bottom: 1px solid white;
-            padding-bottom: 20px;
-            margin-bottom: 20px;
-        }
-    }
-}
-
 .settings-field {
     display: flex;
     flex-direction: row;
@@ -799,13 +799,15 @@ a.a-block {
 
             .tab-color-name,
             .tab-icon-name {
+                display: inline-block;
                 margin-left: 1em;
+                min-width: 80px;
             }
 
             .tab-color-select,
             .tab-icon-select {
                 cursor: pointer;
-                margin: 5px;
+                margin: 3px;
                 &:hover {
                     outline: 2px solid white;
                 }

src/app/app.tsx

@@ -8,7 +8,7 @@ import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { GlobalModel } from "@/models";
+import { GlobalCommandRunner, GlobalModel } from "@/models";
 import { isBlank } from "@/util/util";
 import { WorkspaceView } from "./workspace/workspaceview";
 import { PluginsView } from "./pluginsview/pluginsview";
@@ -20,6 +20,7 @@ import { MainSideBar } from "./sidebar/sidebar";
 import { DisconnectedModal, ClientStopModal } from "./common/modals";
 import { ModalsProvider } from "./common/modals/provider";
 import { ErrorBoundary } from "./common/error/errorboundary";
+import cn from "classnames";
 import "./app.less";
 
 dayjs.extend(localizedFormat);
@@ -37,7 +38,7 @@ class App extends React.Component<{}, {}> {
     @boundMethod
     handleContextMenu(e: any) {
         let isInNonTermInput = false;
-        let activeElem = document.activeElement;
+        const activeElem = document.activeElement;
         if (activeElem != null && activeElem.nodeName == "TEXTAREA") {
             if (!activeElem.classList.contains("xterm-helper-textarea")) {
                 isInNonTermInput = true;
@@ -46,17 +47,13 @@ class App extends React.Component<{}, {}> {
         if (activeElem != null && activeElem.nodeName == "INPUT" && activeElem.getAttribute("type") == "text") {
             isInNonTermInput = true;
         }
-        let opts: ContextMenuOpts = {};
+        const opts: ContextMenuOpts = {};
         if (isInNonTermInput) {
             opts.showCut = true;
         }
-        let sel = window.getSelection();
-        if (!isBlank(sel?.toString())) {
+        const sel = window.getSelection();
+        if (!isBlank(sel?.toString()) || isInNonTermInput) {
             GlobalModel.contextEditMenu(e, opts);
-        } else {
-            if (isInNonTermInput) {
-                GlobalModel.contextEditMenu(e, opts);
-            }
         }
     }
 
@@ -67,13 +64,19 @@ class App extends React.Component<{}, {}> {
         })();
     }
 
+    @boundMethod
+    openSidebar() {
+        const width = GlobalModel.mainSidebarModel.getWidth(true);
+        GlobalCommandRunner.clientSetSidebar(width, false);
+    }
+
     render() {
-        let remotesModel = GlobalModel.remotesModel;
-        let disconnected = !GlobalModel.ws.open.get() || !GlobalModel.waveSrvRunning.get();
-        let hasClientStop = GlobalModel.getHasClientStop();
-        let dcWait = this.dcWait.get();
-        let platform = GlobalModel.getPlatform();
-        let clientData = GlobalModel.clientData.get();
+        const remotesModel = GlobalModel.remotesModel;
+        const disconnected = !GlobalModel.ws.open.get() || !GlobalModel.waveSrvRunning.get();
+        const hasClientStop = GlobalModel.getHasClientStop();
+        const dcWait = this.dcWait.get();
+        const platform = GlobalModel.getPlatform();
+        const clientData = GlobalModel.clientData.get();
 
         // Previously, this is done in sidebar.tsx but it causes flicker when clientData is null cos screen-view shifts around.
         // Doing it here fixes the flicker cos app is not rendered until clientData is populated.
@@ -106,14 +109,22 @@ class App extends React.Component<{}, {}> {
             setTimeout(() => this.updateDcWait(false), 0);
         }
         // used to force a full reload of the application
-        let renderVersion = GlobalModel.renderVersion.get();
+        const renderVersion = GlobalModel.renderVersion.get();
+        const sidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
         return (
             <div
                 key={"version-" + renderVersion}
                 id="main"
-                className={"platform-" + platform}
+                className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed })}
                 onContextMenu={this.handleContextMenu}
             >
+                <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>
                 <div ref={this.mainContentRef} className="main-content">
                     <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                     <ErrorBoundary>