improve: UI/UX of upcoming events calendar widget

[ShashaankS]

Proposed change

Refactored the existing CalendarButton component with minor changes.

Resolves #2840

Screencast.from.2025-12-10.01-43-28.webm

• Open to suggestions

Checklist

• I've read and followed the contributing guidelines.
• I've run make check-test locally; all checks and tests passed.

[coderabbitai]

Summary by CodeRabbit

Release Notes

• New Features
  • Calendar button now displays event date ranges directly with an interactive hover effect that dynamically changes the icon appearance for enhanced visual feedback.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

Replaces the standalone calendar icon and separate date text with a single CalendarButton in the event metadata row; CalendarButton now accepts a full event object and label/showLabel props and manages hover state to swap icons between faCalendar and faCalendarPlus.

Changes

Cohort / File(s)	Summary
Event date integration frontend/src/app/page.tsx	Removed separate date span and top-right calendar icon; calls CalendarButton with a full event object (title, description, location, startDate, endDate, url) and passes label (formatted date range) and showLabel.
CalendarButton hover behavior frontend/src/components/CalendarButton.tsx	Adds client-side isHovered state with onMouseEnter/onMouseLeave; conditionally renders faCalendar or faCalendarPlus based on hover. Icon styling updated (adds mr-1). No exported API removals.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify prop shape and required fields passed from page.tsx to CalendarButton.
• Confirm hover handlers do not break click behavior, focus, or keyboard accessibility.
• Ensure label formatting and showLabel behavior preserve prior visual layout and spacing.

Possibly related PRs

• Add CalendarButton component and related tests for Google Calendar in… #2739 — Modifies the same CalendarButton and its usage in frontend/src/app/page.tsx, introducing the event, showLabel, and label props referenced here.

Suggested reviewers

• kasya

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: improving the UI/UX of the calendar widget by replacing button placement and enhancing hover interactions.
Description check	✅ Passed	The description clearly states the refactoring of CalendarButton, links to the resolved issue #2840, and provides visual evidence via screencast.
Linked Issues check	✅ Passed	The PR successfully addresses all requirements from issue #2840: removes top-right button, repurposes event dates area as interactive element, adds hover icon change from fa-calendar to fa-calendar-plus, and maintains Google Calendar integration.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to issue #2840 requirements: CalendarButton modifications and event page integration align with improving the calendar widget UI/UX.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ec6e7ec and ff1a04b.

📒 Files selected for processing (1)

• frontend/src/app/page.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

frontend/src/app/page.tsx (2)

frontend/src/components/CalendarButton.tsx (1)

• CalendarButton (7-38)

frontend/src/utils/dateFormatter.ts (1)

• formatDateRange (22-61)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Run backend tests
• GitHub Check: Run frontend unit tests
• GitHub Check: Run frontend e2e tests

🔇 Additional comments (1)

frontend/src/app/page.tsx (1)

182-195: Upcoming events date row correctly refactored to use CalendarButton.

This change cleanly moves the “add to calendar” interaction into the date row: the CalendarButton gets the full event payload, shows the formatted date range as the label, and leverages its internal hover state to swap the calendar icon. This aligns with the UX requirements (date area as the interactive element, hover icon change, click → Google Calendar) without introducing new complexity or layout regressions.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 51f0709 and 91f0c10.

📒 Files selected for processing (2)

• frontend/src/app/page.tsx (1 hunks)
• frontend/src/components/CalendarButton.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

frontend/src/components/CalendarButton.tsx (1)

frontend/src/types/calendar.ts (1)

• CalendarButtonProps (12-19)

frontend/src/app/page.tsx (2)

frontend/src/components/CalendarButton.tsx (1)

• CalendarButton (7-38)

frontend/src/utils/dateFormatter.ts (1)

• formatDateRange (22-61)

🔇 Additional comments (2)

frontend/src/components/CalendarButton.tsx (1)

1-34: LGTM! Clean hover state implementation.

The hover-driven icon transition from faCalendar to faCalendarPlus is implemented correctly. The logic preserves backward compatibility by allowing the optional icon prop to override the default behavior.

frontend/src/app/page.tsx (1)

182-195: Good integration of CalendarButton with event data.

The CalendarButton now consolidates the calendar icon and date display into a single interactive element, fulfilling the PR objective of using the event dates area as the clickable element for adding events to Google Calendar.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[arkid15r]

LGTM