add connectionStatus state and component

src/main.ts

@@ -24,6 +24,8 @@ export default async function main() {
     /* launch browser window */
     await createWindow();
 
+    console.log('[Session]: Connection Alive: ', "loading");
+
     try {
         authState = await accountAuth() as AuthState;
     } catch(e) {

src/render/components/connectionStatus.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <div v-if="isAlive">Nominal</div>
+        <div v-else>Connecting</div>
+    </div>
+</template>
+
+
+<script lang="ts">
+
+import { defineComponent } from 'vue'
+import { isAlive } from "@/render/shared/connectionStatus";
+
+export default defineComponent({
+    name: "ConnectionStatus",
+
+    setup() {
+        return {
+            isAlive
+        }
+    }
+
+})
+
+</script>
+

src/render/components/header.vue

@@ -9,6 +9,7 @@
         class="menuButton minimizeButton"
         @click.prevent="postNavBarMin"
       />
+      <connection-status />
     </span>
 </template>
 
@@ -18,8 +19,11 @@
     import { defineComponent } from "vue";
     import { postNavBar } from "@/render/ipc";
 
+    import ConnectionStatus from "./connectionStatus.vue";
+
     export default defineComponent({
         name: "Header",
+        components: { ConnectionStatus },
         setup() {
             const postNavBarExit = () => postNavBar('close');
             const postNavBarMin = () => postNavBar('min');

src/render/listeners.ts

@@ -12,6 +12,7 @@ const SET_PROFILE_CHANNEL = "set-profile";
 const INIT_MESSAGES_CHANNEL = "init-messages";
 const ADD_MESSAGE_CHANNEL = "add-message";
 const UPDATE_MESSAGE_CHANNEL = "update-message";
+const CONNECTION_STATUS_CHANNEL = "set-connection-status";
 
 export const setProfileListener = new IpcRendererListener({
     channel: SET_PROFILE_CHANNEL,
@@ -35,7 +36,7 @@ export const updateMessagesListener = new IpcRendererListener({
 });
 
 export const connectionStatusListener = new IpcRendererListener({
-    channel: UPDATE_MESSAGE_CHANNEL,
+    channel: CONNECTION_STATUS_CHANNEL,
     listenerCallback: setConnectionStatus
 });
 

src/render/shared/connectionStatus.ts

@@ -2,9 +2,11 @@
 import { ref } from "vue";
 
 export const isAlive = ref(false);
+
 export const loading = ref(true);
 
 export const setConnectionStatus: IpcListenerCallback<boolean | null> = (payload) => {
+    console.log('received payload', payload)
     if (payload) {
         isAlive.value = payload;
     } else {

src/session.ts

@@ -60,9 +60,9 @@ const onMessageCallback = (payload: string) => {
 
 }
 
-const onConnectionStatusCallback = (alive: boolean) => {
-    console.log('[Session]: Connection Alive: ', alive);
-    // ipcEmit('connection-state', alive);
+const onConnectionStatusCallback = (isAlive: boolean | Error) => {
+    console.log('[Session]: Connection Alive: ', isAlive);
+    ipcEmit('set-connection-status', isAlive);
 }
 
 const { connect, send, close } = useWebsockets(