Skip to content

feat(announcements): page timeline in announcements component#459

Open
anabaarbosa wants to merge 7 commits into
mainfrom
announcements-timelinepage
Open

feat(announcements): page timeline in announcements component#459
anabaarbosa wants to merge 7 commits into
mainfrom
announcements-timelinepage

Conversation

@anabaarbosa

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request?

Update to the Announcements homepage: now displays a single list with filters and search, grouped by year, with a changelog-style layout, month and day on the left, vertical line only in each year's block, expandable lines for synopsis. New AnnouncementExpandableRow and announcementTypeTags utility (EN/PT/ES) centering marker colors and type on the timeline.

Screenshots or example usage

image

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Requires change to documentation, which has been updated accordingly.

@anabaarbosa anabaarbosa self-assigned this May 15, 2026
@anabaarbosa anabaarbosa added release-no No release bump effort-high We estimate the effort to solve this issue is high. ui Portal interface issues. labels May 15, 2026
@netlify

netlify Bot commented May 15, 2026

Copy link
Copy Markdown

Deploy Preview for leafy-mooncake-7c2e5e ready!

Name Link
🔨 Latest commit 9ec999f
🔍 Latest deploy log https://app.netlify.com/projects/leafy-mooncake-7c2e5e/deploys/6a287bace521a200099b02ad
😎 Deploy Preview https://deploy-preview-459--leafy-mooncake-7c2e5e.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions[bot]
github-actions Bot previously approved these changes May 15, 2026
@PedroAntunesCosta

Copy link
Copy Markdown
Contributor

A few additions in this PR don't appear to be referenced anywhere — they'll become dead code on main if we merge as-is. Could you delete or double-check whether they're needed?

  • src/utils/capitalizeMonthHeading.ts — never imported (grepped the whole repo, no hits outside this file).
  • src/utils/getAnnouncementTypeKey.ts — never imported either. As a side effect, typeTagsByLocale was promoted to export in constants.ts only to feed this helper, so that change can also be reverted.
  • announcement_timeline.default_type in src/messages/{en,es,pt}.json — no intl.formatMessage({ id: 'announcement_timeline.default_type' }) anywhere.
  • On AnnouncementTimelineCard, the new optional props showLandingHeader, forceTimelineVisible, highlightFirstItem, createdAt, updatedAt, synopsis aren't passed by any caller (the only consumer is AnnouncementSection, which still passes just { title, date, articleLink }). That means the entire useCardLikeChrome branch in AnnouncementTimelineItem is unreachable. If the plan was to use AnnouncementTimelineCard on pages/announcements/index.tsx and AnnouncementExpandableRow is the replacement, those props (and the new cardContainerPage, synopsis, footerDate styles) can come out.

The two unrelated fixes inside AnnouncementTimelineCard (the key={announcement.articleLink} change and the <= currentDate upper bound on isNew) are nice on their own — happy to keep those.

Comment thread src/utils/announcementTypeTags.ts Outdated
Comment thread src/components/announcement-expandable-row/index.tsx Outdated
Comment on lines 99 to +122

useEffect(() => {
setPage({
curr: 1,
total: Math.ceil(filteredResult.length / itemsPerPage),
})
}, [filteredResult])
/** Lista após filtros — agrupamento só por ano (changelog). */
const timelineAnnouncements = useMemo(
() =>
filteredResult.map((announcement) => ({
title: announcement.title,
publishedAt: new Date(announcement.createdAt),
articleLink: announcement.url,
synopsis: announcement.synopsis,
tags: announcement.tags,
})),
[filteredResult]
)

const paginatedResult = useMemo(() => {
return filteredResult.slice(
(page.curr - 1) * itemsPerPage,
page.curr * itemsPerPage
)
}, [page, filteredResult])
const timelineByYear = useMemo(() => {
type TimelineItem = {
title: string
publishedAt: Date
articleLink: string
synopsis?: string
tags?: string[]
}

const bucket = new Map<string, TimelineItem[]>()

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

With pagination gone, the page now mounts every PUBLISHED/CHANGED announcement into the DOM on first paint (no virtualization). Announcements are append-only content, so this list only grows over time.

I am not sure this is the UX we want and maybe this will also impact performance over time. If you choose to merge this PR without addressing this, please create a github issue in this repo to 'restore announcements page pagination'.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I chose to implement incremental disclosure as in the developers, but I left an issue open.

Comment thread src/components/announcement-expandable-row/styles.ts
Comment thread src/components/announcement-expandable-row/styles.ts Outdated

@PedroAntunesCosta PedroAntunesCosta left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks for the timeline UX work — the new layout is solid and centralizing the tag→color mapping in announcementTypeTags.ts is a nice cleanup.

Requesting changes for a few things before merge — left inline comments with details:

  • Blocking: a meaningful amount of dead code (unused new util files, an unused i18n key in each locale, and 6 new optional props on AnnouncementTimelineCard whose new render branch is unreachable). See the general comment.
  • Suggestions: silent color regression on the Deprecation tag (pink → gray on the existing landing-page card too); accessibility issue with the title <a> nested inside a role="button" row; and a heads-up that removing pagination renders the full announcements list unbounded.
  • Nits: hardcoded hex colors instead of theme tokens; PT-only code comments in the new styles files.

Remove unused helpers (capitalizeMonthHeading, getAnnouncementTypeKey),
the unreferenced announcement_timeline.default_type message, and the
unreachable card-like branch/props from AnnouncementTimelineCard. Revert
typeTagsByLocale to a private const. Keep the key and isNew upper-bound fixes.
# Conflicts:
#	src/components/announcement-card/index.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

effort-high We estimate the effort to solve this issue is high. release-no No release bump ui Portal interface issues.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants