frameless design with tabs on top, split for left panel

electron.js

@@ -52,6 +52,7 @@ async function createMainWindow() {
         webPreferences: {
             nodeIntegration: true
         },
+        frame: false,
         icon: path.join(__dirname, 'images/app-icons/png/256x256' + (env.isDev() ? '-dev' : '') + '.png')
     });
 

src/public/javascripts/services/entrypoints.js

@@ -286,6 +286,11 @@ function registerEntrypoints() {
 
         searchNotesService.searchInSubtree(node.data.noteId);
     });
+
+    Split(['#left-pane', '#center-pane'], {
+        sizes: [25, 75],
+        gutterSize: 5
+    })
 }
 
 export default {

src/public/javascripts/services/tab_row.js

@@ -14,6 +14,7 @@ const Draggabilly = window.Draggabilly;
 const TAB_CONTENT_MIN_WIDTH = 24;
 const TAB_CONTENT_MAX_WIDTH = 240;
 const NEW_TAB_WIDTH = 32;
+const MIN_FILLER_WIDTH = 50;
 
 const TAB_SIZE_SMALL = 84;
 const TAB_SIZE_SMALLER = 60;
@@ -29,7 +30,9 @@ const tabTemplate = `
 </div>`;
 
 const newTabButtonTemplate = `<div class="note-new-tab" title="Add new tab">+</div>`;
-const fillerTemplate = `<div class="tab-row-filler"></div>`;
+const fillerTemplate = `<div class="tab-row-filler">
+    <div class="tab-row-border"></div>
+</div>`;
 
 class TabRow {
     constructor(el) {
@@ -102,7 +105,7 @@ class TabRow {
 
     get tabContentWidths() {
         const numberOfTabs = this.tabEls.length;
-        const tabsContentWidth = this.tabContentEl.clientWidth - NEW_TAB_WIDTH;
+        const tabsContentWidth = this.tabContentEl.clientWidth - NEW_TAB_WIDTH - MIN_FILLER_WIDTH;
         const targetWidth = tabsContentWidth / numberOfTabs;
         const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth));
         const flooredClampedTargetWidth = Math.floor(clampedTargetWidth);
@@ -119,7 +122,7 @@ class TabRow {
         }
 
         if (this.fillerEl) {
-            this.fillerEl.style.width = extraWidthRemaining + "px";
+            this.fillerEl.style.width = (extraWidthRemaining + MIN_FILLER_WIDTH) + "px";
         }
 
         return widths;

src/public/stylesheets/desktop.css

@@ -14,13 +14,31 @@ body {
     display: none !important;
 }
 
+.gutter {
+    background-color: var(--accented-background-color);
+}
+
+.gutter:hover {
+    background-color: var(--main-border-color);
+}
+
+.gutter.gutter-horizontal {
+    cursor: col-resize;
+}
+
+.gutter.gutter-vertical {
+    cursor: row-resize;
+}
+
 #center-pane {
     display: flex;
+    flex-direction: column;
 }
 
 #note-tab-container {
     min-height: 0;
     padding-left: 10px;
+    width: 100%;
 }
 
 #search-box {
@@ -195,6 +213,8 @@ body {
     box-sizing: border-box;
     position: relative;
     height: 33px;
+    min-height: 33px;
+    width: 100%;
     background: var(--main-background-color);
     border-radius: 5px 5px 0 0;
     overflow: hidden;
@@ -240,8 +260,14 @@ body {
 }
 
 .tab-row-filler {
+    -webkit-app-region: drag;
     position: absolute;
     left: 0;
+    height: 33px;
+}
+
+.tab-row-filler .tab-row-border {
+    position: relative;
     background: linear-gradient(to right, var(--main-border-color), transparent);
     height: 1px;
     margin-top: 32px;

src/views/desktop.ejs

@@ -11,44 +11,9 @@
 <div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
 
 <div id="container" style="display: none; grid-template-columns: minmax(<%= leftPaneMinWidth %>px, <%= leftPaneWidthPercent %>fr) minmax(0, <%= rightPaneWidthPercent %>fr)">
-    <div id="header" class="hide-in-zen-mode">
+    <div style="display: flex;">
-        <div id="history-navigation" style="display: none;">
+        <div class="note-tab-row hide-in-zen-mode">
-            <a id="history-back-button" title="Go to previous note." class="icon-action bx bx-left-arrow-circle"></a>
+            <div class="note-tab-row-content"></div>
-
-            <a id="history-forward-button" title="Go to next note." class="icon-action bx bx-right-arrow-circle"></a>
-        </div>
-
-        <div style="flex-grow: 100; display: flex;">
-            <button class="btn btn-sm" id="jump-to-note-dialog-button" data-kb-action="JumpToNote">
-                <span class="bx bx-crosshair"></span>
-                Jump to note
-            </button>
-
-            <button class="btn btn-sm" id="recent-changes-button" data-kb-action="ShowRecentChanges">
-                <span class="bx bx-history"></span>
-
-                Recent changes
-            </button>
-
-            <button class="btn btn-sm"
-                    id="enter-protected-session-button"
-                    title="Enter protected session to be able to find and view protected notes">
-                <span class="bx bx-log-in"></span>
-
-                Enter protected session
-            </button>
-
-            <button class="btn btn-sm"
-                    id="leave-protected-session-button"
-                    title="Leave protected session so that protected notes are not accessible any more."
-                    style="display: none;">
-                <span class="bx bx-log-out"></span>
-
-                Leave protected session
-            </button>
-        </div>
-
-        <div id="plugin-buttons">
         </div>
 
         <div>
@@ -125,6 +90,47 @@
         </div>
     </div>
 
+    <div id="header" class="hide-in-zen-mode">
+        <div id="history-navigation" style="display: none;">
+            <a id="history-back-button" title="Go to previous note." class="icon-action bx bx-left-arrow-circle"></a>
+
+            <a id="history-forward-button" title="Go to next note." class="icon-action bx bx-right-arrow-circle"></a>
+        </div>
+
+        <div style="flex-grow: 100; display: flex;">
+            <button class="btn btn-sm" id="jump-to-note-dialog-button" data-kb-action="JumpToNote">
+                <span class="bx bx-crosshair"></span>
+                Jump to note
+            </button>
+
+            <button class="btn btn-sm" id="recent-changes-button" data-kb-action="ShowRecentChanges">
+                <span class="bx bx-history"></span>
+
+                Recent changes
+            </button>
+
+            <button class="btn btn-sm"
+                    id="enter-protected-session-button"
+                    title="Enter protected session to be able to find and view protected notes">
+                <span class="bx bx-log-in"></span>
+
+                Enter protected session
+            </button>
+
+            <button class="btn btn-sm"
+                    id="leave-protected-session-button"
+                    title="Leave protected session so that protected notes are not accessible any more."
+                    style="display: none;">
+                <span class="bx bx-log-out"></span>
+
+                Leave protected session
+            </button>
+        </div>
+
+        <div id="plugin-buttons">
+        </div>
+    </div>
+
     <div style="display: flex; height: 100%;">
         <div id="left-pane" class="hide-in-zen-mode">
             <div id="global-buttons">
@@ -232,6 +238,8 @@
 
 <script src="libraries/dayjs.min.js"></script>
 
+<script src="libraries/split.min.js"></script>
+
 <link href="stylesheets/themes.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
 <link href="stylesheets/desktop.css" rel="stylesheet">

src/views/tabs.ejs

@@ -1,7 +1,3 @@
-<div class="note-tab-row hide-in-zen-mode">
-    <div class="note-tab-row-content"></div>
-</div>
-
 <div id="note-tab-container">
     <div class="note-tab-content note-tab-content-template">
         <div class="note-detail-content" style="width: <%= contentWidthPercent %>%">