Fix #19: Implement public and logged-in notifications

[lqkhanh295]

Resolves #19

Summary

• Added unread state to dashboard notifications
• Modified dashboardNotificationCount to display the count of unread notifications
• Implemented markAllNotificationsRead to call the /api/notifications/read-all endpoint and update UI
• Updated the .toast CSS for mobile view to display at the bottom instead of the top so it doesn't overlap important CTAs like the navigation bar.

Acceptance Criteria Met

• Added/fixed notification UI for logged-in dashboard users (including new unread UI styling and mark-all read).
• Adjusted public toast mobile position for better layout.
• Handled missing backend data: utilized note.read_at field from existing notifications API.
• Note: Test commands like npm test or go test were skipped locally as the environment restricts npm/go commands, but relying on CI builds for verification.

Claim Requirement

Claim comment: #1 (comment)

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR enhances the dashboard notification center by adding explicit unread styling, an action to mark all notifications as read, and adjusting toast positioning on small screens.

Changes:

• Add unread visual treatment for notifications (row highlight + dot emphasis).
• Add “Mark all read” action and update the header to show unread count.
• Move mobile toast positioning from top to bottom.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
frontend/src/styles.css	Adds styles for unread notifications + actions row; adjusts toast position on narrow viewports.
frontend/src/App.vue	Computes unread count, supports unread UI state, and adds “mark all read” API action.

Comments suppressed due to low confidence (1)

frontend/src/App.vue:3423

• dashboardNotificationCount is derived from dashboardNotificationRows, but dashboardNotificationRows is sliced to 8 items. This will undercount unread notifications when there are more than 8 notifications/unreads. Consider computing the unread count from the full notifications source (pre-slice), or splitting this into (1) an unsliced list for counts and (2) a sliced list for display.

const dashboardNotificationRows = computed(() =>

[eliasx45]

Reviewed current head 6a7aecea77a1ba7b58feb98265df0eca990a8cce. Verdict: request changes.

The build is healthy, but the unread-count implementation has a behavioral bug. dashboardNotificationRows sorts and slices the API result to the first 8 rows before mapping, and dashboardNotificationCount is then computed from that sliced display list:

const dashboardNotificationRows = computed(() =>
  dashboardNotifications.value
    .slice()
    .sort(...)
    .slice(0, 8)
    .map(mapDashboardNotification),
);
const dashboardNotificationCount = computed(() => dashboardNotificationRows.value.filter((n) => n.isUnread).length);

That means the dashboard badge and Mark all read button only count unread notifications inside the visible 8 rows. If a user has 9+ notifications and unread items are below the display slice, the badge can undercount or show 0 new, and the mark-all action can disappear even though unread notifications still exist. Please compute the unread count from the full dashboardNotifications source, then keep the sliced computed value only for rendering.

There is also a whitespace blocker:

git diff --check origin/master...HEAD
# frontend/src/App.vue:5038: new blank line at EOF.

Other validation on this checkout:

git merge-tree --write-tree origin/master HEAD
# df5d684e57128e87564f682ede4540b34a190b2b

npm.cmd --prefix frontend test
# 9 tests passed

npm.cmd --prefix frontend ci
# 36 packages installed, 0 vulnerabilities

npm.cmd --prefix frontend run build:local
# client and SSR builds completed successfully

Suggested fix: introduce an unsliced unread-count computed over dashboardNotifications.value directly, for example by filtering !note.read_at, and remove the trailing blank line at EOF.

[lqkhanh295]

Hi @eliasx45 and @TUPM96, I have updated the implementation to address your review feedback: (1) calculated the unread notification count directly from the full notifications source rather than the sliced list, and (2) removed the trailing blank line at EOF. The tests and builds are passing successfully. Please take a look when you have time! Thank you!

[TUPM96]

Maintainer follow-up: merged after rechecking the author update.

Validation:

• GitHub PR checks were green.
• Local merged preview with Fix: Live project creation updates on dashboard and homepage via WebSocket #140 and Fix dashboard layout regression after login #143 passed npm test and npm run build:local in frontend.
• Function/security check: unread count now comes from the full notification source, the read-all action uses the existing authenticated API, and the diff is limited to frontend notification UI behavior. No security-sensitive backend/payment path changed.

Bounty/evidence review can remain separate from accepting this safe UI change.

[TUPM96]

MRG credit issued after maintainer merge.

• Credited worker: github:lqkhanh295
• MRG credited: 50 MRG
• Ledger sequence: 33
• Proof hash: 0d82e9d5f3857dc409cb54861fd21f63d88cf96328cb1841cf0599762559f6eb
• Credit URL: https://scan.mergeos.shop/address/0x2025dd1461ad549c837a618c7285ecba00fc5564