improvement(ui/ux): workflow, search modal #729
Conversation
emir-karabeg
changed the title
|
✅ No security or compliance issues detected. Reviewed everything up to 7ba407b. Security Overview
Detected Code ChangesThe diff is too large to display a summary of code changes. Reply to this PR with |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR implements substantial UI/UX improvements across several key areas of the workspace interface. The changes focus on creating a more intuitive and responsive user experience while maintaining code quality and performance.
Key improvements include:
-
Input Field Standardization: Replaced custom Input components with native HTML inputs across folder and workflow renaming interfaces, with proper attributes for text editing behavior.
-
Workflow Color System: Restructured the WORKFLOW_COLORS array with better categorization and switched to random color selection for better visual distribution.
-
Folder Tree Enhancements:
- Added auto-expansion of folders during workflow navigation
- Limited folder nesting to 2 levels for maintainability
- Improved drag-and-drop validation and feedback
-
Search Modal Improvements:
- Added workspace and workflow navigation support
- Implemented comprehensive keyboard navigation
- Enhanced accessibility with proper keyboard shortcuts
-
State Management: Added safeguards against concurrent operations in workspace/workflow creation to prevent race conditions.
Confidence score: 4.5 /5
- This PR is very safe to merge as it focuses on UI improvements with minimal risk to core functionality
- The score reflects the thorough implementation of UI/UX improvements with proper error handling and validations
- The template-card.tsx changes should be carefully reviewed for potential edge cases in block icon rendering
9 files reviewed, 3 comments
Edit PR Review Bot Settings | Greptile
| className={cn( | ||
| 'h-8 flex-1 justify-center gap-2 rounded-[8px] font-medium text-muted-foreground text-xs hover:bg-secondary hover:text-muted-foreground', | ||
| 'h-8 flex-1 justify-center gap-2 rounded-[8px] font-medium text-muted-foreground text-xs transition-colors hover:bg-muted-foreground/10 hover:text-muted-foreground', | ||
| !userPermissions.canAdmin && 'cursor-not-allowed opacity-50' | ||
| )} |
There was a problem hiding this comment.
style: Consider extracting these common button styles into a shared class or component to maintain consistency and reduce duplication
| data: any | ||
| section: string |
There was a problem hiding this comment.
style: data: any type used in navigatable items. Consider defining specific types for each item category
| const handleItemSelection = useCallback( | ||
| (item: (typeof navigatableItems)[0]) => { | ||
| switch (item.type) { | ||
| case 'workspace': | ||
| if (item.data.isCurrent) { | ||
| onOpenChange(false) | ||
| } else { | ||
| handleNavigationClick(item.data.href) | ||
| } | ||
| break | ||
| case 'workflow': | ||
| if (item.data.isCurrent) { | ||
| onOpenChange(false) | ||
| } else { | ||
| handleNavigationClick(item.data.href) | ||
| } | ||
| break | ||
| case 'page': | ||
| handlePageClick(item.data.href) | ||
| break | ||
| case 'doc': | ||
| handleDocsClick(item.data.href) | ||
| break | ||
| } | ||
| }, |
There was a problem hiding this comment.
style: Large switch statement with repeated logic for workspace/workflow. Extract common navigation logic into separate function
| const handleItemSelection = useCallback( | |
| (item: (typeof navigatableItems)[0]) => { | |
| switch (item.type) { | |
| case 'workspace': | |
| if (item.data.isCurrent) { | |
| onOpenChange(false) | |
| } else { | |
| handleNavigationClick(item.data.href) | |
| } | |
| break | |
| case 'workflow': | |
| if (item.data.isCurrent) { | |
| onOpenChange(false) | |
| } else { | |
| handleNavigationClick(item.data.href) | |
| } | |
| break | |
| case 'page': | |
| handlePageClick(item.data.href) | |
| break | |
| case 'doc': | |
| handleDocsClick(item.data.href) | |
| break | |
| } | |
| }, | |
| const handleNavigationItem = useCallback( | |
| (item: WorkspaceItem | WorkflowItem) => { | |
| if (item.isCurrent) { | |
| onOpenChange(false) | |
| } else { | |
| handleNavigationClick(item.href) | |
| } | |
| }, | |
| [handleNavigationClick, onOpenChange] | |
| ) | |
| const handleItemSelection = useCallback( | |
| (item: (typeof navigatableItems)[0]) => { | |
| switch (item.type) { | |
| case 'workspace': | |
| case 'workflow': | |
| handleNavigationItem(item.data as WorkspaceItem | WorkflowItem) | |
| break | |
| case 'page': | |
| handlePageClick(item.data.href) | |
| break | |
| case 'doc': | |
| handleDocsClick(item.data.href) | |
| break | |
| } | |
| }, |
* improvement: workflow colors * fix: workflow rename styling * improvement: no API call on no name change workspace after edit * improvement: added workflow and workspace to search * improvement: folder path opened for current workflow on load * improvement: ui/ux workspace selector * improvement: search modal keyboard use
Description
Improved the UI/UX for workflow colors, renaming interaction, folder paths, and search modal.
Checklist:
bun run test)Security Considerations: