✨ Messages update & deletion

src/components/chat/ChatMessage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-2">
+  <div class="flex gap-2 relative transition-colors transition-300 message-item">
     <div>
       <v-avatar
         color="grey-lighten-2"
@@ -19,17 +19,54 @@
         :attachments="props.item?.attachments"
       />
     </div>
+
+    <div class="transition-opacity transition-300 message-action">
+      <v-card>
+        <div class="flex px-2 py-0.5">
+          <v-btn icon="mdi-pencil" size="x-small" variant="text" @click="editMessage" />
+          <v-btn icon="mdi-delete" size="x-small" variant="text" color="error" @click="deleteMessage" />
+        </div>
+      </v-card>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useChannels } from "@/stores/channels"
 import MessageAttachment from "@/components/chat/renderer/MessageAttachment.vue"
 
+const channels = useChannels()
+
 const props = defineProps<{ item: any }>()
+
+function editMessage() {
+  channels.related.messages.edit_to = JSON.parse(JSON.stringify(props.item))
+}
+
+function deleteMessage() {
+  channels.related.messages.delete_to = JSON.parse(JSON.stringify(props.item))
+  channels.related.messages.delete_to.channel = channels.current
+  channels.show.messages.delete = true
+}
 </script>
 
 <style scoped>
 .rounded-card {
   border-radius: 8px;
 }
+
+.message-action {
+  position: absolute;
+  right: 8px;
+  top: -25%;
+  opacity: 0;
+}
+
+.message-item:hover {
+  background-color: rgba(0, 0, 0, .15);
+}
+
+.message-item:hover .message-action {
+  opacity: 100%;
+}
 </style>