update the faces of clean air page#3822
Merged
Merged
Conversation
…, and Selfies screens - Implemented QrCodeButton component with updated styles and functionality. - Integrated QrCodeButton into LeaderboardScreen, QuizScreen, and SelfiesScreen for enhanced user interaction. - Adjusted layout and styles for better responsiveness and visual consistency across screens. - Added new Selfies route and screen to display user-submitted selfies from the Africa Clean Air Forum.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughAdds a Clean Air Forum 2026 Selfies route with metadata, footer navigation, a client-side selfie carousel, QR integration, and responsive layout refinements across related forum screens. ChangesClean Air Forum selfie experience
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant SelfiesRoute
participant SelfiesScreen
participant facesOfCleanAirService
SelfiesRoute->>SelfiesScreen: render selfie screen
SelfiesScreen->>facesOfCleanAirService: getSubmissions(event id)
facesOfCleanAirService-->>SelfiesScreen: return submissions
SelfiesScreen->>SelfiesScreen: paginate and render carousel
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
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. Comment |
Contributor
|
New azure website changes available for preview here |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx (2)
498-504: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDead branch in the auto-advance timer.
Both arms of the
ifcallgoToRelativePage(1), so the conditional does nothing but slow down the reader. Collapse it to a single call.♻️ Proposed simplification
- const carouselTimer = window.setTimeout(() => { - if (totalSlides > 1 && page < totalSlides - 1) { - goToRelativePage(1); - return; - } - goToRelativePage(1); - }, CAROUSEL_INTERVAL_MS); + const carouselTimer = window.setTimeout(() => { + goToRelativePage(1); + }, CAROUSEL_INTERVAL_MS);🤖 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/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx` around lines 498 - 504, In the carouselTimer callback on SelfiesScreen, remove the redundant totalSlides/page conditional and invoke goToRelativePage(1) once after the timeout, preserving the existing interval and auto-advance behavior.
329-333: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse
cn()for conditional class composition.This
classNamecomposes a static base with a conditional segment via a template literal + ternary. The repo standard iscn()from@/lib/utils. The same pattern recurs elsewhere in this file (e.g. the loading/content wrapper ternaries around Lines 729-749 and 805-818), so worth aligning them as you touch this.As per coding guidelines: "Use
cn()from@/lib/utilsfor conditional Tailwind class composition."♻️ Proposed fix (add the import, then swap the template literal)
+import { cn } from '`@/lib/utils`';- className={`relative h-2.5 overflow-hidden rounded-full border border-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent ${ - isActive - ? 'w-11 bg-white/30' - : 'w-2.5 bg-white/30 hover:bg-white/50' - }`} + className={cn( + 'relative h-2.5 overflow-hidden rounded-full border border-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent', + isActive ? 'w-11 bg-white/30' : 'w-2.5 bg-white/30 hover:bg-white/50', + )}🤖 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/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx` around lines 329 - 333, Update the conditional class composition for the indicator element in SelfiesScreen using the repository’s cn() utility from `@/lib/utils` instead of a template literal and ternary. Add the import if needed, and align the related conditional className expressions in the loading/content wrapper sections with cn() while preserving their existing classes and behavior.Source: Coding guidelines
src/website/src/app/(programs)/africa-clean-air-forum-2026/selfies/page.tsx (1)
4-11: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winCentralize this page’s metadata in
METADATA_CONFIGS.
It’s still defining title/description/keywords inline; adding a config entry keeps the program pages consistent and avoids duplicated SEO strings.🤖 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/website/src/app/`(programs)/africa-clean-air-forum-2026/selfies/page.tsx around lines 4 - 11, Move the inline title, description, keywords, and URL configuration from the page’s generateMetadata call into the centralized METADATA_CONFIGS entry for the Africa Clean Air Forum 2026 selfies page. Update the page to reference that config while preserving the existing generated metadata values and behavior.Source: Coding guidelines
🤖 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/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx`:
- Around line 293-298: The leaderboard title can be clipped on narrow screens
because its container hides overflow while the text cannot wrap. In
src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx
lines 293-298, add truncation styling to the title span; apply the same change
in the isLeaderboardStage title span at
src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx lines
1110-1112 so both render an ellipsis instead of clipping.
---
Nitpick comments:
In `@src/website/src/app/`(programs)/africa-clean-air-forum-2026/selfies/page.tsx:
- Around line 4-11: Move the inline title, description, keywords, and URL
configuration from the page’s generateMetadata call into the centralized
METADATA_CONFIGS entry for the Africa Clean Air Forum 2026 selfies page. Update
the page to reference that config while preserving the existing generated
metadata values and behavior.
In `@src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx`:
- Around line 498-504: In the carouselTimer callback on SelfiesScreen, remove
the redundant totalSlides/page conditional and invoke goToRelativePage(1) once
after the timeout, preserving the existing interval and auto-advance behavior.
- Around line 329-333: Update the conditional class composition for the
indicator element in SelfiesScreen using the repository’s cn() utility from
`@/lib/utils` instead of a template literal and ternary. Add the import if needed,
and align the related conditional className expressions in the loading/content
wrapper sections with cn() while preserving their existing classes and behavior.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 234af358-1b52-4f06-b21a-f29e05a5c8e3
📒 Files selected for processing (7)
src/website/src/app/(programs)/africa-clean-air-forum-2026/selfies/page.tsxsrc/website/src/components/clean-air-forum-2026/QrCodeButton.tsxsrc/website/src/components/layout/Footer.tsxsrc/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsxsrc/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsxsrc/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsxsrc/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
…erboard title styling
Contributor
|
New azure website changes available for preview here |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/website/src/components/clean-air-forum-2026/selfie-components.tsx (1)
345-349: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueCompose the conditional classes with
cn().This template-literal concatenation mixes a static base with an
isActivebranch. Routing it throughcn()keeps composition consistent and avoids stray-space/merge quirks.♻️ Example
- className={`relative h-2.5 overflow-hidden rounded-full border border-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent ${ - isActive - ? 'w-11 bg-white/30' - : 'w-2.5 bg-white/30 hover:bg-white/50' - }`} + className={cn( + 'relative h-2.5 overflow-hidden rounded-full border border-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent', + isActive ? 'w-11 bg-white/30' : 'w-2.5 bg-white/30 hover:bg-white/50', + )}Add
import { cn } from '@/lib/utils';at the top.As per coding guidelines: "Use
cn()from@/lib/utilsfor conditional Tailwind class composition."🤖 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/website/src/components/clean-air-forum-2026/selfie-components.tsx` around lines 345 - 349, Update the conditional class composition on the affected element to use the `cn()` utility from `@/lib/utils` instead of template-literal concatenation, preserving the static classes and the existing `isActive` width/background branches.Source: Coding guidelines
src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx (1)
119-125: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAuto-advance branch is a no-op — both paths do the same thing.
The
if (totalSlides > 1 && page < totalSlides - 1)block and the fall-through both callgoToRelativePage(1), and that helper already wraps via modulo, so the last-page case loops to0regardless. The conditional is dead. If you intended different last-page behavior (e.g. pause, or jump-to-0 without the wrap), that logic is missing; otherwise collapse it.♻️ Collapse to the effective behavior
- const carouselTimer = window.setTimeout(() => { - if (totalSlides > 1 && page < totalSlides - 1) { - goToRelativePage(1); - return; - } - goToRelativePage(1); - }, CAROUSEL_INTERVAL_MS); + const carouselTimer = window.setTimeout(() => { + goToRelativePage(1); + }, CAROUSEL_INTERVAL_MS);🤖 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/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx` around lines 119 - 125, Remove the redundant conditional inside the carouselTimer callback in SelfiesScreen, leaving a single goToRelativePage(1) call so auto-advance preserves the existing modulo-wrapping behavior.
🤖 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/website/src/components/clean-air-forum-2026/selfie-components.tsx`:
- Around line 90-91: Update the location fallback in the selfie card component
to use a neutral description instead of the hardcoded Pretoria location.
Preserve trimmed submission.locationName values, and ensure the resulting
location used by the image alt text does not assert a specific place when
locationName is absent.
---
Nitpick comments:
In `@src/website/src/components/clean-air-forum-2026/selfie-components.tsx`:
- Around line 345-349: Update the conditional class composition on the affected
element to use the `cn()` utility from `@/lib/utils` instead of template-literal
concatenation, preserving the static classes and the existing `isActive`
width/background branches.
In `@src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx`:
- Around line 119-125: Remove the redundant conditional inside the carouselTimer
callback in SelfiesScreen, leaving a single goToRelativePage(1) call so
auto-advance preserves the existing modulo-wrapping behavior.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a7b52bc8-5098-4d21-b3c7-8e950eea6eef
📒 Files selected for processing (8)
src/website/src/components/clean-air-forum-2026/QrCodeButton.tsxsrc/website/src/components/clean-air-forum-2026/selfie-components.tsxsrc/website/src/components/layout/Footer.tsxsrc/website/src/features/clean-air-forum-2026/screens/LandingScreen.tsxsrc/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsxsrc/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsxsrc/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsxsrc/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
💤 Files with no reviewable changes (2)
- src/website/src/features/clean-air-forum-2026/screens/LandingScreen.tsx
- src/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- src/website/src/components/layout/Footer.tsx
- src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx
- src/website/src/components/clean-air-forum-2026/QrCodeButton.tsx
- src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
Contributor
|
New azure website changes available for preview here |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refreshes the Africa Clean Air Forum 2026 “Faces of Clean Air” experience by introducing a dedicated Selfies page/carousel, refining responsive header typography/layout, and repositioning the QR entry point to the screens where participation is most relevant.
Changes:
- Added a new
/africa-clean-air-forum-2026/selfiesroute with an interactive, auto-advancing selfie carousel and loading/error/empty states. - Updated header typography/truncation to be more responsive across CAF 2026 screens.
- Moved/remodeled the QR button placement (added to Selfies + Leaderboard; removed from Landing + Quiz) and updated footer navigation.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx | Responsive header truncation + overflow adjustments for the existing faces/leaderboard carousel experience. |
| src/website/src/features/clean-air-forum-2026/screens/SelfiesScreen.tsx | New CAF 2026 selfies screen with polling, carousel interaction, pagination, and QR entry point. |
| src/website/src/features/clean-air-forum-2026/screens/QuizScreen.tsx | Updated header sizing/layout; removed QR button and reduced max content width. |
| src/website/src/features/clean-air-forum-2026/screens/LeaderboardScreen.tsx | Updated header truncation/layout; added QR button and adjusted error card sizing. |
| src/website/src/features/clean-air-forum-2026/screens/LandingScreen.tsx | Removed QR button from the landing screen. |
| src/website/src/components/layout/Footer.tsx | Added a “Clean Air Faces” footer link to the new selfies route. |
| src/website/src/components/clean-air-forum-2026/selfie-components.tsx | New shared selfie UI primitives/hooks (card, pagination, keyboard + swipe handling). |
| src/website/src/components/clean-air-forum-2026/QrCodeButton.tsx | Visual sizing/styling tweaks for the QR button. |
| src/website/src/app/(programs)/africa-clean-air-forum-2026/selfies/page.tsx | New Next.js route + metadata for the selfies page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </motion.header> | ||
|
|
||
| <main className="mx-auto flex min-h-0 w-full max-w-[1200px] flex-1 items-center justify-center pt-2 sm:min-h-[60svh] sm:flex-none sm:pt-10"> | ||
| <main className="mx-auto flex min-h-0 w-full max-w-[1200px] flex-1 items-center justify-center overflow-hidden pt-2 sm:min-h-[60svh] sm:flex-none sm:pt-10"> |
…in Selfies and FacesOfCleanAir pages
Contributor
|
New azure website changes available for preview here |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Status of maturity (all need to be checked before merging):
Screenshots (optional)
Summary by CodeRabbit