[WOD-127] Make submission windows clickable with improved status display

[zacjones93]

Summary

Enhanced the submission windows component to make each window clickable, linking to the detailed workout view. Improved the status badge display to show more relevant time information and better visual hierarchy.

Key Changes

• Made submission windows interactive: Converted SubmissionWindowRow from a div to a Link component that navigates to /compete/$slug/workouts/$eventId
• Added slug prop: Passed the competition slug through the component hierarchy to enable proper routing
• Improved date/time display:
  • Added formatDateRange() helper to show submission window dates in a more compact format
  • Separated date and time information into distinct visual sections with appropriate icons
• Enhanced status badges:
  • Restructured status badge layout to use a flex column with badge and time remaining/opening info
  • Changed "Open Now" to "Open" and "Opens {time}" to "Upcoming" for cleaner labels
  • Added getTimeRemaining() helper to show countdown for open windows (e.g., "2 days left to submit")
  • Moved time information below the badge as secondary text
• Improved visual feedback:
  • Added hover effects with color transitions on the row and text
  • Added ChevronRight icon to indicate the row is clickable
  • Applied group class for coordinated hover state styling

Implementation Details

• The SubmissionWindowRow component now uses TanStack Router's Link component for client-side navigation
• Time remaining calculations distinguish between days, hours, and minutes with appropriate messaging
• Date range formatting intelligently shows single date or date range depending on whether the window spans multiple days
• All hover states use the orange-500 color to match the design system

https://claude.ai/code/session_01JmcGzN5AsHeDu1XZVatoSo

---

Summary by cubic

Makes each submission window row clickable to the workout details page and clarifies the date/time and status display for easier scanning and navigation.

• New Features
  • Clickable rows via TanStack Router linking to /compete/$slug/workouts/$eventId (added slug prop).
  • Compact, timezone-aware date range (e.g., "Jan 20 - Jan 27") with clear open/close times.
  • Status badges use "Upcoming", "Open", "Closed" with secondary text showing countdowns (e.g., "2 days left to submit").
  • Added hover feedback and a chevron to signal interactivity.
  • Aligns with WOD-127: clearer schedule display and direct navigation to workout details.

^{Written for commit 9d87c95. Summary will update on new commits.}

Summary by CodeRabbit

Release Notes

New Features

• Submission window entries are now clickable, enabling direct navigation to specific workouts

UI/UX Improvements

• Refined date range formatting with timezone support for multi-day submission windows
• Enhanced time display with clearer remaining time indicators
• Added visual navigation indicators and improved status badge styling for better visual hierarchy

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 08ee9ff and 9d87c95.

📒 Files selected for processing (2)

• apps/wodsmith-start/src/components/public-submission-windows.tsx
• apps/wodsmith-start/src/routes/compete/$slug/schedule.tsx

---

Walkthrough

This pull request adds slug-based routing to the PublicSubmissionWindows component, enabling direct navigation to competition workouts. The component now wraps submission window rows in Link elements pointing to /compete/$slug/workouts/$eventId and enhances the UI with improved date range formatting, time remaining indicators, and visual navigation cues like ChevronRight icons.

Changes

Cohort / File(s)	Summary
Submission Windows Component apps/wodsmith-start/src/components/public-submission-windows.tsx	Added slug prop requirement to component interface. Integrated routing by wrapping submission window rows in Link elements. Enhanced date presentation with formatDateRange helper for multi-day ranges. Refactored status badge and time displays to use getTimeRemaining and getTimeUntil helpers. Added ChevronRight indicator and improved group-hover styling.
Schedule Route apps/wodsmith-start/src/routes/compete/$slug/schedule.tsx	Updated PublicSubmissionWindows component call to pass slug={competition.slug} prop.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat(compete): add glassmorphism styling to competition detail pages #210 — Related through similar slug-based routing integration and component API changes for threading competition context throughout navigation flows.

Poem

🐰 Slugs now guide the way so true,
Routes link where windows brew,
Chevrons point, dates align,
Time displays in format fine! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main changes: making submission windows clickable (routing integration) and improving the status display (time/date formatting, status badges, visual feedback).

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/submission-windows-schedule-Wjsit

---

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

[cubic-dev-ai]

No issues found across 2 files