Feature: Display unread count in app badge (#485)

* Display unread count in app badge

* Rate limit app badge updates

server/ui-src/App.vue

@@ -1,6 +1,7 @@
 <script>
 import CommonMixins from './mixins/CommonMixins'
 import Favicon from './components/Favicon.vue'
+import AppBadge from './components/AppBadge.vue'
 import Notifications from './components/Notifications.vue'
 import EditTags from './components/EditTags.vue'
 import { mailbox } from "./stores/mailbox"
@@ -10,6 +11,7 @@ export default {
 
 	components: {
 		Favicon,
+		AppBadge,
 		Notifications,
 		EditTags
 	},
@@ -40,6 +42,7 @@ export default {
 <template>
 	<RouterView />
 	<Favicon />
+	<AppBadge />
 	<Notifications />
 	<EditTags />
 </template>

server/ui-src/components/AppBadge.vue

@@ -0,0 +1,59 @@
+<script>
+import { mailbox } from '../stores/mailbox.js'
+
+export default {
+    data() {
+        return {
+            updating: false,
+            needsUpdate: false,
+            timeout: 500,
+        }
+    },
+
+    computed: {
+        mailboxUnread() {
+            return mailbox.unread
+        }
+    },
+
+    watch: {
+        mailboxUnread: {
+            handler() {
+                if (this.updating) {
+                    this.needsUpdate = true
+                    return
+                }
+
+                this.scheduleUpdate()
+            },
+            immediate: true
+        }
+    },
+
+    methods: {
+        scheduleUpdate() {
+            this.updating = true
+            this.needsUpdate = false
+
+            window.setTimeout(() => {
+                this.updateAppBadge()
+                this.updating = false
+
+                if (this.needsUpdate) {
+                    this.scheduleUpdate()
+                }
+            }, this.timeout)
+        },
+
+        updateAppBadge() {
+            if (!('setAppBadge' in navigator)) {
+                return
+            }
+
+            navigator.setAppBadge(this.mailboxUnread)
+        }
+    }
+}
+</script>
+
+<template></template>