re-render terminal when theme is updated

fix validation
reload terminal when styel block is unmounted and mounted
2026-04-22 15:26:58 -07:00 · 2024-04-15 20:06:34 +08:00 · 2024-04-15 20:03:07 +08:00 · 2024-04-15 19:52:09 +08:00 · 2024-04-15 13:30:12 +08:00 · 2024-04-15 10:02:51 +08:00
41 changed files with 414 additions and 1992 deletions
@@ -18,7 +18,6 @@
        "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",
@@ -32,7 +31,6 @@
        "electron-squirrel-startup": "^1.0.0",
        "electron-updater": "^6.1.8",
        "framer-motion": "^10.16.16",
-        "lexical": "^0.14.3",
        "mobx": "6.12",
        "mobx-react": "^7.5.0",
        "monaco-editor": "^0.44.0",
@@ -43,7 +41,6 @@
        "papaparse": "^5.4.1",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
-        "react-frame-component": "^5.2.6",
        "react-markdown": "^9.0.0",
        "remark": "^15.0.1",
        "remark-gfm": "^4.0.0",
@@ -53,8 +50,8 @@
        "uuid": "^9.0.0",
        "winston": "^3.8.2",
        "xterm": "^5.3.0",
-        "xterm-addon-serialize": "^0.11.0",
        "xterm-addon-web-links": "^0.9.0",
+        "xterm-addon-serialize": "^0.11.0",
        "xterm-addon-webgl": "^0.16.0"
    },
    "devDependencies": {
@@ -13,6 +13,7 @@
        <link rel="stylesheet" href="dist-dev/waveterm.css" />

        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/themequery.css" />
+        <link rel="stylesheet" href="public/themes/test.css" />
    </head>
    <body>
        <div id="measure"></div>
@@ -20,8 +20,9 @@ import { MainSideBar } from "./sidebar/main";
 import { RightSideBar } from "./sidebar/right";
 import { DisconnectedModal, ClientStopModal } from "@/modals";
 import { ModalsProvider } from "@/modals/provider";
-import { Button } from "@/elements";
+import { Button, TermStyleBlock } from "@/elements";
 import { ErrorBoundary } from "@/common/error/errorboundary";
+import { For } from "tsx-control-statements/components";
 import cn from "classnames";
 import "./app.less";

@@ -80,6 +81,21 @@ class App extends React.Component<{}, {}> {
        rightSidebarModel.saveState(width, false);
    }

+    getSelector(themeKey: string) {
+        const sessions = GlobalModel.getSessionNames();
+        const screens = GlobalModel.getScreenNames();
+
+        if (themeKey === "main") {
+            return ":root";
+        } else if (themeKey in screens) {
+            return `.main-content [data-screenid="${themeKey}"]`;
+        } else if (themeKey in sessions) {
+            return `.main-content [data-sessionid="${themeKey}"]`;
+        }
+
+        return null;
+    }
+
    render() {
        const remotesModel = GlobalModel.remotesModel;
        const disconnected = !GlobalModel.ws.open.get() || !GlobalModel.waveSrvRunning.get();
@@ -124,9 +140,12 @@ class App extends React.Component<{}, {}> {
        const rightSidebarCollapsed = GlobalModel.rightSidebarModel.getCollapsed();
        const activeMainView = GlobalModel.activeMainView.get();
        const lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light";
+        const termTheme = GlobalModel.getTermTheme();
+        const themeKey = null;
+
        return (
            <div
-                key={"version-" + renderVersion}
+                key={`version- + ${renderVersion}`}
                id="main"
                className={cn(
                    "platform-" + platform,
@@ -146,11 +165,18 @@ class App extends React.Component<{}, {}> {
                <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-solid fa-sidebar-flip"></i>
+                            <i className="fa-sharp fa-regular fa-lightbulb"></i>
                        </Button>
                    </div>
                </If>
                <div ref={this.mainContentRef} className="main-content">
+                    <For index="idx" each="themeKey" of={Object.keys(termTheme)}>
+                        <TermStyleBlock
+                            key={themeKey}
+                            themeName={termTheme[themeKey]}
+                            selector={this.getSelector(themeKey)}
+                        />
+                    </For>
                    <MainSideBar parentRef={this.mainContentRef} />
                    <ErrorBoundary>
                        <PluginsView />
@@ -6,7 +6,7 @@ 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 } from "@/models";
+import { GlobalModel, GlobalCommandRunner, RemotesModel, getApi } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Dropdown } from "@/common/elements";
 import { commandRtnHandler, isBlank } from "@/util/util";
 import { getTermThemes } from "@/util/themeutil";
@@ -70,20 +70,19 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
            return;
        }
        const prtn = GlobalCommandRunner.setTheme(themeSource, false);
-        GlobalModel.getElectronApi().setNativeThemeSource(themeSource);
+        getApi().setNativeThemeSource(themeSource);
        commandRtnHandler(prtn, this.errorMessage);
    }

    @boundMethod
    handleChangeTermTheme(theme: string): void {
-        // For global terminal theme, the key is global, otherwise it's either
+        // For main terminal theme, the key is main, otherwise it's either
        // sessionId or screenId.
-        const currTheme = GlobalModel.getTermTheme()["global"];
+        const currTheme = GlobalModel.getTermTheme()["main"];
        if (currTheme == theme) {
            return;
        }
-
-        const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
+        const prtn = GlobalCommandRunner.setMainTermTheme(theme, false);
        commandRtnHandler(prtn, this.errorMessage);
    }

@@ -107,7 +106,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
            prtn = GlobalCommandRunner.releaseCheckAutoOff(false);
        }
        commandRtnHandler(prtn, this.errorMessage);
-        GlobalModel.getElectronApi().changeAutoUpdate(val);
+        getApi().changeAutoUpdate(val);
    }

    getFontSizes(): DropdownItem[] {
@@ -207,8 +206,8 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
        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;
+        const termThemes = getTermThemes(GlobalModel.termThemeOptions.get(), "Wave Default");
+        const currTermTheme = GlobalModel.getTermTheme()["main"] ?? termThemes[0].label;

        return (
            <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
@@ -5,7 +5,7 @@
    width: 100%;
    border: 2px solid var(--form-element-border-color);
    border-radius: 6px;
-    line-height: 22px;
+    line-height: 20px;
    background: var(--form-element-bg-color);

    &.no-label {
@@ -18,4 +18,5 @@ export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TabIcon } from "./tabicon";
 export { DatePicker } from "./datepicker";
+export { TermStyleBlock } from "./termstyleblock";
 export { CopyButton } from "./copybutton";
@@ -0,0 +1,95 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as mobxReact from "mobx-react";
+import { GlobalModel } from "@/models";
+
+const VALID_CSS_VARIABLES = [
+    "--term-black",
+    "--term-red",
+    "--term-green",
+    "--term-yellow",
+    "--term-blue",
+    "--term-magenta",
+    "--term-cyan",
+    "--term-white",
+    "--term-bright-black",
+    "--term-bright-red",
+    "--term-bright-green",
+    "--term-bright-yellow",
+    "--term-bright-blue",
+    "--term-bright-magenta",
+    "--term-bright-cyan",
+    "--term-bright-white",
+    "--term-gray",
+    "--term-cmdtext",
+    "--term-foreground",
+    "--term-background",
+    "--term-selection-background",
+    "--term-cursor-accent",
+];
+
+@mobxReact.observer
+class TermStyleBlock extends React.Component<{
+    themeName: string;
+    selector: string;
+}> {
+    componentDidMount() {
+        GlobalModel.bumpTermRenderVersion();
+    }
+
+    componentWillUnmount() {
+        GlobalModel.bumpTermRenderVersion();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.themeName !== this.props.themeName || prevProps.selector !== this.props.selector) {
+            GlobalModel.bumpTermRenderVersion();
+        }
+    }
+
+    isValidCSSColor(color) {
+        const element = document.createElement("div");
+        element.style.color = color;
+        return element.style.color !== "";
+    }
+
+    camelCaseToKebabCase(str) {
+        return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+
+    getStyleRules() {
+        const { selector, themeName } = this.props;
+        const termThemeOptions = GlobalModel.getTermThemeOptions();
+        if (!termThemeOptions) {
+            return null;
+        }
+        const theme = termThemeOptions[themeName];
+        if (!theme) {
+            return null;
+        }
+        const styleProperties = Object.entries(theme)
+            .filter(([key, value]) => {
+                const cssVarName = `--term-${this.camelCaseToKebabCase(key)}`;
+                return VALID_CSS_VARIABLES.includes(cssVarName) && this.isValidCSSColor(value);
+            })
+            .map(([key, value]) => `--term-${key}: ${value};`)
+            .join(" ");
+
+        if (!styleProperties) {
+            return null;
+        }
+        return `${selector} { ${styleProperties} }`;
+    }
+
+    render() {
+        const styleRules = this.getStyleRules();
+        if (!styleRules) {
+            return null;
+        }
+        return <style>{styleRules}</style>;
+    }
+}
+
+export { TermStyleBlock };
@@ -5,7 +5,7 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel } from "@/models";
+import { GlobalModel, getApi } from "@/models";
 import { Modal, LinkButton } from "@/elements";
 import * as util from "@/util/util";
 import * as appconst from "@/app/appconst";
@@ -26,7 +26,7 @@ class AboutModal extends React.Component<{}, {}> {

    @boundMethod
    updateApp(): void {
-        GlobalModel.getElectronApi().installAppUpdate();
+        getApi().installAppUpdate();
    }

    @boundMethod
@@ -160,6 +160,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
        if (currTheme == theme) {
            return;
        }
+        GlobalModel.setTermThemeScope(this.screenId, `.main-content [data-screenid="${this.screenId}"]`);
        const prtn = GlobalCommandRunner.setScreenTermTheme(this.screenId, theme, false);
        commandRtnHandler(prtn, this.errorMessage);
    }
@@ -175,13 +176,8 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
        if (screen == null) {
            return null;
        }
-        let color: string = null;
-        let icon: string = null;
-        let index: number = 0;
-        const curRemote = GlobalModel.getRemote(GlobalModel.getActiveScreen().getCurRemoteInstance().remoteid);
        const termThemes = getTermThemes(GlobalModel.termThemes);
        const currTermTheme = GlobalModel.getTermTheme()[this.screenId] ?? termThemes[0].label;
-
        return (
            <Modal className="screen-settings-modal">
                <Modal.Header onClose={this.closeModal} title={`Tab Settings (${screen.name.get()})`} />
@@ -99,7 +99,7 @@ class SessionSettingsModal extends React.Component<{}, {}> {
        if (this.session == null) {
            return null;
        }
-        const termThemes = getTermThemes(GlobalModel.termThemes);
+        const termThemes = getTermThemes(GlobalModel.termThemeOptions.get());
        const currTermTheme = GlobalModel.getTermTheme()[this.sessionId] ?? termThemes[0].label;

        return (
@@ -649,11 +649,6 @@ class LineContainer extends React.Component<{ historyId: string; width: number }
        this.line = hvm.getLineById(this.historyItem.lineid);
    }

-    componentDidMount(): void {
-        GlobalModel.bumpTermRenderVersion();
-        GlobalModel.termThemeSrcEl.set(null);
-    }
-
    @boundMethod
    handleHeightChange(lineNum: number, newHeight: number, oldHeight: number): void {
        return;
@@ -226,12 +226,13 @@
            }

            .ts,
-            .termopts {
+            .termopts,
+            .renderer {
                display: flex;
            }

-            .renderer-icon {
-                margin-right: 0.2em;
+            .renderer .renderer-icon {
+                margin-right: 0.5em;
            }

            .metapart-mono {
@@ -291,10 +291,10 @@ class LineHeader extends React.Component<{ screen: LineContainerType; line: Line
                </div>
                <If condition={!isBlank(renderer) && renderer != "terminal"}>
                    <div className="meta-divider">|</div>
-                    <div className="renderer-icon">
+                    <div className="renderer">
                        <i className="fa-sharp fa-solid fa-fill renderer-icon" />
+                        {renderer}
                    </div>
-                    <div className="renderer-name">{renderer}</div>
                </If>
            </div>
        );
@@ -665,83 +665,6 @@ class LineCmd extends React.Component<
        };
    };

-    @boundMethod
-    handleContextMenu(e: React.MouseEvent) {
-        e.preventDefault();
-        e.stopPropagation();
-        let { line, screen } = this.props;
-        const containerType = screen.getContainerType();
-        const isMainContainer = containerType == appconst.LineContainer_Main;
-        const cmd = screen.getCmd(line);
-        let menu: ContextMenuItem[] = [
-            { role: "copy", label: "Copy", type: "normal" },
-            { role: "paste", label: "Paste", type: "normal" },
-            { type: "separator" },
-            { label: "Copy Command", click: () => this.copyCommandStr() },
-        ];
-        const isTerminal = isBlank(line.renderer) || line.renderer == "terminal";
-        if (isTerminal) {
-            menu.push({ label: "Copy Visible Output", click: () => this.copyOutput(false) });
-            menu.push({ label: "Copy Full Output", click: () => this.copyOutput(true) });
-        }
-        if (isMainContainer) {
-            menu.push({ type: "separator" });
-            const isMinimized = line.linestate["wave:min"];
-            if (isMinimized) {
-                menu.push({
-                    label: "Show Block Output",
-                    click: () => GlobalCommandRunner.lineMinimize(line.lineid, false, true),
-                });
-            } else {
-                menu.push({
-                    label: "Hide Block Output",
-                    click: () => GlobalCommandRunner.lineMinimize(line.lineid, true, true),
-                });
-            }
-            if (cmd?.isRunning()) {
-                menu.push({ type: "separator" });
-                menu.push({
-                    label: "Send Signal",
-                    type: "submenu",
-                    submenu: [
-                        { label: "SIGINT", click: () => GlobalCommandRunner.lineSignal(line.lineid, "SIGINT", true) },
-                        { label: "SIGTERM", click: () => GlobalCommandRunner.lineSignal(line.lineid, "SIGTERM", true) },
-                        { label: "SIGKILL", click: () => GlobalCommandRunner.lineSignal(line.lineid, "SIGKILL", true) },
-                        { type: "separator" },
-                        { label: "SIGUSR1", click: () => GlobalCommandRunner.lineSignal(line.lineid, "SIGUSR1", true) },
-                        { label: "SIGUSR2", click: () => GlobalCommandRunner.lineSignal(line.lineid, "SIGUSR2", true) },
-                    ],
-                });
-            }
-
-            menu.push({ type: "separator" });
-            menu.push({ label: "Restart Line", click: () => GlobalCommandRunner.lineRestart(line.lineid, true) });
-            menu.push({ type: "separator" });
-            menu.push({ label: "Delete Block", click: () => GlobalCommandRunner.lineDelete(line.lineid, true) });
-        }
-        GlobalModel.contextMenuModel.showContextMenu(menu, { x: e.clientX, y: e.clientY });
-    }
-
-    copyCommandStr() {
-        const { line, screen } = this.props;
-        const cmd: Cmd = screen.getCmd(line);
-        if (cmd != null) {
-            navigator.clipboard.writeText(cmd.getCmdStr());
-        }
-    }
-
-    copyOutput(fullOutput: boolean) {
-        const { line, screen } = this.props;
-        let termWrap = screen.getTermWrap(line.lineid);
-        if (termWrap == null) {
-            return;
-        }
-        let outputStr = termWrap.getOutput(fullOutput);
-        if (fullOutput != null) {
-            navigator.clipboard.writeText(outputStr);
-        }
-    }
-
    render() {
        const { screen, line, width, staticRender, visible } = this.props;
        const isVisible = visible.get();
@@ -827,7 +750,6 @@ class LineCmd extends React.Component<
                data-lineid={line.lineid}
                data-linenum={line.linenum}
                data-screenid={line.screenid}
-                onContextMenu={this.handleContextMenu}
            >
                <If condition={isSelected || cmdError}>
                    <div key="mask" className={cn("line-mask", { "error-mask": cmdError })}></div>
@@ -22,23 +22,6 @@
        border-bottom: 1px solid var(--app-border-color);
    }

-    .rsb-modes {
-        display: flex;
-        flex-direction: row;
-        padding: 5px 10px;
-        gap: 5px;
-        border-bottom: 1px solid var(--app-border-color);
-
-        .icon-container {
-            padding: 2px;
-            cursor: pointer;
-        }
-
-        .icon-container:hover {
-            background-color: var(--app-selected-mask-color);
-        }
-    }
-
    &.collapsed {
        display: none;
    }
@@ -1,16 +1,14 @@
-// Copyright 2023-2024, Command Line Inc.
+// Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0

 import * as React from "react";
 import * as mobxReact from "mobx-react";
-import * as mobx from "mobx";
 import dayjs from "dayjs";
 import { If, For } from "tsx-control-statements/components";

 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel } from "@/models";
 import { ResizableSidebar, Button } from "@/elements";
-import { WaveBookDisplay } from "./wavebook";

 import "./right.less";

@@ -57,14 +55,6 @@ class KeybindDevPane extends React.Component<{}, {}> {

@mobxReact.observer
 class RightSideBar extends React.Component<RightSideBarProps, {}> {
-    mode: OV<string> = mobx.observable.box(null, { name: "RightSideBar-mode" });
-
-    setMode(mode: string) {
-        mobx.action(() => {
-            this.mode.set(mode);
-        })();
-    }
-
    render() {
        return (
            <ResizableSidebar
@@ -81,31 +71,9 @@ class RightSideBar extends React.Component<RightSideBarProps, {}> {
                                <i className="fa-sharp fa-regular fa-xmark"></i>
                            </Button>
                        </div>
-                        <div className="rsb-modes">
-                            <div className="flex-spacer" />
-                            <If condition={GlobalModel.isDev}>
-                                <div
-                                    className="icon-container"
-                                    title="Show Keybinding Debugger"
-                                    onClick={() => this.setMode("keybind")}
-                                >
-                                    <i className="fa-fw fa-sharp fa-keyboard fa-solid" />
-                                </div>
-                            </If>
-                            <div
-                                className="icon-container"
-                                title="Show Keybinding Debugger"
-                                onClick={() => this.setMode("wavebook")}
-                            >
-                                <i className="fa-sharp fa-solid fa-book-sparkles"></i>
-                            </div>
-                        </div>
-                        <If condition={this.mode.get() == "keybind"}>
+                        <If condition={GlobalModel.isDev}>
                            <KeybindDevPane></KeybindDevPane>
                        </If>
-                        <If condition={this.mode.get() == "wavebook"}>
-                            <WaveBookDisplay></WaveBookDisplay>
-                        </If>
                    </React.Fragment>
                )}
            </ResizableSidebar>
@@ -1,53 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import * as React from "react";
-import * as mobxReact from "mobx-react";
-import * as mobx from "mobx";
-import { If, For } from "tsx-control-statements/components";
-import { GlobalModel } from "@/models";
-
-import * as lexical from "lexical";
-import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
-import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
-import { $convertFromMarkdownString, $convertToMarkdownString, TRANSFORMERS } from "@lexical/markdown";
-import { CodeNode, CodeHighlightNode } from "@lexical/code";
-import { LinkNode } from "@lexical/link";
-import { ListNode, ListItemNode } from "@lexical/list";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
-import { KeybindManager } from "@/util/keyutil";
-
-const theme = {
-    // Theme styling goes here
-};
-
-class WaveBookKeybindings extends React.Component<{}, {}> {
-    componentDidMount(): void {
-        const keybindManager = GlobalModel.keybindManager;
-        keybindManager.registerKeybinding("pane", "wavebook", "generic:confirm", (waveEvent) => {
-            return true;
-        });
-    }
-    componentWillUnmount(): void {
-        const keybindManager = GlobalModel.keybindManager;
-        keybindManager.unregisterDomain("wavebook");
-    }
-    render() {
-        return null;
-    }
-}
-
-@mobxReact.observer
-class WaveBookDisplay extends React.Component<{}, {}> {
-    render() {
-        return "playbooks";
-    }
-}
-
-export { WaveBookDisplay };
@@ -12,7 +12,7 @@ import { debounce } from "throttle-debounce";
 import dayjs from "dayjs";
 import { GlobalCommandRunner, ForwardLineContainer, GlobalModel, ScreenLines, Screen, Session } from "@/models";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { Button } from "@/elements";
+import { Button, TermStyleBlock } from "@/elements";
 import { Line } from "@/app/line/linecomps";
 import { LinesView } from "@/app/line/linesview";
 import * as util from "@/util/util";
@@ -184,10 +184,18 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, {
            winWidth = screenWidth - realWidth + "px";
            sidebarWidth = realWidth - MagicLayout.ScreenSidebarWidthPadding + "px";
        }
+        const termRenderVersion = GlobalModel.termRenderVersion.get();
+
        return (
-            <div className="screen-view" data-screenid={screen.screenId} ref={this.screenViewRef}>
+            <div className="screen-view" id={screen.screenId} data-screenid={screen.screenId} ref={this.screenViewRef}>
+                {/* <TermStyleBlock
+                    scope="screen"
+                    termTheme={termTheme}
+                    themeSrcEl={this.screenViewRef.current}
+                    themeKey={screen.screenId}
+                /> */}
                <ScreenWindowView
-                    key={screen.screenId + ":" + fontSize + ":" + dprStr}
+                    key={screen.screenId + ":" + fontSize + ":" + dprStr + ":" + termRenderVersion}
                    session={session}
                    screen={screen}
                    width={winWidth}
@@ -187,4 +187,8 @@
            }
        }
    }
+
+    .terminal-theme-dropdown {
+        width: 412px;
+    }
 }
@@ -15,7 +15,7 @@ import { ScreenTabs } from "./screen/tabs";
 import { ErrorBoundary } from "@/common/error/errorboundary";
 import { boundMethod } from "autobind-decorator";
 import type { Screen } from "@/models";
-import { Button } from "@/elements";
+import { Button, TermStyleBlock } from "@/elements";
 import { commandRtnHandler } from "@/util/util";
 import { getTermThemes } from "@/util/themeutil";
 import { Dropdown } from "@/elements/dropdown";
@@ -140,6 +140,7 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {

    @boundMethod
    handleChangeTermTheme(theme: string): void {
+        console.log("theme", theme);
        const { screenId } = this.props.screen;
        const currTheme = GlobalModel.getTermTheme()[screenId];
        if (currTheme == theme) {
@@ -152,7 +153,7 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
    render() {
        const { screen } = this.props;
        const rptr = screen.curRemote.get();
-        const termThemes = getTermThemes(GlobalModel.termThemes);
+        const termThemes = getTermThemes(GlobalModel.termThemeOptions.get());
        const currTermTheme = GlobalModel.getTermTheme()[screen.screenId] ?? termThemes[0].label;
        return (
            <div className="newtab-container">
@@ -175,6 +176,7 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
                <If condition={termThemes.length > 0}>
                    <div className="newtab-section">
                        <Dropdown
+                            label="Terminal Theme"
                            className="terminal-theme-dropdown"
                            options={termThemes}
                            defaultValue={currTermTheme}
@@ -208,59 +210,6 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
@mobxReact.observer
 class WorkspaceView extends React.Component<{}, {}> {
    sessionRef = React.createRef<HTMLDivElement>();
-    theme: string;
-    themeReactionDisposer: mobx.IReactionDisposer;
-
-    componentDidMount() {
-        this.setupThemeReaction();
-    }
-
-    componentDidUpdate() {
-        this.setupThemeReaction();
-    }
-
-    setupThemeReaction() {
-        if (this.themeReactionDisposer) {
-            this.themeReactionDisposer();
-        }
-
-        // This handles session and screen-level terminal theming.
-        // Ideally, screen-level theming should be handled in the inner-level component, but
-        // the frequent mounting and unmounting of the screen view make it really difficult to work.
-        this.themeReactionDisposer = mobx.reaction(
-            () => {
-                return {
-                    termTheme: GlobalModel.getTermTheme(),
-                    session: GlobalModel.getActiveSession(),
-                    screen: GlobalModel.getActiveScreen(),
-                };
-            },
-            ({ termTheme, session, screen }) => {
-                let currTheme = termTheme[session.sessionId];
-                if (termTheme[screen.screenId]) {
-                    currTheme = termTheme[screen.screenId];
-                }
-                if (session && currTheme !== this.theme && this.sessionRef.current) {
-                    const reset = currTheme == null;
-                    const theme = currTheme ?? this.theme;
-                    const themeSrcEl = reset ? null : this.sessionRef.current;
-                    const rtn = GlobalModel.updateTermTheme(this.sessionRef.current, theme, reset);
-                    rtn.then(() => {
-                        GlobalModel.termThemeSrcEl.set(themeSrcEl);
-                    }).then(() => {
-                        GlobalModel.bumpTermRenderVersion();
-                    });
-                    this.theme = currTheme;
-                }
-            }
-        );
-    }
-
-    componentWillUnmount() {
-        if (this.themeReactionDisposer) {
-            this.themeReactionDisposer();
-        }
-    }

    @boundMethod
    toggleTabSettings() {
@@ -277,15 +226,14 @@ class WorkspaceView extends React.Component<{}, {}> {
            sessionId = session.sessionId;
            activeScreen = session.getActiveScreen();
        }
-
        const isHidden = GlobalModel.activeMainView.get() != "session";
        const mainSidebarModel = GlobalModel.mainSidebarModel;
-        const termRenderVersion = GlobalModel.termRenderVersion.get();
        const showTabSettings = GlobalModel.tabSettingsOpen.get();
        return (
            <div
                ref={this.sessionRef}
                className={cn("mainview", "session-view", { "is-hidden": isHidden })}
+                id={sessionId}
                data-sessionid={sessionId}
                style={{
                    width: `${window.innerWidth - mainSidebarModel.getWidth()}px`,
@@ -307,11 +255,7 @@ class WorkspaceView extends React.Component<{}, {}> {
                    </div>
                </If>
                <ErrorBoundary key="eb">
-                    <ScreenView
-                        key={`screenview-${sessionId}-${termRenderVersion}`}
-                        session={session}
-                        screen={activeScreen}
-                    />
+                    <ScreenView key={`screenview-${sessionId}`} session={session} screen={activeScreen} />
                    <If condition={activeScreen != null}>
                        <CmdInput key={"cmdinput-" + sessionId} />
                    </If>
@@ -470,35 +470,6 @@ electron.ipcMain.on("toggle-developer-tools", (event) => {
    event.returnValue = true;
 });

-function convertMenuDefArrToMenu(menuDefArr: ElectronContextMenuItem[]): electron.Menu {
-    const menuItems: electron.MenuItem[] = [];
-    for (const menuDef of menuDefArr) {
-        const menuItemTemplate: electron.MenuItemConstructorOptions = {
-            role: menuDef.role as any,
-            label: menuDef.label,
-            type: menuDef.type,
-            click: () => {
-                MainWindow?.webContents.send("contextmenu-click", menuDef.id);
-            },
-        };
-        if (menuDef.submenu != null) {
-            menuItemTemplate.submenu = convertMenuDefArrToMenu(menuDef.submenu);
-        }
-        const menuItem = new electron.MenuItem(menuItemTemplate);
-        menuItems.push(menuItem);
-    }
-    return electron.Menu.buildFromTemplate(menuItems);
-}
-
-electron.ipcMain.on("contextmenu-show", (event, menuDefArr: ElectronContextMenuItem[], { x, y }) => {
-    if (menuDefArr == null || menuDefArr.length == 0) {
-        return;
-    }
-    const menu = convertMenuDefArrToMenu(menuDefArr);
-    menu.popup({ x, y });
-    event.returnValue = true;
-});
-
 electron.ipcMain.on("hide-window", (event) => {
    if (MainWindow != null) {
        MainWindow.hide();
@@ -705,6 +676,12 @@ function runWaveSrv() {
    return rtnPromise;
 }

+electron.ipcMain.on("context-screen", (_, { screenId }, { x, y }) => {
+    console.log("context-screen", screenId);
+    const menu = getContextMenu();
+    menu.popup({ x, y });
+});
+
 electron.ipcMain.on("context-editmenu", (_, { x, y }, opts) => {
    if (opts == null) {
        opts = {};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Red Adaya	80e1e3ce55	re-render terminal when theme is updated	2024-04-15 20:06:34 +08:00
Red Adaya	85886afeb4	fix validation	2024-04-15 20:03:07 +08:00
Red Adaya	567e5b662c	reload terminal when styel block is unmounted and mounted	2024-04-15 19:52:09 +08:00
Red Adaya	6b5d2833eb	use themes coming from backend	2024-04-15 13:30:12 +08:00
Red Adaya	b10910d229	make methods cohesive	2024-04-15 10:02:51 +08:00
Red Adaya	a7e6224862	use UpdatePacket for theme changes as well	2024-04-14 23:07:51 +08:00
Red Adaya	5476b45f22	save work	2024-04-14 22:42:00 +08:00
Red Adaya	efcd8ad03a	save work	2024-04-12 14:57:42 +08:00
Red Adaya	03acda07b5	cleanup	2024-04-11 22:34:26 +08:00
Red Adaya	32342629c8	trigger componentDidUpdate when switching tabs and sessions	2024-04-11 22:27:46 +08:00
Red Adaya	d2ddf7bc58	working	2024-04-11 22:02:53 +08:00
Red Adaya	01fb217785	save work	2024-04-11 21:55:55 +08:00
Red Adaya	e5d3db7631	save work	2024-04-11 17:35:32 +08:00
Red Adaya	c24e99e9ff	save work	2024-04-11 14:31:34 +08:00
Red Adaya	65cab8a59a	add label to tab settings terminal theme dropdown	2024-04-10 14:58:53 +08:00
Red Adaya	c737c9df57	add key and value validation	2024-04-10 10:14:33 +08:00
Red Adaya	17cc4769af	fix issue where line in history view doesn't reflect the terminal theme	2024-04-10 09:21:13 +08:00
Red Adaya	b4d04c3a57	merge main	2024-04-10 09:09:34 +08:00
Red Adaya	5e4eb738b3	remove file from another branch	2024-04-04 22:02:07 +08:00
Red Adaya	936e9fa7b4	cleanup	2024-04-04 11:15:38 +08:00
Red Adaya	af6486e8bb	remove old implementation	2024-04-04 11:11:08 +08:00
Red Adaya	1038a08789	revert changes in tabs2.less	2024-04-04 11:09:32 +08:00
Red Adaya	7a377c4a2a	loadThemeStyles doesn't have to be async	2024-04-04 11:08:04 +08:00
Red Adaya	8afa62fff2	cleanup	2024-04-04 11:04:34 +08:00
Red Adaya	97595a7718	working	2024-04-04 11:02:27 +08:00
Red Adaya	e4d353b5c1	remove selector prop from StyleBlock	2024-04-04 07:34:38 +08:00
Red Adaya	2462c64793	selector should always be :root	2024-04-04 07:33:10 +08:00
Red Adaya	b451ee1ef9	change prop from classname to selector	2024-04-04 07:21:26 +08:00
Red Adaya	2c64668382	ability to inherit root styles	2024-04-03 22:22:05 +08:00
Red Adaya	de21303fb1	root level	2024-04-03 22:12:48 +08:00
Red Adaya	f6cdd53fd4	StyleBlock in elements dir	2024-04-03 20:50:47 +08:00
Red Adaya	840b69d100	reusable StyleBlock component	2024-04-03 20:48:13 +08:00
Red Adaya	683c66f386	save work	2024-04-03 16:37:15 +08:00