some ideas for new plugin api

* working on easy global shortcut for wave

* globalshortcut setting working

* cmd for macos, alt for others

* re-remove types.ts (was added back during merge)

* rename DDItem to DropdownItem, put into custom.d.ts

* make some consts

src/app/app.tsx

@@ -7,10 +7,9 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
 import dayjs from "dayjs";
-import type { ContextMenuOpts } from "../types/types";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { GlobalModel } from "../models";
+import { GlobalModel } from "@/models";
-import { isBlank } from "../util/util";
+import { isBlank } from "@/util/util";
 import { WorkspaceView } from "./workspace/workspaceview";
 import { PluginsView } from "./pluginsview/pluginsview";
 import { BookmarksView } from "./bookmarks/bookmarks";
@@ -25,8 +24,6 @@ import "./app.less";
 
 dayjs.extend(localizedFormat);
 
-type OV<V> = mobx.IObservableValue<V>;
-
 @mobxReact.observer
 class App extends React.Component<{}, {}> {
     dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });

src/app/appconst.ts

@@ -47,3 +47,13 @@ export const TabIcons = [
 export const VERSION = __WAVETERM_VERSION__;
 // @ts-ignore
 export const BUILD = __WAVETERM_BUILD__;
+
+/**
+ * Levels for the screen status indicator
+ */
+export enum StatusIndicatorLevel {
+    None = 0,
+    Output = 1,
+    Success = 2,
+    Error = 3,
+}

src/app/bookmarks/bookmarks.less

@@ -1,4 +1,4 @@
-@import "../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .bookmarks-view {
     background-color: @background-session;

src/app/bookmarks/bookmarks.tsx

@@ -7,15 +7,14 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import cn from "classnames";
-import type { BookmarkType } from "../../types/types";
+import { GlobalModel } from "@/models";
-import { GlobalModel } from "../../models";
+import { CmdStrCode, Markdown } from "@/common/elements";
-import { CmdStrCode, Markdown } from "../common/elements";
 
-import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
+import { ReactComponent as XmarkIcon } from "@/assets/icons/line/xmark.svg";
-import { ReactComponent as CopyIcon } from "../assets/icons/favourites/copy.svg";
+import { ReactComponent as CopyIcon } from "@/assets/icons/favourites/copy.svg";
-import { ReactComponent as PenIcon } from "../assets/icons/favourites/pen.svg";
+import { ReactComponent as PenIcon } from "@/assets/icons/favourites/pen.svg";
-import { ReactComponent as TrashIcon } from "../assets/icons/favourites/trash.svg";
+import { ReactComponent as TrashIcon } from "@/assets/icons/favourites/trash.svg";
-import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
+import { ReactComponent as FavoritesIcon } from "@/assets/icons/favourites.svg";
 
 import "./bookmarks.less";
 

src/app/clientsettings/clientsettings.less

@@ -1,4 +1,4 @@
-@import "../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .clientsettings-view {
     background-color: @background-session;

src/app/clientsettings/clientsettings.tsx

@@ -6,20 +6,19 @@ import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
-import { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../models";
+import { GlobalModel, GlobalCommandRunner, RemotesModel } from "@/models";
-import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "../common/elements";
+import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
-import * as types from "../../types/types";
+import { commandRtnHandler, isBlank } from "@/util/util";
-import { commandRtnHandler, isBlank } from "../../util/util";
+import * as appconst from "@/app/appconst";
-import * as appconst from "../appconst";
 
 import "./clientsettings.less";
 
 @mobxReact.observer
 class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
-    fontSizeDropdownActive: types.OV<boolean> = mobx.observable.box(false, {
+    fontSizeDropdownActive: OV<boolean> = mobx.observable.box(false, {
         name: "clientSettings-fontSizeDropdownActive",
     });
-    errorMessage: types.OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
+    errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
 
     @boundMethod
     dismissError(): void {
@@ -30,12 +29,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     @boundMethod
     handleChangeFontSize(fontSize: string): void {
-        let newFontSize = Number(fontSize);
+        const newFontSize = Number(fontSize);
         this.fontSizeDropdownActive.set(false);
         if (GlobalModel.termFontSize.get() == newFontSize) {
             return;
         }
-        let prtn = GlobalCommandRunner.setTermFontSize(newFontSize, false);
+        const prtn = GlobalCommandRunner.setTermFontSize(newFontSize, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -48,7 +47,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     @boundMethod
     handleChangeTelemetry(val: boolean): void {
-        let prtn: Promise<types.CommandRtnType> = null;
+        let prtn: Promise<CommandRtnType> = null;
         if (val) {
             prtn = GlobalCommandRunner.telemetryOn(false);
         } else {
@@ -59,7 +58,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
 
     @boundMethod
     handleChangeReleaseCheck(val: boolean): void {
-        let prtn: Promise<types.CommandRtnType> = null;
+        let prtn: Promise<CommandRtnType> = null;
         if (val) {
             prtn = GlobalCommandRunner.releaseCheckAutoOn(false);
         } else {
@@ -68,29 +67,29 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         commandRtnHandler(prtn, this.errorMessage);
     }
 
-    getFontSizes(): any {
+    getFontSizes(): DropdownItem[] {
-        let availableFontSizes: { label: string; value: number }[] = [];
+        const availableFontSizes: DropdownItem[] = [];
         for (let s = appconst.MinFontSize; s <= appconst.MaxFontSize; s++) {
-            availableFontSizes.push({ label: s + "px", value: s });
+            availableFontSizes.push({ label: s + "px", value: String(s) });
         }
         return availableFontSizes;
     }
 
     @boundMethod
     inlineUpdateOpenAIModel(newModel: string): void {
-        let prtn = GlobalCommandRunner.setClientOpenAISettings({ model: newModel });
+        const prtn = GlobalCommandRunner.setClientOpenAISettings({ model: newModel });
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
     inlineUpdateOpenAIToken(newToken: string): void {
-        let prtn = GlobalCommandRunner.setClientOpenAISettings({ apitoken: newToken });
+        const prtn = GlobalCommandRunner.setClientOpenAISettings({ apitoken: newToken });
         commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
     inlineUpdateOpenAIMaxTokens(newMaxTokensStr: string): void {
-        let prtn = GlobalCommandRunner.setClientOpenAISettings({ maxtokens: newMaxTokensStr });
+        const prtn = GlobalCommandRunner.setClientOpenAISettings({ maxtokens: newMaxTokensStr });
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -106,19 +105,41 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         GlobalModel.clientSettingsViewModel.closeView();
     }
 
+    @boundMethod
+    handleChangeShortcut(newShortcut: string): void {
+        const prtn = GlobalCommandRunner.setGlobalShortcut(newShortcut);
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    getFKeys(): DropdownItem[] {
+        const opts: DropdownItem[] = [];
+        opts.push({ label: "Disabled", value: "" });
+        const platform = GlobalModel.getPlatform();
+        for (let i = 1; i <= 12; i++) {
+            const shortcut = (platform == "darwin" ? "Cmd" : "Alt") + "+F" + String(i);
+            opts.push({ label: shortcut, value: shortcut });
+        }
+        return opts;
+    }
+
+    getCurrentShortcut(): string {
+        const clientData = GlobalModel.clientData.get();
+        return clientData?.clientopts?.globalshortcut ?? "";
+    }
+
     render() {
-        let isHidden = GlobalModel.activeMainView.get() != "clientsettings";
+        const isHidden = GlobalModel.activeMainView.get() != "clientsettings";
         if (isHidden) {
             return null;
         }
 
-        let cdata: types.ClientDataType = GlobalModel.clientData.get();
+        const cdata: ClientDataType = GlobalModel.clientData.get();
-        let openAIOpts = cdata.openaiopts ?? {};
+        const openAIOpts = cdata.openaiopts ?? {};
-        let apiTokenStr = isBlank(openAIOpts.apitoken) ? "(not set)" : "********";
+        const apiTokenStr = isBlank(openAIOpts.apitoken) ? "(not set)" : "********";
-        let maxTokensStr = String(
+        const maxTokensStr = String(
             openAIOpts.maxtokens == null || openAIOpts.maxtokens == 0 ? 1000 : openAIOpts.maxtokens
         );
-        let curFontSize = GlobalModel.termFontSize.get();
+        const curFontSize = GlobalModel.termFontSize.get();
 
         return (
             <div className={cn("view clientsettings-view")}>
@@ -208,6 +229,17 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                             />
                         </div>
                     </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Global Hotkey</div>
+                        <div className="settings-input">
+                            <Dropdown
+                                className="hotkey-dropdown"
+                                options={this.getFKeys()}
+                                defaultValue={this.getCurrentShortcut()}
+                                onChange={this.handleChangeShortcut}
+                            />
+                        </div>
+                    </div>
                     <SettingsError errorMessage={this.errorMessage} />
                 </div>
             </div>

src/app/common/elements/button.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .wave-button {
     background: none;

src/app/common/elements/checkbox.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .checkbox {
     display: flex;

src/app/common/elements/cmdstrcode.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .cmdstr-code {
     position: relative;

src/app/common/elements/cmdstrcode.tsx

@@ -6,8 +6,8 @@ import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
 
-import { ReactComponent as CheckIcon } from "../../assets/icons/line/check.svg";
+import { ReactComponent as CheckIcon } from "@/assets/icons/line/check.svg";
-import { ReactComponent as CopyIcon } from "../../assets/icons/history/copy.svg";
+import { ReactComponent as CopyIcon } from "@/assets/icons/history/copy.svg";
 
 import "./cmdstrcode.less";
 

src/app/common/elements/dropdown.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .wave-dropdown {
     position: relative;

src/app/common/elements/dropdown.tsx

@@ -17,7 +17,7 @@ interface DropdownDecorationProps {
 
 interface DropdownProps {
     label?: string;
-    options: { value: string; label: string }[];
+    options: DropdownItem[];
     value?: string;
     className?: string;
     onChange: (value: string) => void;

src/app/common/elements/inlinesettingstextedit.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .inline-edit {
     .icon {

src/app/common/elements/inlinesettingstextedit.tsx

@@ -7,12 +7,10 @@ import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
-import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "../../../util/keyutil";
+import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
 
 import "./inlinesettingstextedit.less";
 
-type OV<V> = mobx.IObservableValue<V>;
-
 @mobxReact.observer
 class InlineSettingsTextEdit extends React.Component<
     {

src/app/common/elements/inputdecoration.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .wave-input-decoration {
     display: flex;

src/app/common/elements/markdown.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .markdown {
     color: @term-white;

src/app/common/elements/markdown.tsx

@@ -6,7 +6,7 @@ import * as mobxReact from "mobx-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
-import { GlobalModel } from "../../../models";
+import { GlobalModel } from "@/models";
 
 import "./markdown.less";
 

src/app/common/elements/modal.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .wave-modal-container {
     position: fixed;

src/app/common/elements/modal.tsx

@@ -10,8 +10,6 @@ import { IconButton } from "./iconbutton";
 
 import "./modal.less";
 
-type OV<V> = mobx.IObservableValue<V>;
-
 interface ModalHeaderProps {
     onClose?: () => void;
     title: string;

src/app/common/elements/passwordfield.less

@@ -1,4 +1,4 @@
-@import "../../../app/common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 .wave-password {
     .wave-textfield-inner-eye {