only show notifications for low battery

src/js/services/pushFlicIntegration.js

@@ -82,14 +82,53 @@ function showBatteryWarning(batteryLevel) {
     lastBatteryWarningTimestamp = now;
     
     // Show the notification
-    const message = `Flic button battery is low (${batteryLevel}%). Please replace the battery soon.`;
+    console.log(`[PushFlic] Low battery detected: ${batteryLevel}%`);
     
-    // Show browser notification if permission granted
-    if (Notification.permission === 'granted') {
-        new Notification('Flic Button Low Battery', {
-            body: message,
-            icon: '/public/favicon.ico'
+    // Create an alert or toast in the UI instead of a system notification
+    // System notifications for battery will be handled by the service worker
+    try {
+        // Create a temporary toast notification in the UI
+        const toast = document.createElement('div');
+        toast.className = 'battery-warning-toast';
+        toast.innerHTML = `
+            <div class="toast-icon">⚠️</div>
+            <div class="toast-message">
+                <strong>Flic Button Low Battery</strong>
+                <p>Battery level is ${batteryLevel}%. Please replace soon.</p>
+            </div>
+        `;
+        
+        // Style the toast
+        Object.assign(toast.style, {
+            position: 'fixed',
+            bottom: '20px',
+            right: '20px',
+            backgroundColor: '#ff9800',
+            color: 'white',
+            padding: '15px',
+            borderRadius: '4px',
+            boxShadow: '0 2px 5px rgba(0,0,0,0.2)',
+            zIndex: '9999',
+            display: 'flex',
+            alignItems: 'center',
+            maxWidth: '300px'
         });
+        
+        // Add to document
+        document.body.appendChild(toast);
+        
+        // Remove after 5 seconds
+        setTimeout(() => {
+            toast.style.opacity = '0';
+            toast.style.transition = 'opacity 0.5s ease';
+            setTimeout(() => {
+                if (toast.parentNode) {
+                    document.body.removeChild(toast);
+                }
+            }, 500);
+        }, 5000);
+    } catch (error) {
+        console.error('[PushFlic] Error showing battery warning toast:', error);
     }
 }