Added permission step; UI workflow documentation

src/App.vue

@@ -162,17 +162,22 @@
 
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                  @click="
+                    close(notification.id);
+                    turnOnNotifications();
+                  "
                 >
                   Turn on Notifications
                 </button>
                 <div class="grid grid-cols-2 gap-2">
                   <button
-                    @click="close(notification.id)"
+                    @click="maybeLater(notification.id)"
                     class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
                   >
                     Maybe Later
                   </button>
                   <button
+                    @click="never(notification.id)"
                     class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md"
                   >
                     Never
@@ -254,4 +259,62 @@
 
 <style></style>
 
-<script lang="ts"></script>
+<script lang="ts">
+import { Vue, Component } from "vue-facing-decorator";
+
+@Component
+export default class App extends Vue {
+  private askPermission(): Promise<NotificationPermission> {
+    // Check if Notifications are supported
+    if (!("Notification" in window)) {
+      alert("This browser does not support notifications.");
+      return Promise.reject("This browser does not support notifications.");
+    }
+
+    // Check existing permissions
+    if (Notification.permission === "granted") {
+      return Promise.resolve("granted");
+    }
+
+    // Request permission
+    return new Promise((resolve, reject) => {
+      const permissionResult = Notification.requestPermission((result) => {
+        resolve(result);
+      });
+
+      if (permissionResult) {
+        permissionResult.then(resolve, reject);
+      }
+    }).then((permissionResult) => {
+      console.log("Permission result:", permissionResult);
+
+      if (permissionResult !== "granted") {
+        alert("We need notification permission to provide certain features.");
+        return Promise.reject("We weren't granted permission.");
+      }
+
+      return permissionResult;
+    });
+  }
+
+  async turnOnNotifications() {
+    return this.askPermission()
+      .then((permission) => {
+        console.log("Permission granted:", permission);
+        // Initialize notifications here
+      })
+      .catch((error) => {
+        console.error("An error occurred:", error);
+        // Handle error appropriately here
+      });
+  }
+
+  never(ID: string) {
+    alert(ID);
+  }
+
+  maybeLater(ID: string) {
+    alert(ID);
+  }
+}
+</script>