Improve command palette navigation #3174
Conversation
…components 🔧 BREAKING DOWN MONOLITHIC FILE (3497 → 1722 lines) ✨ New Components Created: - components/GanttChart.tsx (1027 lines) - Timeline visualization with pagination & search - components/TaskWorkflowAnalytics.tsx (208 lines) - Workflow efficiency metrics - components/TaskCreationAnalytics.tsx (214 lines) - Creation trends & analytics - components/StatusDistribution.tsx (117 lines) - Task status distribution charts - components/TaskGroup.tsx (230 lines) - Collapsible task sections with priority badges 🛠️ Utilities & Hooks: - utils/taskHelpers.ts (177 lines) - Shared utility functions for task operations - hooks/useTaskAnalytics.ts (247 lines) - Analytics calculation hooks 🐛 Critical React Hooks Fixes: - Fixed hook order violations in GanttChart component - Moved useMemo from JSX to top-level (Rules of Hooks compliance) - Resolved 'Rendered more hooks than during the previous render' error 🧹 Code Quality Improvements: - Removed all unused imports and dependencies - Clean separation of concerns between components - Maintained full functionality while improving maintainability - Each component now has focused, single responsibility 📊 Benefits: - ✅ 50% reduction in main file size (3497 → 1722 lines) - ✅ Improved testability with isolated components - ✅ Enhanced maintainability and code readability - ✅ Resolved React Hooks runtime errors - ✅ Better developer experience for future modifications This refactoring transforms a large, difficult-to-maintain monolithic component into a well-structured, modular architecture while preserving all existing functionality and fixing critical React compliance issues.
… into feat/tasks/board-improvement-v2
… into feat/tasks/board-improvement-v2
… into feat/tasks/board-improvement-v2
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ 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 (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Adinorio, 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 delivers a substantial upgrade to the task management system, focusing on improving the user's ability to navigate, filter, and analyze tasks. It introduces powerful new UI features for task lists and analytics, backed by significant database enhancements for tag management, all while refining the command palette's usability and error handling.
Highlights
- Enhanced Task List View: The task list view has been significantly upgraded with advanced filtering capabilities (by priority, status, assignee, and date), multi-column sorting, pagination, and options to toggle column visibility. It also introduces bulk task selection for future actions.
- New Task Analytics & Visualization: Several new components have been added to provide deeper insights into tasks, including a comprehensive Gantt chart timeline, detailed status distribution, task creation and flow analytics, and workflow efficiency metrics.
- Improved Command Palette User Experience: The command palette now offers a more robust user experience with explicit loading indicators, detailed error messages, and user-friendly empty states. It includes retry mechanisms for data fetching and direct prompts to create new boards or lists when applicable.
- Database Performance & Integrity for Tags: The backend has been strengthened with new PostgreSQL GIN indexes for faster JSONB tag queries on board tags. Atomic operations for adding and removing tags, along with a new database-level
CHECKconstraint, ensure data integrity and improve concurrency.
Using Gemini Code Assist
The 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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and 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 to provide feedback.
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
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This is an impressive pull request that significantly enhances the application's task management capabilities. The new list view with advanced filtering, sorting, and bulk actions is a huge improvement to the user experience. The addition of the Gantt chart and analytics components provides valuable insights for users.
On the backend, the SQL migration for board tags is well-executed, focusing on performance and atomicity. The command palette is now much more robust, with better loading/error states and an error boundary.
The code quality is high, with good separation of concerns and use of modern React patterns. I've left a few suggestions for minor improvements, mostly around performance, robustness, and navigation consistency. Great work!
| RETURN true; | ||
| EXCEPTION | ||
| -- Only catch the specific exceptions we raise in validate_and_normalize_board_tags | ||
| WHEN SQLSTATE '22000' THEN -- our custom validation errors |
There was a problem hiding this comment.
The EXCEPTION block is configured to catch SQLSTATE '22000', which corresponds to data_exception. However, the RAISE EXCEPTION statements in the validate_and_normalize_board_tags function do not specify an ERRCODE, so they will default to P0001 (raise_exception). This means this EXCEPTION block may not catch the intended validation errors.
To fix this, you could change WHEN SQLSTATE '22000' to WHEN raise_exception, which is the default for RAISE statements without a specific error code.
WHEN raise_exception THEN -- Catches default RAISE EXCEPTION errors| const priorityLabels = { | ||
| 1: 'High', | ||
| 2: 'Medium', | ||
| 3: 'Low', | ||
| }; |
There was a problem hiding this comment.
The priorityLabels object is being created inside the map() function, which means it's recreated for every priority item on every render. This is inefficient, especially if the list of priorities grows.
For better performance and code clarity, you can define it once outside the map() callback, for example, at the component level or right before the return statement of the PopoverContent's child function.
| tasks: Task[]; | ||
| }>({ | ||
| queryKey: ['tasks', wsId, selectedBoardId, selectedListId], | ||
| queryFn: async () => { | ||
| if (!selectedBoardId && !selectedListId) return []; | ||
| if (!selectedBoardId && !selectedListId) return { tasks: [] }; |
There was a problem hiding this comment.
This is a good fix. The previous code return [] would cause a TypeError when useQuery's result is accessed via .tasks, as an array doesn't have that property. Returning an object with an empty tasks array { tasks: [] } makes the return type consistent and prevents runtime errors.
| variant="outline" | ||
| size="sm" | ||
| onClick={() => { | ||
| const wsId = window.location.pathname.split('/')[1]; | ||
| window.location.href = `/${wsId}/tasks/boards`; | ||
| }} | ||
| > | ||
| <Plus className="h-4 w-4 mr-2" /> | ||
| Create Board |
There was a problem hiding this comment.
Using window.location.href causes a full page reload, which can be a jarring user experience. Since useRouter is available in this component, you can use router.push() for a smoother client-side navigation. This also allows you to close the command palette programmatically after navigation.
<Button
variant="outline"
size="sm"
onClick={() => {
router.push(`/${wsId}/tasks/boards`);
setOpen(false);
}}
>
<Plus className="h-4 w-4 mr-2" />
Create Board
</Button>| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| onClick={() => { | ||
| // Navigate to boards page to create new board | ||
| const wsId = window.location.pathname.split('/')[1]; | ||
| window.location.href = `/${wsId}/tasks/boards`; | ||
| }} | ||
| className="gap-2" | ||
| > | ||
| <Plus className="h-3 w-3" /> | ||
| Create Board | ||
| </Button> |
There was a problem hiding this comment.
Using window.location.href causes a full page reload. It's better to handle navigation in the parent component (CommandPalette) which has access to the Next.js router and can close the palette.
Consider adding an onCreateBoard prop to this component and calling it onClick. The parent can then implement the client-side navigation.
Example in BoardNavigationProps:
onCreateBoard: () => void;Example in the Button:
onClick={props.onCreateBoard}
No description provided.