- Fix critical race condition in sync dropdown actions
- Add loading states and spinners for sync operations
- Implement proper event delegation to prevent memory leaks
- Add accessibility attributes (aria-label, aria-haspopup, aria-expanded)
- Add keyboard navigation (Escape to close dropdown)
- Reduce code duplication in sync functions (70% reduction)
- Improve error handling for pricelist badge
- Fix z-index issues in dropdown menu
- Maintain full backward compatibility
Addresses all issues identified in the TODO list and bug reports
- Replace text 'Online/Offline' with SVG icons in sync status
- Change sync button to circular arrow icon
- Add dropdown menu with push changes, full sync, and last sync status
- Add pricelist version badge to configuration page
- Load pricelist version via /api/pricelists/latest on DOMContentLoaded
This completes task 1 of Phase 2.5 (UI Improvements) as specified in CLAUDE.md
- Create htmx-powered partial template for sync status display
- Show Online/Offline indicator with color coding (green/red)
- Display pending changes count badge when there are unsynced items
- Add Sync button to push pending changes (appears only when needed)
- Auto-refresh every 30 seconds via htmx polling
- Replace JavaScript-based sync indicator with server-rendered partial
- Integrate SyncStatusPartial handler with template rendering
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
