dashboard: browser notifications for operator-bound events
three signals fire OS notifications: - new approval lands in the queue (per id, via /api/state delta) - new ask_operator question queued (per id) - broker message sent to operator (live via SSE) first /api/state render after page load seeds the 'seen' sets without firing — only items that arrive while the page is open count. controls in a row under the banner: 🔔 enable notifications (calls requestPermission, hides on grant), 🔕 mute / 🔔 unmute toggle (localStorage-backed so operator can silence without revoking the permission), inline status text when blocked or unsupported. notification tag='hyperhive' collapses rapid bursts; onclick focuses the dashboard tab. requires secure context (HTTPS or localhost) — on other origins the API is unavailable and the controls hide themselves. todo: entry dropped.
This commit is contained in:
parent
a67aada7c9
commit
237b215c55
4 changed files with 148 additions and 25 deletions
|
|
@ -190,6 +190,32 @@ a:hover {
|
|||
word-break: normal;
|
||||
}
|
||||
|
||||
/* Notification controls — sit between the banner and the
|
||||
containers section. Hidden by JS when notifications are
|
||||
unsupported, denied, or already in the right state. */
|
||||
.notif-row {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
margin: 0.5em 0;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.btn-notif {
|
||||
font-family: inherit;
|
||||
font-size: 0.85em;
|
||||
background: transparent;
|
||||
color: var(--cyan);
|
||||
border: 1px solid var(--cyan);
|
||||
padding: 0.2em 0.7em;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 0 4px currentColor;
|
||||
}
|
||||
.btn-notif:hover {
|
||||
background: rgba(137, 220, 235, 0.1);
|
||||
box-shadow: 0 0 10px -2px currentColor;
|
||||
}
|
||||
|
||||
.pending-state {
|
||||
color: var(--amber);
|
||||
font-size: 0.85em;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue