From b619ad1b6b724523f579afb62c763040349ba52d Mon Sep 17 00:00:00 2001
From: KlausSchaefersAtWork <klaus.schaefers@philips.com>
Date: Fri, 7 Jan 2022 00:55:13 +0000
Subject: [PATCH] Some stuff working

---
 package-lock.json             | 338 +++++++++++++++++++++++++++++++++-
 package.json                  |   4 +-
 src/App.vue                   |  15 +-
 src/background.js             |   2 +-
 src/components/Add.vue        |  35 ++++
 src/components/Note.vue       |  71 +++++++
 src/components/SimpleNote.vue |  15 --
 src/components/Toolbar.vue    |  25 ++-
 src/i18n/en.json              |   8 +
 src/main.js                   |  14 +-
 src/scss/add.scss             |   8 +
 src/scss/app.scss             |   9 +
 src/scss/ds.scss              |   3 +
 src/scss/editor.scss          |   8 +-
 src/scss/layout.scss          |   8 +
 src/scss/note.scss            |  18 ++
 src/scss/toolbar.scss         |  38 ++++
 src/views/Editor.vue          | 104 +++++++++--
 18 files changed, 659 insertions(+), 64 deletions(-)
 create mode 100644 src/components/Add.vue
 create mode 100644 src/components/Note.vue
 delete mode 100644 src/components/SimpleNote.vue
 create mode 100644 src/i18n/en.json
 create mode 100644 src/scss/add.scss
 create mode 100644 src/scss/app.scss
 create mode 100644 src/scss/layout.scss
 create mode 100644 src/scss/note.scss
 create mode 100644 src/scss/toolbar.scss

diff --git a/package-lock.json b/package-lock.json
index db639cf..a700f41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,9 +7,13 @@
     "": {
       "name": "remember-like-lili",
       "version": "0.1.0",
+      "hasInstallScript": true,
       "dependencies": {
         "core-js": "^3.6.5",
+        "moment": "^2.29.1",
+        "remixicon": "^2.5.0",
         "vue": "^3.0.0",
+        "vue-i18n": "^9.2.0-beta.26",
         "vue-router": "^4.0.0-0"
       },
       "devDependencies": {
@@ -22,6 +26,7 @@
         "@vue/test-utils": "^2.0.0-0",
         "babel-eslint": "^10.1.0",
         "electron": "^16.0.6",
+        "electron-devtools-installer": "^3.1.0",
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^7.0.0",
         "sass": "^1.26.5",
@@ -1838,6 +1843,71 @@
         "webpack": "^4.0.0"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.0-beta.26.tgz",
+      "integrity": "sha512-4OXSF0zC70UElev6gam4FdWfC7u4l2ouNK9Hc6R44QlpEXkzhbwwbpZn9gIGB2l11zQnJkAwaovfYyiNJ/JvkA==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.2.0-beta.26",
+        "@intlify/message-compiler": "9.2.0-beta.26",
+        "@intlify/shared": "9.2.0-beta.26",
+        "@intlify/vue-devtools": "9.2.0-beta.26"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.0-beta.26.tgz",
+      "integrity": "sha512-7GiF7v2jlHf7g5hoLF6sKlrX5Di2INfHN4PEAeVr2ashgoSaq1EYIRouBVAnJkOrDOJzCOEY7y53me7+gIbeTw==",
+      "dependencies": {
+        "@intlify/shared": "9.2.0-beta.26"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.0-beta.26.tgz",
+      "integrity": "sha512-qtDgHCMqrXNTekKXGzm0Dm6r3+/X7/jFXP+E07hx+PJbPMv7DzK1iU8h5LlAMQ1/jr2UIRBgXvR5wh35OKoGrA==",
+      "dependencies": {
+        "@intlify/shared": "9.2.0-beta.26",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/@intlify/message-compiler/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.0-beta.26.tgz",
+      "integrity": "sha512-MjUlkjNThqkqy8yXUcFKBiW/hIfqAn5cP3Vd0b4wdOHS8rPCEbvSbAnF08uiZDkVv8gTcsLyymX21GaU6oYyyQ==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.0-beta.26.tgz",
+      "integrity": "sha512-Ghe2xTSezRzL2fBdIbZEus5+5spE2RMxgjBg6GyvbsDy1M05o2OvukBninJ4/Tc2I5A30lYgAsF1gQlOyfmv1g==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.0-beta.26",
+        "@intlify/shared": "9.2.0-beta.26"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/@jest/console": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
@@ -8596,6 +8666,72 @@
         "node": ">=12"
       }
     },
+    "node_modules/electron-devtools-installer": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/electron-devtools-installer/-/electron-devtools-installer-3.2.0.tgz",
+      "integrity": "sha512-t3UczsYugm4OAbqvdImMCImIMVdFzJAHgbwHpkl5jmfu1izVgUcP/mnrPqJIpEeCK1uZGpt+yHgWEN+9EwoYhQ==",
+      "dev": true,
+      "dependencies": {
+        "rimraf": "^3.0.2",
+        "semver": "^7.2.1",
+        "tslib": "^2.1.0",
+        "unzip-crx-3": "^0.2.0"
+      }
+    },
+    "node_modules/electron-devtools-installer/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/electron-devtools-installer/node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/electron-devtools-installer/node_modules/semver": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/electron-devtools-installer/node_modules/tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "dev": true
+    },
+    "node_modules/electron-devtools-installer/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/electron-osx-sign": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/electron-osx-sign/-/electron-osx-sign-0.5.0.tgz",
@@ -14443,6 +14579,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -17103,6 +17247,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/remixicon": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-2.5.0.tgz",
+      "integrity": "sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww=="
+    },
     "node_modules/remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -20012,6 +20161,17 @@
         "yaku": "^0.16.6"
       }
     },
+    "node_modules/unzip-crx-3": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/unzip-crx-3/-/unzip-crx-3-0.2.0.tgz",
+      "integrity": "sha512-0+JiUq/z7faJ6oifVB5nSwt589v1KCduqIJupNVDoWSXZtWDmjDGO3RAEOvwJ07w90aoXoP4enKsR7ecMrJtWQ==",
+      "dev": true,
+      "dependencies": {
+        "jszip": "^3.1.0",
+        "mkdirp": "^0.5.1",
+        "yaku": "^0.16.6"
+      }
+    },
     "node_modules/upath": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
@@ -20967,6 +21127,23 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-i18n": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.0-beta.26.tgz",
+      "integrity": "sha512-xZgisyirT9hXFyXBL8pO8bYgdG7m98NLAUhbb1O9hMQS1qOXYU902+LIJA5k3BtoeiEIfjkGADHhSAlJTTzc9A==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.0-beta.26",
+        "@intlify/shared": "9.2.0-beta.26",
+        "@intlify/vue-devtools": "9.2.0-beta.26",
+        "@vue/devtools-api": "^6.0.0-beta.13"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-jest": {
       "version": "5.0.0-alpha.10",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-5.0.0-alpha.10.tgz",
@@ -23672,6 +23849,55 @@
         "postcss": "^7.0.0"
       }
     },
+    "@intlify/core-base": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.0-beta.26.tgz",
+      "integrity": "sha512-4OXSF0zC70UElev6gam4FdWfC7u4l2ouNK9Hc6R44QlpEXkzhbwwbpZn9gIGB2l11zQnJkAwaovfYyiNJ/JvkA==",
+      "requires": {
+        "@intlify/devtools-if": "9.2.0-beta.26",
+        "@intlify/message-compiler": "9.2.0-beta.26",
+        "@intlify/shared": "9.2.0-beta.26",
+        "@intlify/vue-devtools": "9.2.0-beta.26"
+      }
+    },
+    "@intlify/devtools-if": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.0-beta.26.tgz",
+      "integrity": "sha512-7GiF7v2jlHf7g5hoLF6sKlrX5Di2INfHN4PEAeVr2ashgoSaq1EYIRouBVAnJkOrDOJzCOEY7y53me7+gIbeTw==",
+      "requires": {
+        "@intlify/shared": "9.2.0-beta.26"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.0-beta.26.tgz",
+      "integrity": "sha512-qtDgHCMqrXNTekKXGzm0Dm6r3+/X7/jFXP+E07hx+PJbPMv7DzK1iU8h5LlAMQ1/jr2UIRBgXvR5wh35OKoGrA==",
+      "requires": {
+        "@intlify/shared": "9.2.0-beta.26",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "@intlify/shared": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.0-beta.26.tgz",
+      "integrity": "sha512-MjUlkjNThqkqy8yXUcFKBiW/hIfqAn5cP3Vd0b4wdOHS8rPCEbvSbAnF08uiZDkVv8gTcsLyymX21GaU6oYyyQ=="
+    },
+    "@intlify/vue-devtools": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.0-beta.26.tgz",
+      "integrity": "sha512-Ghe2xTSezRzL2fBdIbZEus5+5spE2RMxgjBg6GyvbsDy1M05o2OvukBninJ4/Tc2I5A30lYgAsF1gQlOyfmv1g==",
+      "requires": {
+        "@intlify/core-base": "9.2.0-beta.26",
+        "@intlify/shared": "9.2.0-beta.26"
+      }
+    },
     "@jest/console": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
@@ -24778,7 +25004,8 @@
       "version": "4.5.15",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.15.tgz",
       "integrity": "sha512-fqap+4HN+w+InDxlA3hZTOGE0tzBTgXhKLoDydhywqgmhQ1D9JA6Feh94ze6tG8DsWX58/ujYUqA8jAz17FJtg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.15",
@@ -24995,7 +25222,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/reactivity": {
       "version": "3.2.26",
@@ -25054,7 +25282,8 @@
       "version": "2.0.0-rc.18",
       "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-rc.18.tgz",
       "integrity": "sha512-aifolXjVdsogjaLmDoZ0FU8vN+R67aWmg9OuVeED4w5Ij5GFQLrlhM19uhWe/r5xXUL4fXMk3pX5wW6FJP1NcQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -25311,7 +25540,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -25351,13 +25581,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -25879,7 +26111,8 @@
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
       "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "babel-eslint": {
       "version": "10.1.0",
@@ -29192,6 +29425,59 @@
         }
       }
     },
+    "electron-devtools-installer": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/electron-devtools-installer/-/electron-devtools-installer-3.2.0.tgz",
+      "integrity": "sha512-t3UczsYugm4OAbqvdImMCImIMVdFzJAHgbwHpkl5jmfu1izVgUcP/mnrPqJIpEeCK1uZGpt+yHgWEN+9EwoYhQ==",
+      "dev": true,
+      "requires": {
+        "rimraf": "^3.0.2",
+        "semver": "^7.2.1",
+        "tslib": "^2.1.0",
+        "unzip-crx-3": "^0.2.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+          "dev": true
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
     "electron-osx-sign": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/electron-osx-sign/-/electron-osx-sign-0.5.0.tgz",
@@ -32443,7 +32729,8 @@
           "version": "7.5.6",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
           "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -32582,7 +32869,8 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
       "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "24.9.0",
@@ -33822,6 +34110,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -36021,6 +36314,11 @@
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
       "dev": true
     },
+    "remixicon": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-2.5.0.tgz",
+      "integrity": "sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww=="
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -38406,6 +38704,17 @@
         "yaku": "^0.16.6"
       }
     },
+    "unzip-crx-3": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/unzip-crx-3/-/unzip-crx-3-0.2.0.tgz",
+      "integrity": "sha512-0+JiUq/z7faJ6oifVB5nSwt589v1KCduqIJupNVDoWSXZtWDmjDGO3RAEOvwJ07w90aoXoP4enKsR7ecMrJtWQ==",
+      "dev": true,
+      "requires": {
+        "jszip": "^3.1.0",
+        "mkdirp": "^0.5.1",
+        "yaku": "^0.16.6"
+      }
+    },
     "upath": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
@@ -39142,6 +39451,17 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "9.2.0-beta.26",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.0-beta.26.tgz",
+      "integrity": "sha512-xZgisyirT9hXFyXBL8pO8bYgdG7m98NLAUhbb1O9hMQS1qOXYU902+LIJA5k3BtoeiEIfjkGADHhSAlJTTzc9A==",
+      "requires": {
+        "@intlify/core-base": "9.2.0-beta.26",
+        "@intlify/shared": "9.2.0-beta.26",
+        "@intlify/vue-devtools": "9.2.0-beta.26",
+        "@vue/devtools-api": "^6.0.0-beta.13"
+      }
+    },
     "vue-jest": {
       "version": "5.0.0-alpha.10",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-5.0.0-alpha.10.tgz",
diff --git a/package.json b/package.json
index 1e16b5a..fc95690 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,10 @@
   "main": "background.js",
   "dependencies": {
     "core-js": "^3.6.5",
+    "moment": "^2.29.1",
+    "remixicon": "^2.5.0",
     "vue": "^3.0.0",
+    "vue-i18n": "^9.2.0-beta.26",
     "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
@@ -33,7 +36,6 @@
     "eslint-plugin-vue": "^7.0.0",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
-    "spectron": "18.0.0",
     "typescript": "~3.9.3",
     "vue-cli-plugin-electron-builder": "~2.1.1",
     "vue-jest": "^5.0.0-0"
diff --git a/src/App.vue b/src/App.vue
index fffd3f3..0cf9a04 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,21 +2,14 @@
   <router-view/>
 </template>
 
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
 
+<style lang="scss">
+  @import './scss/app.scss';
+  @import './scss/layout.scss';
 </style>
 
 <script>
-//import { ipcRenderer } from 'electron'
-
+import 'remixicon/fonts/remixicon.css'
 export default {
   name: 'App',
   data: function () {
diff --git a/src/background.js b/src/background.js
index d9d5515..c97fc0c 100644
--- a/src/background.js
+++ b/src/background.js
@@ -16,7 +16,7 @@ protocol.registerSchemesAsPrivileged([
 async function createWindow() {
   // Create the browser window.
   const win = new BrowserWindow({
-    width: 800,
+    width: 1200,
     height: 600,
     webPreferences: {
       
diff --git a/src/components/Add.vue b/src/components/Add.vue
new file mode 100644
index 0000000..0325ef5
--- /dev/null
+++ b/src/components/Add.vue
@@ -0,0 +1,35 @@
+
+<template>
+  <div class="rmli-add rmli-note" @click="$emit('click')">
+      <textarea v-model="value" @keydown="onKeyDown" @keyup="onKeyPress" :placeholder="$t('add.new')"/>
+  </div>
+</template>
+
+<style lang="scss">
+  @import '../scss/add.scss';
+  @import '../scss/note.scss';
+</style>
+<script>
+
+export default {
+  name: 'Add',
+  emits: ['change', 'click'],
+  props: {
+  },
+  data: function () {
+    return {
+        value: ''
+    }
+  },
+  components: {
+  },
+  methods: {
+    onKeyPress (e) {
+      this.$emit('change', e.target.value)
+      this.value =''
+    }
+  },
+  mounted () {
+  }
+}
+</script>
diff --git a/src/components/Note.vue b/src/components/Note.vue
new file mode 100644
index 0000000..6c8f8d6
--- /dev/null
+++ b/src/components/Note.vue
@@ -0,0 +1,71 @@
+
+<template>
+  <div class="rmli-note" @click="$emit('click')">
+      <textarea :value="element.value" @keydown="onKeyDown" @keyup="onKeyPress" ref="input" :placeholder="element.placeholder"/>
+  </div>
+</template>
+
+<style lang="scss">
+  @import '../scss/note.scss';
+</style>
+<script>
+
+export default {
+  name: 'Note',
+  emits: ['change', 'focus', 'click'],
+  props: {
+    element :{
+      type: Object,
+      default() {
+        return { value: '' , placeholder:"Click to create new"}
+      }
+    },
+  },
+  data: function () {
+    return {
+        value: ''
+    }
+  },
+  components: {
+  },
+  methods: {
+    onKeyPress (e) {
+      console.debug('onKeyPress', e.target.value)
+      this.$emit('change', e.target.value)
+    },
+    onKeyDown () {
+      //console.debug('onKeyDown()', this.value, e)
+    
+     
+     /*
+      if (e.key == 'Tab') {
+        e.preventDefault();
+        var start = this.selectionStart;
+        var end = this.selectionEnd;
+
+        // set textarea value to: text before caret + tab + text after caret
+        this.value = this.value.substring(0, start) +
+          "\t" + this.value.substring(end);
+
+        // put caret at right position again
+        this.selectionStart =
+          this.selectionEnd = start + 1;
+      }
+
+
+      this.style.height = "auto";
+      this.style.height = (this.scrollHeight) + "px";
+      */
+
+    },
+    focus () {
+      this.$refs.input.focus()
+    }
+  },
+  mounted () {
+    if (this.element) {
+      this.value = this.element.value
+    }
+  }
+}
+</script>
diff --git a/src/components/SimpleNote.vue b/src/components/SimpleNote.vue
deleted file mode 100644
index 97e259d..0000000
--- a/src/components/SimpleNote.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-document.getElementById('textbox').addEventListener('keydown', function(e) {
-  if (e.key == 'Tab') {
-    e.preventDefault();
-    var start = this.selectionStart;
-    var end = this.selectionEnd;
-
-    // set textarea value to: text before caret + tab + text after caret
-    this.value = this.value.substring(0, start) +
-      "\t" + this.value.substring(end);
-
-    // put caret at right position again
-    this.selectionStart =
-      this.selectionEnd = start + 1;
-  }
-});
\ No newline at end of file
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 2c6292b..a22bd5e 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -1,28 +1,41 @@
 <template>
   <div class="rmli-toolbar">
-    <button @click="save">Save <span v-if="isDirty">*</span></button>
-    <button @click="select">Select</button>
+    <div class="rmli-tools">
+        <i class="ri-save-line" @click="onSave"></i> <span v-if="isDirty">*</span>
+        <i class="ri-folder-line" @click="onSelect"></i>
+    </div>
+     <div class="rmli-search">
+        <input v-model="search" :placeholder="$t('toolbar.search')" @keydown="onSearch">
+        <i class="ri-search-line"></i>
+    </div>
   </div>
 </template>
 
+<style lang="scss">
+  @import '../scss/toolbar.scss';
+</style>
 <script>
 
 export default {
   name: 'Toolbar',
-  emits: ['save', 'select'],
+  emits: ['save', 'select', 'search'],
   props: ['file', 'isDirty'],
   data: function () {
     return {
+        search: ''
     }
   },
   components: {
   },
   methods: {
-    save () {
+    onSave () {
         this.$emit('save')
     },
-    select () {
-     this.$emit('select')
+    onSelect () {
+        this.$emit('select')
+    },
+    onSearch () {
+        this.$emit('search', this.search)
     }
   },
   mounted () {
diff --git a/src/i18n/en.json b/src/i18n/en.json
new file mode 100644
index 0000000..cac0c99
--- /dev/null
+++ b/src/i18n/en.json
@@ -0,0 +1,8 @@
+{
+    "add": {
+        "new": "Type here to create new"
+    },
+    "toolbar": {
+        "search": "Search here"
+    }
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 3e79677..3019118 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,17 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import { createI18n } from 'vue-i18n'
 
-createApp(App).use(router).mount('#app')
+const i18n = createI18n({
+    locale: 'en', // set locale
+    fallbackLocale: 'en', // set fallback locale
+    messages: {
+        'en': require('./i18n/en.json'),
+        'en-uk': require('./i18n/en.json'),
+        'en-us': require('./i18n/en.json')
+    }
+  })
+
+  
+createApp(App).use(router).use(i18n).mount('#app')
diff --git a/src/scss/add.scss b/src/scss/add.scss
new file mode 100644
index 0000000..3ad3c0b
--- /dev/null
+++ b/src/scss/add.scss
@@ -0,0 +1,8 @@
+@import './ds.scss';
+
+.rmli-add{
+   
+    textarea{
+        height: 30px;
+    }
+}
\ No newline at end of file
diff --git a/src/scss/app.scss b/src/scss/app.scss
new file mode 100644
index 0000000..e3bc9ad
--- /dev/null
+++ b/src/scss/app.scss
@@ -0,0 +1,9 @@
+@import './ds.scss';
+
+#app {
+    font-family: $font-family;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: $color1;
+  }
+  
\ No newline at end of file
diff --git a/src/scss/ds.scss b/src/scss/ds.scss
index 2e44cf7..ea66a9f 100644
--- a/src/scss/ds.scss
+++ b/src/scss/ds.scss
@@ -9,12 +9,15 @@ $spacing-m:16px;
 $spacing-s:8px;
 $spacing-xs:4px;
 
+$font-family: Avenir, Helvetica, Arial, sans-serif;
 $font-size-xxl: 32px;
 $font-size-xl: 22px;
 $font-size-l: 18px;
 $font-size-m: 16px;
 $font-size-s: 14px;
 
+$border-color-transparent: tranparent;
+$border-color-focus: red;
 $border-radius-m: 8px;
 $border-radius-s: 4px;
 
diff --git a/src/scss/editor.scss b/src/scss/editor.scss
index d98631a..7ab9d4e 100644
--- a/src/scss/editor.scss
+++ b/src/scss/editor.scss
@@ -1,10 +1,8 @@
 @import './ds.scss';
 
 .rmli-editor {
-    padding: $spacing-l;
-    border: 1px solid red;
-
-    textarea{
-        border:0px;
+   
+    .rmli-element-add {
+   
     }
 }
\ No newline at end of file
diff --git a/src/scss/layout.scss b/src/scss/layout.scss
new file mode 100644
index 0000000..0dc896f
--- /dev/null
+++ b/src/scss/layout.scss
@@ -0,0 +1,8 @@
+@import './ds.scss';
+
+.rmli-container {
+    min-width: 400px;
+    max-width: 800px;
+    margin: auto;
+    border: 1px dashed #ccc;
+}
\ No newline at end of file
diff --git a/src/scss/note.scss b/src/scss/note.scss
new file mode 100644
index 0000000..74a963e
--- /dev/null
+++ b/src/scss/note.scss
@@ -0,0 +1,18 @@
+@import './ds.scss';
+
+.rmli-note{
+   
+    textarea{
+        border: none;
+        border-left: 3px solid transparent;
+
+        width: 100%;
+        box-sizing: border-box;
+        font-family: $font-family;
+
+        &:focus {
+            border-left: 3px solid blue;
+            outline: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss
new file mode 100644
index 0000000..ad6761c
--- /dev/null
+++ b/src/scss/toolbar.scss
@@ -0,0 +1,38 @@
+@import './ds.scss';
+
+.rmli-toolbar {
+    display: flex;
+    gap: $spacing-m;
+
+    .rmli-tools {
+        display: flex;
+        align-items: center;
+    }
+
+    .rmli-search {
+        display: flex;
+        flex-grow: 1;
+        font-size: $font-size-m;
+        gap: $spacing-m;
+        align-items: center;
+
+        input {
+            border: 1px solid transparent;
+            flex-grow: 1;
+            text-align: right;
+            &:focus {
+                border: 1px solid $border-color-focus;
+                outline:none;
+            }
+        }
+    }
+    
+    i {
+        font-size: $font-size-xl;
+        color: $color1;
+
+        &:hover {
+            color: $color1-hover;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index bc69836..635af68 100644
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@@ -1,25 +1,47 @@
 <template>
   <div class="rmli-editor">
-    <Toolbar @save="save" @select="select" :file="file" :isDirty="isDirty"/>
-    <textarea v-model="file.content.elements[0].value" @change="onChange"/>
+    <nav class="rmli-container">
+      <Toolbar @save="onSave" @select="onSelect" :file="file" :isDirty="isDirty" @search="onSearch"/>
+    </nav>
+    <main class="rmli-container">
+      
+      <!-- show only when not editing the new one? -->
+      <div class="rmli-element rmli-element-add" v-if="true">
+         <Add @change="addToTop"/>
+      </div>
+     
 
-    Dirty: {{isDirty}}
+      <div v-for="(element,i) in filteredElements" :key="i" class="rmli-element">
+         <component :is="element.type" :element="element" @change="onElementChange(element, $event)" ref="elements"/>
+      </div>
+
+      <div class="rmli-element rmli-element-add" v-if="true">
+         <Add @change="addToEnd" />
+      </div>
+    
+      <pre>{{JSON.stringify(file.content.elements, null, 2)}}</pre>
+    
+     
+    </main>
   </div>
 </template>
 
 <style lang="scss">
-  @import url('../scss/editor.scss');
+  @import '../scss/editor.scss';
 </style>
 <script>
 
 import APIService from '../services/APIService'
 import Toolbar from '../components/Toolbar'
+import Note from '../components/Note'
+import Add from '../components/Add'
 import Logger from '../util/Logger'
 
 export default {
   name: 'Editor',
   data: function () {
       return {
+        query: '',
         isDirty: false,
         file: {
           url: '',
@@ -29,7 +51,10 @@ export default {
             name: 'My File.json',
             elements: [
               {
-                type: 'NOTE',
+                id: new Date().getTime(),
+                created: new Date().getUTCDate(),
+                lastUpdate: new Date().getUTCDate(),
+                type: 'Note',
                 value: 'Hello'
               }
             ]
@@ -38,35 +63,84 @@ export default {
     }
   },
   components: {
-    Toolbar
+    Toolbar,
+    Note,
+    Add
+  },
+  computed: {
+    filteredElements () {
+      return this.file.content.elements
+    }
   },
   methods: {
+    onSearch (query) {
+      Logger.log(-1, 'Editor.onSearch()', query)
+      this.query = query
+    },
+    addToEnd (value) {
+      Logger.log(-1, 'Editor.addToEnd()', value)
+      this.file.content.elements.push({
+        id: new Date().getTime(),
+        created: new Date().getUTCDate(),
+        lastUpdate: new Date().getUTCDate(),
+        type: 'Note',
+        value: value
+      })
+      this.$nextTick(() => {
+        let ref = this.$refs.elements[this.$refs.elements.length - 1]
+        if (ref) {
+          ref.focus()
+        }
+      })
+    },
+    addToTop (value) {
+      Logger.log(-1, 'Editor.addToTop()', value)
+      this.file.content.elements.unshift({
+        id: new Date().getTime(),
+        created: new Date().getUTCDate(),
+        lastUpdate: new Date().getUTCDate(),
+        type: 'Note',
+        value: value
+      })
+      this.$nextTick(() => {
+        console.debug(this.$refs.elements)
+        let ref = this.$refs.elements[0]
+        if (ref) {
+          ref.focus()
+        }
+      })
+    },
+    onElementChange (element, value) {
+      Logger.log(1, 'Editor.onElementChange()', element, value)
+      element.value = value
+      this.isDirty = true
+    },
     onChange () {
       this.isDirty = true
     },
-    save () {
+    onSave () {
       Logger.log(2, 'Editor.save()', this.file)
       this.api.save(this.file)
     },
-    onSave(file) {
-      Logger.log(2, 'Editor.onSave()', file)
+    onSaveReply(file) {
+      Logger.log(2, 'Editor.onSaveReply()', file)
       this.file = file
       this.isDirty = false
     },
-    select () {
-      Logger.log(2, 'Editor.select()')
+    onSelect () {
+      Logger.log(2, 'Editor.onSelect()')
       this.api.select()
     },
-    onSelect (file) {
-      Logger.log(2, 'Editor.onSelect()', file)
+    onSelectReply (file) {
+      Logger.log(2, 'Editor.onSelectReply()', file)
       this.file = file
       this.isDirty = false
     }
   },
   mounted () {
     this.api = new APIService()
-    this.api.onSave(this.onSave)
-    this.api.onSelect(this.onSelect)
+    this.api.onSave(this.onSaveReply)
+    this.api.onSelect(this.onSelectReply)
   }
 }
 </script>