fix: integrate skeema knownhosts fix

This fix makes it possible to differentiate between keys when multiple
are provided by the remote server. It does not solve the case of
multiple keys of the same type being shared, but it handles multiple
keys of different types being shared, which is much more common.

assets/default-keybindings.json

@@ -1,7 +1,8 @@
 [
     {
       "command": "system:toggleDeveloperTools",
-      "keys": ["Cmd:Option:i"]
+      "keys": ["Cmd:Option:i"],
+      "info": "Opens the chrome developer tool menu"
     },
     {
       "command": "system:hideWindow",
@@ -15,10 +16,62 @@
       "command": "generic:confirm",
       "keys": ["Enter"]
     },
+    {
+      "command": "generic:expandTextInput",
+      "keys": ["Shift:Enter", "Ctrl:Enter"]
+    },
     {
       "command": "generic:deleteItem",
       "keys": ["Backspace", "Delete"]
     },
+    {
+      "command": "generic:space",
+      "keys": ["Space"]
+    },
+    {
+      "command": "generic:tab",
+      "keys": ["Tab"]
+    },
+    {
+      "command": "generic:numpad-0",
+      "keys": ["0"]
+    },
+    {
+      "command": "generic:numpad-1",
+      "keys": ["1"]
+    },
+    {
+      "command": "generic:numpad-2",
+      "keys": ["2"]
+    },
+    {
+      "command": "generic:numpad-3",
+      "keys": ["3"]
+    },
+    {
+      "command": "generic:numpad-4",
+      "keys": ["4"]
+    },
+    {
+      "command": "generic:numpad-5",
+      "keys": ["5"]
+    },
+    {
+      "command": "generic:numpad-6",
+      "keys": ["6"]
+    },
+    {
+      "command": "generic:numpad-7",
+      "keys": ["7"]
+    },
+    {
+      "command": "generic:numpad-8",
+      "keys": ["8"]
+    },
+    {
+      "command": "generic:numpad-9",
+      "keys": ["9"]
+    },
     {
       "command": "generic:selectAbove",
       "keys": ["ArrowUp"]
@@ -27,6 +80,14 @@
       "command": "generic:selectBelow",
       "keys": ["ArrowDown"]
     },
+    {
+      "command": "generic:selectLeft",
+      "keys": ["ArrowLeft"]
+    },
+    {
+      "command": "generic:selectRight",
+      "keys": ["ArrowRight"]
+    },
     {
       "command": "generic:selectPageAbove",
       "keys": ["PageUp"]
@@ -67,7 +128,8 @@
     },
     {
       "command": "app:restartCommand",
-      "keys": ["Cmd:r"]
+      "keys": ["Cmd:r"],
+      "info": "Restarts the command running in the current selected line"
     },
     {
       "command": "app:restartLastCommand",
@@ -87,39 +149,48 @@
     },
     {
       "command": "app:selectTab-1",
-      "keys": ["Cmd:1"]
+      "keys": ["Cmd:1"],
+      "commandStr":"/screen 1"
     },
     {
       "command": "app:selectTab-2",
-      "keys": ["Cmd:2"]
+      "keys": ["Cmd:2"],
+      "commandStr":"/screen 2"
     },
     {
       "command": "app:selectTab-3",
-      "keys": ["Cmd:3"]
+      "keys": ["Cmd:3"],
+      "commandStr":"/screen 3"
     },
     {
       "command": "app:selectTab-4",
-      "keys": ["Cmd:4"]
+      "keys": ["Cmd:4"],
+      "commandStr":"/screen 4"
     },
     {
       "command": "app:selectTab-5",
-      "keys": ["Cmd:5"]
+      "keys": ["Cmd:5"],
+      "commandStr":"/screen 5"
     },
     {
       "command": "app:selectTab-6",
-      "keys": ["Cmd:6"]
+      "keys": ["Cmd:6"],
+      "commandStr":"/screen 6"
     },
     {
       "command": "app:selectTab-7",
-      "keys": ["Cmd:7"]
+      "keys": ["Cmd:7"],
+      "commandStr":"/screen 7"
     },
     {
       "command": "app:selectTab-8",
-      "keys": ["Cmd:8"]
+      "keys": ["Cmd:8"],
+      "commandStr":"/screen 8"
     },
     {
       "command": "app:selectTab-9",
-      "keys": ["Cmd:9"]
+      "keys": ["Cmd:9"],
+      "commandStr":"/screen 9"
     },
     {
       "command": "app:selectTabLeft",

go.work.sum

@@ -134,14 +134,28 @@ github.com/zeebo/xxh3 v1.0.2/go.mod h1:5NWz9Sef7zIDm2JHfFlcQvNekmcEl9ekUZQQKCYaD
 gitlab.com/nyarla/go-crypt v0.0.0-20160106005555-d9a5dc2b789b/go.mod h1:T3BPAOm2cqquPa0MKWeNkmOM5RQsRhkrwMWonFMN7fE=
 go.mongodb.org/mongo-driver v1.7.5/go.mod h1:VXEWRZ6URJIkUq2SCAyapmhH0ZLRBP+FT4xhp5Zvxng=
 go.opencensus.io v0.24.0/go.mod h1:vNK8G9p7aAivkbmorf4v+7Hgx+Zs0yY+0fOtgBfjQKo=
+golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
 golang.org/x/exp v0.0.0-20230315142452-642cacee5cc0/go.mod h1:CxIveKay+FTh1D0yPZemJVgC/95VzuuOLq5Qi4xnoYc=
+golang.org/x/mod v0.17.0 h1:zY54UmvipHiNd+pm+m0x9KhZ9hl1/7QNMyxXbc6ICqA=
+golang.org/x/mod v0.17.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
 golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
+golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44=
+golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
 golang.org/x/oauth2 v0.1.0/go.mod h1:G9FE4dLTsbXUu90h/Pf85g4w1D+SSAgR+q46nJZ8M4A=
 golang.org/x/sync v0.2.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.7.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2/go.mod h1:TeRTkGYfJXctD9OcfyVLyj2J3IxLnKwHJR8f4D8a3YE=
+golang.org/x/term v0.20.0/go.mod h1:8UkIAJTvZgivsXaD6/pH6U9ecQzZ45awqEOzuCvwpFY=
+golang.org/x/term v0.21.0/go.mod h1:ooXLefLobQVslOqselCNF4SxFAaoS6KujMbsGzSDmX0=
 golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/text v0.16.0/go.mod h1:GhwF1Be+LQoKShO3cGOHzqOgRrGaYc9AvblQOmPVHnI=
 golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
 golang.org/x/tools v0.9.1/go.mod h1:owI94Op576fPu3cIGQeHs3joujW/2Oc6MtlxbF5dfNc=
+golang.org/x/tools v0.13.0/go.mod h1:HvlwmtVNQAhOuCjW7xxvovg8wbNq7LwfXh/k7wXUl58=
+golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d/go.mod h1:aiJjzUbINMkxbQROHiO6hDPo2LHcIPhhQsa9DLh0yGk=
 golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2/go.mod h1:K8+ghG5WaK9qNqU5K3HdILfMLy1f3aNYFI/wnl100a8=
 google.golang.org/api v0.106.0/go.mod h1:2Ts0XTHNVWxypznxWOYUeI4g3WdP9Pk2Qk58+a/O9MY=
 google.golang.org/appengine v1.6.7/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=

public/themes/default.css

@@ -7,16 +7,6 @@
 :root {
     --fa-style-family: "Font Awesome 6 Sharp";
 
-    /* these variables are overridden by user settings */
-    /*
-    --termfontfamily: "Hack";
-    --termfontsize: 13px;
-    --termlineheight: 15px;
-    --termpad: 7px;
-    --termfontsize-sm: 11px;
-    --termlineheight-sm: 13px;
-    */
-
     /* base fonts */
     --base-font: normal 15px / normal "Lato", sans-serif;
 
@@ -51,13 +41,11 @@
     /* global colors */
     --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
-    --app-accent-bg-color: rgba(88, 193, 66, 0.2);
-    --app-error-color: rgb(229, 77, 46);
-    --app-warning-color: rgb(224, 185, 86);
-    --app-success-color: rgb(78, 154, 6);
+    --app-accent-bg-color: rgba(88, 193, 66, 0.25);
     --app-text-color: rgb(211, 215, 207);
     --app-text-primary-color: rgb(255, 255, 255);
     --app-text-secondary-color: rgb(195, 200, 194);
+    --app-text-disabled-color: rgb(173, 173, 173);
     --app-border-color: rgb(51, 51, 51);
     --app-maincontent-bg-color: #333;
     --app-panel-bg-color: rgba(21, 23, 21, 1);
@@ -66,16 +54,16 @@
     --app-icon-hover-color: #fff;
     --app-selected-mask-color: rgba(255, 255, 255, 0.06);
 
-    /* icon colors */
+    /* global status colors */
+    --app-error-color: rgb(229, 77, 46);
+    --app-warning-color: rgb(224, 185, 86);
+    --app-success-color: rgb(78, 154, 6);
+    --app-idle-color: var(--app-text-secondary-color);
 
     /* just for macos */
     --app-border-radius-darwin: 10px;
 
-    /* global generic colors */
-    --app-black: rgb(0, 0, 0);
-
     /* scrollbar colors */
-    /* --scrollbar-background-color: rgba(21, 23, 21, 1); */
     --scrollbar-background-color: var(--app-bg-color);
     --scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
     --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
@@ -116,28 +104,9 @@
     --markdown-bg-color: rgb(35, 35, 35);
     --markdown-outline-color: var(--form-element-primary-color);
 
-    /* status(remote) colors */
-    /* todo: all status colors must be unified */
-    --status-connected-color: var(--app-success-color);
-    --status-connecting-color: var(--app-warning-color);
-    --status-error-color: var(--app-error-color);
-    --status-disconnected-color: var(--app-text-secondary-color);
-
-    /* status indicator colors */
-    /* todo: all status colors must be unified */
-    --status-indicator-color: var(--app-text-color);
-    --status-indicator-error: var(--status-error-color);
-    --status-indicator-success: var(--status-connected-color);
-
-    /* status(version) colors */
-    /* todo: all status colors must be unified */
-    --status-outdated-color: var(--status-connecting-color);
-    --status-updated-color: var(--status-connected-color);
-
     /* term status colors */
-    /* todo: all status colors must be unified */
-    --term-error-color: var(--status-error-color);
-    --term-warning-color: var(--status-connecting-color);
+    --term-error-color: var(--app-error-color);
+    --term-warning-color: var(--app-warning-color);
 
     /* hotkey colors */
     --hotkey-text-color: var(--app-text-secondary-color);
@@ -178,17 +147,6 @@
     --line-actions-active-color: rgba(255, 255, 255, 1);
     --line-actions-bg-color: rgba(255, 255, 255, 0.15);
 
-    /* view colors */
-    /* todo: bookmarks is a view, colors must be unified with --view* colors */
-    --bookmarks-text-color: rgb(211, 215, 207);
-    --bookmarks-textarea-bg-color: rgb(0, 0, 0);
-    --bookmarks-disabled-text-color: rgb(173, 173, 173);
-    --bookmarks-control-hover-color: rgb(255, 255, 255);
-
-    /* view colors */
-    --view-error-color: var(--app-error-color);
-    --view-text-color: var(--app-text-color);
-
     /* table colors */
     --table-border-color: rgba(241, 246, 243, 0.15);
     --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
@@ -199,9 +157,6 @@
     --table-tr-selected-bg-color: #222;
     --table-tr-selected-hover-bg-color: #333;
 
-    /* session colors */
-    --session-bg-color: rgba(13, 13, 13, 0.85);
-
     /* cmdinput colors */
     --cmdinput-textarea-bg-color: #171717;
     --cmdinput-text-error-color: var(--term-red);
@@ -222,5 +177,13 @@
     --modal-bg-color: var(--app-bg-color);
     --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
 
-    --logo-button-hover-bg-color: #1e1e1e;
+    --logo-button-hover-bg-color: var(--app-accent-bg-color);
+
+    --xterm-viewport-border-color: rgba(241, 246, 243, 0.15);
+
+    --datepicker-cell-hover-bg-color: rgba(255, 255, 255, 0.06);
+    --datepicker-cell-other-text-color: rgba(255, 255, 255, 0.3);
+    --datepicker-header-fade-color: rgba(255, 255, 255, 0.4);
+    --datepicker-year-header-bg-color: rgba(255, 255, 255, 0.2); /* Light grey background */
+    --datepicker-year-header-border-color: rgba(241, 246, 243, 0.15); /* Light grey border */
 }

public/themes/light.css

@@ -23,15 +23,13 @@
 
     /* tab color */
     --tab-white: rgb(0, 0, 0, 0.6);
+    --tab-mint: rgb(70, 235, 156);
 
     /* button colors */
     --button-text-color: rgb(50, 50, 50); /* Dark gray for light theme */
     --button-primary-color: #fefefe;
     --button-secondary-bg-color: rgba(200, 200, 200, 0.3); /* Semi-transparent light gray */
 
-    /* view colors */
-    --view-text-color: var(--app-text-color);
-
     /* table colors */
     --table-thead-border-top-color: rgba(0, 0, 0, 0.2);
     --table-thead-border-bottom-color: rgba(0, 0, 0, 0.3);
@@ -70,8 +68,16 @@
     --line-actions-inactive-color: rgba(0, 0, 0, 0.3);
     --line-actions-active-color: rgba(0, 0, 0, 1);
 
+    --logo-button-hover-bg-color: #f0f0f0;
+
+    --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
+
+    --datepicker-cell-hover-bg-color: #f0f0f0;
+    --datepicker-cell-other-text-color: rgba(0, 0, 0, 0.3);
+    --datepicker-header-fade-color: rgba(0, 0, 0, 0.4);
+    --datepicker-year-header-bg-color: #f5f5f5;
+    --datepicker-year-header-border-color: #dcdcdc;
+
     /* toggle colors */
     --toggle-thumb-color: var(--app-bg-color);
-
-    --logo-button-hover-bg-color: #f0f0f0;
 }

public/themes/term-default.css

@@ -27,6 +27,6 @@
     --term-cmdtext: #ffffff;
     --term-foreground: #d3d7cf;
     --term-background: #000000;
-    --term-selection-background: #ffffff90;
+    --term-selection-background: #ffffff60;
     --term-cursor-accent: #000000;
 }

src/app/app.less

@@ -101,6 +101,7 @@ body input.input {
     font-size: 10px;
     font-weight: 300;
     line-height: 14px;
+    user-select: none;
 }
 
 .text-s1.icon {
@@ -735,28 +736,28 @@ a.a-block {
 .status-icon.status-connected {
     path,
     circle {
-        fill: var(--status-connected-color);
+        fill: var(--app-success-color);
     }
 }
 
 .status-icon.status-connecting {
     path,
     circle {
-        fill: var(--status-connecting-color);
+        fill: var(--app-warning-color);
     }
 }
 
 .status-icon.status-disconnected {
     path,
     circle {
-        fill: var(--status-disconnected-color);
+        fill: var(--app-idle-color);
     }
 }
 
 .status-icon.status-error {
     path,
     circle {
-        fill: var(--status-error-color);
+        fill: var(--app-error-color);
     }
 }
 
@@ -819,6 +820,7 @@ a.a-block {
         display: flex;
         flex-direction: row;
         align-items: center;
+        user-select: none;
         .info-message {
             margin-left: 5px;
         }
@@ -867,6 +869,7 @@ a.a-block {
                 padding-left: 10px;
                 padding-right: 10px;
                 font-weight: bold;
+                user-select: none;
             }
 
             .tab-color-icon,
@@ -880,6 +883,7 @@ a.a-block {
                 display: inline-block;
                 margin-left: 1em;
                 min-width: 70px;
+                user-select: none;
             }
 
             .tab-color-select,

src/app/bookmarks/bookmarks.less

@@ -6,11 +6,11 @@
     }
 
     .bookmarks-list {
-        color: var(--bookmarks-text-color);
+        color: var(--app-text-color);
         margin: 4px 10px 5px 5px;
 
         .no-bookmarks {
-            color: var(--bookmarks-text-color);
+            color: var(--app-text-color);
             padding: 30px 10px 35px 10px;
             border-bottom: 1px solid white;
         }
@@ -46,21 +46,21 @@
         }
 
         label {
-            color: var(--bookmarks-text-color);
+            color: var(--app-text-color);
             margin-bottom: 4px;
         }
 
         textarea {
             width: 80%;
             min-width: 50%;
-            color: var(--bookmarks-text-color);
-            background-color: var(--bookmarks-textarea-bg-color);
+            color: var(--app-text-color);
+            background-color: var(--form-element-bg-color);
         }
 
         .bookmark-id-div {
             display: none;
             position: absolute;
-            color: var(--bookmarks-disabled-text-color);
+            color: var(--app-text-disabled-color);
             right: 5px;
             bottom: 2px;
             font-size: 0.8em;
@@ -75,7 +75,7 @@
             flex-direction: row;
 
             visibility: hidden;
-            color: var(--bookmarks-text-color);
+            color: var(--app-text-color);
 
             .bookmark-control:first-child {
                 margin-left: 0;
@@ -85,10 +85,6 @@
                 margin-left: 10px;
                 cursor: pointer;
                 padding: 2px;
-
-                &:hover {
-                    color: var(--bookmarks-control-hover-color);
-                }
             }
         }
 

src/app/clientsettings/clientsettings.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
+import { If } from "tsx-control-statements/components";
 import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
@@ -13,6 +14,25 @@ import * as appconst from "@/app/appconst";
 import "./clientsettings.less";
 import { MainView } from "../common/elements/mainview";
 
+class ClientSettingsKeybindings extends React.Component<{}, {}> {
+    componentDidMount() {
+        let clientSettingsViewModel = GlobalModel.clientSettingsViewModel;
+        let keybindManager = GlobalModel.keybindManager;
+        keybindManager.registerKeybinding("mainview", "clientsettings", "generic:cancel", (waveEvent) => {
+            clientSettingsViewModel.closeView();
+            return true;
+        });
+    }
+
+    componentWillUnmount() {
+        GlobalModel.keybindManager.unregisterDomain("clientsettings");
+    }
+
+    render() {
+        return null;
+    }
+}
+
 @mobxReact.observer
 class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
     errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
@@ -116,6 +136,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         commandRtnHandler(prtn, this.errorMessage);
     }
 
+    @boundMethod
+    inlineUpdateOpenAIBaseURL(newBaseURL: string): void {
+        const prtn = GlobalCommandRunner.setClientOpenAISettings({ baseurl: newBaseURL });
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
     @boundMethod
     setErrorMessage(msg: string): void {
         mobx.action(() => {
@@ -168,6 +194,9 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
         return (
             <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
+                <If condition={!isHidden}>
+                    <ClientSettingsKeybindings></ClientSettingsKeybindings>
+                </If>
                 <div className="content">
                     <div className="settings-field">
                         <div className="settings-label">Term Font Size</div>
@@ -232,7 +261,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                         </div>
                     </div>
                     <div className="settings-field">
-                        <div className="settings-label">OpenAI Token</div>
+                        <div className="settings-label">AI Token</div>
                         <div className="settings-input">
                             <InlineSettingsTextEdit
                                 placeholder=""
@@ -245,7 +274,20 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                         </div>
                     </div>
                     <div className="settings-field">
-                        <div className="settings-label">OpenAI Model</div>
+                        <div className="settings-label">AI Base URL</div>
+                        <div className="settings-input">
+                            <InlineSettingsTextEdit
+                                placeholder=""
+                                text={isBlank(openAIOpts.baseurl) ? "openai default" : openAIOpts.baseurl}
+                                value={openAIOpts.baseurl ?? ""}
+                                onChange={this.inlineUpdateOpenAIBaseURL}
+                                maxLength={10}
+                                showIcon={true}
+                            />
+                        </div>
+                    </div>
+                    <div className="settings-field">
+                        <div className="settings-label">AI Model</div>
                         <div className="settings-input">
                             <InlineSettingsTextEdit
                                 placeholder="gpt-3.5-turbo"
@@ -258,7 +300,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                         </div>
                     </div>
                     <div className="settings-field">
-                        <div className="settings-label">OpenAI MaxTokens</div>
+                        <div className="settings-label">AI MaxTokens</div>
                         <div className="settings-input">
                             <InlineSettingsTextEdit
                                 placeholder=""

src/app/common/elements/button.less

@@ -1,8 +1,6 @@
 .wave-button {
     background: none;
-    color: inherit;
     border: none;
-    font: inherit;
     cursor: pointer;
     outline: inherit;
     display: flex;
@@ -12,64 +10,65 @@
     border-radius: 6px;
     height: auto;
     line-height: 1.5;
+    display: block;
+    white-space: nowrap;
+    user-select: none;
+
+    color: var(--form-element-text-color);
+    background: var(--form-element-primary-color);
+    i {
+        fill: var(--form-element-text-color);
+    }
 
     &.primary {
         color: var(--form-element-text-color);
         background: var(--form-element-primary-color);
+        i {
+            fill: var(--form-element-text-color);
+        }
+    }
+
+    &.primary.outlined {
+        background: none;
+        border: 1px solid var(--form-element-primary-color);
 
         i {
             fill: var(--form-element-primary-color);
         }
+    }
 
-        &.solid {
-            color: var(--form-element-text-color);
-            background: var(--form-element-primary-color);
-
-            i {
-                fill: var(--form-element-text-color);
-            }
-        }
-
-        &.outlined {
-            background: none;
-            border: 1px solid var(--form-element-primary-color);
-        }
-
-        &.ghost {
-            background: none;
-        }
-
-        &:hover {
-            color: var(--form-element-text-color);
+    &.primary.ghost {
+        background: none;
+        i {
+            fill: var(--form-element-primary-color);
         }
     }
 
     &.secondary {
-        color: var(--form-element-text-color);
-        background: none;
         color: var(--form-element-text-color);
         background: var(--form-element-secondary-color);
-        box-shadow: none;
-
-        &.solid {
-            color: var(--form-element-text-color);
-            background: var(--form-element-secondary-color);
-            box-shadow: none;
+        i {
+            fill: var(--form-element-text-color);
         }
+    }
 
-        &.outlined {
-            background: none;
-            border: 1px solid var(--form-element-secondary-color);
-        }
+    &.secondary.outlined {
+        background: none;
+        border: 1px solid var(--form-element-text-color);
+    }
 
-        &.ghost {
-            background: none;
-            padding: 6px 10px;
+    &.secondary.ghost {
+        background: none;
+    }
 
-            i {
-                fill: var(--form-element-primary-color);
-            }
-        }
+    &.secondary.danger {
+        color: var(--app-error-color);
+    }
+
+    &.small {
+        padding: 4px 8px;
+        font-size: 12px;
+        border-radius: 3.6px;
     }
 
     &.term-inline {

src/app/common/elements/datepicker.less

@@ -0,0 +1,183 @@
+.day-picker-modal {
+    background-color: var(--form-element-bg-color);
+    z-index: 1000;
+    width: 250px;
+    height: 293px;
+    font-size: 13px;
+    border: 1px solid var(--form-element-border-color);
+    border-radius: 4px;
+    color: var(--form-element-text-color);
+}
+
+.day-picker-input {
+    cursor: default;
+    border: 1px solid var(--form-element-border-color) !important;
+    height: 34px;
+    user-select: none;
+    display: flex;
+    border-radius: 4px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 15px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    input {
+        outline: none !important;
+        border: none !important;
+        height: 100%;
+        padding: 0 !important;
+        cursor: default !important;
+    }
+
+    .fa-calendar {
+        margin-left: 10px;
+        cursor: pointer;
+    }
+}
+
+.day-picker-header {
+    color: var(--form-element-text-color);
+    padding: 10px 10px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    position: sticky;
+
+    div {
+        cursor: default;
+        font-weight: bold;
+        user-select: none;
+
+        &.fade {
+            color: var(--datepicker-header-fade-color);
+        }
+    }
+
+    .arrows {
+        display: flex;
+
+        .wave-button {
+            padding: 5px !important;
+            font-size: 18px !important;
+            cursor: default !important;
+        }
+    }
+}
+
+.day-header {
+    display: flex;
+    color: var(--form-element-text-color);
+    padding: 0 10px;
+
+    .day-header-cell {
+        flex: 1;
+        padding: 10px;
+        color: var(--form-element-text-color);
+        text-align: center;
+        font-weight: bold;
+        user-select: none;
+    }
+}
+
+.day-picker {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0;
+    padding: 0 10px 10px;
+
+    .day {
+        padding: 10px 4px;
+        color: var(--form-element-text-color);
+        text-align: center;
+        cursor: default;
+        border-radius: 3px;
+
+        &:hover {
+            background-color: var(--datepicker-cell-hover-bg-color);
+        }
+        &.selected {
+            background-color: var(--form-element-primary-color);
+            font-weight: bold;
+        }
+    }
+
+    .other-month {
+        color: var(--datepicker-cell-other-text-color);
+    }
+}
+
+.year-month-accordion-wrapper {
+    overflow-y: auto;
+    height: 243px;
+    margin-top: 8px;
+    padding: 0 10px 10px;
+
+    .year-month-accordion {
+        color: var(--form-element-text-color);
+    }
+
+    .year-header {
+        padding: 5px 10px;
+        background-color: var(--datepicker-year-header-bg-color);
+        border-bottom: 1px solid var(--datepicker-year-header-border-color);
+        margin-bottom: 5px;
+        font-weight: bold;
+        text-align: center;
+        cursor: default;
+        color: var(--form-element-text-color);
+        user-select: none;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .month-container {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 5px;
+        padding: 10px;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+        cursor: default;
+    }
+
+    .month {
+        padding: 5px;
+        text-align: center;
+        border-radius: 3px;
+        color: var(--form-element-text-color);
+
+        &:hover {
+            background-color: var(--datepicker-cell-hover-bg-color);
+        }
+
+        &.selected {
+            background-color: var(--form-element-primary-color);
+        }
+    }
+
+    .expanded {
+        max-height: 500px;
+    }
+}
+
+.dropdown-arrow {
+    display: inline-block;
+    margin-left: 5px;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid var(--form-element-text-color);
+    vertical-align: middle;
+    user-select: none;
+
+    &.fade {
+        border-top: 5px solid var(--datepicker-header-fade-color);
+    }
+}

src/app/common/elements/datepicker.tsx

@@ -0,0 +1,499 @@
+import React, { useState, useEffect, useRef, createRef } from "react";
+import * as mobx from "mobx";
+import ReactDOM from "react-dom";
+import dayjs from "dayjs";
+import cs from "classnames";
+import { Button } from "@/elements";
+import { If } from "tsx-control-statements/components";
+import { GlobalModel } from "@/models";
+import { v4 as uuidv4 } from "uuid";
+
+import "./datepicker.less";
+
+interface YearRefs {
+    [key: number]: React.RefObject<HTMLDivElement>;
+}
+
+type DatePickerProps = {
+    selectedDate: Date;
+    onSelectDate: (date: Date) => void;
+    format?: string;
+};
+
+const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/YYYY", onSelectDate }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selDate, setSelDate] = useState(dayjs(selectedDate)); // Initialize with dayjs object
+    const [showYearAccordion, setShowYearAccordion] = useState(false);
+    const [expandedYear, setExpandedYear] = useState<number | null>(selDate.year());
+    const yearRefs = useRef<YearRefs>({});
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const modalRef = useRef<HTMLDivElement>(null);
+    const calendarIconRef = useRef(null);
+    const inputRefs = useRef({ YYYY: null, MM: null, DD: null });
+    // Extract delimiter using regex
+    const delimiter = format.replace(/[0-9YMD]/g, "")[0] || "/";
+    // Split format and create state for each part
+    const formatParts = format.split(delimiter);
+    const [dateParts, setDateParts] = useState({
+        YYYY: selDate.format("YYYY"),
+        MM: selDate.format("MM"),
+        DD: selDate.format("DD"),
+    });
+    let curUuid = uuidv4();
+    let keybindsRegistered = mobx.observable.box(false, {
+        name: "datepicker-keybinds-registered",
+    });
+
+    useEffect(() => {
+        inputRefs.current = {
+            YYYY: createRef(),
+            MM: createRef(),
+            DD: createRef(),
+        };
+    }, []);
+
+    useEffect(() => {
+        if (showYearAccordion && expandedYear && yearRefs.current[expandedYear]) {
+            yearRefs.current[expandedYear].current?.scrollIntoView({
+                block: "nearest",
+            });
+        }
+    }, [showYearAccordion, expandedYear]);
+
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    useEffect(() => {
+        setDateParts({
+            YYYY: selDate.format("YYYY"),
+            MM: selDate.format("MM"),
+            DD: selDate.format("DD"),
+        });
+    }, [selDate]);
+
+    const handleClickOutside = (event: MouseEvent) => {
+        // Check if the click is on the calendar icon
+        if (calendarIconRef.current && calendarIconRef.current.contains(event.target as Node)) {
+            // Click is on the calendar icon, do nothing
+            return;
+        }
+
+        // Check if the click is outside the modal
+        if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+            setIsOpen(false); // Close the modal
+        }
+    };
+
+    const handleDayClick = (date: Date) => {
+        const newDate = dayjs(date);
+        setSelDate(newDate); // Update selDate with the new dayjs object
+        onSelectDate && onSelectDate(date); // Call parent's onSelectDate
+        setIsOpen(false); // Close the picker
+    };
+
+    const changeMonth = (delta: number) => {
+        const newDate = selDate.add(delta, "month");
+        setSelDate(newDate);
+        onSelectDate && onSelectDate(newDate.toDate());
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="day-picker-header">
+                <div
+                    className={cs({ fade: showYearAccordion })}
+                    onClick={() => {
+                        if (!showYearAccordion) {
+                            setExpandedYear(selDate.year()); // Set expandedYear when opening accordion
+                        }
+                        setShowYearAccordion(!showYearAccordion);
+                    }}
+                >
+                    {selDate.format("MMMM YYYY")}
+                    <span className={cs("dropdown-arrow", { fade: showYearAccordion })}></span>
+                </div>
+                <If condition={!showYearAccordion}>
+                    <div className="arrows">
+                        <Button className="secondary ghost" onClick={() => changeMonth(-1)}>
+                            &uarr;
+                        </Button>
+                        <Button className="secondary ghost" onClick={() => changeMonth(1)}>
+                            &darr;
+                        </Button>
+                    </div>
+                </If>
+            </div>
+        );
+    };
+
+    const renderDayHeaders = () => {
+        const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"]; // First letter of each day
+        return (
+            <div className="day-header">
+                {daysOfWeek.map((day, i) => (
+                    <div key={`${day}-${i}`} className="day-header-cell">
+                        {day}
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    const renderDays = () => {
+        const days = [];
+        const startDay = selDate.startOf("month");
+        const endDay = selDate.endOf("month");
+        const startDate = startDay.day(); // 0 for Sunday, 1 for Monday, ..., 6 for Saturday
+
+        // Previous month's filler days
+        const previousMonth = startDay.subtract(1, "month");
+        const daysInPreviousMonth = previousMonth.daysInMonth();
+        for (let i = daysInPreviousMonth - startDate + 1; i <= daysInPreviousMonth; i++) {
+            const dayDate = previousMonth.date(i);
+            days.push(
+                <div
+                    key={`prev-month-day-${i}`}
+                    className="day other-month"
+                    onClick={() => handleDayClick(dayDate.toDate())}
+                >
+                    {i}
+                </div>
+            );
+        }
+
+        // Current month's days
+        for (
+            let dayCount = 1;
+            startDay.add(dayCount - 1, "day").isBefore(endDay) ||
+            startDay.add(dayCount - 1, "day").isSame(endDay, "day");
+            dayCount++
+        ) {
+            const currentDate = startDay.add(dayCount - 1, "day");
+            days.push(
+                <div
+                    key={dayCount}
+                    className={`day ${selDate.isSame(currentDate, "day") ? "selected" : ""}`}
+                    onClick={() => handleDayClick(currentDate.toDate())}
+                >
+                    {dayCount}
+                </div>
+            );
+        }
+
+        // Next month's filler days
+        while (days.length < 42) {
+            const fillerDayCount = days.length - daysInPreviousMonth - endDay.date();
+            const dayDate = endDay.add(fillerDayCount + 1, "day");
+            days.push(
+                <div
+                    key={`next-month-day-${dayDate.format("YYYY-MM-DD")}`}
+                    className="day other-month"
+                    onClick={() => handleDayClick(dayDate.toDate())}
+                >
+                    {dayDate.date()}
+                </div>
+            );
+        }
+
+        return days;
+    };
+
+    const calculatePosition = (): React.CSSProperties => {
+        if (wrapperRef.current) {
+            const rect = wrapperRef.current.getBoundingClientRect();
+            return {
+                position: "absolute",
+                top: `${rect.bottom + window.scrollY + 2}px`,
+                left: `${rect.left + window.scrollX}px`,
+            };
+        }
+        return {};
+    };
+
+    const populateYears = () => {
+        const currentYear = dayjs().year();
+        const startYear = currentYear - 10;
+        const endYear = currentYear + 10;
+        const yearsRange = [];
+
+        for (let year = startYear; year <= endYear; year++) {
+            yearsRange.push(year);
+            yearRefs.current[year] = React.createRef();
+        }
+
+        return yearsRange;
+    };
+
+    const handleMonthYearSelect = (month: number, year: number) => {
+        const newDate = dayjs(new Date(year, month - 1));
+        setSelDate(newDate);
+        setShowYearAccordion(false); // Close accordion
+        onSelectDate && onSelectDate(newDate.toDate());
+    };
+
+    const renderYearMonthAccordion = () => {
+        const years = populateYears();
+        const currentYear = selDate.year();
+
+        return (
+            <div className="year-month-accordion-wrapper">
+                <div className="year-month-accordion">
+                    {years.map((year) => (
+                        <div key={year} ref={yearRefs.current[year]}>
+                            <div
+                                className="year-header"
+                                data-year={year}
+                                onClick={() => setExpandedYear(year === expandedYear ? null : year)}
+                            >
+                                {year}
+                            </div>
+                            <If condition={expandedYear === year}>
+                                <div
+                                    className={cs("month-container", {
+                                        expanded: expandedYear === year,
+                                    })}
+                                >
+                                    {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
+                                        <div
+                                            key={month}
+                                            className={cs("month", {
+                                                selected: year === currentYear && month === selDate.month() + 1,
+                                            })}
+                                            onClick={() => handleMonthYearSelect(month, year)}
+                                        >
+                                            {dayjs(new Date(year, month - 1)).format("MMM")}
+                                        </div>
+                                    ))}
+                                </div>
+                            </If>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    };
+
+    const toggleModal = () => {
+        setIsOpen((prevIsOpen) => !prevIsOpen);
+        setShowYearAccordion(false);
+    };
+
+    const closeModal = () => {
+        setIsOpen(false);
+        setShowYearAccordion(false);
+    };
+
+    const dayPickerModal = isOpen
+        ? ReactDOM.createPortal(
+              <div ref={modalRef} className="day-picker-modal" style={calculatePosition()}>
+                  {renderHeader()}
+                  {showYearAccordion && renderYearMonthAccordion()}
+                  <If condition={!showYearAccordion}>
+                      <>
+                          {renderDayHeaders()}
+                          <div className="day-picker">{renderDays()}</div>
+                      </>
+                  </If>
+              </div>,
+              document.getElementById("app")!
+          )
+        : null;
+
+    const handleDatePartChange = (part, value) => {
+        const newDateParts = { ...dateParts, [part]: value };
+        setDateParts(newDateParts);
+
+        // Construct a new date from the updated parts
+        const newDate = dayjs(`${newDateParts.YYYY}-${newDateParts.MM}-${newDateParts.DD}`);
+        if (newDate.isValid()) {
+            onSelectDate(newDate.toDate()); // Call onSelectDate with the new date
+        }
+    };
+
+    const handleArrowNavigation = (key, currentPart) => {
+        const currentIndex = formatParts.indexOf(currentPart);
+        let targetInput;
+
+        if (key == "ArrowLeft" && currentIndex > 0) {
+            targetInput = inputRefs.current[formatParts[currentIndex - 1]].current;
+        } else if (key == "ArrowRight" && currentIndex < formatParts.length - 1) {
+            targetInput = inputRefs.current[formatParts[currentIndex + 1]].current;
+        }
+
+        if (targetInput) {
+            targetInput.focus();
+        }
+    };
+
+    const handleKeyDown = (event, currentPart) => {};
+
+    const handleFocus = (event, part) => {
+        event.target.select();
+        registerKeybindings(event, part);
+    };
+
+    const registerKeybindings = (event: any, part: string) => {
+        if (keybindsRegistered.get() == true) {
+            return;
+        }
+        mobx.action(() => {
+            keybindsRegistered.set(true);
+        })();
+        let keybindManager = GlobalModel.keybindManager;
+        let domain = "datepicker-" + curUuid + "-" + part;
+        keybindManager.registerKeybinding("control", domain, "generic:selectLeft", (waveEvent) => {
+            handleArrowNavigation("ArrowLeft", part);
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:selectRight", (waveEvent) => {
+            handleArrowNavigation("ArrowRight", part);
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:space", (waveEvent) => {
+            toggleModal();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:confirm", (waveEvent) => {
+            toggleModal();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
+            closeModal();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:tab", (waveEvent) => {
+            handleArrowNavigation("ArrowRight", part);
+            return true;
+        });
+        for (let numpadKey = 0; numpadKey <= 9; numpadKey++) {
+            keybindManager.registerKeybinding(
+                "control",
+                domain,
+                "generic:numpad-" + numpadKey.toString(),
+                (waveEvent) => {
+                    let currentPart = part;
+                    const maxLength = currentPart === "YYYY" ? 4 : 2;
+                    const newValue = event.target.value.length < maxLength ? event.target.value + numpadKey : numpadKey;
+                    let selectionTimeoutId = null;
+                    handleDatePartChange(currentPart, newValue);
+
+                    // Clear any existing timeout
+                    if (selectionTimeoutId !== null) {
+                        clearTimeout(selectionTimeoutId);
+                    }
+
+                    // Re-focus and select the input after state update
+                    selectionTimeoutId = setTimeout(() => {
+                        event.target.focus();
+                        event.target.select();
+                    }, 0);
+                    return true;
+                }
+            );
+        }
+    };
+
+    const handleBlur = (event, part) => {
+        unregisterKeybindings(part);
+    };
+
+    const unregisterKeybindings = (part) => {
+        mobx.action(() => {
+            keybindsRegistered.set(false);
+        })();
+        let domain = "datepicker-" + curUuid + "-" + part;
+        GlobalModel.keybindManager.unregisterDomain(domain);
+    };
+
+    // Prevent use from selecting text in the input
+    const handleMouseDown = (event, part) => {
+        event.preventDefault();
+
+        handleFocus(event, part);
+    };
+
+    const handleIconKeyDown = (event) => {
+        if (event.key === "Enter") {
+            toggleModal();
+        }
+    };
+
+    const setInputWidth = (inputRef, value) => {
+        const span = document.createElement("span");
+        document.body.appendChild(span);
+        span.style.font = "inherit";
+        span.style.visibility = "hidden";
+        span.style.position = "absolute";
+        span.textContent = value;
+        const textWidth = span.offsetWidth;
+        document.body.removeChild(span);
+
+        if (inputRef.current) {
+            inputRef.current.style.width = `${textWidth}px`;
+        }
+    };
+
+    useEffect(() => {
+        // This timeout ensures that the effect runs after the DOM updates
+        const timeoutId = setTimeout(() => {
+            formatParts.forEach((part) => {
+                const inputRef = inputRefs.current[part];
+                if (inputRef && inputRef.current) {
+                    setInputWidth(inputRef, dateParts[part]);
+                }
+            });
+        }, 0);
+
+        return () => clearTimeout(timeoutId); // Cleanup timeout on unmount
+    }, []);
+
+    const renderDatePickerInput = () => {
+        return (
+            <div className="day-picker-input">
+                {formatParts.map((part, index) => {
+                    const inputRef = inputRefs.current[part];
+
+                    return (
+                        <React.Fragment key={part}>
+                            {index > 0 && <span>{delimiter}</span>}
+                            <input
+                                readOnly
+                                ref={inputRef}
+                                type="text"
+                                value={dateParts[part]}
+                                onChange={(e) => handleDatePartChange(part, e.target.value)}
+                                onKeyDown={(e) => handleKeyDown(e, part)}
+                                onMouseDown={(e) => handleMouseDown(e, part)}
+                                onFocus={(e) => handleFocus(e, part)}
+                                onBlur={(e) => handleBlur(e, part)}
+                                maxLength={part === "YYYY" ? 4 : 2}
+                                className="date-input"
+                                placeholder={part}
+                            />
+                        </React.Fragment>
+                    );
+                })}
+                <i
+                    ref={calendarIconRef}
+                    className="fa-sharp fa-regular fa-calendar"
+                    onClick={toggleModal}
+                    onKeyDown={handleIconKeyDown}
+                    tabIndex={0} // Makes the icon focusable
+                    role="button" // Semantic role for accessibility
+                    aria-label="Toggle date picker" // Accessible label for screen readers
+                />
+            </div>
+        );
+    };
+
+    return (
+        <div ref={wrapperRef}>
+            {renderDatePickerInput()}
+            {dayPickerModal}
+        </div>
+    );
+};
+
+export { DatePicker };

src/app/common/elements/dropdown.less

@@ -20,6 +20,7 @@
         transition: all 0.3s;
         color: var(--form-element-label-color);
         line-height: 10px;
+        user-select: none;
 
         &.float {
             font-size: 10px;

src/app/common/elements/dropdown.tsx

@@ -7,6 +7,8 @@ import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
 import ReactDOM from "react-dom";
+import { v4 as uuidv4 } from "uuid";
+import { GlobalModel } from "@/models";
 
 import "./dropdown.less";
 
@@ -39,6 +41,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
     wrapperRef: React.RefObject<HTMLDivElement>;
     menuRef: React.RefObject<HTMLDivElement>;
     timeoutId: any;
+    curUuid: string;
 
     constructor(props: DropdownProps) {
         super(props);
@@ -50,6 +53,7 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
         };
         this.wrapperRef = React.createRef();
         this.menuRef = React.createRef();
+        this.curUuid == uuidv4();
     }
 
     componentDidMount() {
@@ -102,49 +106,76 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
     @boundMethod
     handleFocus() {
         this.setState({ isTouched: true });
+        this.registerKeybindings();
+    }
+
+    registerKeybindings() {
+        let keybindManager = GlobalModel.keybindManager;
+        let domain = "dropdown-" + this.curUuid;
+        keybindManager.registerKeybinding("control", domain, "generic:confirm", (waveEvent) => {
+            this.handleConfirm();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:space", (waveEvent) => {
+            this.handleConfirm();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
+            this.setState({ isOpen: false });
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:selectAbove", (waveEvent) => {
+            const { isOpen } = this.state;
+            const { options } = this.props;
+            if (isOpen) {
+                this.setState((prevState) => ({
+                    highlightedIndex:
+                        prevState.highlightedIndex > 0 ? prevState.highlightedIndex - 1 : options.length - 1,
+                }));
+            }
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:selectBelow", (waveEvent) => {
+            const { isOpen } = this.state;
+            const { options } = this.props;
+            if (isOpen) {
+                this.setState((prevState) => ({
+                    highlightedIndex:
+                        prevState.highlightedIndex < options.length - 1 ? prevState.highlightedIndex + 1 : 0,
+                }));
+            }
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:tab", (waveEvent) => {
+            this.setState({ isOpen: false });
+            return true;
+        });
+    }
+
+    handleConfirm() {
+        const { options } = this.props;
+        const { isOpen, highlightedIndex } = this.state;
+        if (isOpen) {
+            const option = options[highlightedIndex];
+            if (option) {
+                this.handleSelect(option.value, undefined);
+            }
+        } else {
+            this.toggleDropdown();
+        }
+    }
+
+    handleBlur() {
+        this.unregisterKeybindings();
+    }
+
+    unregisterKeybindings() {
+        let domain = "dropdown-" + this.curUuid;
+        GlobalModel.keybindManager.unregisterDomain(domain);
     }
 
     @boundMethod
-    handleKeyDown(event: React.KeyboardEvent) {
-        const { options } = this.props;
-        const { isOpen, highlightedIndex } = this.state;
-
-        switch (event.key) {
-            case "Enter":
-            case " ":
-                if (isOpen) {
-                    const option = options[highlightedIndex];
-                    if (option) {
-                        this.handleSelect(option.value, undefined);
-                    }
-                } else {
-                    this.toggleDropdown();
-                }
-                break;
-            case "Escape":
-                this.setState({ isOpen: false });
-                break;
-            case "ArrowUp":
-                if (isOpen) {
-                    this.setState((prevState) => ({
-                        highlightedIndex:
-                            prevState.highlightedIndex > 0 ? prevState.highlightedIndex - 1 : options.length - 1,
-                    }));
-                }
-                break;
-            case "ArrowDown":
-                if (isOpen) {
-                    this.setState((prevState) => ({
-                        highlightedIndex:
-                            prevState.highlightedIndex < options.length - 1 ? prevState.highlightedIndex + 1 : 0,
-                    }));
-                }
-                break;
-            case "Tab":
-                this.setState({ isOpen: false });
-                break;
-        }
-    }
+    handleKeyDown(event: React.KeyboardEvent) {}
 
     @boundMethod
     handleSelect(value: string, event?: React.MouseEvent | React.KeyboardEvent) {
@@ -228,7 +259,8 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                 tabIndex={0}
                 onKeyDown={this.handleKeyDown}
                 onClick={this.handleClick}
-                onFocus={this.handleFocus}
+                onFocus={this.handleFocus.bind(this)}
+                onBlur={this.handleBlur.bind(this)}
             >
                 {decoration?.startDecoration && <>{decoration.startDecoration}</>}
                 <If condition={label}>

src/app/common/elements/index.tsx

@@ -17,3 +17,4 @@ export { TextField } from "./textfield";
 export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TabIcon } from "./tabicon";
+export { DatePicker } from "./datepicker";

src/app/common/elements/inlinesettingstextedit.tsx

@@ -8,6 +8,8 @@ import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
 import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
+import { GlobalModel } from "@/models";
+import { v4 as uuidv4 } from "uuid";
 
 import "./inlinesettingstextedit.less";
 
@@ -27,6 +29,11 @@ class InlineSettingsTextEdit extends React.Component<
     tempText: OV<string>;
     shouldFocus: boolean = false;
     inputRef: React.RefObject<any> = React.createRef();
+    curId: string;
+
+    componentDidMount(): void {
+        this.curId = uuidv4();
+    }
 
     componentDidUpdate(): void {
         if (this.shouldFocus) {
@@ -52,6 +59,7 @@ class InlineSettingsTextEdit extends React.Component<
             this.tempText = null;
             this.props.onChange(newText);
         })();
+        this.unregisterKeybindings();
     }
 
     @boundMethod
@@ -60,24 +68,38 @@ class InlineSettingsTextEdit extends React.Component<
             this.isEditing.set(false);
             this.tempText = null;
         })();
+        this.unregisterKeybindings();
     }
 
-    @boundMethod
-    handleKeyDown(e: any): void {
-        let waveEvent = adaptFromReactOrNativeKeyEvent(e);
-        if (checkKeyPressed(waveEvent, "Enter")) {
-            e.preventDefault();
-            e.stopPropagation();
+    handleFocus() {
+        this.registerKeybindings();
+    }
+
+    registerKeybindings() {
+        let keybindManager = GlobalModel.keybindManager;
+        let domain = "inline-settings" + this.curId;
+        keybindManager.registerKeybinding("control", domain, "generic:confirm", (waveEvent) => {
             this.confirmChange();
-            return;
-        }
-        if (checkKeyPressed(waveEvent, "Escape")) {
-            e.preventDefault();
-            e.stopPropagation();
+            return true;
+        });
+        keybindManager.registerKeybinding("control", domain, "generic:cancel", (waveEvent) => {
             this.cancelChange();
-            return;
-        }
-        return;
+            return true;
+        });
+    }
+
+    unregisterKeybindings() {
+        let domain = "inline-settings" + this.curId;
+        GlobalModel.keybindManager.unregisterDomain(domain);
+    }
+
+    handleBlur() {
+        this.unregisterKeybindings();
+        this.cancelChange();
+    }
+
+    componentWillUnmount(): void {
+        this.unregisterKeybindings();
     }
 
     @boundMethod
@@ -99,7 +121,8 @@ class InlineSettingsTextEdit extends React.Component<
                                 ref={this.inputRef}
                                 className="input"
                                 type="text"
-                                onKeyDown={this.handleKeyDown}
+                                onFocus={this.handleFocus.bind(this)}
+                                onBlur={this.handleBlur.bind(this)}
                                 placeholder={this.props.placeholder}
                                 onChange={this.handleChangeText}
                                 value={this.tempText.get()}

src/app/common/elements/mainview.less

@@ -9,6 +9,10 @@
         display: none;
     }
 
+    .header-container {
+        border-bottom: 1px solid var(--app-border-color);
+    }
+
     .header {
         -webkit-app-region: drag;
         display: flex;
@@ -18,7 +22,7 @@
         vertical-align: middle;
         padding: 0 10px 0 10px;
         margin: 0;
-        border-bottom: 1px solid var(--app-border-color);
+        user-select: none;
 
         .title {
             font-size: var(--title-font-size);
@@ -42,10 +46,10 @@
 
 // This ensures the tab bar does not collide with the floating logo. The floating logo sits above the sidebar when it is not collapsed, so no additional margin is needed in that case.
 // More margin is given on macOS to account for the traffic light buttons
-#main.platform-darwin.mainsidebar-collapsed .header {
-    margin-left: var(--floating-logo-width-darwin);
+#main.platform-darwin.mainsidebar-collapsed .header-container {
+    padding-left: var(--floating-logo-width-darwin);
 }
 
-#main:not(.platform-darwin).mainsidebar-collapsed .header {
-    margin-left: var(--floating-logo-width);
+#main:not(.platform-darwin).mainsidebar-collapsed .header-container {
+    padding-left: var(--floating-logo-width);
 }

src/app/common/elements/mainview.tsx

@@ -23,7 +23,7 @@ class MainView extends React.Component<{
                 className={cn("mainview", this.props.className)}
                 style={{ maxWidth: `calc(100vw - ${maxWidthSubtractor}px)` }}
             >
-                <div className="header-container bottom-border">
+                <div className="header-container">
                     <header className="header">
                         <div className="title text-primary">{this.props.title}</div>
                         <div className="close-div hoverEffect" title="Close (Escape)" onClick={this.props.onClose}>

src/app/common/elements/modal.less

@@ -44,6 +44,7 @@
             justify-content: space-between;
             line-height: 20px;
             border-bottom: 1px solid var(--modal-header-bottom-border-color);
+            user-select: none;
 
             .wave-modal-title {
                 color: var(--app-text-primary-color);

src/app/common/elements/modal.tsx

@@ -6,8 +6,11 @@ import * as mobx from "mobx";
 import { If } from "tsx-control-statements/components";
 import ReactDOM from "react-dom";
 import { Button } from "./button";
+import { v4 as uuidv4 } from "uuid";
+import { GlobalModel } from "@/models";
 
 import "./modal.less";
+import { boundMethod } from "autobind-decorator";
 
 interface ModalHeaderProps {
     onClose?: () => void;
@@ -30,10 +33,52 @@ interface ModalFooterProps {
     onOk?: () => void;
     cancelLabel?: string;
     okLabel?: string;
+    keybindings?: boolean;
 }
 
-const ModalFooter: React.FC<ModalFooterProps> = ({ onCancel, onOk, cancelLabel = "Cancel", okLabel = "Ok" }) => (
+class ModalKeybindings extends React.Component<{ onOk; onCancel }, {}> {
+    curId: string;
+
+    @boundMethod
+    componentDidMount(): void {
+        this.curId = uuidv4();
+        let domain = "modal-" + this.curId;
+        let keybindManager = GlobalModel.keybindManager;
+        if (this.props.onOk) {
+            keybindManager.registerKeybinding("modal", domain, "generic:confirm", (waveEvent) => {
+                this.props.onOk();
+                return true;
+            });
+        }
+        if (this.props.onCancel) {
+            keybindManager.registerKeybinding("modal", domain, "generic:cancel", (waveEvent) => {
+                this.props.onCancel();
+                return true;
+            });
+        }
+    }
+
+    @boundMethod
+    componentWillUnmount(): void {
+        GlobalModel.keybindManager.unregisterDomain("modal-" + this.curId);
+    }
+
+    render(): React.ReactNode {
+        return null;
+    }
+}
+
+const ModalFooter: React.FC<ModalFooterProps> = ({
+    onCancel,
+    onOk,
+    cancelLabel = "Cancel",
+    okLabel = "Ok",
+    keybindings = true,
+}) => (
     <div className="wave-modal-footer">
+        <If condition={keybindings}>
+            <ModalKeybindings onOk={onOk} onCancel={onCancel}></ModalKeybindings>
+        </If>
         {onCancel && (
             <Button className="secondary" onClick={onCancel}>
                 {cancelLabel}
@@ -79,4 +124,4 @@ class Modal extends React.Component<ModalProps> {
     }
 }
 
-export { Modal };
+export { Modal, ModalKeybindings };

src/app/common/elements/status.less

@@ -11,18 +11,18 @@
     }
 
     .dot.green {
-        background-color: var(--status-connected-color);
+        background-color: var(--app-success-color);
     }
 
     .dot.red {
-        background-color: var(--status-error-color);
+        background-color: var(--app-error-color);
     }
 
     .dot.gray {
-        background-color: var(--status-disconnected-color);
+        background-color: var(--app-idle-color);
     }
 
     .dot.yellow {
-        background-color: var(--status-connecting-color);
+        background-color: var(--app-warning-color);
     }
 }