fix(notifications): move unread indicator beside timestamp

[andrewjcohen]

Description

The notification list had excessive left padding because the unread indicator (BadgeStatus) was rendered inline before the notification icon, adding ~12–16px even on read items (via opacity-0).

This PR moves the unread dot to the timestamp row, immediately to the left of the date, vertically centered. The icon column no longer reserves space for the dot, so list items align to the intended 16px horizontal padding.

Changelog

CHANGELOG entry: Fixed notification list alignment by moving the unread indicator next to the timestamp

Related issues

Refs: N/A — internal UI spacing fix for the notification list; no linked ticket

Manual testing steps

Feature: Notification list unread indicator placement

  Scenario: unread notification shows dot beside timestamp
    Given the app is open with notifications enabled
    And the notifications list contains at least one unread notification

    When the user opens the notifications list
    Then the unread notification shows a primary dot to the left of the timestamp
    And the notification icon aligns with the 16px left padding

  Scenario: read notification has no unread dot
    Given the notifications list contains at least one read notification

    When the user opens the notifications list
    Then the read notification does not show an unread dot
    And the icon and content align consistently with unread items

Screenshots/Recordings

N/A — layout change is best verified in-app on device/simulator; screenshots can be added during QA if requested.

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

---

Note

Low Risk
Scoped notification list layout and presentation only; behavior is covered by updated unit tests with no auth, data, or API impact.

Overview
Relocates the unread indicator from the leading icon column to the title row, immediately left of the formatted timestamp, using BadgeStatus only when isRead is false.

Simplifies the icon column by removing BadgeStatus, the isRead prop, and the extra row that kept an invisible dot on read notifications—fixing excess left padding so icons align with the intended 16px inset.

Wires the list row so Content receives isRead from the notification while Icon only gets image/badge props; tests cover unread badge visibility in Content and drop isRead from Icon tests.

^{Reviewed by Cursor Bugbot for commit cc39112. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[mm-token-exchange-service]

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

• Pre-merge author checklist has unchecked items (e.g. "I've tested on Android"). Every box must be consciously checked — see docs/readme/ready-for-review.md.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: None (no tests recommended)
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 5 changed files are within the Notification UI component directory (app/components/UI/Notification/). The changes are a pure UI refactoring: the unread badge indicator (BadgeStatus) was moved from the Icon component to the Content component, and the isRead prop was shifted accordingly. The List/index.tsx was updated to pass isRead to Content instead of Icon. Two test files were updated to match the new component API. There are no changes to: controllers, Engine, navigation, transaction flows, network management, E2E test infrastructure, or any shared components that could break existing E2E tests. The notification list UI is not covered by any specific E2E test tag. This is a low-risk internal component refactoring with no functional behavior change from the user's perspective (the unread badge still appears/disappears based on read state).

Performance Test Selection:
The changes are limited to notification list item UI components (Icon and Content). These are not in any performance-sensitive flow measured by the available performance test tags (account list, onboarding, login, swaps, launch, asset loading, predict, perps). No performance tests are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud