Skip to content

112 implement redesigned news detail page and update payload schema#154

Open
DankaMarci wants to merge 7 commits into
mainfrom
112-implement-redesigned-news-detail-page-and-update-payload-schema
Open

112 implement redesigned news detail page and update payload schema#154
DankaMarci wants to merge 7 commits into
mainfrom
112-implement-redesigned-news-detail-page-and-update-payload-schema

Conversation

@DankaMarci

@DankaMarci DankaMarci commented Jun 19, 2026

Copy link
Copy Markdown
Collaborator

Summary by CodeRabbit

  • New Features

    • Added representative and contact email fields to news, surfaced in the news details sidebar.
    • Added “Back” and “Contacts” labels to English and Hungarian UI copy.
  • Improvements

    • Redesigned news detail pages (layout, attachments, and navigation) and shifted the sidebar to focused contact info.
    • Modernized representative cards, modal, and grid experience (search, back, updated empty/loading states).
    • Updated decisions archive title and improved language-aware decision titles and empty-state presentation.
    • Simplified related news cards (dates/tags) for a cleaner listing.

- Updated RepresentativeCard component to enhance accessibility and visual design.
- Refactored RepresentativeModal to streamline layout and improve user experience.
- Modified RepresentativesGrid to accept title and description props for better context.
- Enhanced RepresentativesGridClient with a back button and improved loading states.
- Created a new helpers file for common representative functions and styles.
- Improved loading skeletons for representative cards and grid.
- Updated page structure in RepresentativesPage for better layout and responsiveness.
… table

- Created a new migration to add `representative_id` and `contact_email` columns to the `news` table.
- Added foreign key constraint for `representative_id` referencing the `representatives` table.
- Created an index on `representative_id` for improved query performance.
- Updated the payload types to include optional `representative` and `contactEmail` fields in the News interface.
@DankaMarci DankaMarci requested a review from peterlipt June 19, 2026 11:53
@DankaMarci DankaMarci self-assigned this Jun 19, 2026
@DankaMarci DankaMarci linked an issue Jun 19, 2026 that may be closed by this pull request
8 tasks
@vercel

vercel Bot commented Jun 19, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
ehk Ready Ready Preview, Comment Jun 21, 2026 11:31am

Request Review

@coderabbitai

coderabbitai Bot commented Jun 19, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 43e89a07-c385-4b5b-8bc8-04a827d4da89

📥 Commits

Reviewing files that changed from the base of the PR and between d6587e2 and 60b5ab4.

📒 Files selected for processing (5)
  • src/app/(app)/[lang]/hirek/[slug]/components/NewsDetailMain.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/RelatedNewsClient.tsx
  • src/app/(app)/[lang]/kepviselok/components/RepresentativeCard.tsx
  • src/app/(app)/[lang]/kepviselok/components/RepresentativeModal.tsx
  • src/app/(app)/[lang]/kepviselok/components/representatives.helpers.ts
🚧 Files skipped from review as they are similar to previous changes (5)
  • src/app/(app)/[lang]/kepviselok/components/representatives.helpers.ts
  • src/app/(app)/[lang]/hirek/[slug]/components/NewsDetailMain.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/RelatedNewsClient.tsx
  • src/app/(app)/[lang]/kepviselok/components/RepresentativeCard.tsx
  • src/app/(app)/[lang]/kepviselok/components/RepresentativeModal.tsx

📝 Walkthrough

Walkthrough

Extends the News collection with optional representative and contactEmail fields (plus migration). Redesigns the news detail page: removes BackNav, ShareButton, FileIcon, NewsDetailClient, and news-utils; replaces the sidebar with a contacts section; rewrites RelatedNewsClient markup. Introduces a shared representatives.helpers.ts module and redesigns the representatives card, modal, grid, and skeleton components.

Changes

News schema extension, news detail redesign, representatives overhaul, and decisions archive updates

Layer / File(s) Summary
News collection schema, migration, and generated types
src/collections/News.ts, src/migrations/20260619_105937_add_news_representative_and_contact_email.ts, src/migrations/index.ts, src/payload-types.ts
Adds representative (FK → representatives, ON DELETE set null) and contactEmail fields to the News collection config and generates the up/down migration, FK constraint, index, and extended News/NewsSelect payload types.
Representatives helpers module
src/app/(app)/[lang]/kepviselok/components/representatives.helpers.ts
New module exporting RepresentativeLang, facultyStyles, getPrimaryPosition, getPositionText, getRepresentativePicture, getRepresentativeInitials, getFileInfo, and formatFileSize — shared by both representatives and news components.
News detail page redesign
src/app/(app)/[lang]/hirek/[slug]/components/NewsDetail.tsx, NewsDetailMain.tsx, NewsDetailSidebar.tsx, RelatedNewsClient.tsx, BackNav.tsx, FileIcon.tsx, ShareButton.tsx, NewsDetailClient.ts, lib/news-utils.ts, src/dictionaries/*/news.json
Removes BackNav, ShareButton, FileIcon, NewsDetailClient, and news-utils; rewrites NewsDetailMain with router back-navigation, custom date formatter, and FileCard attachments; replaces the sidebar's article-info UI with a contacts section consuming the new representative/contactEmail fields; simplifies RelatedNewsClient to plain tag pills and removes the "view all news" button; adds back/contacts i18n keys.
Representatives card redesign
src/app/(app)/[lang]/kepviselok/components/RepresentativeCard.tsx
Rewrites RepresentativeCard with an <article>-based interactive layout, Next Image, initials fallback, facultyStyles, and keyboard accessibility for Enter/Space activation.
Representatives modal redesign
src/app/(app)/[lang]/kepviselok/components/RepresentativeModal.tsx
Substantially rewrites RepresentativeModal with a new responsive hero section, single primary email, direct anchor file links using getFileInfo/formatFileSize, and positions formatted via getPositionText.
Representatives grid, page, and skeletons
src/app/(app)/[lang]/kepviselok/components/RepresentativesGrid.tsx, RepresentativesGridClient.tsx, page.tsx, skeletons/*
Extends RepresentativesGrid and RepresentativesGridClient with title/description props; adds back navigation to the grid; updates the page to source title/description from the dictionary instead of a separate PageHeader; refreshes skeleton layouts and reduces card count from 8 to 6.
Decisions archive and dictionary updates
src/app/(app)/[lang]/hatarozatok-tara/components/DecisionsArchiveClient.tsx, src/dictionaries/*/regulations.json
Updates DecisionsArchiveClient to use EmptyState, language-aware title selection, and the subtitle prop; renames the decisions title string from "Decisions Archive"/"Határozatok Tára" to "Decisions"/"Határozatok".

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • kir-dev/ehk#150: Directly related — this PR removes secondaryText/date-style props from FileCard usages in DecisionsArchiveClient and NewsDetailMain, consistent with the FileCard API simplification introduced there.
  • kir-dev/ehk#152: Both PRs update DecisionsArchiveClient to switch the empty state to EmptyState, derive decision titles via language selection, and change PageHeader props from description to subtitle.

Suggested reviewers

  • peterlipt

Poem

🐇 Hop hop, the sidebar's born anew,
Old BackNav gone, contacts shine through!
Helpers module, fresh and bright,
Representatives styled just right.
The rabbit leaps through every page,
Decisions trimmed, a cleaner stage! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 5.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main objectives of the pull request: implementing a redesigned news detail page and updating the payload schema to support representative relationships and contact emails.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 112-implement-redesigned-news-detail-page-and-update-payload-schema
⚔️ Resolve merge conflicts
  • Resolve merge conflict in branch 112-implement-redesigned-news-detail-page-and-update-payload-schema

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 6

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/app/`(app)/[lang]/hirek/[slug]/components/NewsDetailMain.tsx:
- Around line 29-37: The formatDate function uses local timezone methods to
parse and format dates, which can cause off-by-one day discrepancies depending
on the user's timezone, especially with UTC or date-only payloads. Replace the
timezone-dependent methods in the formatDate function with their UTC
equivalents: use getUTCFullYear(), getUTCMonth(), and getUTCDate() instead of
getFullYear(), getMonth(), and getDate() when extracting year, month, and day
components for the non-English date format (the return statement with y, m, and
day variables).

In `@src/app/`(app)/[lang]/hirek/[slug]/components/RelatedNewsClient.tsx:
- Around line 12-20: The formatDate function uses local timezone methods which
causes dates to shift for users in UTC-negative regions. Replace the local date
methods with their UTC equivalents: use getUTCFullYear(), getUTCMonth(), and
getUTCDate() instead of getFullYear(), getMonth(), and getDate() in the non-EN
locale branch. Additionally, add the timeZone parameter set to 'UTC' in the
toLocaleDateString call for the EN locale branch to ensure consistent date
display across all timezones.

In `@src/app/`(app)/[lang]/kepviselok/components/RepresentativeCard.tsx:
- Around line 31-35: The onKeyDown handler in the RepresentativeCard component
is responding to Enter/Space keys even when the focus is on the nested email
link element, causing conflicting actions. Modify the keyboard event handler to
stop propagation or return early if the event originates from the email link
element (the nested anchor tag), preventing the onClickAction from being
triggered when users interact with the email link using keyboard navigation.
This will ensure only the email link's default behavior fires when focus is on
it, not the card's click action.

In `@src/app/`(app)/[lang]/kepviselok/components/RepresentativeModal.tsx:
- Line 216: The fileTitle fallback text in RepresentativeModal is hardcoded as
Hungarian ("Dokumentum"), which prevents proper localization for non-Hungarian
users. Replace the hardcoded "Dokumentum" string with a localized version using
the t() function that provides both a translation key and an English fallback
value (e.g., t("Dokumentum", "Document")), ensuring the fallback text displays
in the user's selected language.
- Line 45: The className attribute uses Tailwind v3 prefix syntax for the
important modifier (!max-w-[1272px] and sm:!max-w-[1272px]) which is deprecated
in Tailwind v4. Update both instances of the important modifier by moving the
exclamation mark from the prefix position to the end of the utility class names,
so !max-w-[1272px] becomes max-w-[1272px]! and sm:!max-w-[1272px] becomes
sm:max-w-[1272px]!. This ensures the code follows Tailwind v4 best practices.

In `@src/app/`(app)/[lang]/kepviselok/components/representatives.helpers.ts:
- Around line 75-79: The filesize property assignment uses the `||` operator
which treats zero as falsy and converts valid zero-byte filesizes to null,
breaking downstream formatting. In the return statement of the file
normalization function, replace the `||` operator with the nullish coalescing
operator `??` for the filesize property to preserve zero values while still
handling null or undefined cases correctly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 639979da-d905-473b-8d6e-1b8a7a279983

📥 Commits

Reviewing files that changed from the base of the PR and between 6844674 and d6587e2.

📒 Files selected for processing (27)
  • src/app/(app)/[lang]/hatarozatok-tara/components/DecisionsArchiveClient.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/BackNav.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/FileIcon.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/NewsDetail.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/NewsDetailClient.ts
  • src/app/(app)/[lang]/hirek/[slug]/components/NewsDetailMain.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/NewsDetailSidebar.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/RelatedNewsClient.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/ShareButton.tsx
  • src/app/(app)/[lang]/hirek/[slug]/lib/news-utils.ts
  • src/app/(app)/[lang]/kepviselok/components/RepresentativeCard.tsx
  • src/app/(app)/[lang]/kepviselok/components/RepresentativeModal.tsx
  • src/app/(app)/[lang]/kepviselok/components/RepresentativesGrid.tsx
  • src/app/(app)/[lang]/kepviselok/components/RepresentativesGridClient.tsx
  • src/app/(app)/[lang]/kepviselok/components/representatives.helpers.ts
  • src/app/(app)/[lang]/kepviselok/components/skeletons/LoadingRepresentativeCard.tsx
  • src/app/(app)/[lang]/kepviselok/components/skeletons/LoadingRepresentativesGrid.tsx
  • src/app/(app)/[lang]/kepviselok/page.tsx
  • src/collections/News.ts
  • src/dictionaries/en/news.json
  • src/dictionaries/en/regulations.json
  • src/dictionaries/hu/news.json
  • src/dictionaries/hu/regulations.json
  • src/migrations/20260619_105937_add_news_representative_and_contact_email.json
  • src/migrations/20260619_105937_add_news_representative_and_contact_email.ts
  • src/migrations/index.ts
  • src/payload-types.ts
💤 Files with no reviewable changes (5)
  • src/app/(app)/[lang]/hirek/[slug]/components/BackNav.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/ShareButton.tsx
  • src/app/(app)/[lang]/hirek/[slug]/components/FileIcon.tsx
  • src/app/(app)/[lang]/hirek/[slug]/lib/news-utils.ts
  • src/app/(app)/[lang]/hirek/[slug]/components/NewsDetailClient.ts

Comment thread src/app/(app)/[lang]/hirek/[slug]/components/NewsDetailMain.tsx
Comment thread src/app/(app)/[lang]/hirek/[slug]/components/RelatedNewsClient.tsx
Comment thread src/app/(app)/[lang]/kepviselok/components/RepresentativeCard.tsx
Comment thread src/app/(app)/[lang]/kepviselok/components/RepresentativeModal.tsx Outdated
Comment thread src/app/(app)/[lang]/kepviselok/components/RepresentativeModal.tsx Outdated

@peterlipt peterlipt left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The contacts section from the right side of the page seems to be missing, please implement that component.

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.

Implement Redesigned News Detail Page and Update Payload Schema

2 participants