From 05375fed7ab540304501729eee33ecd56b4be843 Mon Sep 17 00:00:00 2001
From: Matt Currie <me@mattcurrie.com>
Date: Wed, 30 Apr 2025 17:34:46 +1200
Subject: [PATCH] Feature: Display unread count in app badge (#485)

* Display unread count in app badge

* Rate limit app badge updates
---
 server/ui-src/App.vue                 |  3 ++
 server/ui-src/components/AppBadge.vue | 59 +++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 server/ui-src/components/AppBadge.vue

diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index 897e36c..a40e5b7 100644
--- a/server/ui-src/App.vue
+++ b/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>
diff --git a/server/ui-src/components/AppBadge.vue b/server/ui-src/components/AppBadge.vue
new file mode 100644
index 0000000..3efb825
--- /dev/null
+++ b/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>