From dd1fc23fe8aa2961ce579356e1976c4b16234612 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Tue, 14 May 2019 22:29:47 +0200
Subject: [PATCH] work on hash & history

---
 .../0134__create_openTabs_option.sql          |  2 +-
 src/public/javascripts/mobile.js              |  2 -
 src/public/javascripts/services/branches.js   |  4 -
 .../services/frontend_script_api.js           |  8 +-
 .../javascripts/services/note_detail.js       | 36 +++++++--
 .../javascripts/services/search_notes.js      |  2 +-
 .../javascripts/services/tab_context.js       | 41 ++++++++--
 src/public/javascripts/services/tab_row.js    | 20 ++---
 src/public/javascripts/services/tree.js       | 78 ++++++++++---------
 src/public/stylesheets/desktop.css            |  5 --
 src/public/stylesheets/style.css              |  2 +
 src/routes/api/recent_notes.js                |  1 -
 12 files changed, 123 insertions(+), 78 deletions(-)

diff --git a/db/migrations/0134__create_openTabs_option.sql b/db/migrations/0134__create_openTabs_option.sql
index 289e27a54..be75f1e0f 100644
--- a/db/migrations/0134__create_openTabs_option.sql
+++ b/db/migrations/0134__create_openTabs_option.sql
@@ -1,4 +1,4 @@
 INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
-    SELECT 'openTabs', '[{"notePath":"' || value || '","active": true}]', '2019-05-01T18:31:00.874Z', '2019-05-01T18:31:00.874Z', 0 FROM options WHERE name = 'startNotePath';
+    SELECT 'openTabs', '[{"notePath":"' || value || '","active": true,"tabId":"1111"}]', '2019-05-01T18:31:00.874Z', '2019-05-01T18:31:00.874Z', 0 FROM options WHERE name = 'startNotePath';
 
 DELETE FROM options WHERE name = 'startNotePath';
\ No newline at end of file
diff --git a/src/public/javascripts/mobile.js b/src/public/javascripts/mobile.js
index 575d4e90d..d6b2ba226 100644
--- a/src/public/javascripts/mobile.js
+++ b/src/public/javascripts/mobile.js
@@ -47,8 +47,6 @@ async function showTree() {
 
             treeService.clearSelectedNodes();
 
-            treeService.setCurrentNotePathToHash(node);
-
             showDetailPane();
 
             const notePath = await treeUtils.getNotePath(node);
diff --git a/src/public/javascripts/services/branches.js b/src/public/javascripts/services/branches.js
index 12e773134..1d4089c7b 100644
--- a/src/public/javascripts/services/branches.js
+++ b/src/public/javascripts/services/branches.js
@@ -103,8 +103,6 @@ async function deleteNodes(nodes) {
     if (next) {
         // activate next element after this one is deleted so we don't lose focus
         next.setActive();
-
-        treeService.setCurrentNotePathToHash(next);
     }
 
     await treeService.loadTreeCache();
@@ -163,8 +161,6 @@ async function changeNode(func, node, beforeNoteId = null, afterNoteId = null) {
 
     await treeCache.moveNote(childNoteId, thisOldParentNode.data.noteId, thisNewParentNode.data.noteId, beforeNoteId, afterNoteId);
 
-    treeService.setCurrentNotePathToHash(node);
-
     await treeService.checkFolderStatus(thisOldParentNode);
     await treeService.checkFolderStatus(thisNewParentNode);
 
diff --git a/src/public/javascripts/services/frontend_script_api.js b/src/public/javascripts/services/frontend_script_api.js
index 6b5a950b7..caca3c1e6 100644
--- a/src/public/javascripts/services/frontend_script_api.js
+++ b/src/public/javascripts/services/frontend_script_api.js
@@ -268,9 +268,13 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null) {
 
     /**
      * @method
-     * @returns {Promise<string>} returns note path of active note
+     * @returns {Promise<string|null>} returns note path of active note or null if there isn't active note
      */
-    this.getActiveNotePath = treeService.getActiveNotePath;
+    this.getActiveNotePath = () => {
+        const activeTabContext = noteDetailService.getActiveTabContext();
+
+        return activeTabContext ? activeTabContext.notePath : null;
+    };
 
     /**
      * This method checks whether user navigated away from the note from which the scripts has been started.
diff --git a/src/public/javascripts/services/note_detail.js b/src/public/javascripts/services/note_detail.js
index 9beaec6e9..ba2adb749 100644
--- a/src/public/javascripts/services/note_detail.js
+++ b/src/public/javascripts/services/note_detail.js
@@ -102,9 +102,27 @@ function getActiveTabContext() {
     return tabContexts.find(tc => tc.tabId === tabId);
 }
 
+function isActive(tabContext) {
+    return tabContext.$tab[0] === tabRow.activateTab;
+}
+
+async function activateTabContext(tabContext) {
+    await tabRow.activateTab(tabContext.$tab[0]);
+}
+
+/** @returns {TabContext} */
+function getTabContext(tabId) {
+    return tabContexts.find(tc => tc.tabId === tabId);
+}
+
 async function showTab(tabId) {
     for (const ctx of tabContexts) {
-        ctx.$tabContent.toggle(ctx.tabId === tabId);
+        if (ctx.tabId === tabId) {
+            ctx.show();
+        }
+        else {
+            ctx.hide();
+        }
     }
 
     const oldActiveNode = treeService.getActiveNode();
@@ -207,9 +225,9 @@ async function loadNoteDetail(origNotePath, options = {}) {
     const loadedNote = await loadNote(noteId);
     let ctx;
 
-    if (tabContexts.length === 0 || newTab) {
+    if (!getActiveTabContext() || newTab) {
         // if it's a new tab explicitly by user then it's in background
-        ctx = new TabContext(tabRow);
+        ctx = new TabContext(tabRow, options.tabId);
         tabContexts.push(ctx);
     }
     else {
@@ -229,7 +247,7 @@ async function loadNoteDetail(origNotePath, options = {}) {
 
     if (activate) {
         // will also trigger showTab via event
-        tabRow.setCurrentTab(ctx.$tab[0]);
+        await tabRow.activateTab(ctx.$tab[0]);
     }
 }
 
@@ -316,7 +334,7 @@ async function openEmptyTab() {
 
     await renderComponent(ctx);
 
-    await tabRow.setCurrentTab(ctx.tab);
+    await tabRow.activateTab(ctx.$tab[0]);
 }
 
 tabRow.addListener('newTab', openEmptyTab);
@@ -380,7 +398,7 @@ if (utils.isElectron()) {
         const nextTab = tabRow.nextTabEl;
 
         if (nextTab) {
-            tabRow.setCurrentTab(nextTab);
+            tabRow.activateTab(nextTab);
         }
     });
 
@@ -388,7 +406,7 @@ if (utils.isElectron()) {
         const prevTab = tabRow.previousTabEl;
 
         if (prevTab) {
-            tabRow.setCurrentTab(prevTab);
+            tabRow.activateTab(prevTab);
         }
     });
 }
@@ -424,6 +442,7 @@ async function saveOpenTabs() {
 
         if (tabContext && tabContext.notePath) {
             openTabs.push({
+                tabId: tabContext.tabId,
                 notePath: tabContext.notePath,
                 active: activeTabEl === tabEl
             });
@@ -457,8 +476,11 @@ export default {
     saveNotesIfChanged,
     onNoteChange,
     addDetailLoadedListener,
+    getTabContext,
     getTabContexts,
     getActiveTabContext,
+    isActive,
+    activateTabContext,
     getActiveComponent,
     clearOpenTabsTask,
     filterTabs
diff --git a/src/public/javascripts/services/search_notes.js b/src/public/javascripts/services/search_notes.js
index c8d726b9c..a9817a9c4 100644
--- a/src/public/javascripts/services/search_notes.js
+++ b/src/public/javascripts/services/search_notes.js
@@ -141,7 +141,7 @@ async function refreshSearch() {
 }
 
 function init() {
-    const hashValue = treeService.getHashValueFromAddress();
+    const hashValue = document.location.hash ? document.location.hash.substr(1) : ""; // strip initial #
 
     if (hashValue.startsWith("search=")) {
         showSearch();
diff --git a/src/public/javascripts/services/tab_context.js b/src/public/javascripts/services/tab_context.js
index 74406c6e9..9a40630a4 100644
--- a/src/public/javascripts/services/tab_context.js
+++ b/src/public/javascripts/services/tab_context.js
@@ -36,10 +36,10 @@ class TabContext {
     /**
      * @param {TabRow} tabRow
      */
-    constructor(tabRow) {
+    constructor(tabRow, tabId = null) {
         this.tabRow = tabRow;
-        this.$tab = $(this.tabRow.addTab());
-        this.tabId = this.$tab.attr('data-tab-id');
+        this.tabId = tabId || utils.randomString(4);
+        this.$tab = $(this.tabRow.addTab(this.tabId));
 
         this.$tabContent = $(".note-tab-content-template").clone();
         this.$tabContent.removeClass('note-tab-content-template');
@@ -96,9 +96,40 @@ class TabContext {
 
         this.setupClasses();
 
+        this.setCurrentNotePathToHash();
+
+        setTimeout(async () => {
+            // we include the note into recent list only if the user stayed on the note at least 5 seconds
+            if (notePath && notePath === await this.notePath) {
+                await server.post('recent-notes', { notePath });
+            }
+        }, 5000);
+
         console.log(`Switched tab ${this.tabId} to ${this.noteId}`);
     }
 
+    show() {
+        this.$tabContent.show();
+        this.setCurrentNotePathToHash();
+
+        document.title = "Trilium Notes";
+
+        if (this.note) {
+            // it helps navigating in history if note title is included in the title
+            document.title += " - " + this.note.title;
+        }
+    }
+
+    hide() {
+        this.$tabContent.hide();
+    }
+
+    setCurrentNotePathToHash() {
+        if (this.$tab[0] === this.tabRow.activeTabEl) {
+            document.location.hash = (this.notePath || "") + "-" + this.tabId;
+        }
+    }
+
     setupClasses() {
         for (const clazz of Array.from(this.$tab[0].classList)) { // create copy to safely iterate over while removing classes
             if (clazz !== 'note-tab') {
@@ -205,13 +236,11 @@ class TabContext {
 
         this.$childrenOverview.empty();
 
-        const notePath = await treeService.getActiveNotePath();
-
         for (const childBranch of await this.note.getChildBranches()) {
             const link = $('<a>', {
                 href: 'javascript:',
                 text: await treeUtils.getNoteTitle(childBranch.noteId, childBranch.parentNoteId)
-            }).attr('data-action', 'note').attr('data-note-path', notePath + '/' + childBranch.noteId);
+            }).attr('data-action', 'note').attr('data-note-path', this.notePath + '/' + childBranch.noteId);
 
             const childEl = $('<div class="child-overview-item">').html(link);
             this.$childrenOverview.append(childEl);
diff --git a/src/public/javascripts/services/tab_row.js b/src/public/javascripts/services/tab_row.js
index a2bec4e0b..eaa4e16d1 100644
--- a/src/public/javascripts/services/tab_row.js
+++ b/src/public/javascripts/services/tab_row.js
@@ -6,6 +6,7 @@
  */
 
 import optionsInit from './options_init.js';
+import utils from './utils.js';
 
 !function(i,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(t){return e(i,t)}):"object"==typeof module&&module.exports?module.exports=e(i,require("jquery")):i.jQueryBridget=e(i,i.jQuery)}(window,function(t,i){"use strict";var c=Array.prototype.slice,e=t.console,p=void 0===e?function(){}:function(t){e.error(t)};function n(d,o,u){(u=u||i||t.jQuery)&&(o.prototype.option||(o.prototype.option=function(t){u.isPlainObject(t)&&(this.options=u.extend(!0,this.options,t))}),u.fn[d]=function(t){if("string"==typeof t){var i=c.call(arguments,1);return s=i,a="$()."+d+'("'+(r=t)+'")',(e=this).each(function(t,i){var e=u.data(i,d);if(e){var n=e[r];if(n&&"_"!=r.charAt(0)){var o=n.apply(e,s);h=void 0===h?o:h}else p(a+" is not a valid method")}else p(d+" not initialized. Cannot call methods, i.e. "+a)}),void 0!==h?h:e}var e,r,s,h,a,n;return n=t,this.each(function(t,i){var e=u.data(i,d);e?(e.option(n),e._init()):(e=new o(i,n),u.data(i,d,e))}),this},r(u))}function r(t){!t||t&&t.bridget||(t.bridget=n)}return r(i||t.jQuery),n}),function(t,i){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return i()}):"object"==typeof module&&module.exports?module.exports=i():t.getSize=i()}(window,function(){"use strict";function m(t){var i=parseFloat(t);return-1==t.indexOf("%")&&!isNaN(i)&&i}var e="undefined"==typeof console?function(){}:function(t){console.error(t)},y=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],b=y.length;function E(t){var i=getComputedStyle(t);return i||e("Style returned "+i+". Are you running this code in a hidden iframe on Firefox? See http://bit.ly/getsizebug1"),i}var _,x=!1;function P(t){if(function(){if(!x){x=!0;var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(t);var e=E(t);P.isBoxSizeOuter=_=200==m(e.width),i.removeChild(t)}}(),"string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var i=E(t);if("none"==i.display)return function(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},i=0;i<b;i++)t[y[i]]=0;return t}();var e={};e.width=t.offsetWidth,e.height=t.offsetHeight;for(var n=e.isBorderBox="border-box"==i.boxSizing,o=0;o<b;o++){var r=y[o],s=i[r],h=parseFloat(s);e[r]=isNaN(h)?0:h}var a=e.paddingLeft+e.paddingRight,d=e.paddingTop+e.paddingBottom,u=e.marginLeft+e.marginRight,c=e.marginTop+e.marginBottom,p=e.borderLeftWidth+e.borderRightWidth,f=e.borderTopWidth+e.borderBottomWidth,g=n&&_,l=m(i.width);!1!==l&&(e.width=l+(g?0:a+p));var v=m(i.height);return!1!==v&&(e.height=v+(g?0:d+f)),e.innerWidth=e.width-(a+p),e.innerHeight=e.height-(d+f),e.outerWidth=e.width+u,e.outerHeight=e.height+c,e}}return P}),function(t,i){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",i):"object"==typeof module&&module.exports?module.exports=i():t.EvEmitter=i()}("undefined"!=typeof window?window:this,function(){function t(){}var i=t.prototype;return i.on=function(t,i){if(t&&i){var e=this._events=this._events||{},n=e[t]=e[t]||[];return-1==n.indexOf(i)&&n.push(i),this}},i.once=function(t,i){if(t&&i){this.on(t,i);var e=this._onceEvents=this._onceEvents||{};return(e[t]=e[t]||{})[i]=!0,this}},i.off=function(t,i){var e=this._events&&this._events[t];if(e&&e.length){var n=e.indexOf(i);return-1!=n&&e.splice(n,1),this}},i.emitEvent=function(t,i){var e=this._events&&this._events[t];if(e&&e.length){e=e.slice(0),i=i||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0;o<e.length;o++){var r=e[o];n&&n[r]&&(this.off(t,r),delete n[r]),r.apply(this,i)}return this}},i.allOff=function(){delete this._events,delete this._onceEvents},t}),function(i,e){"function"==typeof define&&define.amd?define("unipointer/unipointer",["ev-emitter/ev-emitter"],function(t){return e(i,t)}):"object"==typeof module&&module.exports?module.exports=e(i,require("ev-emitter")):i.Unipointer=e(i,i.EvEmitter)}(window,function(o,t){function i(){}var e=i.prototype=Object.create(t.prototype);e.bindStartEvent=function(t){this._bindStartEvent(t,!0)},e.unbindStartEvent=function(t){this._bindStartEvent(t,!1)},e._bindStartEvent=function(t,i){var e=(i=void 0===i||i)?"addEventListener":"removeEventListener",n="mousedown";o.PointerEvent?n="pointerdown":"ontouchstart"in o&&(n="touchstart"),t[e](n,this)},e.handleEvent=function(t){var i="on"+t.type;this[i]&&this[i](t)},e.getTouch=function(t){for(var i=0;i<t.length;i++){var e=t[i];if(e.identifier==this.pointerIdentifier)return e}},e.onmousedown=function(t){var i=t.button;i&&0!==i&&1!==i||this._pointerDown(t,t)},e.ontouchstart=function(t){this._pointerDown(t,t.changedTouches[0])},e.onpointerdown=function(t){this._pointerDown(t,t)},e._pointerDown=function(t,i){t.button||this.isPointerDown||(this.isPointerDown=!0,this.pointerIdentifier=void 0!==i.pointerId?i.pointerId:i.identifier,this.pointerDown(t,i))},e.pointerDown=function(t,i){this._bindPostStartEvents(t),this.emitEvent("pointerDown",[t,i])};var n={mousedown:["mousemove","mouseup"],touchstart:["touchmove","touchend","touchcancel"],pointerdown:["pointermove","pointerup","pointercancel"]};return e._bindPostStartEvents=function(t){if(t){var i=n[t.type];i.forEach(function(t){o.addEventListener(t,this)},this),this._boundPointerEvents=i}},e._unbindPostStartEvents=function(){this._boundPointerEvents&&(this._boundPointerEvents.forEach(function(t){o.removeEventListener(t,this)},this),delete this._boundPointerEvents)},e.onmousemove=function(t){this._pointerMove(t,t)},e.onpointermove=function(t){t.pointerId==this.pointerIdentifier&&this._pointerMove(t,t)},e.ontouchmove=function(t){var i=this.getTouch(t.changedTouches);i&&this._pointerMove(t,i)},e._pointerMove=function(t,i){this.pointerMove(t,i)},e.pointerMove=function(t,i){this.emitEvent("pointerMove",[t,i])},e.onmouseup=function(t){this._pointerUp(t,t)},e.onpointerup=function(t){t.pointerId==this.pointerIdentifier&&this._pointerUp(t,t)},e.ontouchend=function(t){var i=this.getTouch(t.changedTouches);i&&this._pointerUp(t,i)},e._pointerUp=function(t,i){this._pointerDone(),this.pointerUp(t,i)},e.pointerUp=function(t,i){this.emitEvent("pointerUp",[t,i])},e._pointerDone=function(){this._pointerReset(),this._unbindPostStartEvents(),this.pointerDone()},e._pointerReset=function(){this.isPointerDown=!1,delete this.pointerIdentifier},e.pointerDone=function(){},e.onpointercancel=function(t){t.pointerId==this.pointerIdentifier&&this._pointerCancel(t,t)},e.ontouchcancel=function(t){var i=this.getTouch(t.changedTouches);i&&this._pointerCancel(t,i)},e._pointerCancel=function(t,i){this._pointerDone(),this.pointerCancel(t,i)},e.pointerCancel=function(t,i){this.emitEvent("pointerCancel",[t,i])},i.getPointerPoint=function(t){return{x:t.pageX,y:t.pageY}},i}),function(i,e){"function"==typeof define&&define.amd?define("unidragger/unidragger",["unipointer/unipointer"],function(t){return e(i,t)}):"object"==typeof module&&module.exports?module.exports=e(i,require("unipointer")):i.Unidragger=e(i,i.Unipointer)}(window,function(r,t){function i(){}var e=i.prototype=Object.create(t.prototype);e.bindHandles=function(){this._bindHandles(!0)},e.unbindHandles=function(){this._bindHandles(!1)},e._bindHandles=function(t){for(var i=(t=void 0===t||t)?"addEventListener":"removeEventListener",e=t?this._touchActionValue:"",n=0;n<this.handles.length;n++){var o=this.handles[n];this._bindStartEvent(o,t),o[i]("click",this),r.PointerEvent&&(o.style.touchAction=e)}},e._touchActionValue="none",e.pointerDown=function(t,i){this.okayPointerDown(t)&&(this.pointerDownPointer=i,t.preventDefault(),this.pointerDownBlur(),this._bindPostStartEvents(t),this.emitEvent("pointerDown",[t,i]))};var o={TEXTAREA:!0,INPUT:!0,SELECT:!0,OPTION:!0},s={radio:!0,checkbox:!0,button:!0,submit:!0,image:!0,file:!0};return e.okayPointerDown=function(t){var i=o[t.target.nodeName],e=s[t.target.type],n=!i||e;return n||this._pointerReset(),n},e.pointerDownBlur=function(){var t=document.activeElement;t&&t.blur&&t!=document.body&&t.blur()},e.pointerMove=function(t,i){var e=this._dragPointerMove(t,i);this.emitEvent("pointerMove",[t,i,e]),this._dragMove(t,i,e)},e._dragPointerMove=function(t,i){var e={x:i.pageX-this.pointerDownPointer.pageX,y:i.pageY-this.pointerDownPointer.pageY};return!this.isDragging&&this.hasDragStarted(e)&&this._dragStart(t,i),e},e.hasDragStarted=function(t){return 3<Math.abs(t.x)||3<Math.abs(t.y)},e.pointerUp=function(t,i){this.emitEvent("pointerUp",[t,i]),this._dragPointerUp(t,i)},e._dragPointerUp=function(t,i){this.isDragging?this._dragEnd(t,i):this._staticClick(t,i)},e._dragStart=function(t,i){this.isDragging=!0,this.isPreventingClicks=!0,this.dragStart(t,i)},e.dragStart=function(t,i){this.emitEvent("dragStart",[t,i])},e._dragMove=function(t,i,e){this.isDragging&&this.dragMove(t,i,e)},e.dragMove=function(t,i,e){t.preventDefault(),this.emitEvent("dragMove",[t,i,e])},e._dragEnd=function(t,i){this.isDragging=!1,setTimeout(function(){delete this.isPreventingClicks}.bind(this)),this.dragEnd(t,i)},e.dragEnd=function(t,i){this.emitEvent("dragEnd",[t,i])},e.onclick=function(t){this.isPreventingClicks&&t.preventDefault()},e._staticClick=function(t,i){this.isIgnoringMouseUp&&"mouseup"==t.type||(this.staticClick(t,i),"mouseup"!=t.type&&(this.isIgnoringMouseUp=!0,setTimeout(function(){delete this.isIgnoringMouseUp}.bind(this),400)))},e.staticClick=function(t,i){this.emitEvent("staticClick",[t,i])},i.getPointerPoint=t.getPointerPoint,i}),function(e,n){"function"==typeof define&&define.amd?define(["get-size/get-size","unidragger/unidragger"],function(t,i){return n(e,t,i)}):"object"==typeof module&&module.exports?module.exports=n(e,require("get-size"),require("unidragger")):e.Draggabilly=n(e,e.getSize,e.Unidragger)}(window,function(r,a,t){function e(t,i){for(var e in i)t[e]=i[e];return t}var n=r.jQuery;function i(t,i){this.element="string"==typeof t?document.querySelector(t):t,n&&(this.$element=n(this.element)),this.options=e({},this.constructor.defaults),this.option(i),this._create()}var o=i.prototype=Object.create(t.prototype);i.defaults={},o.option=function(t){e(this.options,t)};var s={relative:!0,absolute:!0,fixed:!0};function d(t,i,e){return e=e||"round",i?Math[e](t/i)*i:t}return o._create=function(){this.position={},this._getPosition(),this.startPoint={x:0,y:0},this.dragPoint={x:0,y:0},this.startPosition=e({},this.position);var t=getComputedStyle(this.element);s[t.position]||(this.element.style.position="relative"),this.on("pointerDown",this.onPointerDown),this.on("pointerMove",this.onPointerMove),this.on("pointerUp",this.onPointerUp),this.enable(),this.setHandles()},o.setHandles=function(){this.handles=this.options.handle?this.element.querySelectorAll(this.options.handle):[this.element],this.bindHandles()},o.dispatchEvent=function(t,i,e){var n=[i].concat(e);this.emitEvent(t,n),this.dispatchJQueryEvent(t,i,e)},o.dispatchJQueryEvent=function(t,i,e){var n=r.jQuery;if(n&&this.$element){var o=n.Event(i);o.type=t,this.$element.trigger(o,e)}},o._getPosition=function(){var t=getComputedStyle(this.element),i=this._getPositionCoord(t.left,"width"),e=this._getPositionCoord(t.top,"height");this.position.x=isNaN(i)?0:i,this.position.y=isNaN(e)?0:e,this._addTransformPosition(t)},o._getPositionCoord=function(t,i){if(-1!=t.indexOf("%")){var e=a(this.element.parentNode);return e?parseFloat(t)/100*e[i]:0}return parseInt(t,10)},o._addTransformPosition=function(t){var i=t.transform;if(0===i.indexOf("matrix")){var e=i.split(","),n=0===i.indexOf("matrix3d")?12:4,o=parseInt(e[n],10),r=parseInt(e[n+1],10);this.position.x+=o,this.position.y+=r}},o.onPointerDown=function(t,i){this.element.classList.add("is-pointer-down"),this.dispatchJQueryEvent("pointerDown",t,[i])},o.dragStart=function(t,i){this.isEnabled&&(this._getPosition(),this.measureContainment(),this.startPosition.x=this.position.x,this.startPosition.y=this.position.y,this.setLeftTop(),this.dragPoint.x=0,this.dragPoint.y=0,this.element.classList.add("is-dragging"),this.dispatchEvent("dragStart",t,[i]),this.animate())},o.measureContainment=function(){var t=this.getContainer();if(t){var i=a(this.element),e=a(t),n=this.element.getBoundingClientRect(),o=t.getBoundingClientRect(),r=e.borderLeftWidth+e.borderRightWidth,s=e.borderTopWidth+e.borderBottomWidth,h=this.relativeStartPosition={x:n.left-(o.left+e.borderLeftWidth),y:n.top-(o.top+e.borderTopWidth)};this.containSize={width:e.width-r-h.x-i.width,height:e.height-s-h.y-i.height}}},o.getContainer=function(){var t=this.options.containment;if(t)return t instanceof HTMLElement?t:"string"==typeof t?document.querySelector(t):this.element.parentNode},o.onPointerMove=function(t,i,e){this.dispatchJQueryEvent("pointerMove",t,[i,e])},o.dragMove=function(t,i,e){if(this.isEnabled){var n=e.x,o=e.y,r=this.options.grid,s=r&&r[0],h=r&&r[1];n=d(n,s),o=d(o,h),n=this.containDrag("x",n,s),o=this.containDrag("y",o,h),n="y"==this.options.axis?0:n,o="x"==this.options.axis?0:o,this.position.x=this.startPosition.x+n,this.position.y=this.startPosition.y+o,this.dragPoint.x=n,this.dragPoint.y=o,this.dispatchEvent("dragMove",t,[i,e])}},o.containDrag=function(t,i,e){if(!this.options.containment)return i;var n="x"==t?"width":"height",o=d(-this.relativeStartPosition[t],e,"ceil"),r=this.containSize[n];return r=d(r,e,"floor"),Math.max(o,Math.min(r,i))},o.onPointerUp=function(t,i){this.element.classList.remove("is-pointer-down"),this.dispatchJQueryEvent("pointerUp",t,[i])},o.dragEnd=function(t,i){this.isEnabled&&(this.element.style.transform="",this.setLeftTop(),this.element.classList.remove("is-dragging"),this.dispatchEvent("dragEnd",t,[i]))},o.animate=function(){if(this.isDragging){this.positionDrag();var t=this;requestAnimationFrame(function(){t.animate()})}},o.setLeftTop=function(){this.element.style.left=this.position.x+"px",this.element.style.top=this.position.y+"px"},o.positionDrag=function(){this.element.style.transform="translate3d( "+this.dragPoint.x+"px, "+this.dragPoint.y+"px, 0)"},o.staticClick=function(t,i){this.dispatchEvent("staticClick",t,[i])},o.setPosition=function(t,i){this.position.x=t,this.position.y=i,this.setLeftTop()},o.enable=function(){this.isEnabled=!0},o.disable=function(){this.isEnabled=!1,this.isDragging&&this.dragEnd()},o.destroy=function(){this.disable(),this.element.style.transform="",this.element.style.left="",this.element.style.top="",this.element.style.position="",this.unbindHandles(),this.$element&&this.$element.removeData("draggabilly")},o._init=function(){},n&&n.bridget&&n.bridget("draggabilly",i),i});
 
@@ -30,10 +31,6 @@ const tabTemplate = `
 
 const newTabButtonTemplate = `<div class="note-new-tab" title="Add new tab">+</div>`;
 
-const defaultTapProperties = {
-    title: 'New tab'
-};
-
 class TabRow {
     constructor(el) {
         this.draggabillies = [];
@@ -158,20 +155,19 @@ class TabRow {
         this.styleEl.innerHTML = styleHTML;
     }
 
-    addTab(tabProperties) {
+    addTab(tabId) {
         const div = document.createElement('div');
         div.innerHTML = tabTemplate;
         const tabEl = div.firstElementChild;
-        tabEl.setAttribute('data-tab-id', "t" + this.tabIdCounter++);
+        tabEl.setAttribute('data-tab-id', tabId);
 
         tabEl.classList.add('note-tab-was-just-added');
         setTimeout(() => tabEl.classList.remove('note-tab-was-just-added'), 500);
 
-        tabProperties = Object.assign({}, defaultTapProperties, tabProperties);
         this.newTabEl.before(tabEl);
         this.setVisibility();
         this.setTabCloseEventListener(tabEl);
-        this.updateTab(tabEl, tabProperties);
+        this.updateTab(tabEl, {title: 'New tab'});
         this.cleanUpPreviouslyDraggedTabs();
         this.layoutTabs();
         this.setupDraggabilly();
@@ -231,7 +227,7 @@ class TabRow {
         return !!this.activeTabEl;
     }
 
-    async setCurrentTab(tabEl) {
+    async activateTab(tabEl) {
         const activeTabEl = this.activeTabEl;
         if (activeTabEl === tabEl) return;
         if (activeTabEl) activeTabEl.removeAttribute('active');
@@ -242,9 +238,9 @@ class TabRow {
     async removeTab(tabEl) {
         if (tabEl === this.activeTabEl) {
             if (tabEl.nextElementSibling && tabEl.nextElementSibling.classList.contains("note-tab")) {
-                await this.setCurrentTab(tabEl.nextElementSibling)
+                await this.activateTab(tabEl.nextElementSibling)
             } else if (tabEl.previousElementSibling && tabEl.previousElementSibling.classList.contains("note-tab")) {
-                await this.setCurrentTab(tabEl.previousElementSibling)
+                await this.activateTab(tabEl.previousElementSibling)
             }
         }
         tabEl.parentNode.removeChild(tabEl);
@@ -300,7 +296,7 @@ class TabRow {
             this.draggabillies.push(draggabilly);
 
             draggabilly.on('pointerDown', _ => {
-                this.setCurrentTab(tabEl)
+                this.activateTab(tabEl)
             });
 
             draggabilly.on('dragStart', _ => {
diff --git a/src/public/javascripts/services/tree.js b/src/public/javascripts/services/tree.js
index ea8d04fc1..35c5a0a6c 100644
--- a/src/public/javascripts/services/tree.js
+++ b/src/public/javascripts/services/tree.js
@@ -38,10 +38,6 @@ function getActiveNode() {
     return $tree.fancytree("getActiveNode");
 }
 
-async function getActiveNotePath() {
-    return getHashValueFromAddress();
-}
-
 async function getNodesByBranchId(branchId) {
     utils.assertArguments(branchId);
 
@@ -135,6 +131,12 @@ async function activateNote(notePath, noteLoadedListener) {
     // notePath argument can contain only noteId which is not good when hoisted since
     // then we need to check the whole note path
     const runNotePath = await getRunPath(notePath);
+
+    if (!runNotePath) {
+        console.log("Cannot activate " + notePath);
+        return;
+    }
+
     const hoistedNoteId = await hoistedNoteService.getHoistedNoteId();
 
     if (hoistedNoteId !== 'root' && !runNotePath.includes(hoistedNoteId)) {
@@ -172,7 +174,7 @@ async function activateNote(notePath, noteLoadedListener) {
 async function resolveNotePath(notePath) {
     const runPath = await getRunPath(notePath);
 
-    return runPath.join("/");
+    return runPath ? runPath.join("/") : null;
 }
 
 /**
@@ -205,7 +207,8 @@ async function getRunPath(notePath) {
             const child = await treeCache.getNote(childNoteId);
 
             if (!child) {
-                console.log("Can't find " + childNoteId);
+                console.log("Can't find note " + childNoteId);
+                return;
             }
 
             const parents = await child.getParentNotes();
@@ -331,26 +334,6 @@ async function setExpandedToServer(branchId, isExpanded) {
     await server.put('branches/' + branchId + '/expanded/' + expandedNum);
 }
 
-function addRecentNote(branchId, notePath) {
-    setTimeout(async () => {
-        // we include the note into recent list only if the user stayed on the note at least 5 seconds
-        if (notePath && notePath === await getActiveNotePath()) {
-            await server.post('recent-notes', { branchId, notePath });
-        }
-    }, 1500);
-}
-
-async function setCurrentNotePathToHash(node) {
-    utils.assertArguments(node);
-
-    const activeNotePath = await treeUtils.getNotePath(node);
-    const currentBranchId = node.data.branchId;
-
-    document.location.hash = activeNotePath;
-
-    addRecentNote(currentBranchId, activeNotePath);
-}
-
 function getSelectedNodes(stopOnParents = false) {
     return getTree().getSelectedNodes(stopOnParents);
 }
@@ -402,8 +385,13 @@ async function treeInitialized() {
         });
     }
 
+    if (!filteredTabs.find(tab => tab.active)) {
+        filteredTabs[0].active = true;
+    }
+
     for (const tab of filteredTabs) {
         await noteDetailService.loadNoteDetail(tab.notePath, {
+            tabId: tab.tabId,
             newTab: true,
             activate: tab.active
         });
@@ -465,8 +453,6 @@ function initFancyTree(tree) {
             // click event won't propagate so let's close context menu manually
             contextMenuWidget.hideContextMenu();
 
-            await setCurrentNotePathToHash(node);
-
             const notePath = await treeUtils.getNotePath(node);
 
             noteDetailService.switchToNote(notePath);
@@ -554,11 +540,17 @@ async function reload() {
 }
 
 function isNotePathInAddress() {
-    return getHashValueFromAddress().startsWith("root");
+    const [notePath, tabId] = getHashValueFromAddress();
+
+    return notePath.startsWith("root")
+        // empty string is for empty/uninitialized tab
+        || (notePath === '' && !!tabId);
 }
 
 function getHashValueFromAddress() {
-    return document.location.hash ? document.location.hash.substr(1) : ""; // strip initial #
+    const str = document.location.hash ? document.location.hash.substr(1) : ""; // strip initial #
+
+    return str.split("-");
 }
 
 async function loadTreeCache() {
@@ -835,13 +827,27 @@ utils.bindShortcut('ctrl+.', scrollToActiveNote);
 
 $(window).bind('hashchange', async function() {
     if (isNotePathInAddress()) {
-        const notePath = getHashValueFromAddress();
-        const noteId = notePath.split("/").pop();
+        const [notePath, tabId] = getHashValueFromAddress();
 
-        if (noteId !== '-' && noteId !== getActiveNode().data.noteId) {
-            console.debug("Switching to " + notePath + " because of hash change");
+        console.debug(`Switching to ${notePath} on tab ${tabId} because of hash change`);
 
-            activateNote(notePath);
+        let tabContext = noteDetailService.getTabContext(tabId);
+
+        if (!tabContext) {
+            noteDetailService.loadNoteDetail(notePath, {
+                newTab: true,
+                tabId: tabId,
+                activate: true
+            });
+        }
+        else {
+            if (!noteDetailService.isActive(tabContext)) {
+                noteDetailService.activateTabContext(tabContext);
+            }
+
+            if (notePath && tabContext.notePath !== notePath) {
+                noteDetailService.loadNoteDetail(notePath);
+            }
         }
     }
 });
@@ -860,8 +866,6 @@ export default {
     activateNote,
     getFocusedNode,
     getActiveNode,
-    getActiveNotePath,
-    setCurrentNotePathToHash,
     setNoteTitle,
     setPrefix,
     createNote,
diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css
index 69892935d..ca9d4bb5a 100644
--- a/src/public/stylesheets/desktop.css
+++ b/src/public/stylesheets/desktop.css
@@ -134,11 +134,6 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
     border-style: solid;
 }
 
-.note-tab-content {
-    font-family: var(--detail-font-family);
-    font-size: var(--detail-font-size);
-}
-
 ::-webkit-scrollbar {
     width: 12px;
 }
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 63b2c4ca3..2200206df 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -118,6 +118,8 @@ ul.fancytree-container {
     flex-direction: column;
     min-height: 200px;
     word-break: break-all; /* otherwise CKEditor fails miserably on super long lines */
+    font-family: var(--detail-font-family);
+    font-size: var(--detail-font-size);
 }
 
 .note-detail-component {
diff --git a/src/routes/api/recent_notes.js b/src/routes/api/recent_notes.js
index 375eb4f2f..280dadbad 100644
--- a/src/routes/api/recent_notes.js
+++ b/src/routes/api/recent_notes.js
@@ -1,6 +1,5 @@
 "use strict";
 
-const optionService = require('../../services/options');
 const RecentNote = require('../../entities/recent_note');
 
 async function addRecentNote(req) {