Added smart-disconnect + connection notifications

app/.meteor/packages

@@ -49,3 +49,4 @@ littledata:synced-cron
 mdg:meteor-apm-agent
 typescript@4.5.4
 seba:minifiers-autoprefixer
+mixmax:smart-disconnect

app/.meteor/versions

@@ -66,6 +66,7 @@ mikowals:batch-insert@1.3.0
 minifier-css@1.6.1
 minifier-js@2.7.5
 minimongo@1.9.0
+mixmax:smart-disconnect@0.0.5
 mobile-experience@1.1.0
 mobile-status-bar@1.1.0
 modern-browsers@0.1.9

app/imports/client/ui/layouts/AppLayout.vue

@@ -49,6 +49,7 @@
       </v-fade-transition>
     </v-app-bar>
     <v-main>
+      <connection-banner />
       <v-fade-transition mode="out-in">
         <router-view />
       </v-fade-transition>
@@ -66,12 +67,14 @@ import DialogStack from '/imports/client/ui/dialogStack/DialogStack.vue';
 import { mapMutations } from 'vuex';
 import SnackbarQueue from '/imports/client/ui/components/snackbars/SnackbarQueue.vue';
 import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+import ConnectionBanner from '/imports/client/ui/layouts/ConnectionBanner.vue';
 
 export default {
   components: {
     Sidebar,
     DialogStack,
     SnackbarQueue,
+    ConnectionBanner,
   },
   data() {
     return {

app/imports/client/ui/layouts/ConnectionBanner.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-banner
+    v-if="!connected"
+    sticky
+    single-line
+    :icon="icon"
+    :color="color"
+    style="top: 96px;"
+  >
+    {{ status }}
+  </v-banner>
+</template>
+
+<script lang="js">
+export default {
+  meteor: {
+    status() {
+      return Meteor.status().status;
+    },
+    connected() {
+      return Meteor.status().connected;
+    },
+  },
+  computed: {
+    icon() {
+      switch (this.status) {
+        case 'connecting': return 'mdi-connection';
+        case 'offline': return 'mdi-close-outline';
+        case 'waiting': return 'mdi-timer-sand-empty';
+        case 'failed': return 'mdi-alert-circle';
+        default: return 'mdi-close-outline';
+      }
+    },
+    color() {
+      switch (this.status) {
+        case 'connecting': return 'warning';
+        case 'offline': return 'error';
+        case 'waiting': return 'error';
+        case 'failed': return 'error';
+        default: return 'info';
+      }
+    },
+  }
+}
+</script>