feat(webapp): app-wide alerts with prominent visibility

webapp/src/App.vue

@@ -89,6 +89,33 @@
     </v-app-bar>
 
     <v-content>
+      <v-banner v-for="alert in $store.state.alerts" :key="alert.id">
+        <v-icon
+          slot="icon"
+          color="warning"
+          size="36"
+        >
+          {{ alert.icon }}
+        </v-icon>
+        {{ alert.teaser }}
+        <template v-slot:actions>
+          <v-btn
+            color="primary"
+            text
+            :href="alert.href"
+            v-if="alert.href"
+          >
+            {{ alert.button || 'More' }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            text
+            @click="$store.commit('unalert', alert.id)"
+          >
+            Hide
+          </v-btn>
+        </template>
+      </v-banner>
       <v-progress-linear
               :active="$store.getters.working"
               :indeterminate="$store.getters.working"

webapp/src/store/index.js

@@ -8,6 +8,7 @@ export default new Vuex.Store({
     authenticated: false,
     token: {},
     work_count: 0,
+    alerts: [],
   },
   mutations: {
     login(state, token) {
@@ -21,9 +22,30 @@ export default new Vuex.Store({
     working(state, working = true) {
       state.work_count += working ? 1 : -1;
     },
+    alert(state, alert) {
+      for (const known_alert of state.alerts) {
+        if (alert.id === known_alert.id) {
+          return;
+        }
+      }
+      state.alerts.push(alert);
+    },
+    unalert(state, id) {
+      let del_idx = undefined;
+      for (const [idx, alert] of state.alerts.entries()) {
+        if (alert.id === id) {
+          del_idx = idx;
+          break;
+        }
+      }
+      if (del_idx !== undefined) {
+        state.alerts.splice(del_idx, 1);
+      }
+    },
   },
   getters: {
-    working: state => !!state.work_count
+    working: state => !!state.work_count,
+    alerts: state => state.alerts,
   },
   actions: {
   },