diff --git a/src/public/javascripts/services/note_autocomplete.js b/src/public/javascripts/services/note_autocomplete.js
index 231300601..25f87ffa9 100644
--- a/src/public/javascripts/services/note_autocomplete.js
+++ b/src/public/javascripts/services/note_autocomplete.js
@@ -1,5 +1,5 @@
 import server from "./server.js";
-import noteDetailService from "./note_detail.js";
+import appContext from "./app_context.js";
 import utils from './utils.js';
 
 // this key needs to have this value so it's hit by the tooltip
diff --git a/src/public/javascripts/widgets/note_detail.js b/src/public/javascripts/widgets/note_detail.js
index 12e457e31..959dc9851 100644
--- a/src/public/javascripts/widgets/note_detail.js
+++ b/src/public/javascripts/widgets/note_detail.js
@@ -17,7 +17,7 @@ const TPL = `
 `;
 
 const typeWidgetClasses = {
-    'empty': "./type_widgets/note_detail_empty.js",
+    'empty': "./type_widgets/empty.js",
     'text': "./type_widgets/text.js",
     'code': "./type_widgets/code.js",
     'file': "./type_widgets/file.js",
@@ -65,19 +65,21 @@ export default class NoteDetailWidget extends TabAwareWidget {
     }
 
     setupClasses() {
-        const note = this.tabContext.note;
-
         for (const clazz of Array.from(this.$widget[0].classList)) { // create copy to safely iterate over while removing classes
             if (clazz !== 'note-detail') {
                 this.$widget.removeClass(clazz);
             }
         }
 
-        this.$widget.addClass(note.cssClass);
-        this.$widget.addClass(utils.getNoteTypeClass(note.type));
-        this.$widget.addClass(utils.getMimeTypeClass(note.mime));
+        const note = this.tabContext.note;
 
-        this.$widget.toggleClass("protected", note.isProtected);
+        if (note) {
+            this.$widget.addClass(note.cssClass);
+            this.$widget.addClass(utils.getNoteTypeClass(note.type));
+            this.$widget.addClass(utils.getMimeTypeClass(note.mime));
+
+            this.$widget.toggleClass("protected", note.isProtected);
+        }
     }
 
     getTypeWidget() {
diff --git a/src/public/javascripts/widgets/note_title.js b/src/public/javascripts/widgets/note_title.js
index b8d3c8b49..3ba0f53b4 100644
--- a/src/public/javascripts/widgets/note_title.js
+++ b/src/public/javascripts/widgets/note_title.js
@@ -133,6 +133,14 @@ export default class NoteTitleWidget extends TabAwareWidget {
     async refresh() {
         const note = this.tabContext.note;
 
+        if (!note) {
+            this.toggle(false);
+            return;
+        }
+        else {
+            this.toggle(true);
+        }
+
         this.$noteTitle.val(note.title);
 
         if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
diff --git a/src/public/javascripts/widgets/promoted_attributes.js b/src/public/javascripts/widgets/promoted_attributes.js
index 6ab045ac7..0a054472a 100644
--- a/src/public/javascripts/widgets/promoted_attributes.js
+++ b/src/public/javascripts/widgets/promoted_attributes.js
@@ -38,6 +38,11 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
     async refresh() {
         this.$container.empty();
 
+        if (!this.tabContext.note) {
+            this.toggle(false);
+            return;
+        }
+
         const attributes = await this.tabContext.attributes.getAttributes();
 
         const promoted = attributes.filter(attr =>
@@ -79,10 +84,10 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
             // we replace the whole content in one step so there can't be any race conditions
             // (previously we saw promoted attributes doubling)
             this.$container.empty().append($tbody);
-            this.$widget.show();
+            this.toggle(true);
         }
         else {
-            this.$widget.hide();
+            this.toggle(false);
         }
 
         return attributes;
diff --git a/src/public/javascripts/widgets/type_widgets/empty.js b/src/public/javascripts/widgets/type_widgets/empty.js
new file mode 100644
index 000000000..65bbc1f5d
--- /dev/null
+++ b/src/public/javascripts/widgets/type_widgets/empty.js
@@ -0,0 +1,61 @@
+import noteAutocompleteService from '../../services/note_autocomplete.js';
+import treeService from "../../services/tree.js";
+import TypeWidget from "./type_widget.js";
+
+const TPL = `
+<div class="note-detail-empty note-detail-printable">
+    <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>`;
+
+class NoteDetailEmpty extends TypeWidget {
+    static getType() { return "empty"; }
+
+    doRender() {
+        // FIXME: this might be optimized - cleaned up after use since it's always used only for new tab
+
+        this.$widget = $(TPL);
+        this.$autoComplete = this.$widget.find(".note-autocomplete");
+
+        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.trigger('focus');
+
+        return this.$widget;
+    }
+
+    refresh() {
+        if (this.tabContext.note) {
+            this.toggle(false);
+            return;
+        }
+
+        this.toggle(true);
+    }
+
+    show() {}
+
+    getContent() {}
+
+    focus() {}
+
+    onNoteChange() {}
+
+    cleanup() {}
+
+    scrollToTop() {}
+}
+
+export default NoteDetailEmpty;
\ No newline at end of file
diff --git a/src/public/javascripts/widgets/type_widgets/note_detail_empty.js b/src/public/javascripts/widgets/type_widgets/note_detail_empty.js
deleted file mode 100644
index 8ad1ebdb6..000000000
--- a/src/public/javascripts/widgets/type_widgets/note_detail_empty.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import noteAutocompleteService from '../../services/note_autocomplete.js';
-import treeService from "../../services/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.trigger('focus');
-    }
-
-    show() {}
-
-    getContent() {}
-
-    focus() {}
-
-    onNoteChange() {}
-
-    cleanup() {}
-
-    scrollToTop() {}
-}
-
-export default NoteDetailEmpty;
\ No newline at end of file
diff --git a/src/views/details/empty.ejs b/src/views/details/empty.ejs
deleted file mode 100644
index a96ad1639..000000000
--- a/src/views/details/empty.ejs
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="note-detail-empty note-detail-printable">
-    <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>
\ No newline at end of file