we use yarn, so remove package-lock.json

* add icon for Linux

The app icon previously did not show up in Linux. This change fixes that
by providing the wave-logo-dark.png to the electron Browser Window.

* set the icon to only use the direct path on linux

The previous change was only required on linux and not on mac. This
ensures the old behavior will continue to be done on mac while using the
new behavior on linux.

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,31 @@
+---
+name: Bug Report
+about: Create a bug report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. MacOS/Linux, x64 or arm64]
+ - Version [e.g. v0.5.0]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,14 @@
+---
+name: Feature Request
+about: Suggest a new idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.

BUILD.md

@@ -5,7 +5,7 @@ If you're developing on Linux please use the [Linux Build Instructions](./build-
 
 ## Running the Development Version of Wave
 
-If you install the production version of Wave, you'll see a semi-transparent sidebar, and the data for Wave is stored in the directory ~/prompt.  The development version has a red/brown sidebar and stores its data in ~/prompt-dev.  This allows the production and development versions to be run simultaneously with no conflicts.  If the dev database is corrupted by development bugs, or the schema changes in development it will not affect the production copy.
+If you install the production version of Wave, you'll see a semi-transparent sidebar, and the data for Wave is stored in the directory ~/.waveterm.  The development version has a blue sidebar and stores its data in ~/.waveterm-dev.  This allows the production and development versions to be run simultaneously with no conflicts.  If the dev database is corrupted by development bugs, or the schema changes in development it will not affect the production copy.
 
 ## Prereqs and Tools
 

buildres/build-universal.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # assumes we have Wave-darwin-x64-[version].zip and Wave-darwin-arm64-[version].zip in current directory
-VERSION=0.5.0
+VERSION=0.5.1
 rm -rf temp
 mkdir temp
 mkdir temp/x64

package.json

@@ -2,7 +2,7 @@
     "name": "waveterm",
     "author": "Command Line Inc",
     "productName": "Wave",
-    "version": "0.5.0",
+    "version": "0.5.1",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "dependencies": {
@@ -16,7 +16,7 @@
         "dayjs": "^1.11.3",
         "dompurify": "^3.0.2",
         "electron-squirrel-startup": "^1.0.0",
-        "mobx": "^6.6.0",
+        "mobx": "6.12",
         "mobx-react": "^7.5.0",
         "monaco-editor": "^0.44.0",
         "mustache": "^4.2.0",
@@ -43,9 +43,9 @@
         "@babel/plugin-proposal-private-methods": "^7.18.6",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@babel/plugin-transform-react-jsx": "^7.17.12",
-        "@babel/plugin-transform-runtime": "^7.18.2",
+        "@babel/plugin-transform-runtime": "^7.23.4",
         "@babel/preset-env": "^7.18.2",
-        "@babel/preset-react": "^7.17.12",
+        "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.17.12",
         "@electron-forge/cli": "^6.0.0-beta.70",
         "@electron-forge/maker-deb": "^6.0.0-beta.70",
@@ -53,22 +53,22 @@
         "@electron-forge/maker-snap": "^6.4.2",
         "@electron-forge/maker-squirrel": "^6.0.0-beta.70",
         "@electron-forge/maker-zip": "^6.0.0-beta.70",
-        "@electron/rebuild": "^3.3.0",
+        "@electron/rebuild": "^3.4.0",
         "@svgr/webpack": "^8.1.0",
         "@types/classnames": "^2.3.1",
         "@types/electron": "^1.6.10",
-        "@types/node": "^20.4.0",
+        "@types/node": "20.10.3",
         "@types/papaparse": "^5.3.10",
         "@types/react": "^18.0.12",
         "@types/sprintf-js": "^1.1.3",
         "@types/throttle-debounce": "^5.0.1",
-        "@types/uuid": "9.0.6",
+        "@types/uuid": "9.0.7",
         "@types/webpack-env": "^1.18.3",
         "babel-loader": "^9.1.3",
         "babel-plugin-jsx-control-statements": "^4.1.2",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.7.1",
-        "electron": "27.0.3",
+        "electron": "27.1.3",
         "file-loader": "^6.2.0",
         "http-server": "^14.1.1",
         "less": "^4.1.2",
@@ -81,7 +81,7 @@
         "style-loader": "^3.3.1",
         "typescript": "^4.7.3",
         "webpack": "^5.73.0",
-        "webpack-bundle-analyzer": "^4.5.0",
+        "webpack-bundle-analyzer": "^4.10.1",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.9.1",
         "webpack-merge": "^5.8.0"

scripthaus.md

@@ -33,7 +33,7 @@ WAVETERM_DEV=1 PCLOUD_ENDPOINT="https://ot2e112zx5.execute-api.us-west-2.amazona
 ```bash
 # @scripthaus command typecheck
 # @scripthaus cd :playbook
-node_modules/.bin/tsc --jsx preserve --noEmit --esModuleInterop --target ES5 --experimentalDecorators --downlevelIteration src/index.ts src/types/custom.d.ts
+node_modules/.bin/tsc --noEmit
 ```
 
 ```bash
@@ -44,11 +44,11 @@ rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
-(cd waveshell; GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-waveshell.go)
-(cd waveshell; GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.arm64 main-waveshell.go)
-(cd waveshell; GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.amd64 main-waveshell.go)
-(cd waveshell; GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.arm64 main-waveshell.go)
-(cd wavesrv; CGO_ENABLED=1 go build -ldflags="$GO_LDFLAGS" -o ../bin/wavesrv ./cmd)
+(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.arm64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.amd64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.arm64 main-waveshell.go)
+(cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M')" -o ../bin/wavesrv ./cmd)
 node_modules/.bin/electron-forge make
 ```
 
@@ -60,11 +60,12 @@ rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
-(cd waveshell; GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-waveshell.go)
-(cd waveshell; GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.arm64 main-waveshell.go)
-(cd waveshell; GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.amd64 main-waveshell.go)
-(cd waveshell; GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.arm64 main-waveshell.go)
-(cd wavesrv; CGO_ENABLED=1 go build -ldflags="$GO_LDFLAGS" -o ../bin/wavesrv ./cmd)
+(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.arm64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.amd64 main-waveshell.go)
+(cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.arm64 main-waveshell.go)
+# adds -extldflags=-static, *only* on linux (macos does not support fully static binaries) to avoid a glibc dependency
+(cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-linkmode 'external' -extldflags=-static $GO_LDFLAGS" -o ../bin/wavesrv ./cmd)
 node_modules/.bin/electron-forge make
 ```
 
@@ -77,14 +78,7 @@ open out/Wave-darwin-x64/Wave.app
 ```bash
 # @scripthaus command build-wavesrv
 cd wavesrv
-CGO_ENABLED=1 go build -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M')" -o ../bin/wavesrv ./cmd
-```
-
-```bash
-# @scripthaus command build-waveshell
-cd waveshell
-GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
-go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-waveshell.go
+CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M')" -o ../bin/wavesrv ./cmd
 ```
 
 ```bash
@@ -92,11 +86,10 @@ go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-w
 set -e
 cd waveshell
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
-go build -ldflags="$GO_LDFLAGS" -o ~/.mshell/mshell-v0.2 main-waveshell.go
-GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.amd64 main-waveshell.go
-GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.arm64 main-waveshell.go
-GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-waveshell.go
-GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.arm64 main-waveshell.go
+CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.amd64 main-waveshell.go
+CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-linux.arm64 main-waveshell.go
+CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.amd64 main-waveshell.go
+CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.3-darwin.arm64 main-waveshell.go
 ```
 
 ```bash

src/app/app.less

@@ -49,6 +49,14 @@ textarea {
     }
 }
 
+.text-primary {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 20px;
+    font-family: @text-s1-font;
+    color: @text-primary;
+}
+
 .text-standard {
     font-size: 12.5px;
     font-weight: 300;
@@ -80,6 +88,15 @@ textarea {
     height: 16px;
 }
 
+body a {
+    color: @wave-green;
+    cursor: pointer;
+    text-decoration: none;
+    &:hover {
+        color: @wave-green;
+    }
+}
+
 body code {
     font-family: @terminal-font;
 }
@@ -148,10 +165,10 @@ svg.icon {
     border-radius: 5px;
     cursor: pointer;
     background-color: @button-background !important;
-    color: @prompt-green;
+    color: @wave-green;
     .hoverEffect;
     &:hover {
-        color: @prompt-green;
+        color: @wave-green;
     }
     &.disabled {
         color: fade(@disabled-color, 60%);
@@ -176,12 +193,6 @@ svg.icon {
     left: 0;
 }
 
-.content {
-    a:hover {
-        color: #485fc7;
-    }
-}
-
 input[type="checkbox"] {
     cursor: pointer;
 }
@@ -219,7 +230,8 @@ a.a-block {
 
         .history-view,
         .bookmarks-view,
-        .plugins-view {
+        .plugins-view,
+        .connections-view {
             flex-grow: 1;
             display: flex;
             flex-direction: column;
@@ -465,85 +477,99 @@ a.a-block {
 }
 
 .icon.color-red {
-    path, circle {
+    path,
+    circle {
         fill: @tab-red;
     }
 }
 
 .icon.color-green {
-    path, circle {
+    path,
+    circle {
         fill: @tab-green;
     }
 }
 
 .icon.color-orange {
-    path, circle {
+    path,
+    circle {
         fill: @tab-orange;
     }
 }
 
 .icon.color-blue {
-    path, circle {
+    path,
+    circle {
         fill: @tab-blue;
     }
 }
 
 .icon.color-yellow {
-    path, circle {
+    path,
+    circle {
         fill: @tab-yellow;
     }
 }
 
 .icon.color-pink {
-    path, circle {
+    path,
+    circle {
         fill: @tab-pink;
     }
 }
 
 .icon.color-mint {
-    path, circle {
+    path,
+    circle {
         fill: @tab-mint;
     }
 }
 
 .icon.color-cyan {
-    path, circle {
+    path,
+    circle {
         fill: @tab-cyan;
     }
 }
 
 .icon.color-violet {
-    path, circle {
+    path,
+    circle {
         fill: @tab-violet;
     }
 }
 
 .icon.color-white {
-    path, circle {
+    path,
+    circle {
         fill: @tab-white;
     }
 }
 
 .status-icon.status-connected {
-    path, circle {
+    path,
+    circle {
         fill: @status-connected;
     }
 }
 
 .status-icon.status-connecting {
-    path, circle {
+    path,
+    circle {
         fill: @status-connecting;
     }
 }
 
 .status-icon.status-disconnected {
-    path, circle {
+    path,
+    circle {
         fill: @status-disconnected;
     }
 }
 
 .status-icon.status-error {
-    path, circle {
+    path,
+    circle {
         fill: @status-error;
     }
 }

src/app/app.tsx

@@ -15,22 +15,15 @@ import { WorkspaceView } from "./workspace/workspaceview";
 import { PluginsView } from "./pluginsview/pluginsview";
 import { BookmarksView } from "./bookmarks/bookmarks";
 import { HistoryView } from "./history/history";
+import { ConnectionsView } from "./connections/connections";
 import {
     ScreenSettingsModal,
     SessionSettingsModal,
     LineSettingsModal,
     ClientSettingsModal,
 } from "./common/modals/settings";
-import { RemotesModal } from "./connections/connections";
-import { TosModal } from "./common/modals/modals";
 import { MainSideBar } from "./sidebar/sidebar";
-import {
-    DisconnectedModal,
-    ClientStopModal,
-    AlertModal,
-    AboutModal,
-    CreateRemoteConnModal,
-} from "./common/modals/modals";
+import { DisconnectedModal, ClientStopModal, ModalsProvider } from "./common/modals/modals";
 import { ErrorBoundary } from "./common/error/errorboundary";
 import "./app.less";
 
@@ -64,7 +57,7 @@ class App extends React.Component<{}, {}> {
             opts.showCut = true;
         }
         let sel = window.getSelection();
-        if (!isBlank(sel.toString())) {
+        if (!isBlank(sel?.toString())) {
             GlobalModel.contextEditMenu(e, opts);
         } else {
             if (isInNonTermInput) {
@@ -85,14 +78,12 @@ class App extends React.Component<{}, {}> {
         let sessionSettingsModal = GlobalModel.sessionSettingsModal.get();
         let lineSettingsModal = GlobalModel.lineSettingsModal.get();
         let clientSettingsModal = GlobalModel.clientSettingsModal.get();
-        let remotesModel = GlobalModel.remotesModalModel;
-        let remotesModal = remotesModel.isOpen();
-        let selectedRemoteId = remotesModel.selectedRemoteId.get();
-        let remoteEdit = remotesModel.remoteEdit.get();
+        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();
+
         if (disconnected || hasClientStop) {
             if (!dcWait) {
                 setTimeout(() => this.updateDcWait(true), 1500);
@@ -117,7 +108,6 @@ class App extends React.Component<{}, {}> {
         if (dcWait) {
             setTimeout(() => this.updateDcWait(false), 0);
         }
-        //console.log(`GlobalModel.activeMainView.get() = ${GlobalModel.activeMainView.get()}`); // @mike - if I remove this, I cant see plugins
         return (
             <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
                 <div className="main-content">
@@ -127,18 +117,10 @@ class App extends React.Component<{}, {}> {
                         <WorkspaceView />
                         <HistoryView />
                         <BookmarksView />
+                        <ConnectionsView model={remotesModel} />
                     </ErrorBoundary>
                 </div>
-                <AlertModal />
-                <If condition={GlobalModel.needsTos()}>
-                    <TosModal />
-                </If>
-                <If condition={GlobalModel.aboutModalOpen.get()}>
-                    <AboutModal />
-                </If>
-                <If condition={remoteEdit !== null && !remoteEdit.old}>
-                    <CreateRemoteConnModal model={remotesModel} remoteEdit={remoteEdit} />
-                </If>
+                <ModalsProvider />
                 <If condition={screenSettingsModal != null}>
                     <ScreenSettingsModal
                         key={screenSettingsModal.sessionId + ":" + screenSettingsModal.screenId}
@@ -155,9 +137,6 @@ class App extends React.Component<{}, {}> {
                 <If condition={clientSettingsModal}>
                     <ClientSettingsModal />
                 </If>
-                <If condition={remotesModal}>
-                    <RemotesModal model={GlobalModel.remotesModalModel} />
-                </If>
             </div>
         );
     }

src/app/appconst.ts

@@ -0,0 +1,5 @@
+export const ABOUT = "about";
+export const CREATE_REMOTE = "createRemote";
+export const VIEW_REMOTE = "viewRemote";
+export const EDIT_REMOTE = "editRemote";
+export const ALERT = "alert";

src/app/common/common.less

@@ -247,7 +247,7 @@
     }
 }
 
-.button.is-prompt-green {
+.button.is-wave-green {
     background-color: #222;
     color: @term-white;
 
@@ -257,33 +257,6 @@
     }
 }
 
-.wave-button {
-    display: flex;
-    padding: 6px 16px !important;
-    color: @term-white !important;
-    align-items: center;
-    gap: 4px;
-    border-radius: 6px !important;
-    height: auto !important;
-
-    &:hover {
-        color: @term-white !important;
-    }
-}
-
-.wave-button.is-wave-green {
-    color: @term-bright-white !important;
-    background: @term-green !important;
-
-    &:hover {
-        background-color: @term-green;
-        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
-            0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset;
-        color: @term-bright-white !important;
-        box-shadow: none;
-    }
-}
-
 .button.is-plain,
 .button.is-prompt-cancel {
     background-color: #222;
@@ -637,7 +610,8 @@
     position: relative;
     background-color: transparent;
     height: 44px;
-    width: 412px;
+    min-width: 412px;
+    width: 100%;
     border: 1px solid var(--element-separator, rgba(241, 246, 243, 0.15));
     border-radius: 6px;
     background: var(--element-hover-2, rgba(255, 255, 255, 0.06));
@@ -801,10 +775,18 @@
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
         0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
 
+    &:hover {
+        cursor: text;
+    }
+
     &.focused {
         border-color: @term-green;
     }
 
+    &.disabled {
+        opacity: 0.75;
+    }
+
     &.error {
         border-color: @term-red;
     }
@@ -931,3 +913,228 @@
         }
     }
 }
+
+.wave-button {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+
+    display: flex;
+    padding: 6px 16px;
+    align-items: center;
+    gap: 4px;
+    border-radius: 6px;
+    height: auto;
+
+    &:hover {
+        color: @term-white;
+    }
+
+    i {
+        fill: rgba(255, 255, 255, 0.12);
+    }
+
+    &.primary {
+        color: @term-green;
+        background: none;
+
+        i {
+            fill: @term-green;
+        }
+
+        &.solid {
+            color: @term-bright-white;
+            background: @term-green;
+            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
+                0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset;
+
+            i {
+                fill: @term-white;
+            }
+        }
+
+        &.outlined {
+            border: 1px solid @term-green;
+        }
+
+        &.ghost {
+            // Styles for .ghost are already defined above
+        }
+
+        &:hover {
+            color: @term-bright-white;
+        }
+    }
+
+    &.secondary {
+        color: @term-white;
+        background: none;
+
+        &.solid {
+            background: rgba(255, 255, 255, 0.09);
+            box-shadow: none;
+        }
+
+        &.outlined {
+            border: 1px solid rgba(255, 255, 255, 0.09);
+        }
+
+        &.ghost {
+            padding: 6px 10px;
+
+            i {
+                fill: @term-green;
+            }
+        }
+    }
+
+    &.color-yellow {
+        &.solid {
+            border-color: @warning-yellow;
+            background-color: mix(@warning-yellow, @term-white, 50%);
+            box-shadow: none;
+        }
+
+        &.outlined {
+            color: @warning-yellow;
+            border-color: @warning-yellow;
+            &:hover {
+                color: @term-white;
+                border-color: @term-white;
+            }
+        }
+
+        &.ghost {
+        }
+    }
+
+    &.color-red {
+        &.solid {
+            border-color: @term-red;
+            background-color: mix(@term-red, @term-white, 50%);
+            box-shadow: none;
+        }
+
+        &.outlined {
+            color: @term-red;
+            border-color: @term-red;
+        }
+
+        &.ghost {
+        }
+    }
+
+    &.disabled {
+        opacity: 0.5;
+    }
+
+    &.link-button {
+        cursor: pointer;
+    }
+}
+
+.wave-status-container {
+    display: flex;
+    align-items: center;
+
+    .dot {
+        height: 6px;
+        width: 6px;
+        border-radius: 50%;
+        display: inline-block;
+        margin-right: 8px;
+    }
+
+    .dot.green {
+        background-color: @status-connected;
+    }
+
+    .dot.red {
+        background-color: @status-error;
+    }
+
+    .dot.gray {
+        background-color: @status-disconnected;
+    }
+
+    .dot.yellow {
+        background-color: @status-connecting;
+    }
+}
+
+.wave-modal-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 500;
+
+    .wave-modal-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(21, 23, 21, 0.7);
+        z-index: 1;
+    }
+}
+
+.wave-modal {
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    border-radius: 10px;
+    background: #151715;
+    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35), 0px 10px 24px 0px rgba(0, 0, 0, 0.45),
+        0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
+
+    .wave-modal-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+
+        .wave-modal-header {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            padding: 12px 14px 12px 20px;
+            justify-content: space-between;
+            line-height: 20px;
+            border-bottom: 1px solid rgba(250, 250, 250, 0.1);
+
+            button {
+                i {
+                    font-size: 18px;
+                }
+            }
+        }
+
+        .wave-modal-body {
+            width: 100%;
+            padding: 0px 20px;
+        }
+
+        .wave-modal-footer {
+            display: flex;
+            justify-content: flex-end;
+            width: 100%;
+            padding: 0 20px 20px;
+
+            button:first-child {
+                margin-right: 8px;
+            }
+        }
+    }
+}

src/app/common/common.tsx

@@ -99,7 +99,7 @@ class Toggle extends React.Component<{ checked: boolean; onChange: (value: boole
 }
 
 class Checkbox extends React.Component<
-    { checked: boolean; onChange: (value: boolean) => void; label: string; id: string },
+    { checked: boolean; onChange: (value: boolean) => void; label: React.ReactNode; id: string },
     {}
 > {
     render() {
@@ -217,6 +217,115 @@ class Tooltip extends React.Component<TooltipProps, TooltipState> {
     }
 }
 
+type ButtonVariantType = "outlined" | "solid" | "ghost";
+type ButtonThemeType = "primary" | "secondary";
+
+interface ButtonProps {
+    theme?: ButtonThemeType;
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    variant?: ButtonVariantType;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    color?: string;
+    style?: React.CSSProperties;
+}
+
+class Button extends React.Component<ButtonProps> {
+    static defaultProps = {
+        theme: "primary",
+        variant: "solid",
+        color: "",
+        style: {},
+    };
+
+    @boundMethod
+    handleClick() {
+        if (this.props.onClick && !this.props.disabled) {
+            this.props.onClick();
+        }
+    }
+
+    render() {
+        const { leftIcon, rightIcon, theme, children, disabled, variant, color, style } = this.props;
+
+        return (
+            <button
+                className={cn("wave-button", theme, variant, color, { disabled: disabled })}
+                onClick={this.handleClick}
+                disabled={disabled}
+                style={style}
+            >
+                {leftIcon && <span className="icon-left">{leftIcon}</span>}
+                {children}
+                {rightIcon && <span className="icon-right">{rightIcon}</span>}
+            </button>
+        );
+    }
+}
+
+class IconButton extends Button {
+    render() {
+        const { children, theme, variant = "solid", ...rest } = this.props;
+        const className = `wave-button icon-button ${theme} ${variant}`;
+
+        return (
+            <button {...rest} className={className}>
+                {children}
+            </button>
+        );
+    }
+}
+
+export default IconButton;
+
+interface LinkButtonProps extends ButtonProps {
+    href: string;
+    target?: string;
+}
+
+class LinkButton extends IconButton {
+    render() {
+        // @ts-ignore
+        const { href, target, leftIcon, rightIcon, children, theme, variant }: LinkButtonProps = this.props;
+
+        return (
+            <a href={href} target={target} className={`wave-button link-button`}>
+                <button {...this.props} className={`icon-button ${theme} ${variant}`}>
+                    {leftIcon && <span className="icon-left">{leftIcon}</span>}
+                    {children}
+                    {rightIcon && <span className="icon-right">{rightIcon}</span>}
+                </button>
+            </a>
+        );
+    }
+}
+interface StatusProps {
+    status: "green" | "red" | "gray" | "yellow";
+    text: string;
+}
+
+class Status extends React.Component<StatusProps> {
+    @boundMethod
+    renderDot() {
+        const { status } = this.props;
+
+        return <div className={`dot ${status}`} />;
+    }
+
+    render() {
+        const { text } = this.props;
+
+        return (
+            <div className="wave-status-container">
+                {this.renderDot()}
+                <span>{text}</span>
+            </div>
+        );
+    }
+}
+
 interface TextFieldDecorationProps {
     startDecoration?: React.ReactNode;
     endDecoration?: React.ReactNode;
@@ -232,6 +341,7 @@ interface TextFieldProps {
     required?: boolean;
     maxLength?: number;
     autoFocus?: boolean;
+    disabled?: boolean;
 }
 
 interface TextFieldState {
@@ -242,7 +352,6 @@ interface TextFieldState {
     hasContent: boolean;
 }
 
-@mobxReact.observer
 class TextField extends React.Component<TextFieldProps, TextFieldState> {
     inputRef: React.RefObject<HTMLInputElement>;
     state: TextFieldState;
@@ -267,6 +376,22 @@ class TextField extends React.Component<TextFieldProps, TextFieldState> {
         }
     }
 
+    // Method to handle focus at the component level
+    @boundMethod
+    handleComponentFocus() {
+        if (this.inputRef.current && !this.inputRef.current.contains(document.activeElement)) {
+            this.inputRef.current.focus();
+        }
+    }
+
+    // Method to handle blur at the component level
+    @boundMethod
+    handleComponentBlur() {
+        if (this.inputRef.current && this.inputRef.current.contains(document.activeElement)) {
+            this.inputRef.current.blur();
+        }
+    }
+
     @boundMethod
     handleFocus() {
         this.setState({ focused: true });
@@ -311,14 +436,23 @@ class TextField extends React.Component<TextFieldProps, TextFieldState> {
     }
 
     render() {
-        const { label, value, placeholder, decoration, className, maxLength, autoFocus } = this.props;
+        const { label, value, placeholder, decoration, className, maxLength, autoFocus, disabled } = this.props;
         const { focused, internalValue, error } = this.state;
 
         // Decide if the input should behave as controlled or uncontrolled
         const inputValue = value !== undefined ? value : internalValue;
 
         return (
-            <div className={cn(`wave-textfield ${className || ""}`, { focused: focused, error: error })}>
+            <div
+                className={cn(`wave-textfield ${className || ""}`, {
+                    focused: focused,
+                    error: error,
+                    disabled: disabled,
+                })}
+                onFocus={this.handleComponentFocus}
+                onBlur={this.handleComponentBlur}
+                tabIndex={-1}
+            >
                 {decoration?.startDecoration && <>{decoration.startDecoration}</>}
                 <div className="wave-textfield-inner">
                     <label
@@ -341,6 +475,7 @@ class TextField extends React.Component<TextFieldProps, TextFieldState> {
                         placeholder={placeholder}
                         maxLength={maxLength}
                         autoFocus={autoFocus}
+                        disabled={disabled}
                     />
                 </div>
                 {decoration?.endDecoration && <>{decoration.endDecoration}</>}
@@ -617,7 +752,7 @@ class InlineSettingsTextEdit extends React.Component<
                             <div
                                 onClick={this.confirmChange}
                                 title="Confirm (Enter)"
-                                className="button is-prompt-green is-outlined is-small"
+                                className="button is-wave-green is-outlined is-small"
                             >
                                 <span className="icon is-small">
                                     <i className="fa-sharp fa-solid fa-check" />
@@ -964,6 +1099,70 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
     }
 }
 
+interface ModalHeaderProps {
+    onClose: () => void;
+    title: string;
+}
+
+const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, title }) => (
+    <div className="wave-modal-header">
+        {<div>{title}</div>}
+        <IconButton theme="secondary" variant="ghost" onClick={onClose}>
+            <i className="fa-sharp fa-solid fa-xmark"></i>
+        </IconButton>
+    </div>
+);
+
+interface ModalFooterProps {
+    onCancel?: () => void;
+    onOk?: () => void;
+    cancelLabel?: string;
+    okLabel?: string;
+}
+
+const ModalFooter: React.FC<ModalFooterProps> = ({ onCancel, onOk, cancelLabel = "Cancel", okLabel = "Ok" }) => (
+    <div className="wave-modal-footer">
+        {onCancel && (
+            <Button theme="secondary" onClick={onCancel}>
+                {cancelLabel}
+            </Button>
+        )}
+        {onOk && <Button onClick={onOk}>{okLabel}</Button>}
+    </div>
+);
+
+interface ModalProps {
+    className?: string;
+    children?: React.ReactNode;
+    onClickBackdrop?: () => void;
+}
+
+class Modal extends React.Component<ModalProps> {
+    static Header = ModalHeader;
+    static Footer = ModalFooter;
+
+    renderBackdrop(onClick: (() => void) | undefined) {
+        return <div className="wave-modal-backdrop" onClick={onClick}></div>;
+    }
+
+    renderModal() {
+        const { className, children } = this.props;
+
+        return (
+            <div className="wave-modal-container">
+                {this.renderBackdrop(this.props.onClickBackdrop)}
+                <div className={`wave-modal ${className}`}>
+                    <div className="wave-modal-content">{children}</div>
+                </div>
+            </div>
+        );
+    }
+
+    render() {
+        return ReactDOM.createPortal(this.renderModal(), document.getElementById("app") as HTMLElement);
+    }
+}
+
 export {
     CmdStrCode,
     Toggle,
@@ -980,4 +1179,9 @@ export {
     NumberField,
     PasswordField,
     Tooltip,
+    Button,
+    IconButton,
+    LinkButton,
+    Status,
+    Modal,
 };

src/app/common/modals/modalsRegistry.tsx

@@ -0,0 +1,22 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import {
+    AboutModal,
+    CreateRemoteConnModal,
+    ViewRemoteConnDetailModal,
+    EditRemoteConnModal,
+    AlertModal,
+} from "./modals";
+import * as constants from "../../appconst";
+
+const modalsRegistry: { [key: string]: () => React.ReactElement } = {
+    [constants.ABOUT]: () => <AboutModal />,
+    [constants.CREATE_REMOTE]: () => <CreateRemoteConnModal />,
+    [constants.VIEW_REMOTE]: () => <ViewRemoteConnDetailModal />,
+    [constants.EDIT_REMOTE]: () => <EditRemoteConnModal />,
+    [constants.ALERT]: () => <AlertModal />,
+};
+
+export { modalsRegistry };

src/app/common/modals/settings.tsx

@@ -7,10 +7,18 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import cn from "classnames";
-import { GlobalModel, GlobalCommandRunner, TabColors } from "../../../model/model";
-import { Toggle, InlineSettingsTextEdit, SettingsError, InfoMessage } from "../common";
+import {
+    GlobalModel,
+    GlobalCommandRunner,
+    TabColors,
+    MinFontSize,
+    MaxFontSize,
+    TabIcons,
+    Screen,
+} from "../../../model/model";
+import { Toggle, InlineSettingsTextEdit, SettingsError, InfoMessage, Modal } from "../common";
 import { LineType, RendererPluginType, ClientDataType, CommandRtnType } from "../../../types/types";
-import { ConnectionDropdown } from "../../connections/connections";
+import { ConnectionDropdown } from "../../connections_deprecated/connections";
 import { PluginModel } from "../../../plugins/plugins";
 import * as util from "../../../util/util";
 import { commandRtnHandler } from "../../../util/util";
@@ -50,15 +58,16 @@ Are you sure you want to stop web-sharing this tab?
 `.trim();
 
 @mobxReact.observer
-class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId: string; }, {}> {
+class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId: string }, {}> {
     shareCopied: OV<boolean> = mobx.observable.box(false, { name: "ScreenSettings-shareCopied" });
     errorMessage: OV<string> = mobx.observable.box(null, { name: "ScreenSettings-errorMessage" });
+    screen: Screen;
 
     constructor(props: any) {
         super(props);
         let { sessionId, screenId } = props;
-        let screen = GlobalModel.getScreenById(sessionId, screenId);
-        if (screen == null) {
+        this.screen = GlobalModel.getScreenById(sessionId, screenId);
+        if (this.screen == null) {
             return;
         }
     }
@@ -84,6 +93,15 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
         commandRtnHandler(prtn, this.errorMessage);
     }
 
+    @boundMethod
+    selectTabIcon(icon: string): void {
+        if (this.screen.getTabIcon() == icon) {
+            return;
+        }
+        let prtn = GlobalCommandRunner.screenSetSettings(this.screen.screenId, { tabicon: icon }, false);
+        util.commandRtnHandler(prtn, this.errorMessage);
+    }
+
     @boundMethod
     handleChangeArchived(val: boolean): void {
         let { sessionId, screenId } = this.props;
@@ -203,105 +221,123 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
     render() {
         let { sessionId, screenId } = this.props;
         let inline = false;
-        let screen = GlobalModel.getScreenById(sessionId, screenId);
+        let screen = this.screen;
         if (screen == null) {
             return null;
         }
+        console.log("screen.getTabIcon()", screen.getTabIcon());
         let color: string = null;
+        let icon: string = null;
         let curRemote = GlobalModel.getRemote(GlobalModel.getActiveScreen().getCurRemoteInstance().remoteid);
         return (
-            <div className={cn("modal screen-settings-modal settings-modal prompt-modal is-active")}>
-                <div className="modal-background"/>
-                <div className="modal-content">
-                    {this.shareCopied.get() && <div className="copied-indicator" />}
-                    <header>
-                        <div className="modal-title">tab settings ({screen.name.get()})</div>
-                        <div className="close-icon hoverEffect" title="Close (Escape)" onClick={this.closeModal}>
-                            <XmarkIcon />
-                        </div>
-                    </header>
-                    <div className="inner-content">
-                        <div className="settings-field">
-                            <div className="settings-label">Tab Id</div>
-                            <div className="settings-input">{screen.screenId}</div>
-                        </div>
-                        <div className="settings-field">
-                            <div className="settings-label">Name</div>
-                            <div className="settings-input">
-                                <InlineSettingsTextEdit
-                                    placeholder="name"
-                                    text={screen.name.get() ?? "(none)"}
-                                    value={screen.name.get() ?? ""}
-                                    onChange={this.inlineUpdateName}
-                                    maxLength={50}
-                                    showIcon={true}
-                                />
-                            </div>
-                        </div>
-                        <div className="settings-field">
-                            <div className="settings-label">Connection</div>
-                            <div className="settings-input">
-                                <ConnectionDropdown curRemote={curRemote} onSelectRemote={this.selectRemote} allowNewConn={false}/>
-                            </div>
-                        </div>
-                        <div className="settings-field">
-                            <div className="settings-label">Tab Color</div>
-                            <div className="settings-input">
-                                <div className="tab-colors">
-                                    <div className="tab-color-cur">
-                                        <SquareIcon className={cn("tab-color-icon", "color-" + screen.getTabColor())} />
-                                        <span className="tab-color-name">{screen.getTabColor()}</span>
-                                    </div>
-                                    <div className="tab-color-sep">|</div>
-                                    <For each="color" of={TabColors}>
-                                        <div
-                                            key={color}
-                                            className="tab-color-select"
-                                            onClick={() => this.selectTabColor(color)}
-                                        >
-                                            <SquareIcon className={cn("tab-color-icon", "color-" + color)} />
-                                        </div>
-                                    </For>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="settings-field">
-                            <div className="settings-label">
-                                <div>Archived</div>
-                                <InfoMessage width={400}>
-                                    Archive will hide the tab. Commands and output will be retained in
-                                    history.
-                                </InfoMessage>
-                            </div>
-                            <div className="settings-input">
-                                <Toggle checked={screen.archived.get()} onChange={this.handleChangeArchived} />
-                            </div>
-                        </div>
-                        <div className="settings-field">
-                            <div className="settings-label">
-                                <div>Actions</div>
-                                <InfoMessage width={400}>
-                                    Delete will remove the tab, removing all commands and output from history.
-                                </InfoMessage>
-                            </div>
-                            <div className="settings-input">
-                                <div
-                                    onClick={this.handleDeleteScreen}
-                                    className="button is-prompt-danger is-outlined is-small"
-                                >
-                                    Delete Tab
-                                </div>
-                            </div>
-                        </div>
-                        <SettingsError errorMessage={this.errorMessage} />
+            <Modal className="screen-settings-modal">
+                <Modal.Header onClose={this.closeModal} title={`tab settings (${screen.name.get()})`} />
+                <div className="wave-modal-body">
+                    <div className="settings-field">
+                        <div className="settings-label">Tab Id</div>
+                        <div className="settings-input">{screen.screenId}</div>
                     </div>
-                    <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
-                            Close
+                    <div className="settings-field">
+                        <div className="settings-label">Name</div>
+                        <div className="settings-input">
+                            <InlineSettingsTextEdit
+                                placeholder="name"
+                                text={screen.name.get() ?? "(none)"}
+                                value={screen.name.get() ?? ""}
+                                onChange={this.inlineUpdateName}
+                                maxLength={50}
+                                showIcon={true}
+                            />
                         </div>
-                    </footer>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Connection</div>
+                        <div className="settings-input">
+                            <ConnectionDropdown
+                                curRemote={curRemote}
+                                onSelectRemote={this.selectRemote}
+                                allowNewConn={false}
+                            />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Tab Color</div>
+                        <div className="settings-input">
+                            <div className="tab-colors">
+                                <div className="tab-color-cur">
+                                    <SquareIcon className={cn("tab-color-icon", "color-" + screen.getTabColor())} />
+                                    <span className="tab-color-name">{screen.getTabColor()}</span>
+                                </div>
+                                <div className="tab-color-sep">|</div>
+                                <For each="color" of={TabColors}>
+                                    <div
+                                        key={color}
+                                        className="tab-color-select"
+                                        onClick={() => this.selectTabColor(color)}
+                                    >
+                                        <SquareIcon className={cn("tab-color-icon", "color-" + color)} />
+                                    </div>
+                                </For>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Tab Icon</div>
+                        <div className="settings-input">
+                            <div className="tab-icons">
+                                <div className="tab-icon-cur">
+                                    <If condition={screen.getTabIcon() == "default"}>
+                                        <SquareIcon className={cn("tab-color-icon", "color-white")} />
+                                    </If>
+                                    <If condition={screen.getTabIcon() != "default"}>
+                                        <i className={`fa-sharp fa-solid fa-${screen.getTabIcon()}`}></i>
+                                    </If>
+                                    <span className="tab-icon-name">{screen.getTabIcon()}</span>
+                                </div>
+                                <div className="tab-icon-sep">|</div>
+                                <For each="icon" of={TabIcons}>
+                                    <div
+                                        key={color}
+                                        className="tab-icon-select"
+                                        onClick={() => this.selectTabIcon(icon)}
+                                    >
+                                        <i className={`fa-sharp fa-solid fa-${icon}`}></i>
+                                    </div>
+                                </For>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">
+                            <div>Archived</div>
+                            <InfoMessage width={400}>
+                                Archive will hide the tab. Commands and output will be retained in history.
+                            </InfoMessage>
+                        </div>
+                        <div className="settings-input">
+                            <Toggle checked={screen.archived.get()} onChange={this.handleChangeArchived} />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">
+                            <div>Actions</div>
+                            <InfoMessage width={400}>
+                                Delete will remove the tab, removing all commands and output from history.
+                            </InfoMessage>
+                        </div>
+                        <div className="settings-input">
+                            <div
+                                onClick={this.handleDeleteScreen}
+                                className="button is-prompt-danger is-outlined is-small"
+                            >
+                                Delete Tab
+                            </div>
+                        </div>
+                    </div>
+                    <SettingsError errorMessage={this.errorMessage} />
                 </div>
-            </div>
+                <Modal.Footer cancelLabel="Close" onCancel={this.closeModal} />
+            </Modal>
         );
     }
 }
@@ -436,7 +472,7 @@ class SessionSettingsModal extends React.Component<{ sessionId: string }, {}> {
                         <SettingsError errorMessage={this.errorMessage} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                        <div onClick={this.closeModal} className="button is-wave-green is-outlined is-small">
                             Close
                         </div>
                     </footer>
@@ -572,7 +608,7 @@ class LineSettingsModal extends React.Component<{ linenum: number }, {}> {
                         <div style={{ height: 50 }} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                        <div onClick={this.closeModal} className="button is-wave-green is-outlined is-small">
                             Close
                         </div>
                     </footer>
@@ -630,7 +666,10 @@ class ClientSettingsModal extends React.Component<{}, {}> {
     }
 
     renderFontSizeDropdown(): any {
-        let availableFontSizes = [8, 9, 10, 11, 12, 13, 14, 15];
+        let availableFontSizes = [];
+        for (let s = MinFontSize; s <= MaxFontSize; s++) {
+            availableFontSizes.push(s);
+        }
         let fsize: number = 0;
         let curSize = GlobalModel.termFontSize.get();
         return (
@@ -767,7 +806,7 @@ class ClientSettingsModal extends React.Component<{}, {}> {
                         <SettingsError errorMessage={this.errorMessage} />
                     </div>
                     <footer>
-                        <div onClick={this.closeModal} className="button is-prompt-green is-outlined is-small">
+                        <div onClick={this.closeModal} className="button is-wave-green is-outlined is-small">
                             Close
                         </div>
                     </footer>

src/app/common/prompt/prompt.less

@@ -7,7 +7,7 @@
         vertical-align: middle;
         width: 1.2em;
         height: 1.2em;
-        fill: @prompt-green;
+        fill: @wave-green;
     }
 
     .term-prompt-branch {

src/app/common/themes/themes.less

@@ -6,7 +6,7 @@
 @background-session: rgba(13, 13, 13, 0.85);
 @background-session-components: rgba(48, 49, 48, 0.6);
 @background-session-components-solid: rgb(33, 34, 33);
-@prompt-green: rgb(88, 193, 66);
+@wave-green: rgb(88, 193, 66);
 @disabled-background: rgba(76, 81, 75, 1);
 @disabled-color: #adadad;
 @scrollbar-background: rgba(21, 23, 21, 1);

src/app/connections/connections.less

@@ -1,408 +1,107 @@
 @import "../../app/common/themes/themes.less";
 
-.modal.prompt-modal.remotes-modal {
-    .modal-content {
-        min-width: 850px;
-    }
-    .icon {
-        width: 1em;
-        height: 1em;
-        fill: @base-color;
-        margin: 0;
-    }
-    .button {
-        svg {
-            float: right;
-            margin-top: 0.3em;
-            margin-right: 0;
-        }
-    }
-    .dropdown,
-    .button {
-        display: inline-flex;
-    }
-    .dropdown .button {
-        border: none !important;
-    }
-    .inner-content {
-        display: flex;
-        flex-direction: row;
-        align-items: stretch;
-        padding: 0;
-        min-height: 45em;
-        max-height: 45em;
-
-        .remotes-menu {
-            flex: 0 0 200px;
-            border-right: 1px solid @disabled-color;
-            overflow-y: auto;
-
-            .remote-menu-item {
-                border-top: 1px solid @disabled-color;
-                padding: 0.5em;
-                display: flex;
-                flex-direction: row;
-                cursor: pointer;
-
-                &.add-remote {
-                    padding: 10px 5px 10px 5px;
-                }
-
-                &:hover {
-                    background-color: #333;
-                }
-
-                &.is-selected {
-                    background-color: @active-menu-color;
-
-                    .remote-name .remote-name-secondary {
-                        color: @term-white;
-                    }
-                }
-
-                &:first-child {
-                    border-top: 0;
-                }
-
-                .remote-status-light {
-                    width: 2em;
-                    margin-top: 0.7em;
-                    margin-right: 0.7em;
-                    font-size: 0.8em;
-                }
-
-                .remote-name {
-                    flex-grow: 1;
-
-                    .remote-name-primary {
-                        font-weight: bold;
-                        max-width: 10em;
-                        margin-right: 1em;
-                    }
-
-                    .remote-name-secondary {
-                        color: @disabled-color;
-                        max-width: 14em;
-                    }
-                }
-            }
-        }
-
-        .remote-detail {
-            padding: 10px;
-            flex-grow: 1;
-
-            display: flex;
-            flex-direction: column;
-
-            .settings-field {
-                margin-top: 0.75em;
-            }
-
-            * {
-                flex-shrink: 0;
-            }
-
-            .detail-subtitle {
-                margin-bottom: 10px;
-                margin-top: 10px;
-            }
-
-            .title {
-                color: @term-white;
-                padding: 0.75em 0;
-                margin-bottom: 0;
-                border-bottom: 1px solid #777;
-            }
-
-            .terminal-wrapper {
-                margin-left: 0;
-                margin-bottom: 0;
-                &.has-message {
-                    margin-top: 0;
-                }
-                box-shadow: none;
-                border: 1px solid #777;
-                border-radius: 0 0 5px 5px;
-                .xterm-rows {
-                    padding-top: 0.5em;
-                }
-            }
-
-            .action-buttons {
-                display: flex;
-                flex-direction: row;
-                gap: 10px;
-                margin-top: 2px;
-            }
-
-            .remote-message {
-                margin-top: 5px;
-                padding: 8px;
-                border-radius: 5px 5px 0 0;
-                background-color: #333;
-                border: 1px solid #777;
-                border-bottom: none;
-
-                .message-row {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    svg {
-                        vertical-align: text-bottom;
-                    }
-                }
-
-                .remote-status {
-                    position: relative;
-                    top: -1px;
-                }
-
-                .button {
-                    height: 22px;
-                }
-            }
-
-            .settings-field {
-                .update-auth-button {
-                    visibility: hidden;
-                }
-
-                &:hover {
-                    .update-auth-button {
-                        visibility: visible;
-                    }
-
-                    .hide-hover {
-                        display: none;
-                    }
-                }
-            }
-
-            &.auth-editing,
-            &.create-remote {
-                .settings-field.align-top {
-                    align-items: flex-start;
-
-                    .settings-label {
-                        margin-top: 8px;
-                    }
-
-                    .settings-input {
-                        align-items: flex-start;
-                    }
-                }
-
-                .settings-label {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    width: 12em !important;
-                }
-
-                .settings-field .settings-input .undo-icon {
-                    cursor: pointer;
-
-                    margin-left: 5px;
-                }
-
-                .editremote-dropdown .dropdown-trigger button {
-                    width: 120px;
-                    justify-content: flex-start;
-                    color: @base-color;
-                    border: none;
-                    &:hover {
-                        box-shadow: none;
-                    }
-                }
-
-                .settings-field .raw-input {
-                    width: 120px;
-                }
-
-                .settings-input input {
-                    background: rgba(255, 255, 255, 0.8);
-                    width: 250px;
-                    outline: none;
-                }
-
-                .dropdown .dropdown-item {
-                    padding: 5px 5px 5px 12px;
-                }
-
-                .dropdown .dropdown-content {
-                    max-width: 10.6em;
-                }
-
-                .settings-input {
-                    .info-message {
-                        margin-left: 22px;
-                    }
-                }
-
-                .settings-label {
-                    .info-message {
-                        margin-right: 15px;
-                    }
-                }
-            }
-        }
-    }
-
-    .terminal-wrapper {
-        position: relative;
-        padding: 2px 10px 5px 4px;
-        margin: 5px 5px 10px 5px;
-        box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3);
-        &.focus {
-            box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.3);
-        }
-
-        .term-tag {
-            position: absolute;
-            top: 0;
-            right: 0;
-            background-color: @term-red;
-            color: @term-white;
-            z-index: 110;
-            padding: 4px;
-        }
-    }
-}
-
-.dropdown.conn-dropdown {
-    padding-left: 0;
+.connections-view {
+    background-color: @background-session;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: auto;
+    margin-bottom: 10px;
+    margin-right: 10px;
     border-radius: 8px;
-    background-color: rgba(241, 246, 243, 0.08);
+    border: 1px solid rgba(241, 246, 243, 0.08);
+    background: var(--element-window, rgba(13, 13, 13, 0.85));
 
-    .conn-dd-trigger {
+    .header {
+        margin: 24px 18px;
         display: flex;
-        flex-direction: row;
-        width: 413px;
-        padding: 6px 8px 6px 12px;
+        justify-content: space-between;
         align-items: center;
-        height: 42px;
 
-        .lefticon {
-            margin-right: 8px;
-            margin-top: 4px;
-            position: relative;
-
-            .status-icon {
-                width: 10px;
-                height: 10px;
-                stroke-width: 2px;
-                stroke: @status-outline;
-                position: absolute;
-                bottom: 3px;
-                right: -2px;
-            }
-        }
-
-        .dd-control {
-            display: flex;
-            padding: 4px;
-            align-items: center;
-
-            .icon {
-                height: 16px;
-                width: 16px;
-            }
-        }
-
-        .globe-icon {
-            width: 16px;
-            height: 16px;
-            flex-shrink: 0;
-        }
-
-        .conntext {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: flex-start;
-            flex: 1 0 0;
-
-            .conntext-solo {
-                color: @text-primary;
-                text-overflow: ellipsis;
-            }
-
-            .conntext-1 {
-                color: @text-primary;
-                text-overflow: ellipsis;
-            }
-
-            .conntext-2 {
-                color: @text-secondary;
-                text-overflow: ellipsis;
-            }
+        .connections-title {
         }
     }
 
-    .conn-dd-menu {
+    .no-items {
         display: flex;
-        width: 413px;
-        padding: 6px;
-        flex-direction: column;
-        align-items: flex-start;
-        border-radius: 8px;
-        background-color: @dropdown-menu;
+        flex-direction: row;
+        justify-content: center;
+        padding: 30px 0 30px 0;
+        border: 1px solid white;
+        border-radius: 3px;
+        margin: 20px 50px 20px 20px;
+    }
 
-        .dropdown-item {
-            display: flex;
-            padding: 5px 12px 5px 8px;
-            align-items: center;
-            gap: 8px;
-            align-self: stretch;
-            border-radius: 6px;
+    .connections-table {
+        margin: 0px 10px 10px 10px;
+        table-layout: fixed;
+        max-width: 970px;
 
-            .status-div {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 16px;
-                height: 16px;
-                padding: 3px;
-
-                svg.status-icon {
-                    width: 10px;
-                    height: 10px;
-                }
+        colgroup {
+            .first-col {
+                max-width: 650px;
             }
-
-            .add-div {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 16px;
-                height: 16px;
-                
-                svg.add-icon {
-                    width: 16px;
-                    height: 16px;
-
-                    path {
-                        fill: @text-primary;
-                    }
-                }
+            .second-col {
+                max-width: 150px;
             }
+            .third-col {
+                max-width: 200px;
+            }
+        }
 
-            .text-standard {
+        thead {
+            border-radius: var(--sizing-2-xs, 4px);
+            border-top: 1px solid rgba(250, 250, 250, 0.1);
+            border-bottom: 1px solid rgba(241, 246, 243, 0.15);
+            background: var(--opacity-zinc-502, rgba(250, 250, 250, 0.02));
+            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
+                0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
+
+            th {
+                height: 32px;
+                padding: 5px 15px 5px 10px;
                 color: @text-secondary;
             }
+        }
 
-            .text-caption {
-                color: @text-caption;
-            }
-
-            .ellipsis {
-                text-overflow: ellipsis;
-            }
+        tr.connections-item {
+            border-bottom: 1px solid rgba(241, 246, 243, 0.15);
+            color: @text-secondary;
+            cursor: pointer;
 
             &:hover {
-                background-color: rgba(241, 246, 243, 0.08);
+                background: rgba(255, 255, 255, 0.06);
+
+                td.bookmark i {
+                    display: block;
+                }
+            }
+
+            td {
+                height: 40px;
+                padding: 5px 15px 5px 10px;
+                vertical-align: middle;
+
+                .action-buttons {
+                    display: flex;
+                    visibility: hidden;
+                }
+            }
+
+            &.hovered {
+                .action-buttons {
+                    visibility: visible;
+                }
             }
         }
     }
+
+    footer {
+        margin-left: 10px;
+    }
+
+    .help-entry {
+        margin: 1em 2em;
+    }
 }