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>
     

src/pages/ChronoPage.vue

@@ -212,6 +212,7 @@ function selectSectionFromRoute() {
             :collections="collections"
             :selected-collection="selectedCollection"
             type="calendar"
+            @create="openCollectionEditor('calendar')"
             @select="selectCollection"
             @edit="openCollectionEditor('calendar', $event)"
             @toggle-visibility="toggleCalendarVisibility"
@@ -221,34 +222,11 @@ function selectSectionFromRoute() {
             :collections="collections"
             :selected-collection="selectedCollection"
             type="tasklist"
+            @create="openCollectionEditor('tasklist')"
             @select="selectCollection"
             @edit="openCollectionEditor('tasklist', $event)"
           />
           
-          <v-btn
-            v-if="!isTasksSection"
-            variant="tonal"
-            color="primary"
-            block
-            class="mt-3"
-            @click="openCollectionEditor('calendar')"
-          >
-            <v-icon start>mdi-plus</v-icon>
-            New Calendar
-          </v-btn>
-
-          <v-btn
-            v-else
-            variant="tonal"
-            color="primary"
-            block
-            class="mt-3"
-            @click="openCollectionEditor('tasklist')"
-          >
-            <v-icon start>mdi-plus</v-icon>
-            New Task List
-          </v-btn>
-
           <v-divider class="my-3" />
           <v-btn variant="text" prepend-icon="mdi-calendar-import" block class="justify-start" @click="handleImportStart">
             Import iCalendar