autocollapse notes after period of inactivity + some other changes, #1192

src/public/app/entities/note_complement.js

@@ -26,6 +26,8 @@ class NoteComplement {
         /** @param {string} */
         this.utcDateModified = row.utcDateModified;
 
+        // "combined" date modified give larger out of note's and note_content's dateModified
+
         /** @param {string} */
         this.combinedDateModified = row.combinedDateModified;
 

src/public/app/services/tab_context.js

@@ -85,6 +85,11 @@ class TabContext extends Component {
         return treeCache.notes[this.noteId];
     }
 
+    /** @property {string[]} */
+    get notePathArray() {
+        return this.notePath ? this.notePath.split('/') : [];
+    }
+
     /** @return {NoteComplement} */
     async getNoteComplement() {
         if (!this.noteId) {

src/public/app/services/tree_context_menu.js

@@ -16,7 +16,7 @@ class TreeContextMenu {
         this.treeWidget = treeWidget;
         this.node = node;
     }
-    
+
     async show(e) {
         contextMenu.show({
             x: e.pageX,
@@ -111,7 +111,14 @@ class TreeContextMenu {
         const notePath = treeService.getNotePath(this.node);
 
         if (command === 'openInTab') {
-            appContext.tabManager.openTabWithNote(notePath);
+
+            const start = Date.now();
+
+            await this.node.load(true);
+
+            console.log("Reload took", Date.now() - start, "ms");
+
+//            appContext.tabManager.openTabWithNote(notePath);
         }
         else if (command === "insertNoteAfter") {
             const parentNoteId = this.node.data.parentNoteId;
@@ -136,4 +143,4 @@ class TreeContextMenu {
     }
 }
 
-export default TreeContextMenu;
+export default TreeContextMenu;

src/public/app/widgets/attribute_detail.js

@@ -63,7 +63,7 @@ const TPL = `
     <div class="attr-is-owned-by"></div>
 
     <table class="attr-edit-table">
-        <tr>
+        <tr title="Attribute name can be composed of alphanumeric characters, colon and underscore only">
             <th>Name:</th>
             <td><input type="text" class="attr-input-name form-control" /></td>
         </tr>
@@ -159,15 +159,15 @@ const ATTR_TITLES = {
 };
 
 export default class AttributeDetailWidget extends TabAwareWidget {
-    isEnabled() {
+    async refresh() {
         // this widget is not activated in a standard way
-        return false;
     }
 
     doRender() {
         this.relatedNotesSpacedUpdate = new SpacedUpdate(async () => this.updateRelatedNotes(), 1000);
 
         this.$widget = $(TPL);
+        this.contentSized();
 
         this.$title = this.$widget.find('.attr-detail-title');
 
@@ -280,7 +280,7 @@ export default class AttributeDetailWidget extends TabAwareWidget {
 
             return;
         }
-
+console.log("RENDERING");
         this.attrType = this.getAttrType(attribute);
 
         const attrName =
@@ -373,6 +373,8 @@ export default class AttributeDetailWidget extends TabAwareWidget {
             this.$widget.outerHeight() + y > $(window).height() - 50
                         ? $(window).height() - y - 50
                         : 10000);
+
+        console.log("RENDERING DONE");
     }
 
     async updateRelatedNotes() {

src/public/app/widgets/attribute_list.js

@@ -116,7 +116,7 @@ export default class AttributeListWidget extends TabAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
+        this.overflowing();
 
         this.$promotedExpander = this.$widget.find('.attr-promoted-expander');
         this.$allAttrWrapper = this.$widget.find('.all-attr-wrapper');

src/public/app/widgets/basic_widget.js

@@ -30,6 +30,11 @@ class BasicWidget extends Component {
         return this;
     }
 
+    overflowing() {
+        this.css('contain', 'none');
+        return this;
+    }
+
     collapsible() {
         this.css('min-height', '0');
         return this;

src/public/app/widgets/note_actions.js

@@ -93,7 +93,7 @@ const TPL = `
 export default class NoteActionsWidget extends TabAwareWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
+        this.overflowing();
 
         this.$showSourceButton = this.$widget.find('.show-source-button');
 

src/public/app/widgets/note_tree.js

@@ -312,6 +312,8 @@ export default class NoteTreeWidget extends TabAwareWidget {
             scrollParent: this.$tree,
             minExpandLevel: 2, // root can't be collapsed
             click: (event, data) => {
+                this.activityDetected();
+
                 const targetType = data.targetType;
                 const node = data.node;
 
@@ -911,6 +913,8 @@ export default class NoteTreeWidget extends TabAwareWidget {
     async refresh() {
         this.toggleInt(this.isEnabled());
 
+        this.activityDetected();
+
         const oldActiveNode = this.getActiveNode();
         let oldActiveNodeFocused = false;
 
@@ -956,7 +960,44 @@ export default class NoteTreeWidget extends TabAwareWidget {
         }
     }
 
+    activityDetected() {
+        if (this.autoCollapseTimeoutId) {
+            clearTimeout(this.autoCollapseTimeoutId);
+        }
+
+        this.autoCollapseTimeoutId = setTimeout(() => {
+            /*
+             * We're collapsing notes after period of inactivity to "cleanup" the tree - users rarely
+             * collapse the notes and the tree becomes unusuably large.
+             * Some context: https://github.com/zadam/trilium/issues/1192
+             */
+
+            const noteIdsToKeepExpanded = new Set(
+                appContext.tabManager.getTabContexts()
+                    .map(tc => tc.notePathArray)
+                    .flat()
+            );
+
+            let noneCollapsedYet = true;
+
+            this.tree.getRootNode().visit(node => {
+                if (node.isExpanded() && !noteIdsToKeepExpanded.has(node.data.noteId)) {
+                    node.setExpanded(false);
+
+                    if (noneCollapsedYet) {
+                        toastService.showMessage("Auto collapsing notes after inactivity...");
+                        noneCollapsedYet = false;
+                    }
+
+                    console.log("Auto collapsed", node.data.noteId);
+                }
+            }, false);
+        }, 600 * 1000);
+    }
+
     async entitiesReloadedEvent({loadResults}) {
+        this.activityDetected();
+
         if (loadResults.isEmptyForTree()) {
             return;
         }

src/public/app/widgets/note_type.js

@@ -34,7 +34,7 @@ const TPL = `
 export default class NoteTypeWidget extends TabAwareWidget {
     doRender() {
         this.$widget = $(TPL);
-        this.contentSized();
+        this.overflowing();
 
         this.$widget.on('show.bs.dropdown', () => this.renderDropdown());
 

src/public/stylesheets/style.css

@@ -825,3 +825,7 @@ body {
 .ck.ck-mentions > .ck-list__item {
     max-width: 600px;
 }
+
+ul.fancytree-container li {
+    contain: layout paint;
+}

src/views/desktop.ejs

@@ -66,7 +66,7 @@
 <link href="libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
 
 <!-- Include Fancytree skin and library -->
-<link href="libraries/fancytree/skin-win8/ui.fancytree.min.css" rel="stylesheet">
+<link href="libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
 <script src="libraries/fancytree/jquery.fancytree-all-deps.min.js"></script>
 
 <script src="libraries/jquery.hotkeys.js"></script>