Develop #44
Develop #44
Conversation
- Add horizontal scroll navigation with chevron buttons for AdminTabs - Implement flex-1 layout for tabs to fill available width on large screens - Add smooth scrolling and scroll state detection for small screens - Ensure tab borders align with main content container - Update all tab components (AdminTabs, ApiDocsTabs, ConsumptionTabs) for consistency 🤖 Generated with Claude Code Co-Authored-By: Claude <[email protected]>
- Add horizontal scroll navigation with chevron buttons for AdminTabs - Implement flex-1 layout for tabs to fill available width on large screens - Add smooth scrolling and scroll state detection for small screens - Ensure tab borders align with main content container - Update all tab components (AdminTabs, ApiDocsTabs, ConsumptionTabs) 🤖 Generated with Claude Code Co-authored-by: Clément VALENTIN <[email protected]> Co-authored-by: Claude <[email protected]>
…g UI (#43) Fixed NameError in /admin/stats endpoint caused by missing cache_service import. Added proper loading state using LoadingOverlay component with blur effect. Extended LoadingOverlay to support 'admin' data type with appropriate messages. 🤖 Generated with Claude Code Co-authored-by: Clément VALENTIN <[email protected]> Co-authored-by: Claude <[email protected]>
There was a problem hiding this comment.
Pull request overview
This PR enhances the admin dashboard with loading and error states, and improves the layout consistency of tab navigation components across the application.
Key Changes:
- Added loading and error states to the Admin page with proper visual feedback
- Enhanced AdminTabs with horizontal scrolling functionality for better responsiveness
- Standardized tab component layouts (ConsumptionTabs, ApiDocsTabs, AdminTabs) with consistent container structure
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/src/pages/Admin.tsx | Added loading state with LoadingOverlay component and error state display for better UX when fetching admin statistics |
| apps/web/src/components/LoadingOverlay.tsx | Extended dataType union to include 'admin' with appropriate French loading messages |
| apps/web/src/components/ConsumptionTabs.tsx | Refactored layout with standardized container structure and responsive padding |
| apps/web/src/components/ApiDocsTabs.tsx | Refactored layout with standardized container structure and responsive padding |
| apps/web/src/components/AdminTabs.tsx | Added horizontal scroll functionality with navigation buttons, checkScroll logic, and standardized container layout |
| apps/web/package-lock.json | Removed unused tree-sitter dependencies |
| apps/api/src/routers/admin.py | Added cache_service to imports (already used throughout the file) |
Files not reviewed (1)
- apps/web/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <button | ||
| onClick={() => scroll('left')} | ||
| className="absolute left-0 top-0 bottom-0 z-10 px-2 bg-gradient-to-r from-white dark:from-gray-800 to-transparent flex items-center" | ||
| aria-label="Défiler vers la gauche" | ||
| > | ||
| <ChevronLeft size={20} className="text-gray-500 dark:text-gray-400" /> | ||
| </button> |
There was a problem hiding this comment.
The scroll buttons lack keyboard accessibility. These buttons should be focusable and respond to keyboard events. Consider adding tabIndex={0} and onKeyDown handlers to support keyboard navigation, ensuring users who rely on keyboard navigation can scroll through tabs.
| <button | ||
| onClick={() => scroll('right')} | ||
| className="absolute right-0 top-0 bottom-0 z-10 px-2 bg-gradient-to-l from-white dark:from-gray-800 to-transparent flex items-center" | ||
| aria-label="Défiler vers la droite" | ||
| > | ||
| {tab.name} | ||
| </Link> | ||
| ) | ||
| })} | ||
| </nav> | ||
| <ChevronRight size={20} className="text-gray-500 dark:text-gray-400" /> | ||
| </button> |
There was a problem hiding this comment.
The scroll buttons lack keyboard accessibility. These buttons should be focusable and respond to keyboard events. Consider adding tabIndex={0} and onKeyDown handlers to support keyboard navigation, ensuring users who rely on keyboard navigation can scroll through tabs.
| checkScroll() | ||
| window.addEventListener('resize', checkScroll) | ||
| return () => window.removeEventListener('resize', checkScroll) | ||
| }, []) |
There was a problem hiding this comment.
The useEffect hook is missing visibleTabs in its dependency array. The checkScroll function should re-run when the number of visible tabs changes (e.g., when permissions change), as this affects whether scrolling is needed. Add visibleTabs to the dependency array to ensure scroll state is recalculated when tabs change.
| }, []) | |
| }, [visibleTabs]) |
The previous package-lock.json was missing tree-sitter dependencies ([email protected] and [email protected]), causing `npm ci` to fail during Docker builds with the error "package.json and package-lock.json are not in sync". This regenerates the lock file to include all required dependencies. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Clément VALENTIN <[email protected]> Co-authored-by: Claude <[email protected]>
No description provided.