Skip to content

feat: notifications UI mock + account page redesign#143

Merged
Alessandro100 merged 8 commits into
mainfrom
feat/137-notifications-ui-mock
May 29, 2026
Merged

feat: notifications UI mock + account page redesign#143
Alessandro100 merged 8 commits into
mainfrom
feat/137-notifications-ui-mock

Conversation

@Alessandro100
Copy link
Copy Markdown
Contributor

Summary:

closes #137

This PR introduces the UI elements for the upcoming Notification feature. It is all done with mock data, and there will be follow up tickets for API integration

  • Subscribe to Notification button + management in Feed Detail Page
  • New account page layout -> Unlocks future settings to add
  • Notification settings page + settings dialog

Expected behavior:

Feed Detail Page

Non Authenticated

  • Subscribe button still shows
  • When clicked it will prompt the user to sign in
  • When the user signs in using that button from the popover it will bring them back to the given page

Authenticated

  • User will be able to click on the subscribe button
  • At that point the button will turn into a subscribe management button where the user can unsubscribe
  • The user will be able to modify the global notification settings

Account Page

  • General and API access is content that existed
  • The new notification settings tab, the user can view their notifications, and data. They can also manage their notifications by pausing / unsubscribing

** Design Notes **

  • The UI was build with the assumption of MVP that there will only be 1 global notification setting and the user will not be able to customize the notification per feed
  • The settings displayed are also examples of what settings can be modified, this is subject to change based on the API implementation capabilities

Testing tips:

In non-authenticated state, go to a feed detail page and try subscribing to the feed
Sign-in then try subscribing
Manage the subscription
Go to the new Account page and play around there

  • Also test on mobile

Future Follow-up Tickets
Once we get user feedback and make the adjustments

  • Adjust the settings page based on what we’ll be able to modify (global or per feed)
  • Integrate the real API
  • Integrate tests
  • Place the rest of the i18n translations

Please make sure these boxes are checked before submitting your pull request - thanks!

  • Run the unit tests with yarn test to make sure you didn't break anything
  • Add or update any needed documentation to the repo
  • Format the title like "feat: [new feature short description]". Title must follow the Conventional Commit Specification(https://www.conventionalcommits.org/en/v1.0.0/).
  • Linked all relevant issues
  • Include screenshot(s) showing how this pull request works and fixes the issue(s)

@Alessandro100 Alessandro100 self-assigned this May 28, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented May 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
mobilitydatabase-web Ready Ready Preview, Comment May 29, 2026 12:18pm

Request Review

@emmambd
Copy link
Copy Markdown
Contributor

emmambd commented May 28, 2026

LGTM! We'll modify the tooltip/actual breaking vs. suspicious logic as we get user insights.

@github-actions
Copy link
Copy Markdown

*Lighthouse ran on https://mobilitydatabase-8s2oh8lg6-mobility-data.vercel.app/ * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance Accessibility Best Practices SEO
🟢 100 🟢 94 🟢 96 🟢 100

*Lighthouse ran on https://mobilitydatabase-8s2oh8lg6-mobility-data.vercel.app/feeds * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance Accessibility Best Practices SEO
🟢 93 🟠 87 🟢 96 🟢 100

*Lighthouse ran on https://mobilitydatabase-8s2oh8lg6-mobility-data.vercel.app/feeds/gtfs/mdb-2126 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance Accessibility Best Practices SEO
🟠 52 🟢 94 🟢 96 🟢 100

*Lighthouse ran on https://mobilitydatabase-8s2oh8lg6-mobility-data.vercel.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance Accessibility Best Practices SEO
🟢 91 🟠 84 🟢 96 🟢 100

*Lighthouse ran on https://mobilitydatabase-8s2oh8lg6-mobility-data.vercel.app/feeds/gbfs/gbfs-flamingo_porirua * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance Accessibility Best Practices SEO
🟢 91 🟢 94 🟢 96 🟢 100

@davidgamez
Copy link
Copy Markdown
Member

This might not be in the scope of the mock UI: When the user is not authenticated and clicks the sign-in button in the subscribe action. After successful authentication, it is properly redirected to the feed summary page, but a few seconds later, it is redirected to the account summary.

Copy link
Copy Markdown
Member

@davidgamez davidgamez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice refactoring! 🥇

@Alessandro100 Alessandro100 merged commit 0539046 into main May 29, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[user-profile] Mock Notifications UI section

3 participants