refactor: move component to share component

src/components/AddButton.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string;
+}>();
+</script>
+
+<template>
+  <div class="column items-center box" :class="{ dark: $q.dark.isActive }">
+    <div class="row">
+      <q-btn
+        unelevated
+        @click="$emit('trigger')"
+        size="lg"
+        class="color-btn"
+        icon="mdi-plus"
+        round
+      />
+    </div>
+    <div class="row q-mt-sm color-text" v-if="label">{{ $t(label) }}</div>
+  </div>
+</template>
+
+<style scoped>
+.box {
+  --_btn-add-color: var(--cyan-6-hsl);
+
+  .color-btn {
+    color: hsl(var(--_btn-add-color));
+    background: hsla(var(--_btn-add-color) / 0.1) !important;
+  }
+
+  .color-text {
+    color: var(--stone-6);
+  }
+
+  &.dark {
+    --_btn-add-color: var(--cyan-5-hsl);
+  }
+}
+</style>