Save work, everything working except tab bar reorder group

package.json

@@ -32,8 +32,7 @@
         "electron-updater": "^6.1.8",
         "framer-motion": "^10.16.16",
         "mobx": "6.12",
-        "mobx-preact": "^3.0.0",
-        "mobx-preact": "^7.5.0",
+        "mobx-react": "^9.1.1",
         "monaco-editor": "^0.44.0",
         "mustache": "^4.2.0",
         "node-fetch": "^3.2.10",
@@ -73,7 +72,6 @@
         "@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",

src/app/app.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";

src/app/bookmarks/bookmarks.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";

src/app/clientsettings/clientsettings.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";

src/app/common/elements/datepicker.tsx

@@ -457,7 +457,7 @@ const DatePicker: React.FC<DatePickerProps> = ({ selectedDate, format = "MM/DD/Y
                                 ref={inputRef}
                                 type="text"
                                 value={dateParts[part]}
-                                onChange={(e) => handleDatePartChange(part, e.target.value)}
+                                onChange={(e) => handleDatePartChange(part, (e.target as HTMLInputElement).value)}
                                 onKeyDown={(e) => handleKeyDown(e, part)}
                                 onMouseDown={(e) => handleMouseDown(e, part)}
                                 onFocus={(e) => handleFocus(e, part)}

src/app/common/elements/dropdown.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
@@ -36,7 +36,6 @@ interface DropdownState {
     isTouched: boolean;
 }
 
-@mobxReact.observer
 class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
     wrapperRef: React.RefObject<HTMLDivElement>;
     menuRef: React.RefObject<HTMLDivElement>;
@@ -182,10 +181,10 @@ class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
     }
 
     @boundMethod
-    handleKeyDown(event: React.KeyboardEvent) {}
+    handleKeyDown(event: React.TargetedEvent) {}
 
     @boundMethod
-    handleSelect(value: string, event?: React.MouseEvent | React.KeyboardEvent) {
+    handleSelect(value: string, event?: React.TargetedEvent) {
         const { onChange } = this.props;
         if (event) {
             event.stopPropagation(); // This stops the event from bubbling up to the wrapper

src/app/common/elements/inlinesettingstextedit.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";

src/app/common/elements/inputdecoration.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import cn from "classnames";
 
 import "./inputdecoration.less";

src/app/common/elements/mainview.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import cn from "classnames";
 import { GlobalModel } from "@/models";
 

src/app/common/elements/markdown.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
@@ -42,9 +42,9 @@ class CodeBlockMarkdown extends React.PureComponent<
     }
 
     render() {
-        let clickHandler: (e: React.MouseEvent<HTMLElement>, blockIndex: number) => void;
+        let clickHandler: (e: React.JSX.TargetedMouseEvent<HTMLElement>, blockIndex: number) => void;
         let inputModel = GlobalModel.inputModel;
-        clickHandler = (e: React.MouseEvent<HTMLElement>, blockIndex: number) => {
+        clickHandler = (e: React.JSX.TargetedMouseEvent<HTMLElement>, blockIndex: number) => {
             inputModel.setCodeSelectSelectedCodeBlock(blockIndex);
         };
         let selected = this.blockIndex == this.props.codeSelectSelectedIndex;
@@ -69,7 +69,7 @@ class Markdown extends React.PureComponent<
         if (codeSelect) {
             return <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex}>{props.children}</CodeBlockMarkdown>;
         } else {
-            const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
+            const clickHandler = (e: React.JSX.TargetedMouseEvent<HTMLElement>) => {
                 let blockText = (e.target as HTMLElement).innerText;
                 if (blockText) {
                     blockText = blockText.replace(/\n$/, ""); // remove trailing newline

src/app/common/elements/numberfield.tsx

@@ -10,7 +10,7 @@ class NumberField extends TextField {
     @boundMethod
     handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
         const { required, onChange } = this.props;
-        const inputValue = e.target.value;
+        const inputValue = (e.target as HTMLInputElement).value;
 
         // Allow only numeric input
         if (inputValue === "" || /^\d*$/.test(inputValue)) {

src/app/common/elements/passwordfield.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { If } from "tsx-control-statements/components";
@@ -14,7 +13,6 @@ interface PasswordFieldState extends TextFieldState {
     passwordVisible: boolean;
 }
 
-@mobxReact.observer
 class PasswordField extends TextField {
     state: PasswordFieldState;
 

src/app/common/elements/resizablesidebar.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
@@ -30,7 +30,7 @@ class ResizableSidebar extends React.PureComponent<ResizableSidebarProps> {
     disposeReaction: any;
 
     @boundMethod
-    startResizing(event: React.MouseEvent<HTMLDivElement>) {
+    startResizing(event: React.JSX.TargetedMouseEvent<HTMLDivElement>) {
         event.preventDefault();
 
         const { parentRef, position, model } = this.props;
@@ -150,7 +150,7 @@ class ResizableSidebar extends React.PureComponent<ResizableSidebarProps> {
                         [this.props.position === "left" ? "right" : "left"]: 0,
                     }}
                     onMouseDown={this.startResizing}
-                    onDoubleClick={this.toggleCollapsed}
+                    onDblClick={this.toggleCollapsed}
                 ></div>
             </div>
         );

src/app/common/elements/settingserror.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 

src/app/common/elements/textfield.tsx

@@ -17,7 +17,7 @@ interface TextFieldProps {
     value?: string;
     className?: string;
     onChange?: (value: string) => void;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: React.JSX.TargetedKeyboardEvent<HTMLInputElement>) => void;
     onFocus?: () => void;
     onBlur?: () => void;
     placeholder?: string;
@@ -109,7 +109,7 @@ class TextField extends React.PureComponent<TextFieldProps, TextFieldState> {
     @boundMethod
     handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
         const { required, onChange } = this.props;
-        const inputValue = e.target.value;
+        const inputValue = (e.target as HTMLInputElement).value;
 
         // Check if value is empty and the field is required
         if (required && !inputValue) {

src/app/common/elements/tooltip.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import ReactDOM from "react-dom";

src/app/common/error/errorboundary.tsx

@@ -1,4 +1,5 @@
 import React, { Component, ReactNode } from "react";
+import { ErrorInfo } from "preact";
 import cn from "classnames";
 
 interface ErrorBoundaryState {
@@ -22,7 +23,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
         return { hasError: true, error };
     }
 
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
         const { plugin, lineContext } = this.props;
 
         if (plugin && lineContext) {

src/app/common/icons/icons.tsx

@@ -3,7 +3,7 @@ import cn from "classnames";
 import { ReactComponent as SpinnerIndicator } from "@/assets/icons/spinner-indicator.svg";
 import { boundMethod } from "autobind-decorator";
 import * as mobx from "mobx";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import * as appconst from "@/app/appconst";
 
 import { ReactComponent as RotateIconSvg } from "@/assets/icons/line/rotate.svg";
@@ -11,7 +11,7 @@ import { ReactComponent as RotateIconSvg } from "@/assets/icons/line/rotate.svg"
 interface PositionalIconProps {
     children?: React.ReactNode;
     className?: string;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: React.JSX.MouseEventHandler<HTMLDivElement>;
     divRef?: React.RefObject<HTMLDivElement>;
 }
 
@@ -44,7 +44,7 @@ export class CenteredIcon extends React.PureComponent<PositionalIconProps> {
 }
 
 interface ActionsIconProps {
-    onClick: React.MouseEventHandler<HTMLDivElement>;
+    onClick: React.JSX.MouseEventHandler<HTMLDivElement>;
 }
 
 export class ActionsIcon extends React.PureComponent<ActionsIconProps> {
@@ -225,7 +225,7 @@ export class StatusIndicator extends React.PureComponent<StatusIndicatorProps> {
 
 export class RotateIcon extends React.PureComponent<{
     className?: string;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: React.JSX.MouseEventHandler<HTMLDivElement>;
 }> {
     iconRef: React.RefObject<HTMLDivElement> = React.createRef();
     render() {

src/app/common/modals/about.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
 import { GlobalModel, getApi } from "@/models";
@@ -30,7 +30,7 @@ class AboutModal extends React.PureComponent<{}, {}> {
     }
 
     @boundMethod
-    getClientVersion(): JSX.Element {
+    getClientVersion(): React.JSX.Element {
         const clientData: ClientDataType = GlobalModel.clientData.get();
         const showUpdateStatus = clientData.clientopts.noreleasecheck !== true;
         const isUpToDate = !showUpdateStatus || GlobalModel.appUpdateStatus.get() !== "ready";

src/app/common/modals/alert.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobxReact from "mobx-preact";
+import * as mobxReact from "mobx-react";
 import { boundMethod } from "autobind-decorator";
 import { If } from "tsx-control-statements/components";
 import { Markdown, Modal, Button, Checkbox } from "@/elements";