Unify buttons, cards, headers, toasts, and form treatments across the app so screens feel consistent and are easier to scan on desktop and mobile. Update the broader template set to use the shared UI primitives and responsive spacing patterns introduced in this refresh.
- Interactive tour system with 13-16 comprehensive steps covering all
major features
- Tooltip system for complex features (auto-attaches to elements with
data-tooltip attribute)
- Contextual help buttons on complex features (Kanban, Reports,
Analytics, Invoices, Time Entry)
- Feature discovery system with visual badges for power features
- Enhanced tour content with keyboard shortcuts, tips, and actionable
guidance
- Smart element finding with auto-expansion of hidden dropdowns
- Proper tooltip positioning with viewport-aware placement
### Error Handling Features (Section 15)
- User-friendly error messages for all HTTP status codes (400, 401, 403,
404, 409, 422, 429, 500, 502, 503, 504)
- Retry buttons for failed operations with exponential backoff
- Offline mode indicators with visual queue count display
- Offline operation queue with automatic processing when connection
restored
- Graceful degradation with feature detection and fallbacks
- Recovery options in error pages (Dashboard, Back, Refresh, Login)
- Enhanced error templates with retry buttons and recovery actions
### Technical Improvements
- Added /api/health endpoint for connection monitoring
- Improved fetch interceptor for automatic error handling
- Network status monitoring with periodic health checks
- localStorage-based queue persistence for offline operations
- Enhanced error handler with recovery option mapping
- Fixed Activity model attribute error (activity_type -> entity_type)
### UI/UX Enhancements
- Improved highlight visibility with better mask gradients
- Optimized onboarding performance (reduced from triple to double
requestAnimationFrame)
- Fixed tooltip positioning to use viewport coordinates correctly
- Enhanced mask system with proper cutout revealing focused elements
- Better button event handling with event delegation
- Styled keyboard shortcuts (kbd) and emphasized text (strong) in
tooltips
### Files Changed
- app/static/onboarding.js - Enhanced onboarding system
- app/static/onboarding-enhanced.js - Tooltips, contextual help, feature
discovery
- app/static/error-handling-enhanced.js - Enhanced error handling
- app/utils/error_handlers.py - User-friendly error messages
- app/routes/api.py - Added /api/health endpoint, fixed Activity error
- app/templates/base.html - Added script includes
- app/templates/errors/*.html - Enhanced error templates with recovery
- tests/test_onboarding.py - Onboarding tests
- tests/test_error_handling.py - Error handling tests
### Testing
- Comprehensive unit tests for onboarding features
- Comprehensive unit tests for error handling
- Smoke tests for file existence and integration
- Integrate Flask-Babel and i18n utilities; initialize in app factory
- Add `preferred_language` to `User` with Alembic migration (011_add_user_preferred_language)
- Add `babel.cfg` and `scripts/extract_translations.py`
- Add `translations/` for en, de, fr, it, nl, fi
- Update templates to use `_()` and add language picker in navbar/profile
- Respect locale in routes and context processors; persist user preference
- Update requirements and Docker/Docker entrypoint for Babel/gettext support
- Minor copy and style adjustments across pages
Migration: run `alembic upgrade head`
Dries Peeters