Improved tab settings pull down (#592)

* add label to tab settings terminal theme dropdown

* add connection label. add New Conection item

* fix wrong prop

* simplify logic

* fix conflicts

src/app/common/elements/dropdown.less

@@ -5,7 +5,7 @@
     width: 100%;
     border: 2px solid var(--form-element-border-color);
     border-radius: 6px;
-    line-height: 22px;
+    line-height: 20px;
     background: var(--form-element-bg-color);
 
     &.no-label {
@@ -63,11 +63,14 @@
         display: flex;
         min-width: 120px;
         padding: 5px 8px;
-        justify-content: space-between;
         align-items: center;
         align-self: stretch;
         border-radius: 6px;
 
+        i {
+            margin-right: 8px;
+        }
+
         &-highlighted,
         &:hover {
             background: rgba(241, 246, 243, 0.08);

src/app/common/elements/dropdown.tsx

@@ -163,7 +163,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
         if (isOpen) {
             const option = options[highlightedIndex];
             if (option) {
-                this.handleSelect(option.value, undefined);
+                this.handleSelect(option, undefined);
             }
         } else {
             this.toggleDropdown();
@@ -185,18 +185,19 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
     handleKeyDown(event: React.KeyboardEvent) {}
 
     @boundMethod
-    handleSelect(value: string, event?: React.MouseEvent | React.KeyboardEvent) {
+    handleSelect({ value, noop }: DropdownItem, event?: React.MouseEvent | React.KeyboardEvent) {
         const { onChange } = this.props;
         if (event) {
             event.stopPropagation(); // This stops the event from bubbling up to the wrapper
         }
 
-        if (!("value" in this.props)) {
-            this.setState({ internalValue: value });
-        }
         onChange(value);
         this.setState({ isOpen: false, isTouched: true });
         this.unregisterKeybindings();
+
+        if (!("value" in this.props) && !noop) {
+            this.setState({ internalValue: value });
+        }
     }
 
     @boundMethod
@@ -245,10 +246,11 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                               className={cn("wave-dropdown-item unselectable", {
                                   "wave-dropdown-item-highlighted": index === highlightedIndex,
                               })}
-                              onClick={(e) => this.handleSelect(option.value, e)}
+                              onClick={(e) => this.handleSelect(option, e)}
                               onMouseEnter={() => this.setState({ highlightedIndex: index })}
                               onMouseLeave={() => this.setState({ highlightedIndex: -1 })}
                           >
+                              {option.icon && <span className="wave-dropdown-item-icon">{option.icon}</span>}
                               {option.label}
                           </div>
                       ))}

src/app/workspace/screen/newtabsettings.tsx

@@ -5,12 +5,10 @@ import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import cn from "classnames";
 import { GlobalCommandRunner, GlobalModel, Screen } from "@/models";
-import { Button, TextField, Dropdown } from "@/elements";
-import { getRemoteStr, getRemoteStrWithAlias } from "@/common/prompt/prompt";
+import { TextField, Dropdown } from "@/elements";
+import { getRemoteStrWithAlias } from "@/common/prompt/prompt";
 import * as util from "@/util/util";
 import { TabIcon } from "@/elements/tabicon";
-import { ReactComponent as EllipseIcon } from "@/assets/icons/ellipse.svg";
-import { ReactComponent as Check12Icon } from "@/assets/icons/check12.svg";
 import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg";
 import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg";
 import * as appconst from "@/app/appconst";
@@ -18,52 +16,6 @@ import * as appconst from "@/app/appconst";
 import "./screenview.less";
 import "./tabs.less";
 
-@mobxReact.observer
-class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
-    errorMessage: OV<string | null> = mobx.observable.box(null, { name: "NewTabSettings-errorMessage" });
-
-    constructor(props) {
-        super(props);
-    }
-
-    @boundMethod
-    clickNewConnection(): void {
-        GlobalModel.remotesModel.openAddModal({ remoteedit: true });
-    }
-
-    render() {
-        let { screen } = this.props;
-        let rptr = screen.curRemote.get();
-        return (
-            <div className="newtab-container">
-                <div className="newtab-section name-section">
-                    <TabNameTextField screen={screen} errorMessage={this.errorMessage} />
-                </div>
-                <div className="newtab-spacer" />
-                <div className="newtab-section conn-section">
-                    <div className="unselectable">
-                        You're connected to <b>[{getRemoteStrWithAlias(rptr)}]</b>. Do you want to change it?
-                    </div>
-                    <div>
-                        <TabRemoteSelector screen={screen} errorMessage={this.errorMessage} />
-                    </div>
-                    <div className="text-caption cr-help-text">
-                        To change connection from the command line use `/connect [alias|user@host]`
-                    </div>
-                </div>
-                <div className="newtab-spacer" />
-                <div className="newtab-section">
-                    <TabIconSelector screen={screen} errorMessage={this.errorMessage} />
-                </div>
-                <div className="newtab-spacer" />
-                <div className="newtab-section">
-                    <TabColorSelector screen={screen} errorMessage={this.errorMessage} />
-                </div>
-            </div>
-        );
-    }
-}
-
 @mobxReact.observer
 class TabNameTextField extends React.Component<{ screen: Screen; errorMessage?: OV<string> }, {}> {
     @boundMethod
@@ -163,6 +115,10 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?:
 
     @boundMethod
     selectRemote(cname: string): void {
+        if (cname == null) {
+            GlobalModel.remotesModel.openAddModal({ remoteedit: true });
+            return;
+        }
         mobx.action(() => {
             this.selectedRemoteCN.set(cname);
         })();
@@ -191,6 +147,14 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?:
                 }
                 return a.remoteidx - b.remoteidx;
             });
+
+        options.push({
+            label: "New Connection",
+            value: null,
+            icon: <i className="fa-sharp fa-solid fa-plus"></i>,
+            noop: true,
+        });
+
         return options;
     }
 
@@ -210,6 +174,7 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?:
         let curRemote = GlobalModel.getRemoteByName(selectedRemote);
         return (
             <Dropdown
+                label="Connection"
                 className="conn-dropdown"
                 options={this.getOptions()}
                 defaultValue={curRemote.remotecanonicalname}
@@ -227,4 +192,4 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?:
     }
 }
 
-export { NewTabSettings, TabColorSelector, TabIconSelector, TabNameTextField, TabRemoteSelector };
+export { TabColorSelector, TabIconSelector, TabNameTextField, TabRemoteSelector };

src/app/workspace/workspace.less

@@ -40,7 +40,7 @@
             border-bottom: none;
         }
 
-        .close-icon {
+        .close-button {
             position: absolute;
             right: 10px;
             top: 10px;
@@ -187,4 +187,8 @@
             }
         }
     }
+
+    .terminal-theme-dropdown {
+        width: 412px;
+    }
 }

src/app/workspace/workspaceview.tsx

@@ -15,10 +15,9 @@ import { ScreenTabs } from "./screen/tabs";
 import { ErrorBoundary } from "@/common/error/errorboundary";
 import { boundMethod } from "autobind-decorator";
 import type { Screen } from "@/models";
-import { Button } from "@/elements";
+import { Button, Dropdown } from "@/elements";
 import { commandRtnHandler } from "@/util/util";
 import { getTermThemes } from "@/util/themeutil";
-import { Dropdown } from "@/elements/dropdown";
 import { getRemoteStrWithAlias } from "@/common/prompt/prompt";
 import { TabColorSelector, TabIconSelector, TabNameTextField, TabRemoteSelector } from "./screen/newtabsettings";
 import * as util from "@/util/util";
@@ -179,6 +178,7 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
                 <If condition={termThemes.length > 0}>
                     <div className="newtab-section">
                         <Dropdown
+                            label="Terminal Theme"
                             className="terminal-theme-dropdown"
                             options={termThemes}
                             defaultValue={currTermTheme}
@@ -301,9 +301,9 @@ class WorkspaceView extends React.Component<{}, {}> {
                 <ScreenTabs key={"tabs-" + sessionId} session={session} />
                 <If condition={activeScreen != null}>
                     <div key="pulldown" className={cn("tab-settings-pulldown", { closed: !showTabSettings })}>
-                        <button className="close-icon" onClick={this.toggleTabSettings}>
+                        <Button className="close-button secondary ghost" onClick={this.toggleTabSettings}>
                             <i className="fa-solid fa-sharp fa-xmark-large" />
-                        </button>
+                        </Button>
                         <TabSettings key={activeScreen.screenId} screen={activeScreen} />
                         <If condition={showTabSettings && !isHidden}>
                             <TabSettingsPulldownKeybindings />

src/types/custom.d.ts

@@ -308,7 +308,9 @@ declare global {
 
     type DropdownItem = {
         label: string;
-        value: string;
+        value?: string;
+        icon?: React.ReactNode;
+        noop?: boolean;
     };
 
     /**