Merge branch 'main' into evan/inshellisense

* fix: ignore computer sleep for telemetry clock

This uses unix time with regular integer comparisons to prevent the
telemetry clock from needing to wait for 8 hours of the program running.
Now, it only needs to wait 8 real-time hours instead.

* drop telemetry time to 4 hours, tick every 10 minutes

package.json

@@ -18,11 +18,13 @@
         "appId": "dev.commandline.waveterm"
     },
     "dependencies": {
+        "@lexical/react": "^0.14.3",
         "@monaco-editor/react": "^4.5.1",
         "@table-nav/core": "^0.0.7",
         "@table-nav/react": "^0.0.7",
         "@tanstack/match-sorter-utils": "^8.8.4",
         "@tanstack/react-table": "^8.10.3",
+        "@withfig/autocomplete": "^2.652.3",
         "autobind-decorator": "^2.4.0",
         "base64-js": "^1.5.1",
         "classnames": "^2.3.1",
@@ -31,17 +33,17 @@
         "electron-squirrel-startup": "^1.0.0",
         "electron-updater": "^6.1.8",
         "framer-motion": "^10.16.16",
+        "lexical": "^0.14.3",
         "mobx": "6.12",
-        "mobx-preact": "^7.5.0",
+        "mobx-react": "^7.5.0",
         "monaco-editor": "^0.44.0",
         "mustache": "^4.2.0",
         "node-fetch": "^3.2.10",
         "overlayscrollbars": "^2.6.1",
         "overlayscrollbars-react": "^0.5.5",
         "papaparse": "^5.4.1",
-        "preact": "^10.20.1",
-        "react": "npm:@preact/compat",
-        "react-dom": "npm:@preact/compat",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
         "react-markdown": "^9.0.0",
         "remark": "^15.0.1",
         "remark-gfm": "^4.0.0",
@@ -72,11 +74,13 @@
         "@types/electron": "^1.6.10",
         "@types/node": "^20.11.0",
         "@types/papaparse": "^5.3.10",
+        "@types/react": "^18.0.12",
         "@types/semver": "^7.5.6",
         "@types/sprintf-js": "^1.1.3",
         "@types/throttle-debounce": "^5.0.1",
         "@types/uuid": "^9.0.7",
         "@types/webpack-env": "^1.18.3",
+        "@withfig/autocomplete-types": "^1.30.0",
         "babel-loader": "^9.1.3",
         "babel-plugin-jsx-control-statements": "^4.1.2",
         "copy-webpack-plugin": "^12.0.0",

public/themes/default.css

@@ -42,16 +42,19 @@
     --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
     --app-accent-bg-color: rgba(88, 193, 66, 0.25);
+    --app-accent-bg-darker-color: rgba(88, 193, 66, 0.5);
     --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-text-bg-color: rgb(23, 23, 23);
+    --app-text-bg-disabled-color: rgb(51, 51, 51);
     --app-border-color: rgb(51, 51, 51);
-    --app-maincontent-bg-color: #333;
+    --app-maincontent-bg-color: rgb(51, 51, 51);
     --app-panel-bg-color: rgba(21, 23, 21, 1);
     --app-panel-bg-color-dev: rgb(21, 23, 48);
     --app-icon-color: rgb(139, 145, 138);
-    --app-icon-hover-color: #fff;
+    --app-icon-hover-color: rgb(255, 255, 255);
     --app-selected-mask-color: rgba(255, 255, 255, 0.06);
 
     /* global status colors */
@@ -122,18 +125,18 @@
 
     /* line colors */
     --line-sidebar-message-color: rgb(196, 160, 0);
-    --line-background: rgba(21, 23, 21, 1);
-    --line-avatar-color: #eceeec;
+    --line-background: var(--app-panel-bg-color);
+    --line-avatar-color: rgb(236, 238, 236);
     --line-text-color: rgb(211, 215, 207);
     --line-svg-fill-color: rgb(150, 152, 150);
-    --line-svg-hover-fill-color: #eceeec;
+    --line-svg-hover-fill-color: rgb(236, 238, 236);
     --line-separator-color: rgb(126, 126, 126);
     --line-error-color: var(--app-error-color);
     --line-warning-color: var(--app-warning-color);
-    --line-base-soft-blue-color: #729fcf;
+    --line-base-soft-blue-color: rgb(114, 159, 207);
     --line-active-border-color: var(--app-accent-color);
     --line-selected-bg-color: rgba(255, 255, 255, 0.05);
-    --line-selected-border-left-color: #777777;
+    --line-selected-border-left-color: rgb(119, 119, 119);
     --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
     --line-selected-error-bg-color: rgb(19, 4, 3);
     --line-error-bg-color: rgba(200, 0, 0, 0.1);
@@ -152,22 +155,21 @@
     /* table colors */
     --table-border-color: rgba(241, 246, 243, 0.15);
     --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
-    --table-thead-bright-border-color: #ccc;
+    --table-thead-bright-border-color: rgb(204, 204, 204);
     --table-thead-bg-color: rgba(250, 250, 250, 0.02);
     --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
     --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
-    --table-tr-selected-bg-color: #222;
-    --table-tr-selected-hover-bg-color: #333;
+    --table-tr-selected-bg-color: rgb(34, 34, 34);
+    --table-tr-selected-hover-bg-color: var(--app-maincontent-bg-color);
 
     /* cmdinput colors */
-    --cmdinput-textarea-bg-color: #171717;
+    --cmdinput-bg-color: var(--app-text-bg-color);
     --cmdinput-text-error-color: var(--term-red);
     --cmdinput-history-item-error-color: var(--term-bright-red);
     --cmdinput-history-item-selected-error-color: var(--term-bright-red);
-    --cmdinput-button-bg-color: rgb(88, 193, 66);
-    --cmdinput-comment-button-bg-color: rgb(57, 113, 255);
-    --cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
-    --cmdinput-history-bg-color: rgb(21, 23, 21, 1);
+    --cmdinput-button-bg-color: var(--tab-green);
+    --cmdinput-disabled-bg-color: var(--app-text-bg-disabled-color);
+    --cmdinput-history-bg-color: var(--app-bg-color);
 
     /* screen view color */
     --screen-view-text-caption-color: rgb(139, 145, 138);

public/themes/light.css

@@ -5,20 +5,20 @@
 @import url("./term-light.css");
 
 :root {
-    --app-bg-color: #fefefe;
+    --app-bg-color: rgb(254, 254, 254);
     --app-accent-color: rgb(75, 166, 57);
     --app-accent-bg-color: rgba(75, 166, 57, 0.2);
-    --app-text-color: #000;
-    --app-text-primary-color: rgb(0, 0, 0, 0.9);
-    --app-text-secondary-color: rgb(0, 0, 0, 0.7);
+    --app-text-color: rgb(0, 0, 0);
+    --app-text-primary-color: rgb(23, 23, 23);
+    --app-text-secondary-color: rgb(76, 76, 76);
     --app-border-color: rgb(139 145 138);
-    --app-panel-bg-color: #e0e0e0;
-    --app-panel-bg-color-dev: #e0e0e0;
-    --app-icon-color: rgb(80, 80, 80);
-    --app-icon-hover-color: rgb(100, 100, 100);
+    --app-panel-bg-color: rgb(224, 224, 224);
+    --app-panel-bg-color-dev: rgb(224, 224, 224);
+    --app-icon-color: rgb(110, 110, 110);
+    --app-icon-hover-color: rgb(80, 80, 80);
     --app-selected-mask-color: rgba(0, 0, 0, 0.06);
 
-    --input-bg-color: #eeeeee;
+    --input-bg-color: rgb(238, 238, 238);
 
     /* tab color */
     --tab-white: rgb(0, 0, 0, 0.6);
@@ -30,8 +30,8 @@
     --table-thead-bg-color: rgba(250, 250, 250, 0.15);
     --table-tr-border-bottom-color: rgba(0, 0, 0, 0.15);
     --table-tr-hover-bg-color: rgba(0, 0, 0, 0.15);
-    --table-tr-selected-bg-color: #dddddd;
-    --table-tr-selected-hover-bg-color: #cccccc;
+    --table-tr-selected-bg-color: rgb(221, 221, 221);
+    --table-tr-selected-hover-bg-color: rgb(204, 204, 204);
 
     /* form colors */
     --form-element-border-color: rgba(0, 0, 0, 0.3);
@@ -41,8 +41,8 @@
     --form-element-label-color: rgba(0, 0, 0, 0.6);
     --form-element-secondary-color: rgba(0, 0, 0, 0.09);
     --form-element-icon-color: rgb(0, 0, 0, 0.6);
-    --form-element-disabled-text-color: #b7b7b7;
-    --form-element-placeholder-color: #b7b7b7;
+    --form-element-disabled-text-color: rgb(183, 183, 183);
+    --form-element-placeholder-color: rgb(183, 183, 183);
 
     --markdown-bg-color: rgb(0, 0, 0, 0.1);
 
@@ -50,8 +50,6 @@
     --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
 
     /* cmd input */
-    --cmdinput-textarea-bg-color: rgba(0, 0, 0, 0.1);
-    --cmdinput-textarea-border-color: var(--form-element-border-color);
 
     /* scroll colors */
     --scrollbar-background-color: var(--app-bg-color);
@@ -64,15 +62,15 @@
     --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;
+    --logo-button-hover-bg-color: rgb(240, 240, 240);
 
     --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
 
-    --datepicker-cell-hover-bg-color: #f0f0f0;
+    --datepicker-cell-hover-bg-color: rgb(240, 240, 240);
     --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;
+    --datepicker-year-header-bg-color: rgb(245, 245, 245);
+    --datepicker-year-header-border-color: rgb(220, 220, 220);
 
     /* toggle colors */
     --toggle-thumb-color: var(--app-bg-color);

src/app/app.tsx

@@ -1,9 +1,8 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PureComponent } from "preact/compat";
-import { createRef, RefObject } from "preact";
-import * as mobxReact from "mobx-preact";
+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";
@@ -29,9 +28,9 @@ import "./app.less";
 dayjs.extend(localizedFormat);
 
 @mobxReact.observer
-class App extends PureComponent<{}, {}> {
+class App extends React.Component<{}, {}> {
     dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
-    mainContentRef: RefObject<HTMLDivElement> = createRef();
+    mainContentRef: React.RefObject<HTMLDivElement> = React.createRef();
 
     constructor(props: {}) {
         super(props);
@@ -147,7 +146,7 @@ class App extends PureComponent<{}, {}> {
                 <If condition={GlobalModel.isDev && rightSidebarCollapsed && activeMainView == "session"}>
                     <div className="right-sidebar-triggers">
                         <Button className="secondary ghost right-sidebar-trigger" onClick={this.openRightSidebar}>
-                            <i className="fa-sharp fa-regular fa-lightbulb"></i>
+                            <i className="fa-sharp fa-solid fa-sidebar-flip"></i>
                         </Button>
                     </div>
                 </If>

src/app/appconst.ts

@@ -64,3 +64,8 @@ export enum StatusIndicatorLevel {
 
 // matches packet.go
 export const ErrorCode_InvalidCwd = "ERRCWD";
+
+export const InputAuxView_History = "history";
+export const InputAuxView_Info = "info";
+export const InputAuxView_AIChat = "aichat";
+export const InputAuxView_Suggestions = "suggestions";

src/app/bookmarks/bookmarks.tsx

@@ -1,8 +1,8 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PureComponent } from "preact/compat";
-import * as mobxReact from "mobx-preact";
+import * as React from "react";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
@@ -22,7 +22,7 @@ type BookmarkProps = {
     bookmark: BookmarkType;
 };
 
-class BookmarkKeybindings extends PureComponent<{}, {}> {
+class BookmarkKeybindings extends React.Component<{}, {}> {
     @boundMethod
     componentDidMount(): void {
         let keybindManager = GlobalModel.keybindManager;
@@ -76,7 +76,7 @@ class BookmarkKeybindings extends PureComponent<{}, {}> {
 }
 
 @mobxReact.observer
-class Bookmark extends PureComponent<BookmarkProps, {}> {
+class Bookmark extends React.Component<BookmarkProps, {}> {
     @boundMethod
     handleDeleteClick(): void {
         let { bookmark } = this.props;
@@ -232,7 +232,7 @@ class Bookmark extends PureComponent<BookmarkProps, {}> {
 }
 
 @mobxReact.observer
-class BookmarksView extends PureComponent<{}, {}> {
+class BookmarksView extends React.Component<{}, {}> {
     @boundMethod
     handleClose() {
         GlobalModel.bookmarksModel.closeView();

src/app/clientsettings/clientsettings.tsx

@@ -1,20 +1,21 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PureComponent } from "preact/compat";
-import * as mobxReact from "mobx-preact";
+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 { GlobalModel, GlobalCommandRunner, RemotesModel } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
+import { getTermThemes } from "@/util/themeutil";
 import * as appconst from "@/app/appconst";
+import { MainView } from "@/common/elements/mainview";
 
 import "./clientsettings.less";
-import { MainView } from "../common/elements/mainview";
 
-class ClientSettingsKeybindings extends PureComponent<{}, {}> {
+class ClientSettingsKeybindings extends React.Component<{}, {}> {
     componentDidMount() {
         let clientSettingsViewModel = GlobalModel.clientSettingsViewModel;
         let keybindManager = GlobalModel.keybindManager;
@@ -34,7 +35,7 @@ class ClientSettingsKeybindings extends PureComponent<{}, {}> {
 }
 
 @mobxReact.observer
-class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hoveredItemId: string }> {
+class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
     errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
 
     @boundMethod
@@ -69,7 +70,20 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
             return;
         }
         const prtn = GlobalCommandRunner.setTheme(themeSource, false);
-        getApi().setNativeThemeSource(themeSource);
+        GlobalModel.getElectronApi().setNativeThemeSource(themeSource);
+        commandRtnHandler(prtn, this.errorMessage);
+    }
+
+    @boundMethod
+    handleChangeTermTheme(theme: string): void {
+        // For global terminal theme, the key is global, otherwise it's either
+        // sessionId or screenId.
+        const currTheme = GlobalModel.getTermTheme()["global"];
+        if (currTheme == theme) {
+            return;
+        }
+
+        const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
         commandRtnHandler(prtn, this.errorMessage);
     }
 
@@ -93,7 +107,13 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
             prtn = GlobalCommandRunner.releaseCheckAutoOff(false);
         }
         commandRtnHandler(prtn, this.errorMessage);
-        getApi().changeAutoUpdate(val);
+        GlobalModel.getElectronApi().changeAutoUpdate(val);
+    }
+
+    @boundMethod
+    handleChangeAutocompleteEnabled(val: boolean): void {
+        const prtn: Promise<CommandRtnType> = GlobalCommandRunner.setAutocompleteEnabled(val);
+        commandRtnHandler(prtn, this.errorMessage);
     }
 
     getFontSizes(): DropdownItem[] {
@@ -193,6 +213,8 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
         const curFontSize = GlobalModel.getTermFontSize();
         const curFontFamily = GlobalModel.getTermFontFamily();
         const curTheme = GlobalModel.getThemeSource();
+        const termThemes = getTermThemes(GlobalModel.termThemes, "Wave Default");
+        const currTermTheme = GlobalModel.getTermTheme()["global"] ?? termThemes[0].label;
 
         return (
             <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
@@ -233,6 +255,19 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
                             />
                         </div>
                     </div>
+                    <If condition={termThemes.length > 0}>
+                        <div className="settings-field">
+                            <div className="settings-label">Terminal Theme</div>
+                            <div className="settings-input">
+                                <Dropdown
+                                    className="terminal-theme-dropdown"
+                                    options={termThemes}
+                                    defaultValue={currTermTheme}
+                                    onChange={this.handleChangeTermTheme}
+                                />
+                            </div>
+                        </div>
+                    </If>
                     <div className="settings-field">
                         <div className="settings-label">Client ID</div>
                         <div className="settings-input">{cdata.clientid}</div>
@@ -325,6 +360,15 @@ class ClientSettingsView extends PureComponent<{ model: RemotesModel }, { hovere
                             />
                         </div>
                     </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Command Autocomplete</div>
+                        <div className="settings-input">
+                            <Toggle
+                                checked={cdata.clientopts.autocompleteenabled ?? false}
+                                onChange={this.handleChangeAutocompleteEnabled}
+                            />
+                        </div>
+                    </div>
                     <SettingsError errorMessage={this.errorMessage} />
                 </div>
             </MainView>

src/app/common/elements/button.tsx

@@ -1,36 +1,37 @@
-import React, { PureComponent, ReactNode, CSSProperties } from "preact/compat";
+import * as React from "react";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 
 import "./button.less";
 
 interface ButtonProps {
-    children: ReactNode;
-    onClick?: () => void;
+    children: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     disabled?: boolean;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
-    style?: CSSProperties;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    style?: React.CSSProperties;
     autoFocus?: boolean;
     className?: string;
     termInline?: boolean;
+    title?: string;
 }
 
-class Button extends PureComponent<ButtonProps> {
+class Button extends React.Component<ButtonProps> {
     static defaultProps = {
         style: {},
         className: "primary",
     };
 
     @boundMethod
-    handleClick() {
+    handleClick(e) {
         if (this.props.onClick && !this.props.disabled) {
-            this.props.onClick();
+            this.props.onClick(e);
         }
     }
 
     render() {
-        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className } = this.props;
+        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className, title } = this.props;
 
         return (
             <button
@@ -39,6 +40,7 @@ class Button extends PureComponent<ButtonProps> {
                 disabled={disabled}
                 style={style}
                 autoFocus={autoFocus}
+                title={title}
             >
                 {leftIcon && <span className="icon-left">{leftIcon}</span>}
                 {children}

src/app/common/elements/checkbox.tsx

@@ -1,17 +1,18 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { PureComponent, ReactNode } from "preact/compat";
+import * as React from "react";
+import * as mobx from "mobx";
 import cn from "classnames";
 
 import "./checkbox.less";
 
-class Checkbox extends PureComponent<
+class Checkbox extends React.Component<
     {
         checked?: boolean;
         defaultChecked?: boolean;
         onChange: (value: boolean) => void;
-        label: ReactNode;
+        label: React.ReactNode;
         className?: string;
         id?: string;
     },

src/app/common/elements/cmdstrcode.tsx

@@ -1,7 +1,7 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PureComponent } from "preact/compat";
+import * as React from "react";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
@@ -11,7 +11,7 @@ import { ReactComponent as CopyIcon } from "@/assets/icons/history/copy.svg";
 
 import "./cmdstrcode.less";
 
-class CmdStrCode extends PureComponent<
+class CmdStrCode extends React.Component<
     {
         cmdstr: string;
         onUse: () => void;

src/app/common/elements/cmdtext.tsx

@@ -1,7 +1,7 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PureComponent } from "preact/compat";
+import * as React from "react";
 
 function renderCmdText(text: string): any {
     return <span>&#x2318;{text}</span>;

src/app/common/elements/copybutton.less

@@ -0,0 +1,7 @@
+.copy-button {
+    padding: 5px 5px;
+
+    .fa-check {
+        color: var(--app-success-color);
+    }
+}

src/app/common/elements/copybutton.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Button } from "./button";
+import { boundMethod } from "autobind-decorator";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+
+import "./copybutton.less";
+
+type CopyButtonProps = {
+    title: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+@mobxReact.observer
+class CopyButton extends React.Component<CopyButtonProps, {}> {
+    isCopied: OV<boolean> = mobx.observable.box(false, { name: "isCopied" });
+
+    @boundMethod
+    handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {
+        if (this.isCopied.get()) {
+            return;
+        }
+        mobx.action(() => {
+            this.isCopied.set(true);
+        })();
+        setTimeout(() => {
+            mobx.action(() => {
+                this.isCopied.set(false);
+            })();
+        }, 2000);
+        if (this.props.onClick) {
+            this.props.onClick(e);
+        }
+    }
+
+    render() {
+        const { title, onClick } = this.props;
+        const isCopied = this.isCopied.get();
+        return (
+            <Button onClick={this.handleOnClick} className="copy-button secondary ghost" title={title}>
+                {isCopied ? (
+                    <i className="fa-sharp fa-solid fa-check"></i>
+                ) : (
+                    <i className="fa-sharp fa-solid fa-copy"></i>
+                )}
+            </Button>
+        );
+    }
+}
+
+export { CopyButton };

src/app/common/elements/datepicker.tsx

@@ -1,5 +1,4 @@
-import { RefObject, FunctionComponent, createRef, Fragment } from "preact";
-import { useState, useEffect, useRef, CSSProperties } from "preact/compat";
+import React, { useState, useEffect, useRef, createRef } from "react";
 import * as mobx from "mobx";
 import ReactDOM from "react-dom";
 import dayjs from "dayjs";
@@ -12,7 +11,7 @@ import { v4 as uuidv4 } from "uuid";
 import "./datepicker.less";
 
 interface YearRefs {
-    [key: number]: RefObject<HTMLDivElement>;
+    [key: number]: React.RefObject<HTMLDivElement>;
 }
 
 type DatePickerProps = {
@@ -21,7 +20,7 @@ type DatePickerProps = {
     format?: string;
 };
 
-const DatePicker: FunctionComponent<DatePickerProps> = ({ selectedDate, format = "MM/DD/YYYY", onSelectDate }) => {
+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);
@@ -200,7 +199,7 @@ const DatePicker: FunctionComponent<DatePickerProps> = ({ selectedDate, format =
         return days;
     };
 
-    const calculatePosition = (): CSSProperties => {
+    const calculatePosition = (): React.CSSProperties => {
         if (wrapperRef.current) {
             const rect = wrapperRef.current.getBoundingClientRect();
             return {
@@ -220,7 +219,7 @@ const DatePicker: FunctionComponent<DatePickerProps> = ({ selectedDate, format =
 
         for (let year = startYear; year <= endYear; year++) {
             yearsRange.push(year);
-            yearRefs.current[year] = createRef();
+            yearRefs.current[year] = React.createRef();
         }
 
         return yearsRange;
@@ -451,14 +450,14 @@ const DatePicker: FunctionComponent<DatePickerProps> = ({ selectedDate, format =
                     const inputRef = inputRefs.current[part];
 
                     return (
-                        <Fragment key={part}>
+                        <React.Fragment key={part}>
                             {index > 0 && <span>{delimiter}</span>}
                             <input
                                 readOnly
                                 ref={inputRef}
                                 type="text"
                                 value={dateParts[part]}
-                                onChange={(e) => handleDatePartChange(part, (e.target as HTMLInputElement).value)}
+                                onChange={(e) => handleDatePartChange(part, e.target.value)}
                                 onKeyDown={(e) => handleKeyDown(e, part)}
                                 onMouseDown={(e) => handleMouseDown(e, part)}
                                 onFocus={(e) => handleFocus(e, part)}
@@ -467,7 +466,7 @@ const DatePicker: FunctionComponent<DatePickerProps> = ({ selectedDate, format =
                                 className="date-input"
                                 placeholder={part}
                             />
-                        </Fragment>
+                        </React.Fragment>
                     );
                 })}
                 <i

src/app/common/elements/dropdown.tsx

@@ -1,9 +1,8 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { RefObject, createRef } from "preact";
-import React, { PureComponent, ReactNode, TargetedEvent, CSSProperties } from "preact/compat";
-import * as mobxReact from "mobx-preact";
+import * as React from "react";
+import * as mobxReact from "mobx-react";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
@@ -14,8 +13,8 @@ import { GlobalModel } from "@/models";
 import "./dropdown.less";
 
 interface DropdownDecorationProps {
-    startDecoration?: ReactNode;
-    endDecoration?: ReactNode;
+    startDecoration?: React.ReactNode;
+    endDecoration?: React.ReactNode;
 }
 
 interface DropdownProps {
@@ -38,9 +37,9 @@ interface DropdownState {
 }
 
 @mobxReact.observer
-class Dropdown extends PureComponent<DropdownProps, DropdownState> {
-    wrapperRef: RefObject<HTMLDivElement>;
-    menuRef: RefObject<HTMLDivElement>;
+class Dropdown extends React.Component<DropdownProps, DropdownState> {
+    wrapperRef: React.RefObject<HTMLDivElement>;
+    menuRef: React.RefObject<HTMLDivElement>;
     timeoutId: any;
     curUuid: string;
 
@@ -52,8 +51,8 @@ class Dropdown extends PureComponent<DropdownProps, DropdownState> {
             highlightedIndex: -1,
             isTouched: false,
         };
-        this.wrapperRef = createRef();
-        this.menuRef = createRef();
+        this.wrapperRef = React.createRef();
+        this.menuRef = React.createRef();
         this.curUuid = uuidv4();
     }
 
@@ -183,10 +182,10 @@ class Dropdown extends PureComponent<DropdownProps, DropdownState> {
     }
 
     @boundMethod
-    handleKeyDown(event) {}
+    handleKeyDown(event: React.KeyboardEvent) {}
 
     @boundMethod
-    handleSelect(value: string, event?: TargetedEvent) {
+    handleSelect(value: string, event?: React.MouseEvent | React.KeyboardEvent) {
         const { onChange } = this.props;
         if (event) {
             event.stopPropagation(); // This stops the event from bubbling up to the wrapper
@@ -206,7 +205,7 @@ class Dropdown extends PureComponent<DropdownProps, DropdownState> {
     }
 
     @boundMethod
-    calculatePosition(): CSSProperties {
+    calculatePosition(): React.CSSProperties {
         if (this.wrapperRef.current) {
             const rect = this.wrapperRef.current.getBoundingClientRect();
             return {

src/app/common/elements/index.tsx

@@ -18,3 +18,4 @@ export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TabIcon } from "./tabicon";
 export { DatePicker } from "./datepicker";
+export { CopyButton } from "./copybutton";

src/app/common/elements/inlinesettingstextedit.tsx

@@ -1,9 +1,8 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { createRef, RefObject } from "preact";
-import React, { PureComponent } from "preact/compat";
-import * as mobxReact from "mobx-preact";
+import * as React from "react";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
@@ -15,7 +14,7 @@ import { v4 as uuidv4 } from "uuid";
 import "./inlinesettingstextedit.less";
 
 @mobxReact.observer
-class InlineSettingsTextEdit extends PureComponent<
+class InlineSettingsTextEdit extends React.Component<
     {
         text: string;
         value: string;
@@ -29,7 +28,7 @@ class InlineSettingsTextEdit extends PureComponent<
     isEditing: OV<boolean> = mobx.observable.box(false, { name: "inlineedit-isEditing" });
     tempText: OV<string>;
     shouldFocus: boolean = false;
-    inputRef: RefObject<any> = createRef();
+    inputRef: React.RefObject<any> = React.createRef();
     curId: string;
 
     componentDidMount(): void {

src/app/common/elements/inputdecoration.tsx

@@ -1,19 +1,19 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { PureComponent, ReactNode } from "preact/compat";
-import * as mobxReact from "mobx-preact";
+import * as React from "react";
+import * as mobxReact from "mobx-react";
 import cn from "classnames";
 
 import "./inputdecoration.less";
 
 interface InputDecorationProps {
     position?: "start" | "end";
-    children: ReactNode;
+    children: React.ReactNode;
 }
 
 @mobxReact.observer
-class InputDecoration extends PureComponent<InputDecorationProps, {}> {
+class InputDecoration extends React.Component<InputDecorationProps, {}> {
     render() {
         const { children, position = "end" } = this.props;
         return (

src/app/common/elements/linkbutton.tsx

@@ -1,7 +1,7 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PureComponent } from "preact/compat";
+import * as React from "react";
 import cn from "classnames";
 import { ButtonProps } from "./button";
 
@@ -11,7 +11,7 @@ interface LinkButtonProps extends ButtonProps {
     target?: string;
 }
 
-class LinkButton extends PureComponent<LinkButtonProps> {
+class LinkButton extends React.Component<LinkButtonProps> {
     render() {
         const { leftIcon, rightIcon, children, className, ...rest } = this.props;