Publish current project state

frontend/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue

@@ -20,13 +20,17 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  allowEdit: {
+    type: Boolean,
+    default: false,
+  },
   collapsible: {
     type: Boolean,
     default: false,
   },
 });
 
-const emit = defineEmits(['delete']);
+const emit = defineEmits(['delete', 'edit']);
 const noteContentRef = useTemplateRef('noteContentRef');
 const needsCollapse = ref(false);
 const [isExpanded, toggleExpanded] = useToggle();
@@ -37,6 +41,10 @@ const handleDelete = () => {
   emit('delete', props.note.id);
 };
 
+const handleEdit = () => {
+  emit('edit', props.note);
+};
+
 onMounted(() => {
   if (props.collapsible) {
     // Check if content height exceeds approximately 4 lines
@@ -71,15 +79,28 @@ onMounted(() => {
           </span>
         </div>
       </div>
-      <Button
-        v-if="allowDelete"
-        variant="faded"
-        color="ruby"
-        size="xs"
-        icon="i-lucide-trash"
-        class="opacity-0 group-hover/note:opacity-100"
-        @click="handleDelete"
-      />
+      <div
+        class="flex items-center gap-1 opacity-0 group-hover/note:opacity-100"
+      >
+        <Button
+          v-if="allowEdit"
+          variant="faded"
+          color="blue"
+          size="xs"
+          icon="i-lucide-pencil"
+          :aria-label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EDIT_NOTE')"
+          @click="handleEdit"
+        />
+        <Button
+          v-if="allowDelete"
+          variant="faded"
+          color="ruby"
+          size="xs"
+          icon="i-lucide-trash"
+          :aria-label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.DELETE_NOTE')"
+          @click="handleDelete"
+        />
+      </div>
     </div>
     <p
       ref="noteContentRef"