chore: Adds the ability to remove labels from label card (#10591)

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

@@ -18,6 +18,11 @@ const route = useRoute();
 
 const showDropdown = ref(false);
 
+// Store the currently hovered label's ID
+// Using JS state management instead of CSS :hover / group hover
+// This will solve the flickering issue when hovering over the last label item
+const hoveredLabel = ref(null);
+
 const allLabels = useMapGetter('labels/getLabels');
 const contactLabels = useMapGetter('contactLabels/getContactLabels');
 
@@ -37,7 +42,7 @@ const labelMenuItems = computed(() => {
       isSelected: savedLabels.value.some(
         savedLabel => savedLabel.id === label.id
       ),
-      action: 'addLabel',
+      action: 'contactLabel',
     }))
     .toSorted((a, b) => Number(a.isSelected) - Number(b.isSelected));
 });
@@ -49,7 +54,7 @@ const fetchLabels = async contactId => {
   store.dispatch('contactLabels/get', contactId);
 };
 
-const handleLabelAction = async ({ action, value }) => {
+const handleLabelAction = async ({ value }) => {
   try {
     // Get current label titles
     const currentLabels = savedLabels.value.map(label => label.title);
@@ -59,16 +64,15 @@ const handleLabelAction = async ({ action, value }) => {
     if (!selectedLabel) return;
 
     let updatedLabels;
-    if (action === 'addLabel') {
+
-      // If label is already selected, remove it (toggle behavior)
+    // If label is already selected, remove it (toggle behavior)
-      if (currentLabels.includes(selectedLabel.title)) {
+    if (currentLabels.includes(selectedLabel.title)) {
-        updatedLabels = currentLabels.filter(
+      updatedLabels = currentLabels.filter(
-          labelTitle => labelTitle !== selectedLabel.title
+        labelTitle => labelTitle !== selectedLabel.title
-        );
+      );
-      } else {
+    } else {
-        // Add the new label
+      // Add the new label
-        updatedLabels = [...currentLabels, selectedLabel.title];
+      updatedLabels = [...currentLabels, selectedLabel.title];
-      }
     }
 
     await store.dispatch('contactLabels/update', {
@@ -82,6 +86,10 @@ const handleLabelAction = async ({ action, value }) => {
   }
 };
 
+const handleRemoveLabel = labelId => {
+  return handleLabelAction({ value: labelId });
+};
+
 watch(
   () => props.contactId,
   (newVal, oldVal) => {
@@ -95,11 +103,31 @@ onMounted(() => {
     fetchLabels(route.params.contactId);
   }
 });
+
+const handleMouseLeave = () => {
+  // Reset hover state when mouse leaves the container
+  // This ensures all labels return to their default state
+  hoveredLabel.value = null;
+};
+
+const handleLabelHover = labelId => {
+  // Added this to prevent flickering on when showing remove button on hover
+  // If the label item is at end of the line, it will show the remove button
+  // when hovering over the last label item
+  hoveredLabel.value = labelId;
+};
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center gap-2">
+  <div class="flex flex-wrap items-center gap-2" @mouseleave="handleMouseLeave">
-    <LabelItem v-for="label in savedLabels" :key="label.id" :label="label" />
+    <LabelItem
+      v-for="label in savedLabels"
+      :key="label.id"
+      :label="label"
+      :is-hovered="hoveredLabel === label.id"
+      @remove="handleRemoveLabel"
+      @hover="handleLabelHover(label.id)"
+    />
     <AddLabel
       :label-menu-items="labelMenuItems"
       @update-label="handleLabelAction"

app/javascript/dashboard/components-next/Label/LabelItem.vue

@@ -1,22 +1,56 @@
 <script setup>
-defineProps({
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
   label: {
     type: Object,
     default: null,
   },
+  isHovered: {
+    type: Boolean,
+    default: false,
+  },
 });
+
+const emit = defineEmits(['remove', 'hover']);
+
+const handleRemoveLabel = () => {
+  emit('remove', props.label?.id);
+};
+
+const handleMouseEnter = () => {
+  // Notify parent component when this label is hovered
+  // Added this to show the remove button with transition when hovering over the label
+  // This will solve the flickering issue when hovering over the last label item
+  emit('hover', props.label?.id);
+};
 </script>
 
 <template>
   <div
-    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"
+    class="flex items-center px-1 py-1 overflow-hidden transition-all duration-300 ease-out rounded-md bg-n-alpha-2 h-7"
+    @mouseenter="handleMouseEnter"
   >
     <div
       class="w-2 h-2 m-1 rounded-sm"
       :style="{ backgroundColor: label.color }"
     />
-    <span class="text-sm text-n-slate-12">
+    <span class="text-sm text-n-slate-12 ltr:mr-px rtl:ml-px">
       {{ label.title }}
     </span>
+    <div
+      class="w-0 flex relative ltr:left-1 rtl:right-1 flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-out"
+      :class="{ 'w-6': isHovered }"
+    >
+      <Button
+        class="transition-opacity duration-200 !h-7 ltr:rounded-r-md rtl:rounded-l-md ltr:rounded-l-none rtl:rounded-r-none w-6 bg-transparent"
+        :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
+        slate
+        xs
+        faded
+        icon="i-lucide-x"
+        @click="handleRemoveLabel"
+      />
+    </div>
   </div>
 </template>