client settings modal

src/main.tsx

@@ -18,7 +18,7 @@ import remarkGfm from 'remark-gfm'
 import {BookmarksView} from "./bookmarks";
 import {HistoryView} from "./history";
 import {Line, Prompt} from "./linecomps";
-import {ScreenSettingsModal, SessionSettingsModal, LineSettingsModal} from "./settings";
+import {ScreenSettingsModal, SessionSettingsModal, LineSettingsModal, ClientSettingsModal} from "./settings";
 import {renderCmdText} from "./elements";
 
 dayjs.extend(localizedFormat)
@@ -2237,7 +2237,7 @@ class ScreenView extends React.Component<{screen : Screen}, {}> {
         let fontSize = GlobalModel.termFontSize.get();
         return (
             <div className="screen-view" data-screenid={screen.screenId}>
-                <ScreenWindowView key={screen.screenId} screen={screen}/>
+                <ScreenWindowView key={screen.screenId + ":" + fontSize} screen={screen}/>
             </div>
         );
     }
@@ -2516,6 +2516,13 @@ class MainSideBar extends React.Component<{}, {}> {
         })();
     }
 
+    @boundMethod
+    handleSettingsClick() : void {
+        mobx.action(() => {
+            GlobalModel.clientSettingsModal.set(true);
+        })();
+    }
+
     @boundMethod
     openSessionSettings(e : any, session : Session) : void {
         e.preventDefault();
@@ -2623,6 +2630,9 @@ class MainSideBar extends React.Component<{}, {}> {
                     <ul className="menu-list" style={{display: "none"}}>
                         <li className="menu-bookmarks"><a onClick={this.handleWelcomeClick} className={cn({"is-active": GlobalModel.welcomeModalOpen.get()})}><i className="fa-sharp fa-solid fa-door-open"/> WELCOME</a></li>
                     </ul>
+                    <ul className="menu-list">
+                        <li className="menu-bookmarks"><a onClick={this.handleSettingsClick}><i className="fa-sharp fa-solid fa-cog"/> SETTINGS</a></li>
+                    </ul>
                     <p className="menu-label">
                         <a onClick={() => this.clickRemotes()}>Links</a>
                     </p>
@@ -3003,6 +3013,7 @@ class Main extends React.Component<{}, {}> {
         let screenSettingsModal = GlobalModel.screenSettingsModal.get();
         let sessionSettingsModal = GlobalModel.sessionSettingsModal.get();
         let lineSettingsModal = GlobalModel.lineSettingsModal.get();
+        let clientSettingsModal = GlobalModel.clientSettingsModal.get();
         let disconnected = !GlobalModel.ws.open.get() || !GlobalModel.localServerRunning.get();
         let hasClientStop = GlobalModel.getHasClientStop();
         let dcWait = this.dcWait.get();
@@ -3051,6 +3062,9 @@ class Main extends React.Component<{}, {}> {
                 <If condition={lineSettingsModal != null}>
                     <LineSettingsModal key={lineSettingsModal.lineid} line={lineSettingsModal}/>
                 </If>
+                <If condition={clientSettingsModal}>
+                    <ClientSettingsModal/>
+                </If>
             </div>
         );
     }

src/model.ts

@@ -2358,6 +2358,7 @@ class Model {
     welcomeModalOpen : OV<boolean> = mobx.observable.box(false, {name: "welcomeModalOpen"});
     screenSettingsModal : OV<{sessionId : string, screenId : string}> = mobx.observable.box(null, {name: "screenSettingsModal"});
     sessionSettingsModal : OV<string> = mobx.observable.box(null, {name: "sessionSettingsModal"});
+    clientSettingsModal : OV<boolean> = mobx.observable.box(false, {name: "clientSettingsModal"});
     lineSettingsModal : OV<LineType> = mobx.observable.box(null, {name: "lineSettingsModal"});
     rendererPlugins : RendererPluginType[] = [];
 
@@ -3394,6 +3395,22 @@ class CommandRunner {
         GlobalModel.submitCommand("history", "viewall", null, kwargs, true);
     }
 
+    telemetryOff() {
+        GlobalModel.submitCommand("telemetry", "off", null, {"nohist": "1"}, true);
+    }
+
+    telemetryOn() {
+        GlobalModel.submitCommand("telemetry", "on", null, {"nohist": "1"}, true);
+    }
+
+    setTermFontSize(fsize : number) {
+        let kwargs = {
+            "nohist": "1",
+            "termfontsize": String(fsize),
+        };
+        GlobalModel.submitCommand("client", "set", null, kwargs, true);
+    }
+
     editBookmark(bookmarkId : string, desc : string, cmdstr : string) {
         let kwargs = {
             "nohist": "1",

src/settings.tsx

@@ -14,6 +14,11 @@ type OArr<V> = mobx.IObservableArray<V>;
 type OMap<K,V> = mobx.ObservableMap<K,V>;
 type CV<V> = mobx.IComputedValue<V>;
 
+// @ts-ignore
+const VERSION = __PROMPT_VERSION__;
+// @ts-ignore
+const BUILD = __PROMPT_BUILD__;
+
 @mobxReact.observer
 class ScreenSettingsModal extends React.Component<{sessionId : string, screenId : string}, {}> {
     tempName : OV<string>;
@@ -367,4 +372,154 @@ class LineSettingsModal extends React.Component<{line : LineType}, {}> {
     }
 }
 
-export {ScreenSettingsModal, SessionSettingsModal, LineSettingsModal};
+@mobxReact.observer
+class ClientSettingsModal extends React.Component<{}, {}> {
+    tempFontSize : OV<number>;
+    tempTelemetry : OV<boolean>;
+    fontSizeDropdownActive : OV<boolean> = mobx.observable.box(false, {name: "clientSettings-fontSizeDropdownActive"});
+
+    constructor(props : any) {
+        super(props);
+        let cdata = GlobalModel.clientData.get();
+        this.tempFontSize = mobx.observable.box(GlobalModel.termFontSize.get(), {name: "clientSettings-tempFontSize"});
+        this.tempTelemetry = mobx.observable.box(!cdata.clientopts.notelemetry, {name: "clientSettings-telemetry"});
+    }
+    
+    @boundMethod
+    closeModal() : void {
+        mobx.action(() => {
+            GlobalModel.clientSettingsModal.set(false);
+        })();
+    }
+
+    @boundMethod
+    handleOK() : void {
+        mobx.action(() => {
+            GlobalModel.clientSettingsModal.set(false);
+        })();
+        let cdata = GlobalModel.clientData.get();
+        let curTel = !cdata.clientopts.notelemetry;
+        if (this.tempTelemetry.get() != curTel) {
+            if (this.tempTelemetry.get()) {
+                GlobalCommandRunner.telemetryOn();
+            }
+            else {
+                GlobalCommandRunner.telemetryOff();
+            }
+        }
+        if (GlobalModel.termFontSize.get() != this.tempFontSize.get()) {
+            GlobalCommandRunner.setTermFontSize(this.tempFontSize.get());
+        }
+    }
+
+    @boundMethod
+    handleChangeFontSize(newFontSize : number) : void {
+        mobx.action(() => {
+            this.fontSizeDropdownActive.set(false);
+            this.tempFontSize.set(newFontSize);
+        })();
+    }
+
+    @boundMethod
+    togglefontSizeDropdown() : void {
+        mobx.action(() => {
+            this.fontSizeDropdownActive.set(!this.fontSizeDropdownActive.get());
+        })();
+    }
+
+    @boundMethod
+    handleChangeTelemetry(val : boolean) : void {
+        mobx.action(() => {
+            this.tempTelemetry.set(val);
+        })();
+    }
+
+    renderFontSizeDropdown() : any {
+        let availableFontSizes = [8, 9, 10, 11, 12, 13, 14, 15];
+        let fsize : number = 0;
+        return (
+            <div className={cn("dropdown", "font-size-dropdown", {"is-active": this.fontSizeDropdownActive.get()})}>
+                <div className="dropdown-trigger">
+                    <button onClick={this.togglefontSizeDropdown} className="button is-small is-dark">
+                        <span>{this.tempFontSize.get()}px</span>
+                        <span className="icon is-small">
+                            <i className="fa-sharp fa-regular fa-angle-down" aria-hidden="true"></i>
+                        </span>
+                    </button>
+                </div>
+                <div className="dropdown-menu" role="menu">
+                    <div className="dropdown-content has-background-black">
+                        <For each="fsize" of={availableFontSizes}>
+                            <div onClick={() => this.handleChangeFontSize(fsize) } key={fsize + "px"} className="dropdown-item">{fsize}px</div>
+                        </For>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    render() {
+        let cdata : ClientDataType = GlobalModel.clientData.get();
+        return (
+            <div className={cn("modal client-settings-modal settings-modal prompt-modal is-active")}>
+                <div className="modal-background"/>
+                <div className="modal-content">
+                    <header>
+                        <div className="modal-title">client settings</div>
+                        <div className="close-icon">
+                            <i onClick={this.closeModal} className="fa-sharp fa-solid fa-times"/>
+                        </div>
+                    </header>
+                    <div className="inner-content">
+                        <div className="settings-field">
+                            <div className="settings-label">
+                                Term Font Size
+                            </div>
+                            <div className="settings-input">
+                                {this.renderFontSizeDropdown()}
+                            </div>
+                        </div>
+                        <div className="settings-field">
+                            <div className="settings-label">
+                                Client ID
+                            </div>
+                            <div className="settings-input">
+                                {cdata.clientid}
+                            </div>
+                        </div>
+                        <div className="settings-field">
+                            <div className="settings-label">
+                                Client Version
+                            </div>
+                            <div className="settings-input">
+                                {VERSION} {BUILD}
+                            </div>
+                        </div>
+                        <div className="settings-field">
+                            <div className="settings-label">
+                                DB Version
+                            </div>
+                            <div className="settings-input">
+                                {cdata.dbversion}
+                            </div>
+                        </div>
+                        <div className="settings-field">
+                            <div className="settings-label">
+                                Basic Telemetry
+                            </div>
+                            <div className="settings-input">
+                                <Toggle checked={this.tempTelemetry.get()} onChange={this.handleChangeTelemetry}/>
+                            </div>
+                        </div>
+                    </div>
+                    <footer>
+                        <div onClick={this.closeModal} className="button is-prompt-cancel is-outlined is-small">Cancel</div>
+                        <div onClick={this.handleOK} className="button is-prompt-green is-outlined is-small">OK</div>
+                    </footer>
+                </div>
+            </div>
+        );
+    }
+}
+
+export {ScreenSettingsModal, SessionSettingsModal, LineSettingsModal, ClientSettingsModal};

src/sh2.less

@@ -2814,6 +2814,14 @@ input[type=checkbox] {
     }
 }
 
+.client-settings-modal {
+    .settings-field {
+        .settings-label {
+            width: 150px;
+        }
+    }
+}
+
 .settings-field {
     display: flex;
     flex-direction: row;