chore: Label components

app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { computed, watch, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import LabelItem from 'dashboard/components-next/label/LabelItem.vue';
+import AddLabel from 'dashboard/components-next/label/AddLabel.vue';
 
 const props = defineProps({
   contactId: {
@@ -14,7 +14,6 @@ const props = defineProps({
 });
 
 const store = useStore();
-const { t } = useI18n();
 const route = useRoute();
 
 const showDropdown = ref(false);
@@ -100,45 +99,10 @@ onMounted(() => {
 
 <template>
   <div class="flex flex-wrap items-center gap-2">
-    <div
-      v-for="label in savedLabels"
-      :key="label.id"
-      class="bg-n-alpha-2 rounded-md flex items-center h-7 w-fit py-1 ltr:pl-1 rtl:pr-1 ltr:pr-1.5 rtl:pl-1.5"
-    >
-      <div
-        class="w-2 h-2 m-1 rounded-sm"
-        :style="{ backgroundColor: label.color }"
-      />
-      <span class="text-sm text-n-slate-12">
-        {{ label.title }}
-      </span>
-    </div>
-    <div class="relative">
-      <button
-        class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-[26px] outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
-        :class="{ 'bg-n-alpha-2': showDropdown }"
-        @click="showDropdown = !showDropdown"
-      >
-        <span class="i-lucide-plus" />
-        <span class="text-sm text-n-slate-11">
-          {{ t('CONTACTS_LAYOUT.DETAILS.TAG_BUTTON') }}
-        </span>
-      </button>
-      <DropdownMenu
-        v-if="showDropdown"
-        v-on-clickaway="() => (showDropdown = false)"
-        :menu-items="labelMenuItems"
-        show-search
-        class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
-        @action="handleLabelAction"
-      >
-        <template #thumbnail="{ item }">
-          <div
-            class="rounded-sm size-2"
-            :style="{ backgroundColor: item.thumbnail.color }"
-          />
-        </template>
-      </DropdownMenu>
-    </div>
+    <LabelItem v-for="label in savedLabels" :key="label.id" :label="label" />
+    <AddLabel
+      :label-menu-items="labelMenuItems"
+      @update-label="handleLabelAction"
+    />
   </div>
 </template>