- Modified the selection display logic in the DropdownSelect component to show selected items in the order of the dropdown options, rather than the order of user selection.
- This change aims to provide a consistent and predictable user experience, reducing confusion caused by varying display orders.
- Updated the relevant documentation to reflect this new behavior and its rationale.
Made-with: Cursor
- Created a comprehensive plan document detailing the enhancements made to the V2Select multi-select dropdown, including the new display format for selected items and tooltip functionality.
- Added context notes and a checklist to track implementation progress and ensure all aspects of the feature are covered.
- Documented the rationale behind design decisions, including the need for improved user experience and visibility of selected items.
Made-with: Cursor
- Enhanced the display of selected items in the V2Select component to show labels in a comma-separated format, improving user visibility without needing to open the dropdown.
- Implemented tooltip functionality that activates only when the text is truncated, allowing users to see all selected items at a glance.
- Updated the DropdownSelect component to ensure consistent behavior across all screens using this component.
- Added necessary imports and state management for tooltip visibility and text truncation detection.
Made-with: Cursor
- Changed the modal validation mechanism to focus on the first empty required field and display a toast notification prompting the user to fill it.
- Removed the disabling of the save button, ensuring it remains active regardless of validation state.
- Enhanced visual feedback with a shake animation for empty fields and a red border to indicate errors.
- Updated the documentation to reflect the new validation flow and requirements.
Made-with: Cursor
- Updated modal button handling to disable all buttons by default, with exceptions for specific button types (e.g., cancel, close, delete).
- Introduced a new validation mechanism that visually indicates empty required fields with red borders and error messages after a delay.
- Improved the `useDialogAutoValidation` hook to manage button states based on field validation, ensuring a smoother user experience.
- Added CSS animations to prevent flickering during validation state changes.
Made-with: Cursor
- Introduced a new hook `useDialogAutoValidation` to handle automatic validation of required fields in modals.
- Added visual feedback for empty required fields, including red borders and error messages.
- Disabled action buttons when required fields are not filled, enhancing user experience.
- Updated `DialogContent` to integrate the new validation logic, ensuring that only user mode modals are validated.
Made-with: Cursor
- Integrated Zustand for improved state management across components.
- Updated modal components to handle visibility based on active tabs, ensuring better user experience.
- Refactored various components to utilize the new tab store for managing active tab states.
- Enhanced number formatting utility to streamline number and currency display across the application.
Made-with: Cursor
syc0123