From 2eb0354b2c491721751f554b25b2c5b935107173 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Mon, 28 Aug 2023 20:46:14 +0800
Subject: [PATCH] WIP: converted notification permission dialog into toggle

---
 src/App.vue                   | 28 +++++++++++++++++++++++++++-
 src/views/AccountViewView.vue | 21 +++++++++++++++++----
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b6cf7bf..d7921a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -157,7 +157,7 @@
             >
               <div class="w-full px-6 py-6 text-slate-900 text-center">
                 <p class="text-lg mb-4">
-                  Would you like to turn on notifications for this app?
+                  Would you like to <b>turn on</b> notifications for this app?
                 </p>
 
                 <button
@@ -181,6 +181,32 @@
               </div>
             </div>
           </div>
+          <div
+            v-if="notification.type === 'notification-mute'"
+            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+          >
+            <div
+              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
+            >
+              <div class="w-full px-6 py-6 text-slate-900 text-center">
+                <p class="text-lg mb-4">
+                  Would you like to <b>turn off</b> notifications for this app?
+                </p>
+
+                <button
+                  class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  Turn off Notifications
+                </button>
+                <button
+                  @click="close(notification.id)"
+                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+                >
+                  Keep it On
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
       </Notification>
     </div>
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index c8bd17a..b4124de 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -123,7 +123,9 @@
     >
       Switch Identity / No Identity
     </router-link>
-    <button
+    <label
+      for="toggleNotifications"
+      class="flex items-center cursor-pointer mt-4 mb-8"
       @click="
         this.$notify(
           {
@@ -133,10 +135,21 @@
           -1,
         )
       "
-      class="block w-full text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-8"
     >
-      Turn on Notifications
-    </button>
+      <!-- toggle -->
+      <div class="relative">
+        <!-- input -->
+        <input type="checkbox" name="toggleNotifications" class="sr-only" />
+        <!-- line -->
+        <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+        <!-- dot -->
+        <div
+          class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+        ></div>
+      </div>
+      <!-- label -->
+      <div class="ml-2">App Notifications</div>
+    </label>
 
     <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>