Basic implementation of notification

src/views/Map.vue

@@ -88,6 +88,7 @@ function setPosition(position) {
 export default {
     beforeDestroy() {
         this.disableNoSleep();
+        this.removeNotification();
         this.$store.dispatch('hideReportDetails');
     },
     components: {
@@ -166,10 +167,16 @@ export default {
         return {
             isReportDialogVisible: false,
             noSleep: null,
+            notification: null,
             reportLatLng: null,
         };
     },
     methods: {
+        createNotification() {
+            this.notification = new Notification('Toto', { body: 'Foobar', icon: '', tag: 'CyclassistMap' }); // TODO: icon
+            this.notification.addEventListener('click', this.showReportDialog);
+            this.notification.addEventListener('close', this.createNotification);
+        },
         disableNoSleep() {
             if (this.noSleep) {
                 this.noSleep.disable();
@@ -211,6 +218,13 @@ export default {
         onMapZoomUpdate(zoom) {
             this.$store.dispatch('setCurrentMapZoom', { zoom });
         },
+        removeNotification() {
+            if (this.notification) {
+                this.notification.removeEventListener('close', this.createNotification);
+                this.notification.close();
+                this.notification = null;
+            }
+        },
         resetReportLatLng() {
             this.reportLatLng = null;
         },
@@ -220,6 +234,22 @@ export default {
                 this.noSleep.enable();
             }
         },
+        setupNotification() {
+            if (!window.Notification) {
+                // Ensure notification API is available
+                return;
+            }
+
+            if (Notification.permission && Notification.permission === 'granted') {
+                this.createNotification();
+            } else {
+                Notification.requestPermission((permission) => {
+                    if (permission === 'granted') {
+                        this.createNotification();
+                    }
+                });
+            }
+        },
         showReportDialog(latlng) {
             if (latlng) {
                 this.reportLatLng = [latlng[0], latlng[1]];
@@ -249,6 +279,8 @@ export default {
             }
         }
         this.$store.dispatch('fetchReports').catch(() => {});
+
+        this.setupNotification();
     },
 };
 </script>