mailpit/server/ui-src/components/AppBadge.vue

<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>