Redesign monthly labs archive and detail UI

[hoangsvit]

Summary

• Redesign /monthly-labs/* as a consistent archive → month → detail experience.
• Replace generic nested content cards with dedicated month navigation cards and clickable lab/game cards.
• Rework lab detail pages into a responsive media + facts layout with clearer status, points, access code, deadline, slots and actions.
• Add responsive behavior for tablet/mobile and keep the existing site theme tokens, light/dark modes, localization, data model, routes and metadata unchanged.
• Update unit/browser verification to match the new UI hierarchy.
• Fix compatibility with the repository's current lucide-react icon set.

Scope

This is a stacked UI-only PR on #87. Its base is refactor/site-wide-ui-system, so the diff remains limited to Monthly Labs UI and its verification.

Changed files

• components/monthly-labs/pages.tsx
• app/styles/site-ui.css
• tests/monthly-labs.test.mjs
• scripts/verify-monthly-labs.mjs

Notes

• Existing route remains /monthly-labs/ (plural) to preserve sitemap and existing links.
• No monthly lab source data, parser, metadata, structured data, or route generation logic is changed.
• Previous CI failures were caused by unsupported Lucide icon names and stale browser-test selectors; both are corrected on this branch.

Conflict resolution — 2026-10-14

Merged the latest base into this branch and synchronized #87 → #89 → #90. Preserved current main's guest dashboard, Halloween UI, swag data and locale updates alongside the PR features. Updated the stale countdown test to verify the current event-based details action. Full-chain validation: 171 unit tests passed and all 13 locale catalogs generated successfully. GitHub CI must pass before merge.

[qodo-code-review]

ⓘ Qodo reviews are paused because the subscription is no longer active. Ask your workspace admin to reactivate the subscription to resume reviews. Manage billing

[github-actions]

⏳ PR preview building

The preview is queued or currently building.

• Commit: 1d471e9
• The live preview link will appear only after deployment succeeds and the URL responds successfully.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 55a83275-df0a-4211-a603-1e81bf97c219

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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