[Plugin] Sticky Headers

[129s]

Features:

• add sticky headers in the tree view with parent notes pinned on the top.
• click a header to navigate to that note.
• display child count on the right.

How to use:

1. copy paste into a code note
2. set note type to JS frontend
3. add #widget label

class StickyHeadersWidget extends api.NoteContextAwareWidget {  
    
    get parentWidget() { return 'left-pane'; }
    isEnabled() { return super.isEnabled(); }
      
    doRender() {  
        this.$widget = $('<div class="sticky-headers-anchor"></div>');

        this.$stickyContainer = $(`
            <div class="sticky-headers-container" style="display: none; position: absolute; top: 0; left: 0; right: var(--sticky-header-scrollbar-width, 17px); z-index: 100;">
                <style>
                .sticky-headers-list { 
                    display: flex; 
                    flex-direction: column; 
                    background-color: var(--main-background-color); 
                    border-bottom: 1px solid var(--main-border-color); 
                }
                .sticky-header-item { 
                    display: flex; 
                    align-items: center; 
                    justify-content: space-between;
                    gap: 6px; 
                    cursor: pointer; 
                    font-size: 14px; 
                }
                .sticky-header-item:hover { 
                    background-color: var(--hover-item-background-color); 
                }
                .sticky-header-item-main {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    overflow: hidden;
                }
                .sticky-header-item-icon { 
                    flex-shrink: 0; 
                }
                .sticky-header-item-title {
                    white-space: nowrap; 
                    overflow: hidden; 
                    text-overflow: ellipsis;
                }
                .sticky-header-child-count {
                    flex-shrink: 0;
                    font-size: 12px;
                    color: var(--muted-text-color);
                    margin: 4px;
                    padding-right:16px;
                }
                </style>
                <div class="sticky-headers-list"></div>
            </div>
        `);
        this.$list = this.$stickyContainer.find('.sticky-headers-list');
        this.itemHeight = 0;
        this.debouncedUpdate = this._debounce(() => this.updateStickyHeaders(), 20);
    }

    initialRenderCompleteEvent() {
        this.waitForTreeInitialization();
    }

    async waitForTreeInitialization() {
        await new Promise(resolve => {
            const interval = setInterval(() => {
                const $tree = $('.tree');
                if ($tree.length > 0) {
                    const treeInstance = $.ui.fancytree.getTree($tree[0]);
                    if (treeInstance && treeInstance.rootNode) {
                        this.tree = treeInstance;
                        resolve();
                        clearInterval(interval);
                    } else if (treeInstance) {
                        $tree.one('fancytreeinit', (event, data) => {
                            this.tree = data.tree;
                            resolve();
                        });
                        clearInterval(interval);
                    }
                }
            }, 100);
        });
        
        this.injectUi();
        this.measureItemHeight();
        this.attachEventListeners();
        this.updateStickyHeaders();
    }

    injectUi() {
        const $targetParent = $('.tree-wrapper');
        if ($targetParent.length > 0) {
            $targetParent.css('position', 'relative');
            
            const scrollbarWidth = this.getScrollbarWidth();
            $targetParent[0].style.setProperty('--sticky-header-scrollbar-width', `${scrollbarWidth}px`);

            $targetParent.prepend(this.$stickyContainer);
        }
    }

    getScrollbarWidth() {
        const outer = document.createElement('div');
        outer.style.visibility = 'hidden';
        outer.style.overflow = 'scroll';
        document.body.appendChild(outer);

        const inner = document.createElement('div');
        outer.appendChild(inner);

        const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);

        outer.parentNode.removeChild(outer);

        return scrollbarWidth;
    }
    
    measureItemHeight() {
        const $dummyItem = $(`
            <div class="sticky-header-item" style="position: absolute; top: -9999px; left: -9999px;">
                <div class="sticky-header-item-main">
                    <span class="sticky-header-item-icon note-icon"></span>
                    <span class="sticky-header-item-title">Measure Height</span>
                </div>
                <span class="sticky-header-child-count">99</span>
            </div>
        `);
        
        $('body').append($dummyItem);
        
        this.itemHeight = $dummyItem.outerHeight(true); 
        
        $dummyItem.remove();
    
        if (this.itemHeight === 0) {
            console.warn("StickyHeadersWidget: Could not measure item height. Defaulting to 30px.");
            this.itemHeight = 30;
        }
    }

    attachEventListeners() {
        $('.tree').on('scroll.stickyHeaderWidget', this.debouncedUpdate);
        $('.tree').on('fancytreeexpand.stickyHeaderWidget fancytreecollapse.stickyHeaderWidget', this.debouncedUpdate);
        this.$stickyContainer.on('click', '.sticky-header-item', (e) => {
            const noteId = $(e.currentTarget).data('note-id');
            if (noteId) this.navigateToNote(noteId);
        });
    }
    
    doDestroy() {
        $('.tree').off('.stickyHeaderWidget');
        if (this.$stickyContainer) this.$stickyContainer.remove();
        $('.tree-wrapper').css('position', ''); 
    }

    _debounce(func, delay) {
        let timeout;
        return (...args) => {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), delay);
        };
    }

    updateStickyHeaders() {
        const $scroller = $('.tree');
        if (!$scroller.length || !this.tree || this.itemHeight === 0) {
            return;
        }

        let visibleRootNode = null;
        this.tree.visit(node => {
            if (node.isVisible() && node.span && node.span.offsetHeight > 0) {
                visibleRootNode = node;
                return false;
            }
        });

        if (!visibleRootNode) {
            this.$stickyContainer.hide();
            return;
        }

        const baseLevel = visibleRootNode.getLevel();

        const scrollerRect = $scroller[0].getBoundingClientRect();
        let finalContextNode = null;

        this.tree.visit(node => {
            if (node.isVisible() && node.span && node.span.offsetHeight > 0) {
                let currentContextNode;
                if (node.isFolder() && node.isExpanded()) {
                    currentContextNode = node;
                } else {
                    currentContextNode = node.getParent();
                }
                
                if (!currentContextNode || currentContextNode.getLevel() < baseLevel) {
                    return;
                }

                let pathLength = 0;
                let temp = currentContextNode;
                while (temp && temp.getLevel() >= baseLevel) {
                    pathLength++;
                    temp = temp.getParent();
                }

                const predictedHeight = pathLength * this.itemHeight;
                const referenceLine = scrollerRect.top + predictedHeight;
                const nodeRect = node.span.getBoundingClientRect();

                if (nodeRect.bottom < referenceLine) {
                    finalContextNode = currentContextNode;
                } else {
                    return false;
                }
            }
        });

        const headersToShow = [];
        let current = finalContextNode;
        
        while (current && current.isFolder() && current.getLevel() >= baseLevel) {
            const childFolderCount = Array.isArray(current.children) 
                ? current.children.filter(c => c.isFolder()).length 
                : 0;

            headersToShow.push({
                noteId: current.data.noteId,
                title: current.title,
                icon: current.icon,
                level: current.getLevel(),
                childFolderCount: childFolderCount
            });
            
            current = current.getParent();
        }

        this.$list.empty();
        if (headersToShow.length > 0) {
            headersToShow.reverse().forEach(header => {
                const indent = (header.level - baseLevel) * 15;
                const countHtml = header.childFolderCount > 0 
                    ? `<span class="sticky-header-child-count">${header.childFolderCount}</span>` 
                    : '';

                const $item = $(`
                    <div class="sticky-header-item" data-note-id="${header.noteId}" style="padding-left: ${indent + 16}px;">
                        <div class="sticky-header-item-main">
                            <span class="sticky-header-item-icon ${header.icon}"></span>
                            <span class="sticky-header-item-title">${header.title}</span>
                        </div>
                        ${countHtml}
                    </div>
                `);
                this.$list.append($item);
            });
            this.$stickyContainer.show();
        } else {
            this.$stickyContainer.hide();
        }
    }


    navigateToNote(noteId) {  
        if (!this.tree) return;
        const nodes = this.tree.getNodesByRef(noteId);
        if (!nodes || nodes.length === 0) {
            console.warn(`StickyHeaders: Could not find any node with noteId ${noteId}.`);
            return;
        }
        const node = nodes[0];
        this.tree.setFocus(true);
        node.scrollIntoView(true, { noAnimation: false });
        node.setActive(true, { noEvents: true });
    }

    entitiesReloadedEvent() {  
        setTimeout(() => {
            this.updateStickyHeaders();
        }, 200);
    }  
}

module.exports = new StickyHeadersWidget();

I also attach the separator fx code below

How to use:

1. copy paste into a code note
2. set note type to Css
3. add #appCss label

.ui-fancytree ul {
    padding-left: 8px;
}

.ui-fancytree li[aria-expanded="true"]:not(.fancytree-lastsib) > ul > li::before{
    content: "";
    position: absolute;
    
    background-color: var(--left-pane-text-color);
    
    width: 1px;
    top: 0px;
    left: 5px;
    bottom: 0px;
    opacity: 0.65;
}