factored out settings from messageView

src/components/messageItem.vue

@@ -80,7 +80,7 @@
   },
 
   setup(props) {
-    let isPlaying = ref(false);
+    const isPlaying = ref(false);
 
     const onStopPlayback = (e: any) => {
       window.ipcRenderer.removeAllListeners("stop-playback-anim");

src/components/settings.vue

@@ -0,0 +1,151 @@
+<template>
+    
+  <!-- Settings icon. -->
+  <button 
+    class="settingsIcon" 
+    v-if="toggleSettings == false"
+    @click="onActive"
+  >
+    <div class="settingsButtonDot"></div>
+    <div class="settingsButtonDot"></div>
+    <div class="settingsButtonDot"></div>
+  </button>
+
+  <!-- Settings div. -->
+  <div id="settings" v-show="toggleSettings">
+    <button 
+      class="settingsOption"
+      @click="onLogout"
+    >
+      Logout
+    </button>
+  </div>
+
+</template>
+
+<script lang="ts">
+
+  import { defineComponent, ref } from "vue";
+  import { useAuth } from "@/modules/auth";
+  import  { useIpc } from "@/modules/ipc";
+  import { useRouter } from "vue-router";
+
+
+  export default defineComponent({
+    name: "Settings",
+
+    setup() {
+      let toggleSettings = ref(false);
+
+      const { post } = useIpc();
+      const { logout } = useAuth();
+      const router = useRouter();
+
+
+      // When settings is showing.
+      const onActive = () => {
+        toggleSettings.value = true;
+        window.addEventListener("keydown", onEscape);
+      }
+
+      // Listen for escape key to close settings.
+      const onEscape = (e: any) => {
+        if(e.key === "Escape") {
+          toggleSettings.value = false;
+        }
+        window.removeEventListener("keydown", onEscape);
+      }
+
+      // When user clicks logout button in settings.
+      const onLogout = () => {
+        logout();
+        router.push({ name: "login" });
+        post("logout", "")
+      } 
+
+      return {
+        onActive, 
+        toggleSettings,
+        onLogout
+      }
+    }   
+  })
+
+</script>
+
+<style lang="scss" scoped>
+
+#settings {
+  position: fixed;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 100vw;
+  height: 100vh;
+
+  background-color: #EBEBEB;
+
+  opacity: 0.75;
+
+  z-index: 4;
+
+  animation-name: appear;
+  animation-duration: 0.5s;
+}
+
+@keyframes appear {
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 0.75
+  }
+}
+
+.settingsIcon {
+  position: fixed;
+  right: 0;
+
+  border: none;
+  outline: none;
+
+  display: flex;
+  flex-direction: row;
+
+  margin-right: 20px;
+  margin-top: 24px;
+
+  z-index: 2;
+  background-color: #EBEBEB;
+}
+
+.settingsButtonDot {
+  width: 5px;
+  height: 5px;
+
+  margin: 2px;
+  border-radius: 2.5px;
+  background-color: #9B9B9B;
+}
+
+.settingsOption {
+  font-family: "SF Compact Display";
+  background-color: #B7B7B7;
+  padding: 10px 30px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: bold;
+  border: none;
+  outline: none;
+  text-decoration: none;
+}
+
+.settingsOption:hover {
+  cursor: pointer;
+}
+
+</style>
+

src/views/messenger.vue

@@ -1,26 +1,6 @@
 <template>
   <InputItem />
-
+  <Settings />
-  <!-- Settings open button. -->
-  <button 
-    class="settingsIcon" 
-    v-if="toggleSettings == false"
-    @click="onSettings"
-  >
-    <div class="settingsButtonDot"></div>
-    <div class="settingsButtonDot"></div>
-    <div class="settingsButtonDot"></div>
-  </button>
-
-  <!-- Settings "page." -->
-  <div id="settings" v-show="toggleSettings">
-    <button 
-      class="settingsOption"
-      @click="onLogout"
-    >
-      Logout
-    </button>
-  </div>
 
   <!-- List of message bubbles. -->
   <div id="messenger">
@@ -32,12 +12,12 @@
 <script lang="ts">
 import { defineComponent, reactive, ref, onMounted, onUnmounted } from "vue";
 import { RenderMessage , Annotation } from "@/types/message/index";
+
 import MessageItem from "@/components/messageItem.vue";
 import InputItem from "@/components/inputItem/inputItem.vue";
+import Settings from "@/components/settings.vue";
+
 import useMitt from "@/modules/mitt";
-import { useRouter } from "vue-router";
-import { useAuth } from "@/modules/auth";
-import  { useIpc } from "@/modules/ipc";
 
 export default defineComponent({
   name: "Messenger",
@@ -45,38 +25,10 @@ export default defineComponent({
   components: {
     MessageItem,
     InputItem,
+    Settings
   },
 
   setup() {
-
-    const { post } = useIpc();
-    const { logout } = useAuth();
-    const router = useRouter();
-
-    // Whether or not to show the settings.
-    const toggleSettings = ref(false);
-
-    // Listen for escape key to close settings.
-    const onEscape = (e: any) => {
-      if(e.key === "Escape") {
-        toggleSettings.value = false;
-      }
-      window.removeEventListener("keydown", onEscape);
-    }
-
-    // When user clicks settings button.
-    const onSettings = () => {
-      toggleSettings.value = true;
-      window.addEventListener("keydown", onEscape);
-    }
-
-    // When user clicks logout button in settings.
-    const onLogout = () => {
-      logout();
-      router.push({ name: "login" });
-      post("logout", "")
-    } 
-
     const { emitter } = useMitt();
 
     // List of messages in the view.
@@ -105,8 +57,6 @@ export default defineComponent({
       }
     }
 
-    toggleSettings.value = false;
-
     onMounted(() => {
       emitter.on('self-message', (message) => messages.set(message.uid, message));
       // Listen for new messages to render.
@@ -119,10 +69,7 @@ export default defineComponent({
     });
 
     return {
-      toggleSettings,
+      messages
-      messages,
-      onSettings,
-      onLogout
     };
   },
 });
@@ -146,76 +93,4 @@ export default defineComponent({
 #messenger::-webkit-scrollbar {
   display: none;
 }
-
-#settings {
-  position: fixed;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  width: 100vw;
-  height: 100vh;
-
-  background-color: #EBEBEB;
-
-  opacity: 0.75;
-
-  z-index: 4;
-
-  animation-name: appear;
-  animation-duration: 0.5s;
-}
-
-@keyframes appear {
-  from {
-    opacity: 0
-  }
-  to {
-    opacity: 0.75
-  }
-}
-
-.settingsIcon {
-  position: fixed;
-  right: 0;
-
-  border: none;
-  outline: none;
-
-  display: flex;
-  flex-direction: row;
-
-  margin-right: 20px;
-  margin-top: 24px;
-
-  z-index: 2;
-  background-color: #EBEBEB;
-}
-
-.settingsButtonDot {
-  width: 5px;
-  height: 5px;
-
-  margin: 2px;
-  border-radius: 2.5px;
-  background-color: #9B9B9B;
-}
-
-.settingsOption {
-  font-family: "SF Compact Display";
-  background-color: #B7B7B7;
-  padding: 10px 30px;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: bold;
-  border: none;
-  outline: none;
-  text-decoration: none;
-}
-
-.settingsOption:hover {
-  cursor: pointer;
-}
 </style>