double opt-in for notifications

Author: HardMax71

frontend/src/components/NotificationCenter.svelte

@@ -204,10 +204,18 @@
     }
     
     // getNotificationIcon now based on tags above
-    
-    // Request notification permission
-    if ('Notification' in window && Notification.permission === 'default') {
-        Notification.requestPermission();
+
+    // Track permission state reactively
+    let notificationPermission = $state(
+        typeof window !== 'undefined' && 'Notification' in window
+            ? Notification.permission
+            : 'denied'
+    );
+
+    async function requestNotificationPermission(): Promise<void> {
+        if (!('Notification' in window)) return;
+        const result = await Notification.requestPermission();
+        notificationPermission = result;
     }
 </script>
 
@@ -242,6 +250,17 @@
                         </button>
                     {/if}
                 </div>
+                {#if notificationPermission === 'default'}
+                    <button
+                        onclick={requestNotificationPermission}
+                        class="mt-2 w-full text-xs text-fg-muted dark:text-dark-fg-muted hover:text-blue-600 dark:hover:text-blue-400 flex items-center justify-center gap-1"
+                    >
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
+                        </svg>
+                        Enable desktop notifications
+                    </button>
+                {/if}
             </div>
 
             <div class="max-h-96 overflow-y-auto">