frontend ui enhacements

src/components/messageView/index.vue

@@ -23,21 +23,21 @@
 
 <script lang="ts">
 
-
-// mock messages
-import Messages from "./mockMessages";
-
-
 import TextBubble from "@/components/textBubble/index.vue";
+
 import { Message } from "@/types/message/index";
-import useTransitions from "./viewDetails/transitions";
-import useScrollView from "@/modules/scrollView";
-import useMitt from "@/modules/mitt";
 import { useIpc } from "@/modules/ipc";
 import { Queue } from '@/modules/queue';
+
+import useTransitions from "./viewDetails/transitions";
+import useScrollView from "@/modules/scrollView";
+
+import useMitt from "@/modules/mitt";
+
 import { defineComponent, reactive, onMounted, onUnmounted, watch, ref } from "vue";
 
 export default defineComponent({
+  
   name: "MessageView",
   components: { TextBubble },
   
@@ -47,24 +47,13 @@ export default defineComponent({
     const renderQ = new Queue();
 
     const { invoke } = useIpc("message");
+
+    // Each method will be called on their respective lifecycle event.
     const { beforeEnter, enter, afterEnter, rendering } = useTransitions();
     const { scrollView } = useScrollView({
       targetId: "messageView",
     });
 
-
-    const messages = Messages;
-    const count = ref(0);
-
-    function emittMessage() {
-      console.log("emitting mock message")
-      if (count.value < messages.length) {
-        emitter.emit("render-message", messages[count.value]);
-        count.value++;
-        return;
-      }
-    }
-
     const render = (m: Message) => {
       if (rendering.value) {
         renderQ.enqueue(m);
@@ -81,6 +70,8 @@ export default defineComponent({
     })
 
     onMounted(() => {
+
+      // Call render function on event "render-message."
       window.ipcRenderer.on("render-message", (event, payload) => {
         const m = payload.message;
         if (m.content) render(m);
@@ -107,8 +98,17 @@ export default defineComponent({
       enter,
       afterEnter,
       scrollView,
-      emittMessage,
     };
   },
 });
 </script>
+
+<style lang="scss" scoped>
+
+  #messageView {
+    width: 1000px;
+    height: 100vh;
+    color: red;
+  }
+
+</style>