feat: enhance notification system with typed toasts and unread badge (#19)

[CHY9213]

Summary

Enhanced the MergeOS notification experience for both public users and authenticated dashboard users.

Changes

frontend/src/App.vue

• Toast system: now supports types (success/error/warning/info) with color-coded backgrounds
• Dismissible toasts: click anywhere on toast or the × button
• Extended timeout: 3.5s auto-dismiss (was 2.2s)
• Unread notification badge: bell icon shows red badge with unread count (capped at 99+)
• Toast refactored: showToast(message, type) - second param sets the type
• Error toasts: API error messages now show with red error styling

frontend/src/styles.css

• Added .toast.success/.error/.warning/.info color rules
• Added .toast-icon, .toast-text, .toast-dismiss styles
• Added .notif-badge (unread count) and .notif-badge-zero (empty state count)

Evidence

(Add screenshots after testing)

Closes #19

[weilixiong]

QA Verification Report — PR #97

Target PR: #97 (feat: enhance notification system with typed toasts and unread badge #19)
Author: @CHY9213

CI Status

All 5 checks pass: Backend build and test ✅ | Web build (admin) ✅ | Web build (frontend) ✅ | Web build (scan) ✅ | Secret scan ✅

Code Review

• Files changed: 2 (frontend/src/App.vue +89/-9, frontend/src/styles.css +67/-0)
• Changes summary:
  1. Typed toasts: showToast(message, type) now accepts success/error/warning/info with color-coded backgrounds (green/red/amber/blue)
  2. Dismissible toasts: Click toast or × button to dismiss; dismissToast() function added
  3. Toast timeout extended: 3.5s (was 2.2s) — reasonable UX improvement
  4. Unread badge: Bell icon shows red badge with unread count (capped 99+), replacing raw count display
  5. Toast structure: Refactored from plain text to icon + text + dismiss button layout
  6. ARIA: role="status" → role="alert" for toasts (appropriate for notifications)
  7. Error handling: GitHub callback errors now show as error type toast
• Correctness: All changes are logical and well-implemented. The typed toast system follows standard notification patterns. The unread badge is a meaningful UX improvement over raw count.
• ⚠️ Minor notes:
  1. pushPublicNotification() call was removed from showToast() — verify this is intentional (previously every toast also pushed to public notification feed)
  2. Toast styles use !important for background colors — works but not ideal for maintainability
• Scope: All changes relate to the notification/toast system. References issue [3000 MRG] Implement public and logged-in notifications #19 (3000 MRG bounty).

Evidence Check

• PR body includes detailed change summary
• No visual screenshots/GIF showing the typed toasts or unread badge — evidence partially missing for a UI feature

Recommendation

✅ Approve with suggestions — Well-structured enhancement. Suggest author clarify if pushPublicNotification() removal was intentional, and add visual evidence showing the typed toast variants and unread badge.

---

Verification per issue #64 — 300 MRG QA bounty

[TUPM96]

Thanks for the PR. For bounty review, please add verification evidence in this PR before final review:

• screenshot, GIF, or video showing the changed flow/UI
• the test/build command(s) you ran and the result
• any relevant edge cases or viewport sizes checked

Evidence can be attached in a PR comment; images in comments count. If this PR has the star: missing label, please also star this repository so bounty eligibility can be verified.

[TUPM96]

@CHY9213 I rechecked all open PRs and this PR currently has merge conflicts with master (mergeStateStatus: DIRTY).

Please rebase or merge the latest master, resolve the conflicts, and push the updated branch so GitHub can re-run PR checks. Bounty review remains blocked until the PR is mergeable again.

[TUPM96]

Not ready for bounty acceptance yet.

I rechecked all open PRs and this one is currently blocked before code acceptance:

• It has merge conflicts with master or is otherwise not mergeable.
• Runtime evidence is still missing or incomplete for the claimed user flow.
• GitHub checks need to rerun cleanly after the branch is updated.

Please rebase/merge latest master, resolve conflicts, push the updated branch, and attach screenshots/GIF/video or other runtime evidence for the actual fix. I can continue review after that.

[TUPM96]

Thanks for the notification work. This PR is not mergeable as-is against the current master and/or does not have the clean, focused evidence needed for acceptance in this cleanup pass. Closing it now; please submit a fresh PR from latest master with runtime screenshots/evidence and a narrow implementation for issue #19.

[espcris05-commits]

Verification Report — PR #97

Target PR: #97

Commands: git fetch+checkout ✅ | git diff master ✅ | Code review ✅

Final Verdict: ✅ APPROVE

Payout: cerouber88@gmail.com (PayPal)