left sidebar can now be also collapsible

src/public/javascripts/desktop.js

@@ -145,38 +145,33 @@ if (utils.isElectron()) {
     import("./services/spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck());
 }
 
-const rightPane = $("#right-pane");
+optionService.waitForOptions().then(options => {
+    toggleSidebar('left', options.is('leftPaneVisible'));
+    toggleSidebar('right', options.is('rightPaneVisible'));
 
-const $showRightPaneButton = $("#show-right-pane-button");
-const $hideRightPaneButton = $("#hide-right-pane-button");
-
-optionService.waitForOptions().then(options => toggleSidebar(options.is('rightPaneVisible')));
-
-function toggleSidebar(show) {
-    rightPane.toggle(show);
-    $showRightPaneButton.toggle(!show);
-    $hideRightPaneButton.toggle(show);
-
-    if (show) {
-        splitService.setupSplitWithSidebar();
-    }
-    else {
-        splitService.setupSplitWithoutSidebar();
-    }
-}
-
-$hideRightPaneButton.on('click', () => {
-    toggleSidebar(false);
-
-    server.put('options/rightPaneVisible/false');
+    splitService.setupSplit(paneVisible.left, paneVisible.right);
 });
 
-$showRightPaneButton.on('click', async () => {
-    toggleSidebar(true);
+const paneVisible = {};
 
-    await server.put('options/rightPaneVisible/true');
+function toggleSidebar(side, show) {
+    $(`#${side}-pane`).toggle(show);
+    $(`#show-${side}-pane-button`).toggle(!show);
+    $(`#hide-${side}-pane-button`).toggle(show);
 
-    const {sidebar} = appContext.getActiveTabContext();
-    await sidebar.noteLoaded();
-    sidebar.show();
-});
+    paneVisible[side] = show;
+}
+
+function toggleAndSave(side, show) {
+    toggleSidebar(side, show);
+
+    splitService.setupSplit(paneVisible.left, paneVisible.right);
+
+    server.put(`options/${side}PaneVisible/` + show.toString());
+}
+
+$("#show-right-pane-button").on('click', () => toggleAndSave('right', true));
+$("#hide-right-pane-button").on('click', () => toggleAndSave('right', false));
+
+$("#show-left-pane-button").on('click', () => toggleAndSave('left', true));
+$("#hide-left-pane-button").on('click', () => toggleAndSave('left', false));

src/public/javascripts/services/app_context.js

@@ -196,8 +196,8 @@ class AppContext {
 
         this.components = [
             new Entrypoints(),
-            this.tabRow,
             new DialogEventComponent(this),
+            ...topPaneWidgets,
             ...leftPaneWidgets,
             ...centerPaneWidgets,
             ...rightPaneWidgets

src/public/javascripts/services/split.js

@@ -12,40 +12,50 @@ async function getPaneWidths() {
     };
 }
 
-async function setupSplitWithSidebar() {
+async function setupSplit(left, right) {
     if (instance) {
         instance.destroy();
+        instance = null;
+    }
+
+    if (!left && !right) {
+        $("#center-pane").css('width', '100%');
+
+        return;
     }
 
     const {leftPaneWidth, rightPaneWidth} = await getPaneWidths();
 
-    instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
-        sizes: [leftPaneWidth, 100 - leftPaneWidth - rightPaneWidth, rightPaneWidth],
-        gutterSize: 5,
-        onDragEnd: sizes => {
-            server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
-            server.put('options/rightPaneWidth/' + Math.round(sizes[2]));
-        }
-    });
-}
-
-async function setupSplitWithoutSidebar() {
-    if (instance) {
-        instance.destroy();
+    if (left && right) {
+        instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
+            sizes: [leftPaneWidth, 100 - leftPaneWidth - rightPaneWidth, rightPaneWidth],
+            gutterSize: 5,
+            onDragEnd: sizes => {
+                server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
+                server.put('options/rightPaneWidth/' + Math.round(sizes[2]));
+            }
+        });
+    }
+    else if (left) {
+        instance = Split(['#left-pane', '#center-pane'], {
+            sizes: [leftPaneWidth, 100 - leftPaneWidth],
+            gutterSize: 5,
+            onDragEnd: sizes => {
+                server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
+            }
+        });
+    }
+    else if (right) {
+        instance = Split(['#center-pane', '#right-pane'], {
+            sizes: [100 - rightPaneWidth, rightPaneWidth],
+            gutterSize: 5,
+            onDragEnd: sizes => {
+                server.put('options/rightPaneWidth/' + Math.round(sizes[1]));
+            }
+        });
     }
-
-    const {leftPaneWidth} = await getPaneWidths();
-
-    instance = Split(['#left-pane', '#center-pane'], {
-        sizes: [leftPaneWidth, 100 - leftPaneWidth],
-        gutterSize: 5,
-        onDragEnd: sizes => {
-            server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
-        }
-    });
 }
 
 export default {
-    setupSplitWithSidebar,
-    setupSplitWithoutSidebar
+    setupSplit
 };

src/public/stylesheets/desktop.css

@@ -153,6 +153,13 @@ body {
     z-index: 1000;
 }
 
+#hide-left-pane-button, #show-left-pane-button {
+    position: fixed;
+    bottom: 10px;
+    left: 10px;
+    z-index: 1000;
+}
+
 #right-pane {
     overflow: auto;
     padding-top: 4px;

src/routes/api/options.js

@@ -34,6 +34,7 @@ const ALLOWED_OPTIONS = new Set([
     'imageJpegQuality',
     'leftPaneWidth',
     'rightPaneWidth',
+    'leftPaneVisible',
     'rightPaneVisible',
     'nativeTitleBarVisible'
 ]);

src/services/options_init.js

@@ -78,6 +78,7 @@ const defaultOptions = [
     { name: 'autoFixConsistencyIssues', value: 'true', isSynced: false },
     { name: 'codeNotesMimeTypes', value: '["text/x-csrc","text/x-c++src","text/x-csharp","text/css","text/x-go","text/x-groovy","text/x-haskell","text/html","message/http","text/x-java","application/javascript;env=frontend","application/javascript;env=backend","application/json","text/x-kotlin","text/x-markdown","text/x-perl","text/x-php","text/x-python","text/x-ruby",null,"text/x-sql","text/x-swift","text/xml","text/x-yaml"]', isSynced: true },
     { name: 'leftPaneWidth', value: '25', isSynced: false },
+    { name: 'leftPaneVisible', value: 'true', isSynced: false },
     { name: 'rightPaneWidth', value: '25', isSynced: false },
     { name: 'rightPaneVisible', value: 'true', isSynced: false },
     { name: 'nativeTitleBarVisible', value: 'false', isSynced: false },

src/views/desktop.ejs

@@ -13,17 +13,18 @@
 <div id="container" style="display: none;">
     <div id="top-pane"></div>
 
-    <div style="display: flex; flex-grow: 1; flex-shrink: 1; min-height: 0;">
-        <div id="left-pane" class="hide-in-zen-mode"></div>
+    <div id="main-pane" style="display: flex; flex-grow: 1; flex-shrink: 1; min-height: 0;">
+        <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" class="hide-in-zen-mode">
-            <div id="sidebar-container"></div>
-        </div>
+        <div id="right-pane"></div>
     </div>
 
     <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>