Some stuff working

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"

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 () {

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: {
 

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>

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>

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 () {

src/i18n/en.json

@@ -0,0 +1,8 @@
+{
+    "add": {
+        "new": "Type here to create new"
+    },
+    "toolbar": {
+        "search": "Search here"
+    }
+}

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')

src/scss/add.scss

@@ -0,0 +1,8 @@
+@import './ds.scss';
+
+.rmli-add{
+
+    textarea{
+        height: 30px;
+    }
+}

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;
+  }
+

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;
 

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 {
+
     }
 }

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;
+}

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;
+        }
+    }
+}

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;
+        }
+    }
+}