From a381b0e121b23553b4b0ab17c8209e4027829d59 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 18 Jan 2026 05:04:48 -0500
Subject: [PATCH] feat: Implement toast notifications for device status changes
 and events, and shorten page titles.

---
 status_server.js | 139 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 137 insertions(+), 2 deletions(-)
diff --git a/status_server.js b/status_server.js
index 249eddb..9740034 100644
--- a/status_server.js
+++ b/status_server.js
@@ -85,7 +85,7 @@ const dashboardHTML = `<!DOCTYPE html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Shelly Status Dashboard</title>
+    <title>Shelly Status</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
@@ -316,11 +316,96 @@ const dashboardHTML = `<!DOCTYPE html>
             margin-bottom: 1rem;
             opacity: 0.5;
         }
+        
+        /* Toast notifications */
+        .toast-container {
+            position: fixed;
+            bottom: 1.5rem;
+            right: 1.5rem;
+            display: flex;
+            flex-direction: column-reverse;
+            gap: 0.5rem;
+            z-index: 1000;
+            max-height: 80vh;
+            overflow: hidden;
+        }
+        
+        .toast {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 0.875rem 1rem;
+            backdrop-filter: blur(10px);
+            min-width: 280px;
+            max-width: 360px;
+            animation: toast-in 0.3s ease-out;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+        
+        .toast.removing {
+            animation: toast-out 0.3s ease-in forwards;
+        }
+        
+        @keyframes toast-in {
+            from { opacity: 0; transform: translateX(100px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        
+        @keyframes toast-out {
+            from { opacity: 1; transform: translateX(0); }
+            to { opacity: 0; transform: translateX(100px); }
+        }
+        
+        .toast-icon {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+        
+        .toast-icon.online {
+            background: rgba(34, 197, 94, 0.2);
+            color: var(--accent-online);
+        }
+        
+        .toast-icon.offline {
+            background: rgba(239, 68, 68, 0.2);
+            color: var(--accent-offline);
+        }
+        
+        .toast-icon.event {
+            background: rgba(59, 130, 246, 0.2);
+            color: var(--accent-blue);
+        }
+        
+        .toast-content {
+            flex: 1;
+            min-width: 0;
+        }
+        
+        .toast-title {
+            font-weight: 600;
+            font-size: 0.8rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        .toast-message {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
     </style>
 </head>
 <body>
     <div class="header">
-        <h1>Shelly Status Dashboard</h1>
+        <h1>Shelly Status</h1>
         <p class="status-indicator">
             <span class="status-dot" id="ws-dot"></span>
             <span id="connection-status">Connecting...</span>
@@ -335,6 +420,8 @@ const dashboardHTML = `<!DOCTYPE html>
             <p>Loading devices...</p>
         </div>
     </div>
+    
+    <div id="toast-container" class="toast-container"></div>
 
     <script>
         let devices = {};
@@ -409,6 +496,21 @@ const dashboardHTML = `<!DOCTYPE html>
             // Update online status if it's a system.online event
             if (component === 'system' && field === 'online') {
                 device.connected = event === 'true' || event === true ? 1 : 0;
+                const isOnline = device.connected === 1;
+                showToast(
+                    device.mac,
+                    isOnline ? \`Device Online\` : \`Device Offline\`,
+                    \`\${device.model}\`,
+                    isOnline ? 'online' : 'offline'
+                );
+            } else {
+                // Show toast for other events
+                showToast(
+                    device.mac,
+                    \`\${component}.\${field}\`,
+                    \`\${event}\`,
+                    'event'
+                );
             }
             
             // Re-render the specific device card
@@ -423,6 +525,39 @@ const dashboardHTML = `<!DOCTYPE html>
             }
         }
         
+        function showToast(mac, title, message, type) {
+            const container = document.getElementById('toast-container');
+            const toast = document.createElement('div');
+            toast.className = 'toast';
+            
+            const iconSvg = type === 'online' 
+                ? '<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>'
+                : type === 'offline'
+                ? '<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg>'
+                : '<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>';
+            
+            toast.innerHTML = \`
+                <div class="toast-icon \${type}">\${iconSvg}</div>
+                <div class="toast-content">
+                    <div class="toast-title">\${title}</div>
+                    <div class="toast-message">\${message}</div>
+                </div>
+            \`;
+            
+            container.appendChild(toast);
+            
+            // Auto-remove after 4 seconds
+            setTimeout(() => {
+                toast.classList.add('removing');
+                setTimeout(() => toast.remove(), 300);
+            }, 4000);
+            
+            // Limit to 5 toasts max
+            while (container.children.length > 5) {
+                container.firstChild.remove();
+            }
+        }
+        
         function renderDevices() {
             const container = document.getElementById('devices-container');
             
