feat: implement redesigned events page with event cards and gallery s… by peterlipt · Pull Request #175 · kir-dev/ehk

peterlipt · 2026-07-12T20:58:10Z

…upport

Summary by CodeRabbit

New Features
- Added event cards with cover images, descriptions, galleries, and social links.
- Added responsive image galleries with previous/next navigation.
- Added localized labels for event descriptions, galleries, links, and image controls.
- Added support for optional event cover images and galleries.
Bug Fixes
- Added loading skeletons for the events page.
- Improved handling of empty event lists and invalid links.

…upport

vercel · 2026-07-12T20:58:17Z

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

Project	Deployment	Actions	Updated (UTC)
ehk	Ready	Preview, Comment	Jul 13, 2026 8:13am

coderabbitai · 2026-07-12T20:58:18Z

📝 Walkthrough

Walkthrough

The events collection now supports optional cover images and galleries. The events page maps these fields into reusable EventCard and EventGallery components, adds localized labels, replaces the empty state, and introduces a loading skeleton.

Changes

Events cover and gallery

Layer / File(s)	Summary
Event data contracts and migration `src/collections/EhkEvents.ts`, `src/payload-types.ts`, `src/migrations/...`, `src/migrations/index.ts`	The event schema and generated types replace `images` with optional `coverImage` and `gallery` fields, while the migration renames the gallery table and adds the cover image relationship.
Event card and gallery components `src/app/(app)/[lang]/kozelet/rendezvenyek/components/*`	`EventCard` validates and prioritizes links and conditionally renders event content; `EventGallery` provides responsive image navigation and placeholders.
Events page integration and loading UI `src/app/(app)/[lang]/kozelet/rendezvenyek/page.tsx`, `src/app/(app)/[lang]/kozelet/rendezvenyek/loading.tsx`, `src/dictionaries/{en,hu}/news.json`	The page passes localized event data to `EventCard`, updates the empty state, adds dynamic rendering, and supplies a loading skeleton and new translations.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant RendezvenyekPage
  participant EventCard
  participant EventGallery
  RendezvenyekPage->>EventCard: pass cover, description, gallery, links, and labels
  EventCard->>EventGallery: pass gallery images and navigation labels
  EventGallery-->>EventCard: render visible images and placeholders
  EventCard-->>RendezvenyekPage: render the event card

Possibly related PRs

kir-dev/ehk#146: Related event UI link validation and social-link prioritization.
kir-dev/ehk#161: Related changes to dynamic rendering in the events page.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: a redesigned events page with event cards and gallery support.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ 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 140-implement-redesigned-events-rendezvények-page-and-update-cms

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

peterlipt · 2026-07-13T08:00:38Z

@coderabbitai review

coderabbitai · 2026-07-13T08:00:44Z

✅ 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

Actionable comments posted: 1

🤖 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]/kozelet/rendezvenyek/components/EventGallery.tsx:
- Around line 49-56: Update the Image component’s sizes prop in EventGallery so
it reflects the three-column flex layout at every breakpoint: use approximately
30vw for mobile and desktop instead of declaring 80vw on screens up to 768px.

🪄 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: 739c6e84-41f0-48ba-93ec-83ec144802f6

📥 Commits

Reviewing files that changed from the base of the PR and between 2cbebd5 and 689aaed.

📒 Files selected for processing (10)

src/app/(app)/[lang]/kozelet/rendezvenyek/components/EventCard.tsx
src/app/(app)/[lang]/kozelet/rendezvenyek/components/EventGallery.tsx
src/app/(app)/[lang]/kozelet/rendezvenyek/loading.tsx
src/app/(app)/[lang]/kozelet/rendezvenyek/page.tsx
src/collections/EhkEvents.ts
src/dictionaries/en/news.json
src/dictionaries/hu/news.json
src/migrations/20260701_000000_ehk_events_cover_and_gallery.ts
src/migrations/index.ts
src/payload-types.ts

coderabbitai · 2026-07-13T08:06:57Z

+              {media.url && (
+                <Image
+                  src={media.url}
+                  alt={media.alt || ""}
+                  fill
+                  className="object-cover"
+                  sizes="(max-width: 768px) 80vw, 30vw"
+                />


🚀 Performance & Scalability | 🟡 Minor | ⚡ Quick win

sizes prop doesn't match the mobile layout.

Three images are displayed side-by-side on all breakpoints (each flex-1), making each image roughly 30vw on mobile. However, sizes="(max-width: 768px) 80vw, 30vw" tells the browser to fetch an 80vw-wide image on mobile — roughly 2.6x wider than needed, causing unnecessary bandwidth usage.

⚡ Proposed fix

<Image src={media.url} alt={media.alt || ""} fill className="object-cover" - sizes="(max-width: 768px) 80vw, 30vw" + sizes="(max-width: 768px) 30vw, 30vw" />

📝 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

{media.url && (

<Image

src={media.url}

alt={media.alt || ""}

fill

className="object-cover"

sizes="(max-width: 768px) 80vw, 30vw"

/>

{media.url && (

<Image

src={media.url}

alt={media.alt || ""}

fill

className="object-cover"

sizes="(max-width: 768px) 30vw, 30vw"

/>

🤖 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]/kozelet/rendezvenyek/components/EventGallery.tsx around lines 49 - 56, Update the Image component’s sizes prop in EventGallery so it reflects the three-column flex layout at every breakpoint: use approximately 30vw for mobile and desktop instead of declaring 80vw on screens up to 768px.

feat: implement redesigned events page with event cards and gallery s…

689aaed

…upport

peterlipt self-assigned this Jul 12, 2026

peterlipt linked an issue Jul 12, 2026 that may be closed by this pull request

Implement Redesigned Events (Rendezvények) Page and Update CMS #140

Open

5 tasks

coderabbitai Bot reviewed Jul 13, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: implement redesigned events page with event cards and gallery s…#175

Hidden character warning

feat: implement redesigned events page with event cards and gallery s…#175
peterlipt wants to merge 1 commit into
mainfrom
140-implement-redesigned-events-rendezvények-page-and-update-cms

peterlipt commented Jul 12, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jul 12, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 12, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

peterlipt commented Jul 13, 2026

Uh oh!

coderabbitai Bot commented Jul 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Jul 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Hidden character warning

Conversation

peterlipt commented Jul 12, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jul 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

peterlipt commented Jul 13, 2026

Uh oh!

coderabbitai Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

peterlipt commented Jul 12, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Jul 12, 2026 •

edited

Loading

coderabbitai Bot commented Jul 12, 2026 •

edited

Loading

coderabbitai Bot commented Jul 13, 2026 •

edited

Loading