button animation

components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     Modal: typeof import('./src/components/Modal.vue')['default']
     Note: typeof import('./src/components/Note.vue')['default']
     NoteEditor: typeof import('./src/components/Note/NoteEditor.vue')['default']
+    NoteReferences: typeof import('./src/components/Note/NoteReferences.vue')['default']
     NoteToolbar: typeof import('./src/components/Note/NoteToolbar.vue')['default']
     SearchBar: typeof import('./src/components/Search/SearchBar.vue')['default']
     SearchResult: typeof import('./src/components/Search/SearchResult.vue')['default']

src/components/Note.vue

@@ -56,24 +56,7 @@ const setRootNote = () => {
       :note="activeNote"
       v-if="activeNote"
     />
-    <div class="card mt-3 border-[1px]" v-if="references.length > 0">
+    <NoteReferences :references="references" />
-      <div class="card-body px-3 py-3">
-        <ul class="menu rounded-md">
-          <li class="menu-title !opacity-100">
-            <span class="card-title text-secondary">
-              References
-              <div class="badge-outline badge">{{ references.length }}</div>
-            </span>
-          </li>
-          <li v-for="reference in references">
-            <a class="rounded-md" @click="activeNote = reference">
-              <i class="far fa-file-alt fa-fw" />
-              {{ reference.title }}
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
     <hr class="my-3" />
     <div class="flex text-sm text-secondary">
       <span>{{ note.wordCount }} {{ note.wordCount === 1 ? 'word' : 'words' }}</span>

src/components/Note/NoteReferences.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { activeNote } from '@/composables/useNotes'
+const props = defineProps<{
+  references: Note[]
+}>()
+</script>
+<template>
+  <div class="card mt-3 border-[1px]" v-if="props.references.length > 0">
+    <div class="card-body px-3 py-3">
+      <ul class="menu rounded-md">
+        <li class="menu-title !opacity-100">
+          <span class="card-title text-secondary">
+            References
+            <div class="badge-outline badge">{{ props.references.length }}</div>
+          </span>
+        </li>
+        <li v-for="reference in props.references">
+          <a class="rounded-md" @click="activeNote = reference">
+            <i class="far fa-file-alt fa-fw" />
+            {{ reference.title }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

src/components/Note/NoteToolbar.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
     <div class="btn-group flex items-center">
       <Modal>
         <template #activator="{ open }">
-          <button class="btn-sm btn" @click="open">
+          <button class="btn-toolbar btn-sm btn" @click="open">
             <i class="fas fa-fw fa-trash" />
           </button>
         </template>
@@ -28,7 +28,7 @@ const emit = defineEmits<{
       </Modal>
       <Modal>
         <template #activator="{ open }">
-          <button class="btn-sm btn" @click="open">
+          <button class="btn-toolbar btn-sm btn" @click="open">
             <i class="fas fa-fw fa-sitemap" />
           </button>
         </template>

src/style.scss

@@ -15,6 +15,10 @@ body {
   overflow-y: auto;
 }
 
+.btn {
+  animation-duration: 0s;
+}
+
 .ck-body-wrapper {
   height: 0;
 }