undo button - not functional yet but gives a good idea of what will happen

src/components/message.vue

@@ -23,6 +23,14 @@
       class="messageBox"
     >
 
+      <!-- Render undo button for messages to friends. -->
+      <button 
+        v-if="undoOption === true"
+        class="undoButton"
+      >
+        undo
+      </button>
+
       <!-- message bubble -->
       <div
         class="bubble"
@@ -61,7 +69,11 @@
       </div>
 
       <!-- message context -->
-      <span v-if="message.isChild === 'last' || message.isChild === 'none'" class="context">
+      <span 
+        v-if="message.isChild === 'last' || message.isChild === 'none'"
+        class="context"
+        :class="{ 'context-undo-anim': undoOption }"
+      >
 
         <!-- Render Crimata icon or friend's initials. -->
         <div v-if="message.modifier == 'ai'" class="photo">
@@ -86,9 +98,9 @@
 
 <script lang='ts'>
 
- import {defineComponent, ref, onMounted} from 'vue';
- import { RenderMessage } from "@/types/message/index";
-
+ import { defineComponent, ref, onMounted, onBeforeUpdate } from 'vue';
+ import { clientRequest } from "@/modules/message";
+ import { useIpc } from "@/modules/ipc";
 
  export default defineComponent({
   name: "MessageItem",
@@ -99,10 +111,15 @@
 
     let addListener = false;
 
+    const undoOption = ref(false);
+
     const notify = ref(false)
     const isPlaying = ref(false);
 
+    const { post } = useIpc()
+
     if (!props.message.seen) {
+      console.log("MSG:Checking...")
 
       // newMessages always render with blue dot.
       if (props.message.newMessage) {
@@ -141,11 +158,24 @@
       }
     }
 
+    const onUndo = () => {
+      post("client-message", clientRequest("launch", {name: false}, "undo"))
+    }
+
     const onStopPlayback = (e: any) => {
       window.ipcRenderer.removeAllListeners("stop-playback-anim");
       isPlaying.value = false
     }
 
+    onBeforeUpdate(() => {
+
+      if (props.message.context.substring(0, 3) === 'To ') {
+        console.log("MSG:Applying undo anim")
+        undoOption.value = true;
+      }
+      
+    })
+
     onMounted(() => {
 
       // Listen for window focus event.
@@ -162,8 +192,10 @@
     })
 
     return {
+      onUndo,
       notify,
-      isPlaying
+      isPlaying,
+      undoOption
     }
   }
 
@@ -232,6 +264,8 @@
   }
 
   .messageBox {
+    position: relative;
+
     display: flex;
     flex-direction: column;
 
@@ -344,6 +378,8 @@
   }
 
   .context {
+    position: relative;
+
     display: flex;
     align-items: center;
 
@@ -353,6 +389,20 @@
     margin-top: 5px;
   }
 
+  .context-undo-anim {
+    animation-name: context-anim;
+    animation-duration: 3s;
+  }
+
+  @keyframes context-anim {
+    0%, 90% {
+      transform: translateX(-45px);
+    }
+    100% {
+      transform: translateX(0px);
+    }
+  }
+
   .photo {
     display: flex;
     justify-content: center;
@@ -410,4 +460,48 @@
     color: #357CA2;
   }
 
-</style>
+  .undoButton {
+    position: absolute;
+
+    bottom: 0px;
+    right: 0px;
+
+    opacity: 0;
+
+    border: none;
+    outline: none;
+
+    margin: 0px;
+    padding: 0px;
+
+    background-color: Transparent;
+
+    font-family: "SF Compact Display";
+    font-size: 12px;
+    font-weight: bold;
+    color: #9B9B9B;
+
+    animation-name: undo-anim;
+    animation-duration: 3s;
+}
+
+.undoButton:hover {
+  cursor: pointer;
+}
+
+@keyframes undo-anim {
+  0%, 90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+</style>
+<!-- 
+      // If this is a message to a friend, we render undo button.
+      if (props.message.context.substring(0, 3) === 'To ') {
+        console.log("MSG:Applying undo anim")
+        undoOption.value = true;
+      } -->