feat(test-app): add notification delivery indicator

- Add visual indicator when notification is received (shows for 30s)
- Poll notification status every 5 seconds to detect recent deliveries
- Add helpful message in test notification success about checking top of screen
- Improve user feedback for notification testing workflow
This commit is contained in:
Matthew Raymer
2025-11-20 04:37:08 +00:00
parent 92bb566631
commit 53845330f9

View File

@@ -62,6 +62,11 @@
<div id="pluginStatusContent" style="margin-top: 8px;">
Loading plugin status...
</div>
<div id="notificationReceivedIndicator" style="margin-top: 8px; padding: 8px; background: rgba(0, 255, 0, 0.2); border-radius: 5px; display: none;">
<strong>🔔 Notification Received!</strong><br>
<span id="notificationReceivedTime"></span><br>
<small>Check the top of your screen for the notification banner</small>
</div>
</div>
</div>
@@ -232,7 +237,8 @@
const notificationTimeReadable = notificationTime.toLocaleTimeString();
status.innerHTML = '✅ Notification scheduled!<br>' +
'📥 Prefetch: ' + prefetchTimeReadable + ' (' + prefetchTimeString + ')<br>' +
'🔔 Notification: ' + notificationTimeReadable + ' (' + notificationTimeString + ')';
'🔔 Notification: ' + notificationTimeReadable + ' (' + notificationTimeString + ')<br><br>' +
'<small>💡 When the notification fires, look for a banner at the <strong>top of your screen</strong>.</small>';
status.style.background = 'rgba(0, 255, 0, 0.3)'; // Green background
// Refresh plugin status display
setTimeout(() => loadPluginStatus(), 500);
@@ -411,6 +417,39 @@
}
}
// Check for notification delivery periodically
function checkNotificationDelivery() {
if (!window.DailyNotification) return;
window.DailyNotification.getNotificationStatus()
.then(result => {
if (result.lastNotificationTime) {
const lastTime = new Date(result.lastNotificationTime);
const now = new Date();
const timeDiff = now - lastTime;
// If notification was received in the last 2 minutes, show indicator
if (timeDiff > 0 && timeDiff < 120000) {
const indicator = document.getElementById('notificationReceivedIndicator');
const timeSpan = document.getElementById('notificationReceivedTime');
if (indicator && timeSpan) {
indicator.style.display = 'block';
timeSpan.textContent = `Received at ${lastTime.toLocaleTimeString()}`;
// Hide after 30 seconds
setTimeout(() => {
indicator.style.display = 'none';
}, 30000);
}
}
}
})
.catch(error => {
// Silently fail - this is just for visual feedback
});
}
// Load plugin status automatically on page load
window.addEventListener('load', () => {
console.log('Page loaded, loading plugin status...');
@@ -419,6 +458,9 @@
loadPluginStatus();
loadPermissionStatus();
loadChannelStatus();
// Check for notification delivery every 5 seconds
setInterval(checkNotificationDelivery, 5000);
}, 500);
});