Feat: feed summary redesign + update theme colors #1449

Alessandro100 · 2025-11-10T14:58:22Z

Summary:

Updates the Feed Summary section for GTFS and GTFS RT feeds
Updates the secondary colors of the Theme to make them more usable and accessibility passing
Updated the order in which we display Locations -> # of subdivisions -> name (if tie)
Small visualization fixes for GBFS feed detail on smaller screens

Reasoning and idea behind the update
The idea behind this redesign was to reduce noise on the feed detail page while highlighting the most important information. This also sets up a good pattern to add more information and sections for future data

The update of the Theme comes due to the lack of utilizing secondary colors. The current secondary colors were not accessible compliant, which is why it was not used very much. With this updated theme, we have more tools to create better page hierarchies

NOTES: As this page is very information dense, introductions of tabs could be considered in the future

Expected behavior:

All the data should be displayed from the previous feed summary design. It should look good in light mode / dark mode and all resolutions as well as being accessible compliant

Testing tips:

Go on any feed (GTFS, GTFS RT, GBFS) and make sure everything looks good

Follow up tickets

Update the skeleton loading (can be done in another ticket)
SEO (elements / page title)
Translations
Dataset history (add size of dataset?)
Dark mode maps
GBFS Summary redesign catchup
Remove GTFS Visualizations Feature flag

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

Run the unit tests with ./scripts/api-tests.sh 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)

Copilot

Pull Request Overview

This PR refactors the feed detail UI by creating a new GtfsFeedSummary component to replace the old FeedSummary component, introduces feed status utilities, and includes various UI improvements and bug fixes. The changes modernize the feed display with better organization, styling updates, and improved responsive layouts.

New GtfsFeedSummary component provides a redesigned feed summary UI for GTFS/GTFS-RT feeds
Extracted feed status logic into reusable feedStatusConsts utility
Fixed typo in location sorting logic ("lenght" → "length") and added secondary sorting by country name

Reviewed Changes

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

Show a summary per file

File	Description
web-app/src/app/utils/feedStatusConsts.tsx	New utility file extracting feed status data logic with theme support
web-app/src/app/utils/date.ts	Added `formatDateShort` helper function for date formatting with timezone support
web-app/src/app/services/feeds/utils.ts	Fixed typo in variable names and added secondary sort by country name for location summaries
web-app/src/app/screens/Feed/index.tsx	Updated to use new `GtfsFeedSummary` component and adjusted styling/layout
web-app/src/app/screens/Feed/components/GtfsFeedSummary.tsx	New component providing redesigned feed summary with grouped cards and improved information display
web-app/src/app/screens/Feed/components/GbfsVersions.tsx	Added `flexWrap` style to improve responsive layout
web-app/src/app/screens/Feed/components/GbfsFeedInfo.tsx	Added word wrapping for long URLs
web-app/src/app/screens/Feed/components/FeedSummary.tsx	Removed old implementation replaced by `GtfsFeedSummary`
web-app/src/app/screens/Feed/components/CopyLinkElement.tsx	New reusable component for displaying copyable links with various link types
web-app/src/app/screens/Feed/components/AssociatedFeeds.tsx	Updated outline colors and spacing for consistency
web-app/src/app/screens/Feed/FeedSummary.styles.ts	New styled components for the redesigned feed summary UI
web-app/src/app/screens/Feed/Feed.styles.ts	Updated styles and removed unused style definitions
web-app/src/app/components/Locations.tsx	Enhanced with `startingTab` prop and refactored to use `getCountryLocationSummaries`
web-app/src/app/components/FeedStatus.tsx	Refactored to use extracted `getFeedStatusData` utility with chip size support
web-app/src/app/components/CoveredAreaMap.tsx	Converted from `ContentBox` to `Box` with custom styling and layout improvements
web-app/src/app/Theme.ts	Updated secondary color palette and added `lightContrast` text color

Copilot · 2025-11-10T15:05:25Z

web-app/src/app/screens/Feed/components/GtfsFeedSummary.tsx

+                  sx={{ whiteSpace: 'nowrap', fontWeight: 700, mr: 1, mb: 0 }}
+                >
+                  {country}
+                  {index < 3 && index != uniqueCountries.length - 1 && ', '}


The inequality operator should use !== instead of != for strict comparison. This follows JavaScript best practices and ensures type-safe equality checking.

Suggested change

{index < 3 && index != uniqueCountries.length - 1 && ', '}

{index < 3 && index !== uniqueCountries.length - 1 && ', '}

Copilot · 2025-11-10T15:05:26Z

web-app/src/app/components/Locations.tsx

                tableData
-                  .filter((loc) => loc.country_code === countryCode)
+                  .filter((loc) => loc.country_code === country.country_code)
                  .forEach((loc) => {
-                    subdivisions.add(loc.subdivision);
-                    municipalities.add(loc.municipality);
+                    country.subdivisions.add(loc.subdivision);
+                    country.municipalities.add(loc.municipality);
                  });


This code mutates the country.subdivisions and country.municipalities Sets that are part of the objects returned by getCountryLocationSummaries(). This mutation occurs during the render phase within .map(), which can cause unexpected behavior and React issues. Instead, this logic should be moved into the useMemo where uniqueCountries is created, or the getCountryLocationSummaries function should already populate these Sets completely.

Copilot · 2025-11-10T15:05:27Z

web-app/src/app/components/Locations.tsx

-    });
-    return Array.from(countriesSet);
+    return getCountryLocationSummaries(locations ?? []);
  }, [tableData]);


The useMemo dependency should be [locations] instead of [tableData]. The uniqueCountries value is computed from locations, not tableData. Using tableData as a dependency creates an unnecessary indirect dependency chain.

Suggested change

}, [tableData]);

}, [locations]);

github-actions · 2025-11-10T15:10:37Z

*Lighthouse ran on https://mobility-feeds-dev--pr-1449-1ligxel2.web.app/ * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 83	🟢 100	🟢 100	🟢 100

*Lighthouse ran on https://mobility-feeds-dev--pr-1449-1ligxel2.web.app/feeds * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 87	🟢 91	🟢 100	🟢 100

*Lighthouse ran on https://mobility-feeds-dev--pr-1449-1ligxel2.web.app/feeds/gtfs/mdb-2126 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

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

*Lighthouse ran on https://mobility-feeds-dev--pr-1449-1ligxel2.web.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

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

*Lighthouse ran on https://mobility-feeds-dev--pr-1449-1ligxel2.web.app/gbfs/gbfs-flamingo_porirua * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟢 99	🟢 100	🟢 100	🟢 100

github-actions · 2025-11-10T15:10:46Z

Preview Firebase Hosting URL: https://mobility-feeds-dev--pr-1449-1ligxel2.web.app

davidgamez · 2025-11-10T16:13:39Z

web-app/src/app/screens/Feed/components/GtfsFeedSummary.tsx

+      <GroupCard variant='outlined'>
+        <GroupHeader variant='body1'>
+          <BusinessIcon fontSize='inherit' />
+          Agency


Let's add this text and others to the locale files

The translations setup will be done in another ticket to avoid this pr being bigger than it is

davidgamez · 2025-11-10T16:13:48Z

web-app/src/app/screens/Feed/components/CopyLinkElement.tsx

+          onClose={() => {
+            setSnackbarOpen(false);
+          }}
+          message={'URL copied to clipboard'}


Let's add this message to the locale files.

davidgamez

Great Work!

emmambd · 2025-11-11T15:13:07Z

@Alessandro100 Amazing work! This is a big improvement. A few comments:

Municipality is really crucial to most users. In cases where there's only 1 municipality, it should be displayed in the default view without having to click to see it. Same thing with 1 subdivision, it should display in the default view

I think it would be useful to display route types in a more visually appealing way than a large list in cases where there are multiple. Thoughts on adding icons to the GTFS-standard route type options?
We talked about removing the License button at the top now that it's available in Related Links
Stretch goal: improving the visual when we aren't able to download the data.

jcpitre · 2025-11-11T15:53:42Z

I have some reservations about the Service Date Range:

To me it looks like the feed was inactive between the two dates. Which I know makes no sense according to the dates themselves, but still that's what came to my mind at first glance.

Alessandro100 · 2025-11-11T15:57:19Z

@Alessandro100 Amazing work! This is a big improvement. A few comments:

Municipality is really crucial to most users. In cases where there's only 1 municipality, it should be displayed in the default view without having to click to see it. Same thing with 1 subdivision, it should display in the default view

* I think it would be useful to display route types in a more visually appealing way than a large list in cases where there are multiple. Thoughts on adding icons to the GTFS-standard route type options? * We talked about removing the License button at the top now that it's available in Related Links * Stretch goal: improving the visual when we aren't able to download the data.

Good call on the municipality, will make that change
I kept the See License because it's still used in GBFS Feed Detail -> I'll remove it once the GBFS feed summary is updated
I agree that the error state needs some work

Alessandro100 · 2025-11-11T16:38:45Z

I have some reservations about the Service Date Range:

To me it looks like the feed was inactive between the two dates. Which I know makes no sense according to the dates themselves, but still that's what came to my mind at first glance.

I see where you are coming from

I adjusted it so that the chip stays when the feed is active and removed the chip for any other status. Since the status is displayed at the top of the page we don't need to be too explicit in saying it. Although I added a tool tip hover to clarify the information

emmambd · 2025-11-11T20:27:17Z

@Alessandro100 Looks good and great catch @jcpitre. Last thing — thoughts on route type display optimization?

Alessandro100 · 2025-11-11T20:46:48Z

@Alessandro100 Looks good and great catch @jcpitre. Last thing — thoughts on route type display optimization?

I initially added the icons to the routes types, but I was running into the problem that since there was so much data to display on the page, the icons created more noise and distracted from the rest

emmambd · 2025-11-12T18:21:05Z

@Alessandro100 It's a nit so not a blocker to import, but maybe something for a separate issue. I haven't seen more than 3-4 route types on most feeds, so it seems like a viable problem to solve from my end.

emmambd

Since my comments are unblocking, please go ahead and merge. Please add an issue for route types + license URL so we can track this work later.

Alessandro100 added 3 commits November 7, 2025 11:11

feed summary redesign

4a0f81f

new theme colors

3389dd6

cleanup of previous components

c028aed

Alessandro100 self-assigned this Nov 10, 2025

Alessandro100 requested a review from Copilot November 10, 2025 15:01

Copilot AI reviewed Nov 10, 2025

View reviewed changes

github co-pilot pr review comments

0ff28b5

davidgamez reviewed Nov 11, 2025

View reviewed changes

davidgamez approved these changes Nov 11, 2025

View reviewed changes

feed location unique display for 1

92f85af

Alessandro100 added 2 commits November 11, 2025 11:39

clarifications to service date range status

04972cf

lint fix

c4e91a5

Alessandro100 requested a review from emmambd November 11, 2025 19:42

emmambd reviewed Nov 13, 2025

View reviewed changes

jasonad123 mentioned this pull request Nov 13, 2025

UI: web UI splits transit provider name in an unexpected manner #1452

Open

Alessandro100 merged commit 8c98eb4 into main Nov 13, 2025
4 checks passed

Alessandro100 deleted the feat/1418-feed-summary-redesign branch November 13, 2025 16:37

	{index < 3 && index != uniqueCountries.length - 1 && ', '}
	{index < 3 && index !== uniqueCountries.length - 1 && ', '}

Feat: feed summary redesign + update theme colors #1449

Feat: feed summary redesign + update theme colors #1449

Uh oh!

Conversation

Alessandro100 commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 10, 2025

Uh oh!

davidgamez Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Alessandro100 Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

davidgamez Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

davidgamez left a comment

Choose a reason for hiding this comment

Uh oh!

emmambd commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jcpitre commented Nov 11, 2025

Uh oh!

Alessandro100 commented Nov 11, 2025

Uh oh!

Alessandro100 commented Nov 11, 2025

Uh oh!

emmambd commented Nov 11, 2025

Uh oh!

Alessandro100 commented Nov 11, 2025

Uh oh!

emmambd commented Nov 12, 2025

Uh oh!

emmambd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Alessandro100 commented Nov 10, 2025 •

edited

Loading

github-actions bot commented Nov 10, 2025 •

edited

Loading

emmambd commented Nov 11, 2025 •

edited

Loading