auto imports

src/components/Autocomplete.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import SearchResult from '@/components/Search/SearchResult.vue'
 import { notes, findNotesByByTitle, activeNote } from '@/composables/useNotes'
 
 const props = defineProps<{

src/components/Modal.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 
 const modalBox = ref(null)

src/components/Note.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import NoteEditor from '@/components/NoteEditor.vue'
-import Modal from '@/components/Modal.vue'
 import { formatDate } from '@/utils/helpers'
 import { notes, activeNote } from '@/composables/useNotes'
 import { notesRelations } from '@/composables/useNotes'
@@ -30,13 +27,19 @@ const references = computed<Note[]>(() => {
     })
     .filter((note): note is Note => note !== undefined)
 })
+
+const deleteNote = () => {
+  console.log('delete note')
+}
+
+const setRootNote = () => {
+  console.log('set root note')
+}
 </script>
 <template>
   <div class="flex flex-col">
-    <div class="mb-2 flex items-center">
-      <h1
-        class="mr-2 flex flex-1 items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
-      >
+    <NoteToolbar @delete="deleteNote" @set-root="setRootNote">
+      <template #title>
         <i
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
           v-if="props.note.isRoot"
@@ -46,46 +49,8 @@ const references = computed<Note[]>(() => {
           class="flex-1 bg-transparent py-1 outline-none"
           v-model="noteTitle"
         />
-      </h1>
-      <div class="btn-group flex items-center">
-        <Modal>
-          <template #activator="{ open }">
-            <button class="btn-sm btn" @click="open">
-              <i class="fas fa-fw fa-trash" />
-            </button>
-          </template>
-          <template #default>Are you sure you want to delete this?</template>
-          <template #actions="{ close }">
-            <button
-              class="btn-primary btn-sm btn mr-1"
-              @click="() => console.log('delete note')"
-            >
-              Delete note
-            </button>
-            <button class="btn-sm btn" @click="close">Close</button>
-          </template>
-        </Modal>
-        <Modal>
-          <template #activator="{ open }">
-            <button class="btn-sm btn" @click="open">
-              <i class="fas fa-fw fa-sitemap" />
-            </button>
-          </template>
-          <template #default>
-            Are you sure you want to set this note as root note?
-          </template>
-          <template #actions="{ close }">
-            <button
-              class="btn-primary btn-sm btn mr-1"
-              @click="() => console.log('set root note')"
-            >
-              Set current note as root
-            </button>
-            <button class="btn-sm btn" @click="close">Close</button>
-          </template>
-        </Modal>
-      </div>
-    </div>
+      </template>
+    </NoteToolbar>
     <NoteEditor
       class="h-100 flex-1 overflow-auto"
       :note="activeNote"

src/components/Note/NoteEditor.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
 import CKEditor from '@/ckeditor/CKEditor'
 import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'
 import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
@@ -17,9 +16,7 @@ import { mdToHtml } from '@/utils/markdown'
 import { activeNote, getNoteByTitle } from '@/composables/useNotes'
 import Autocomplete from '@/components/Autocomplete.vue'
 
-const props = defineProps<{
-  note: Note
-}>()
+const props = defineProps<{ note: Note }>()
 
 const html = mdToHtml(props.note.content)
 

src/components/Note/NoteToolbar.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  delete: []
+  setRoot: []
+}>()
+</script>
+<template>
+  <div class="mb-2 flex items-center">
+    <h1
+      class="mr-2 flex flex-1 items-center rounded-md pr-2 text-3xl font-semibold hover:bg-gray-200"
+    >
+      <slot name="title"></slot>
+    </h1>
+    <div class="btn-group flex items-center">
+      <Modal>
+        <template #activator="{ open }">
+          <button class="btn-sm btn" @click="open">
+            <i class="fas fa-fw fa-trash" />
+          </button>
+        </template>
+        <template #default>Are you sure you want to delete this?</template>
+        <template #actions="{ close }">
+          <button class="btn-primary btn-sm btn mr-1" @click="emit('delete')">
+            Delete note
+          </button>
+          <button class="btn-sm btn" @click="close">Close</button>
+        </template>
+      </Modal>
+      <Modal>
+        <template #activator="{ open }">
+          <button class="btn-sm btn" @click="open">
+            <i class="fas fa-fw fa-sitemap" />
+          </button>
+        </template>
+        <template #default>
+          Are you sure you want to set this note as root note?
+        </template>
+        <template #actions="{ close }">
+          <button class="btn-primary btn-sm btn mr-1" @click="emit('setRoot')">
+            Set current note as root
+          </button>
+          <button class="btn-sm btn" @click="close">Close</button>
+        </template>
+      </Modal>
+    </div>
+  </div>
+</template>

src/components/Search/SearchBar.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import SearchResult from '@/components/Search/SearchResult.vue'
 import { notes, findNotes, activeNote } from '@/composables/useNotes'
 
 const active = ref(false)

src/components/SideBar.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { rootNote, notes, activeNote } from '@/composables/useNotes'
-import SideBarMenu from '@/components/SideBar/SideBarMenu.vue'
-import SideBarMenuItem from '@/components/SideBar/SideBarMenuItem.vue'
 
 const props = defineProps<{
   viewModes: ViewMode[]
@@ -20,7 +18,11 @@ const emit = defineEmits<{
     <SideBarMenu>
       <template #header>Root note</template>
       <template #items>
-        <SideBarMenuItem icon="fas fa-fw fa-home" @click="activeNote = rootNote">
+        <SideBarMenuItem
+          icon="fas fa-fw fa-home"
+          @click="activeNote = rootNote"
+          :title="rootNote?.title"
+        >
           {{ rootNote?.title }}
         </SideBarMenuItem>
       </template>
@@ -48,6 +50,7 @@ const emit = defineEmits<{
           v-for="note in notes"
           icon="far fa-file-alt fa-fw"
           @click="activeNote = note"
+          :title="rootNote?.title"
         >
           {{ note.title }}
         </SideBarMenuItem>

src/components/SideBar/SideBarMenuItem.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
 </script>
 <template>
   <a
-    class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
+    class="mt-1 block w-full cursor-pointer overflow-x-hidden text-ellipsis whitespace-nowrap rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
     :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
   >
     <i :class="props.icon" class="mr-2" v-if="props.icon"></i>

src/components/TopBar.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import Hamburger from '@/components/Hamburger.vue'
-import SearchBar from '@/components/Search/SearchBar.vue'
-import Logo from './Logo.vue'
 import { addNote, activeNote, rootNote } from '@/composables/useNotes'
 const props = defineProps<{
   sideBarCollapsed: boolean