restructured currentUserUtils to avoid having import cycles.

1 files changed, 271 insertions, 200 deletions

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 080237649..12d1793af 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -1,29 +1,28 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, observable, runInAction } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { ColorState, SketchPicker } from "react-color";
-import { Doc } from "../../fields/Doc";
-import { BoolCast, StrCast, Cast } from "../../fields/Types";
-import { addStyleSheet, addStyleSheetRule, Utils } from "../../Utils";
-import { GoogleAuthenticationManager } from "../apis/GoogleAuthenticationManager";
-import { DocServer } from "../DocServer";
-import { Networking } from "../Network";
-import { MainViewModal } from "../views/MainViewModal";
-import { FontIconBox } from "../views/nodes/button/FontIconBox";
-import { CurrentUserUtils } from "./CurrentUserUtils";
-import { DragManager } from "./DragManager";
-import { GroupManager } from "./GroupManager";
-import "./SettingsManager.scss";
-import { undoBatch } from "./UndoManager";
-const higflyout = require("@hig/flyout");
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { ColorState, SketchPicker } from 'react-color';
+import { Doc } from '../../fields/Doc';
+import { BoolCast, Cast, StrCast } from '../../fields/Types';
+import { addStyleSheet, addStyleSheetRule, Utils } from '../../Utils';
+import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
+import { DocServer } from '../DocServer';
+import { Networking } from '../Network';
+import { MainViewModal } from '../views/MainViewModal';
+import { FontIconBox } from '../views/nodes/button/FontIconBox';
+import { DragManager } from './DragManager';
+import { GroupManager } from './GroupManager';
+import './SettingsManager.scss';
+import { undoBatch } from './UndoManager';
+const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
 export enum ColorScheme {
-    Dark = "-Dark",
-    Light = "-Light",
-    System = "-MatchSystem"
+    Dark = '-Dark',
+    Light = '-Light',
+    System = '-MatchSystem',
 }
 
 @observer
@@ -31,67 +30,77 @@ export class SettingsManager extends React.Component<{}> {
     public static Instance: SettingsManager;
     static _settingsStyle = addStyleSheet();
     @observable private isOpen = false;
-    @observable private passwordResultText = "";
+    @observable private passwordResultText = '';
     @observable private playgroundMode = false;
 
-    @observable private curr_password = "";
-    @observable private new_password = "";
-    @observable private new_confirm = "";
-    @observable activeTab = "Accounts";
+    @observable private curr_password = '';
+    @observable private new_password = '';
+    @observable private new_confirm = '';
+    @observable activeTab = 'Accounts';
 
-    @computed get backgroundColor() { return Doc.UserDoc().activeCollectionBackground; }
-    @computed get colorScheme() { return CurrentUserUtils.ActiveDashboard?.colorScheme; }
+    @observable public static propertiesWidth: number = 0;
+    @observable public static headerBarHeight: number = 0;
+
+    @computed get backgroundColor() {
+        return Doc.UserDoc().activeCollectionBackground;
+    }
+    @computed get colorScheme() {
+        return Doc.ActiveDashboard?.colorScheme;
+    }
 
     constructor(props: {}) {
         super(props);
         SettingsManager.Instance = this;
     }
 
-    public close = action(() => this.isOpen = false);
-    public open = action(() => this.isOpen = true);
+    public close = action(() => (this.isOpen = false));
+    public open = action(() => (this.isOpen = true));
 
     private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true));
     private changePassword = async () => {
         if (!(this.curr_password && this.new_password && this.new_confirm)) {
-            runInAction(() => this.passwordResultText = "Error: Hey, we're missing some fields!");
+            runInAction(() => (this.passwordResultText = "Error: Hey, we're missing some fields!"));
         } else {
             const passwordBundle = { curr_pass: this.curr_password, new_pass: this.new_password, new_confirm: this.new_confirm };
             const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
-            runInAction(() => this.passwordResultText = error ? "Error: " + error[0].msg + "..." : "Password successfully updated!");
+            runInAction(() => (this.passwordResultText = error ? 'Error: ' + error[0].msg + '...' : 'Password successfully updated!'));
         }
-    }
-
-    @undoBatch selectUserMode = action((e: React.ChangeEvent) => Doc.noviceMode = (e.currentTarget as any)?.value === "Novice");
-    @undoBatch changeShowTitle = action((e: React.ChangeEvent) => Doc.UserDoc().showTitle = (e.currentTarget as any).value ? "title" : undefined);
-    @undoBatch changeFontFamily = action((e: React.ChangeEvent) => Doc.UserDoc().fontFamily = (e.currentTarget as any).value);
-    @undoBatch changeFontSize = action((e: React.ChangeEvent) => Doc.UserDoc().fontSize = (e.currentTarget as any).value);
-    @undoBatch switchActiveBackgroundColor = action((color: ColorState) => Doc.UserDoc().activeCollectionBackground = String(color.hex));
-    @undoBatch switchUserColor = action((color: ColorState) => { Doc.SharingDoc().userColor = undefined; Doc.GetProto(Doc.SharingDoc()).userColor = String(color.hex); });
+    };
+
+    @undoBatch selectUserMode = action((e: React.ChangeEvent) => (Doc.noviceMode = (e.currentTarget as any)?.value === 'Novice'));
+    @undoBatch changeShowTitle = action((e: React.ChangeEvent) => (Doc.UserDoc().showTitle = (e.currentTarget as any).value ? 'title' : undefined));
+    @undoBatch changeFontFamily = action((e: React.ChangeEvent) => (Doc.UserDoc().fontFamily = (e.currentTarget as any).value));
+    @undoBatch changeFontSize = action((e: React.ChangeEvent) => (Doc.UserDoc().fontSize = (e.currentTarget as any).value));
+    @undoBatch switchActiveBackgroundColor = action((color: ColorState) => (Doc.UserDoc().activeCollectionBackground = String(color.hex)));
+    @undoBatch switchUserColor = action((color: ColorState) => {
+        Doc.SharingDoc().userColor = undefined;
+        Doc.GetProto(Doc.SharingDoc()).userColor = String(color.hex);
+    });
     @undoBatch playgroundModeToggle = action(() => {
         this.playgroundMode = !this.playgroundMode;
         if (this.playgroundMode) {
             DocServer.Control.makeReadOnly();
-            addStyleSheetRule(SettingsManager._settingsStyle, "topbar-inner-container", { background: "red !important" });
-        }
-        else DocServer.Control.makeEditable();
+            addStyleSheetRule(SettingsManager._settingsStyle, 'topbar-inner-container', { background: 'red !important' });
+        } else DocServer.Control.makeEditable();
     });
 
     @undoBatch
     @action
     changeColorScheme = action((e: React.ChangeEvent) => {
-        const activeDashboard= CurrentUserUtils.ActiveDashboard;
+        const activeDashboard = Doc.ActiveDashboard;
         if (!activeDashboard) return;
         const scheme: ColorScheme = (e.currentTarget as any).value;
         switch (scheme) {
             case ColorScheme.Light:
                 activeDashboard.colorScheme = undefined; // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss)
-                addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "#d3d3d3 !important" });
+                addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: '#d3d3d3 !important' });
                 break;
             case ColorScheme.Dark:
                 activeDashboard.colorScheme = ColorScheme.Dark;
-                addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "black !important" });
+                addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: 'black !important' });
                 break;
-            case ColorScheme.System: default:
+            case ColorScheme.System:
+            default:
                 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
                     activeDashboard.colorScheme = e.matches ? ColorScheme.Dark : undefined; // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss)
                 });
@@ -99,223 +108,285 @@ export class SettingsManager extends React.Component<{}> {
         }
     });
 
-
     @computed get colorsContent() {
-        const colorBox = (func: (color: ColorState) => void) => <SketchPicker onChange={func} color={StrCast(this.backgroundColor)}
-            presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
-                '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
-                '#FFFFFF', '#f1efeb', 'transparent']} />;
-
-        const colorFlyout = <div className="colorFlyout">
-            <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={colorBox(this.switchActiveBackgroundColor)}>
-                <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }} onPointerDown={e => e.stopPropagation()} >
-                    <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
-                </div>
-            </Flyout>
-        </div>;
-        const userColorFlyout = <div className="colorFlyout">
-            <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={colorBox(this.switchUserColor)}>
-                <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }} onPointerDown={e => e.stopPropagation()} >
-                    <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
-                </div>
-            </Flyout>
-        </div>;
+        const colorBox = (func: (color: ColorState) => void) => (
+            <SketchPicker
+                onChange={func}
+                color={StrCast(this.backgroundColor)}
+                presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']}
+            />
+        );
+
+        const colorFlyout = (
+            <div className="colorFlyout">
+                <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={colorBox(this.switchActiveBackgroundColor)}>
+                    <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }} onPointerDown={e => e.stopPropagation()}>
+                        <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
+                    </div>
+                </Flyout>
+            </div>
+        );
+        const userColorFlyout = (
+            <div className="colorFlyout">
+                <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={colorBox(this.switchUserColor)}>
+                    <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }} onPointerDown={e => e.stopPropagation()}>
+                        <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
+                    </div>
+                </Flyout>
+            </div>
+        );
 
         const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.System];
-        const schemeMap = ["Light", "Dark", "Match system"];
+        const schemeMap = ['Light', 'Dark', 'Match system'];
 
-        return <div className="colors-content">
-            <div className="preferences-color">
-                <div className="preferences-color-text">Background Color</div>
-                {colorFlyout}
-            </div>
-            <div className="preferences-color">
-                <div className="preferences-color-text">Border/Header Color</div>
-                {userColorFlyout}
-            </div>
-            <div className="preferences-colorScheme">
-                <div className="preferences-color-text">Color Scheme</div>
-                <div className="preferences-color-controls">
-                    <select className="scheme-select" onChange={this.changeColorScheme} defaultValue={StrCast(CurrentUserUtils.ActiveDashboard?.colorScheme)}>
-                        {colorSchemes.map((scheme, i) => <option key={scheme} value={scheme}> {schemeMap[i]} </option>)}
-                    </select>
+        return (
+            <div className="colors-content">
+                <div className="preferences-color">
+                    <div className="preferences-color-text">Background Color</div>
+                    {colorFlyout}
+                </div>
+                <div className="preferences-color">
+                    <div className="preferences-color-text">Border/Header Color</div>
+                    {userColorFlyout}
+                </div>
+                <div className="preferences-colorScheme">
+                    <div className="preferences-color-text">Color Scheme</div>
+                    <div className="preferences-color-controls">
+                        <select className="scheme-select" onChange={this.changeColorScheme} defaultValue={StrCast(Doc.ActiveDashboard?.colorScheme)}>
+                            {colorSchemes.map((scheme, i) => (
+                                <option key={scheme} value={scheme}>
+                                    {' '}
+                                    {schemeMap[i]}{' '}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
                 </div>
             </div>
-        </div>;
+        );
     }
 
     @computed get formatsContent() {
-        return <div className="prefs-content">
-            <div>
-                <input type="checkbox" onChange={e => Doc.UserDoc().showTitle = Doc.UserDoc().showTitle ? undefined : "creationDate"} checked={Doc.UserDoc().showTitle !== undefined} />
-                <div className="preferences-check">Show doc header</div>
-            </div>
-            <div>
-                <input type="checkbox" onChange={e => Doc.UserDoc()["documentLinksButton-fullMenu"] = !Doc.UserDoc()["documentLinksButton-fullMenu"]}
-                    checked={BoolCast(Doc.UserDoc()["documentLinksButton-fullMenu"])} />
-                <div className="preferences-check">Show full toolbar</div>
-            </div>
-            <div>
-                <input type="checkbox" onChange={e => DragManager.SetRaiseWhenDragged(!DragManager.GetRaiseWhenDragged())}
-                    checked={DragManager.GetRaiseWhenDragged()} />
-                <div className="preferences-check">Raise on drag</div>
-            </div>
-            <div>
-                <input type="checkbox" onChange={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())}
-                    checked={FontIconBox.GetShowLabels()} />
-                <div className="preferences-check">Show button labels</div>
+        return (
+            <div className="prefs-content">
+                <div>
+                    <input type="checkbox" onChange={e => (Doc.UserDoc().showTitle = Doc.UserDoc().showTitle ? undefined : 'creationDate')} checked={Doc.UserDoc().showTitle !== undefined} />
+                    <div className="preferences-check">Show doc header</div>
+                </div>
+                <div>
+                    <input type="checkbox" onChange={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])} checked={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])} />
+                    <div className="preferences-check">Show full toolbar</div>
+                </div>
+                <div>
+                    <input type="checkbox" onChange={e => DragManager.SetRaiseWhenDragged(!DragManager.GetRaiseWhenDragged())} checked={DragManager.GetRaiseWhenDragged()} />
+                    <div className="preferences-check">Raise on drag</div>
+                </div>
+                <div>
+                    <input type="checkbox" onChange={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())} checked={FontIconBox.GetShowLabels()} />
+                    <div className="preferences-check">Show button labels</div>
+                </div>
             </div>
-        </div>;
+        );
     }
 
     @computed get appearanceContent() {
-
-        return <div className="tab-content appearances-content">
-            <div className="tab-column">
-                <div className="tab-column-title">Colors</div>
-                <div className="tab-column-content">{this.colorsContent}</div>
-            </div>
-            <div className="tab-column">
-                <div className="tab-column-title">Formats</div>
-                <div className="tab-column-content">{this.formatsContent}</div>
+        return (
+            <div className="tab-content appearances-content">
+                <div className="tab-column">
+                    <div className="tab-column-title">Colors</div>
+                    <div className="tab-column-content">{this.colorsContent}</div>
+                </div>
+                <div className="tab-column">
+                    <div className="tab-column-title">Formats</div>
+                    <div className="tab-column-content">{this.formatsContent}</div>
+                </div>
             </div>
-        </div>;
+        );
     }
 
     @computed get textContent() {
-
-        const fontFamilies = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text", "Roboto"];
-        const fontSizes = ["7px", "8px", "9px", "10px", "12px", "14px", "16px", "18px", "20px", "24px", "32px", "48px", "72px"];
+        const fontFamilies = ['Times New Roman', 'Arial', 'Georgia', 'Comic Sans MS', 'Tahoma', 'Impact', 'Crimson Text', 'Roboto'];
+        const fontSizes = ['7px', '8px', '9px', '10px', '12px', '14px', '16px', '18px', '20px', '24px', '32px', '48px', '72px'];
 
         return (
             <div className="tab-content appearances-content">
                 <div className="preferences-font">
                     <div className="preferences-font-text">Default Font</div>
                     <div className="preferences-font-controls">
-                        <select className="size-select" onChange={this.changeFontSize} value={StrCast(Doc.UserDoc().fontSize, "7px")}>
-                            {fontSizes.map(size => <option key={size} value={size} defaultValue={StrCast(Doc.UserDoc().fontSize)}> {size} </option>)}
+                        <select className="size-select" onChange={this.changeFontSize} value={StrCast(Doc.UserDoc().fontSize, '7px')}>
+                            {fontSizes.map(size => (
+                                <option key={size} value={size} defaultValue={StrCast(Doc.UserDoc().fontSize)}>
+                                    {' '}
+                                    {size}{' '}
+                                </option>
+                            ))}
                         </select>
-                        <select className="font-select" onChange={this.changeFontFamily} value={StrCast(Doc.UserDoc().fontFamily, "Times New Roman")} >
-                            {fontFamilies.map(font => <option key={font} value={font} defaultValue={StrCast(Doc.UserDoc().fontFamily)}> {font} </option>)}
+                        <select className="font-select" onChange={this.changeFontFamily} value={StrCast(Doc.UserDoc().fontFamily, 'Times New Roman')}>
+                            {fontFamilies.map(font => (
+                                <option key={font} value={font} defaultValue={StrCast(Doc.UserDoc().fontFamily)}>
+                                    {' '}
+                                    {font}{' '}
+                                </option>
+                            ))}
                         </select>
                     </div>
                 </div>
-            </div>);
+            </div>
+        );
     }
 
     @action
     changeVal = (e: React.ChangeEvent, pass: string) => {
         const value = (e.target as any).value;
         switch (pass) {
-            case "curr": this.curr_password = value; break;
-            case "new": this.new_password = value; break;
-            case "conf": this.new_confirm = value; break;
+            case 'curr':
+                this.curr_password = value;
+                break;
+            case 'new':
+                this.new_password = value;
+                break;
+            case 'conf':
+                this.new_confirm = value;
+                break;
         }
-    }
+    };
 
     @computed get passwordContent() {
-        return <div className="password-content">
-            <div className="password-content-inputs">
-                <input className="password-inputs" type="password" placeholder="current password" onChange={e => this.changeVal(e, "curr")} />
-                <input className="password-inputs" type="password" placeholder="new password" onChange={e => this.changeVal(e, "new")} />
-                <input className="password-inputs" type="password" placeholder="confirm new password" onChange={e => this.changeVal(e, "conf")} />
-            </div>
-            <div className="password-content-buttons">
-                {!this.passwordResultText ? (null) : <div className={`${this.passwordResultText.startsWith("Error") ? "error" : "success"}-text`}>{this.passwordResultText}</div>}
-                <a className="password-forgot" href="/forgotPassword">forgot password?</a>
-                <button className="password-submit" onClick={this.changePassword}>submit</button>
+        return (
+            <div className="password-content">
+                <div className="password-content-inputs">
+                    <input className="password-inputs" type="password" placeholder="current password" onChange={e => this.changeVal(e, 'curr')} />
+                    <input className="password-inputs" type="password" placeholder="new password" onChange={e => this.changeVal(e, 'new')} />
+                    <input className="password-inputs" type="password" placeholder="confirm new password" onChange={e => this.changeVal(e, 'conf')} />
+                </div>
+                <div className="password-content-buttons">
+                    {!this.passwordResultText ? null : <div className={`${this.passwordResultText.startsWith('Error') ? 'error' : 'success'}-text`}>{this.passwordResultText}</div>}
+                    <a className="password-forgot" href="/forgotPassword">
+                        forgot password?
+                    </a>
+                    <button className="password-submit" onClick={this.changePassword}>
+                        submit
+                    </button>
+                </div>
             </div>
-        </div>;
+        );
     }
 
     @computed get accountOthersContent() {
-        return <div className="account-others-content">
-            <button onClick={this.googleAuthorize} value="data">Authorize Google Acc</button>
-        </div>;
+        return (
+            <div className="account-others-content">
+                <button onClick={this.googleAuthorize} value="data">
+                    Authorize Google Acc
+                </button>
+            </div>
+        );
     }
 
     @computed get accountsContent() {
-        return <div className="tab-content accounts-content">
-            <div className="tab-column">
-                <div className="tab-column-title">Password</div>
-                <div className="tab-column-content">{this.passwordContent}</div>
-            </div>
-            <div className="tab-column">
-                <div className="tab-column-title">Others</div>
-                <div className="tab-column-content">{this.accountOthersContent}</div>
+        return (
+            <div className="tab-content accounts-content">
+                <div className="tab-column">
+                    <div className="tab-column-title">Password</div>
+                    <div className="tab-column-content">{this.passwordContent}</div>
+                </div>
+                <div className="tab-column">
+                    <div className="tab-column-title">Others</div>
+                    <div className="tab-column-content">{this.accountOthersContent}</div>
+                </div>
             </div>
-        </div>;
+        );
     }
 
     @computed get modesContent() {
-        return <div className="tab-content modes-content">
-            <div className="tab-column">
-                <div className="tab-column-title">Modes</div>
-                <div className="tab-column-content">
-                    <select className="modes-select" onChange={this.selectUserMode} defaultValue={Doc.noviceMode ? "Novice" : "Developer"}>
-                        <option key={"Novice"} value={"Novice"}> Novice </option>
-                        <option key={"Developer"} value={"Developer"}> Developer</option>
-                    </select>
-                    <div className="modes-playground">
-                        <input className="playground-check" type="checkbox" checked={this.playgroundMode} onChange={this.playgroundModeToggle} />
-                        <div className="playground-text">Playground Mode</div>
+        return (
+            <div className="tab-content modes-content">
+                <div className="tab-column">
+                    <div className="tab-column-title">Modes</div>
+                    <div className="tab-column-content">
+                        <select className="modes-select" onChange={this.selectUserMode} defaultValue={Doc.noviceMode ? 'Novice' : 'Developer'}>
+                            <option key={'Novice'} value={'Novice'}>
+                                {' '}
+                                Novice{' '}
+                            </option>
+                            <option key={'Developer'} value={'Developer'}>
+                                {' '}
+                                Developer
+                            </option>
+                        </select>
+                        <div className="modes-playground">
+                            <input className="playground-check" type="checkbox" checked={this.playgroundMode} onChange={this.playgroundModeToggle} />
+                            <div className="playground-text">Playground Mode</div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div className="tab-column">
-                <div className="tab-column-title">Permissions</div>
-                <div className="tab-column-content">
-                    <button onClick={() => GroupManager.Instance?.open()}>Manage groups</button>
-                    <div className="default-acl">
-                        <input className="acl-check" type="checkbox" checked={BoolCast(Doc.defaultAclPrivate)}
-                            onChange={action(() => Doc.defaultAclPrivate = !Doc.defaultAclPrivate)} />
-                        <div className="acl-text">Default access private</div>
+                <div className="tab-column">
+                    <div className="tab-column-title">Permissions</div>
+                    <div className="tab-column-content">
+                        <button onClick={() => GroupManager.Instance?.open()}>Manage groups</button>
+                        <div className="default-acl">
+                            <input className="acl-check" type="checkbox" checked={BoolCast(Doc.defaultAclPrivate)} onChange={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))} />
+                            <div className="acl-text">Default access private</div>
+                        </div>
                     </div>
                 </div>
             </div>
-
-        </div>;
+        );
     }
 
-
     private get settingsInterface() {
         // const pairs = [{ title: "Password", ele: this.passwordContent }, { title: "Modes", ele: this.modesContent },
         // { title: "Accounts", ele: this.accountsContent }, { title: "Preferences", ele: this.preferencesContent }];
 
-        const tabs = [{ title: "Accounts", ele: this.accountsContent }, { title: "Modes", ele: this.modesContent },
-        { title: "Appearance", ele: this.appearanceContent }, { title: "Text", ele: this.textContent }];
+        const tabs = [
+            { title: 'Accounts', ele: this.accountsContent },
+            { title: 'Modes', ele: this.modesContent },
+            { title: 'Appearance', ele: this.appearanceContent },
+            { title: 'Text', ele: this.textContent },
+        ];
 
-        return <div className="settings-interface">
-            <div className="settings-panel">
-                <div className="settings-tabs">
-                    {tabs.map(tab => <div key={tab.title} className={"tab-control " + (this.activeTab === tab.title ? "active" : "inactive")} onClick={action(() => this.activeTab = tab.title)}>{tab.title}</div>)}
-                </div>
+        return (
+            <div className="settings-interface">
+                <div className="settings-panel">
+                    <div className="settings-tabs">
+                        {tabs.map(tab => (
+                            <div key={tab.title} className={'tab-control ' + (this.activeTab === tab.title ? 'active' : 'inactive')} onClick={action(() => (this.activeTab = tab.title))}>
+                                {tab.title}
+                            </div>
+                        ))}
+                    </div>
 
-                <div className="settings-user">
-                    <div className="settings-username">{Doc.CurrentUserEmail}</div>
-                    <button className="logout-button" onClick={() => window.location.assign(Utils.prepend("/logout"))} >
-                        {CurrentUserUtils.GuestDashboard ? "Exit" : "Log Out"}
-                    </button>
+                    <div className="settings-user">
+                        <div className="settings-username">{Doc.CurrentUserEmail}</div>
+                        <button className="logout-button" onClick={() => window.location.assign(Utils.prepend('/logout'))}>
+                            {Doc.GuestDashboard ? 'Exit' : 'Log Out'}
+                        </button>
+                    </div>
                 </div>
-            </div>
 
-            <div className="close-button" onClick={this.close}>
-                <FontAwesomeIcon icon={"times"} color="black" size={"lg"} />
-            </div>
+                <div className="close-button" onClick={this.close}>
+                    <FontAwesomeIcon icon={'times'} color="black" size={'lg'} />
+                </div>
 
-            <div className="settings-content">
-                {tabs.map(tab => <div key={tab.title} className={"tab-section " + (this.activeTab === tab.title ? "active" : "inactive")}>{tab.ele}</div>)}
+                <div className="settings-content">
+                    {tabs.map(tab => (
+                        <div key={tab.title} className={'tab-section ' + (this.activeTab === tab.title ? 'active' : 'inactive')}>
+                            {tab.ele}
+                        </div>
+                    ))}
+                </div>
             </div>
-        </div>;
-
+        );
     }
 
     render() {
-        return <MainViewModal
-            contents={this.settingsInterface}
-            isDisplayed={this.isOpen}
-            interactive={true}
-            closeOnExternalClick={this.close}
-            dialogueBoxStyle={{ width: "500px", height: "300px", background: Cast(Doc.SharingDoc().userColor, "string", null) }} />;
+        return (
+            <MainViewModal
+                contents={this.settingsInterface}
+                isDisplayed={this.isOpen}
+                interactive={true}
+                closeOnExternalClick={this.close}
+                dialogueBoxStyle={{ width: '500px', height: '300px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }}
+            />
+        );
     }
-}
\ No newline at end of file
+}