feat: dark light transition#194
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe PR adds a shared reduced-motion utility, wires animated theme switching through a transition module, adds WebGPU and 2D canvas rendering paths, exposes skyline data for bloom origin lookup, and enables a Claude plugin setting. ChangesTheme transition flow
Plugin settings
Sequence Diagram(s)sequenceDiagram
participant ThemeToggle
participant runThemeTransition
participant cancelThemeTransition
participant startWebGPU
participant "2D canvas fallback" as CanvasFallback
participant swap
ThemeToggle->>runThemeTransition: applyThemeMode(mode, true)
runThemeTransition->>cancelThemeTransition: stop any in-flight run
alt WebGPU available
runThemeTransition->>startWebGPU: start animated transition
startWebGPU->>swap: invoke at cover threshold
else WebGPU unavailable
runThemeTransition->>CanvasFallback: start fallback transition
CanvasFallback->>swap: invoke at cover threshold
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/src/theme-transition.ts (1)
106-118: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winFail fast on malformed packed colour maps.
parseHexMap()silently turns short or non-hex slices intoNaN, which can become black/invalid colours in both renderers. Guard the generated asset format before parsing.Suggested guard
function parseHexMap(hex: string, shift: number): number[][] { + const expectedLength = MAP_N * 6; + if (hex.length !== expectedLength || /[^0-9a-f]/i.test(hex)) { + throw new Error( + `Theme transition colour map must be ${expectedLength} hex characters`, + ); + } const map: number[][] = [];🤖 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 `@apps/web/src/theme-transition.ts` around lines 106 - 118, parseHexMap currently accepts short or invalid packed color data and can propagate NaN into the theme transition renderers; add a fail-fast validation step before the loop in parseHexMap to verify the hex string matches the expected packed MAP_N rrggbb format and contains only valid hex digits, and throw a clear error if it does not. Keep the fix localized to parseHexMap and use its existing channel helper and MAP_N constant to ensure malformed generated assets are rejected before any parsing happens.
🤖 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 `@apps/web/src/theme-transition.ts`:
- Around line 549-598: `runThemeTransition` still starts the animated
WebGPU/Canvas2D transition even when `prefersReducedMotion()` is enabled, so the
reduced-motion preference is not fully respected. Add an early short-circuit in
`runThemeTransition` before any renderer setup so it immediately calls `swap()`
and returns when reduced motion is requested. Make sure this bypass applies to
both the WebGPU path and the `startCanvas2D` fallback, and keep the existing
`teardown()`/token flow untouched for non-reduced-motion cases.
---
Nitpick comments:
In `@apps/web/src/theme-transition.ts`:
- Around line 106-118: parseHexMap currently accepts short or invalid packed
color data and can propagate NaN into the theme transition renderers; add a
fail-fast validation step before the loop in parseHexMap to verify the hex
string matches the expected packed MAP_N rrggbb format and contains only valid
hex digits, and throw a clear error if it does not. Keep the fix localized to
parseHexMap and use its existing channel helper and MAP_N constant to ensure
malformed generated assets are rejected before any parsing happens.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 49978c0b-74a9-49ed-919f-7d4755d3887d
📒 Files selected for processing (7)
.claude/settings.jsonapps/web/src/components/HmrcResults.tsxapps/web/src/components/LondonSkyline.tsxapps/web/src/components/ThemeToggle.tsxapps/web/src/theme-transition.tsapps/web/src/theme-transition.wgslapps/web/src/utils.ts
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
1 participant
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.
The expecto patronum effect inspired by Harry Potter, is what the light / dark theme tries to do.
The light from the city of London sets off the patronus charm.
Summary by CodeRabbit
New Features
Bug Fixes