feat(dashboard): add motion to homepage#81
Merged
Conversation
Add Motion wrappers and reduced-motion configuration for the AgentState landing page. Keep the shadcn-native homepage structure while adding staggered section reveals and card hover motion. Expose agents.md in dashboard static output and clean dashboard Biome hook naming/formatting so the full dashboard check passes. Co-Authored-By: Duyet Le <me@duyet.net> Co-Authored-By: duyetbot <bot@duyet.net>
Reviewer's GuideAdds motion-powered animations to the marketing/landing parts of the dashboard using Motion (Framer Motion compat) with reduced-motion support, wires them through a shared motion config and variants, exposes agents.md as a static asset, and normalizes various dashboard hook and component names for clearer exports and usage. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThis PR introduces Framer Motion animations across the entire landing page while systematically removing underscore prefixes from exported hooks and components to establish a cleaner public API throughout the dashboard. The changes span motion infrastructure setup, animated landing sections, and API naming improvements across multiple feature modules. ChangesLanding Page Animation Enhancement
Public API Cleanup and Naming
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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 |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The new
public/agents.mdfile currently just contains a relative path (../../api/src/content/agents.md), so the route will serve that literal text rather than the actual markdown content; consider either copying the builtagents.mdfile intopublicat build time or using a real filesystem symlink so the static file is served correctly.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The new `public/agents.md` file currently just contains a relative path (`../../api/src/content/agents.md`), so the route will serve that literal text rather than the actual markdown content; consider either copying the built `agents.md` file into `public` at build time or using a real filesystem symlink so the static file is served correctly.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces animations to the landing page using the motion library, including a new centralized motion configuration and the integration of animated components across the hero, features, and use-case sections. Additionally, it performs a significant refactor of the dashboard codebase by removing the underscore prefix from internal hooks and components to align with standard React naming conventions. A review comment suggests improving the consistency of the Button component usage in the ApiEndpoints section to ensure that link content is correctly rendered when using the render prop.
Comment on lines
+84
to
+94
| <Button | ||
| variant="ghost" | ||
| size="sm" | ||
| nativeButton={false} | ||
| render={ | ||
| <a href="/agents.md"> | ||
| agents.md | ||
| <ArrowRightIcon data-icon="inline-end" /> | ||
| </a> | ||
| } | ||
| /> |
There was a problem hiding this comment.
The Button component for agents.md is used inconsistently compared to the one for Full API reference (line 80). In line 80, the content is passed as children to the Button, while here it is nested inside the render prop. If the Button component uses a pattern like cloneElement to inject its own children into the render element, the content of the <a> tag might be lost or overwritten. It is better to pass the content as children to the Button for consistency and reliability.
Suggested change
| <Button | |
| variant="ghost" | |
| size="sm" | |
| nativeButton={false} | |
| render={ | |
| <a href="/agents.md"> | |
| agents.md | |
| <ArrowRightIcon data-icon="inline-end" /> | |
| </a> | |
| } | |
| /> | |
| <Button | |
| variant="ghost" | |
| size="sm" | |
| nativeButton={false} | |
| render={<a href="/agents.md" />} | |
| > | |
| agents.md | |
| <ArrowRightIcon data-icon="inline-end" /> | |
| </Button> |
Owner
Author
There was a problem hiding this comment.
Addressed in 22dbb20 by restoring the standard Base UI Button render pattern: the anchor stays in render and the visible content/icons are passed as Button children. I re-ran bunx biome check packages/dashboard/src/, cd packages/dashboard && bunx tsc --noEmit, cd packages/dashboard && bun run build, and a browser CTA check for /agents.md with no 4xx responses or console errors.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@packages/dashboard/src/app/dashboard/project/page.tsx`:
- Around line 92-94: The current onProjectUpdated handler ignores the returned
updated project and calls refreshProject(), causing an unnecessary API call;
instead destructure setProject from useProjectData() in page.tsx, thread the
setProject function as a prop through _ProjectSettings to RetentionSettings, and
replace the handler with onProjectUpdated={(updated) => setProject(updated)} so
the component state uses the provided updated project rather than refetching via
refreshProject().
In `@packages/dashboard/src/components/landing/use-cases.tsx`:
- Around line 36-44: In the use-case card grid, remove the explicit
loading="eager" prop from the Image element that renders useCase.image (the
Image component with width={360} height={180} and className="size-full
object-contain") so the browser can perform native lazy-loading for non-LCP grid
images; simply delete the loading="eager" attribute (or replace it with
loading="lazy" if you prefer explicit behavior) in the Image used by
use-cases.tsx.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: 195dbc92-2535-426b-bf8b-a81d7be503fc
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (40)
packages/dashboard/package.jsonpackages/dashboard/public/agents.mdpackages/dashboard/src/app/_api-endpoints.tsxpackages/dashboard/src/app/_code-examples.tsxpackages/dashboard/src/app/_features.tsxpackages/dashboard/src/app/_header.tsxpackages/dashboard/src/app/_hero.tsxpackages/dashboard/src/app/dashboard/conversations/_hooks.tspackages/dashboard/src/app/dashboard/conversations/_use-conversations-data.tspackages/dashboard/src/app/dashboard/conversations/_use-conversations-pagination.tspackages/dashboard/src/app/dashboard/conversations/page.tsxpackages/dashboard/src/app/dashboard/domains/_verification-method.tsxpackages/dashboard/src/app/dashboard/domains/_verification-record.tsxpackages/dashboard/src/app/dashboard/project/_components.tsxpackages/dashboard/src/app/dashboard/project/_conversation-cell-renderers.tsxpackages/dashboard/src/app/dashboard/project/_data-tab-state.tspackages/dashboard/src/app/dashboard/project/_data-tab.tsxpackages/dashboard/src/app/dashboard/project/_keys-tab-state.tspackages/dashboard/src/app/dashboard/project/_project-settings.tsxpackages/dashboard/src/app/dashboard/project/_retention-settings.tsxpackages/dashboard/src/app/dashboard/project/_use-computed-stats.tspackages/dashboard/src/app/dashboard/project/_use-conversation-actions.tspackages/dashboard/src/app/dashboard/project/_use-delete-project.tspackages/dashboard/src/app/dashboard/project/_use-key-actions.tspackages/dashboard/src/app/dashboard/project/_use-new-key-storage.tspackages/dashboard/src/app/dashboard/project/_use-project-data.tspackages/dashboard/src/app/dashboard/project/data-tab/conversations-content.tsxpackages/dashboard/src/app/dashboard/project/data-tab/index.tspackages/dashboard/src/app/dashboard/project/page.tsxpackages/dashboard/src/app/dashboard/settings/organizations/members/_components.tsxpackages/dashboard/src/app/dashboard/settings/organizations/members/_invite-member-form.tsxpackages/dashboard/src/app/dashboard/settings/organizations/members/_members-list.tsxpackages/dashboard/src/app/dashboard/settings/organizations/members/page.tsxpackages/dashboard/src/app/page.tsxpackages/dashboard/src/components/analytics/area-chart.tsxpackages/dashboard/src/components/analytics/summary-cards.tsxpackages/dashboard/src/components/landing/how-it-works.tsxpackages/dashboard/src/components/landing/motion-config.tsxpackages/dashboard/src/components/landing/motion.tsxpackages/dashboard/src/components/landing/use-cases.tsx
Use the established Base UI Button render pattern for agents.md anchors while preserving static markdown navigation. Co-Authored-By: Duyet Le <me@duyet.net> Co-Authored-By: duyetbot <bot@duyet.net>
Owner
Author
|
Sourcery note on |
Use the updated project response after retention saves instead of refetching. Let non-critical use-case images lazy-load by default. Co-Authored-By: Duyet Le <me@duyet.net> Co-Authored-By: duyetbot <bot@duyet.net>
duyet
dismissed
coderabbitai[bot]’s stale review
Addressed by b2e7ab6; CodeRabbit follow-up reviews marked both comments addressed.
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
Verification
Summary by Sourcery
Add animated motion to the dashboard landing page while cleaning up dashboard hooks/components and exposing the agents.md content in the static output.
New Features:
Enhancements:
Build:
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes & Improvements