1 files changed, 17 insertions, 12 deletions

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index f75322905..5bf9e5b00 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -1,18 +1,20 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, ColorPicker, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components';
-import { action, computed, observable, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { BsGoogle } from 'react-icons/bs';
 import { FaFillDrip, FaPalette } from 'react-icons/fa';
-import { Doc } from '../../fields/Doc';
+import { Utils, addStyleSheet, addStyleSheetRule } from '../../Utils';
+import { Doc, Opt } from '../../fields/Doc';
 import { DashVersion } from '../../fields/DocSymbols';
 import { BoolCast, Cast, NumCast, StrCast } from '../../fields/Types';
-import { addStyleSheet, addStyleSheetRule, Utils } from '../../Utils';
-import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
 import { DocServer } from '../DocServer';
 import { Networking } from '../Network';
+import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
+import { GestureOverlay } from '../views/GestureOverlay';
 import { MainViewModal } from '../views/MainViewModal';
+import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox';
 import { GroupManager } from './GroupManager';
 import './SettingsManager.scss';
 import { undoBatch } from './UndoManager';
@@ -41,13 +43,14 @@ export class SettingsManager extends React.Component<{}> {
     @observable private curr_password = '';
     @observable private new_password = '';
     @observable private new_confirm = '';
+    @observable private _lastPressedSidebarBtn: Opt<Doc> = undefined; // bcz: this is a hack to handle highlighting buttons in the leftpanel menu .. need to find a cleaner approach
     @observable activeTab = 'Accounts';
 
-    @observable public static propertiesWidth: number = 0;
-    @observable public static headerBarHeight: number = 0;
+    @observable public propertiesWidth: number = 0;
 
     constructor(props: {}) {
         super(props);
+        makeObservable(this);
         SettingsManager.Instance = this;
         this.matchSystem();
         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
@@ -91,6 +94,9 @@ export class SettingsManager extends React.Component<{}> {
         return StrCast(Doc.UserDoc().userBackgroundColor);
     }
 
+    public get LastPressedBtn() { return this._lastPressedSidebarBtn; } // prettier-ignore
+    public SetLastPressedBtn = (state?:Doc) => runInAction(() => (this._lastPressedSidebarBtn = state)); // prettier-ignore
+
     @undoBatch selectUserMode = action((mode: string) => (Doc.noviceMode = mode === 'Novice'));
     @undoBatch changelayout_showTitle = action((e: React.ChangeEvent) => (Doc.UserDoc().layout_showTitle = (e.currentTarget as any).value ? 'title' : undefined));
     @undoBatch changeFontFamily = action((font: string) => (Doc.UserDoc().fontFamily = font));
@@ -114,7 +120,6 @@ export class SettingsManager extends React.Component<{}> {
     });
 
     @undoBatch
-    @action
     changeColorScheme = action((scheme: string) => {
         Doc.UserDoc().userTheme = scheme;
         switch (scheme) {
@@ -228,8 +233,8 @@ export class SettingsManager extends React.Component<{}> {
                     formLabel={'Show Button Labels'}
                     formLabelPlacement={'right'}
                     toggleType={ToggleType.SWITCH}
-                    onClick={e => Doc.SetShowIconLabels(!Doc.GetShowIconLabels())}
-                    toggleStatus={Doc.GetShowIconLabels()}
+                    onClick={e => (FontIconBox.ShowIconLabels = !FontIconBox.ShowIconLabels)}
+                    toggleStatus={FontIconBox.ShowIconLabels}
                     size={Size.XSMALL}
                     color={SettingsManager.userColor}
                 />
@@ -237,8 +242,8 @@ export class SettingsManager extends React.Component<{}> {
                     formLabel={'Recognize Ink Gestures'}
                     formLabelPlacement={'right'}
                     toggleType={ToggleType.SWITCH}
-                    onClick={e => Doc.SetRecognizeGestures(!Doc.GetRecognizeGestures())}
-                    toggleStatus={Doc.GetRecognizeGestures()}
+                    onClick={e => (GestureOverlay.RecognizeGestures = !GestureOverlay.RecognizeGestures)}
+                    toggleStatus={GestureOverlay.RecognizeGestures}
                     size={Size.XSMALL}
                     color={SettingsManager.userColor}
                 />
@@ -448,7 +453,7 @@ export class SettingsManager extends React.Component<{}> {
                                     val: freeformScrollMode.Zoom,
                                 },
                             ]}
-                            selectedVal={StrCast(Doc.UserDoc().freeformScrollMode)}
+                            selectedVal={StrCast(Doc.UserDoc().freeformScrollMode, 'zoom')}
                             setSelectedVal={val => this.setFreeformScrollMode(val as string)}
                             dropdownType={DropdownType.SELECT}
                             type={Type.TERT}