Improve welcome card visuals#680
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
📝 WalkthroughWalkthroughThis PR redesigns the WelcomeVideoGate onboarding dialog: adds a qrcode.react dependency, introduces new state/types and a dismissWelcome/copyMobileLink flow, rebuilds the UI with VideoPanel/PhonePanel/SurfaceTile subcomponents, adds matching CSS animations/styles, and expands test coverage. ChangesWelcomeVideoGate redesign
Estimated code review effort: 3 (Moderate) | ~30 minutes Suggested labels: `desktop`, `docs` 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
|
@copilot review but do not make fixes |
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7826143ef5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
arul28
force-pushed
the
ade/welcome-card-look-nicer-plan-34de39ff
branch
from
7826143 to
0e75924
Compare
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0e75924a17
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
apps/desktop/src/renderer/index.css (1)
4021-4030: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueStagger delays hardcoded to 3 tiles.
nth-child(1/2/3)delays assume exactly 3 surface tiles; ifSURFACESever grows, extra tiles snap in without a staggered delay. Fine as-is since the surfaces list is currently fixed at 3 (desktop/mobile/terminal), but worth a comment or a more generic selector if the list becomes dynamic.🤖 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/desktop/src/renderer/index.css` around lines 4021 - 4030, The staggered animation in ade-welcome-card__tile is hardcoded for only three tiles via nth-child(1/2/3), so any additional SURFACES entries won’t get a delay. Update the styling to use a more generic stagger approach in index.css, or add a clear comment near ade-welcome-card__tile explaining that the delays intentionally match the fixed three-surface list.apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.test.tsx (1)
96-118: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDirect utility call mixed into a component-behavior test.
Line 112 calls
publicAssetUrldirectly rather than asserting on rendered output, unlike the surrounding assertions (Lines 109-111, 113-118) that verify the component's actual DOM. This doesn't validate that the component itself usespublicAssetUrlcorrectly under nested routes — it only re-tests the utility in isolation.🤖 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/desktop/src/renderer/components/onboarding/WelcomeVideoGate.test.tsx` around lines 96 - 118, The test for WelcomeVideoGate is mixing a direct utility assertion into a component behavior check, which bypasses the DOM and re-tests publicAssetUrl in isolation. Remove the standalone publicAssetUrl("welcome/video-poster.jpg") assertion and instead verify the component’s rendered asset src values through the existing WelcomeVideoGate DOM assertions, so the test only validates behavior via rendered output.
🤖 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.
Nitpick comments:
In `@apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.test.tsx`:
- Around line 96-118: The test for WelcomeVideoGate is mixing a direct utility
assertion into a component behavior check, which bypasses the DOM and re-tests
publicAssetUrl in isolation. Remove the standalone
publicAssetUrl("welcome/video-poster.jpg") assertion and instead verify the
component’s rendered asset src values through the existing WelcomeVideoGate DOM
assertions, so the test only validates behavior via rendered output.
In `@apps/desktop/src/renderer/index.css`:
- Around line 4021-4030: The staggered animation in ade-welcome-card__tile is
hardcoded for only three tiles via nth-child(1/2/3), so any additional SURFACES
entries won’t get a delay. Update the styling to use a more generic stagger
approach in index.css, or add a clear comment near ade-welcome-card__tile
explaining that the delays intentionally match the fixed three-surface list.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d5bf2619-15a2-4ee7-ab03-fd50e0440360
⛔ Files ignored due to path filters (4)
apps/desktop/package-lock.jsonis excluded by!**/package-lock.json,!**/package-lock.jsonapps/desktop/src/renderer/public/welcome/video-poster.jpgis excluded by!**/*.jpgdocs/ARCHITECTURE.mdis excluded by!docs/**docs/features/onboarding-and-settings/README.mdis excluded by!docs/**
📒 Files selected for processing (8)
apps/desktop/package.jsonapps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.test.tsxapps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.tsxapps/desktop/src/renderer/index.cssapps/desktop/src/renderer/public/welcome/ade-icon.webpapps/desktop/src/renderer/public/welcome/desktop.webpapps/desktop/src/renderer/public/welcome/mobile.webpapps/desktop/src/renderer/public/welcome/tui.webp
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c227ffaf25
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
|
Codex Review: Didn't find any major issues. Can't wait for the next one! Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
1 participant
Summary
Validation
Summary by CodeRabbit
New Features
Bug Fixes
Greptile Summary
This PR redesigns the one-time welcome overlay into a richer welcome card. The main changes are:
Confidence Score: 5/5
No code issues were identified that would block merging.
The changes are focused on the welcome-card UI, bundled assets, tests, dependency metadata, and documentation, with validation covering unit tests, typechecking, linting, builds, CLI tests, docs validation, and visual preview inspection.
What T-Rex did
Reviews (3): Last reviewed commit: "Address welcome card review nitpicks" | Re-trigger Greptile