- Resolve timezone alias to main timezone in TimezoneSelector before passing to TimezoneAutocomplete
- Resolve timezone in EventModal useState initialization to ensure correct timezone display
- Sync resolved timezone when modal opens or Redux timezone changes
- Ensure timezone is always resolved in resetAllStateToDefault callback
- Fix issue where TimezoneAutocomplete doesn't show correct timezone on first load
- Create new TimezoneAutocomplete component for shared timezone selection logic
- Update TimezoneSelector to use the new component
- Replace inline Autocomplete in EventFormFields with TimezoneAutocomplete
- Replace inline Autocomplete in EventModal with TimezoneAutocomplete
- Reduce code duplication and improve maintainability
- Replace timezone Select field with Autocomplete in EventModal and EventFormFields
- Add search functionality for timezones with text input
- Add timezone icon to match PeopleSearch component style
- Remove 'Mark as important' checkbox from EventModal (re showup when rebase)
- Remove gap space in description when desc field show up
- Add expand and close icons to ResponsiveDialog header in normal mode
- Change 'Show More' button to 'More options' with Add icon
- Hide Cancel button in normal mode, show only in extended mode
- Add showHeaderActions prop to ResponsiveDialog for UI control
- Preserve EventDisplayPreview modal with old UI (no header icons)
- Update all affected test cases to match new UI behavior
- Fix allday toggle: when unchecking allday, set end date = start date with rounded time (30min intervals)
- Fix ResponsiveDialog CSS: set height only for expanded mode, remove maxHeight from normal mode
- Show repeat info when editing solo instance of recurring event (checkbox checked and disabled)
- Clear old event UI when updating recurring event allday status
- Replace refreshCalendars() with optimistic Redux updates for update all instances
- Add rollback mechanism: revert to old data if API fails
- Add notification placeholder function (ready for future toast implementation)
- Update single instance also uses optimistic update + rollback pattern
- Remove unnecessary refreshCalendars and getCalendarRange imports
- No view reload, instant UI updates, smooth UX
Performance improvements:
- API calls reduced from N+1 to 1 (eliminated fetch for all calendars)
- UI update time reduced from ~1s to <50ms
- Consistent behavior across all update operations
- Replace regex patterns with exact equality assertions where possible
- Update 'toggle all-day' test to use exact date value instead of regex
- Keep regex for time range in preview as format varies by implementation
- Address Ben concern about meaningful test assertions
- Use direct API call to delete recurring events instead of going through Redux store
- Construct event URL directly for more reliable deletion
- Add error handling and small delay to ensure complete deletion
- Clean up all instances from store after deletion
- Fix handling of solo vs. all event updates for recurring events
- Add calendar refresh for update all events
- Disable repeat option when editing a single occurrence (solo mode)
- Fix event recurrence editing in modals to match main branch
- Properly link EventDisplayPreview with EventUpdateModal for typeOfAction
1. Replace old EventDisplayPreview with main's new Figma UI
- Use ResponsiveDialog instead of Popover
- Keep file at features/Events/ location (not components/Event/)
- Integrate InfoRow, EditModeDialog components from main
- Fix all imports to work with new location
2. Add EventUpdateModal integration
- Edit icon now opens EventUpdateModal instead of EventDisplayModal
- EventUpdateModal uses shared EventFormFields component
3. Fix imports and exports
- Use default import for ResponsiveDialog
- Use named import for EditModeDialog
- Fix anchorPosition to be optional with default value
4. Performance improvement
- Open EventUpdateModal immediately without waiting for API
- Let modal fetch fresh data in background via useEffect
5. Fix Checkbox styling warning
- Use sx prop instead of style for nested MUI selectors
- Fix 'Unsupported style property &.Mui-checked' console warning
- Add formatDateTimeInTimezone() helper to format dates in event's original timezone
- Fix EventUpdateModal to display event times in original timezone instead of browser timezone
- Fix EventModal (duplicate event) with same timezone handling
- Update EventDisplay tests to use flexible date pattern
- Remove 'important' field from EventFormFields component and all event modals
- Remove all console.log statements from event create/update flow
- Fix import issues and type compatibility in EventModal
- ux: close Update modal immediately on Save; run API in background
- fix: remove stale single-instance when converting to repeating
- test: adjust EventDisplay expectations
- refactor: share form via components/Event/EventFormFields (used by Create/Update)
- Replace 'Meeting link generated' text with 'Join Visio conference' button
- Button opens video conference link in new tab when clicked
- Use contained variant styling to match Save button appearance
- Maintain copy and delete functionality for meeting links
- Fix calendarUtils.ts null safety for calendars[id] access
- Update video conference link to be added on line 2 instead of line 3
- Update regex in handleDeleteVideoConference to match new format
- Update all test cases for videoConferenceUtils to match new format
- Add null checks in updateCalsDetails function
- Update RepeatEvent.test.tsx to use correct selectors and text matching
- Update EventDisplay.test.tsx to use 'Notification' instead of 'Alarm'
- Update EventModal.test.tsx to use new label names and fix description input tests
- Update Calendar.test.tsx to use new placeholder text 'Start typing a name or email'
- Fix EventDisplay.tsx to use 'Notification' label consistently
- Rename 'Alarm' to 'Notification' for better clarity
- Rename 'Attendees' to 'Participants' with updated placeholder text
- Replace 'Visibility' dropdown with 'Visible to' toggle buttons (All/Participants)
- Remove CONFIDENTIAL option, keep only PUBLIC and PRIVATE
- Add icons (PublicIcon/LockIcon) with fixed sizing for toggle buttons
- Rename 'Show as' to 'Show me as'
- Fix ResponsiveDialog scroll bar positioning in expanded mode
- Update PeopleSearch placeholder to 'Start typing a name or email'
- Update hover effect to highlight 30-minute time slots instead of 1-hour slots
- Reset slot label opacity to full visibility when viewing other weeks/days
Implemented a new ResponsiveDialog component and redesigned EventModal
with better UX for both normal and extended modes.
New Features:
- Created reusable ResponsiveDialog component (src/components/Dialog/)
* Normal mode: 685px centered popup
* Extended mode: fullscreen with 90px header preservation
* Auto spacing via MUI Stack (16px normal, 24px extended)
* Back arrow navigation in extended mode
* No backdrop/shadow in extended mode for seamless integration
* Configurable props for all dimensions and behaviors
EventModal Improvements:
- Replaced native checkbox with MUI Checkbox component
- Migrated from Popover to ResponsiveDialog
- Reorganized field layout
=> Comprehensive documentation in Dialog/README.md
Note: RepeatEvent integration tests need additional refactoring (tracked separately)
Build Configuration
- Add Stylus support via @rsbuild/plugin-stylus
- Add SVGR support via @rsbuild/plugin-svgr
- Update rsbuild.config.ts with custom configuration
- Add historyApiFallback for SPA routing
ESLint Configuration
- Create .eslintrc.json with react-app configuration
- Remove eslintConfig from package.json
CSS to Stylus Migration
Convert all 5 CSS files to Stylus (.styl) format:
- src/App.css to src/App.styl
- src/index.css to src/index.styl
- src/components/Calendar/Calendar.css to src/components/Calendar/Calendar.styl
- src/components/Calendar/CustomCalendar.css to src/components/Calendar/CustomCalendar.styl
- src/components/Menubar/Menubar.css to src/components/Menubar/Menubar.styl
- Update all imports from .css to .styl
- Preserve all styling rules and values
MUI Styling Cleanup
- Replace all MUI sx props with standard style props across 15+ components
- Convert MUI spacing units (mr: 2 to marginRight: 16px)
- Convert MUI shorthand props (p: 2 to padding: 16px, mb: 1 to marginBottom: 8px)
- Remove MUI-specific syntax (&.Mui-checked selectors)
- Maintain exact visual appearance
FullCalendar Fixes
- Comment out problematic CSS rule in CustomCalendar.styl
- Fix display issues with timegrid slot labels
Files Modified
- Config: rsbuild.config.ts, .eslintrc.json, package.json
- Styling: 5 CSS to Stylus conversions, 15+ component sx to style updates
- Components: All components using MUI sx props updated
Development Workflow
- Continue using existing development commands
- Stylus files are now the source of truth for styling
- MUI components work with standard style props
- ESLint uses familiar react-app rules
Dependencies Added
- @rsbuild/plugin-stylus
- @rsbuild/plugin-svgr
* feat: prepare project for cozy-ui migration
Build Configuration
- Add Stylus support via @rsbuild/plugin-stylus
- Add SVGR support via @rsbuild/plugin-svgr
- Update rsbuild.config.ts with custom configuration
- Add historyApiFallback for SPA routing
ESLint Configuration
- Create .eslintrc.json with react-app configuration
- Remove eslintConfig from package.json
CSS to Stylus Migration
Convert all 5 CSS files to Stylus (.styl) format:
- src/App.css to src/App.styl
- src/index.css to src/index.styl
- src/components/Calendar/Calendar.css to src/components/Calendar/Calendar.styl
- src/components/Calendar/CustomCalendar.css to src/components/Calendar/CustomCalendar.styl
- src/components/Menubar/Menubar.css to src/components/Menubar/Menubar.styl
- Update all imports from .css to .styl
- Preserve all styling rules and values
MUI Styling Cleanup
- Replace all MUI sx props with standard style props across 15+ components
- Convert MUI spacing units (mr: 2 to marginRight: 16px)
- Convert MUI shorthand props (p: 2 to padding: 16px, mb: 1 to marginBottom: 8px)
- Remove MUI-specific syntax (&.Mui-checked selectors)
- Maintain exact visual appearance
FullCalendar Fixes
- Comment out problematic CSS rule in CustomCalendar.styl
- Fix display issues with timegrid slot labels
Files Modified
- Config: rsbuild.config.ts, .eslintrc.json, package.json
- Styling: 5 CSS to Stylus conversions, 15+ component sx to style updates
- Components: All components using MUI sx props updated
Development Workflow
- Continue using existing development commands
- Stylus files are now the source of truth for styling
- MUI components work with standard style props
- ESLint uses familiar react-app rules
Dependencies Added
- @rsbuild/plugin-stylus
- @rsbuild/plugin-svgr
- Replace calendar.svg with header-logo.svg for new Twake Calendar branding
- Remove text elements from MainTitle component, keeping only logo
- Update import path to use new header-logo.svg file
- Sync calendar view state between Calendar and Menubar components
- Fix Redux serialization errors by using string dates instead of Date objects
- Add null checks for eventResize handler to prevent undefined errors
- Implement dynamic slot label dimming near current time indicator
- Slot labels fade to opacity 0.2 when now indicator is within 15 minutes
- Add smooth CSS transitions for better user experience
- Handle edge cases around midnight for proper time calculation
- Update slot label visibility on view changes and time updates
lenhanphung