t0ng7u
def4d16c73
🎨 refactor(ui): harden iframe messaging
...
- useHeaderBar.js
- Wrap handlers with useCallback (logout, language/theme toggle, mobile menu)
- Add null checks and try/catch around iframe postMessage (theme & language)
- Keep minimal effect deps; remove unused StatusContext dispatch
- Logo preload effect safe and scoped to `logo`
- index.jsx
- No functional changes; locale memoization remains stable
Chore:
- Lint clean; no runtime warnings
- Verified no render loops or performance regressions
2025-08-23 03:17:03 +08:00
t0ng7u
61ae19ac82
🌓 feat(ui): add auto theme mode, refactor ThemeToggle, optimize header theme handling
...
- Feature: Introduce 'auto' theme mode
- Detect system preference via matchMedia('(prefers-color-scheme: dark)')
- Add useActualTheme context to expose the effective theme ('light'|'dark')
- Persist selected mode in localStorage ('theme-mode') with 'auto' as default
- Apply/remove `dark` class on <html> and sync `theme-mode` on <body>
- Broadcast effective theme to iframes
- UI: Redesign ThemeToggle with Dropdown items and custom highlight
- Replace non-existent IconMonitor with IconRefresh
- Use Dropdown.Menu + Dropdown.Item with built-in icon prop
- Selected state uses custom background highlight; hover state preserved
- Remove checkmark; selection relies on background styling
- Current button icon reflects selected mode
- Performance: reduce re-renders and unnecessary effects
- Memoize theme options and current button icon (useMemo)
- Simplify handleThemeToggle to accept only explicit modes ('light'|'dark'|'auto')
- Minimize useEffect dependencies; remove unrelated deps
- Header: streamline useHeaderBar
- Use useActualTheme for iframe theme messaging
- Remove unused statusDispatch
- Remove isNewYear from theme effect dependencies
- Home: send effective theme (useActualTheme) to external content iframes
- i18n: add/enhance theme-related copy in locales (en/zh)
- Chore: minor code cleanup and consistency
- Improve readability and maintainability
- Lint clean; no functional regressions
2025-08-23 03:02:35 +08:00
t0ng7u
1074f8acb1
🎛️ refactor: HeaderBar into modular components, add shared skeletons, and primary-colored nav hover
...
Summary
- Split HeaderBar into maintainable components and hooks
- Centralized skeleton loading UI via a reusable SkeletonWrapper
- Improved navigation UX with primary-colored hover indication
- Preserved API surface and passed linters
Why
- Improve readability, reusability, and testability of the header
- Remove duplicated skeleton logic across files
- Provide clearer hover feedback consistent with the theme
What’s changed
- Components (web/src/components/layout/HeaderBar/)
- New container: index.js
- New UI components: HeaderLogo.js, Navigation.js, ActionButtons.js, UserArea.js, MobileMenuButton.js, NewYearButton.js, NotificationButton.js, ThemeToggle.js, LanguageSelector.js
- New shared skeleton: SkeletonWrapper.js
- Updated entry: HeaderBar.js now re-exports ./HeaderBar/index.js
- Hooks (web/src/hooks/common/)
- New: useHeaderBar.js (state and actions for header)
- New: useNotifications.js (announcements state, unread calc, open/close)
- New: useNavigation.js (main nav link config)
- Skeleton refactor
- Navigation.js: replaced inline skeletons with <SkeletonWrapper type="navigation" .../>
- UserArea.js: replaced inline skeletons with <SkeletonWrapper type="userArea" .../>
- HeaderLogo.js: replaced image/title skeletons with <SkeletonWrapper type="image"/>, <SkeletonWrapper type="title"/>
- Navigation hover UX
- Added primary-colored hover to nav items for clearer pointer feedback
- Final hover style: hover:text-semi-color-primary (kept rounded + transition classes)
Non-functional
- No breaking API changes; HeaderBar usage stays the same
- All modified files pass lint checks
Notes for future work
- SkeletonWrapper is extensible: add new cases (e.g., card) in one place
- Components are small and test-friendly; unit tests can be added per component
Affected files (key)
- web/src/components/layout/HeaderBar.js
- web/src/components/layout/HeaderBar/index.js
- web/src/components/layout/HeaderBar/Navigation.js
- web/src/components/layout/HeaderBar/UserArea.js
- web/src/components/layout/HeaderBar/HeaderLogo.js
- web/src/components/layout/HeaderBar/ActionButtons.js
- web/src/components/layout/HeaderBar/MobileMenuButton.js
- web/src/components/layout/HeaderBar/NewYearButton.js
- web/src/components/layout/HeaderBar/NotificationButton.js
- web/src/components/layout/HeaderBar/ThemeToggle.js
- web/src/components/layout/HeaderBar/LanguageSelector.js
- web/src/components/layout/HeaderBar/SkeletonWrapper.js
- web/src/hooks/common/useHeaderBar.js
- web/src/hooks/common/useNotifications.js
- web/src/hooks/common/useNavigation.js
2025-08-18 03:20:56 +08:00
