feat(dashboard): add How It Works flow diagram to landing page#37
Conversation
…page Add a 3-step flow diagram (Send, Store, Retrieve) with inline SVG icons and animated connecting arrows between steps on desktop. Co-Authored-By: Duyet Le <me@duyet.net> Co-Authored-By: duyetbot <bot@duyet.net> Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a new "How it works" section to the dashboard's landing page. The primary goal is to provide users with a clear, visual understanding of the system's core functionality through an interactive, animated three-step flow diagram, enhancing user comprehension and engagement with the product. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
📝 WalkthroughWalkthroughA new HowItWorks component is introduced to the landing page that displays a series of instructional steps with icons and animated connecting arrows. The component is added to the component library and integrated into the landing page. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 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 |
![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 adds a new "How it works" section to the landing page, which is a nice enhancement. The implementation in the new how-it-works.tsx component is well-structured. I have a couple of minor suggestions to improve the readability and maintainability of the ConnectingArrow component by defining a type for its props and making a CSS calculation more explicit.
| ); | ||
| } | ||
|
|
||
| function ConnectingArrow({ position }: { position: "left" | "right" }) { |
There was a problem hiding this comment.
For better readability and maintainability, consider defining a separate type or interface for the component's props, like ConnectingArrowProps. This makes the component signature cleaner and easier to extend in the future.
Example:
type ConnectingArrowProps = {
position: "left" | "right";
};
function ConnectingArrow({ position }: ConnectingArrowProps) { /* ... */ }| } | ||
|
|
||
| function ConnectingArrow({ position }: { position: "left" | "right" }) { | ||
| const left = position === "left" ? "calc(33.333% - 10px)" : "calc(66.666% - 10px)"; |
There was a problem hiding this comment.
To improve readability and maintainability, it's better to make the calculation for the left property more explicit. Using division (100% / 3) instead of a magic number like 33.333% clarifies the intent of dividing the container into three parts.
| const left = position === "left" ? "calc(33.333% - 10px)" : "calc(66.666% - 10px)"; | |
| const left = position === "left" ? "calc((100% / 3) - 10px)" : "calc((100% / 3) * 2 - 10px)"; |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/dashboard/src/components/landing/how-it-works.tsx`:
- Around line 55-60: The SVG uses viewBox="0 0 60 20" but is rendered with
className "w-5 h-5" causing a 3:1->1:1 distortion; fix by making the SVG
coordinate system match its rendered aspect ratio—either change the viewBox to a
square like "0 0 20 20" and adjust the path coordinates accordingly, or change
the CSS sizing (the "w-5 h-5" classes) to preserve the 3:1 ratio (e.g., a wider
width with the same height) so the SVG in the component (the <svg ...
className="hidden sm:block absolute top-1/2 -translate-y-1/2 w-5 h-5" ...>)
displays without squashing. Ensure the path data is updated if you alter the
viewBox.
🪄 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: a9f13ed0-a611-4b7f-a8cb-66c95917c54d
📒 Files selected for processing (2)
packages/dashboard/src/app/page.tsxpackages/dashboard/src/components/landing/how-it-works.tsx
| <svg | ||
| role="presentation" | ||
| aria-hidden="true" | ||
| className="hidden sm:block absolute top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" | ||
| style={{ left }} | ||
| viewBox="0 0 60 20" |
There was a problem hiding this comment.
SVG aspect ratio mismatch causes visual distortion.
The viewBox="0 0 60 20" has a 3:1 aspect ratio, but the element uses w-5 h-5 (1:1 aspect ratio). This compresses the 60-unit-wide path into a 20px square, making the arrow appear squashed rather than as a proper horizontal connector.
Consider aligning the viewBox and element dimensions:
🔧 Proposed fix
<svg
role="presentation"
aria-hidden="true"
- className="hidden sm:block absolute top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
+ className="hidden sm:block absolute top-1/2 -translate-y-1/2 w-[60px] h-5 text-muted-foreground"
style={{ left }}
viewBox="0 0 60 20"
fill="none"
>Or adjust the viewBox to match a square aspect ratio and update the path accordingly.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <svg | |
| role="presentation" | |
| aria-hidden="true" | |
| className="hidden sm:block absolute top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" | |
| style={{ left }} | |
| viewBox="0 0 60 20" | |
| <svg | |
| role="presentation" | |
| aria-hidden="true" | |
| className="hidden sm:block absolute top-1/2 -translate-y-1/2 w-[60px] h-5 text-muted-foreground" | |
| style={{ left }} | |
| viewBox="0 0 60 20" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/dashboard/src/components/landing/how-it-works.tsx` around lines 55 -
60, The SVG uses viewBox="0 0 60 20" but is rendered with className "w-5 h-5"
causing a 3:1->1:1 distortion; fix by making the SVG coordinate system match its
rendered aspect ratio—either change the viewBox to a square like "0 0 20 20" and
adjust the path coordinates accordingly, or change the CSS sizing (the "w-5 h-5"
classes) to preserve the 3:1 ratio (e.g., a wider width with the same height) so
the SVG in the component (the <svg ... className="hidden sm:block absolute
top-1/2 -translate-y-1/2 w-5 h-5" ...>) displays without squashing. Ensure the
path data is updated if you alter the viewBox.
2 participants
Summary
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit