more refactoring ...

src/public/javascripts/services/app_context.js

@@ -23,7 +23,9 @@ class AppContext {
         const $leftPane = $("#left-pane");
 
         this.tabRow = new TabRowWidget(this);
-        $("#tab-row-container").append(this.tabRow.render());
+        const contents = this.tabRow.render();
+
+        $("#global-menu-wrapper").after(contents);
 
         this.noteTreeWidget = new NoteTreeWidget(this);
 
@@ -234,6 +236,10 @@ class AppContext {
         this.tabsChangedTaskId = setTimeout(() => this.saveOpenTabs(), 1000);
     }
 
+    async activateTab(tabContext) {
+        return this.tabRow.activateTab(tabContext.$tab[0]);
+    }
+
     newTabListener() {
         this.openEmptyTab();
     }

src/public/javascripts/services/note_detail.js

@@ -118,8 +118,7 @@ async function loadNoteDetail(origNotePath, options = {}) {
     
     const loadPromise = loadNoteDetailToContext(ctx, loadedNote, notePath).then(() => {
         if (activate) {
-            // will also trigger showTab via event
-            return tabRow.activateTab(ctx.$tab[0]);
+            appContext.activateTab(ctx);
         }
         else {
             return Promise.resolve();

src/public/javascripts/services/tab_row.js

@@ -21,7 +21,7 @@ const TAB_SIZE_SMALL = 84;
 const TAB_SIZE_SMALLER = 60;
 const TAB_SIZE_MINI = 48;
 
-const tabTemplate = `
+const TAB_TPL = `
 <div class="note-tab">
   <div class="note-tab-wrapper">
     <div class="note-tab-title"></div>
@@ -30,25 +30,216 @@ const tabTemplate = `
   </div>
 </div>`;
 
-const newTabButtonTemplate = `<div class="note-new-tab" title="Add new tab">+</div>`;
-const fillerTemplate = `<div class="tab-row-filler">
+const NEW_TAB_BUTTON_TPL = `<div class="note-new-tab" title="Add new tab">+</div>`;
+const FILLER_TPL = `<div class="tab-row-filler">
     <div class="tab-row-border"></div>
 </div>`;
 
-const TPL = `
+const TAB_ROW_TPL = `
 <div class="note-tab-row">
+    <style>
+    .note-tab-row {
+        box-sizing: border-box;
+        position: relative;
+        height: 34px;
+        min-height: 34px;
+        width: 100%;
+        background: var(--main-background-color);
+        border-radius: 5px 5px 0 0;
+        overflow: hidden;
+        margin-top: 2px;
+    }
+    .note-tab-row * {
+        box-sizing: inherit;
+        font: inherit;
+    }
+    .note-tab-row .note-tab-row-content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+    .note-tab-row .note-tab {
+        position: absolute;
+        left: 0;
+        height: 33px;
+        width: 240px;
+        border: 0;
+        margin: 0;
+        z-index: 1;
+        pointer-events: none;
+    }
+    
+    .note-new-tab {
+        position: absolute;
+        left: 0;
+        height: 33px;
+        width: 32px;
+        border: 0;
+        margin: 0;
+        z-index: 1;
+        text-align: center;
+        font-size: 24px;
+        cursor: pointer;
+        border-bottom: 1px solid var(--main-border-color);
+    }
+    
+    .note-new-tab:hover {
+        background-color: var(--accented-background-color);
+        border-radius: 5px;
+    }
+    
+    .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;
+    }
+    
+    .note-tab-row .note-tab[active] {
+        z-index: 5;
+    }
+    
+    .note-tab-row .note-tab,
+    .note-tab-row .note-tab * {
+        user-select: none;
+        cursor: default;
+    }
+    
+    .note-tab-row .note-tab.note-tab-was-just-added {
+        top: 10px;
+        animation: note-tab-was-just-added 120ms forwards ease-in-out;
+    }
+    
+    .note-tab-row .note-tab .note-tab-wrapper {
+        position: absolute;
+        display: flex;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 5px 8px;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+        overflow: hidden;
+        pointer-events: all;
+        background-color: var(--accented-background-color);
+        border-bottom: 1px solid var(--main-border-color);
+    }
+    
+    .note-tab-row .note-tab[active] .note-tab-wrapper {
+        background-color: var(--main-background-color);
+        border: 1px solid var(--main-border-color);
+        border-bottom: 0;
+        font-weight: bold;
+    }
+    
+    .note-tab-row .note-tab[is-mini] .note-tab-wrapper {
+        padding-left: 2px;
+        padding-right: 2px;
+    }
+    
+    .note-tab-row .note-tab .note-tab-title {
+        flex: 1;
+        vertical-align: top;
+        overflow: hidden;
+        white-space: nowrap;
+        color: var(--muted-text-color);
+    }
+    
+    .note-tab-row .note-tab[is-small] .note-tab-title {
+        margin-left: 0;
+    }
+    
+    .note-tab-row .note-tab[active] .note-tab-title {
+        color: var(--main-text-color);
+    }
+    
+    .note-tab-row .note-tab .note-tab-drag-handle {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+    }
+    
+    .note-tab-row .note-tab .note-tab-close {
+        flex-grow: 0;
+        flex-shrink: 0;
+        border-radius: 50%;
+        z-index: 100;
+        width: 24px;
+        height: 24px;
+        text-align: center;
+    }
+    
+    .note-tab-row .note-tab .note-tab-close span {
+        font-size: 24px;
+        position: relative;
+        top: -6px;
+    }
+    
+    .note-tab-row .note-tab .note-tab-close:hover {
+        background-color: var(--hover-item-background-color);
+        color: var(--hover-item-text-color);
+    }
+    
+    .note-tab-row .note-tab[is-smaller] .note-tab-close {
+        margin-left: auto;
+    }
+    .note-tab-row .note-tab[is-mini]:not([active]) .note-tab-close {
+        display: none;
+    }
+    .note-tab-row .note-tab[is-mini][active] .note-tab-close {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    @-moz-keyframes note-tab-was-just-added {
+        to {
+            top: 0;
+        }
+    }
+    @-webkit-keyframes note-tab-was-just-added {
+        to {
+            top: 0;
+        }
+    }
+    @-o-keyframes note-tab-was-just-added {
+        to {
+            top: 0;
+        }
+    }
+    @keyframes note-tab-was-just-added {
+        to {
+            top: 0;
+        }
+    }
+    .note-tab-row.note-tab-row-is-sorting .note-tab:not(.note-tab-is-dragging),
+    .note-tab-row:not(.note-tab-row-is-sorting) .note-tab.note-tab-was-just-dragged {
+        transition: transform 120ms ease-in-out;
+    }
+    </style>
+
     <div class="note-tab-row-content"></div>
 </div>`;
 
 export default class TabRowWidget extends BasicWidget {
-    async doRender($widget) {
-        $widget.append($(TPL));
+    doRender() {
+        const $widget = $(TAB_ROW_TPL);
+
+        this.el = $widget[0];
 
         this.draggabillies = [];
         this.eventListeners = {};
 
-        this.el = $widget.find(".note-tab-row")[0];
-
         this.setupStyleEl();
         this.setupEvents();
         this.setupDraggabilly();
@@ -77,7 +268,9 @@ export default class TabRowWidget extends BasicWidget {
                     }
                 }
             });
-        })
+        });
+
+        return $widget;
     }
 
     setupStyleEl() {
@@ -187,8 +380,10 @@ export default class TabRowWidget extends BasicWidget {
     }
 
     addTab(tabId) {
+        console.log("Adding tab", tabId);
+
         const div = document.createElement('div');
-        div.innerHTML = tabTemplate;
+        div.innerHTML = TAB_TPL;
         const tabEl = div.firstElementChild;
         tabEl.setAttribute('data-tab-id', tabId);
 
@@ -207,7 +402,8 @@ export default class TabRowWidget extends BasicWidget {
     }
 
     setTabCloseEventListener(tabEl) {
-        tabEl.querySelector('.note-tab-close').addEventListener('click', _ => this.removeTab(tabEl));
+        tabEl.querySelector('.note-tab-close')
+            .addEventListener('click', _ => this.removeTab(tabEl));
 
         tabEl.addEventListener('mousedown', e => {
             if (e.which === 2) {
@@ -407,7 +603,7 @@ export default class TabRowWidget extends BasicWidget {
 
     setupNewButton() {
         const div = document.createElement('div');
-        div.innerHTML = newTabButtonTemplate;
+        div.innerHTML = NEW_TAB_BUTTON_TPL;
         this.newTabEl = div.firstElementChild;
 
         this.tabContentEl.appendChild(this.newTabEl);
@@ -417,7 +613,7 @@ export default class TabRowWidget extends BasicWidget {
 
     setupFiller() {
         const div = document.createElement('div');
-        div.innerHTML = fillerTemplate;
+        div.innerHTML = FILLER_TPL;
         this.fillerEl = div.firstElementChild;
 
         this.tabContentEl.appendChild(this.fillerEl);

src/public/javascripts/services/tree.js

@@ -209,11 +209,6 @@ async function setExpandedToServer(branchId, isExpanded) {
     await server.put('branches/' + branchId + '/expanded/' + expandedNum);
 }
 
-/** @return {FancytreeNode[]} */
-function getSelectedNodes(stopOnParents = false) {
-    return tree.getSelectedNodes(stopOnParents);
-}
-
 async function treeInitialized() {
     if (appContext.getTabContexts().length > 0) {
         // this is just tree reload - tabs are already in place
@@ -276,6 +271,8 @@ async function treeInitialized() {
         filteredTabs[0].active = true;
     }
 
+    console.log("filteredTabs", filteredTabs);
+
     for (const tab of filteredTabs) {
         await noteDetailService.loadNoteDetail(tab.notePath, {
             state: tab,

src/public/javascripts/widgets/basic_widget.js

@@ -8,20 +8,18 @@ class BasicWidget {
     }
 
     render() {
-        const $widget = $('<div>').attr('id', this.widgetId);
-
         // actual rendering is async
-        this.doRender($widget);
+        const $widget = this.doRender();
+
+//        $widget.attr('id', this.widgetId);
 
         return $widget;
     }
 
     /**
      * for overriding
-     *
-     * @param {JQuery} $widget
      */
-    async doRender($widget) {}
+    doRender() {}
 
     eventReceived(name, data) {
         const fun = this[name + 'Listener'];

src/public/javascripts/widgets/global_buttons.js

@@ -25,8 +25,8 @@ const WIDGET_TPL = `
 `;
 
 class GlobalButtonsWidget extends BasicWidget {
-    async doRender($widget) {
-        $widget.append($(WIDGET_TPL));
+    doRender($widget) {
+        $widget = $(WIDGET_TPL);
 
         const $createTopLevelNoteButton = $widget.find(".create-top-level-note-button");
         const $collapseTreeButton = $widget.find(".collapse-tree-button");
@@ -37,6 +37,8 @@ class GlobalButtonsWidget extends BasicWidget {
         $collapseTreeButton.on('click', () => this.trigger('collapseTree'));
         $scrollToActiveNoteButton.on('click', () => appContext.getMainNoteTree().scrollToActiveNote());
         $toggleSearchButton.on('click', () => this.trigger('toggleSearch'));
+
+        return $widget;
     }
 }
 

src/public/javascripts/widgets/note_title.js

@@ -98,8 +98,8 @@ export default class NoteTitleWidget extends TabAwareWidget {
         this.tree = null;
     }
 
-    async doRender($widget) {
-        $widget.append($(TPL));
+    doRender() {
+        const $widget = $(TPL);
 
         this.$noteTitle = this.$tabContent.find(".note-title");
         this.$noteTitleRow = this.$tabContent.find(".note-title-row");
@@ -140,6 +140,8 @@ export default class NoteTitleWidget extends TabAwareWidget {
                 return false; // to not propagate the enter into the editor (causes issues with codemirror)
             });
         }
+
+        return $widget;
     }
 
     async activeTabChanged() {

src/public/javascripts/widgets/note_tree.js

@@ -15,18 +15,18 @@ import ws from "../services/ws.js";
 import appContext from "../services/app_context.js";
 
 const TPL = `
-<style>
-.tree {
-    overflow: auto;
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 60%;
-    font-family: var(--tree-font-family);
-    font-size: var(--tree-font-size);
-}
-</style>
-
-<div class="tree"></div>
+<div class="tree">
+    <style>
+    .tree {
+        overflow: auto;
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 60%;
+        font-family: var(--tree-font-family);
+        font-size: var(--tree-font-size);
+    }
+    </style>
+</div>
 `;
 
 export default class NoteTreeWidget extends BasicWidget {
@@ -36,14 +36,9 @@ export default class NoteTreeWidget extends BasicWidget {
         this.tree = null;
     }
 
-    async doRender($widget) {
-        $widget.append($(TPL));
-
-        const $tree = $widget.find('.tree');
-
-        const treeData = await treeService.loadTreeData();
-
-        await this.initFancyTree($tree, treeData);
+    doRender() {
+        const $widget = $(TPL);
+        const $tree = $widget;
 
         $tree.on("click", ".unhoist-button", hoistedNoteService.unhoist);
         $tree.on("click", ".refresh-search-button", searchNotesService.refreshSearch);
@@ -63,6 +58,10 @@ export default class NoteTreeWidget extends BasicWidget {
                 e.preventDefault();
             }
         });
+
+        treeService.loadTreeData().then(treeData => this.initFancyTree($tree, treeData));
+
+        return $widget;
     }
 
     async initFancyTree($tree, treeData) {

src/public/javascripts/widgets/note_type.js

@@ -35,8 +35,8 @@ const TPL = `
 `;
 
 export default class NoteTypeWidget extends TabAwareWidget {
-    async doRender($widget) {
-        $widget.append($(TPL));
+    doRender() {
+        const $widget = $(TPL);
 
         $widget.find('.note-type').on('show.bs.dropdown', () => this.renderDropdown());
 

src/public/javascripts/widgets/search_box.js

@@ -57,8 +57,8 @@ const TPL = `
 </div>`;
 
 export default class SearchBoxWidget extends BasicWidget {
-    async doRender($widget) {
-        $widget.append($(TPL));
+    doRender() {
+        const $widget = $(TPL);
 
         this.$searchBox = $widget.find(".search-box");
         this.$closeSearchButton = $widget.find(".close-search-button");
@@ -86,6 +86,8 @@ export default class SearchBoxWidget extends BasicWidget {
         this.$saveSearchButton.on('click', () => this.saveSearch());
 
         this.$closeSearchButton.on('click', () => this.hideSearchListener());
+
+        return $widget;
     }
 
     doSearch(searchText) {

src/public/javascripts/widgets/search_results.js

@@ -28,11 +28,13 @@ const TPL = `
 `;
 
 export default class SearchResultsWidget extends BasicWidget {
-    async doRender($widget) {
-        $widget.append($(TPL));
+    doRender() {
+        const $widget = $(TPL);
 
         this.$searchResults = $widget.find(".search-results");
         this.$searchResultsInner = $widget.find(".search-results-inner");
+
+        return $widget;
     }
 
     async searchForResultsListener({searchText}) {

src/public/stylesheets/desktop.css

@@ -175,195 +175,6 @@ body {
     border-color: var(--button-border-color);
 }
 
-.note-tab-row {
-    box-sizing: border-box;
-    position: relative;
-    height: 34px;
-    min-height: 34px;
-    width: 100%;
-    background: var(--main-background-color);
-    border-radius: 5px 5px 0 0;
-    overflow: hidden;
-    margin-top: 2px;
-}
-.note-tab-row * {
-    box-sizing: inherit;
-    font: inherit;
-}
-.note-tab-row .note-tab-row-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-.note-tab-row .note-tab {
-    position: absolute;
-    left: 0;
-    height: 33px;
-    width: 240px;
-    border: 0;
-    margin: 0;
-    z-index: 1;
-    pointer-events: none;
-}
-
-.note-new-tab {
-    position: absolute;
-    left: 0;
-    height: 33px;
-    width: 32px;
-    border: 0;
-    margin: 0;
-    z-index: 1;
-    text-align: center;
-    font-size: 24px;
-    cursor: pointer;
-    border-bottom: 1px solid var(--main-border-color);
-}
-
-.note-new-tab:hover {
-    background-color: var(--accented-background-color);
-    border-radius: 5px;
-}
-
-.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;
-}
-
-.note-tab-row .note-tab[active] {
-    z-index: 5;
-}
-
-.note-tab-row .note-tab,
-.note-tab-row .note-tab * {
-    user-select: none;
-    cursor: default;
-}
-
-.note-tab-row .note-tab.note-tab-was-just-added {
-    top: 10px;
-    animation: note-tab-was-just-added 120ms forwards ease-in-out;
-}
-
-.note-tab-row .note-tab .note-tab-wrapper {
-    position: absolute;
-    display: flex;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 5px 8px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    overflow: hidden;
-    pointer-events: all;
-    background-color: var(--accented-background-color);
-    border-bottom: 1px solid var(--main-border-color);
-}
-
-.note-tab-row .note-tab[active] .note-tab-wrapper {
-    background-color: var(--main-background-color);
-    border: 1px solid var(--main-border-color);
-    border-bottom: 0;
-    font-weight: bold;
-}
-
-.note-tab-row .note-tab[is-mini] .note-tab-wrapper {
-    padding-left: 2px;
-    padding-right: 2px;
-}
-
-.note-tab-row .note-tab .note-tab-title {
-    flex: 1;
-    vertical-align: top;
-    overflow: hidden;
-    white-space: nowrap;
-    color: var(--muted-text-color);
-}
-
-.note-tab-row .note-tab[is-small] .note-tab-title {
-    margin-left: 0;
-}
-
-.note-tab-row .note-tab[active] .note-tab-title {
-    color: var(--main-text-color);
-}
-
-.note-tab-row .note-tab .note-tab-drag-handle {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-}
-
-.note-tab-row .note-tab .note-tab-close {
-    flex-grow: 0;
-    flex-shrink: 0;
-    border-radius: 50%;
-    z-index: 100;
-    width: 24px;
-    height: 24px;
-    text-align: center;
-}
-
-.note-tab-row .note-tab .note-tab-close span {
-    font-size: 24px;
-    position: relative;
-    top: -6px;
-}
-
-.note-tab-row .note-tab .note-tab-close:hover {
-    background-color: var(--hover-item-background-color);
-    color: var(--hover-item-text-color);
-}
-
-.note-tab-row .note-tab[is-smaller] .note-tab-close {
-    margin-left: auto;
-}
-.note-tab-row .note-tab[is-mini]:not([active]) .note-tab-close {
-    display: none;
-}
-.note-tab-row .note-tab[is-mini][active] .note-tab-close {
-    margin-left: auto;
-    margin-right: auto;
-}
-@-moz-keyframes note-tab-was-just-added {
-    to {
-        top: 0;
-    }
-}
-@-webkit-keyframes note-tab-was-just-added {
-    to {
-        top: 0;
-    }
-}
-@-o-keyframes note-tab-was-just-added {
-    to {
-        top: 0;
-    }
-}
-@keyframes note-tab-was-just-added {
-    to {
-        top: 0;
-    }
-}
-.note-tab-row.note-tab-row-is-sorting .note-tab:not(.note-tab-is-dragging),
-.note-tab-row:not(.note-tab-row-is-sorting) .note-tab.note-tab-was-just-dragged {
-    transition: transform 120ms ease-in-out;
-}
-
 #hide-sidebar-button, #show-sidebar-button {
     position: fixed;
     bottom: 10px;

src/views/desktop.ejs

@@ -85,8 +85,6 @@
             </div>
         </div>
 
-        <div id="tab-row-container"></div>
-
         <div id="title-bar-buttons" style="display: none;">
             <button class="btn icon-action bx bx-minus" id="minimize-btn"></button>
             <button class="btn icon-action bx bx-checkbox" id="maximize-btn"></button>