cameleer/cameleer-server
1
0
Fork 0
Code Issues 44 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(alerts/ui): page header, scroll, title preview, bell badge polish

Browse Source 
Visual regressions surfaced during browser smoke:

1. Page headers — `SectionHeader` renders as 12px uppercase gray (a
   section divider, not a page title). Replace with proper h2 title
   + inline subtitle (`N firing · N total` etc.) and right-aligned
   actions, styled from `alerts-page.module.css`.

2. Undefined `--space-*` tokens — the project (and `@cameleer/design-system`)
   has never shipped `--space-sm|md|lg|xl`, even though many modules
   (SensitiveKeysPage, alerts CSS, …) reference them. The fallback
   to `initial` silently collapsed gaps/paddings to 0. Define the
   scale in `ui/src/index.css` so every consumer picks it up.

3. List scrolling — DataTable was using default pagination, but with
   no flex sizing the whole page scrolled. Add `fillHeight` and raise
   `pageSize`/list `limit` to 200 so the table gets sticky header +
   internal scroll + pinned pagination footer (Gmail-style). True
   cursor-based infinite scroll needs a backend change (filed as
   follow-up — `/alerts` only accepts `limit` today).

4. Title column clipping — `.titlePreview` used `white-space: nowrap`
   + fixed `max-width`, truncating message mid-UUID. Switch to a
   2-line `-webkit-line-clamp` so full context is visible.

5. Notification bell badge invisible — `NotificationBell.module.css`
   referenced undefined tokens (`--fg`, `--hover-bg`, `--bg`,
   `--muted`). Map to real DS tokens (`--text-primary`, `--bg-hover`,
   `#fff`, `--text-muted`). The admin user currently sees no badge
   because the backend `/alerts/unread-count` returns 0 (read
   receipts) — that's data, not UI.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-21 10:40:28 +02:00
parent 10e132cd50
commit 05f420d162
8 changed files with 126 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/components/NotificationBell.module.css
View File

@@ -5,11 +5,11 @@
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
color: var(--fg);
border-radius: var(--radius-md);
color: var(--text-primary);
text-decoration: none;
}
.bell:hover { background: var(--hover-bg); }
.bell:hover { background: var(--bg-hover); }
.badge {
position: absolute;
top: 2px;
@@ -18,7 +18,7 @@
height: 16px;
padding: 0 4px;
border-radius: 8px;
color: var(--bg);
color: #fff;
font-size: 10px;
font-weight: 600;
line-height: 16px;
@@ -26,4 +26,4 @@
}
.badgeCritical { background: var(--error); }
.badgeWarning { background: var(--amber); }
.badgeInfo { background: var(--muted); }
.badgeInfo { background: var(--text-muted); }