3 files changed, 18 insertions, 2 deletions
diff --git a/client-web/source/chat.ts b/client-web/source/chat.ts
index 792a620..e08437b 100644
--- a/client-web/source/chat.ts
+++ b/client-web/source/chat.ts
@@ -59,5 +59,15 @@ export class Chat extends OverlayUi {
         this.messages.append(ediv({ class: "message" },
             espan(sender.display_name, { class: "author" }), ": ", ...els
         ))
+        this.shown = true
+        this.notify(sender, message)
+    }
+    notify(sender: User, message: ChatMessage) {
+        if (sender.local || document.hasFocus()) return
+        if (Notification.permission != "granted") return
+        let body = "(empty message)"
+        if (message.text) body = message.text
+        if (message.image) body = "(image)"
+        new Notification(`keks-meet: ${sender.display_name}`, { body })
     }
 }
diff --git a/client-web/source/helper.ts b/client-web/source/helper.ts
index 3c5d0ff..35be473 100644
--- a/client-web/source/helper.ts
+++ b/client-web/source/helper.ts
@@ -36,6 +36,8 @@ export const eh6 = elem_with_content("h6")
 export const ediv = elem_with_children("div")
 export const espan = elem_with_content("span")
 export const elabel = elem_with_content("label")
+export const ebutton = elem_with_content("button")
+export const ebr = () => document.createElement("br")
 
 export const OVERLAYS = ediv({ class: "overlays" })
 
diff --git a/client-web/source/preferences/ui.ts b/client-web/source/preferences/ui.ts
index 1aaaca0..3461da9 100644
--- a/client-web/source/preferences/ui.ts
+++ b/client-web/source/preferences/ui.ts
@@ -1,4 +1,4 @@
-import { ediv, elabel, espan, OverlayUi } from "../helper.ts";
+import { ebr, ebutton, ediv, elabel, espan, OverlayUi } from "../helper.ts";
 import { PREF_DECLS } from "./decl.ts";
 import { change_pref, PrefDecl, PREFS } from "./mod.ts";
 
@@ -21,7 +21,11 @@ export class PrefUi extends OverlayUi {
             }
             return espan(`(not implemented)`)
         })
-        super(ediv({ class: "prefs-overlay" }, ...elements))
+        const notification_perm = Notification.permission == "granted" ? ediv() : ediv({},
+            espan("For keks-meet to send notifications, it needs you to grant permission: "),
+            ebutton("Grant", { onclick: () => Notification.requestPermission() }),
+        )
+        super(ediv({ class: "prefs-overlay" }, notification_perm, ebr(), ...elements))
     }
 
 }