Feat/implement dashboard v0#6
Conversation
|
/review |
Code Review by Qodo
1.
|
|
/improve |
|
Persistent review updated to latest commit daaa909 |
…vent listener in carousel.tsx ( #5 ) Co-authored-by: Antoine <[email protected]>
Review Summary by QodoDashboard v0: Complete UI component library and robot control dashboard
WalkthroughsDescription• **Complete UI component library**: 50+ reusable UI components built with Radix UI, Recharts, and other libraries (buttons, cards, forms, dialogs, menus, navigation, etc.) • **Dashboard v0 implementation**: Main dashboard page with integrated modules for robot control (manual control, camera feed, task management, metrics/alerts) • **Design system**: Comprehensive theme with CSS custom properties, color palette (primary, secondary, destructive, success, warning), and Tailwind configuration • **Robot control features**: Manual control module with autonomy toggle, speed slider, directional buttons, and emergency stop; task manager with delivery/guidance tabs; metrics and alerts display with battery chart • **Responsive design**: Mobile detection hook, sidebar with mobile sheet integration, responsive grid layouts • **Accessibility improvements**: ARIA labels, keyboard navigation, semantic HTML, proper form handling with react-hook-form • **Dependencies**: Added 40+ packages for UI components, form handling, animations, and charting • **Build improvements**: Updated lint scripts and ESLint configuration Diagramflowchart LR
A["UI Components<br/>50+ components"] --> B["Dashboard Page"]
C["Design System<br/>Theme & tokens"] --> B
D["Dashboard Modules<br/>Manual Control<br/>Camera Feed<br/>Task Manager<br/>Metrics/Alerts"] --> B
E["Dependencies<br/>Radix UI, Recharts<br/>react-hook-form"] --> A
E --> D
B --> F["Robot Control<br/>Interface"]
File Changes1. src/components/ui/use-mobile.ts
|
Code Review by Qodo
1. Button implicit submit type
|
|
@KelianHalleray im waiting for you to init the server for remove the first mock |
| const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( | ||
| ({ className, variant, size, asChild = false, ...props }, ref) => { | ||
| const Comp = asChild ? Slot : 'button'; | ||
| return ( | ||
| <Comp | ||
| className={cn(buttonVariants({ variant, size, className }))} | ||
| ref={ref} | ||
| {...props} | ||
| /> |
There was a problem hiding this comment.
1. Button implicit submit type 🐞 Bug ✓ Correctness
Button renders a native <button> without setting type, so when used inside a <form> it defaults to submit and can trigger unintended form submissions. This can cause incorrect navigation/data submission when buttons are intended to be non-submitting UI controls.
Agent Prompt
### Issue description
The shared `Button` component renders a native `<button>` without a default `type`, which can cause unintended form submissions.
### Issue Context
This component will be reused broadly; the safest default is `type="button"` unless the user explicitly sets `type` (or uses `asChild`).
### Fix Focus Areas
- src/components/ui/button.tsx[40-48]
### Implementation notes
- When `Comp === 'button'` and `props.type` is `undefined`, pass `type="button"`.
- Preserve any explicit `type` passed by the caller.
- Do not set `type` when `asChild` is true (since the underlying element may not be a button).
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
PR Type
feature
Summary
Dashboard v0 for Robocoop: UI components and main dashboard screen.
Description
globals.css, accessibility and typing fixes (readonly props, carouselsection/aria-label, contextuseMemo,ComponentRef).pnpm dev→ check header, camera, manual control, task/metrics/alert tabs, battery chart.What's Changed
Screen
Will
Relates to #5
Closes #5