Skip to content

109 implement redesigned representatives képviselők page and cards#151

Merged
peterlipt merged 3 commits into
mainfrom
109-implement-redesigned-representatives-képviselők-page-and-cards
Jun 20, 2026

Hidden character warning

The head ref may contain hidden characters: "109-implement-redesigned-representatives-k\u00e9pvisel\u0151k-page-and-cards"
Merged

109 implement redesigned representatives képviselők page and cards#151
peterlipt merged 3 commits into
mainfrom
109-implement-redesigned-representatives-képviselők-page-and-cards

Conversation

@DankaMarci

@DankaMarci DankaMarci commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

Summary by CodeRabbit

  • UI Improvements

    • Redesigned representative cards with improved layout and styling.
    • Refactored modal display for clearer information organization.
    • Enhanced grid layout with title and description sections.
    • Improved loading states with updated skeleton screens.
  • Accessibility

    • Added keyboard navigation support for representative cards.
    • Improved semantic structure for better screen reader compatibility.
  • UX Enhancements

    • Added back button navigation within representatives section.
    • Improved file and report display in representative details.

- 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.
@DankaMarci DankaMarci requested a review from peterlipt June 18, 2026 13:41
@DankaMarci DankaMarci self-assigned this Jun 18, 2026
@DankaMarci DankaMarci linked an issue Jun 18, 2026 that may be closed by this pull request
3 tasks
@vercel

vercel Bot commented Jun 18, 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 20, 2026 4:31pm

Request Review

@coderabbitai

coderabbitai Bot commented Jun 18, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@peterlipt, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 3 minutes and 40 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6783da18-0987-422a-828d-dcd5aefc5ec6

📥 Commits

Reviewing files that changed from the base of the PR and between f01189c and f5a09cb.

📒 Files selected for processing (6)
  • src/app/(app)/[lang]/kepviselok/components/RepresentativeCard.tsx
  • src/app/(app)/[lang]/kepviselok/components/RepresentativeModal.tsx
  • src/app/(app)/[lang]/kepviselok/components/RepresentativesGridClient.tsx
  • 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
📝 Walkthrough

Walkthrough

The representatives page is redesigned by introducing a shared representatives.helpers.ts module with utility functions and facultyStyles. RepresentativeCard and RepresentativeModal are rewritten to use these helpers. title and description props are threaded from the page through RepresentativesGrid to RepresentativesGridClient, replacing the former PageHeader. Skeleton loading states are also updated.

Changes

Representatives page UI redesign

Layer / File(s) Summary
Shared representative UI helpers
src/app/(app)/[lang]/kepviselok/components/representatives.helpers.ts
New module exports RepresentativeLang, facultyStyles, and functions for position text, picture extraction, initials generation, file metadata normalization, and file size formatting.
Page entry point and grid prop threading
src/app/(app)/[lang]/kepviselok/page.tsx, src/app/(app)/[lang]/kepviselok/components/RepresentativesGrid.tsx, src/app/(app)/[lang]/kepviselok/components/RepresentativesGridClient.tsx
Page removes PageHeader and passes title/description from dictionary to RepresentativesGrid; grid forwards props to client; client adds a back button via router.back(), renders the title/description header, and applies updated grid styling.
RepresentativeCard redesign
src/app/(app)/[lang]/kepviselok/components/RepresentativeCard.tsx
Replaces Card/Button layout with a keyboard-accessible <article> using shared helpers and facultyStyles; picture rendering switches to next/image with fill or an initials fallback; outline button replaced with an ArrowRight details row.
RepresentativeModal redesign
src/app/(app)/[lang]/kepviselok/components/RepresentativeModal.tsx
Rewrites imports, data derivation, dialog close guard, mobile/desktop layout blocks, and positions rendering using shared helpers; removes contacts section; replaces FileCard reports with direct anchor links using getFileInfo/formatFileSize with conditional disabled styling.
Skeleton loading state updates
src/app/(app)/[lang]/kepviselok/components/skeletons/LoadingRepresentativeCard.tsx, .../skeletons/LoadingRepresentativesGrid.tsx
LoadingRepresentativeCard gets a new composed pulsing skeleton; LoadingRepresentativesGrid switches to a section-based wrapper with a max-w-[1272px] grid and 6 skeleton cards.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 Hop hop, the cards are fresh and new,
With helpers shared and faculty's hue,
A back-arrow leads the way back home,
No PageHeader left to roam.
The skeleton blinks with pulsing grace —
Six placeholders hold the space! 🌿

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 7.69% 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 clearly references the main change: implementing a redesigned representatives page with updated cards and components.
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 unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 109-implement-redesigned-representatives-képviselők-page-and-cards

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.

@peterlipt

Copy link
Copy Markdown
Member

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jun 20, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@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: 2

🧹 Nitpick comments (1)
src/app/(app)/[lang]/kepviselok/components/RepresentativeCard.tsx (1)

23-23: 💤 Low value

Consider using consistent translation pattern.

The current pattern hardcodes the Hungarian text while using dictionary lookup only for English:

const detailsLabel = lang === "EN" ? t('representatives.view_details') : "Részletek"

Based on how useTranslate works, you can simplify this to just t('representatives.view_details') if the dictionary contains both locale values, or use the legacy pattern t("Részletek", "View details") consistently.

🤖 Prompt for 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.

In `@src/app/`(app)/[lang]/kepviselok/components/RepresentativeCard.tsx at line
23, The detailsLabel variable in the RepresentativeCard component uses an
inconsistent translation pattern by conditionally checking the lang parameter
for English while hardcoding the Hungarian text. Replace this conditional logic
with a consistent approach using the translation function: either call
t('representatives.view_details') directly if both locales are present in your
translation dictionary, or use the legacy pattern t("Részletek", "View details")
where the first argument is the Hungarian text and the second is the English
translation. This ensures all language handling goes through the useTranslate
hook consistently.
🤖 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]/kepviselok/components/RepresentativeModal.tsx:
- Line 216: The fallback document title "Dokumentum" in the RepresentativeModal
component is hardcoded in Hungarian. Replace the hardcoded string with a call to
the translation function (t) to ensure the fallback title respects the current
language setting. Modify the expression {fileTitle || "Dokumentum"} to use t()
with an appropriate translation key for the document fallback label, maintaining
consistency with the bilingual UI.

In `@src/app/`(app)/[lang]/kepviselok/components/representatives.helpers.ts:
- Around line 75-79: The filesize assignment in the returned object is using the
logical OR operator (||) which treats zero as falsy, causing zero-byte files to
have their filesize set to null. Fix this by replacing the || operator with the
nullish coalescing operator (??) for the filesize property, so that only actual
null or undefined values are replaced with null, while zero values are preserved
as valid file sizes.

---

Nitpick comments:
In `@src/app/`(app)/[lang]/kepviselok/components/RepresentativeCard.tsx:
- Line 23: The detailsLabel variable in the RepresentativeCard component uses an
inconsistent translation pattern by conditionally checking the lang parameter
for English while hardcoding the Hungarian text. Replace this conditional logic
with a consistent approach using the translation function: either call
t('representatives.view_details') directly if both locales are present in your
translation dictionary, or use the legacy pattern t("Részletek", "View details")
where the first argument is the Hungarian text and the second is the English
translation. This ensures all language handling goes through the useTranslate
hook consistently.
🪄 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: 517e0f79-ebed-4a84-af04-bd43ee42c211

📥 Commits

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

📒 Files selected for processing (8)
  • 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

>
<div className="min-w-0">
<p className="font-open-sans text-sm leading-[1.6] text-[#1a1a1a]">
{fileTitle || "Dokumentum"}

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Localize the fallback document title.

"Dokumentum" is hardcoded in Hungarian. For consistency with the bilingual UI, this should use the translation function:

- {fileTitle || "Dokumentum"}
+ {fileTitle || t("Dokumentum", "Document")}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{fileTitle || "Dokumentum"}
{fileTitle || t("Dokumentum", "Document")}
🤖 Prompt for 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.

In `@src/app/`(app)/[lang]/kepviselok/components/RepresentativeModal.tsx at line
216, The fallback document title "Dokumentum" in the RepresentativeModal
component is hardcoded in Hungarian. Replace the hardcoded string with a call to
the translation function (t) to ensure the fallback title respects the current
language setting. Modify the expression {fileTitle || "Dokumentum"} to use t()
with an appropriate translation key for the document fallback label, maintaining
consistency with the bilingual UI.

Comment on lines +75 to +79
return {
url: file.url || null,
extension,
filesize: file.filesize || null,
};

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Preserve zero-byte file sizes in helper output.

Line 78 coerces 0 to null via ||, so valid empty files lose their size and "0 B" can never render downstream.

Suggested fix
   return {
     url: file.url || null,
     extension,
-    filesize: file.filesize || null,
+    filesize: file.filesize ?? null,
   };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
return {
url: file.url || null,
extension,
filesize: file.filesize || null,
};
return {
url: file.url || null,
extension,
filesize: file.filesize ?? null,
};
🤖 Prompt for 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.

In `@src/app/`(app)/[lang]/kepviselok/components/representatives.helpers.ts around
lines 75 - 79, The filesize assignment in the returned object is using the
logical OR operator (||) which treats zero as falsy, causing zero-byte files to
have their filesize set to null. Fix this by replacing the || operator with the
nullish coalescing operator (??) for the filesize property, so that only actual
null or undefined values are replaced with null, while zero values are preserved
as valid file sizes.

@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.

lgtm

@peterlipt peterlipt merged commit b900319 into main Jun 20, 2026
3 checks passed
@peterlipt peterlipt deleted the 109-implement-redesigned-representatives-képviselők-page-and-cards branch June 20, 2026 16:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants