sidebars are now represented as widgets

src/public/javascripts/desktop.js

@@ -162,12 +162,16 @@ function toggleSidebar(side, show) {
     paneVisible[side] = show;
 }
 
-function toggleAndSave(side, show) {
+async function toggleAndSave(side, show) {
     toggleSidebar(side, show);
 
+    await server.put(`options/${side}PaneVisible/` + show.toString());
+
+    await optionService.reloadOptions();
+
     splitService.setupSplit(paneVisible.left, paneVisible.right);
 
-    server.put(`options/${side}PaneVisible/` + show.toString());
+    appContext.trigger('sidebarVisibilityChanged', {side, show});
 }
 
 $("#show-right-pane-button").on('click', () => toggleAndSave('right', true));

src/public/javascripts/services/app_context.js

@@ -25,7 +25,6 @@ import RunScriptButtonsWidget from "../widgets/run_script_buttons.js";
 import ProtectedNoteSwitchWidget from "../widgets/protected_note_switch.js";
 import NoteTypeWidget from "../widgets/note_type.js";
 import NoteActionsWidget from "../widgets/note_actions.js";
-import protectedSessionHolder from "./protected_session_holder.js";
 import bundleService from "./bundle.js";
 import DialogEventComponent from "./dialog_events.js";
 import Entrypoints from "./entrypoints.js";
@@ -33,6 +32,7 @@ import CalendarWidget from "../widgets/calendar.js";
 import optionsService from "./options.js";
 import utils from "./utils.js";
 import treeService from "./tree.js";
+import SidePaneContainer from "../widgets/side_pane_container.js";
 
 class AppContext {
     constructor() {
@@ -144,21 +144,8 @@ class AppContext {
             $topPane.append(widget.render());
         }
 
-        const $leftPane = $("#left-pane");
-
         this.noteTreeWidget = new NoteTreeWidget(this);
 
-        const leftPaneWidgets = [
-            new GlobalButtonsWidget(this),
-            new SearchBoxWidget(this),
-            new SearchResultsWidget(this),
-            this.noteTreeWidget
-        ];
-
-        for (const widget of leftPaneWidgets) {
-            $leftPane.append(widget.render());
-        }
-
         const $centerPane = $("#center-pane");
 
         const centerPaneWidgets = [
@@ -178,9 +165,16 @@ class AppContext {
             $centerPane.append(widget.render());
         }
 
-        const $rightPane = $("#right-pane");
+        const leftPaneContainer = new SidePaneContainer(this, 'left', [
+            new GlobalButtonsWidget(this),
+            new SearchBoxWidget(this),
+            new SearchResultsWidget(this),
+            this.noteTreeWidget
+        ]);
 
-        const rightPaneWidgets = [
+        $centerPane.before(leftPaneContainer.render());
+
+        const rightPaneContainer = new SidePaneContainer(this, 'right', [
             new NoteInfoWidget(this),
             new TabCachingWidget(this, () => new CalendarWidget(this)),
             new TabCachingWidget(this, () => new AttributesWidget(this)),
@@ -188,19 +182,17 @@ class AppContext {
             new TabCachingWidget(this, () => new NoteRevisionsWidget(this)),
             new TabCachingWidget(this, () => new SimilarNotesWidget(this)),
             new TabCachingWidget(this, () => new WhatLinksHereWidget(this))
-        ];
+        ]);
 
-        for (const widget of rightPaneWidgets) {
+        $centerPane.after(rightPaneContainer.render());
-            $rightPane.append(widget.render());
-        }
 
         this.components = [
             new Entrypoints(),
             new DialogEventComponent(this),
             ...topPaneWidgets,
-            ...leftPaneWidgets,
+            leftPaneContainer,
             ...centerPaneWidgets,
-            ...rightPaneWidgets
+            rightPaneContainer
         ];
     }
 

src/public/javascripts/widgets/basic_widget.js

@@ -25,6 +25,10 @@ class BasicWidget extends Component {
         this.$widget.toggle(show);
     }
 
+    isVisible() {
+        return this.$widget.is(":visible");
+    }
+
     remove() {
         if (this.$widget) {
             this.$widget.remove();

src/public/javascripts/widgets/side_pane_container.js

@@ -0,0 +1,37 @@
+import BasicWidget from "./basic_widget.js";
+import optionService from "../services/options.js";
+
+export default class SidePaneContainer extends BasicWidget {
+    constructor(appContext, side, widgets) {
+        super(appContext);
+
+        this.side = side;
+        this.children = widgets;
+    }
+
+    render() {
+        this.$widget = $(`<div id="${this.side}-pane" style="display: flex; flex-direction: column;">`);
+
+        for (const widget of this.children) {
+            this.$widget.append(widget.render());
+        }
+
+        return this.$widget;
+    }
+
+    async eventReceived(name, data, sync = false) {
+        const options = await optionService.waitForOptions();
+
+        if (options.is(this.side + 'PaneVisible')) {
+            super.eventReceived(name, data, sync);
+        }
+    }
+
+    sidebarVisibilityChangedListener({side, show}) {
+        if (this.side === side) {
+            this.toggle(show);
+
+            this.eventReceived('lazyLoaded');
+        }
+    }
+}

src/public/javascripts/widgets/tab_aware_widget.js

@@ -76,4 +76,8 @@ export default class TabAwareWidget extends BasicWidget {
     treeCacheReloadedListener() {
         this.refresh();
     }
+
+    lazyLoadedListener() {
+        this.refresh();
+    }
 }

src/public/javascripts/widgets/tab_caching_widget.js

@@ -13,15 +13,13 @@ export default class TabCachingWidget extends TabAwareWidget {
         return this.$widget;
     }
 
-    activeTabChangedListener() {
+    refreshWithNote() {
-        super.activeTabChangedListener();
-
         for (const widget of Object.values(this.widgets)) {
             widget.toggle(false);
         }
 
         if (!this.tabContext) {
-            console.log(`Received activeTabChanged to widget ${this.componentId} which does not have tabContext.`);
+            console.log(`No tabContext in widget ${this.componentId}.`);
 
             return;
         }

src/views/desktop.ejs

@@ -17,14 +17,10 @@
         <button id="hide-left-pane-button" class="btn btn-sm icon-button bx bx-chevrons-left hide-in-zen-mode" title="Show sidebar"></button>
         <button id="show-left-pane-button" class="btn btn-sm icon-button bx bx-chevrons-right hide-in-zen-mode" title="Hide sidebar"></button>
 
-        <div id="left-pane"></div>
-
         <div id="center-pane"></div>
 
         <button id="hide-right-pane-button" class="btn btn-sm icon-button bx bx-chevrons-right hide-in-zen-mode" title="Hide sidebar"></button>
         <button id="show-right-pane-button" class="btn btn-sm icon-button bx bx-chevrons-left hide-in-zen-mode" title="Show sidebar"></button>
-
-        <div id="right-pane"></div>
     </div>
 
     <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>