saving size and visibility state of the panes

src/public/javascripts/desktop.js

@@ -175,8 +175,6 @@ noteTooltipService.setupGlobalTooltip();
 
 noteAutocompleteService.init();
 
-splitService.setupSplitWithSidebar();
-
 if (utils.isElectron()) {
     import("./services/spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck());
 }

src/public/javascripts/services/sidebar.js

@@ -2,30 +2,45 @@ import bundleService from "./bundle.js";
 import ws from "./ws.js";
 import optionsService from "./options.js";
 import splitService from "./split.js";
+import optionService from "./options.js";
+import server from "./server.js";
+import noteDetailService from "./note_detail.js";
 
 const $sidebar = $("#right-pane");
 const $sidebarContainer = $('#sidebar-container');
 
-const $showSideBarButton = $("#show-sidebar-button");
+const $showSidebarButton = $("#show-sidebar-button");
 const $hideSidebarButton = $("#hide-sidebar-button");
 
-$showSideBarButton.hide();
+optionService.waitForOptions().then(options => toggleSidebar(options.is('rightPaneVisible')));
+
+function toggleSidebar(show) {
+    $sidebar.toggle(show);
+    $showSidebarButton.toggle(!show);
+    $hideSidebarButton.toggle(show);
+
+    if (show) {
+        splitService.setupSplitWithSidebar();
+    }
+    else {
+        splitService.setupSplitWithoutSidebar();
+    }
+}
 
 $hideSidebarButton.on('click', () => {
-    $sidebar.hide();
-    $showSideBarButton.show();
-    $hideSidebarButton.hide();
+    toggleSidebar(false);
 
-    splitService.setupSplitWithoutSidebar();
+    server.put('options/rightPaneVisible/false');
 });
 
-// FIXME shoud run note loaded!
-$showSideBarButton.on('click', () => {
-    $sidebar.show();
-    $showSideBarButton.hide();
-    $hideSidebarButton.show();
+$showSidebarButton.on('click', async () => {
+    toggleSidebar(true);
 
-    splitService.setupSplitWithSidebar();
+    await server.put('options/rightPaneVisible/true');
+
+    const {sidebar} = noteDetailService.getActiveTabContext();
+    await sidebar.noteLoaded();
+    sidebar.show();
 });
 
 class Sidebar {

src/public/javascripts/services/split.js

@@ -1,24 +1,47 @@
+import server from "./server.js";
+import optionService from "./options.js";
+
 let instance;
 
-function setupSplitWithSidebar() {
+async function getPaneWidths() {
+    const options = await optionService.waitForOptions();
+
+    return {
+        leftPaneWidth: options.getInt('leftPaneWidth'),
+        rightPaneWidth: options.getInt('rightPaneWidth')
+    };
+}
+
+async function setupSplitWithSidebar() {
     if (instance) {
         instance.destroy();
     }
 
+    const {leftPaneWidth, rightPaneWidth} = await getPaneWidths();
+
     instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
-        sizes: [25, 50, 25],
-        gutterSize: 5
+        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]));
+        }
     });
 }
 
-function setupSplitWithoutSidebar() {
+async function setupSplitWithoutSidebar() {
     if (instance) {
         instance.destroy();
     }
 
+    const {leftPaneWidth} = await getPaneWidths();
+
     instance = Split(['#left-pane', '#center-pane'], {
-        sizes: [25, 75],
-        gutterSize: 5
+        sizes: [leftPaneWidth, 100 - leftPaneWidth],
+        gutterSize: 5,
+        onDragEnd: sizes => {
+            server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
+        }
     });
 }
 

src/routes/api/options.js

@@ -30,7 +30,10 @@ const ALLOWED_OPTIONS = new Set([
     'spellCheckEnabled',
     'spellCheckLanguageCode',
     'imageMaxWidthHeight',
-    'imageJpegQuality'
+    'imageJpegQuality',
+    'leftPaneWidth',
+    'rightPaneWidth',
+    'rightPaneVisible'
 ]);
 
 async function getOptions() {

src/services/options_init.js

@@ -76,7 +76,10 @@ const defaultOptions = [
     { name: 'imageMaxWidthHeight', value: '1200', isSynced: true },
     { name: 'imageJpegQuality', value: '75', isSynced: true },
     { 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: '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: 'rightPaneWidth', value: '25', isSynced: false },
+    { name: 'rightPaneVisible', value: 'true', isSynced: false }
 ];
 
 async function initStartupOptions() {

src/views/center.ejs

@@ -1,7 +1,7 @@
 <div id="center-pane">
     <div id="note-tab-container">
         <div class="note-tab-content note-tab-content-template">
-            <div class="note-detail-content" style="width: <%= contentWidthPercent %>%">
+            <div class="note-detail-content">
                 <% include title.ejs %>
 
                 <div class="note-detail-script-area"></div>