new tab now has note autocomplete

src/public/javascripts/services/note_detail.js

@@ -310,14 +310,16 @@ $tabContentsContainer.on("drop", e => {
     });
 });
 
-tabRow.addListener('newTab', async () => {
+async function createEmptyTab() {
     const ctx = new TabContext(tabRow);
     tabContexts.push(ctx);
 
-    renderComponent(ctx);
+    await renderComponent(ctx);
 
     await tabRow.setCurrentTab(ctx.tab);
-});
+}
+
+tabRow.addListener('newTab', createEmptyTab);
 
 tabRow.addListener('activeTabChange', async ({ detail }) => {
     const tabId = detail.tabEl.getAttribute('data-tab-id');
@@ -360,13 +362,14 @@ $(tabRow.el).on('contextmenu', '.note-tab', e => {
 });
 
 if (utils.isElectron()) {
-    utils.bindShortcut('ctrl+w', () => {
-        if (tabContexts.length === 1) {
-            // at least one tab must be present
-            return;
-        }
+    utils.bindShortcut('ctrl+t', () => {
+        createEmptyTab();
+    });
 
-        tabRow.removeTab(tabRow.activeTabEl);
+    utils.bindShortcut('ctrl+w', () => {
+        if (tabRow.activeTabEl) {
+            tabRow.removeTab(tabRow.activeTabEl);
+        }
     });
 
     utils.bindShortcut('ctrl+tab', () => {
@@ -415,7 +418,7 @@ async function saveOpenTabs() {
         const tabId = tabEl.getAttribute('data-tab-id');
         const tabContext = tabContexts.find(tc => tc.tabId === tabId);
 
-        if (tabContext) {
+        if (tabContext && tabContext.notePath) {
             openTabs.push({
                 notePath: tabContext.notePath,
                 active: activeTabEl === tabEl

src/public/javascripts/services/note_detail_empty.js

@@ -0,0 +1,42 @@
+import noteAutocompleteService from '../services/note_autocomplete.js';
+import treeService from "./tree.js";
+
+class NoteDetailEmpty {
+    /**
+     * @param {TabContext} ctx
+     */
+    constructor(ctx) {
+        this.ctx = ctx;
+        this.$component = ctx.$tabContent.find('.note-detail-empty');
+        this.$autoComplete = ctx.$tabContent.find(".note-autocomplete");
+    }
+
+    render() {
+        this.$component.show();
+        this.ctx.$noteTitleRow.hide();
+
+        noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, { hideGoToSelectedNoteButton: true })
+            .on('autocomplete:selected', function(event, suggestion, dataset) {
+                if (!suggestion.path) {
+                    return false;
+                }
+
+                treeService.activateNote(suggestion.path);
+            });
+
+        noteAutocompleteService.showRecentNotes(this.$autoComplete);
+        this.$autoComplete.focus();
+    }
+
+    getContent() {}
+
+    focus() {}
+
+    onNoteChange() {}
+
+    cleanup() {}
+
+    scrollToTop() {}
+}
+
+export default NoteDetailEmpty;

src/public/javascripts/services/tab_row.js

@@ -244,9 +244,9 @@ class TabRow {
 
     async removeTab(tabEl) {
         if (tabEl === this.activeTabEl) {
-            if (tabEl.nextElementSibling) {
+            if (tabEl.nextElementSibling && tabEl.nextElementSibling.classList.contains("note-tab")) {
                 await this.setCurrentTab(tabEl.nextElementSibling)
-            } else if (tabEl.previousElementSibling) {
+            } else if (tabEl.previousElementSibling && tabEl.previousElementSibling.classList.contains("note-tab")) {
                 await this.setCurrentTab(tabEl.previousElementSibling)
             }
         }

src/public/stylesheets/style.css

@@ -835,4 +835,8 @@ a.external:after, a[href^="http://"]:after, a[href^="https://"]:after {
 .protected-session-password-component {
     width: 300px;
     margin: 30px auto auto;
+}
+
+.note-detail-empty {
+    margin: 50px;
 }

src/views/details/empty.ejs

@@ -0,0 +1,8 @@
+<div class="note-detail-empty note-detail-component">
+    <div class="form-group">
+        <label>Open note by typing note's title into input below or choose a note in the tree.</label>
+        <div class="input-group">
+            <input class="form-control note-autocomplete" placeholder="search for note by its name">
+        </div>
+    </div>
+</div>