Update the UI to use a switch component for including done tasks#158
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Summary by CodeRabbit
WalkthroughThe "Include Done" toggle for tasks was moved from the dashboard tabs header into the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DashboardTabs
participant TodoListTable
participant Switch
User->>DashboardTabs: Selects "All" tab
DashboardTabs->>TodoListTable: Render with includeDone/onIncludeDoneChange props
TodoListTable->>Switch: Render "Include Done" switch (if tab is "All")
User->>Switch: Toggles switch
Switch->>TodoListTable: onIncludeDoneChange(checked)
TodoListTable->>DashboardTabs: (callback propagates if needed)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
components/todo-list-table.tsx(3 hunks)components/ui/switch.tsx(1 hunks)modules/dashboard/components/dashboard-tabs.tsx(1 hunks)package.json(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
modules/dashboard/components/dashboard-tabs.tsx (1)
Learnt from: yesyash
PR: #109
File: app/(internal-routes)/teams/[teamId]/layout.tsx:8-15
Timestamp: 2025-07-16T13:18:36.847Z
Learning: In Next.js layout components, error handling and validation for params extraction (like const { teamId } = await params) is not required in this codebase. The framework handles routing validation adequately.
🧬 Code Graph Analysis (3)
components/ui/switch.tsx (1)
lib/utils.ts (1)
cn(4-6)
modules/dashboard/components/dashboard-tabs.tsx (1)
components/todo-list-table.tsx (1)
TodoListTable(144-218)
components/todo-list-table.tsx (1)
components/searchbar.tsx (1)
Searchbar(9-23)
🔇 Additional comments (7)
package.json (1)
35-35: Confirm version and complete security audit before merging
- Verified that
@radix-ui/react-switch@1.2.5is the latest published version on npm.- The npm audit step failed due to a missing lockfile, so no vulnerability report was produced.
Please generate a lockfile and re-run the audit, or manually review the package’s security advisories:
npm install --package-lock-only npm audit --audit-level moderatemodules/dashboard/components/dashboard-tabs.tsx (2)
11-16: Clean prop interface addition.The new props are properly typed and align with the component's responsibility of managing state while delegating UI rendering to child components.
53-58: Proper prop forwarding to TodoListTable.The
includeDoneandonIncludeDoneChangeprops are correctly passed to the TodoListTable component, enabling it to render and manage the switch UI internally.components/todo-list-table.tsx (4)
13-14: Proper imports for the new Switch functionality.The Label and Switch component imports are correctly added to support the new "Include Done" toggle feature.
140-141: Clean prop interface extension.The new optional props are properly typed and align with the parent component's interface.
144-150: Proper destructuring of enhanced props.The component correctly receives and destructures the new props for handling the "Include Done" switch functionality.
183-183: LGTM! Proper layout adjustment for the new switch.The change from a simple container to a flex layout appropriately accommodates the new switch component alongside the search bar.
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Status |
|---|---|---|
 |
Tab comparison using magic string ▹ view | ✅ Fix detected |
 |
Undocumented Query Parameter ▹ view | |
 |
Complex Inline CSS Calculation ▹ view | |
 |
Missing Accessibility Attributes ▹ view |
Files scanned
| File Path | Reviewed |
|---|---|
| components/ui/switch.tsx | ✅ |
| modules/dashboard/components/dashboard-tabs.tsx | ✅ |
| components/todo-list-table.tsx | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Check out our docs on how you can make Korbit work best for you and your team.
2 participants
Date: 24 Jul 2025
Developer Name: @Hariom01010
Issue Ticket Number
Closes #157
Description
This PR updates the UI to use a switch instead of checkbox for including done tasks
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot 1
Test Coverage
Screenshot 1
Additional Notes
Description by Korbit AI
What change is being made?
Replace the checkbox for including done tasks with a switch component in the TodoListTable UI and related components/modules.
Why are these changes being made?
Switch components provide a clearer visual indication of binary on/off states compared to checkboxes, enhancing user experience. The "@radix-ui/react-switch" library is introduced to facilitate a consistent design language across the UI elements while maintaining accessibility and usability.