t0ng7u
24fbd0bfb0
🎛️ 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
t0ng7u
0ff0027aa6
♻️ Refactor: Move token unit toggle from table header to filter settings
...
- Remove K/M switch from model price column header in pricing table
- Add "Display in K units" option to pricing display settings panel
- Update parameter passing for tokenUnit and setTokenUnit across components:
- PricingDisplaySettings: Add tokenUnit toggle functionality
- PricingSidebar: Pass tokenUnit props to display settings
- PricingFilterModal: Include tokenUnit in mobile filter modal
- Enhance resetPricingFilters utility to reset token unit to default 'M'
- Clean up PricingTableColumns by removing unused setTokenUnit parameter
- Add English translation for "按K显示单位" as "Display in K units"
This change improves UX by consolidating all display-related controls
in the filter settings panel, making the interface more organized and
the token unit setting more discoverable alongside other display options.
Affected components:
- PricingTableColumns.js
- PricingDisplaySettings.jsx
- PricingSidebar.jsx
- PricingFilterModal.jsx
- PricingTable.jsx
- utils.js (resetPricingFilters)
- en.json (translations)
2025-07-24 17:10:08 +08:00
t0ng7u
0990561f23
🎨 chore: integrate ESLint header automation with AGPL-3.0 notice
...
• Added `.eslintrc.cjs`
- Enables `header` + `react-hooks` plugins
- Inserts standardized AGPL-3.0 license banner for © 2025 QuantumNous
- JS/JSX parsing & JSX support configured
• Installed dev-deps: `eslint`, `eslint-plugin-header`, `eslint-plugin-react-hooks`
• Updated `web/package.json` scripts
- `eslint` → lint with cache
- `eslint:fix` → auto-insert/repair license headers
• Executed `eslint --fix` to prepend license banner to all JS/JSX files
• Ignored runtime cache
- Added `.eslintcache` to `.gitignore` & `.dockerignore`
Result: consistent AGPL-3.0 license headers, reproducible linting across local dev & CI.
2025-07-19 03:30:44 +08:00
t0ng7u
217c657e2b
🚀 feat(web/channels): Deep modular refactor of Channels table
...
1. Split monolithic `ChannelsTable` (2200+ LOC) into focused components
• `channels/index.jsx` – composition entry
• `ChannelsTable.jsx` – pure `<Table>` rendering
• `ChannelsActions.jsx` – bulk & settings toolbar
• `ChannelsFilters.jsx` – search / create / column-settings form
• `ChannelsTabs.jsx` – type tabs
• `ChannelsColumnDefs.js` – column definitions & render helpers
• `modals/` – BatchTag, ColumnSelector, ModelTest modals
2. Extract domain hook
• Moved `useChannelsData.js` → `src/hooks/channels/useChannelsData.js`
– centralises state, API calls, pagination, filters, batch ops
– now exports `setActivePage`, fixing tab / status switch errors
3. Update wiring
• All sub-components consume data via `useChannelsData` props
• Adjusted import paths after hook relocation
4. Clean legacy file
• Legacy `components/table/ChannelsTable.js` now re-exports new module
5. Bug fixes
• Tab switching, status filter & tag aggregation restored
• Column selector & batch actions operate via unified hook
This commit completes the first phase of modularising the Channels feature, laying groundwork for consistent, maintainable table architecture across the app.
2025-07-18 21:05:36 +08:00
t0ng7u