Files
meshcore-analyzer/public/account.css
T
efitenandClaude Opus 5.5 de364a8bb6 feat: mail notifications for watched nodes (user management part E) (#2140)
Part E of #2128: a logged-in user watches nodes and gets one mail when a
watched node goes offline, comes back, or reports a low battery. Admins
can add instance events: a new foreign node, and an observer going
offline or back. This covers the per-user mail part of #775.

Stacked on #2139 (part D, which builds on #2138). Review the commits
after that branch.

## The situation

A sysop learns that a repeater went silent, or that its battery is
running down, only by opening CoreScope. #775 asks for notifications.
Accounts (part A) now give a verified address to mail and a mailer with
delivery status.

## What this PR adds

**Events.** They use the instance thresholds, so a mail does not
disagree with the node page:
- `node.offline`: silent for the role's `healthThresholds` window. Last
heard comes from the packet store, and repeaters and rooms count relayed
traffic (#1598).
- `node.battery`: advert telemetry below `batteryThresholds.lowMv`,
recovered at `lowMv + 100`.
- Admins only: `foreign.new` (once per node) and `observer.offline`.

**Store.** Schema v5 with `notification_prefs`, `notification_watches`
and `notification_state`.

**Server** (only with `userManagement.notifications.enabled`)
- A notifier next to the janitor, every `intervalMinutes` (5). The
evaluator is a pure function of watches, prefs, stored states and node
snapshots.
- No burst after a restart or a new watch: a subject's first evaluation
stores its state without mailing. The loop waits for the startup load.
While ingest is stale (newest packet older than 30 minutes) the offline
checks pause, and after recovery they wait one silent window.
- One mail per user per check. Limits: 20 per user and 100 per instance
per rolling 24 hours, 50 watches per user. A change over a limit is
recorded and never mailed later.
- Every mail has a one-click unsubscribe (`List-Unsubscribe` and
`List-Unsubscribe-Post`). The GET only redirects to a confirm page, so
link scanners cannot unsubscribe anyone. Node names are cleaned of
control and bidi characters before they go into a mail.
- Routes: `GET`/`PUT /api/account/notifications`, `PUT`/`DELETE
/api/account/notifications/watches/{pubkey}`, `POST
/api/account/notifications/watch-my-nodes` (copies the synced "my nodes"
list), `GET`/`POST /api/notifications/unsubscribe`. `mailer.Message`
gains `Headers`.

**Frontend.** A "Notify me" toggle on the node pages, a Notifications
section on the account page (`#/account?section=notifications`), an
unsubscribe page, and the notification mail count on the admin overview.

Spec:
[`docs/specs/2026-10-07-node-notifications-design.md`](https://github.com/efiten/CoreScope/blob/feat/notifications/docs/specs/2026-10-07-node-notifications-design.md).

## Performance

Each check reads watches, prefs and states from `users.db` (one query
each), the watched nodes from the analyzer DB in chunks of 500, and
last-heard times from the packet store.

| Measurement | Result |
|---|---|
| One check on our staging instance, 130,000 packets in memory, 1
watcher | 6.9 ms, of which 0.93 ms holding the store read lock |
| Evaluator benchmark, 100 users with 50 watches each, 2,000 nodes |
1.75 ms |

No work is added to ingest, broadcast or any request path.

## Verification

- `internal/users` and `internal/mailer` with `-race`; the `cmd/server`
suite plus `-race` on the notifier tests; 74 new Go tests. The same
Windows-only failure as noted in #2138 applies.
- `sh test-all.sh` exits 0; the XSS gate in diff mode passes.
- User-management E2E: 26 of 26 steps locally. With notifications off
the new steps fail, so they do test the flag.
- On our staging and production instance since 7 October 2026.

## Not in this PR

- Other channels (Discord, Telegram, webhooks). Detection is separate
from delivery, so one can be added.
- The topology, RF and anomaly alerts of #775.
- If the whole server starts after a feed outage that already ended, the
grace window is unknown and a watcher can get one wrong offline mail.
The user guide says so.

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-08 22:02:39 +02:00

109 lines
8.7 KiB
CSS

/* Optional user management: header control, account pages, admin table. */
.nav-account-wrap { position: relative; }
.nav-account-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; min-width: 48px; padding: 6px 12px;
background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--nav-text-muted); font: inherit; font-size: 14px;
text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background .15s, color .15s; }
.nav-account-btn:hover { background: var(--nav-bg2); color: var(--nav-text); }
.nav-account-label { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.nav-account-menu { position: fixed; right: 0; top: 100%; min-width: 160px; z-index: 1200;
background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; }
.nav-account-menu[hidden] { display: none; }
.nav-account-menu a, .nav-account-menu button { display: flex; align-items: center; width: 100%; text-align: left; padding: 8px 14px; min-height: 48px;
color: var(--text); background: none; border: 0; font: inherit; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.nav-account-menu a:hover, .nav-account-menu button:hover { background: var(--row-hover); }
.account-page { display: flex; justify-content: center; padding: var(--space-md); }
.account-card { width: 100%; max-width: 520px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.account-card h2 { margin-top: 0; }
.account-card h3 { margin: 24px 0 8px; font-size: 1rem; }
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.account-field input { padding: 8px 10px; min-height: 48px; border: 1px solid var(--border); border-radius: 6px;
background: var(--input-bg); color: var(--text); font: inherit; box-sizing: border-box; }
/* The global .btn-primary is white on --accent (2.75:1), so account forms use
their own buttons: --text-on-accent on --accent-strong, as .tab-btn.active does. */
.account-btn { align-self: flex-start; min-height: 48px; padding: 8px 20px; border-radius: 6px; font: inherit; cursor: pointer; touch-action: manipulation; }
.account-btn-primary { background: var(--accent-strong); color: var(--text-on-accent); border: 1px solid var(--accent-strong); }
.account-btn-primary:hover { background: var(--palette-blue-700); }
.account-btn-secondary { background: var(--surface-1); color: var(--text); border: 1px solid var(--border); }
.account-btn-secondary:hover { background: var(--row-hover); }
.account-hint { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.account-msg { margin: 0; min-height: 1.2em; font-size: var(--fs-sm); }
.account-msg.ok { color: var(--status-green-text); }
.account-msg.err { color: var(--status-red-text); }
.account-links { font-size: var(--fs-sm); }
.account-links a { color: var(--link-color); }
.account-mail { text-align: center; padding: 32px 20px; }
.account-card.account-mail .account-mail-icon { display: block; width: 4.5rem; height: 4.5rem; font-size: 4.5rem; margin: 0 auto 12px; color: var(--accent-strong); }
.account-mail-title { margin: 0 0 12px; font-size: var(--fs-2xl); }
.account-mail-title:focus { outline: none; }
.account-mail-intro { font-size: var(--fs-lg); margin: 0 0 12px; }
.account-mail .account-links { font-size: var(--fs-md); }
.account-sessions { list-style: none; padding: 0; margin: 0; }
.account-sessions li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.cs-auth-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; opacity: 0; pointer-events: none;
background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; transition: opacity .2s; }
.cs-auth-toast.visible { opacity: 1; }
.um-page { padding: var(--space-md); }
.um-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.um-filters input, .um-filters select { padding: 6px 8px; min-height: 48px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); box-sizing: border-box; }
.um-table-wrap { overflow-x: auto; }
.um-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.um-table th, .um-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.um-table tr:hover td { background: var(--row-hover); }
.um-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.um-actions button { min-height: 48px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); color: var(--text); cursor: pointer; touch-action: manipulation; }
.um-status, .um-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); white-space: nowrap; }
.um-status-active, .um-chip-delivered, .um-chip-opened, .um-chip-clicked { color: var(--status-green-tint-text); }
.um-status-pending, .um-chip-sent, .um-chip-deferred, .um-chip-soft_bounce { color: var(--status-yellow-text); }
.um-status-disabled, .um-chip-hard_bounce, .um-chip-invalid_email, .um-chip-blocked, .um-chip-spam, .um-chip-error, .um-chip-bouncing { color: var(--status-red-text); }
.um-chip-unsubscribed { color: var(--text-muted); }
.um-status-approved { color: var(--status-green-tint-text); }
.um-status-rejected, .um-status-revoked { color: var(--status-red-text); }
.account-proposals { list-style: none; padding: 0; margin: 0; }
.account-proposals li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.account-proposals li .account-hint { flex-basis: 100%; margin: 0; }
.um-detail { margin-top: 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.um-detail ol { padding-left: 18px; }
@media (max-width: 760px) { .um-col-optional { display: none; } }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
a.account-btn { display: inline-flex; align-items: center; text-decoration: none; box-sizing: border-box; }
.um-detail-close { float: right; }
/* Compact controls on precise pointers; touch keeps the 48px targets above. */
@media (pointer: fine) {
.nav-account-btn { min-height: 36px; min-width: 36px; padding: 3px 10px; }
.nav-account-menu a, .nav-account-menu button { min-height: 36px; padding: 4px 14px; }
.account-field input { min-height: 36px; padding: 4px 10px; }
.account-btn { min-height: 36px; padding: 4px 16px; }
.um-filters input, .um-filters select { min-height: 36px; padding: 3px 8px; }
.um-actions button { min-height: 36px; padding: 2px 12px; }
}
/* Settings sync dialogs (settings-sync.js) on the shared .modal. */
.cs-dialog { display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.cs-dialog h3 { margin: 0; }
.cs-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Node notifications toggle (notifications.js) on the node side pane and full page. */
.node-notify-slot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 4px; }
.node-notify-slot:empty { display: none; }
.node-notify-btn { white-space: nowrap; }
/* Sized like the neighbouring buttons, which carry inline sizes in nodes.js
(side pane: Details/Analytics/Reach; full page: Copy URL/Reach). */
#nodeNotifySlot .node-notify-btn { font-size: 11px; padding: 2px 8px; }
#nodeNotifySlotFull { margin-left: 0; } /* the full page row spaces its buttons with gap */
#nodeNotifySlotFull .node-notify-btn { font-size: 12px; padding: 4px 10px; }
.node-notify-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--status-green-text); }
.node-notify-hint { color: var(--text-muted); font-size: var(--fs-sm); }
.node-notify-hint:empty { display: none; }
/* Notifications section (notifications.js) on the account page. */
.account-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.account-fieldset { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; }
#notifyForm + h4 { margin-top: var(--space-lg); }
.account-watches { list-style: none; padding: 0; margin: 0 0 8px; }
.account-watches li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }