button animation

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>