beginnings of refactor

src/render/components/messenger.vue

@@ -0,0 +1,101 @@
+<template>
+
+  <!-- Position fixed items -->
+  <InputItem :initials="profile.initials"/>
+  <Settings />
+  <div id="recIcon" />
+
+  <!-- List of message bubbles. -->
+  <div id="messenger">
+    <Bubble
+      v-for="message in messages"
+      :text="message.text"
+      :context="message.context"
+      :key="message[0]"
+    />
+  </div>
+
+</template>
+
+<script lang="ts">
+
+import { defineComponent, onMounted, onUnmounted } from "vue";
+import Message from "@/render/components/message.vue";
+import InputItem from "@/render/components/inputItem.vue";
+import Settings from "@/render/components/settings.vue";
+import useMessages from "@/render/composables/messages";
+
+export default defineComponent({
+  name: "Messenger",
+
+  props: ["state"],
+
+  components: {
+    Message,
+    InputItem,
+    Settings
+  },
+
+  setup(props) {
+
+    // Handle messages in view.
+    const { messages, updateMessageView } = useMessages();
+
+    onMounted(() => {
+
+      /* populate the message view with existing messages */
+      updateMessageView(state.savedMessages, state.newMessages);
+
+      /* wait and listen for new messages to come in */
+      window.ipcRenderer.on("new-message", (_e: any, payload: any) => {
+        updateMessageView(payload.message);
+      });
+
+    });
+
+    onUnmounted(() => {
+      window.ipcRenderer.removeAllListeners("new-message");
+    });
+
+    return {
+      messages
+    };
+
+  },
+
+});
+</script>
+
+<style lang="scss" scoped>
+
+#messenger {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+}
+
+#messenger::-webkit-scrollbar {
+  display: none;
+}
+
+#recIcon {
+  position: fixed;
+  right: 0;
+
+  opacity: 0;
+  transform: scale(0.0);
+
+  margin-top: 24px;
+  margin-right: 66px;
+
+
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #FF3B3B;
+
+  z-index: 2;
+
+}
+
+</style>