note list is now separate widget which allows more flexibility in its usage

src/public/app/layouts/desktop_main_window_layout.js

@@ -27,6 +27,7 @@ import EditedNotesWidget from "../widgets/collapsible_widgets/edited_notes.js";
 import CollapsibleSectionContainer from "../widgets/collapsible_section_container.js";
 import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import InheritedAttributesWidget from "../widgets/inherited_attribute_list.js";
+import NoteListWidget from "../widgets/note_list.js";
 
 const RIGHT_PANE_CSS = `
 <style>
@@ -164,6 +165,7 @@ export default class DesktopMainWindowLayout {
                         )
                     )
                     .child(new TabCachingWidget(() => new NoteDetailWidget()))
+                    .child(new TabCachingWidget(() => new NoteListWidget()))
                     .child(new TabCachingWidget(() => new SimilarNotesWidget()))
                     .child(...this.customWidgets.get('center-pane'))
                 )

src/public/app/widgets/note_detail.js

@@ -25,8 +25,8 @@ const TPL = `
 <div class="note-detail">
     <style>
     .note-detail {
-        height: 100%;
         min-height: 0;
+        flex-grow: 1;
         font-family: var(--detail-font-family);
         font-size: var(--detail-font-size);
     }
@@ -75,6 +75,7 @@ export default class NoteDetailWidget extends TabAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        this.contentSized();
 
         this.$widget.on("dragover", e => e.preventDefault());
 

src/public/app/widgets/note_list.js

@@ -0,0 +1,39 @@
+import TabAwareWidget from "./tab_aware_widget.js";
+import NoteListRenderer from "../services/note_list_renderer.js";
+
+const TPL = `
+<div class="note-list-widget">
+<style>
+.note-list-widget {
+    flex-grow: 100000;
+    padding: 0 10px 10px 10px;
+}
+</style>
+
+</div>`;
+
+export default class NoteListWidget extends TabAwareWidget {
+    isEnabled() {
+        return super.isEnabled() && !this.tabContext.autoBookDisabled && (
+            ['book', 'search'].includes(this.note.type)
+            || (this.note.type === 'text' && this.note.hasChildren())
+        );
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.contentSized();
+    }
+
+    async refreshWithNote(note) {
+        const noteListRenderer = new NoteListRenderer(note, note.getChildNoteIds());
+
+        this.$widget.empty().append(await noteListRenderer.renderList());
+    }
+
+    autoBookDisabledEvent({tabContext}) {
+        if (this.isTab(tabContext.tabId)) {
+            this.refresh();
+        }
+    }
+}

src/public/app/widgets/type_widgets/book.js

@@ -4,34 +4,23 @@ import TypeWidget from "./type_widget.js";
 const TPL = `
 <div class="note-detail-book note-detail-printable">
     <style>
-    .note-detail-book {
+    .note-detail-book-auto-help {
-        height: 100%;
-        padding: 0 10px 10px 10px;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-    }
-    
-    .note-book-auto-message {
         background-color: var(--accented-background-color);
         text-align: center;
-        width: 100%;
         border-radius: 10px;
         padding: 5px;
-        margin-top: 5px;
+        margin: 0 10px 10px 10px;
-    }
-    
-    .note-detail-book-content {
-        flex-grow: 1;
-        min-height: 0;
     }
     </style>
 
-    <div class="note-detail-book-help alert alert-warning" style="margin: 50px; padding: 20px;">
+    <div class="note-detail-book-empty-help alert alert-warning" style="margin: 50px; padding: 20px;">
         This note of type Book doesn't have any child notes so there's nothing to display. See <a href="https://github.com/zadam/trilium/wiki/Book-note">wiki</a> for details.
     </div>
-
+    
-    <div class="note-detail-book-content"></div>
+    <div class="note-detail-book-auto-help">
+        This note doesn't have any content so we display its children. 
+        <br> Click <a href="javascript:">here</a> if you want to add some text.
+    </div>
 </div>`;
 
 export default class BookTypeWidget extends TypeWidget {
@@ -39,57 +28,19 @@ export default class BookTypeWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.$content = this.$widget.find('.note-detail-book-content');
+        this.contentSized();
-        this.$help = this.$widget.find('.note-detail-book-help');
+        this.$helpNoChildren = this.$widget.find('.note-detail-book-empty-help');
+
+        this.$helpAutoBook = this.$widget.find('.note-detail-book-auto-help');
+        this.$helpAutoBook.find('a').on('click', () => {
+            this.tabContext.autoBookDisabled = true;
+
+            this.triggerEvent('autoBookDisabled', {tabContext: this.tabContext});
+        });
     }
 
     async doRefresh(note) {
-        this.$content.empty();
+        this.$helpNoChildren.toggle(!this.note.hasChildren());
-        this.$help.hide();
+        this.$helpAutoBook.toggle(this.note.type !== 'book');
-
-        if (this.isAutoBook()) {
-            const $addTextLink = $('<a href="javascript:">here</a>').on('click', () => {
-                this.tabContext.autoBookDisabled = true;
-
-                this.triggerEvent('autoBookDisabled', {tabContext: this.tabContext});
-            });
-
-            this.$content.append($('<div class="note-book-auto-message"></div>')
-                .append(`This note doesn't have any content so we display its children. <br> Click `)
-                .append($addTextLink)
-                .append(' if you want to add some text.'));
-        }
-
-        const noteListRenderer = new NoteListRenderer(note, note.getChildNoteIds());
-
-        this.$content.append(await noteListRenderer.renderList());
-    }
-
-    /** @return {boolean} true if this is "auto book" activated (empty text note) and not explicit book note */
-    isAutoBook() {
-        return this.note.type !== 'book';
-    }
-
-    getDefaultZoomLevel() {
-        if (this.isAutoBook()) {
-            const w = this.$widget.width();
-
-            if (w <= 600) {
-                return 1;
-            } else if (w <= 900) {
-                return 2;
-            } else if (w <= 1300) {
-                return 3;
-            } else {
-                return 4;
-            }
-        }
-        else {
-            return 1;
-        }
-    }
-
-    cleanup() {
-        this.$content.empty();
     }
 }