tab row widgetizing

config-sample.ini

@@ -8,7 +8,7 @@ instanceName=
 [Network]
 # host setting is relevant only for web deployments - set the host on which the server will listen
 # host=0.0.0.0
-# port setting is relevant only for web deployments, desktop builds run on random free port
+# port setting is relevant only for web deployments, desktop builds run on a fixed port (changeable with TRILIUM_PORT environment variable)
 port=8080
 # true for TLS/SSL/HTTPS (secure), false for HTTP (unsecure).
 https=false

src/public/javascripts/desktop.js

@@ -3,7 +3,7 @@ import contextMenu from './services/tree_context_menu.js';
 import link from './services/link.js';
 import ws from './services/ws.js';
 import noteDetailService from './services/note_detail.js';
-import noteType from './services/note_type.js';
+import noteType from './widgets/note_type.js';
 import protectedSessionService from './services/protected_session.js';
 import protectedSessionHolder from './services/protected_session_holder.js';
 import searchNotesService from './services/search_notes.js';
@@ -21,7 +21,7 @@ import bundle from "./services/bundle.js";
 import treeCache from "./services/tree_cache.js";
 import libraryLoader from "./services/library_loader.js";
 import hoistedNoteService from './services/hoisted_note.js';
-import noteTypeService from './services/note_type.js';
+import noteTypeService from './widgets/note_type.js';
 import linkService from './services/link.js';
 import noteAutocompleteService from './services/note_autocomplete.js';
 import macInit from './services/mac_init.js';

src/public/javascripts/services/app_context.js

@@ -2,13 +2,12 @@ import GlobalButtonsWidget from "../widgets/global_buttons.js";
 import SearchBoxWidget from "../widgets/search_box.js";
 import SearchResultsWidget from "../widgets/search_results.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import tabRow from "./tab_row.js";
 import treeService from "./tree.js";
 import noteDetailService from "./note_detail.js";
 import TabContext from "./tab_context.js";
 import server from "./server.js";
 import keyboardActionService from "./keyboard_actions.js";
-import contextMenuService from "./context_menu.js";
+import TabRowWidget from "./tab_row.js";
 
 class AppContext {
     constructor() {
@@ -16,6 +15,30 @@ class AppContext {
         /** @type {TabContext[]} */
         this.tabContexts = [];
         this.tabsChangedTaskId = null;
+        /** @type {TabRowWidget} */
+        this.tabRow = null;
+    }
+
+    showWidgets() {
+        const $leftPane = $("#left-pane");
+
+        this.tabRow = new TabRowWidget(this);
+        $("#tab-row-container").append(this.tabRow.render());
+
+        this.noteTreeWidget = new NoteTreeWidget(this);
+
+        this.widgets = [
+            new GlobalButtonsWidget(this),
+            new SearchBoxWidget(this),
+            new SearchResultsWidget(this),
+            this.noteTreeWidget
+        ];
+
+        for (const widget of this.widgets) {
+            const $widget = widget.render();
+
+            $leftPane.append($widget);
+        }
     }
 
     trigger(name, data) {
@@ -31,7 +54,7 @@ class AppContext {
 
     /** @returns {TabContext} */
     getActiveTabContext() {
-        const activeTabEl = tabRow.activeTabEl;
+        const activeTabEl = this.tabRow.activeTabEl;
 
         if (!activeTabEl) {
             return null;
@@ -115,25 +138,6 @@ class AppContext {
         }
     }
 
-    showWidgets() {
-        const $leftPane = $("#left-pane");
-
-        this.noteTreeWidget = new NoteTreeWidget(this);
-
-        this.widgets = [
-            new GlobalButtonsWidget(this),
-            new SearchBoxWidget(this),
-            new SearchResultsWidget(this),
-            this.noteTreeWidget
-        ];
-
-        for (const widget of this.widgets) {
-            const $widget = widget.render();
-
-            $leftPane.append($widget);
-        }
-    }
-
     /**
      * @return {NoteTreeWidget}
      */
@@ -144,7 +148,7 @@ class AppContext {
     getTab(newTab, state) {
         if (!this.getActiveTabContext() || newTab) {
             // if it's a new tab explicitly by user then it's in background
-            const ctx = new TabContext(tabRow, state);
+            const ctx = new TabContext(this.tabRow, state);
             this.tabContexts.push(ctx);
 
             return ctx;
@@ -174,16 +178,16 @@ class AppContext {
     }
 
     async openEmptyTab() {
-        const ctx = new TabContext(tabRow);
+        const ctx = new TabContext(this.tabRow);
         this.tabContexts.push(ctx);
 
-        await tabRow.activateTab(ctx.$tab[0]);
+        await this.tabRow.activateTab(ctx.$tab[0]);
     }
 
     async filterTabs(noteId) {
         for (const tc of this.tabContexts) {
             if (tc.notePath && !tc.notePath.split("/").includes(noteId)) {
-                await tabRow.removeTab(tc.$tab[0]);
+                await this.tabRow.removeTab(tc.$tab[0]);
             }
         }
 
@@ -197,7 +201,7 @@ class AppContext {
     async saveOpenTabs() {
         const openTabs = [];
 
-        for (const tabEl of tabRow.tabEls) {
+        for (const tabEl of this.tabRow.tabEls) {
             const tabId = tabEl.getAttribute('data-tab-id');
             const tabContext = appContext.getTabContexts().find(tc => tc.tabId === tabId);
 
@@ -229,81 +233,63 @@ class AppContext {
 
         this.tabsChangedTaskId = setTimeout(() => this.saveOpenTabs(), 1000);
     }
+
+    newTabListener() {
+        this.openEmptyTab();
+    }
+
+    async activeTabChangedListener({tabEl}) {
+        const tabId = tabEl.getAttribute('data-tab-id');
+
+        await this.showTab(tabId);
+    }
+
+    async tabRemoveListener({tabEl}) {
+        const tabId = tabEl.getAttribute('data-tab-id');
+
+        this.tabContexts.filter(nc => nc.tabId === tabId)
+            .forEach(tc => tc.remove());
+
+        this.tabContexts = this.tabContexts.filter(nc => nc.tabId !== tabId);
+
+        if (this.tabContexts.length === 0) {
+            this.openEmptyTab();
+        }
+
+        this.openTabsChanged();
+    }
+
+    tabReorderListener() {
+        this.openTabsChanged();
+    }
 }
 
 const appContext = new AppContext();
 
-tabRow.addListener('newTab', () => appContext.openEmptyTab());
-
-tabRow.addListener('activeTabChange', async ({ detail }) => {
-    const tabId = detail.tabEl.getAttribute('data-tab-id');
-
-    await appContext.showTab(tabId);
-});
-
-tabRow.addListener('tabRemove', async ({ detail }) => {
-    const tabId = detail.tabEl.getAttribute('data-tab-id');
-
-    appContext.tabContexts.filter(nc => nc.tabId === tabId)
-        .forEach(tc => tc.remove());
-
-    appContext.tabContexts = appContext.tabContexts.filter(nc => nc.tabId !== tabId);
-
-    if (appContext.tabContexts.length === 0) {
-        appContext.openEmptyTab();
-    }
-});
-
-tabRow.addListener('activeTabChange', () => appContext.openTabsChanged());
-tabRow.addListener('tabRemove', () => appContext.openTabsChanged());
-tabRow.addListener('tabReorder', () => appContext.openTabsChanged());
-
 keyboardActionService.setGlobalActionHandler('OpenNewTab', () => {
     appContext.openEmptyTab();
 });
 
 keyboardActionService.setGlobalActionHandler('CloseActiveTab', () => {
-    if (tabRow.activeTabEl) {
+    if (this.tabRow.activeTabEl) {
-        tabRow.removeTab(tabRow.activeTabEl);
+        this.tabRow.removeTab(this.tabRow.activeTabEl);
     }
 });
 
 keyboardActionService.setGlobalActionHandler('ActivateNextTab', () => {
-    const nextTab = tabRow.nextTabEl;
+    const nextTab = this.tabRow.nextTabEl;
 
     if (nextTab) {
-        tabRow.activateTab(nextTab);
+        this.tabRow.activateTab(nextTab);
     }
 });
 
 keyboardActionService.setGlobalActionHandler('ActivatePreviousTab', () => {
-    const prevTab = tabRow.previousTabEl;
+    const prevTab = this.tabRow.previousTabEl;
 
     if (prevTab) {
-        tabRow.activateTab(prevTab);
+        this.tabRow.activateTab(prevTab);
     }
 });
 
-$(tabRow.el).on('contextmenu', '.note-tab', e => {
-    e.preventDefault();
-
-    const tab = $(e.target).closest(".note-tab");
-
-    contextMenuService.initContextMenu(e, {
-        getContextMenuItems: () => {
-            return [
-                {title: "Close all tabs", cmd: "removeAllTabs", uiIcon: "empty"},
-                {title: "Close all tabs except for this", cmd: "removeAllTabsExceptForThis", uiIcon: "empty"}
-            ];
-        },
-        selectContextMenuItem: (e, cmd) => {
-            if (cmd === 'removeAllTabs') {
-                tabRow.removeAllTabs();
-            } else if (cmd === 'removeAllTabsExceptForThis') {
-                tabRow.removeAllTabsExceptForThis(tab[0]);
-            }
-        }
-    });
-});
-
 export default appContext;

src/public/javascripts/services/note_detail.js

@@ -4,10 +4,8 @@ import server from './server.js';
 import ws from "./ws.js";
 import treeCache from "./tree_cache.js";
 import NoteFull from "../entities/note_full.js";
-import contextMenuService from "./context_menu.js";
 import treeUtils from "./tree_utils.js";
 import tabRow from "./tab_row.js";
-import keyboardActionService from "./keyboard_actions.js";
 import appContext from "./app_context.js";
 
 const $tabContentsContainer = $("#note-tab-container");

src/public/javascripts/services/tab_context.js

@@ -3,13 +3,8 @@ import protectedSessionHolder from "./protected_session_holder.js";
 import server from "./server.js";
 import bundleService from "./bundle.js";
 import Attributes from "./attributes.js";
-import treeUtils from "./tree_utils.js";
 import utils from "./utils.js";
-import NoteTypeContext from "./note_type.js";
-import noteDetailService from "./note_detail.js";
-import protectedSessionService from "./protected_session.js";
 import optionsService from "./options.js";
-import linkService from "./link.js";
 import Sidebar from "./sidebar.js";
 import appContext from "./app_context.js";
 
@@ -36,7 +31,7 @@ optionsService.addLoadListener(options => {
 
 class TabContext {
     /**
-     * @param {TabRow} tabRow
+     * @param {TabRowWidget} tabRow
      * @param {object} state
      */
     constructor(tabRow, state = {}) {
@@ -61,13 +56,8 @@ class TabContext {
 
         $tabContentsContainer.append(this.$tabContent);
 
-        this.$noteTitle = this.$tabContent.find(".note-title");
-        this.$noteTitleRow = this.$tabContent.find(".note-title-row");
-        this.$notePathList = this.$tabContent.find(".note-path-list");
-        this.$notePathCount = this.$tabContent.find(".note-path-count");
         this.$noteDetailComponents = this.$tabContent.find(".note-detail-component");
         this.$scriptArea = this.$tabContent.find(".note-detail-script-area");
-        this.$savedIndicator = this.$tabContent.find(".saved-indicator");
         this.noteChangeDisabled = false;
         this.isNoteChanged = false;
         this.attributes = new Attributes(this);
@@ -78,41 +68,10 @@ class TabContext {
             };
 
             this.sidebar = new Sidebar(this, sidebarState);
-            this.noteType = new NoteTypeContext(this);
         }
 
         this.components = {};
 
-        this.$noteTitle.on('input', () => {
-            if (!this.note) {
-                return;
-            }
-
-            this.noteChanged();
-
-            this.note.title = this.$noteTitle.val();
-
-            this.tabRow.updateTab(this.$tab[0], {title: this.note.title});
-            treeService.setNoteTitle(this.note.noteId, this.note.title);
-
-            this.setTitleBar();
-        });
-
-        if (utils.isDesktop()) {
-            // keyboard plugin is not loaded in mobile
-            utils.bindElShortcut(this.$noteTitle, 'return', () => {
-                this.getComponent().focus();
-
-                return false; // to not propagate the enter into the editor (causes issues with codemirror)
-            });
-        }
-
-        this.$protectButton = this.$tabContent.find(".protect-button");
-        this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
-
-        this.$unprotectButton = this.$tabContent.find(".unprotect-button");
-        this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
-
         await this.initComponent();
     }
 
@@ -156,8 +115,6 @@ class TabContext {
         this.noteChangeDisabled = true;
 
         try {
-            this.$noteTitle.val(this.note.title);
-
             await this.renderComponent();
         } finally {
             this.noteChangeDisabled = false;
@@ -177,12 +134,6 @@ class TabContext {
             }
         }, 5000);
 
-        this.showPaths();
-
-        if (utils.isDesktop()) {
-            this.noteType.update();
-        }
-
         bundleService.executeRelationBundles(this.note, 'runOnNoteView', this);
 
         // after loading new note make sure editor is scrolled to the top
@@ -281,12 +232,7 @@ class TabContext {
         this.$tabContent.addClass(utils.getNoteTypeClass(this.note.type));
         this.$tabContent.addClass(utils.getMimeTypeClass(this.note.mime));
 
-        this.$noteTitleRow.show(); // might be hidden from empty detail
         this.$tabContent.toggleClass("protected", this.note.isProtected);
-        this.$protectButton.toggleClass("active", this.note.isProtected);
-        this.$protectButton.prop("disabled", this.note.isProtected);
-        this.$unprotectButton.toggleClass("active", !this.note.isProtected);
-        this.$unprotectButton.prop("disabled", !this.note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
     }
 
     getComponent() {
@@ -349,12 +295,11 @@ class TabContext {
             protectedSessionHolder.touchProtectedSession();
         }
 
-        this.$savedIndicator.fadeIn();
+        // FIXME trigger "noteSaved" event so that title indicator is triggered
+        this.eventReceived('noteSaved');
 
         // run async
         bundleService.executeRelationBundles(this.note, 'runOnNoteChange', this);
-
-        this.eventReceived('noteSaved');
     }
 
     async saveNoteIfChanged() {
@@ -372,65 +317,10 @@ class TabContext {
 
         this.isNoteChanged = true;
 
+        // FIMXE: trigger noteChanged event
         this.$savedIndicator.fadeOut();
     }
 
-    async addPath(notePath, isCurrent) {
-        const title = await treeUtils.getNotePathTitle(notePath);
-
-        const noteLink = await linkService.createNoteLink(notePath, {title});
-
-        noteLink
-            .addClass("no-tooltip-preview")
-            .addClass("dropdown-item");
-
-        if (isCurrent) {
-            noteLink.addClass("current");
-        }
-
-        this.$notePathList.append(noteLink);
-    }
-
-    async showPaths() {
-        if (this.note.noteId === 'root') {
-            // root doesn't have any parent, but it's still technically 1 path
-
-            this.$notePathCount.html("1 path");
-
-            this.$notePathList.empty();
-
-            await this.addPath('root', true);
-        }
-        else {
-            const parents = await this.note.getParentNotes();
-
-            this.$notePathCount.html(parents.length + " path" + (parents.length > 1 ? "s" : ""));
-            this.$notePathList.empty();
-
-            const pathSegments = this.notePath.split("/");
-            const activeNoteParentNoteId = pathSegments[pathSegments.length - 2]; // we know this is not root so there must be a parent
-
-            for (const parentNote of parents) {
-                const parentNotePath = await treeService.getSomeNotePath(parentNote);
-                // this is to avoid having root notes leading '/'
-                const notePath = parentNotePath ? (parentNotePath + '/' + this.note.noteId) : this.note.noteId;
-                const isCurrent = activeNoteParentNoteId === parentNote.noteId;
-
-                await this.addPath(notePath, isCurrent);
-            }
-
-            const cloneLink = $("<div>")
-                .addClass("dropdown-item")
-                .append(
-                    $('<button class="btn btn-sm">')
-                        .text('Clone note to new location...')
-                        .on('click', () => import("../dialogs/clone_to.js").then(d => d.showDialog([this.note.noteId])))
-                );
-
-            this.$notePathList.append(cloneLink);
-        }
-    }
-
     async remove() {
         if (this.$tabContent) {
             // sometimes there are orphan autocompletes after closing the tab

src/public/javascripts/widgets/note_title.js

@@ -0,0 +1,219 @@
+import TabAwareWidget from "./tab_aware_widget.js";
+import treeService from "../services/tree.js";
+import utils from "../services/utils.js";
+import protectedSessionService from "../services/protected_session.js";
+import treeUtils from "../services/tree_utils.js";
+import linkService from "../services/link.js";
+import protectedSessionHolder from "../services/protected_session_holder.js";
+import NoteTypeWidget from "./note_type.js";
+
+const TPL = `
+<style>
+.note-title-row {
+    flex-grow: 0;
+    flex-shrink: 0;
+    padding-top: 2px;
+}
+
+.note-title {
+    margin-left: 15px;
+    margin-right: 10px;
+    font-size: 150%;
+    border: 0;
+    width: 5em;
+    flex-grow: 100;
+}
+</style>
+
+<div class="note-title-row">
+    <div style="display: flex; align-items: center;">
+        <div class="dropdown hide-in-zen-mode">
+            <button class="btn btn-sm dropdown-toggle note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="note-path-count">1 path</span>
+
+                <span class="caret"></span>
+            </button>
+            <ul class="note-path-list dropdown-menu" aria-labelledby="note-path-list-button">
+            </ul>
+        </div>
+
+        <input autocomplete="off" value="" class="note-title" tabindex="1">
+
+        <span class="saved-indicator hide-in-zen-mode bx bx-check" title="All changes have been saved"></span>
+
+        <div class="hide-in-zen-mode" style="display: flex; align-items: center;">
+            <button class="btn btn-sm icon-button bx bx-play-circle render-button"
+                    style="display: none; margin-right: 10px;"
+                    title="Render"></button>
+
+            <button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
+                    style="display: none; margin-right: 10px;"
+                    title="Execute (Ctrl+Enter)"></button>
+
+            <div class="btn-group btn-group-xs">
+                <button type="button"
+                        class="btn btn-sm icon-button bx bx-check-shield protect-button"
+                        title="Protected note can be viewed and edited only after entering password">
+                </button>
+
+                <button type="button"
+                        class="btn btn-sm icon-button bx bx-shield unprotect-button"
+                        title="Not protected note can be viewed without entering password">
+                </button>
+            </div>
+
+            &nbsp; &nbsp;
+
+            <div style="display: flex;">
+                <!-- note type here -->
+
+                <div class="dropdown note-actions">
+                    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
+                        Note actions
+                        <span class="caret"></span>
+                    </button>
+                    <div class="dropdown-menu dropdown-menu-right">
+                        <a class="dropdown-item show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
+                        <a class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
+                        <a class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
+                        <a class="dropdown-item show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">
+                            <kbd data-kb-action="ShowNoteSource"></kbd>
+                            Note source
+                        </a>
+                        <a class="dropdown-item import-files-button">Import files</a>
+                        <a class="dropdown-item export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
+                        <a class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
+                        <a class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export default class NoteTitleWidget extends TabAwareWidget {
+    constructor(appContext) {
+        super(appContext);
+
+        this.tree = null;
+    }
+
+    async doRender($widget) {
+        $widget.append($(TPL));
+
+        this.$noteTitle = this.$tabContent.find(".note-title");
+        this.$noteTitleRow = this.$tabContent.find(".note-title-row");
+        this.$notePathList = this.$tabContent.find(".note-path-list");
+        this.$notePathCount = this.$tabContent.find(".note-path-count");
+
+        this.$protectButton = this.$tabContent.find(".protect-button");
+        this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
+
+        this.$unprotectButton = this.$tabContent.find(".unprotect-button");
+        this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
+
+        this.$savedIndicator = this.$tabContent.find(".saved-indicator");
+
+        this.noteType = new NoteTypeWidget(this);
+
+        this.$noteTitle.on('input', () => {
+            if (!this.note) {
+                return;
+            }
+
+            // FIXME event not used
+            this.trigger(`activeNoteChanged`);
+
+            this.note.title = this.$noteTitle.val();
+
+            this.tabRow.updateTab(this.$tab[0], {title: this.note.title});
+            treeService.setNoteTitle(this.note.noteId, this.note.title);
+
+            this.setTitleBar();
+        });
+
+        if (utils.isDesktop()) {
+            // keyboard plugin is not loaded in mobile
+            utils.bindElShortcut(this.$noteTitle, 'return', () => {
+                this.getComponent().focus();
+
+                return false; // to not propagate the enter into the editor (causes issues with codemirror)
+            });
+        }
+    }
+
+    async activeTabChanged() {
+        const note = this.tabContext.note;
+
+        this.$noteTitle.val(this.note.title);
+
+        this.$protectButton.toggleClass("active", note.isProtected);
+        this.$protectButton.prop("disabled", note.isProtected);
+        this.$unprotectButton.toggleClass("active", !note.isProtected);
+        this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
+
+        await this.showPaths();
+    }
+
+    async showPaths() {
+        const note = this.tabContext.note;
+
+        if (note.noteId === 'root') {
+            // root doesn't have any parent, but it's still technically 1 path
+
+            this.$notePathCount.html("1 path");
+
+            this.$notePathList.empty();
+
+            await this.addPath('root', true);
+        }
+        else {
+            const parents = await note.getParentNotes();
+
+            this.$notePathCount.html(parents.length + " path" + (parents.length > 1 ? "s" : ""));
+            this.$notePathList.empty();
+
+            const pathSegments = this.notePath.split("/");
+            const activeNoteParentNoteId = pathSegments[pathSegments.length - 2]; // we know this is not root so there must be a parent
+
+            for (const parentNote of parents) {
+                const parentNotePath = await treeService.getSomeNotePath(parentNote);
+                // this is to avoid having root notes leading '/'
+                const notePath = parentNotePath ? (parentNotePath + '/' + note.noteId) : note.noteId;
+                const isCurrent = activeNoteParentNoteId === parentNote.noteId;
+
+                await this.addPath(notePath, isCurrent);
+            }
+
+            const cloneLink = $("<div>")
+                .addClass("dropdown-item")
+                .append(
+                    $('<button class="btn btn-sm">')
+                        .text('Clone note to new location...')
+                        .on('click', () => import("../dialogs/clone_to.js").then(d => d.showDialog([note.noteId])))
+                );
+
+            this.$notePathList.append(cloneLink);
+        }
+    }
+
+    async addPath(notePath, isCurrent) {
+        const title = await treeUtils.getNotePathTitle(notePath);
+
+        const noteLink = await linkService.createNoteLink(notePath, {title});
+
+        noteLink
+            .addClass("no-tooltip-preview")
+            .addClass("dropdown-item");
+
+        if (isCurrent) {
+            noteLink.addClass("current");
+        }
+
+        this.$notePathList.append(noteLink);
+    }
+
+    noteSavedListener() {
+        this.$savedIndicator.fadeIn();
+    }
+}

src/public/javascripts/widgets/note_type.js

@@ -1,7 +1,8 @@
-import treeService from './tree.js';
+import treeService from '../services/tree.js';
-import noteDetailService from './note_detail.js';
+import noteDetailService from '../services/note_detail.js';
-import server from './server.js';
+import server from '../services/server.js';
-import mimeTypesService from './mime_types.js';
+import mimeTypesService from '../services/mime_types.js';
+import TabAwareWidget from "./tab_aware_widget.js";
 
 const NOTE_TYPES = [
     { type: "file", title: "File", selectable: false },
@@ -15,20 +16,37 @@ const NOTE_TYPES = [
     { type: "code", mime: 'text/plain', title: "Code", selectable: true }
 ];
 
-export default class NoteTypeContext {
+const TPL = `
-    /**
+<style>
-     * @param {TabContext} ctx
+.note-type-dropdown {
-     */
+    max-height: 500px;
-    constructor(ctx) {
+    overflow-y: auto;
-        this.ctx = ctx;
+    overflow-x: hidden;
+}
+</style>
 
-        ctx.$tabContent.find('.note-type').on('show.bs.dropdown', () => this.renderDropdown());
+<div class="dropdown note-type">
+    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
+        Type: <span class="note-type-desc"></span>
+        <span class="caret"></span>
+    </button>
+    <div class="note-type-dropdown dropdown-menu dropdown-menu-right"></div>
+</div>
+`;
 
-        this.$noteTypeDropdown = ctx.$tabContent.find(".note-type-dropdown");
+export default class NoteTypeWidget extends TabAwareWidget {
-        this.$noteTypeButton = ctx.$tabContent.find(".note-type-button");
+    async doRender($widget) {
-        this.$noteTypeDesc = ctx.$tabContent.find(".note-type-desc");
+        $widget.append($(TPL));
-        this.$executeScriptButton = ctx.$tabContent.find(".execute-script-button");
+
-        this.$renderButton = ctx.$tabContent.find('.render-button');
+        $widget.find('.note-type').on('show.bs.dropdown', () => this.renderDropdown());
+
+        this.$noteTypeDropdown = $widget.find(".note-type-dropdown");
+        this.$noteTypeButton = $widget.find(".note-type-button");
+        this.$noteTypeDesc = $widget.find(".note-type-desc");
+        this.$executeScriptButton = $widget.find(".execute-script-button");
+        this.$renderButton = $widget.find('.render-button');
+
+        return $widget;
     }
 
     async update() {
@@ -41,6 +59,10 @@ export default class NoteTypeContext {
         this.$renderButton.toggle(this.ctx.note.type === 'render');
     }
 
+    async activeTabChanged() {
+        this.update();
+    }
+
     /** actual body is rendered lazily on note-type button click */
     async renderDropdown() {
         this.$noteTypeDropdown.empty();

src/public/javascripts/widgets/tab_aware_widget.js

@@ -0,0 +1,19 @@
+import BasicWidget from "./basic_widget.js";
+
+export default class TabAwareWidget extends BasicWidget {
+    constructor(appContext) {
+        super(appContext);
+
+        /** @var {TabContext} */
+        this.tabContext = null;
+    }
+
+    // to override
+    activeTabChanged() {}
+
+    activeTabChangedListener() {
+        this.tabContext = this.appContext.getActiveTabContext();
+
+        this.activeTabChanged();
+    }
+}

src/public/stylesheets/desktop.css

@@ -175,21 +175,6 @@ body {
     border-color: var(--button-border-color);
 }
 
-.note-title-row {
-    flex-grow: 0;
-    flex-shrink: 0;
-    padding-top: 2px;
-}
-
-.note-title {
-    margin-left: 15px;
-    margin-right: 10px;
-    font-size: 150%;
-    border: 0;
-    width: 5em;
-    flex-grow: 100;
-}
-
 .note-tab-row {
     box-sizing: border-box;
     position: relative;

src/public/stylesheets/style.css

@@ -381,12 +381,6 @@ div.ui-tooltip {
     border-right: none;
 }
 
-.note-type-dropdown {
-    max-height: 500px;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
 .cm-matchhighlight {
     background-color: #eeeeee
 }

src/views/center.ejs

@@ -2,8 +2,6 @@
     <div id="note-tab-container">
         <div class="note-tab-content note-tab-content-template">
             <div class="note-detail-content">
-                <% include title.ejs %>
-
                 <div class="note-detail-script-area"></div>
 
                 <table class="note-detail-promoted-attributes"></table>

src/views/desktop.ejs

@@ -85,9 +85,7 @@
             </div>
         </div>
 
-        <div class="note-tab-row">
+        <div id="tab-row-container"></div>
-            <div class="note-tab-row-content"></div>
-        </div>
 
         <div id="title-bar-buttons" style="display: none;">
             <button class="btn icon-action bx bx-minus" id="minimize-btn"></button>

src/views/title.ejs

@@ -1,71 +0,0 @@
-<div class="note-title-row">
-    <div style="display: flex; align-items: center;">
-        <div class="dropdown hide-in-zen-mode">
-            <button class="btn btn-sm dropdown-toggle note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span class="note-path-count">1 path</span>
-
-                <span class="caret"></span>
-            </button>
-            <ul class="note-path-list dropdown-menu" aria-labelledby="note-path-list-button">
-            </ul>
-        </div>
-
-        <input autocomplete="off" value="" class="note-title" tabindex="1">
-
-        <span class="saved-indicator hide-in-zen-mode bx bx-check" title="All changes have been saved"></span>
-
-        <div class="hide-in-zen-mode" style="display: flex; align-items: center;">
-            <button class="btn btn-sm icon-button bx bx-play-circle render-button"
-                    style="display: none; margin-right: 10px;"
-                    title="Render"></button>
-
-            <button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
-                    style="display: none; margin-right: 10px;"
-                    title="Execute (Ctrl+Enter)"></button>
-
-            <div class="btn-group btn-group-xs">
-                <button type="button"
-                        class="btn btn-sm icon-button bx bx-check-shield protect-button"
-                        title="Protected note can be viewed and edited only after entering password">
-                </button>
-
-                <button type="button"
-                        class="btn btn-sm icon-button bx bx-shield unprotect-button"
-                        title="Not protected note can be viewed without entering password">
-                </button>
-            </div>
-
-            &nbsp; &nbsp;
-
-            <div style="display: flex;">
-                <div class="dropdown note-type">
-                    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
-                        Type: <span class="note-type-desc"></span>
-                        <span class="caret"></span>
-                    </button>
-                    <div class="note-type-dropdown dropdown-menu dropdown-menu-right"></div>
-                </div>
-
-                <div class="dropdown note-actions">
-                    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
-                        Note actions
-                        <span class="caret"></span>
-                    </button>
-                    <div class="dropdown-menu dropdown-menu-right">
-                        <a class="dropdown-item show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
-                        <a class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
-                        <a class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
-                        <a class="dropdown-item show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">
-                            <kbd data-kb-action="ShowNoteSource"></kbd>
-                            Note source
-                        </a>
-                        <a class="dropdown-item import-files-button">Import files</a>
-                        <a class="dropdown-item export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
-                        <a class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
-                        <a class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>