Follow-on product UI: ship a real Notifications page for Hesychia (not the Creative Tim demo toast playground under ui-kit/layouts/notifications).
Users need a place to see in-app notices (billing, system, account) with read/unread behavior.
Context
llm-fe/src/llm-fe/ui-kit/layouts/notifications/index.js is a Material Dashboard example (snackbar demos). It is not wired as a product surface for Hesychia alerts.
Requirements
Page / route
First-class /notifications/ (or equivalent) route in App.tsx, behind auth like other app pages
Nav entry from header / account area consistent with existing chrome
Empty, loading, and error states
Content (MVP)
Show a list of notifications such as:
Billing: payment succeeded / failed / past due (once finance webhooks exist)
Account: ToS updates, password / SSO notices
System: maintenance or product announcements (optional static/admin-sourced)
Each item: title, short body, timestamp, read/unread, optional deep link (e.g. Account billing).
Data
Prefer backend-backed list if/when an API exists; otherwise MVP can:
Add a thin chat_backend notifications API (list + mark read) in a paired backend PR, or
Start with client-composed notices from known account/billing state and note API follow-up
Call out backend dependency in the PR if new endpoints are required.
UX
Mark one / mark all read
Unread badge on nav icon (nice-to-have for MVP)
Mobile-friendly list
Tests
Renders list from mocked data
Mark-read updates UI state
Acceptance criteria
Authenticated Notifications route + nav link
List UI with empty/loading/error states (not Creative Tim demo)
Read/unread supported for MVP data source
At least billing and/or account notice types represented
Tests for list + mark-read happy path
Backend API ticket/PR linked if server persistence is in scope
Real-time WebSocket notification fan-out (can be later)
## Summary
Follow-on product UI: ship a real **Notifications** page for Hesychia (not the Creative Tim demo toast playground under `ui-kit/layouts/notifications`).
Users need a place to see in-app notices (billing, system, account) with read/unread behavior.
---
## Context
`llm-fe/src/llm-fe/ui-kit/layouts/notifications/index.js` is a Material Dashboard **example** (snackbar demos). It is not wired as a product surface for Hesychia alerts.
---
## Requirements
### Page / route
- First-class `/notifications/` (or equivalent) route in `App.tsx`, behind auth like other app pages
- Nav entry from header / account area consistent with existing chrome
- Empty, loading, and error states
### Content (MVP)
Show a list of notifications such as:
- Billing: payment succeeded / failed / past due (once finance webhooks exist)
- Account: ToS updates, password / SSO notices
- System: maintenance or product announcements (optional static/admin-sourced)
Each item: title, short body, timestamp, read/unread, optional deep link (e.g. Account billing).
### Data
Prefer backend-backed list if/when an API exists; otherwise MVP can:
1. Add a thin `chat_backend` notifications API (list + mark read) in a paired backend PR, **or**
2. Start with client-composed notices from known account/billing state and note API follow-up
Call out backend dependency in the PR if new endpoints are required.
### UX
- Mark one / mark all read
- Unread badge on nav icon (nice-to-have for MVP)
- Mobile-friendly list
### Tests
- Renders list from mocked data
- Mark-read updates UI state
---
## Acceptance criteria
- [ ] Authenticated Notifications route + nav link
- [ ] List UI with empty/loading/error states (not Creative Tim demo)
- [ ] Read/unread supported for MVP data source
- [ ] At least billing and/or account notice types represented
- [ ] Tests for list + mark-read happy path
- [ ] Backend API ticket/PR linked if server persistence is in scope
## Related
- #33 Account billing (deep links)
- #31 sign-up / Checkout
- Tianji event tracking (optional: "notifications_opened" event)
## Out of scope
- Push / email delivery channels
- Real-time WebSocket notification fan-out (can be later)
westfarn
self-assigned this 2026-07-27 04:19:18 -07:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Summary
Follow-on product UI: ship a real Notifications page for Hesychia (not the Creative Tim demo toast playground under
ui-kit/layouts/notifications).Users need a place to see in-app notices (billing, system, account) with read/unread behavior.
Context
llm-fe/src/llm-fe/ui-kit/layouts/notifications/index.jsis a Material Dashboard example (snackbar demos). It is not wired as a product surface for Hesychia alerts.Requirements
Page / route
/notifications/(or equivalent) route inApp.tsx, behind auth like other app pagesContent (MVP)
Show a list of notifications such as:
Each item: title, short body, timestamp, read/unread, optional deep link (e.g. Account billing).
Data
Prefer backend-backed list if/when an API exists; otherwise MVP can:
chat_backendnotifications API (list + mark read) in a paired backend PR, orCall out backend dependency in the PR if new endpoints are required.
UX
Tests
Acceptance criteria
Related
Out of scope