feat: unify collection creation

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/CollectionList.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
 
 // Emits
 const emit = defineEmits<{
+  'create': []
   'select': [collection: CollectionObject]
   'edit': [collection: CollectionObject]
   'toggle-visibility': [collection: CollectionObject]
@@ -42,6 +43,12 @@ const displayIcon = computed(() => {
   return 'mdi-folder'
 })
 
+const createLabel = computed(() => {
+  if (props.type === 'calendar') return 'New Calendar'
+  if (props.type === 'tasklist') return 'New Task List'
+  return 'New Collection'
+})
+
 // Functions
 const onCollectionSelect = (collection: CollectionObject) => {
   console.log('[Chrono] - Collection selected', collection)
@@ -60,9 +67,19 @@ const onToggleVisibility = (collection: CollectionObject) => {
 <template>
   <div class="collection-selector">
     <div class="collection-selector-header">
-      <div class="d-flex align-center mb-3">
-        <v-icon :icon="displayIcon" size="small" class="mr-2" />
-        <span class="text-subtitle-2 font-weight-bold">{{ displayTitle }}</span>
+      <div class="d-flex align-center justify-space-between mb-3">
+        <div class="d-flex align-center">
+          <v-icon :icon="displayIcon" size="small" class="mr-2" />
+          <span class="text-subtitle-2 font-weight-bold">{{ displayTitle }}</span>
+        </div>
+        <v-btn
+          icon="mdi-plus"
+          size="x-small"
+          variant="text"
+          :aria-label="createLabel"
+          :title="createLabel"
+          @click="emit('create')"
+        />
       </div>
     </div>