From febcf42b613fd50b4a767096804a19d5157eefce Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Sat, 25 Feb 2023 15:44:51 +0100
Subject: [PATCH] Update PWA notification page on page load

---
 app/helpers/bootstrap_helper.rb                |  3 ++-
 .../controllers/pwa_badge_controller.ts        | 18 ++++++++++++++++++
 .../retrospring/initializers/stimulus.ts       |  2 ++
 app/views/navigation/_desktop.html.haml        |  2 +-
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/retrospring/controllers/pwa_badge_controller.ts

diff --git a/app/helpers/bootstrap_helper.rb b/app/helpers/bootstrap_helper.rb
index 9445de93..730713f2 100644
--- a/app/helpers/bootstrap_helper.rb
+++ b/app/helpers/bootstrap_helper.rb
@@ -5,6 +5,7 @@ module BootstrapHelper
     options = {
       badge:       nil,
       badge_color: nil,
+      badge_attr:  {},
       icon:        nil,
       class:       ""
     }.merge(options)
@@ -29,7 +30,7 @@ module BootstrapHelper
         ("badge-pill" if options[:badge_pill])
       ].compact.join(" ")
 
-      body += " #{content_tag(:span, options[:badge], class: badge_class)}".html_safe
+      body += " #{content_tag(:span, options[:badge], class: badge_class, **options[:badge_attr])}".html_safe
     end
 
     content_tag(:li, link_to(body.html_safe, path, class: "nav-link"), class: classes)
diff --git a/app/javascript/retrospring/controllers/pwa_badge_controller.ts b/app/javascript/retrospring/controllers/pwa_badge_controller.ts
new file mode 100644
index 00000000..3fccef3f
--- /dev/null
+++ b/app/javascript/retrospring/controllers/pwa_badge_controller.ts
@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller<HTMLElement> {
+  isPwa: boolean;
+  badgeCapable: boolean;
+
+  initialize(): void {
+    this.isPwa = window.matchMedia('(display-mode: standalone)').matches;
+    this.badgeCapable = "setAppBadge" in navigator;
+  }
+
+  connect(): void {
+    if (this.isPwa && this.badgeCapable) {
+      const count = Number.parseInt(this.element.innerText);
+      navigator.setAppBadge(count);
+    }
+  }
+}
diff --git a/app/javascript/retrospring/initializers/stimulus.ts b/app/javascript/retrospring/initializers/stimulus.ts
index 6239a1f9..b0c93d0f 100644
--- a/app/javascript/retrospring/initializers/stimulus.ts
+++ b/app/javascript/retrospring/initializers/stimulus.ts
@@ -10,6 +10,7 @@ import CapabilitiesController from "retrospring/controllers/capabilities_control
 import CropperController from "retrospring/controllers/cropper_controller";
 import InboxSharingController from "retrospring/controllers/inbox_sharing_controller";
 import ToastController from "retrospring/controllers/toast_controller";
+import PwaBadgeController from "retrospring/controllers/pwa_badge_controller";
 
 /**
  * This module sets up Stimulus and our controllers
@@ -29,6 +30,7 @@ export default function (): void {
   window['Stimulus'].register('cropper', CropperController);
   window['Stimulus'].register('format-popup', FormatPopupController);
   window['Stimulus'].register('inbox-sharing', InboxSharingController);
+  window['Stimulus'].register('pwa-badge', PwaBadgeController);
   window['Stimulus'].register('theme', ThemeController);
   window['Stimulus'].register('toast', ToastController);
 }
diff --git a/app/views/navigation/_desktop.html.haml b/app/views/navigation/_desktop.html.haml
index eb8aba63..4739226f 100644
--- a/app/views/navigation/_desktop.html.haml
+++ b/app/views/navigation/_desktop.html.haml
@@ -10,7 +10,7 @@
           DEV
     %ul.nav.navbar-nav.me-auto
       = nav_entry t("navigation.timeline"), root_path, icon: 'home'
-      = nav_entry t("navigation.inbox"), '/inbox', icon: 'inbox', badge: inbox_count
+      = nav_entry t("navigation.inbox"), '/inbox', icon: 'inbox', badge: inbox_count, badge_attr: { data: { controller: "pwa-badge" } }
       - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
         = nav_entry t("navigation.discover"), discover_path, icon: 'compass'
     %ul.nav.navbar-nav