feat(demo): add 'Get Started' options for demo mode in AppTopBar and enhance PreviewUpsellModal#111
Merged
Merged
Conversation
…enhance PreviewUpsellModal
|
🚅 Deployed to the reqcore-pr-111 environment in applirank
|
📝 WalkthroughWalkthroughTwo Vue components are updated to improve user onboarding and upsell presentation. AppTopBar.vue introduces a demo-mode Get Started menu with Cloud Hosted and Self-Host options, featuring click-outside detection and route-change cleanup. PreviewUpsellModal.vue restructures its layout to display Cloud and Self-Host options as prominent vertical cards instead of simple buttons. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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.
🧹 Nitpick comments (2)
app/components/AppTopBar.vue (2)
196-206: Consider adding ARIA attributes for accessibility.The dropdown button and menu lack accessibility attributes (
aria-expanded,aria-haspopup,aria-controls) that screen readers rely on to announce the dropdown state.♿ Proposed accessibility improvement
<button + aria-haspopup="true" + :aria-expanded="showGetStartedMenu" class="group inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-brand-600 to-violet-600 px-4 py-1.5 text-[13px] font-semibold text-white shadow-md shadow-brand-600/25 hover:shadow-lg hover:shadow-brand-600/30 active:shadow-sm transition-all duration-200 cursor-pointer border-0" `@click`="showGetStartedMenu = !showGetStartedMenu" >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/AppTopBar.vue` around lines 196 - 206, The Get Started dropdown button currently toggles showGetStartedMenu but lacks ARIA attributes; update the button element (the one using `@click` and rendering Sparkles and ChevronDown) to include aria-haspopup="menu", bind aria-expanded to showGetStartedMenu, and add aria-controls referencing the id of the dropdown menu; then ensure the dropdown menu element has a stable id, role="menu" (or role appropriate for your menu), and manage aria-hidden or aria-labelledby based on showGetStartedMenu so screen readers can detect open/closed state (use the existing showGetStartedMenu reactive property and the existing menu container element to wire these attributes).
236-249: Minor UX consideration: menu stays open after clicking external link.Since the self-host link opens in a new tab, the route watcher doesn't trigger and the dropdown remains open. Users will need to click elsewhere to close it. This is acceptable behavior, but for a polished UX you could explicitly close the menu on click.
✨ Optional: close menu on external link click
<a href="https://github.com/reqcore-inc/reqcore#quick-start" target="_blank" rel="noopener noreferrer" class="flex items-start gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-surface-50 dark:hover:bg-surface-800/60 no-underline group/item" + `@click`="showGetStartedMenu = false" >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/AppTopBar.vue` around lines 236 - 249, Add an explicit click handler to the external link in AppTopBar.vue so the dropdown closes when the link is clicked: add `@click`="closeMenu" (or `@click`="isMenuOpen = false" / `@click`="$emit('update:open', false)" depending on your implementation) to the <a> element, implement a closeMenu method that sets the menu state (e.g., isMenuOpen, showDropdown) to false or emits the appropriate close event, and ensure the handler does not stop the default navigation (do not call preventDefault) so the link still opens in a new tab.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@app/components/AppTopBar.vue`:
- Around line 196-206: The Get Started dropdown button currently toggles
showGetStartedMenu but lacks ARIA attributes; update the button element (the one
using `@click` and rendering Sparkles and ChevronDown) to include
aria-haspopup="menu", bind aria-expanded to showGetStartedMenu, and add
aria-controls referencing the id of the dropdown menu; then ensure the dropdown
menu element has a stable id, role="menu" (or role appropriate for your menu),
and manage aria-hidden or aria-labelledby based on showGetStartedMenu so screen
readers can detect open/closed state (use the existing showGetStartedMenu
reactive property and the existing menu container element to wire these
attributes).
- Around line 236-249: Add an explicit click handler to the external link in
AppTopBar.vue so the dropdown closes when the link is clicked: add
`@click`="closeMenu" (or `@click`="isMenuOpen = false" /
`@click`="$emit('update:open', false)" depending on your implementation) to the
<a> element, implement a closeMenu method that sets the menu state (e.g.,
isMenuOpen, showDropdown) to false or emits the appropriate close event, and
ensure the handler does not stop the default navigation (do not call
preventDefault) so the link still opens in a new tab.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 30dc298d-5ef0-4222-830f-b6091a5d9e22
📒 Files selected for processing (2)
app/components/AppTopBar.vueapp/components/PreviewUpsellModal.vue
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.
Summary
Type of change
Validation
DCO
Signed-off-by) viagit commit -sSummary by CodeRabbit
New Features
Improvements