Feat: Show connection status at the bottom of Navbar (#255)

src/components/Navbar/ConnectionStatus.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-tooltip top>
+    <template #activator="{ on }">
+      <div class="d-flex justify-center fill-height">
+        <v-icon class="white--text" v-on="on">
+          {{ currentIcon }}
+        </v-icon>
+      </div>
+    </template>
+
+    <span>{{ status || 'unknown' }}</span>
+  </v-tooltip>
+</template>
+
+<script>
+import {
+  mdiCheckNetwork,
+  mdiNetworkOff,
+  mdiCloseNetwork,
+  mdiHelpNetwork
+} from '@mdi/js'
+
+export default {
+  props: ['status'],
+  computed: {
+    currentIcon() {
+      const icons = {
+        connected: mdiCheckNetwork,
+        disconnected: mdiNetworkOff,
+        firewalled: mdiCloseNetwork
+      }
+      const icon = icons?.[this.status]
+
+      if (!this.status || !icon) return mdiHelpNetwork
+
+      return icon
+    }
+  }
+}
+</script>

src/components/Navbar/NavbarActions.vue

@@ -54,6 +54,9 @@
         <span>done notification</span>
       </v-tooltip>
     </v-col>-->
+    <v-col>
+      <connection-status :status="connectionStatus" />
+    </v-col>
     <v-col>
       <v-tooltip top>
         <template #activator="{ on }">
@@ -78,10 +81,22 @@
 <script>
 import qbit from '@/services/qbit'
 import { mapGetters } from 'vuex'
-import { mdiBrightness4, mdiSpeedometerSlow, mdiBrightness7, mdiSpeedometer, mdiExitToApp, mdiBell, mdiBellOff } from '@mdi/js'
+import {
+  mdiBrightness4,
+  mdiSpeedometerSlow,
+  mdiBrightness7,
+  mdiSpeedometer,
+  mdiExitToApp,
+  mdiBell,
+  mdiBellOff
+} from '@mdi/js'
+import ConnectionStatus from './ConnectionStatus.vue'
 
 export default {
   name: 'BottomActions',
+  components: {
+    ConnectionStatus
+  },
   data: () => ({
     //commonStyle: 'primarytext--text',
     commonStyle: 'white--text',
@@ -104,11 +119,16 @@ export default {
     alarm() {
       return this.getAlarm()
     },
+    status() {
+      return this.getStatus()
+    },
     altSpeed() {
-      const status = this.getStatus()
-      if (status && status.altSpeed) return status.altSpeed
+      if (this.status && this.status.altSpeed) return this.status.altSpeed
 
       return null
+    },
+    connectionStatus() {
+      return this.status.status
     }
   },
   methods: {
@@ -130,4 +150,4 @@ export default {
     }
   }
 }
-</script>
+</script>