sidebars are now represented as widgets

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() {
-        super.activeTabChangedListener();
-
+    refreshWithNote() {
         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;
         }