release 0.27.4

Fixes evernote import errors

.gitpod.yml

@@ -0,0 +1,7 @@
+tasks:
+    - before: nvm install 10 && nvm use 10
+      init: npm install
+      command: npm run start
+ports:
+    - port: 8080
+      onOpen: open-preview

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10.14.0-alpine
+FROM node:10.15.0-alpine
 
 # Create app directory
 WORKDIR /usr/src/app
@@ -17,6 +17,7 @@ RUN set -x \
         libtool \
         make \
         nasm \
+        libpng-dev \
     && npm install --production \
     && apk del .build-dependencies
 

README.md

@@ -1,7 +1,7 @@
 # Trilium Notes
 
 [![Join the chat at https://gitter.im/trilium-notes/Lobby](https://badges.gitter.im/trilium-notes/Lobby.svg)](https://gitter.im/trilium-notes/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-Trilium Notes is a hierarchical note taking application with focus on building large personal knowledge bases. See [screenshots](https://github.com/zadam/trilium/wiki/Screenshot-tour) for quick overview: 
+Trilium Notes is a hierarchical note taking application with focus on building large personal knowledge bases. See [screenshots](https://github.com/zadam/trilium/wiki/Screenshot-tour) for quick overview:
 
 ![](https://raw.githubusercontent.com/wiki/zadam/trilium/images/screenshot.png)
 
@@ -18,6 +18,7 @@ Trilium Notes is a hierarchical note taking application with focus on building l
 * [Relation maps](https://github.com/zadam/trilium/wiki/Relation-map) for visualizing notes and their relations
 * [Scripting](https://github.com/zadam/trilium/wiki/Scripts) - see [Advanced showcases](https://github.com/zadam/trilium/wiki/Advanced-showcases)
 * Scales well in both usability and performance upwards of 100 000 notes
+* Touch optimized [mobile frontend](https://github.com/zadam/trilium/wiki/Mobile-frontend) for smartphones and tablets
 * [Night theme](https://github.com/zadam/trilium/wiki/Themes)
 * [Evernote](https://github.com/zadam/trilium/wiki/Evernote-import) and [Markdown import & export](https://github.com/zadam/trilium/wiki/Markdown)
 
@@ -33,4 +34,16 @@ Trilium is provided as either desktop application (Linux, Windows, Mac) or web a
 
 [See wiki for complete list of documentation pages.](https://github.com/zadam/trilium/wiki/)
 
-You can also read [Patterns of personal knowledge base](https://github.com/zadam/trilium/wiki/Patterns-of-personal-knowledge-base) to get some inspiration on how you might use Trilium.
+You can also read [Patterns of personal knowledge base](https://github.com/zadam/trilium/wiki/Patterns-of-personal-knowledge-base) to get some inspiration on how you might use Trilium.
+
+## Contribute
+
+Use a browser based dev environment
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/zadam/trilium)
+
+Or clone locally and run
+```
+npm install
+npm run start
+```

bin/build-server.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 PKG_DIR=dist/trilium-linux-x64-server
-NODE_VERSION=10.14.1
+NODE_VERSION=10.15.0
 
 rm -r $PKG_DIR
 mkdir $PKG_DIR

docs/backend_api/BackendScriptApi.html

@@ -3010,7 +3010,7 @@ the backend.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_backend_script_api.js.html">services/backend_script_api.js</a>, <a href="services_backend_script_api.js.html#line234">line 234</a>
+        <a href="services_backend_script_api.js.html">services/backend_script_api.js</a>, <a href="services_backend_script_api.js.html#line236">line 236</a>
     </li></ul></dd>
     
 

docs/backend_api/entities_attribute.js.html

@@ -133,6 +133,11 @@ class Attribute extends Entity {
             this.dateModified = dateUtils.nowDate();
         }
     }
+
+    // cannot be static!
+    updatePojo(pojo) {
+        delete pojo.isOwned;
+    }
 }
 
 module.exports = Attribute;</code></pre>

docs/backend_api/entities_branch.js.html

@@ -87,6 +87,11 @@ class Branch extends Entity {
             this.dateModified = dateUtils.nowDate();
         }
     }
+
+    // cannot be static!
+    updatePojo(pojo) {
+        delete pojo.origParentNoteId;
+    }
 }
 
 module.exports = Branch;</code></pre>

docs/backend_api/entities_note.js.html

@@ -32,6 +32,7 @@ const Entity = require('./entity');
 const Attribute = require('./attribute');
 const protectedSessionService = require('../services/protected_session');
 const repository = require('../services/repository');
+const sql = require('../services/sql');
 const dateUtils = require('../services/date_utils');
 
 const LABEL = 'label';
@@ -102,7 +103,9 @@ class Note extends Entity {
     /** @returns {boolean} true if this note is JavaScript (code or attachment) */
     isJavaScript() {
         return (this.type === "code" || this.type === "file")
-            && (this.mime.startsWith("application/javascript") || this.mime === "application/x-javascript");
+            && (this.mime.startsWith("application/javascript")
+                || this.mime === "application/x-javascript"
+                || this.mime === "text/javascript");
     }
 
     /** @returns {boolean} true if this note is HTML */
@@ -394,6 +397,16 @@ class Note extends Entity {
      */
     async getRelationValue(name) { return await this.getAttributeValue(RELATION, name); }
 
+    /**
+     * @param {string} name
+     * @returns {Promise<Note>|null} target note of the relation or null (if target is empty or note was not found)
+     */
+    async getRelationTarget(name) {
+        const relation = await this.getRelation(name);
+
+        return relation ? await repository.getNote(relation.value) : null;
+    }
+
     /**
      * Based on enabled, label is either set or removed.
      *
@@ -451,24 +464,32 @@ class Note extends Entity {
     async removeRelation(name, value) { return await this.removeAttribute(RELATION, name, value); }
 
     /**
-     * @param {string} name
-     * @returns {Promise<Note>|null} target note of the relation or null (if target is empty or note was not found)
+     * @return {Promise<string[]>} return list of all descendant noteIds of this note. Returning just noteIds because number of notes can be huge. Includes also this note's noteId
      */
-    async getRelationTarget(name) {
-        const relation = await this.getRelation(name);
-
-        return relation ? await repository.getNote(relation.value) : null;
+    async getDescendantNoteIds() {
+        return await sql.getColumn(`
+            WITH RECURSIVE
+            tree(noteId) AS (
+                SELECT ?
+                UNION
+                SELECT branches.noteId FROM branches
+                    JOIN tree ON branches.parentNoteId = tree.noteId
+                    JOIN notes ON notes.noteId = branches.noteId
+                WHERE notes.isDeleted = 0
+                  AND branches.isDeleted = 0
+            )
+            SELECT noteId FROM tree`, [this.noteId]);
     }
 
     /**
-     * Finds child notes with given attribute name and value. Only own attributes are considered, not inherited ones
+     * Finds descendant notes with given attribute name and value. Only own attributes are considered, not inherited ones
      *
      * @param {string} type - attribute type (label, relation, etc.)
      * @param {string} name - attribute name
      * @param {string} [value] - attribute value
      * @returns {Promise<Note[]>}
      */
-    async findChildNotesWithAttribute(type, name, value) {
+    async getDescendantNotesWithAttribute(type, name, value) {
         const params = [this.noteId, name];
         let valueCondition = "";
 
@@ -500,22 +521,22 @@ class Note extends Entity {
     }
 
     /**
-     * Finds notes with given label name and value. Only own labels are considered, not inherited ones
+     * Finds descendant notes with given label name and value. Only own labels are considered, not inherited ones
      *
      * @param {string} name - label name
      * @param {string} [value] - label value
      * @returns {Promise<Note[]>}
      */
-    async findChildNotesWithLabel(name, value) { return await this.findChildNotesWithAttribute(LABEL, name, value); }
+    async getDescendantNotesWithLabel(name, value) { return await this.getDescendantNotesWithAttribute(LABEL, name, value); }
 
     /**
-     * Finds notes with given relation name and value. Only own relations are considered, not inherited ones
+     * Finds descendant notes with given relation name and value. Only own relations are considered, not inherited ones
      *
      * @param {string} name - relation name
      * @param {string} [value] - relation value
      * @returns {Promise<Note[]>}
      */
-    async findChildNotesWithRelation(name, value) { return await this.findChildNotesWithAttribute(RELATION, name, value); }
+    async getDescendantNotesWithRelation(name, value) { return await this.getDescendantNotesWithAttribute(RELATION, name, value); }
 
     /**
      * Returns note revisions of this note.
@@ -615,10 +636,6 @@ class Note extends Entity {
         // we do this here because encryption needs the note ID for the IV
         this.generateIdIfNecessary();
 
-        if (this.isProtected) {
-            protectedSessionService.encryptNote(this);
-        }
-
         if (!this.isDeleted) {
             this.isDeleted = false;
         }
@@ -633,6 +650,17 @@ class Note extends Entity {
             this.dateModified = dateUtils.nowDate();
         }
     }
+
+    // cannot be static!
+    updatePojo(pojo) {
+        if (pojo.isProtected) {
+            protectedSessionService.encryptNote(pojo);
+        }
+
+        delete pojo.jsonContent;
+        delete pojo.isContentAvailable;
+        delete pojo.__attributeCache;
+    }
 }
 
 module.exports = Note;</code></pre>

docs/backend_api/services_backend_script_api.js.html

@@ -253,6 +253,8 @@ function BackendScriptApi(startNote, currentNote, originEntity) {
      */
     this.transactional = sql.transactional;
 
+    this.sql = sql;
+
     /**
      * Trigger tree refresh in all connected clients. This is required when some tree change happens in
      * the backend.

docs/frontend_api/FrontendScriptApi.html

@@ -81,7 +81,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line16">line 16</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line17">line 17</a>
     </li></ul></dd>
     
 
@@ -221,7 +221,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line22">line 22</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line23">line 23</a>
     </li></ul></dd>
     
 
@@ -334,7 +334,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line24">line 24</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line25">line 25</a>
     </li></ul></dd>
     
 
@@ -444,7 +444,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line20">line 20</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line21">line 21</a>
     </li></ul></dd>
     
 
@@ -573,7 +573,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line41">line 41</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line42">line 42</a>
     </li></ul></dd>
     
 
@@ -726,7 +726,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line33">line 33</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line34">line 34</a>
     </li></ul></dd>
     
 
@@ -879,7 +879,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line60">line 60</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line61">line 61</a>
     </li></ul></dd>
     
 
@@ -1057,7 +1057,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line197">line 197</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line198">line 198</a>
     </li></ul></dd>
     
 
@@ -1188,7 +1188,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line157">line 157</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line158">line 158</a>
     </li></ul></dd>
     
 
@@ -1292,7 +1292,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line221">line 221</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line222">line 222</a>
     </li></ul></dd>
     
 
@@ -1396,7 +1396,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line203">line 203</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line204">line 204</a>
     </li></ul></dd>
     
 
@@ -1500,7 +1500,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line215">line 215</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line216">line 216</a>
     </li></ul></dd>
     
 
@@ -1609,7 +1609,7 @@ if some action needs to happen on only one specific instance.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line150">line 150</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line151">line 151</a>
     </li></ul></dd>
     
 
@@ -1808,7 +1808,7 @@ otherwise (by e.g. createNoteLink())
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line142">line 142</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line143">line 143</a>
     </li></ul></dd>
     
 
@@ -1957,7 +1957,7 @@ otherwise (by e.g. createNoteLink())
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line209">line 209</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line210">line 210</a>
     </li></ul></dd>
     
 
@@ -2088,7 +2088,7 @@ otherwise (by e.g. createNoteLink())
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line164">line 164</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line165">line 165</a>
     </li></ul></dd>
     
 
@@ -2196,7 +2196,7 @@ otherwise (by e.g. createNoteLink())
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line188">line 188</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line189">line 189</a>
     </li></ul></dd>
     
 
@@ -2373,7 +2373,7 @@ Internally this serializes the anonymous function into string and sends it to ba
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line110">line 110</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line111">line 111</a>
     </li></ul></dd>
     
 
@@ -2526,7 +2526,138 @@ Internally this serializes the anonymous function into string and sends it to ba
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line227">line 227</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line228">line 228</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="setupElementTooltip"><span class="type-signature"></span>setupElementTooltip<span class="signature">($el)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>$el</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">jquery object on which to setup the tooltip</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line234">line 234</a>
     </li></ul></dd>
     
 
@@ -2661,7 +2792,7 @@ Internally this serializes the anonymous function into string and sends it to ba
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line180">line 180</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line181">line 181</a>
     </li></ul></dd>
     
 
@@ -2796,7 +2927,7 @@ Internally this serializes the anonymous function into string and sends it to ba
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line172">line 172</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line173">line 173</a>
     </li></ul></dd>
     
 

docs/frontend_api/entities_attribute.js.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: entities/attribute.js</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: entities/attribute.js</h1>
+
+    
+
+
+
+    
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>class Attribute {
+    constructor(treeCache, row) {
+        this.treeCache = treeCache;
+        /** @param {string} attributeId */
+        this.attributeId = row.attributeId;
+        /** @param {string} noteId */
+        this.noteId = row.noteId;
+        /** @param {string} type */
+        this.type = row.type;
+        /** @param {string} name */
+        this.name = row.name;
+        /** @param {string} value */
+        this.value = row.value;
+        /** @param {int} position */
+        this.position = row.position;
+        /** @param {boolean} isInheritable */
+        this.isInheritable = row.isInheritable;
+        /** @param {boolean} isDeleted */
+        this.isDeleted = row.isDeleted;
+        /** @param {string} dateCreated */
+        this.dateCreated = row.dateCreated;
+        /** @param {string} dateModified */
+        this.dateModified = row.dateModified;
+    }
+
+    /** @returns {NoteShort} */
+    async getNote() {
+        return await this.treeCache.getNote(this.noteId);
+    }
+
+    get toString() {
+        return `Attribute(attributeId=${this.attributeId}, type=${this.type}, name=${this.name})`;
+    }
+}</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteFull.html">NoteFull</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3><a href="global.html">Global</a></h3>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

docs/frontend_api/entities_branch.js.html

@@ -42,7 +42,7 @@ class Branch {
         /** @param {string} */
         this.prefix = row.prefix;
         /** @param {boolean} */
-        this.isExpanded = row.isExpanded;
+        this.isExpanded = !!row.isExpanded;
     }
 
     /** @returns {NoteShort} */

docs/frontend_api/entities_note_short.js.html

@@ -26,7 +26,14 @@
     
     <section>
         <article>
-            <pre class="prettyprint source linenums"><code>/**
+            <pre class="prettyprint source linenums"><code>import server from '../services/server.js';
+
+const LABEL = 'label';
+const LABEL_DEFINITION = 'label-definition';
+const RELATION = 'relation';
+const RELATION_DEFINITION = 'relation-definition';
+
+/**
  * This note's representation is used in note tree and is kept in TreeCache.
  * Its notable omission is the note content.
  */
@@ -99,6 +106,140 @@ class NoteShort {
         return await this.treeCache.getNotes(this.getChildNoteIds());
     }
 
+    /**
+     * @param {string} [name] - attribute name to filter
+     * @returns {Promise&lt;Attribute[]>}
+     */
+    async getAttributes(name) {
+        if (!this.attributeCache) {
+            this.attributeCache = await server.get('notes/' + this.noteId + '/attributes');
+        }
+
+        if (name) {
+            return this.attributeCache.filter(attr => attr.name === name);
+        }
+        else {
+            return this.attributeCache;
+        }
+    }
+
+    /**
+     * @param {string} [name] - label name to filter
+     * @returns {Promise&lt;Attribute[]>} all note's labels (attributes with type label), including inherited ones
+     */
+    async getLabels(name) {
+        return (await this.getAttributes(name)).filter(attr => attr.type === LABEL);
+    }
+
+    /**
+     * @param {string} [name] - label name to filter
+     * @returns {Promise&lt;Attribute[]>} all note's label definitions, including inherited ones
+     */
+    async getLabelDefinitions(name) {
+        return (await this.getAttributes(name)).filter(attr => attr.type === LABEL_DEFINITION);
+    }
+
+    /**
+     * @param {string} [name] - relation name to filter
+     * @returns {Promise&lt;Attribute[]>} all note's relations (attributes with type relation), including inherited ones
+     */
+    async getRelations(name) {
+        return (await this.getAttributes(name)).filter(attr => attr.type === RELATION);
+    }
+
+    /**
+     * @param {string} [name] - relation name to filter
+     * @returns {Promise&lt;Attribute[]>} all note's relation definitions including inherited ones
+     */
+    async getRelationDefinitions(name) {
+        return (await this.getAttributes(name)).filter(attr => attr.type === RELATION_DEFINITION);
+    }
+
+    /**
+     * @param {string} type - attribute type (label, relation, etc.)
+     * @param {string} name - attribute name
+     * @returns {Promise&lt;boolean>} true if note has an attribute with given type and name (including inherited)
+     */
+    async hasAttribute(type, name) {
+        return !!await this.getAttribute(type, name);
+    }
+
+    /**
+     * @param {string} type - attribute type (label, relation, etc.)
+     * @param {string} name - attribute name
+     * @returns {Promise&lt;Attribute>} attribute of given type and name. If there's more such attributes, first is  returned. Returns null if there's no such attribute belonging to this note.
+     */
+    async getAttribute(type, name) {
+        const attributes = await this.getAttributes();
+
+        return attributes.find(attr => attr.type === type &amp;&amp; attr.name === name);
+    }
+
+    /**
+     * @param {string} type - attribute type (label, relation, etc.)
+     * @param {string} name - attribute name
+     * @returns {Promise&lt;string>} attribute value of given type and name or null if no such attribute exists.
+     */
+    async getAttributeValue(type, name) {
+        const attr = await this.getAttribute(type, name);
+
+        return attr ? attr.value : null;
+    }
+
+    /**
+     * @param {string} name - label name
+     * @returns {Promise&lt;boolean>} true if label exists (including inherited)
+     */
+    async hasLabel(name) { return await this.hasAttribute(LABEL, name); }
+
+    /**
+     * @param {string} name - relation name
+     * @returns {Promise&lt;boolean>} true if relation exists (including inherited)
+     */
+    async hasRelation(name) { return await this.hasAttribute(RELATION, name); }
+
+    /**
+     * @param {string} name - label name
+     * @returns {Promise&lt;Attribute>} label if it exists, null otherwise
+     */
+    async getLabel(name) { return await this.getAttribute(LABEL, name); }
+
+    /**
+     * @param {string} name - relation name
+     * @returns {Promise&lt;Attribute>} relation if it exists, null otherwise
+     */
+    async getRelation(name) { return await this.getAttribute(RELATION, name); }
+
+    /**
+     * @param {string} name - label name
+     * @returns {Promise&lt;string>} label value if label exists, null otherwise
+     */
+    async getLabelValue(name) { return await this.getAttributeValue(LABEL, name); }
+
+    /**
+     * @param {string} name - relation name
+     * @returns {Promise&lt;string>} relation value if relation exists, null otherwise
+     */
+    async getRelationValue(name) { return await this.getAttributeValue(RELATION, name); }
+
+    /**
+     * @param {string} name
+     * @returns {Promise&lt;Note>|null} target note of the relation or null (if target is empty or note was not found)
+     */
+    async getRelationTarget(name) {
+        const relation = await this.getRelation(name);
+
+        return relation ? await repository.getNote(relation.value) : null;
+    }
+
+    /**
+     * Clear note's attributes cache to force fresh reload for next attribute request.
+     * Cache is note instance scoped.
+     */
+    invalidateAttributeCache() {
+        this.attributeCache = null;
+    }
+
     get toString() {
         return `Note(noteId=${this.noteId}, title=${this.title})`;
     }
@@ -107,6 +248,7 @@ class NoteShort {
         const dto = Object.assign({}, this);
         delete dto.treeCache;
         delete dto.archived;
+        delete dto.attributeCache;
 
         return dto;
     }

docs/frontend_api/global.html

@@ -303,7 +303,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line47">line 47</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line48">line 48</a>
     </li></ul></dd>
     
 

docs/frontend_api/services_frontend_script_api.js.html

@@ -34,6 +34,7 @@ import linkService from './link.js';
 import treeCache from './tree_cache.js';
 import noteDetailService from './note_detail.js';
 import noteTypeService from './note_type.js';
+import noteTooltipService from './note_tooltip.js';
 
 /**
  * This is the main frontend API interface for scripts. It's published in the local "api" object.
@@ -253,6 +254,12 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null) {
      * @param {array} types - list of mime types to be used
      */
     this.setCodeMimeTypes = noteTypeService.setCodeMimeTypes;
+
+    /**
+     * @method
+     * @param {object} $el - jquery object on which to setup the tooltip
+     */
+    this.setupElementTooltip = noteTooltipService.setupElementTooltip
 }
 
 export default FrontendScriptApi;</code></pre>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.25.2",
+  "version": "0.27.2-beta",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -399,9 +399,9 @@
       "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow=="
     },
     "@types/node": {
-      "version": "8.10.38",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.38.tgz",
-      "integrity": "sha512-EibsnbJerd0hBFaDjJStFrVbVBAtOy4dgL8zZFw0uOvPqzBAX59Ci8cgjg3+RgJIWhsB5A4c+pi+D4P9tQQh/A==",
+      "version": "10.12.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz",
+      "integrity": "sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ==",
       "dev": true
     },
     "abab": {
@@ -1820,9 +1820,9 @@
       "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI="
     },
     "debug": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.0.tgz",
-      "integrity": "sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
       "requires": {
         "ms": "^2.1.1"
       },
@@ -2375,12 +2375,12 @@
       "integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ=="
     },
     "electron": {
-      "version": "4.0.0-beta.9",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-4.0.0-beta.9.tgz",
-      "integrity": "sha512-BPFkN4BFQy88x2ZHVmzI03i1mUgaQF/uROPb/TlGB/WNAD3v2OvA9Ak9yZ5ADNnwhlR28DtUGs/MuZfDZHZBoQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-4.0.1.tgz",
+      "integrity": "sha512-kBWDLn1Vq8Tm6+/HpQc8gkjX7wJyQI8v/lf2kAirfi0Q4cXh6vBjozFvV1U/9gGCbyKnIDM+m8/wpyJIjg4w7g==",
       "dev": true,
       "requires": {
-        "@types/node": "^8.0.24",
+        "@types/node": "^10.12.18",
         "electron-download": "^4.1.0",
         "extract-zip": "^1.0.3"
       }
@@ -4331,9 +4331,9 @@
       }
     },
     "get-port": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/get-port/-/get-port-4.0.0.tgz",
-      "integrity": "sha512-Yy3yNI2oShgbaWg4cmPhWjkZfktEvpKI09aDX4PZzNtlU9obuYrX7x2mumQsrNxlF+Ls7OtMQW/u+X4s896bOQ=="
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-4.1.0.tgz",
+      "integrity": "sha512-4/fqAYrzrzOiqDrdeZRKXGdTGgbkfTEumGlNQPeP6Jy8w0PzN9mzeNQ3XgHaTNie8pQ3hOUkrwlZt2Fzk5H9mA=="
     },
     "get-proxy": {
       "version": "1.1.0",
@@ -7194,10 +7194,9 @@
       "integrity": "sha1-ICtIAhoMTL3i34DeFaF0Q8i0OYA="
     },
     "node-abi": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.4.5.tgz",
-      "integrity": "sha512-aa/UC6Nr3+tqhHGRsAuw/edz7/q9nnetBrKWxj6rpTtm+0X9T1qU7lIEHMS3yN9JwAbRiKUbRRFy1PLz/y3aaA==",
-      "dev": true,
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.5.1.tgz",
+      "integrity": "sha512-oDbFc7vCFx0RWWCweTer3hFm1u+e60N5FtGnmRV6QqvgATGFH/XRR6vqWIeBVosCYCqt6YdIr2L0exLZuEdVcQ==",
       "requires": {
         "semver": "^5.4.1"
       }
@@ -9179,9 +9178,9 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
     "simple-node-logger": {
-      "version": "0.93.40",
-      "resolved": "https://registry.npmjs.org/simple-node-logger/-/simple-node-logger-0.93.40.tgz",
-      "integrity": "sha512-ByWh6D6DgXteLICr5Bhca5CIDxuGt7xOysulWPIrBcwTT6ZCNF4SrwmtIDhC+cSNlJsz/fGytn7mH2Zqyh9euA==",
+      "version": "18.12.21",
+      "resolved": "https://registry.npmjs.org/simple-node-logger/-/simple-node-logger-18.12.21.tgz",
+      "integrity": "sha512-I2dA9JLiNrdTsmOI2bT0mIQNEKhTKbj9OM8tny3Il/5R6QdJHlWrv1NDdS+6UQHEnYV1413FnwgqTjzmV0ctCw==",
       "requires": {
         "lodash": "^4.17.10",
         "moment": "^2.20.1"

package.json

@@ -2,7 +2,7 @@
   "name": "trilium",
   "productName": "Trilium Notes",
   "description": "Trilium Notes",
-  "version": "0.26.0-beta",
+  "version": "0.27.4",
   "license": "AGPL-3.0-only",
   "main": "electron.js",
   "bin": {
@@ -26,15 +26,16 @@
     "cls-hooked": "4.2.2",
     "commonmark": "0.28.1",
     "cookie-parser": "1.4.3",
-    "debug": "4.1.0",
+    "debug": "4.1.1",
     "ejs": "2.6.1",
     "electron-debug": "2.0.0",
     "electron-dl": "1.12.0",
     "electron-in-page-search": "1.3.2",
     "express": "4.16.4",
     "express-session": "1.15.6",
+    "file-type": "10.7.0",
     "fs-extra": "7.0.1",
-    "get-port": "4.0.0",
+    "get-port": "4.1.0",
     "helmet": "3.15.0",
     "html": "1.0.0",
     "image-type": "3.0.0",
@@ -47,6 +48,7 @@
     "mime-types": "^2.1.21",
     "moment": "2.23.0",
     "multer": "1.4.1",
+    "node-abi": "2.5.1",
     "open": "0.0.5",
     "rand-token": "0.4.0",
     "rcedit": "1.1.1",
@@ -55,7 +57,7 @@
     "sax": "^1.2.4",
     "serve-favicon": "2.5.0",
     "session-file-store": "1.2.0",
-    "simple-node-logger": "0.93.40",
+    "simple-node-logger": "18.12.21",
     "sqlite": "3.0.0",
     "tar-stream": "1.6.2",
     "turndown": "5.0.1",
@@ -65,7 +67,7 @@
   },
   "devDependencies": {
     "devtron": "1.4.0",
-    "electron": "4.0.0-beta.9",
+    "electron": "4.0.1",
     "electron-compile": "6.4.3",
     "electron-packager": "13.0.1",
     "electron-rebuild": "1.8.2",

src/entities/entity_constructor.js

@@ -15,7 +15,8 @@ const ENTITY_NAME_TO_ENTITY = {
     "note_revisions": NoteRevision,
     "recent_notes": RecentNote,
     "options": Option,
-    "api_tokens": ApiToken
+    "api_tokens": ApiToken,
+    "links": Link
 };
 
 function getEntityFromEntityName(entityName) {

src/entities/note.js

@@ -56,6 +56,9 @@ class Note extends Entity {
     setContent(content) {
         this.content = content;
 
+        // if parsing below is not successful then there's no jsonContent as opposed to still having the old unupdated ones
+        delete this.jsonContent;
+
         try {
             this.jsonContent = JSON.parse(this.content);
         }
@@ -369,6 +372,16 @@ class Note extends Entity {
      */
     async getRelationValue(name) { return await this.getAttributeValue(RELATION, name); }
 
+    /**
+     * @param {string} name
+     * @returns {Promise<Note>|null} target note of the relation or null (if target is empty or note was not found)
+     */
+    async getRelationTarget(name) {
+        const relation = await this.getRelation(name);
+
+        return relation ? await repository.getNote(relation.value) : null;
+    }
+
     /**
      * Based on enabled, label is either set or removed.
      *
@@ -425,16 +438,6 @@ class Note extends Entity {
      */
     async removeRelation(name, value) { return await this.removeAttribute(RELATION, name, value); }
 
-    /**
-     * @param {string} name
-     * @returns {Promise<Note>|null} target note of the relation or null (if target is empty or note was not found)
-     */
-    async getRelationTarget(name) {
-        const relation = await this.getRelation(name);
-
-        return relation ? await repository.getNote(relation.value) : null;
-    }
-
     /**
      * @return {Promise<string[]>} return list of all descendant noteIds of this note. Returning just noteIds because number of notes can be huge. Includes also this note's noteId
      */

src/public/javascripts/desktop.js

@@ -1,38 +1,42 @@
-import addLinkDialog from '../dialogs/add_link.js';
-import jumpToNoteDialog from '../dialogs/jump_to_note.js';
-import attributesDialog from '../dialogs/attributes.js';
-import noteRevisionsDialog from '../dialogs/note_revisions.js';
-import noteSourceDialog from '../dialogs/note_source.js';
-import recentChangesDialog from '../dialogs/recent_changes.js';
-import optionsDialog from '../dialogs/options.js';
-import sqlConsoleDialog from '../dialogs/sql_console.js';
-import markdownImportDialog from '../dialogs/markdown_import.js';
-import exportDialog from '../dialogs/export.js';
+import addLinkDialog from './dialogs/add_link.js';
+import jumpToNoteDialog from './dialogs/jump_to_note.js';
+import attributesDialog from './dialogs/attributes.js';
+import noteRevisionsDialog from './dialogs/note_revisions.js';
+import noteSourceDialog from './dialogs/note_source.js';
+import recentChangesDialog from './dialogs/recent_changes.js';
+import optionsDialog from './dialogs/options.js';
+import sqlConsoleDialog from './dialogs/sql_console.js';
+import markdownImportDialog from './dialogs/markdown_import.js';
+import exportDialog from './dialogs/export.js';
 
-import cloning from './cloning.js';
-import contextMenu from './tree_context_menu.js';
-import dragAndDropSetup from './drag_and_drop.js';
-import exportService from './export.js';
-import link from './link.js';
-import messagingService from './messaging.js';
-import noteDetailService from './note_detail.js';
-import noteType from './note_type.js';
-import protected_session from './protected_session.js';
-import searchNotesService from './search_notes.js';
-import FrontendScriptApi from './frontend_script_api.js';
-import ScriptContext from './script_context.js';
-import sync from './sync.js';
-import treeService from './tree.js';
-import treeChanges from './branches.js';
-import treeUtils from './tree_utils.js';
-import utils from './utils.js';
-import server from './server.js';
-import entrypoints from './entrypoints.js';
-import tooltip from './tooltip.js';
-import bundle from "./bundle.js";
-import treeCache from "./tree_cache.js";
-import libraryLoader from "./library_loader.js";
-import hoistedNoteService from './hoisted_note.js';
+import cloning from './services/cloning.js';
+import contextMenu from './services/tree_context_menu.js';
+import dragAndDropSetup from './services/drag_and_drop.js';
+import exportService from './services/export.js';
+import link from './services/link.js';
+import messagingService from './services/messaging.js';
+import noteDetailService from './services/note_detail.js';
+import noteType from './services/note_type.js';
+import protected_session from './services/protected_session.js';
+import searchNotesService from './services/search_notes.js';
+import FrontendScriptApi from './services/frontend_script_api.js';
+import ScriptContext from './services/script_context.js';
+import sync from './services/sync.js';
+import treeService from './services/tree.js';
+import treeChanges from './services/branches.js';
+import treeUtils from './services/tree_utils.js';
+import utils from './services/utils.js';
+import server from './services/server.js';
+import entrypoints from './services/entrypoints.js';
+import noteTooltipService from './services/note_tooltip.js';
+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 linkService from './services/link.js';
+import noteAutocompleteService from './services/note_autocomplete.js';
+import macInit from './services/mac_init.js';
 
 // required for CKEditor image upload plugin
 window.glob.getCurrentNode = treeService.getCurrentNode;
@@ -107,28 +111,6 @@ if (utils.isElectron()) {
     });
 }
 
-function exec(cmd) {
-    document.execCommand(cmd);
-
-    return false;
-}
-
-if (utils.isElectron() && utils.isMac()) {
-    utils.bindShortcut('ctrl+c', () => exec("copy"));
-    utils.bindShortcut('ctrl+v', () => exec('paste'));
-    utils.bindShortcut('ctrl+x', () => exec('cut'));
-    utils.bindShortcut('ctrl+a', () => exec('selectAll'));
-    utils.bindShortcut('ctrl+z', () => exec('undo'));
-    utils.bindShortcut('ctrl+y', () => exec('redo'));
-
-    utils.bindShortcut('meta+c', () => exec("copy"));
-    utils.bindShortcut('meta+v', () => exec('paste'));
-    utils.bindShortcut('meta+x', () => exec('cut'));
-    utils.bindShortcut('meta+a', () => exec('selectAll'));
-    utils.bindShortcut('meta+z', () => exec('undo'));
-    utils.bindShortcut('meta+y', () => exec('redo'));
-}
-
 $("#export-note-button").click(function () {
     if ($(this).hasClass("disabled")) {
         return;
@@ -137,10 +119,18 @@ $("#export-note-button").click(function () {
     exportDialog.showDialog('single');
 });
 
+macInit.init();
+
 treeService.showTree();
 
 entrypoints.registerEntrypoints();
 
-tooltip.setupTooltip();
+noteTooltipService.setupGlobalTooltip();
 
 bundle.executeStartupBundles();
+
+noteTypeService.init();
+
+linkService.init();
+
+noteAutocompleteService.init();

src/public/javascripts/dialogs/attributes.js

@@ -169,6 +169,8 @@ function AttributesModel() {
         infoService.showMessage("Attributes have been saved.");
 
         attributeService.refreshAttributes();
+
+        noteDetailService.reload();
     };
 
     function addLastEmptyRow() {

src/public/javascripts/dialogs/branch_prefix.js

@@ -2,6 +2,7 @@ import treeService from '../services/tree.js';
 import server from '../services/server.js';
 import treeCache from "../services/tree_cache.js";
 import treeUtils from "../services/tree_utils.js";
+import infoService from "../services/info.js";
 
 const $dialog = $("#branch-prefix-dialog");
 const $form = $("#branch-prefix-form");
@@ -24,7 +25,7 @@ async function showDialog() {
 
     const noteTitle = await treeUtils.getNoteTitle(currentNode.data.noteId);
 
-    $noteTitle.html(noteTitle);
+    $noteTitle.text(" - " + noteTitle);
 }
 
 async function savePrefix() {
@@ -35,6 +36,8 @@ async function savePrefix() {
     await treeService.setPrefix(branchId, prefix);
 
     $dialog.modal('hide');
+
+    infoService.showMessage("Branch prefix has been saved.");
 }
 
 $form.submit(() => {

src/public/javascripts/dialogs/jump_to_note.js

@@ -6,8 +6,6 @@ const $dialog = $("#jump-to-note-dialog");
 const $autoComplete = $("#jump-to-note-autocomplete");
 const $showInFullTextButton = $("#show-in-full-text-button");
 
-$dialog.on("shown.bs.modal", e => $autoComplete.focus());
-
 async function showDialog() {
     glob.activeDialog = $dialog;
 

src/public/javascripts/dialogs/options.js

@@ -198,15 +198,17 @@ addTabHandler((async function () {
     const $syncVersion = $("#sync-version");
     const $buildDate = $("#build-date");
     const $buildRevision = $("#build-revision");
+    const $dataDirectory = $("#data-directory");
 
     const appInfo = await server.get('app-info');
 
-    $appVersion.html(appInfo.appVersion);
-    $dbVersion.html(appInfo.dbVersion);
-    $syncVersion.html(appInfo.syncVersion);
-    $buildDate.html(appInfo.buildDate);
-    $buildRevision.html(appInfo.buildRevision);
+    $appVersion.text(appInfo.appVersion);
+    $dbVersion.text(appInfo.dbVersion);
+    $syncVersion.text(appInfo.syncVersion);
+    $buildDate.text(appInfo.buildDate);
+    $buildRevision.text(appInfo.buildRevision);
     $buildRevision.attr('href', 'https://github.com/zadam/trilium/commit/' + appInfo.buildRevision);
+    $dataDirectory.text(appInfo.dataDirectory);
 
     return {};
 })());

src/public/javascripts/entities/attribute.js

@@ -0,0 +1,36 @@
+class Attribute {
+    constructor(treeCache, row) {
+        this.treeCache = treeCache;
+        /** @param {string} attributeId */
+        this.attributeId = row.attributeId;
+        /** @param {string} noteId */
+        this.noteId = row.noteId;
+        /** @param {string} type */
+        this.type = row.type;
+        /** @param {string} name */
+        this.name = row.name;
+        /** @param {string} value */
+        this.value = row.value;
+        /** @param {int} position */
+        this.position = row.position;
+        /** @param {boolean} isInheritable */
+        this.isInheritable = row.isInheritable;
+        /** @param {boolean} isDeleted */
+        this.isDeleted = row.isDeleted;
+        /** @param {string} dateCreated */
+        this.dateCreated = row.dateCreated;
+        /** @param {string} dateModified */
+        this.dateModified = row.dateModified;
+    }
+
+    /** @returns {NoteShort} */
+    async getNote() {
+        return await this.treeCache.getNote(this.noteId);
+    }
+
+    get toString() {
+        return `Attribute(attributeId=${this.attributeId}, type=${this.type}, name=${this.name})`;
+    }
+}
+
+export default Attribute;

src/public/javascripts/entities/note_short.js

@@ -1,3 +1,10 @@
+import server from '../services/server.js';
+
+const LABEL = 'label';
+const LABEL_DEFINITION = 'label-definition';
+const RELATION = 'relation';
+const RELATION_DEFINITION = 'relation-definition';
+
 /**
  * This note's representation is used in note tree and is kept in TreeCache.
  * Its notable omission is the note content.
@@ -71,6 +78,140 @@ class NoteShort {
         return await this.treeCache.getNotes(this.getChildNoteIds());
     }
 
+    /**
+     * @param {string} [name] - attribute name to filter
+     * @returns {Promise<Attribute[]>}
+     */
+    async getAttributes(name) {
+        if (!this.attributeCache) {
+            this.attributeCache = await server.get('notes/' + this.noteId + '/attributes');
+        }
+
+        if (name) {
+            return this.attributeCache.filter(attr => attr.name === name);
+        }
+        else {
+            return this.attributeCache;
+        }
+    }
+
+    /**
+     * @param {string} [name] - label name to filter
+     * @returns {Promise<Attribute[]>} all note's labels (attributes with type label), including inherited ones
+     */
+    async getLabels(name) {
+        return (await this.getAttributes(name)).filter(attr => attr.type === LABEL);
+    }
+
+    /**
+     * @param {string} [name] - label name to filter
+     * @returns {Promise<Attribute[]>} all note's label definitions, including inherited ones
+     */
+    async getLabelDefinitions(name) {
+        return (await this.getAttributes(name)).filter(attr => attr.type === LABEL_DEFINITION);
+    }
+
+    /**
+     * @param {string} [name] - relation name to filter
+     * @returns {Promise<Attribute[]>} all note's relations (attributes with type relation), including inherited ones
+     */
+    async getRelations(name) {
+        return (await this.getAttributes(name)).filter(attr => attr.type === RELATION);
+    }
+
+    /**
+     * @param {string} [name] - relation name to filter
+     * @returns {Promise<Attribute[]>} all note's relation definitions including inherited ones
+     */
+    async getRelationDefinitions(name) {
+        return (await this.getAttributes(name)).filter(attr => attr.type === RELATION_DEFINITION);
+    }
+
+    /**
+     * @param {string} type - attribute type (label, relation, etc.)
+     * @param {string} name - attribute name
+     * @returns {Promise<boolean>} true if note has an attribute with given type and name (including inherited)
+     */
+    async hasAttribute(type, name) {
+        return !!await this.getAttribute(type, name);
+    }
+
+    /**
+     * @param {string} type - attribute type (label, relation, etc.)
+     * @param {string} name - attribute name
+     * @returns {Promise<Attribute>} attribute of given type and name. If there's more such attributes, first is  returned. Returns null if there's no such attribute belonging to this note.
+     */
+    async getAttribute(type, name) {
+        const attributes = await this.getAttributes();
+
+        return attributes.find(attr => attr.type === type && attr.name === name);
+    }
+
+    /**
+     * @param {string} type - attribute type (label, relation, etc.)
+     * @param {string} name - attribute name
+     * @returns {Promise<string>} attribute value of given type and name or null if no such attribute exists.
+     */
+    async getAttributeValue(type, name) {
+        const attr = await this.getAttribute(type, name);
+
+        return attr ? attr.value : null;
+    }
+
+    /**
+     * @param {string} name - label name
+     * @returns {Promise<boolean>} true if label exists (including inherited)
+     */
+    async hasLabel(name) { return await this.hasAttribute(LABEL, name); }
+
+    /**
+     * @param {string} name - relation name
+     * @returns {Promise<boolean>} true if relation exists (including inherited)
+     */
+    async hasRelation(name) { return await this.hasAttribute(RELATION, name); }
+
+    /**
+     * @param {string} name - label name
+     * @returns {Promise<Attribute>} label if it exists, null otherwise
+     */
+    async getLabel(name) { return await this.getAttribute(LABEL, name); }
+
+    /**
+     * @param {string} name - relation name
+     * @returns {Promise<Attribute>} relation if it exists, null otherwise
+     */
+    async getRelation(name) { return await this.getAttribute(RELATION, name); }
+
+    /**
+     * @param {string} name - label name
+     * @returns {Promise<string>} label value if label exists, null otherwise
+     */
+    async getLabelValue(name) { return await this.getAttributeValue(LABEL, name); }
+
+    /**
+     * @param {string} name - relation name
+     * @returns {Promise<string>} relation value if relation exists, null otherwise
+     */
+    async getRelationValue(name) { return await this.getAttributeValue(RELATION, name); }
+
+    /**
+     * @param {string} name
+     * @returns {Promise<Note>|null} target note of the relation or null (if target is empty or note was not found)
+     */
+    async getRelationTarget(name) {
+        const relation = await this.getRelation(name);
+
+        return relation ? await repository.getNote(relation.value) : null;
+    }
+
+    /**
+     * Clear note's attributes cache to force fresh reload for next attribute request.
+     * Cache is note instance scoped.
+     */
+    invalidateAttributeCache() {
+        this.attributeCache = null;
+    }
+
     get toString() {
         return `Note(noteId=${this.noteId}, title=${this.title})`;
     }
@@ -79,6 +220,7 @@ class NoteShort {
         const dto = Object.assign({}, this);
         delete dto.treeCache;
         delete dto.archived;
+        delete dto.attributeCache;
 
         return dto;
     }

src/public/javascripts/mobile.js

@@ -0,0 +1,128 @@
+import treeService from "./services/tree.js";
+import noteDetailService from "./services/note_detail.js";
+import dragAndDropSetup from "./services/drag_and_drop.js";
+import treeCache from "./services/tree_cache.js";
+import treeBuilder from "./services/tree_builder.js";
+import contextMenuWidget from "./services/context_menu.js";
+import ContextMenuItemsContainer from "./services/context_menu_items_container.js";
+import treeChangesService from "./services/branches.js";
+import utils from "./services/utils.js";
+import treeUtils from "./services/tree_utils.js";
+
+const $leftPane = $("#left-pane");
+const $tree = $("#tree");
+const $detail = $("#detail");
+const $closeDetailButton = $("#close-detail-button");
+
+function togglePanes() {
+    if (!$leftPane.is(":visible") || !$detail.is(":visible")) {
+        $detail.toggleClass("d-none");
+        $leftPane.toggleClass("d-none");
+    }
+}
+
+function showDetailPane() {
+    if (!$detail.is(":visible")) {
+        $detail.removeClass("d-none");
+        $leftPane.addClass("d-none");
+    }
+}
+
+$closeDetailButton.click(() => {
+    // no page is opened
+    document.location.hash = '-';
+
+    togglePanes();
+});
+
+async function showTree() {
+    const tree = await treeService.loadTree();
+
+    $tree.fancytree({
+        autoScroll: true,
+        extensions: ["dnd5", "clones"],
+        source: tree,
+        scrollParent: $tree,
+        minExpandLevel: 2, // root can't be collapsed
+        activate: (event, data) => {
+            const node = data.node;
+            const noteId = node.data.noteId;
+
+            treeService.clearSelectedNodes();
+
+            treeService.setCurrentNotePathToHash(node);
+
+            showDetailPane();
+
+            noteDetailService.switchToNote(noteId, true);
+        },
+        expand: (event, data) => treeService.setExpandedToServer(data.node.data.branchId, true),
+        collapse: (event, data) => treeService.setExpandedToServer(data.node.data.branchId, false),
+        init: (event, data) => treeService.treeInitialized(), // don't collapse to short form
+        dnd5: dragAndDropSetup,
+        lazyLoad: function(event, data) {
+            const noteId = data.node.data.noteId;
+
+            data.result = treeCache.getNote(noteId).then(note => treeBuilder.prepareBranch(note));
+        },
+        clones: {
+            highlightActiveClones: true
+        }
+    });
+}
+
+$("#note-menu-button").click(async e => {
+    const node = treeService.getCurrentNode();
+    const branch = await treeCache.getBranch(node.data.branchId);
+    const note = await treeCache.getNote(node.data.noteId);
+    const parentNote = await treeCache.getNote(branch.parentNoteId);
+    const isNotRoot = note.noteId !== 'root';
+
+    const itemsContainer = new ContextMenuItemsContainer([
+        {title: "Insert note after", cmd: "insertNoteAfter", uiIcon: "plus"},
+        {title: "Insert child note", cmd: "insertChildNote", uiIcon: "plus"},
+        {title: "Delete this note", cmd: "delete", uiIcon: "trash"}
+    ]);
+
+    itemsContainer.enableItem("insertNoteAfter", isNotRoot && parentNote.type !== 'search');
+    itemsContainer.enableItem("insertChildNote", note.type !== 'search');
+    itemsContainer.enableItem("delete", isNotRoot && parentNote.type !== 'search');
+
+    contextMenuWidget.initContextMenu(e, itemsContainer, (event, cmd) => {
+        if (cmd === "insertNoteAfter") {
+            const parentNoteId = node.data.parentNoteId;
+            const isProtected = treeUtils.getParentProtectedStatus(node);
+
+            treeService.createNote(node, parentNoteId, 'after', isProtected);
+        }
+        else if (cmd === "insertChildNote") {
+            treeService.createNote(node, node.data.noteId, 'into');
+        }
+        else if (cmd === "delete") {
+            treeChangesService.deleteNodes([node]);
+
+            // move to the tree
+            togglePanes();
+        }
+        else {
+            throw new Error("Unrecognized command " + cmd);
+        }
+    });
+});
+
+$("#switch-to-desktop-button").click(() => {
+    utils.setCookie('trilium-device', 'desktop');
+
+    utils.reloadApp();
+});
+
+$("#log-out-button").click(() => {
+    $("#logout-form").submit();
+});
+
+// this is done so that startNotePath is not used
+if (!document.location.hash) {
+    document.location.hash = '-';
+}
+
+showTree();

src/public/javascripts/services/attributes.js

@@ -13,13 +13,25 @@ const $savedIndicator = $("#saved-indicator");
 
 let attributePromise;
 
-async function refreshAttributes() {
+function invalidateAttributes() {
+    attributePromise = null;
+}
+
+function reloadAttributes() {
     attributePromise = server.get('notes/' + noteDetailService.getCurrentNoteId() + '/attributes');
+}
+
+async function refreshAttributes() {
+    reloadAttributes();
 
     await showAttributes();
 }
 
 async function getAttributes() {
+    if (!attributePromise) {
+        reloadAttributes();
+    }
+
     return await attributePromise;
 }
 
@@ -73,8 +85,11 @@ async function showAttributes() {
         $promotedAttributesContainer.empty().append($tbody);
     }
     else if (note.type !== 'relation-map') {
-        if (attributes.length > 0) {
-            for (const attribute of attributes) {
+        // display only "own" notes
+        const ownedAttributes = attributes.filter(attr => attr.noteId === note.noteId);
+
+        if (ownedAttributes.length > 0) {
+            for (const attribute of ownedAttributes) {
                 if (attribute.type === 'label') {
                     $attributeListInner.append(utils.formatLabel(attribute) + " ");
                 }
@@ -120,7 +135,9 @@ async function createPromotedAttributeRow(definitionAttr, valueAttr) {
     const $inputCell = $("<td>").append($("<div>").addClass("input-group").append($input));
 
     const $actionCell = $("<td>");
-    const $multiplicityCell = $("<td>").addClass("multiplicity");
+    const $multiplicityCell = $("<td>")
+        .addClass("multiplicity")
+        .attr("nowrap", true);
 
     $tr
         .append($labelCell)
@@ -286,5 +303,6 @@ async function promotedAttributeChanged(event) {
 export default {
     getAttributes,
     showAttributes,
-    refreshAttributes
+    refreshAttributes,
+    invalidateAttributes
 }

src/public/javascripts/services/context_menu.js

@@ -1,13 +1,11 @@
 const $contextMenuContainer = $("#context-menu-container");
 
-function initContextMenu(event, contextMenuItems, selectContextMenuItem) {
+function initContextMenu(event, itemContainer, selectContextMenuItem) {
+    event.stopPropagation();
+
     $contextMenuContainer.empty();
 
-    for (const item of contextMenuItems) {
-        if (item.hidden) {
-            continue;
-        }
-
+    for (const item of itemContainer.getItems()) {
         if (item.title === '----') {
             $contextMenuContainer.append($("<div>").addClass("dropdown-divider"));
         } else {

src/public/javascripts/services/context_menu_items_container.js

@@ -0,0 +1,28 @@
+class ContextMenuItemsContainer {
+    constructor(items) {
+        // clone the item array and the items themselves
+        this.items = items.map(item => Object.assign({}, item));
+    }
+
+    hideItem(cmd, hidden = true) {
+        if (hidden) {
+            this.items = this.items.filter(item => item.cmd !== cmd);
+        }
+    }
+
+    enableItem(cmd, enabled) {
+        const item = this.items.find(item => item.cmd === cmd);
+
+        if (!item) {
+            throw new Error(`Command ${cmd} has not been found!`);
+        }
+
+        item.enabled = enabled;
+    }
+
+    getItems() {
+        return this.items;
+    }
+}
+
+export default ContextMenuItemsContainer;

src/public/javascripts/services/entrypoints.js

@@ -117,10 +117,6 @@ function registerEntrypoints() {
 
     utils.bindShortcut('ctrl+f', openInPageSearch);
 
-    if (utils.isMac()) {
-        utils.bindShortcut('meta+f', openInPageSearch);
-    }
-
     // FIXME: do we really need these at this point?
     utils.bindShortcut("ctrl+shift+up", () => {
         const node = treeService.getCurrentNode();

src/public/javascripts/services/frontend_script_api.js

@@ -6,6 +6,8 @@ import linkService from './link.js';
 import treeCache from './tree_cache.js';
 import noteDetailService from './note_detail.js';
 import noteTypeService from './note_type.js';
+import noteTooltipService from './note_tooltip.js';
+import protectedSessionService from'./protected_session.js';
 
 /**
  * This is the main frontend API interface for scripts. It's published in the local "api" object.
@@ -41,7 +43,7 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null) {
     this.activateNewNote = async notePath => {
         await treeService.reload();
 
-        await treeService.activateNote(notePath, true);
+        await treeService.activateNote(notePath, noteDetailService.focusOnTitle);
     };
 
     /**
@@ -202,6 +204,19 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null) {
      */
     this.getCurrentNoteContent = noteDetailService.getCurrentNoteContent;
 
+    /**
+     * This method checks whether user navigated away from the note from which the scripts has been started.
+     * This is necessary because script execution is async and by the time it is finished, the user might have
+     * already navigated away from this page - the end result would be that script might return data for the wrong
+     * note.
+     *
+     * @method
+     * @return {boolean} returns true if the original note is still loaded, false if user switched to another
+     */
+    this.isNoteStillLoaded = () => {
+        return this.originEntity.noteId === noteDetailService.getCurrentNoteId();
+    };
+
     /**
      * @method
      * @param {function} func - callback called on note change as user is typing (not necessarily tied to save event)
@@ -225,6 +240,17 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null) {
      * @param {array} types - list of mime types to be used
      */
     this.setCodeMimeTypes = noteTypeService.setCodeMimeTypes;
+
+    /**
+     * @method
+     * @param {object} $el - jquery object on which to setup the tooltip
+     */
+    this.setupElementTooltip = noteTooltipService.setupElementTooltip;
+
+    /**
+     * @method
+     */
+    this.protectCurrentNote = protectedSessionService.protectNoteAndSendToServer;
 }
 
 export default FrontendScriptApi;

src/public/javascripts/services/link.js

@@ -88,17 +88,19 @@ function addTextToEditor(text) {
     });
 }
 
-ko.bindingHandlers.noteLink = {
-    init: async function(element, valueAccessor, allBindings, viewModel, bindingContext) {
-        const noteId = ko.unwrap(valueAccessor());
+function init() {
+    ko.bindingHandlers.noteLink = {
+        init: async function(element, valueAccessor, allBindings, viewModel, bindingContext) {
+            const noteId = ko.unwrap(valueAccessor());
 
-        if (noteId) {
-            const link = await createNoteLink(noteId);
+            if (noteId) {
+                const link = await createNoteLink(noteId);
 
-            $(element).append(link);
+                $(element).append(link);
+            }
         }
-    }
-};
+    };
+}
 
 // when click on link popup, in case of internal link, just go the the referenced note instead of default behavior
 // of opening the link in new window/tab
@@ -124,5 +126,6 @@ export default {
     getNotePathFromUrl,
     createNoteLink,
     addLinkToEditor,
-    addTextToEditor
+    addTextToEditor,
+    init
 };

src/public/javascripts/services/mac_init.js

@@ -0,0 +1,25 @@
+/**
+ * Mac specific initialization
+ */
+import utils from "./utils.js";
+
+function init() {
+    if (utils.isElectron() && utils.isMac()) {
+        utils.bindShortcut('meta+c', () => exec("copy"));
+        utils.bindShortcut('meta+v', () => exec('paste'));
+        utils.bindShortcut('meta+x', () => exec('cut'));
+        utils.bindShortcut('meta+a', () => exec('selectAll'));
+        utils.bindShortcut('meta+z', () => exec('undo'));
+        utils.bindShortcut('meta+y', () => exec('redo'));
+    }
+}
+
+function exec(cmd) {
+    document.execCommand(cmd);
+
+    return false;
+}
+
+export default {
+    init
+}

src/public/javascripts/services/note_autocomplete.js

@@ -28,7 +28,7 @@ function clearText($el) {
 function showRecentNotes($el) {
     $el.setSelectedPath("");
     $el.autocomplete("val", "");
-    $el.autocomplete("open");
+    $el.focus();
 }
 
 function initNoteAutocomplete($el, options) {
@@ -61,7 +61,13 @@ function initNoteAutocomplete($el, options) {
 
         $clearTextButton.click(() => clearText($el));
 
-        $showRecentNotesButton.click(() => showRecentNotes($el));
+        $showRecentNotesButton.click(e => {
+            showRecentNotes($el);
+
+            // this will cause the click not give focus to the "show recent notes" button
+            // this is important because otherwise input will lose focus immediatelly and not show the results
+            return false;
+        });
 
         $goToSelectedNoteButton.click(() => {
             if ($el.hasClass("disabled")) {
@@ -101,40 +107,42 @@ function initNoteAutocomplete($el, options) {
     return $el;
 }
 
-$.fn.getSelectedPath = function() {
-    if (!$(this).val().trim()) {
-        return "";
-    }
-    else {
-        return $(this).attr(SELECTED_PATH_KEY);
-    }
-};
+function init() {
+    $.fn.getSelectedPath = function () {
+        if (!$(this).val().trim()) {
+            return "";
+        } else {
+            return $(this).attr(SELECTED_PATH_KEY);
+        }
+    };
 
-$.fn.setSelectedPath = function(path) {
-    path = path || "";
+    $.fn.setSelectedPath = function (path) {
+        path = path || "";
 
-    $(this).attr(SELECTED_PATH_KEY, path);
+        $(this).attr(SELECTED_PATH_KEY, path);
 
-    $(this)
-        .closest(".input-group")
-        .find(".go-to-selected-note-button")
-        .toggleClass("disabled", !path.trim())
-        .attr(SELECTED_PATH_KEY, path); // we also set attr here so tooltip can be displayed
-};
+        $(this)
+            .closest(".input-group")
+            .find(".go-to-selected-note-button")
+            .toggleClass("disabled", !path.trim())
+            .attr(SELECTED_PATH_KEY, path); // we also set attr here so tooltip can be displayed
+    };
 
-ko.bindingHandlers.noteAutocomplete = {
-    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
-        initNoteAutocomplete($(element));
+    ko.bindingHandlers.noteAutocomplete = {
+        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+            initNoteAutocomplete($(element));
 
-        $(element).setSelectedPath(bindingContext.$data.selectedPath);
+            $(element).setSelectedPath(bindingContext.$data.selectedPath);
 
-        $(element).on('autocomplete:selected', function(event, suggestion, dataset) {
-            bindingContext.$data.selectedPath = $(element).val().trim() ? suggestion.path : '';
-        });
-    }
-};
+            $(element).on('autocomplete:selected', function (event, suggestion, dataset) {
+                bindingContext.$data.selectedPath = $(element).val().trim() ? suggestion.path : '';
+            });
+        }
+    };
+}
 
 export default {
     initNoteAutocomplete,
-    showRecentNotes
+    showRecentNotes,
+    init
 }

src/public/javascripts/services/note_detail.js

@@ -17,6 +17,7 @@ import noteDetailRender from './note_detail_render.js';
 import noteDetailRelationMap from './note_detail_relation_map.js';
 import bundleService from "./bundle.js";
 import attributeService from "./attributes.js";
+import utils from "./utils.js";
 
 const $noteTitle = $("#note-title");
 
@@ -36,6 +37,8 @@ let noteChangeDisabled = false;
 
 let isNoteChanged = false;
 
+let detailLoadedListeners = [];
+
 const components = {
     'code': noteDetailCode,
     'text': noteDetailText,
@@ -108,6 +111,10 @@ function onNoteChange(func) {
 async function saveNote() {
     const note = getCurrentNote();
 
+    if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
+        return;
+    }
+
     note.title = $noteTitle.val();
     note.content = getCurrentNoteContent(note);
 
@@ -142,12 +149,6 @@ function setNoteBackgroundIfProtected(note) {
     $unprotectButton.prop("disabled", !protectedSessionHolder.isProtectedSessionAvailable());
 }
 
-let isNewNoteCreated = false;
-
-function newNoteCreated() {
-    isNewNoteCreated = true;
-}
-
 async function handleProtectedSession() {
     const newSessionCreated = await protectedSessionService.ensureProtectedSession(currentNote.isProtected, false);
 
@@ -177,13 +178,13 @@ async function loadNoteDetail(noteId) {
     // only now that we're in sync with tree active node we will switch currentNote
     currentNote = loadedNote;
 
-    // needs to happend after loading the note itself because it references current noteId
-    attributeService.refreshAttributes();
-
-    if (isNewNoteCreated) {
-        isNewNoteCreated = false;
-
-        $noteTitle.focus().select();
+    if (utils.isDesktop()) {
+        // needs to happen after loading the note itself because it references current noteId
+        attributeService.refreshAttributes();
+    }
+    else {
+        // mobile usually doesn't need attributes so we just invalidate
+        attributeService.invalidateAttributes();
     }
 
     $noteIdDisplay.html(noteId);
@@ -197,8 +198,10 @@ async function loadNoteDetail(noteId) {
     try {
         $noteTitle.val(currentNote.title);
 
-        noteTypeService.setNoteType(currentNote.type);
-        noteTypeService.setNoteMime(currentNote.mime);
+        if (utils.isDesktop()) {
+            noteTypeService.setNoteType(currentNote.type);
+            noteTypeService.setNoteMime(currentNote.mime);
+        }
 
         for (const componentType in components) {
             if (componentType !== currentNote.type) {
@@ -214,6 +217,8 @@ async function loadNoteDetail(noteId) {
             return;
         }
 
+        $noteTitle.removeAttr("readonly"); // this can be set by protected session service
+
         await getComponent(currentNote.type).show();
     }
     finally {
@@ -223,15 +228,19 @@ async function loadNoteDetail(noteId) {
     treeService.setBranchBackgroundBasedOnProtectedStatus(noteId);
 
     // after loading new note make sure editor is scrolled to the top
-    $noteDetailWrapper.scrollTop(0);
+    getComponent(currentNote.type).scrollToTop();
+
+    fireDetailLoaded();
 
     $scriptArea.empty();
 
     await bundleService.executeRelationBundles(getCurrentNote(), 'runOnNoteView');
 
-    await attributeService.showAttributes();
+    if (utils.isDesktop()) {
+        await attributeService.showAttributes();
 
-    await showChildrenOverview();
+        await showChildrenOverview();
+    }
 }
 
 async function showChildrenOverview() {
@@ -274,6 +283,30 @@ function focusOnTitle() {
     $noteTitle.focus();
 }
 
+/**
+ * Since detail loading may take some time and user might just browse through the notes using UP-DOWN keys,
+ * we intentionally decouple activation of the note in the tree and full load of the note so just avaiting on
+ * fancytree's activate() won't wait for the full load.
+ *
+ * This causes an issue where in some cases you want to do some action after detail is loaded. For this reason
+ * we provide the listeners here which will be triggered after the detail is loaded and if the loaded note
+ * is the one registered in the listener.
+ */
+function addDetailLoadedListener(noteId, callback) {
+    detailLoadedListeners.push({ noteId, callback });
+}
+
+function fireDetailLoaded() {
+    for (const {noteId, callback} of detailLoadedListeners) {
+        if (noteId === currentNote.noteId) {
+            callback();
+        }
+    }
+
+    // all the listeners are one time only
+    detailLoadedListeners = [];
+}
+
 messagingService.subscribeToSyncMessages(syncData => {
     if (syncData.some(sync => sync.entityName === 'notes' && sync.entityId === getCurrentNoteId())) {
         infoService.showMessage('Reloading note because of background changes');
@@ -308,11 +341,11 @@ export default {
     getCurrentNote,
     getCurrentNoteType,
     getCurrentNoteId,
-    newNoteCreated,
     focusOnTitle,
     saveNote,
     saveNoteIfChanged,
     noteChanged,
     getCurrentNoteContent,
-    onNoteChange
+    onNoteChange,
+    addDetailLoadedListener
 };

src/public/javascripts/services/note_detail_code.js

@@ -3,6 +3,7 @@ import bundleService from "./bundle.js";
 import infoService from "./info.js";
 import server from "./server.js";
 import noteDetailService from "./note_detail.js";
+import utils from "./utils.js";
 
 let codeEditor = null;
 
@@ -94,7 +95,7 @@ function onNoteChange(func) {
     codeEditor.on('change', func);
 }
 
-$(document).bind('keydown', "ctrl+return", executeCurrentNote);
+utils.bindShortcut("ctrl+return", executeCurrentNote);
 
 $executeScriptButton.click(executeCurrentNote);
 
@@ -107,5 +108,6 @@ export default {
         if (codeEditor) {
             codeEditor.setValue('');
         }
-    }
+    },
+    scrollToTop: () => $component.scrollTop(0)
 }

src/public/javascripts/services/note_detail_file.js

@@ -53,5 +53,6 @@ export default {
     getContent: () => null,
     focus: () => null,
     onNoteChange: () => null,
-    cleanup: () => null
+    cleanup: () => null,
+    scrollToTop: () => null
 }

src/public/javascripts/services/note_detail_image.js

@@ -71,5 +71,6 @@ export default {
     getContent: () => null,
     focus: () => null,
     onNoteChange: () => null,
-    cleanup: () => null
+    cleanup: () => null,
+    scrollToTop: () => $component.scrollTop(0)
 }

src/public/javascripts/services/note_detail_relation_map.js

@@ -9,6 +9,7 @@ import attributeAutocompleteService from "./attribute_autocomplete.js";
 import promptDialog from "../dialogs/prompt.js";
 import infoDialog from "../dialogs/info.js";
 import confirmDialog from "../dialogs/confirm.js";
+import ContextMenuItemsContainer from "./context_menu_items_container.js";
 
 const $component = $("#note-detail-relation-map");
 const $relationMapContainer = $("#relation-map-container");
@@ -80,7 +81,16 @@ const linkOverlays = [
 function loadMapData() {
     const currentNote = noteDetailService.getCurrentNote();
     mapData = {
-        notes: []
+        notes: [],
+        // it is important to have this exact value here so that initial transform is same as this
+        // which will guarantee note won't be saved on first conversion to relation map note type
+        // this keeps the principle that note type change doesn't destroy note content unless user
+        // does some actual change
+        transform: {
+            x: 0,
+            y: 0,
+            scale: 1
+        }
     };
 
     if (currentNote.content) {
@@ -304,9 +314,9 @@ function connectionContextMenuHandler(connection, event) {
     event.preventDefault();
     event.stopPropagation();
 
-    const contextMenuItems = [ {title: "Remove relation", cmd: "remove", uiIcon: "trash"} ];
+    const contextMenuItemsContainer = new ContextMenuItemsContainer([ {title: "Remove relation", cmd: "remove", uiIcon: "trash"} ]);
 
-    contextMenuWidget.initContextMenu(event, contextMenuItems, async (event, cmd) => {
+    contextMenuWidget.initContextMenu(event, contextMenuItemsContainer, async (event, cmd) => {
         if (cmd === 'remove') {
             if (!await confirmDialog.confirm("Are you sure you want to remove the relation?")) {
                 return;
@@ -380,12 +390,12 @@ async function connectionCreatedHandler(info, originalEvent) {
 }
 
 $relationMapContainer.on("contextmenu", ".note-box", e => {
-    const contextMenuItems = [
+    const contextMenuItemsContainer = new ContextMenuItemsContainer([
         {title: "Remove note", cmd: "remove", uiIcon: "trash"},
         {title: "Edit title", cmd: "edit-title", uiIcon: "pencil"},
-    ];
+    ]);
 
-    contextMenuWidget.initContextMenu(e, contextMenuItems, noteContextMenuHandler);
+    contextMenuWidget.initContextMenu(e, contextMenuItemsContainer, noteContextMenuHandler);
 
     return false;
 });
@@ -566,5 +576,6 @@ export default {
     getContent: () => JSON.stringify(mapData),
     focus: () => null,
     onNoteChange: () => null,
-    cleanup
+    cleanup,
+    scrollToTop: () => null
 }

src/public/javascripts/services/note_detail_render.js

@@ -37,5 +37,6 @@ export default {
     getContent: () => "",
     focus: () => null,
     onNoteChange: () => null,
-    cleanup: () => $noteDetailRenderContent.empty()
+    cleanup: () => $noteDetailRenderContent.empty(),
+    scrollToTop: () => $component.scrollTop(0)
 }

src/public/javascripts/services/note_detail_search.js

@@ -1,10 +1,13 @@
 import noteDetailService from "./note_detail.js";
+import treeService from "./tree.js";
+import infoService from './info.js';
 
 const $searchString = $("#search-string");
 const $component = $('#note-detail-search');
+const $refreshButton = $('#note-detail-search-refresh-results-button');
 
 function getContent() {
-    JSON.stringify({
+    return JSON.stringify({
         searchString: $searchString.val()
     });
 }
@@ -25,10 +28,19 @@ function show() {
     $searchString.on('input', noteDetailService.noteChanged);
 }
 
+$refreshButton.click(async () => {
+    await noteDetailService.saveNoteIfChanged();
+
+    treeService.reload();
+
+    infoService.showMessage('Tree has been refreshed.');
+});
+
 export default {
     getContent,
     show,
     focus: () => null,
     onNoteChange: () => null,
-    cleanup: () => null
+    cleanup: () => null,
+    scrollToTop: () => null
 }

src/public/javascripts/services/note_detail_text.js

@@ -74,5 +74,6 @@ export default {
         if (textEditor) {
             textEditor.setData('');
         }
-    }
+    },
+    scrollToTop: () => $component.scrollTop(0)
 }

src/public/javascripts/services/note_tooltip.js

@@ -3,64 +3,72 @@ import treeUtils from "./tree_utils.js";
 import linkService from "./link.js";
 import server from "./server.js";
 
-function setupTooltip() {
-    $(document).on("mouseenter", "a", async function() {
-        const $link = $(this);
-
-        if ($link.hasClass("no-tooltip-preview") || $link.hasClass("disabled")) {
-            return;
-        }
-
-        // this is to avoid showing tooltip from inside CKEditor link editor dialog
-        if ($link.closest(".ck-link-actions").length) {
-            return;
-        }
-
-        let notePath = linkService.getNotePathFromUrl($link.attr("href"));
-
-        if (!notePath) {
-            notePath = $link.attr("data-note-path");
-        }
-
-        if (!notePath) {
-            return;
-        }
-
-        const noteId = treeUtils.getNoteIdFromNotePath(notePath);
-
-        const notePromise = noteDetailService.loadNote(noteId);
-        const attributePromise = server.get('notes/' + noteId + '/attributes');
-
-        const [note, attributes] = await Promise.all([notePromise, attributePromise]);
-
-        const html = await renderTooltip(note, attributes);
-
-        // we need to check if we're still hovering over the element
-        // since the operation to get tooltip content was async, it is possible that
-        // we now create tooltip which won't close because it won't receive mouseleave event
-        if ($(this).is(":hover")) {
-            $(this).tooltip({
-                delay: {"show": 300, "hide": 100},
-                container: 'body',
-                placement: 'auto',
-                trigger: 'manual',
-                boundary: 'window',
-                title: html,
-                html: true
-            });
-
-            $(this).tooltip('show');
-        }
-    });
-
-    $(document).on("mouseleave", "a", function() {
-        $(this).tooltip('dispose');
-    });
+function setupGlobalTooltip() {
+    $(document).on("mouseenter", "a", mouseEnterHandler);
+    $(document).on("mouseleave", "a", mouseLeaveHandler);
 
     // close any tooltip after click, this fixes the problem that sometimes tooltips remained on the screen
     $(document).on("click", () => $('.tooltip').remove());
 }
 
+function setupElementTooltip($el) {
+    $el.on('mouseenter', mouseEnterHandler);
+    $el.on('mouseleave', mouseLeaveHandler);
+}
+
+async function mouseEnterHandler() {
+    const $link = $(this);
+
+    if ($link.hasClass("no-tooltip-preview") || $link.hasClass("disabled")) {
+        return;
+    }
+
+    // this is to avoid showing tooltip from inside CKEditor link editor dialog
+    if ($link.closest(".ck-link-actions").length) {
+        return;
+    }
+
+    let notePath = linkService.getNotePathFromUrl($link.attr("href"));
+
+    if (!notePath) {
+        notePath = $link.attr("data-note-path");
+    }
+
+    if (!notePath) {
+        return;
+    }
+
+    const noteId = treeUtils.getNoteIdFromNotePath(notePath);
+
+    const notePromise = noteDetailService.loadNote(noteId);
+    const attributePromise = server.get('notes/' + noteId + '/attributes');
+
+    const [note, attributes] = await Promise.all([notePromise, attributePromise]);
+
+    const html = await renderTooltip(note, attributes);
+
+    // we need to check if we're still hovering over the element
+    // since the operation to get tooltip content was async, it is possible that
+    // we now create tooltip which won't close because it won't receive mouseleave event
+    if ($(this).is(":hover")) {
+        $(this).tooltip({
+            delay: {"show": 300, "hide": 100},
+            container: 'body',
+            placement: 'auto',
+            trigger: 'manual',
+            boundary: 'window',
+            title: html,
+            html: true
+        });
+
+        $(this).tooltip('show');
+    }
+}
+
+function mouseLeaveHandler() {
+    $(this).tooltip('dispose');
+}
+
 async function renderTooltip(note, attributes) {
     let content = '';
     const promoted = attributes.filter(attr =>
@@ -103,7 +111,9 @@ async function renderTooltip(note, attributes) {
     }
 
     if (note.type === 'text') {
-        content += note.content;
+        // surround with <div> for a case when note.content is pure text (e.g. "[protected]") which
+        // then fails the jquery non-empty text test
+        content += '<div>' + note.content + '</div>';
     }
     else if (note.type === 'code') {
         content += $("<pre>")
@@ -125,5 +135,6 @@ async function renderTooltip(note, attributes) {
 }
 
 export default {
-    setupTooltip
+    setupGlobalTooltip,
+    setupElementTooltip
 }

src/public/javascripts/services/note_type.js

@@ -44,7 +44,7 @@ const DEFAULT_MIME_TYPES = [
     { mime: 'text/x-yaml', title: 'YAML' }
 ];
 
-const noteTypeModel = new NoteTypeModel();
+let noteTypeModel;
 
 function NoteTypeModel() {
     const self = this;
@@ -153,7 +153,11 @@ function NoteTypeModel() {
     }
 }
 
-ko.applyBindings(noteTypeModel, document.getElementById('note-type-wrapper'));
+function init() {
+    noteTypeModel = new NoteTypeModel();
+
+    ko.applyBindings(noteTypeModel, document.getElementById('note-type-wrapper'));
+}
 
 export default {
     getNoteType: () => noteTypeModel.type(),
@@ -168,5 +172,6 @@ export default {
 
     getDefaultCodeMimeTypes: () => DEFAULT_MIME_TYPES.slice(),
     getCodeMimeTypes: () => noteTypeModel.codeMimeTypes(),
-    setCodeMimeTypes: types => noteTypeModel.codeMimeTypes(types)
+    setCodeMimeTypes: types => noteTypeModel.codeMimeTypes(types),
+    init
 };

src/public/javascripts/services/protected_session.js

@@ -6,13 +6,16 @@ import protectedSessionHolder from './protected_session_holder.js';
 import infoService from "./info.js";
 
 const $dialog = $("#protected-session-password-dialog");
-const $passwordForm = $("#protected-session-password-form");
-const $password = $("#protected-session-password");
+const $component = $("#protected-session-password-component");
+const $passwordForms = $(".protected-session-password-form");
+const $passwordInputs = $(".protected-session-password");
+const $passwordInModal = $("#protected-session-password-in-modal");
 const $noteDetailWrapper = $("#note-detail-wrapper");
 const $protectButton = $("#protect-button");
 const $unprotectButton = $("#unprotect-button");
 const $enterProtectedSessionButton = $("#enter-protected-session-button");
 const $leaveProtectedSessionButton = $("#leave-protected-session-button");
+const $noteTitle = $("#note-title");
 
 let protectedSessionDeferred = null;
 
@@ -36,12 +39,19 @@ function ensureProtectedSession(requireProtectedSession, modal) {
         // using deferred instead of promise because it allows resolving from outside
         protectedSessionDeferred = dfd;
 
-        if (treeService.getCurrentNode().data.isProtected) {
-            $noteDetailWrapper.hide();
-        }
+        // user shouldn't be able to edit note title
+        $noteTitle.prop("readonly", true);
 
-        $dialog.toggleClass("modalless", !modal);
-        $dialog.modal();
+        if (modal) {
+            if (treeService.getCurrentNode().data.isProtected) {
+                $noteDetailWrapper.hide();
+            }
+
+            $dialog.modal();
+        }
+        else {
+            $component.show();
+        }
     }
     else {
         dfd.resolve(false);
@@ -50,9 +60,8 @@ function ensureProtectedSession(requireProtectedSession, modal) {
     return dfd.promise();
 }
 
-async function setupProtectedSession() {
-    const password = $password.val();
-    $password.val("");
+async function setupProtectedSession(password) {
+    $passwordInputs.val("");
 
     const response = await enterProtectedSessionOnServer(password);
 
@@ -72,7 +81,7 @@ async function setupProtectedSession() {
     await noteDetailService.reload();
 
     if (protectedSessionDeferred !== null) {
-        ensureDialogIsClosed($dialog, $password);
+        ensureDialogIsClosed();
 
         $noteDetailWrapper.show();
 
@@ -93,7 +102,7 @@ function ensureDialogIsClosed() {
     }
     catch (e) {}
 
-    $password.val('');
+    $passwordInputs.val('');
 }
 
 async function enterProtectedSessionOnServer(password) {
@@ -116,7 +125,7 @@ async function protectNoteAndSendToServer() {
 
     treeService.setProtected(note.noteId, note.isProtected);
 
-    noteDetailService.setNoteBackgroundIfProtected(note);console.log(note);
+    noteDetailService.setNoteBackgroundIfProtected(note);
 }
 
 async function unprotectNoteAndSendToServer() {
@@ -157,32 +166,24 @@ async function protectSubtree(noteId, protect) {
     noteDetailService.reload();
 }
 
-$passwordForm.submit(() => {
-    setupProtectedSession();
+$passwordForms.submit(function() { // needs to stay as function
+    const password = $(this).find(".protected-session-password").val();
+
+    setupProtectedSession(password);
 
     return false;
 });
 
-// this doesn't work, event is not triggered :/
-$dialog.on("show.bs.modal", e => function() {
-    if ($(this).hasClass("modalless")) {
-        // return "stolen" focus to tree
-        treeService.getCurrentNode().setFocus();
-    }
-    else {
-        $password.focus();
-    }
-});
-
 $protectButton.click(protectNoteAndSendToServer);
 $unprotectButton.click(unprotectNoteAndSendToServer);
 
-$dialog.on("shown.bs.modal", e => $password.focus());
+$dialog.on("shown.bs.modal", e => $passwordInModal.focus());
 
 export default {
     ensureProtectedSession,
     protectSubtree,
     ensureDialogIsClosed,
     enterProtectedSession,
-    leaveProtectedSession
+    leaveProtectedSession,
+    protectNoteAndSendToServer
 };

src/public/javascripts/services/search_notes.js

@@ -87,7 +87,7 @@ $searchInput.keyup(e => {
     if (e && e.which === $.ui.keyCode.ENTER) {
         doSearch();
     }
-}).focus();
+});
 
 $doSearchButton.click(() => doSearch()); // keep long form because of argument
 $resetSearchButton.click(resetSearch);

src/public/javascripts/services/tree.js

@@ -83,6 +83,10 @@ async function setNodeTitleWithPrefix(node) {
     node.setTitle(utils.escapeHtml(title));
 }
 
+function getNode(childNoteId, parentNoteId) {
+    return getNodesByNoteId(childNoteId).find(node => !parentNoteId || node.data.parentNoteId === parentNoteId);
+}
+
 async function expandToNote(notePath, expandOpts) {
     utils.assertArguments(notePath);
 
@@ -90,33 +94,56 @@ async function expandToNote(notePath, expandOpts) {
 
     const noteId = treeUtils.getNoteIdFromNotePath(notePath);
 
+    const hoistedNoteId = await hoistedNoteService.getHoistedNoteId();
+    let hoistedNoteFound = false;
+
     let parentNoteId = null;
 
     for (const childNoteId of runPath) {
-        // for first node (!parentNoteId) it doesn't matter which node is found
-        const node = getNodesByNoteId(childNoteId).find(node => !parentNoteId || node.data.parentNoteId === parentNoteId);
-
-        if (!node) {
-            console.error(`Can't find node for noteId=${childNoteId} with parentNoteId=${parentNoteId}`);
+        if (childNoteId === hoistedNoteId) {
+            hoistedNoteFound = true;
         }
 
-        if (childNoteId === noteId) {
-            return node;
-        }
-        else {
-            await node.setExpanded(true, expandOpts);
+        // we expand only after hoisted note since before then nodes are not actually present in the tree
+        if (hoistedNoteFound) {
+            // for first node (!parentNoteId) it doesn't matter which node is found
+            let node = getNode(childNoteId, parentNoteId);
+
+            if (!node && parentNoteId) {
+                const parents = getNodesByNoteId(parentNoteId);
+
+                for (const parent of parents) {
+                    // force load parents. This is useful when fancytree doesn't contain recently created notes yet.
+                    await parent.load(true);
+                }
+
+                node = getNode(childNoteId, parentNoteId);
+            }
+
+            if (!node) {
+                console.error(`Can't find node for noteId=${childNoteId} with parentNoteId=${parentNoteId}`);
+            }
+
+            if (childNoteId === noteId) {
+                return node;
+            } else {
+                await node.setExpanded(true, expandOpts);
+            }
         }
 
         parentNoteId = childNoteId;
     }
 }
 
-async function activateNote(notePath, newNote) {
+async function activateNote(notePath, noteLoadedListener) {
     utils.assertArguments(notePath);
 
+    // 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);
     const hoistedNoteId = await hoistedNoteService.getHoistedNoteId();
 
-    if (hoistedNoteId !== 'root' && !notePath.includes(hoistedNoteId)) {
+    if (hoistedNoteId !== 'root' && !runNotePath.includes(hoistedNoteId)) {
         if (!await confirmDialog.confirm("Requested note is outside of hoisted note subtree. Do you want to unhoist?")) {
             return;
         }
@@ -131,8 +158,8 @@ async function activateNote(notePath, newNote) {
 
     const node = await expandToNote(notePath);
 
-    if (newNote) {
-        noteDetailService.newNoteCreated();
+    if (noteLoadedListener) {
+        noteDetailService.addDetailLoadedListener(node.data.noteId, noteLoadedListener);
     }
 
     // we use noFocus because when we reload the tree because of background changes
@@ -337,6 +364,11 @@ function clearSelectedNodes() {
 }
 
 async function treeInitialized() {
+    // - is used in mobile to indicate that we don't want to activate any note after load
+    if (startNotePath === '-') {
+        return;
+    }
+
     const noteId = treeUtils.getNoteIdFromNotePath(startNotePath);
 
     if (!await treeCache.getNote(noteId)) {
@@ -359,7 +391,7 @@ function initFancyTree(tree) {
     $tree.fancytree({
         autoScroll: true,
         keyboard: false, // we takover keyboard handling in the hotkeys plugin
-        extensions: ["hotkeys", "filter", "dnd5", "clones"],
+        extensions: ["hotkeys", "dnd5", "clones"],
         source: tree,
         scrollParent: $tree,
         minExpandLevel: 2, // root can't be collapsed
@@ -397,18 +429,6 @@ function initFancyTree(tree) {
         hotkeys: {
             keydown: treeKeyBindings
         },
-        filter: {
-            autoApply: true,   // Re-apply last filter if lazy data is loaded
-            autoExpand: true, // Expand all branches that contain matches while filtered
-            counter: false,     // Show a badge with number of matching child nodes near parent icons
-            fuzzy: false,      // Match single characters in order, e.g. 'fb' will match 'FooBar'
-            hideExpandedCounter: true,  // Hide counter badge if parent is expanded
-            hideExpanders: false,       // Hide expanders if all child nodes are hidden by filter
-            highlight: true,   // Highlight matches by wrapping inside <mark> tags
-            leavesOnly: false, // Match end nodes only
-            nodata: true,      // Display a 'no data' status node if result is empty
-            mode: "hide"       // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
-        },
         dnd5: dragAndDropSetup,
         lazyLoad: function(event, data) {
             const noteId = data.node.data.noteId;
@@ -418,20 +438,34 @@ function initFancyTree(tree) {
         clones: {
             highlightActiveClones: true
         },
-        renderNode: async function (event, data) {
+        enhanceTitle: async function (event, data) {
             const node = data.node;
+            const $span = $(node.span);
+
+            if (node.data.noteId !== 'root'
+                && node.data.noteId === await hoistedNoteService.getHoistedNoteId()
+                && $span.find('.unhoist-button').length === 0) {
 
-            if (node.data.noteId !== 'root' && node.data.noteId === await hoistedNoteService.getHoistedNoteId()) {
                 const unhoistButton = $('<span>&nbsp; (<a class="unhoist-button">unhoist</a>)</span>');
 
-                $(node.span).append(unhoistButton);
+                $span.append(unhoistButton);
             }
+        },
+        // this is done to automatically lazy load all expanded search notes after tree load
+        loadChildren: function(event, data) {
+            data.node.visit(function(subNode){
+                // Load all lazy/unloaded child nodes
+                // (which will trigger `loadChildren` recursively)
+                if( subNode.isUndefined() && subNode.isExpanded() ) {
+                    subNode.load();
+                }
+            });
         }
     });
 
     $tree.on('contextmenu', '.fancytree-node', function(e) {
-        treeContextMenuService.getContextMenuItems(e).then(contextMenuItems => {
-            contextMenuWidget.initContextMenu(e, contextMenuItems, treeContextMenuService.selectContextMenuItem);
+        treeContextMenuService.getContextMenuItems(e).then(contextMenuItemContainer => {
+            contextMenuWidget.initContextMenu(e, contextMenuItemContainer, treeContextMenuService.selectContextMenuItem);
         });
 
         return false; // blocks default browser right click menu
@@ -554,7 +588,7 @@ async function createNote(node, parentNoteId, target, isProtected, saveSelection
 
     await noteDetailService.saveNoteIfChanged();
 
-    noteDetailService.newNoteCreated();
+    noteDetailService.addDetailLoadedListener(note.noteId, noteDetailService.focusOnTitle);
 
     const noteEntity = new NoteShort(treeCache, note);
     const branchEntity = new Branch(treeCache, branch);
@@ -641,11 +675,15 @@ messagingService.subscribeToSyncMessages(syncData => {
     }
 });
 
-utils.bindShortcut('ctrl+o', () => {
+utils.bindShortcut('ctrl+o', async () => {
     const node = getCurrentNode();
     const parentNoteId = node.data.parentNoteId;
     const isProtected = treeUtils.getParentProtectedStatus(node);
 
+    if (node.data.noteId === 'root' || node.data.noteId === await hoistedNoteService.getHoistedNoteId()) {
+        return;
+    }
+
     createNote(node, parentNoteId, 'after', isProtected, true);
 });
 
@@ -664,7 +702,7 @@ utils.bindShortcut('ctrl+.', scrollToCurrentNote);
 $(window).bind('hashchange', function() {
     const notePath = getNotePathFromAddress();
 
-    if (getCurrentNotePath() !== notePath) {
+    if (notePath !== '-' && getCurrentNotePath() !== notePath) {
         console.debug("Switching to " + notePath + " because of hash change");
 
         activateNote(notePath);
@@ -693,8 +731,12 @@ export default {
     setPrefix,
     createNewTopLevelNote,
     createNote,
+    createNoteInto,
     getSelectedNodes,
     clearSelectedNodes,
     sortAlphabetically,
-    showTree
+    showTree,
+    loadTree,
+    treeInitialized,
+    setExpandedToServer
 };

src/public/javascripts/services/tree_builder.js

@@ -86,7 +86,7 @@ async function prepareNode(branch) {
         extraClasses: await getExtraClasses(note),
         icon: await getIcon(note),
         refKey: note.noteId,
-        expanded: (note.type !== 'search' && branch.isExpanded) || hoistedNoteId === note.noteId
+        expanded: branch.isExpanded || hoistedNoteId === note.noteId
     };
 
     if (note.hasChildren() || note.type === 'search') {

src/public/javascripts/services/tree_cache.js

@@ -158,7 +158,11 @@ class TreeCache {
             return;
         }
 
-        treeCache.childParentToBranch[childNoteId + '-' + newParentNoteId] = treeCache.childParentToBranch[childNoteId + '-' + oldParentNoteId];
+        const branchId = treeCache.childParentToBranch[childNoteId + '-' + oldParentNoteId];
+        const branch = await this.getBranch(branchId);
+        branch.parentNoteId = newParentNoteId;
+
+        treeCache.childParentToBranch[childNoteId + '-' + newParentNoteId] = branchId;
         delete treeCache.childParentToBranch[childNoteId + '-' + oldParentNoteId]; // this is correct because we know that oldParentId isn't same as newParentId
 
         // remove old associations

src/public/javascripts/services/tree_context_menu.js

@@ -11,8 +11,7 @@ import infoService from "./info.js";
 import treeCache from "./tree_cache.js";
 import syncService from "./sync.js";
 import hoistedNoteService from './hoisted_note.js';
-
-const $tree = $("#tree");
+import ContextMenuItemsContainer from './context_menu_items_container.js';
 
 let clipboardIds = [];
 let clipboardMode = null;
@@ -79,12 +78,12 @@ function cut(nodes) {
 }
 
 const contextMenuItems = [
-    {title: "Insert note here <kbd>Ctrl+O</kbd>", cmd: "insertNoteHere", uiIcon: "plus"},
+    {title: "Insert note after <kbd>Ctrl+O</kbd>", cmd: "insertNoteAfter", uiIcon: "plus"},
     {title: "Insert child note <kbd>Ctrl+P</kbd>", cmd: "insertChildNote", uiIcon: "plus"},
-    {title: "Delete", cmd: "delete", uiIcon: "trash"},
+    {title: "Delete <kbd>Delete</kbd>", cmd: "delete", uiIcon: "trash"},
     {title: "----"},
-    {title: "Hoist note <kbd>CTRL-H</kbd>", cmd: "hoist", uiIcon: "arrow-up"},
-    {title: "Unhoist note <kbd>CTRL-H</kbd>", cmd: "unhoist", uiIcon: "arrow-up"},
+    {title: "Hoist note <kbd>Ctrl-H</kbd>", cmd: "hoist", uiIcon: "arrow-up"},
+    {title: "Unhoist note <kbd>Ctrl-H</kbd>", cmd: "unhoist", uiIcon: "arrow-up"},
     {title: "Edit branch prefix <kbd>F2</kbd>", cmd: "editBranchPrefix", uiIcon: "pencil"},
     {title: "----"},
     {title: "Protect subtree", cmd: "protectSubtree", uiIcon: "shield-check"},
@@ -103,49 +102,30 @@ const contextMenuItems = [
     {title: "Sort alphabetically <kbd>Alt+S</kbd>", cmd: "sortAlphabetically", uiIcon: "arrows-v"}
 ];
 
-function hideItem(cmd, hidden) {
-    const item = contextMenuItems.find(item => item.cmd === cmd);
-
-    if (!item) {
-        throw new Error(`Command ${cmd} has not been found!`);
-    }
-
-    item.hidden = hidden;
-}
-
-function enableItem(cmd, enabled) {
-    const item = contextMenuItems.find(item => item.cmd === cmd);
-    
-    if (!item) {
-        throw new Error(`Command ${cmd} has not been found!`);
-    }
-    
-    item.enabled = enabled;
-}
-
 async function getContextMenuItems(event) {
     const node = $.ui.fancytree.getNode(event);
     const branch = await treeCache.getBranch(node.data.branchId);
     const note = await treeCache.getNote(node.data.noteId);
     const parentNote = await treeCache.getNote(branch.parentNoteId);
     const isNotRoot = note.noteId !== 'root';
+    const isHoisted = note.noteId === await hoistedNoteService.getHoistedNoteId();
+
+    const itemsContainer = new ContextMenuItemsContainer(contextMenuItems);
 
     // Modify menu entries depending on node status
-    enableItem("insertNoteHere", isNotRoot && parentNote.type !== 'search');
-    enableItem("insertChildNote", note.type !== 'search');
-    enableItem("delete", isNotRoot && parentNote.type !== 'search');
-    enableItem("copy", isNotRoot);
-    enableItem("cut", isNotRoot);
-    enableItem("pasteAfter", clipboardIds.length > 0 && isNotRoot && parentNote.type !== 'search');
-    enableItem("pasteInto", clipboardIds.length > 0 && note.type !== 'search');
-    enableItem("importIntoNote", note.type !== 'search');
-    enableItem("export", note.type !== 'search');
-    enableItem("editBranchPrefix", isNotRoot && parentNote.type !== 'search');
+    itemsContainer.enableItem("insertNoteAfter", isNotRoot && !isHoisted && parentNote.type !== 'search');
+    itemsContainer.enableItem("insertChildNote", note.type !== 'search');
+    itemsContainer.enableItem("delete", isNotRoot && parentNote.type !== 'search');
+    itemsContainer.enableItem("copy", isNotRoot);
+    itemsContainer.enableItem("cut", isNotRoot);
+    itemsContainer.enableItem("pasteAfter", clipboardIds.length > 0 && isNotRoot && parentNote.type !== 'search');
+    itemsContainer.enableItem("pasteInto", clipboardIds.length > 0 && note.type !== 'search');
+    itemsContainer.enableItem("importIntoNote", note.type !== 'search');
+    itemsContainer.enableItem("export", note.type !== 'search');
+    itemsContainer.enableItem("editBranchPrefix", isNotRoot && parentNote.type !== 'search');
 
-    const hoistedNoteId = await hoistedNoteService.getHoistedNoteId();
-
-    hideItem("hoist", note.noteId === hoistedNoteId);
-    hideItem("unhoist", note.noteId !== hoistedNoteId || !isNotRoot);
+    itemsContainer.hideItem("hoist", isHoisted);
+    itemsContainer.hideItem("unhoist", !isHoisted || !isNotRoot);
 
     // Activate node on right-click
     node.setActive();
@@ -156,14 +136,14 @@ async function getContextMenuItems(event) {
     node.setSelected(true);
     treeService.clearSelectedNodes();
 
-    return contextMenuItems;
+    return itemsContainer;
 }
 
 function selectContextMenuItem(event, cmd) {
     // context menu is always triggered on current node
     const node = treeService.getCurrentNode();
 
-    if (cmd === "insertNoteHere") {
+    if (cmd === "insertNoteAfter") {
         const parentNoteId = node.data.parentNoteId;
         const isProtected = treeUtils.getParentProtectedStatus(node);
 

src/public/javascripts/services/utils.js

@@ -136,11 +136,33 @@ function randomString(len) {
 }
 
 function bindShortcut(keyboardShortcut, handler) {
-    $(document).bind('keydown', keyboardShortcut, e => {
-        handler();
+    if (isDesktop()) {
+        if (isMac()) {
+            // use CMD (meta) instead of CTRL for all shortcuts
+            keyboardShortcut = keyboardShortcut.replace("ctrl", "meta");
+        }
 
-        e.preventDefault();
-    });
+        $(document).bind('keydown', keyboardShortcut, e => {
+            handler();
+
+            e.preventDefault();
+        });
+    }
+}
+
+function isMobile() {
+    return window.device === "mobile";
+}
+
+function isDesktop() {
+    return window.device === "desktop";
+}
+
+function setCookie(name, value) {
+    const date = new Date(Date.now() + 10 * 365 * 24 * 60 * 60 * 1000);
+    const expires = "; expires=" + date.toUTCString();
+
+    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
 }
 
 export default {
@@ -166,5 +188,8 @@ export default {
     download,
     toObject,
     randomString,
-    bindShortcut
+    bindShortcut,
+    isMobile,
+    isDesktop,
+    setCookie
 };

src/public/javascripts/setup.js

@@ -1,4 +1,7 @@
 import utils from "./services/utils.js";
+import macInit from './services/mac_init.js';
+
+macInit.init();
 
 function SetupModel() {
     if (syncInProgress) {
@@ -25,26 +28,20 @@ function SetupModel() {
 
     this.instanceType = utils.isElectron() ? "desktop" : "server";
 
-    this.setupTypeSelected = this.getSetupType = () =>
-        this.setupNewDocument()
-        || this.setupSyncFromDesktop()
-        || this.setupSyncFromServer();
+    this.setupTypeSelected = () => !!this.setupType();
 
     this.selectSetupType = () => {
-        this.step(this.getSetupType());
-        this.setupType(this.getSetupType());
+        this.step(this.setupType());
     };
 
     this.back = () => {
         this.step("setup-type");
 
-        this.setupNewDocument(false);
-        this.setupSyncFromServer(false);
-        this.setupSyncFromDesktop(false);
+        this.setupType("");
     };
 
     this.finish = async () => {
-        if (this.setupNewDocument()) {
+        if (this.setupType() === 'new-document') {
             const username = this.username();
             const password1 = this.password1();
             const password2 = this.password2();
@@ -72,7 +69,7 @@ function SetupModel() {
                 window.location.replace("/");
             });
         }
-        else if (this.setupSyncFromServer()) {
+        else if (this.setupType() === 'sync-from-server') {
             const syncServerHost = this.syncServerHost();
             const syncProxy = this.syncProxy();
             const username = this.username();

src/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

src/public/stylesheets/desktop.css

@@ -0,0 +1,88 @@
+#container {
+    margin: 0 auto; /* center */
+    height: 100vh;
+
+    display: grid;
+    grid-template-areas: "header header"
+    "left-pane title"
+    "left-pane note-detail";
+    grid-template-rows: auto
+    auto
+    1fr;
+
+    justify-content: center;
+    grid-gap: 10px;
+}
+
+#search-box {
+    display: none;
+    padding: 10px;
+    margin-top: 10px;
+}
+
+#tree {
+    overflow: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 60%;
+    margin-top: 10px;
+}
+
+#left-pane {
+    grid-area: left-pane;
+    display: flex;
+    flex-direction: column;
+}
+
+#header {
+    grid-area: header;
+    background-color: #f8f8f8;
+    display: flex;
+    align-items: center;
+    padding: 4px;
+}
+
+#header button {
+    padding: 1px 5px 1px 5px;
+    font-size: small;
+    margin-bottom: 2px;
+    margin-top: 2px;
+    margin-right: 8px;
+}
+
+#history-navigation {
+    margin: 0 15px 0 5px;
+    position: relative;
+    top: 2px;
+}
+
+#global-buttons {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px 0 10px 0;
+    margin: 0 20px 0 10px;
+    border: 1px solid #ddd;
+    border-radius: 7px;
+}
+
+#context-menu-container {
+    padding: 3px 0 0;
+}
+
+#context-menu-container .dropdown-item {
+    padding: 0 7px 0 10px;
+}
+
+.fancytree-loading span.fancytree-expander {
+    width: 16px;
+    height: 16px;
+    margin-left: 6px;
+}
+
+.fancytree-loading  span.fancytree-expander:after {
+    width: 12px;
+    height: 12px;
+    margin-top: 2px;
+    border-width: 1px;
+    border-style: solid;
+}

src/public/stylesheets/mobile.css

@@ -0,0 +1,105 @@
+html, body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+#container-row {
+    height: 100%;
+}
+
+#left-pane {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#global-buttons {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: space-around;
+    padding: 10px 0 10px 0;
+    margin: 0 10px 0 16px;
+}
+
+#tree {
+    font-size: larger;
+    width: 100%;
+    overflow: auto;
+}
+
+#tree .action-button {
+    position: relative;
+    top: -5px;
+    margin-left: 10px;
+}
+
+#detail {
+    padding: 5px 20px 10px 0px;
+    height: 100%;
+    flex-direction: column;
+}
+
+#detail-content {
+    position: relative;
+    overflow: auto;
+    flex-direction: column;
+    height: 100%;
+    /* large left padding is necessary for ckeditor gutter in detail-only (smartphone) layout */
+    padding-left: 35px;
+}
+
+#note-title-row {
+    display: flex;
+    padding-left: 15px;
+    flex-shrink: 0;
+}
+
+.action-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.5em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+
+.fancytree-custom-icon {
+    font-size: 2em;
+}
+
+.fancytree-title {
+    font-size: 1.5em;
+    margin-left: 0.6em !important;
+}
+
+.fancytree-node {
+    padding: 5px;
+}
+
+.fancytree-node .fancytree-expander:before {
+    font-size: 2em;
+}
+
+kbd {
+    display: none;
+}
+
+.dropdown-menu {
+    font-size: larger;
+}
+
+.fancytree-loading span.fancytree-expander {
+    width: 32px;
+    height: 32px;
+    margin-left: 4px;
+}
+
+.fancytree-loading  span.fancytree-expander:after {
+    width: 20px;
+    height: 20px;
+    margin: 4px;
+    border-width: 2px;
+    border-style: solid;
+}

src/public/stylesheets/style.css

@@ -2,61 +2,63 @@ body {
     /* Fix for CKEditor block gutter icon "stretching" body and causing scrollbar to appear after pressing enter
        on the last line of the editor. */
     position: fixed;
-}
-
-#container {
-    margin: 0 auto; /* center */
-    height: 100vh;
-
-    display: grid;
-    grid-template-areas: "header header"
-                         "left-pane title"
-                         "left-pane note-detail";
-    grid-template-rows: auto
-                        auto
-                        1fr;
-
-    justify-content: center;
-    grid-gap: 10px;
-}
-
-#header {
-    grid-area: header;
-    background-color: #f8f8f8;
-    display: flex;
-    align-items: center;
-    padding: 4px;
-}
-
-#header button {
-    padding: 1px 5px 1px 5px;
-    font-size: small;
-}
-
-#left-pane {
-    grid-area: left-pane;
-    display: flex;
-    flex-direction: column;
-}
-
-#global-buttons {
-    display: flex;
-    justify-content: space-around;
-    padding: 10px 0 10px 0;
-    margin: 0 10px 0 16px;
-    border: 1px solid #ccc;
-}
-
-#search-box {
-    display: none;
-    padding: 10px;
-    margin-top: 10px;
+    width: 100%;
 }
 
 #title-container {
     grid-area: title;
 }
 
+#note-title {
+    margin-left: 15px;
+    font-size: x-large;
+    border: 0;
+    width: 5em;
+    flex-grow: 100;
+}
+
+ul.fancytree-container {
+    /* override specific size from fancytree.css */
+    font-family: inherit !important;
+    font-size: inherit !important;
+}
+
+.fancytree-title {
+    margin-left: 7px !important;
+}
+
+.fancytree-node:not(.fancytree-loading) .fancytree-expander {
+    background: none;
+    width: auto;
+    height: auto;
+}
+
+.fancytree-node:not(.fancytree-loading) .fancytree-expander:before {
+    font-family: 'jam-icons' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    padding-left: 5px;
+    padding-right: 5px;
+    content: "\e9bc";
+}
+
+/* this is done to preserve correct indentation. Better solution would be preferable */
+.fancytree-node:not(.fancytree-folder) .fancytree-expander:before {
+    color: white;
+}
+
+.fancytree-node.fancytree-expanded .fancytree-expander:before {
+    content: "\e9ba";
+}
+
+#note-title[readonly] {
+    background: inherit;
+}
+
 .tdialog {
     display: none;
 }
@@ -79,6 +81,7 @@ body {
     height: 100%;
     display: flex;
     flex-direction: column;
+    min-height: 200px;
 }
 
 .note-detail-component {
@@ -139,8 +142,21 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
 
 /* By default not focused active tree item is not easily visible, this makes it more visible */
 span.fancytree-active:not(.fancytree-focused) .fancytree-title {
+    background-color: #eee !important;
+    border-color: #ddd !important;
+    border-radius: 3px;
+}
+
+span.fancytree-active.fancytree-focused .fancytree-title {
     background-color: #ddd !important;
-    border-color: #555 !important;
+    border-color: #bbb !important;
+    border-radius: 3px;
+}
+
+.fancytree-plain span.fancytree-node:hover span.fancytree-title {
+    background-color: #eee !important;
+    border-color: #bbb !important;
+    border-radius: 3px;
 }
 
 .ui-autocomplete {
@@ -163,17 +179,6 @@ span.fancytree-active:not(.fancytree-focused) .fancytree-title {
     color: #337ab7 !important;
 }
 
-#header-title {
-    padding: 5px 20px 5px 10px;
-    font-size: large;
-    font-weight: bold;
-}
-
-#header .btn-sm {
-    margin-bottom: 2px;
-    margin-right: 8px;
-}
-
 div.ui-tooltip {
     max-width: 600px;
     max-height: 600px;
@@ -185,14 +190,6 @@ div.ui-tooltip {
     width: auto;
 }
 
-#tree {
-    overflow: auto;
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 60%;
-    margin-top: 10px;
-}
-
 #search-results {
     padding: 0 5px 5px 15px;
     flex-basis: 40%;
@@ -328,6 +325,12 @@ div.ui-tooltip {
 
 .cm-matchhighlight {background-color: #eeeeee}
 
+#attribute-list {
+    overflow: auto;
+    /* limiting the size since actual note content is more important */
+    max-height: 30%;
+}
+
 #label-list, #relation-list, #attribute-list {
     color: #777777;
     padding: 5px;
@@ -387,13 +390,8 @@ div.ui-tooltip {
     height: 150px;
 }
 
-#history-navigation {
-    margin: 0 20px 0 5px;
-    display: flex;
-}
-
-.btn:not(.btn-primary):not(.btn-danger) {
-    border-color: #bbb;
+.btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
+    border-color: #ddd;
     background-color: #eee;
 }
 
@@ -451,8 +449,13 @@ html.theme-dark body {
 }
 
 #note-detail-promoted-attributes {
-    max-width: 70%;
     margin: auto;
+    /* setting the display to block since "table" doesn't support scrolling */
+    display: block;
+    flex-basis: content;
+    flex-shrink: 1;
+    flex-grow: 0;
+    overflow: auto;
 }
 
 #note-detail-promoted-attributes td, #note-detail-promoted-attributes th {
@@ -531,14 +534,6 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
     padding: 20px;
 }
 
-#context-menu-container {
-    padding: 3px 0 0;
-}
-
-#context-menu-container .dropdown-item {
-    padding: 0 7px 0 10px;
-}
-
 /* if modal height overflows, then only modal body scrolls */
 .modal-body {
     max-height: calc(100vh - 200px);
@@ -557,7 +552,8 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
     max-height: 300px;
     overflow: hidden;
     color: black;
-    border: 1px solid #aaa;
+    border: 1px solid #ccc;
+    border-radius: 5px;
     text-align: left;
 }
 
@@ -619,14 +615,6 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
     cursor: pointer;
 }
 
-.modalless {
-    top: 15%;
-    left: 40%;
-    bottom: auto;
-    right: auto;
-    margin-left: -300px;
-}
-
 .multiplicity {
     font-size: 1.3em;
 }
@@ -704,4 +692,42 @@ div[data-notify="container"] {
     text-decoration: underline !important;
     color: blue !important;
     cursor: pointer !important;
+}
+
+#protected-session-password-component {
+    max-width: 450px;
+    margin: auto;
+    padding-top: 50px;
+}
+
+.ck-editor__is-empty.ck-content.ck-editor__editable::before {
+    content: 'You can start writing note here ...';
+    position: absolute;
+    display: block;
+
+    margin: var(--ck-spacing-large) 0;
+
+    color: #aaa;
+}
+
+.fancytree-loading span.fancytree-expander {
+    background-image: none !important;
+    display: inline-block;
+}
+
+.fancytree-loading  span.fancytree-expander:after {
+    content: " ";
+    display: block;
+    border-radius: 50%;
+    border-color: #000 transparent #000 transparent;
+    animation: lds-dual-ring 1.2s linear infinite;
+}
+
+@keyframes lds-dual-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }

src/routes/api/import.js

@@ -7,6 +7,7 @@ const tarImportService = require('../../services/import/tar');
 const singleImportService = require('../../services/import/single');
 const cls = require('../../services/cls');
 const path = require('path');
+const noteCacheService = require('../../services/note_cache');
 
 async function importToBranch(req) {
     const parentNoteId = req.params.parentNoteId;
@@ -28,24 +29,32 @@ async function importToBranch(req) {
     // and may produce unintended consequences
     cls.disableEntityEvents();
 
+    let note; // typically root of the import - client can show it after finishing the import
+
     if (extension === '.tar') {
-        return await tarImportService.importTar(file.buffer, parentNote);
+        note = await tarImportService.importTar(file.buffer, parentNote);
     }
     else if (extension === '.opml') {
-        return await opmlImportService.importOpml(file.buffer, parentNote);
+        note = await opmlImportService.importOpml(file.buffer, parentNote);
     }
     else if (extension === '.md') {
-        return await singleImportService.importMarkdown(file, parentNote);
+        note = await singleImportService.importMarkdown(file, parentNote);
     }
     else if (extension === '.html' || extension === '.htm') {
-        return await singleImportService.importHtml(file, parentNote);
+        note = await singleImportService.importHtml(file, parentNote);
     }
     else if (extension === '.enex') {
-        return await enexImportService.importEnex(file, parentNote);
+        note = await enexImportService.importEnex(file, parentNote);
     }
     else {
         return [400, `Unrecognized extension ${extension}, must be .tar or .opml`];
     }
+
+    // import has deactivated note events so note cache is not updated
+    // instead we force it to reload (can be async)
+    noteCacheService.load();
+
+    return note;
 }
 
 module.exports = {

src/routes/api/login.js

@@ -10,6 +10,7 @@ const appInfo = require('../../services/app_info');
 const eventService = require('../../services/events');
 const cls = require('../../services/cls');
 const sqlInit = require('../../services/sql_init');
+const sql = require('../../services/sql');
 
 async function loginSync(req) {
     if (!await sqlInit.schemaExists()) {
@@ -22,7 +23,8 @@ async function loginSync(req) {
 
     const now = new Date();
 
-    if (Math.abs(timestamp.getTime() - now.getTime()) > 5000) {
+    // login token is valid for 5 minutes
+    if (Math.abs(timestamp.getTime() - now.getTime()) > 5 * 60 * 1000) {
         return [400, { message: 'Auth request time is out of sync' }];
     }
 
@@ -44,7 +46,8 @@ async function loginSync(req) {
     req.session.loggedIn = true;
 
     return {
-        sourceId: sourceIdService.getCurrentSourceId()
+        sourceId: sourceIdService.getCurrentSourceId(),
+        maxSyncId: await sql.getValue("SELECT MAX(id) FROM sync")
     };
 }
 

src/routes/index.js

@@ -9,7 +9,9 @@ const optionService = require('../services/options');
 async function index(req, res) {
     const options = await optionService.getOptionsMap();
 
-    res.render('index', {
+    const view = req.cookies['trilium-device'] === 'mobile' ? 'mobile' : 'desktop';
+
+    res.render(view, {
         theme: options.theme,
         leftPaneMinWidth: parseInt(options.leftPaneMinWidth),
         leftPaneWidthPercent: parseInt(options.leftPaneWidthPercent),

src/routes/routes.js

@@ -1,6 +1,6 @@
-const indexRoute = require('./index');
-const loginRoute = require('./login');
 const setupRoute = require('./setup');
+const loginRoute = require('./login');
+const indexRoute = require('./index');
 const multer = require('multer')();
 
 // API routes

src/services/anonymization.js

@@ -19,7 +19,6 @@ async function anonymize() {
     await db.run("UPDATE notes SET title = 'title', content = 'text'");
     await db.run("UPDATE note_revisions SET title = 'title', content = 'text'");
     await db.run("UPDATE branches SET prefix = 'prefix' WHERE prefix IS NOT NULL");
-    await db.run("UPDATE images SET data = NULL");
     await db.run(`UPDATE options SET value = 'anonymized' WHERE name IN 
                     ('documentSecret', 'encryptedDataKey', 'passwordVerificationHash', 
                      'passwordVerificationSalt', 'passwordDerivedKeySalt')`);

src/services/app_info.js

@@ -2,14 +2,16 @@
 
 const build = require('./build');
 const packageJson = require('../../package');
+const {TRILIUM_DATA_DIR} = require('./data_dir');
 
 const APP_DB_VERSION = 121;
-const SYNC_VERSION = 2;
+const SYNC_VERSION = 3;
 
 module.exports = {
     appVersion: packageJson.version,
     dbVersion: APP_DB_VERSION,
     syncVersion: SYNC_VERSION,
     buildDate: build.buildDate,
-    buildRevision: build.buildRevision
+    buildRevision: build.buildRevision,
+    dataDirectory: TRILIUM_DATA_DIR
 };

src/services/build.js

@@ -1 +1 @@
-module.exports = { buildDate:"2018-12-18T22:49:48+01:00", buildRevision: "f693dc31e82f1822b7393d12b53afdc0d06f5297" };
+module.exports = { buildDate:"2019-01-10T21:31:30+01:00", buildRevision: "0b251530fa0ee61edc8dcc9235033abb73afc614" };

src/services/build_search_query.js

@@ -23,9 +23,15 @@ module.exports = function(attributeFilters) {
             whereParams.push(filter.value);
         }
         else if ([">", ">=", "<", "<="].includes(filter.operator)) {
-            const floatParam = parseFloat(filter.value);
+            let floatParam;
 
-            if (isNaN(floatParam)) {
+            // from https://stackoverflow.com/questions/12643009/regular-expression-for-floating-point-numbers
+            if (/^[+-]?([0-9]*[.])?[0-9]+$/.test(filter.value)) {
+                floatParam = parseFloat(filter.value);
+            }
+
+            if (floatParam === undefined || isNaN(floatParam)) {
+                // if the value can't be parsed as float then we assume that string comparison should be used instead of numeric
                 where += `attribute${i}.value ${filter.operator} ?`;
                 whereParams.push(filter.value);
             }

src/services/content_hash.js

@@ -12,6 +12,7 @@ const Attribute = require('../entities/attribute');
 const NoteRevision = require('../entities/note_revision');
 const RecentNote = require('../entities/recent_note');
 const Option = require('../entities/option');
+const Link = require('../entities/link');
 
 async function getHash(entityConstructor, whereBranch) {
     // subselect is necessary to have correct ordering in GROUP_CONCAT
@@ -37,7 +38,8 @@ async function getHashes() {
         recent_notes: await getHash(RecentNote),
         options: await getHash(Option, "isSynced = 1"),
         attributes: await getHash(Attribute),
-        api_tokens: await getHash(ApiToken)
+        api_tokens: await getHash(ApiToken),
+        links: await getHash(Link)
     };
 
     const elapseTimeMs = new Date().getTime() - startTime.getTime();

src/services/data_dir.js

@@ -55,10 +55,6 @@ function getTriliumDataDir() {
 }
 
 const TRILIUM_DATA_DIR =  getTriliumDataDir();
-
-// not necessary to log this since if we have logs we already know where data dir is.
-console.log("Using data dir:", TRILIUM_DATA_DIR);
-
 const DOCUMENT_PATH = TRILIUM_DATA_DIR + "/document.db";
 const BACKUP_DIR = TRILIUM_DATA_DIR + "/backup";
 const LOG_DIR = TRILIUM_DATA_DIR + "/log";

src/services/events.js

@@ -5,13 +5,24 @@ const ENTER_PROTECTED_SESSION = "ENTER_PROTECTED_SESSION";
 const ENTITY_CREATED = "ENTITY_CREATED";
 const ENTITY_CHANGED = "ENTITY_CHANGED";
 const ENTITY_DELETED = "ENTITY_DELETED";
+const ENTITY_SYNCED = "ENTITY_SYNCED";
 const CHILD_NOTE_CREATED = "CHILD_NOTE_CREATED";
 
 const eventListeners = {};
 
-function subscribe(eventType, listener) {
-    eventListeners[eventType] = eventListeners[eventType] || [];
-    eventListeners[eventType].push(listener);
+/**
+ * @param eventTypes - can be either single event or an array of events
+ * @param listener
+ */
+function subscribe(eventTypes, listener) {
+    if (!Array.isArray(eventTypes)) {
+        eventTypes = [ eventTypes ];
+    }
+
+    for (const eventType of eventTypes) {
+        eventListeners[eventType] = eventListeners[eventType] || [];
+        eventListeners[eventType].push(listener);
+    }
 }
 
 async function emit(eventType, data) {
@@ -39,5 +50,6 @@ module.exports = {
     ENTITY_CREATED,
     ENTITY_CHANGED,
     ENTITY_DELETED,
+    ENTITY_SYNCED,
     CHILD_NOTE_CREATED
 };

src/services/image.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const repository = require('./repository');
+const log = require('./log');
 const protectedSessionService = require('./protected_session');
 const noteService = require('./notes');
 const imagemin = require('imagemin');
@@ -13,7 +14,13 @@ const sanitizeFilename = require('sanitize-filename');
 
 async function saveImage(buffer, originalName, parentNoteId) {
     const resizedImage = await resize(buffer);
-    const optimizedImage = await optimize(resizedImage);
+    let optimizedImage;
+    try {
+      optimizedImage = await optimize(resizedImage);
+    } catch (e) {
+      log.error(e);
+      optimizedImage = resizedImage;
+    }
 
     const imageFormat = imageType(optimizedImage);
 

src/services/import/enex.js

@@ -1,4 +1,5 @@
 const sax = require("sax");
+const fileType = require('file-type');
 const stream = require('stream');
 const xml2js = require('xml2js');
 const log = require("../log");
@@ -144,7 +145,7 @@ async function importEnex(file, parentNote) {
                 });
             }
             else if (currentTag === 'mime') {
-                resource.mime = text;
+                resource.mime = text.toLowerCase();
 
                 if (text.startsWith("image/")) {
                     resource.title = "image";
@@ -222,7 +223,26 @@ async function importEnex(file, parentNote) {
 
             const mediaRegex = new RegExp(`<en-media hash="${hash}"[^>]*>`, 'g');
 
-            if (resource.mime.startsWith("image/")) {
+            const fileTypeFromBuffer = fileType(resource.content);
+            if (fileTypeFromBuffer) {
+              // If fileType returns something for buffer, then set the mime given
+              resource.mime = fileTypeFromBuffer.mime;
+            }
+
+            const createResourceNote = async () => {
+              const resourceNote = (await noteService.createNote(noteEntity.noteId, resource.title, resource.content, {
+                attributes: resource.attributes,
+                type: 'file',
+                mime: resource.mime
+              })).note;
+
+              const resourceLink = `<a href="#root/${resourceNote.noteId}">${utils.escapeHtml(resource.title)}</a>`;
+
+              noteEntity.content = noteEntity.content.replace(mediaRegex, resourceLink);
+            }
+
+            if (["image/jpeg", "image/png", "image/gif"].includes(resource.mime)) {
+              try {
                 const originalName = "image." + resource.mime.substr(6);
 
                 const { url } = await imageService.saveImage(resource.content, originalName, noteEntity.noteId);
@@ -236,17 +256,13 @@ async function importEnex(file, parentNote) {
                     // otherwise image would be removed since no note would include it
                     note.content += imageLink;
                 }
+              } catch (e) {
+                log.error("error when saving image from ENEX file: " + e);
+                await createResourceNote();
+              }
             }
             else {
-                const resourceNote = (await noteService.createNote(noteEntity.noteId, resource.title, resource.content, {
-                    attributes: resource.attributes,
-                    type: 'file',
-                    mime: resource.mime
-                })).note;
-
-                const resourceLink = `<a href="#root/${resourceNote.noteId}">${utils.escapeHtml(resource.title)}</a>`;
-
-                noteEntity.content = noteEntity.content.replace(mediaRegex, resourceLink);
+              await createResourceNote();
             }
         }
 

src/services/log.js

@@ -45,8 +45,6 @@ function request(req) {
     logger.info(req.method + " " + req.url);
 }
 
-info("Using data dir: " + dataDir.TRILIUM_DATA_DIR);
-
 module.exports = {
     info,
     error,

src/services/messaging.js

@@ -52,13 +52,15 @@ async function sendMessage(client, message) {
 async function sendMessageToAllClients(message) {
     const jsonStr = JSON.stringify(message);
 
-    log.info("Sending message to all clients: " + jsonStr);
+    if (webSocketServer) {
+        log.info("Sending message to all clients: " + jsonStr);
 
-    webSocketServer.clients.forEach(function each(client) {
-        if (client.readyState === WebSocket.OPEN) {
-            client.send(jsonStr);
-        }
-    });
+        webSocketServer.clients.forEach(function each(client) {
+            if (client.readyState === WebSocket.OPEN) {
+                client.send(jsonStr);
+            }
+        });
+    }
 }
 
 async function sendPing(client, lastSentSyncId) {

src/services/note_cache.js

@@ -33,9 +33,21 @@ async function load() {
 
     archived = await sql.getMap(`SELECT noteId, isInheritable FROM attributes WHERE isDeleted = 0 AND type = 'label' AND name = 'archived'`);
 
+    if (protectedSessionService.isProtectedSessionAvailable()) {
+        await loadProtectedNotes();
+    }
+
     loaded = true;
 }
 
+async function loadProtectedNotes() {
+    protectedNoteTitles = await sql.getMap(`SELECT noteId, title FROM notes WHERE isDeleted = 0 AND isProtected = 1`);
+
+    for (const noteId in protectedNoteTitles) {
+        protectedNoteTitles[noteId] = protectedSessionService.decryptNoteTitle(noteId, protectedNoteTitles[noteId]);
+    }
+}
+
 function highlightResults(results, allTokens) {
     // we remove < signs because they can cause trouble in matching and overwriting existing highlighted chunks
     // which would make the resulting HTML string invalid.
@@ -299,7 +311,9 @@ function getNotePath(noteId) {
     }
 }
 
-eventService.subscribe(eventService.ENTITY_CHANGED, async ({entityName, entity}) => {
+eventService.subscribe([eventService.ENTITY_CHANGED, eventService.ENTITY_DELETED, eventService.ENTITY_SYNCED], async ({entityName, entity}) => {
+    // note that entity can also be just POJO without methods if coming from sync
+
     if (!loaded) {
         return;
     }
@@ -312,7 +326,16 @@ eventService.subscribe(eventService.ENTITY_CHANGED, async ({entityName, entity})
             delete childToParent[note.noteId];
         }
         else {
-            noteTitles[note.noteId] = note.title;
+            if (note.isProtected) {
+                // we can assume we have protected session since we managed to update
+                // removing from the maps is important when switching between protected & unprotected
+                protectedNoteTitles[note.noteId] = note.title;
+                delete noteTitles[note.noteId];
+            }
+            else {
+                noteTitles[note.noteId] = note.title;
+                delete protectedNoteTitles[note.noteId];
+            }
         }
     }
     else if (entityName === 'branches') {
@@ -353,15 +376,9 @@ eventService.subscribe(eventService.ENTITY_CHANGED, async ({entityName, entity})
     }
 });
 
-eventService.subscribe(eventService.ENTER_PROTECTED_SESSION, async () => {
-    if (!loaded) {
-        return;
-    }
-
-    protectedNoteTitles = await sql.getMap(`SELECT noteId, title FROM notes WHERE isDeleted = 0 AND isProtected = 1`);
-
-    for (const noteId in protectedNoteTitles) {
-        protectedNoteTitles[noteId] = protectedSessionService.decryptNoteTitle(noteId, protectedNoteTitles[noteId]);
+eventService.subscribe(eventService.ENTER_PROTECTED_SESSION, () => {
+    if (loaded) {
+        loadProtectedNotes();
     }
 });
 
@@ -370,5 +387,6 @@ sqlInit.dbReady.then(() => utils.stopWatch("Autocomplete load", load));
 module.exports = {
     findNotes,
     getNotePath,
-    getNoteTitleForPath
+    getNoteTitleForPath,
+    load
 };

src/services/notes.js

@@ -1,4 +1,5 @@
 const sql = require('./sql');
+const sqlInit = require('./sql_init');
 const optionService = require('./options');
 const dateUtils = require('./date_utils');
 const syncTableService = require('./sync_table');
@@ -153,7 +154,8 @@ async function createNote(parentNoteId, title, content = "", extraOptions = {})
             noteId: note.noteId,
             type: attr.type,
             name: attr.name,
-            value: attr.value
+            value: attr.value,
+            isInheritable: !!attr.isInheritable
         });
     }
 
@@ -357,10 +359,14 @@ async function deleteNote(branch) {
     const notDeletedBranches = await note.getBranches();
 
     if (notDeletedBranches.length === 0) {
-        note.isDeleted = true;
-        // we don't reset content here, that's postponed and done later to give the user
-        // a chance to correct a mistake
-        await note.save();
+        // maybe a bit counter-intuitively, protected notes can be deleted also outside of protected session
+        // this is because protected notes offer only confidentiality which makes some things simpler - e.g. deletion UI
+        // to allow this, we just set the isDeleted flag, otherwise saving would fail because of attempt to encrypt
+        // content with non-existent protected session key
+        // we don't reset content here, that's postponed and done later to give the user a chance to correct a mistake
+        await sql.execute("UPDATE notes SET isDeleted = 1 WHERE noteId = ?", [note.noteId]);
+        // need to manually trigger sync since it's not taken care of by note save
+        await syncTableService.addNoteSync(note.noteId);
 
         for (const noteRevision of await note.getRevisions()) {
             await noteRevision.save();
@@ -403,10 +409,12 @@ async function cleanupDeletedNotes() {
     await sql.execute("UPDATE note_revisions SET content = NULL WHERE note_revisions.content IS NOT NULL AND noteId IN (SELECT noteId FROM notes WHERE isDeleted = 1 AND notes.dateModified <= ?)", [dateUtils.dateStr(cutoffDate)]);
 }
 
-// first cleanup kickoff 5 minutes after startup
-setTimeout(cls.wrap(cleanupDeletedNotes), 5 * 60 * 1000);
+sqlInit.dbReady.then(() => {
+    // first cleanup kickoff 5 minutes after startup
+    setTimeout(cls.wrap(cleanupDeletedNotes), 5 * 60 * 1000);
 
-setInterval(cls.wrap(cleanupDeletedNotes), 4 * 3600 * 1000);
+    setInterval(cls.wrap(cleanupDeletedNotes), 4 * 3600 * 1000);
+});
 
 module.exports = {
     createNewNote,

src/services/request.js

@@ -54,6 +54,8 @@ function exec(opts) {
                 headers
             });
 
+            request.on('error', err => reject(generateError(opts, err)));
+
             request.on('response', response => {
                 if (![200, 201, 204].includes(response.statusCode)) {
                     reject(generateError(opts, response.statusCode + ' ' + response.statusMessage));

src/services/script.js

@@ -6,7 +6,7 @@ const sourceIdService = require('./source_id');
 const log = require('./log');
 
 async function executeNote(note, originEntity) {
-    if (!note.isJavaScript()) {
+    if (!note.isJavaScript() || !note.isContentAvailable) {
         return;
     }
 
@@ -80,6 +80,10 @@ function getParams(params) {
 }
 
 async function getScriptBundle(note, root = true, scriptEnv = null, includedNoteIds = []) {
+    if (!note.isContentAvailable) {
+        return;
+    }
+
     if (!note.isJavaScript() && !note.isHtml()) {
         return;
     }

src/services/sync.js

@@ -1,6 +1,5 @@
 "use strict";
 
-const url = require('url');
 const log = require('./log');
 const sql = require('./sql');
 const sqlInit = require('./sql_init');
@@ -99,6 +98,16 @@ async function doLogin() {
 
     syncContext.sourceId = resp.sourceId;
 
+    const lastSyncedPull = await getLastSyncedPull();
+
+    // this is important in a scenario where we setup the sync by manually copying the document
+    // lastSyncedPull then could be pretty off for the newly cloned client
+    if (lastSyncedPull > resp.maxSyncId) {
+        log.info(`Lowering last synced pull from ${lastSyncedPull} to ${resp.maxSyncId}`);
+
+        await setLastSyncedPull(resp.maxSyncId);
+    }
+
     return syncContext;
 }
 
@@ -252,11 +261,11 @@ async function getEntityRow(entityName, entityId) {
 
         const entity = await sql.getRow(`SELECT * FROM ${entityName} WHERE ${primaryKey} = ?`, [entityId]);
 
-        if (entityName === 'notes' && entity.type === 'file') {
-            entity.content = entity.content.toString("binary");
-        }
-        else if (entityName === 'images') {
-            entity.data = entity.data.toString('base64');
+        if (entityName === 'notes'
+            && entity.content !== null
+            && (entity.type === 'file' || entity.type === 'image')) {
+
+            entity.content = entity.content.toString("base64");
         }
 
         return entity;

src/services/sync_options.js

@@ -16,7 +16,13 @@ async function get(name) {
 
 module.exports = {
     getSyncServerHost: async () => await get('syncServerHost'),
-    isSyncSetup: async () => !!await get('syncServerHost'),
+    isSyncSetup: async () => {
+        const syncServerHost = await get('syncServerHost');
+
+        // special value "disabled" is here to support use case where document is configured with sync server
+        // and we need to override it with config from config.ini
+        return !!syncServerHost && syncServerHost !== 'disabled';
+    },
     getSyncTimeout: async () => parseInt(await get('syncServerTimeout')),
     getSyncProxy: async () => await get('syncProxy')
 };

src/services/sync_update.js

@@ -2,6 +2,7 @@ const sql = require('./sql');
 const log = require('./log');
 const eventLogService = require('./event_log');
 const syncTableService = require('./sync_table');
+const eventService = require('./events');
 
 async function updateEntity(sync, entity, sourceId) {
     const {entityName} = sync;
@@ -36,11 +37,20 @@ async function updateEntity(sync, entity, sourceId) {
     else {
         throw new Error(`Unrecognized entity type ${entityName}`);
     }
+
+    // currently making exception for protected notes and note revisions because here
+    // the title and content are not available decrypted as listeners would expect
+    if ((entityName !== 'notes' && entityName !== 'note_revisions') || !entity.isProtected) {
+        await eventService.emit(eventService.ENTITY_SYNCED, {
+            entityName,
+            entity
+        });
+    }
 }
 
 function deserializeNoteContentBuffer(note) {
-    if (note.type === 'file') {
-        note.content = new Buffer(note.content, 'binary');
+    if (note.content !== null && (note.type === 'file' || note.type === 'image')) {
+        note.content = Buffer.from(note.content, 'base64');
     }
 }
 

src/views/desktop.ejs

@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en" class="theme-<%= theme %>">
+<head>
+    <meta charset="utf-8">
+    <title>Trilium Notes</title>
+</head>
+<body class="desktop">
+<div id="container" style="display: none; grid-template-columns: minmax(<%= leftPaneMinWidth %>px, <%= leftPaneWidthPercent %>fr) <%= rightPaneWidthPercent %>fr">
+    <div id="header" class="hide-toggle">
+        <div id="history-navigation" style="display: none;">
+            <a id="history-back-button" title="Go to previous note." class="icon-action jam jam-arrow-square-left"></a>
+
+            &nbsp;
+
+            <a id="history-forward-button" title="Go to next note." class="icon-action jam jam-arrow-square-right"></a>
+        </div>
+
+        <div style="flex-grow: 100; display: flex;">
+            <button class="btn btn-sm" id="jump-to-note-dialog-button" title="CTRL+J">
+                <span class="jam jam-direction"></span>
+                Jump to note
+            </button>
+
+            <button class="btn btn-sm" id="recent-changes-button">
+                <span class="jam jam-history"></span>
+
+                Recent changes
+            </button>
+
+            <button class="btn btn-sm" id="enter-protected-session-button" title="Enter protected session to be able to find and view protected notes">
+                <span class="jam jam-door"></span>
+
+                Enter protected session
+            </button>
+
+            <button class="btn btn-sm" id="leave-protected-session-button" title="Leave protected session so that protected notes are not accessible any more." style="display: none;">
+                <span class="jam jam-log-out"></span>
+
+                Leave protected session
+            </button>
+        </div>
+
+        <div id="plugin-buttons">
+        </div>
+
+        <div>
+            <button class="btn btn-sm" id="sync-now-button" title="Trigger sync">
+                <span class="jam jam-refresh"></span>
+                Sync (<span id="outstanding-syncs-count">0</span>)
+            </button>
+
+            <button class="btn btn-sm" id="options-button">
+                <span class="jam jam-settings-alt"></span> Options</button>
+
+            <form action="logout" id="logout-button" method="POST" style="display: inline;">
+                <button type="submit" class="btn btn-sm">
+                    <span class="jam jam-log-out"></span>
+                    Logout
+                </button>
+            </form>
+        </div>
+    </div>
+
+    <div id="left-pane" class="hide-toggle">
+        <div id="global-buttons">
+            <a id="create-top-level-note-button" title="Create new top level note" class="icon-action jam jam-plus-circle"></a>
+
+            <a id="collapse-tree-button" title="Collapse note tree. Shortcut ALT+C" class="icon-action jam jam-layers"></a>
+
+            <a id="scroll-to-current-note-button" title="Scroll to current note. Shortcut CTRL+." class="icon-action jam jam-download"></a>
+
+            <a id="toggle-search-button" title="Search in notes. Shortcut CTRL+S" class="icon-action jam jam-search"></a>
+        </div>
+
+        <input type="file" id="import-upload" style="display: none" />
+
+        <div id="search-box">
+            <div style="display: flex; align-items: center;">
+                <input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
+                <button id="do-search-button" class="btn btn-sm icon-button jam jam-search" title="Search (enter)"></button>
+
+                &nbsp;
+
+                <button id="save-search-button" class="btn btn-sm icon-button jam jam-save" title="Save search"></button>
+
+                &nbsp;
+
+                <button id="close-search-button" class="btn btn-sm icon-button jam jam-close" title="Close search"></button>
+            </div>
+        </div>
+
+        <div id="search-results">
+            <strong>Search results:</strong>
+
+            <ul id="search-results-inner"></ul>
+        </div>
+
+        <div id="tree"></div>
+
+        <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
+    </div>
+
+    <div id="title-container">
+        <div style="display: flex; align-items: center;">
+            <div class="dropdown hide-toggle">
+                <button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
+                    <span id="note-path-count">1 path</span>
+
+                    <span class="caret"></span>
+                </button>
+                <ul id="note-path-list" class="dropdown-menu" aria-labelledby="note-path-list-button">
+                </ul>
+            </div>
+
+            <input autocomplete="off" value="" id="note-title" tabindex="1">
+
+            <div class="hide-toggle" style="display: flex; align-items: center;">
+                <span id="note-id-display" title="Note ID"></span>
+
+                <button class="btn btn-sm icon-button jam jam-play"
+                        style="display: none; margin-right: 10px;"
+                        title="Render"
+                        id="render-button"></button>
+
+                <button class="btn btn-sm icon-button jam jam-play"
+                        style="display: none; margin-right: 10px;"
+                        title="Execute (Ctrl+Enter)"
+                        id="execute-script-button"></button>
+
+                <div class="btn-group btn-group-xs">
+                    <button type="button"
+                            class="btn btn-sm icon-button jam jam-shield-check"
+                            id="protect-button"
+                            title="Protected note can be viewed and edited only after entering password">
+                    </button>
+
+                    <button type="button"
+                            class="btn btn-sm icon-button jam jam-shield-close"
+                            id="unprotect-button"
+                            title="Not protected note can be viewed without entering password">
+                    </button>
+                </div>
+
+                &nbsp; &nbsp;
+
+                <div id="note-type-wrapper" style="display: flex;">
+                    <div class="dropdown" id="note-type">
+                        <button data-bind="disable: isDisabled()" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
+                            Type: <span data-bind="text: typeString()"></span>
+                            <span class="caret"></span>
+                        </button>
+                        <div id="note-type-dropdown" class="dropdown-menu dropdown-menu-right">
+                            <a class="dropdown-item" data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">&check;</span> <strong>Text</strong></a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item" data-bind="click: selectRelationMap, css: { selected: type() == 'relation-map' && mime() == '' }"><span class="check">&check;</span> <strong>Relation Map</strong></a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item" data-bind="click: selectRender, css: { selected: type() == 'render' && mime() == '' }"><span class="check">&check;</span> <strong>Render HTML note</strong></a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item" data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="check">&check;</span> <strong>Code</strong></a>
+                            <!-- ko foreach: codeMimeTypes -->
+                            <a class="dropdown-item" data-bind="click: $parent.selectCodeMime, css: { selected: $parent.type() == 'code' && $parent.mime() == mime }"><span class="check">&check;</span> <span data-bind="text: title"></span></a>
+                            <!-- /ko -->
+                        </div>
+                    </div>
+
+                    <div class="dropdown" id="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" id="show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
+                            <a class="dropdown-item show-attributes-button"><kbd>Alt+A</kbd> Attributes</a>
+                            <a class="dropdown-item" id="show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">Note source</a>
+                            <a class="dropdown-item" id="upload-file-button">Upload file</a>
+                            <a class="dropdown-item" id="export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <% include details/detail.ejs %>
+
+    <% include dialogs/add_link.ejs %>
+    <% include dialogs/attributes.ejs %>
+    <% include dialogs/branch_prefix.ejs %>
+    <% include dialogs/event_log.ejs %>
+    <% include dialogs/export.ejs %>
+    <% include dialogs/jump_to_note.ejs %>
+    <% include dialogs/markdown_import.ejs %>
+    <% include dialogs/note_revisions.ejs %>
+    <% include dialogs/note_source.ejs %>
+    <% include dialogs/options.ejs %>
+    <% include dialogs/protected_session_password.ejs %>
+    <% include dialogs/recent_changes.ejs %>
+    <% include dialogs/sql_console.ejs %>
+    <% include dialogs/info.ejs %>
+    <% include dialogs/prompt.ejs %>
+    <% include dialogs/confirm.ejs %>
+</div>
+
+<webview class="electron-in-page-search-window" nodeintegration disablewebsecurity src="libraries/electron-in-page-search/search-window.html"></webview>
+
+<script type="text/javascript">
+    window.baseApiUrl = 'api/';
+    window.device = "desktop";
+    window.glob = {
+        activeDialog: null,
+        sourceId: '<%= sourceId %>',
+        maxSyncIdAtLoad: <%= maxSyncIdAtLoad %>,
+        instanceName: '<%= instanceName %>'
+    };
+</script>
+
+<!-- Required for correct loading of scripts in Electron -->
+<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
+
+<script src="libraries/jquery.min.js"></script>
+
+<link href="libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+<script src="libraries/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+<script src="libraries/bootstrap-notify.min.js"></script>
+
+<!-- Include Fancytree skin and library -->
+<link href="libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
+<script src="libraries/fancytree/jquery.fancytree-all-deps.min.js"></script>
+
+<script src="libraries/jquery.hotkeys.js"></script>
+<script src="libraries/jquery.fancytree.hotkeys.js"></script>
+
+<script src="libraries/knockout.min.js"></script>
+
+<script src="libraries/autocomplete.jquery.min.js"></script>
+
+<link href="stylesheets/style.css" rel="stylesheet">
+<link href="stylesheets/desktop.css" rel="stylesheet">
+
+<script src="javascripts/desktop.js" crossorigin type="module"></script>
+
+<link rel="stylesheet" type="text/css" href="libraries/jam/css/jam.min.css">
+
+<script type="text/javascript">
+    // we hide container initally because otherwise it is rendered first without CSS and then flickers into
+    // final form which is pretty ugly.
+    $("#container").show();
+</script>
+
+<style type="text/css">
+    <%= appCss %>
+</style>
+</body>
+</html>

src/views/details/detail.ejs

@@ -21,6 +21,8 @@
 
         <% include relation_map.ejs %>
 
+        <% include protected_session_password.ejs %>
+
         <div id="children-overview"></div>
     </div>
 

src/views/details/protected_session_password.ejs

@@ -0,0 +1,10 @@
+<div id="protected-session-password-component" class="note-detail-component">
+    <form class="protected-session-password-form">
+        <div class="form-group">
+            <label for="protected-session-password-in-detail">Showing protected note requires entering your password:</label>
+            <input id="protected-session-password-in-detail" class="form-control protected-session-password" type="password">
+        </div>
+
+        <button class="btn btn-primary">Start protected session <kbd>enter</kbd></button>
+    </form>
+</div>

src/views/details/search.ejs

@@ -1,7 +1,12 @@
 <div id="note-detail-search" class="note-detail-component">
     <div style="display: flex; align-items: center;">
         <strong>Search string: &nbsp; &nbsp;</strong>
-        <textarea rows="4" cols="50" id="search-string"></textarea>
+        <textarea rows="4" cols="40" id="search-string"></textarea>
+
+        <span>
+            &nbsp; &nbsp;
+            <button type="button" class="btn btn-primary" id="note-detail-search-refresh-results-button">Refresh tree</button>
+        </span>
     </div>
 
     <br />

src/views/dialogs/add_link.ejs

@@ -1,53 +1,53 @@
 <div id="add-link-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title mr-auto">Add note link</h5>
+    <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mr-auto">Add note link</h5>
 
-        <button type="button" class="help-button" title="Help on links" data-help-page="Links">?</button>
+                <button type="button" class="help-button" title="Help on links" data-help-page="Links">?</button>
 
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <form id="add-link-form">
-        <div class="modal-body">
-            <div id="add-link-type-div" class="radio">
-              <label title="Add HTML link to the selected note at cursor in current note">
-                <input type="radio" name="add-link-type" value="html"/>
-                add normal HTML link</label>
-
-              <label title="Add selected note as a child of current note">
-                <input type="radio" name="add-link-type" value="selected-to-current"/>
-                add selected note to current note</label>
-
-              <label title="Add current note as a child of the selected note">
-                <input type="radio" name="add-link-type" value="current-to-selected"/>
-                add current note to selected note</label>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
+                    <span aria-hidden="true">&times;</span>
+                </button>
             </div>
+            <form id="add-link-form">
+                <div class="modal-body">
+                    <div id="add-link-type-div" class="radio">
+                        <label title="Add HTML link to the selected note at cursor in current note">
+                            <input type="radio" name="add-link-type" value="html"/>
+                            add normal HTML link</label>
 
-            <div class="form-group">
-              <label for="note-autocomplete">Note</label>
+                        <label title="Add selected note as a child of current note">
+                            <input type="radio" name="add-link-type" value="selected-to-current"/>
+                            add selected note to current note</label>
 
-              <div class="input-group">
-                <input id="note-autocomplete" class="form-control" placeholder="search for note by its name">
-              </div>
-            </div>
+                        <label title="Add current note as a child of the selected note">
+                            <input type="radio" name="add-link-type" value="current-to-selected"/>
+                            add current note to selected note</label>
+                    </div>
 
-            <div class="form-group" id="add-link-title-form-group">
-              <label for="link-title">Link title</label>
-              <input id="link-title" class="form-control" style="width: 100%;">
-            </div>
+                    <div class="form-group">
+                        <label for="note-autocomplete">Note</label>
 
-            <div class="form-group" id="add-link-prefix-form-group" title="Cloned note will be shown in note tree with given prefix">
-              <label for="clone-prefix">Prefix (optional)</label>
-              <input id="clone-prefix" class="form-control" style="width: 100%;">
-            </div>
+                        <div class="input-group">
+                            <input id="note-autocomplete" class="form-control" placeholder="search for note by its name">
+                        </div>
+                    </div>
+
+                    <div class="form-group" id="add-link-title-form-group">
+                        <label for="link-title">Link title</label>
+                        <input id="link-title" class="form-control" style="width: 100%;">
+                    </div>
+
+                    <div class="form-group" id="add-link-prefix-form-group" title="Cloned note will be shown in note tree with given prefix">
+                        <label for="clone-prefix">Prefix (optional)</label>
+                        <input id="clone-prefix" class="form-control" style="width: 100%;">
+                    </div>
+                </div>
+                <div class="modal-footer" style="display: flex; justify-content: space-between;">
+                    <button type="submit" class="btn btn-primary">Add note link <kbd>enter</kbd></button>
+                </div>
+            </form>
         </div>
-        <div class="modal-footer" style="display: flex; justify-content: space-between;">
-          <button type="submit" class="btn btn-primary">Add note link <kbd>enter</kbd></button>
-        </div>
-      </form>
     </div>
-  </div>
 </div>

src/views/dialogs/attributes.ejs

@@ -1,149 +1,149 @@
 <div id="attributes-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title mr-auto">Note attributes</h5>
+    <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mr-auto">Note attributes</h5>
 
-        <button class="help-button" type="button" data-help-page="Attributes" title="Help on Attributes">?</button>
+                <button class="help-button" type="button" data-help-page="Attributes" title="Help on Attributes">?</button>
 
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <form data-bind="submit: save">
-        <div class="modal-body">
-          <div style="height: 97%; overflow: auto">
-            <table id="owned-attributes-table" class="table">
-              <thead>
-              <tr>
-                <th>Type</th>
-                <th>Name</th>
-                <th>Value</th>
-                <th>Inheritable</th>
-              </tr>
-              </thead>
-              <tbody data-bind="foreach: ownedAttributes">
-              <tr data-bind="if: !isDeleted">
-                <td>
-                  <input type="hidden" name="position" data-bind="value: position"/>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <form data-bind="submit: save">
+                <div class="modal-body">
+                    <div style="height: 97%; overflow: auto">
+                        <table id="owned-attributes-table" class="table">
+                            <thead>
+                            <tr>
+                                <th>Type</th>
+                                <th>Name</th>
+                                <th>Value</th>
+                                <th>Inheritable</th>
+                            </tr>
+                            </thead>
+                            <tbody data-bind="foreach: ownedAttributes">
+                            <tr data-bind="if: !isDeleted">
+                                <td>
+                                    <input type="hidden" name="position" data-bind="value: position"/>
 
-                  <select class="form-control attribute-type-select" style="width: auto;"
-                      data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
-                </td>
-                <td>
-                  <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
-                  <input type="text" class="attribute-name form-control"
-                       data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.attributeChanged }"/>
-                  <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name
-                    can't be empty.
-                  </div>
-                </td>
-                <td>
-                  <input type="text" class="label-value form-control"
-                       data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"
-                       style="width: 300px"/>
+                                    <select class="form-control attribute-type-select" style="width: auto;"
+                                            data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
+                                </td>
+                                <td>
+                                    <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
+                                    <input type="text" class="attribute-name form-control"
+                                           data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.attributeChanged }"/>
+                                    <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name
+                                        can't be empty.
+                                    </div>
+                                </td>
+                                <td>
+                                    <input type="text" class="label-value form-control"
+                                           data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"
+                                           style="width: 300px"/>
 
-                  <div class="relation-value input-group" data-bind="visible: type == 'relation'"
-                     style="width: 300px;">
-                    <input class="form-control relation-target-note-id"
-                         placeholder="search for note by its name"
-                         data-bind="noteAutocomplete, value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
+                                    <div class="relation-value input-group" data-bind="visible: type == 'relation'"
+                                         style="width: 300px;">
+                                        <input class="form-control relation-target-note-id"
+                                               placeholder="search for note by its name"
+                                               data-bind="noteAutocomplete, value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
 
-                    <div style="color: red" data-bind="if: $parent.isEmptyRelationTarget($index())">Relation target note
-                      can't be empty.
-                    </div>
-                  </div>
+                                        <div style="color: red" data-bind="if: $parent.isEmptyRelationTarget($index())">Relation target note
+                                            can't be empty.
+                                        </div>
+                                    </div>
 
-                  <div data-bind="visible: type == 'label-definition'">
-                    <select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
+                                    <div data-bind="visible: type == 'label-definition'">
+                                        <select data-bind="options: $parent.availableLabelTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.labelType"></select>
 
-                    <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
+                                        <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: labelDefinition.multiplicityType"></select>
 
-                    <label>
-                      <input type="checkbox" value="true"
-                           data-bind="checked: labelDefinition.isPromoted"/>
-                      Promoted
-                    </label>
+                                        <label>
+                                            <input type="checkbox" value="true"
+                                                   data-bind="checked: labelDefinition.isPromoted"/>
+                                            Promoted
+                                        </label>
 
-                    <div data-bind="visible: labelDefinition.labelType === 'number'"
-                        title="Precision of floating point numbers - 0 means effectively integer, 2 allows entering e.g. 1.23">
-                      Number precision: <input type="number" min="0" max="9" data-bind="value: labelDefinition.numberPrecision" style="width: 50px;"/>
-                    </div>
-                  </div>
+                                        <div data-bind="visible: labelDefinition.labelType === 'number'"
+                                             title="Precision of floating point numbers - 0 means effectively integer, 2 allows entering e.g. 1.23">
+                                            Number precision: <input type="number" min="0" max="9" data-bind="value: labelDefinition.numberPrecision" style="width: 50px;"/>
+                                        </div>
+                                    </div>
 
-                  <div data-bind="visible: type == 'relation-definition'">
-                    <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>
+                                    <div data-bind="visible: type == 'relation-definition'">
+                                        <select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: relationDefinition.multiplicityType"></select>
 
-                    <label>
-                      <input type="checkbox" value="true"
-                           data-bind="checked: relationDefinition.isPromoted"/>
-                      Promoted
-                    </label>
-                    <br/>
-                    <label>
-                      Inverse relation:
+                                        <label>
+                                            <input type="checkbox" value="true"
+                                                   data-bind="checked: relationDefinition.isPromoted"/>
+                                            Promoted
+                                        </label>
+                                        <br/>
+                                        <label>
+                                            Inverse relation:
 
-                      <input type="text" value="true" class="attribute-name" data-bind="value: relationDefinition.inverseRelation"/>
-                    </label>
-                  </div>
-                </td>
-                <td title="Inheritable relations are automatically inherited to the child notes">
-                  <input type="checkbox" value="1" data-bind="checked: isInheritable"/>
+                                            <input type="text" value="true" class="attribute-name" data-bind="value: relationDefinition.inverseRelation"/>
+                                        </label>
+                                    </div>
+                                </td>
+                                <td title="Inheritable relations are automatically inherited to the child notes">
+                                    <input type="checkbox" value="1" data-bind="checked: isInheritable"/>
 
-                  &nbsp;
+                                    &nbsp;
 
-                  <span title="Delete" style="padding: 13px; cursor: pointer;" class="jam jam-trash"
-                      data-bind="click: $parent.deleteAttribute"></span>
-                </td>
-              </tr>
-              </tbody>
-            </table>
+                                    <span title="Delete" style="padding: 13px; cursor: pointer;" class="jam jam-trash"
+                                          data-bind="click: $parent.deleteAttribute"></span>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
 
-            <div data-bind="if: inheritedAttributes().length > 0">
-              <h4>Inherited attributes</h4>
+                        <div data-bind="if: inheritedAttributes().length > 0">
+                            <h4>Inherited attributes</h4>
 
-              <table class="table">
-                <thead>
-                <tr>
-                  <th>Type</th>
-                  <th>Name</th>
-                  <th>Value</th>
-                  <th>Owning note</th>
-                </tr>
-                </thead>
-                <tbody data-bind="foreach: inheritedAttributes">
-                <tr>
-                  <td data-bind="text: type"></td>
-                  <td data-bind="text: name"></td>
-                  <td>
+                            <table class="table">
+                                <thead>
+                                <tr>
+                                    <th>Type</th>
+                                    <th>Name</th>
+                                    <th>Value</th>
+                                    <th>Owning note</th>
+                                </tr>
+                                </thead>
+                                <tbody data-bind="foreach: inheritedAttributes">
+                                <tr>
+                                    <td data-bind="text: type"></td>
+                                    <td data-bind="text: name"></td>
+                                    <td>
                     <span data-bind="if: type == 'label'">
                       <span data-bind="text: value"></span>
                     </span>
-                    <span data-bind="if: type == 'relation'">
+                                        <span data-bind="if: type == 'relation'">
                       <span data-bind="noteLink: value"></span>
                     </span>
-                    <span data-bind="if: type == 'label-definition'">
+                                        <span data-bind="if: type == 'label-definition'">
                       <span data-bind="text: value.labelType"></span>
                       <span data-bind="text: value.multiplicityType"></span>
                       promoted: <span data-bind="text: value.isPromoted"></span>
                     </span>
-                    <span data-bind="if: type == 'relation-definition'">
+                                        <span data-bind="if: type == 'relation-definition'">
                       <span data-bind="text: value.multiplicityType"></span>
                       promoted: <span data-bind="text: value.isPromoted"></span>
                     </span>
-                  </td>
-                  <td data-bind="noteLink: noteId"></td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
+                                    </td>
+                                    <td data-bind="noteLink: noteId"></td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button" type="submit">
+                        Save changes <kbd>enter</kbd></button>
+                </div>
+            </form>
         </div>
-        <div class="modal-footer">
-          <button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button" type="submit">
-            Save changes <kbd>enter</kbd></button>
-        </div>
-      </form>
     </div>
-  </div>
 </div>

src/views/dialogs/branch_prefix.ejs

@@ -1,24 +1,33 @@
 <div id="branch-prefix-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title mr-auto">Edit branch prefix</h5>
+    <div class="modal-dialog modal-lg" role="document">
+        <form id="branch-prefix-form">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title mr-auto">Edit branch prefix</h5>
 
-        <button class="help-button" type="button" data-help-page="Tree-concepts#prefix" title="Help on Tree prefix">?</button>
+                    <button class="help-button" type="button" data-help-page="Tree-concepts#prefix" title="Help on Tree prefix">?</button>
 
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <div class="form-group">
-          <label for="branch-prefix-input">Prefix: </label> &nbsp;
-          <input id="branch-prefix-input" style="width: 20em;"> - <span id="branch-prefix-note-title"></span>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-primary btn-sm">Save</button>
-      </div>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="branch-prefix-input">Prefix: </label> &nbsp;
+
+                        <div class="input-group">
+                            <input id="branch-prefix-input" class="form-control">
+
+                            <div class="input-group-append">
+                                <div id="branch-prefix-note-title" class="input-group-text"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-primary btn-sm">Save</button>
+                </div>
+            </div>
+        </form>
     </div>
-  </div>
 </div>

src/views/dialogs/confirm.ejs

@@ -14,7 +14,7 @@
                 <div id="confirm-dialog-custom"></div>
             </div>
             <div class="modal-footer">
-                <button class="btn btn-default btn-sm" id="confirm-dialog-cancel-button">Cancel</button>
+                <button class="btn btn-secondary btn-sm" id="confirm-dialog-cancel-button">Cancel</button>
 
                 &nbsp;
 

src/views/dialogs/event_log.ejs

@@ -1,15 +1,15 @@
 <div id="event-log-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Event log</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <ul id="event-log-list"></ul>
-      </div>
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Event log</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <ul id="event-log-list"></ul>
+            </div>
+        </div>
     </div>
-  </div>
 </div>

src/views/dialogs/jump_to_note.ejs

@@ -1,23 +1,23 @@
 <div id="jump-to-note-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Jump to note</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <div class="form-group">
-          <label for="jump-to-note-autocomplete">Note</label>
-          <div class="input-group">
-            <input id="jump-to-note-autocomplete" class="form-control" placeholder="search for note by its name">
-          </div>
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Jump to note</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label for="jump-to-note-autocomplete">Note</label>
+                    <div class="input-group">
+                        <input id="jump-to-note-autocomplete" class="form-control" placeholder="search for note by its name">
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
+            </div>
         </div>
-      </div>
-      <div class="modal-footer">
-        <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
-      </div>
     </div>
-  </div>
 </div>

src/views/dialogs/markdown_import.ejs

@@ -1,20 +1,20 @@
 <div id="markdown-import-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Markdown import</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Markdown import</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
 
-        <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
-      </div>
-      <div class="modal-footer">
-        <button id="markdown-import-button" class="btn btn-primary">Import <kbd>CTRL+Enter</kbd></button>
-      </div>
+                <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
+            </div>
+            <div class="modal-footer">
+                <button id="markdown-import-button" class="btn btn-primary">Import <kbd>CTRL+Enter</kbd></button>
+            </div>
+        </div>
     </div>
-  </div>
 </div>

src/views/dialogs/note_revisions.ejs

@@ -1,27 +1,27 @@
 <div id="note-revisions-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title mr-auto">Note revisions</h5>
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mr-auto">Note revisions</h5>
 
-        <button class="help-button" type="button" data-help-page="Note-revisions" title="Help on Note revisions">?</button>
+                <button class="help-button" type="button" data-help-page="Note-revisions" title="Help on Note revisions">?</button>
 
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body" style="display: flex;">
-        <select id="note-revision-list" size="25" style="width: 150px; height: 630px;">
-        </select>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" style="display: flex;">
+                <select id="note-revision-list" size="25" style="width: 150px; height: 630px;">
+                </select>
 
-        <div id="note-revision-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
-          <div style="display: flex">
-            <h3 id="note-revision-title" style="margin: 3px; flex-grow: 100;"></h3>
-          </div>
+                <div id="note-revision-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
+                    <div style="display: flex">
+                        <h3 id="note-revision-title" style="margin: 3px; flex-grow: 100;"></h3>
+                    </div>
 
-          <div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
+                    <div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </div>