- **UI Restructuring:**
- Separate client info into individual table columns (name, ID, description)
- Replace icon-only action buttons with text labels for better UX
- Adjust table scroll width from 1000px to 1200px for new column layout
- Remove unnecessary Tooltip wrappers and Lucide icons (Edit, Key, Trash2)
- **Component Architecture:**
- Extract all modal dialogs into separate reusable components:
* SecretDisplayModal.jsx - for displaying regenerated client secrets
* ServerInfoModal.jsx - for OAuth2 server configuration info
* JWKSInfoModal.jsx - for JWKS key set information
- Simplify main component by removing ~60 lines of inline modal code
- Implement proper state management for each modal component
- **Code Quality:**
- Remove unused imports and clean up component dependencies
- Consolidate modal logic into dedicated components with error handling
- Improve code maintainability and reusability across the application
- **Internationalization:**
- Add English translation for '客户端名称': 'Client Name'
- Remove duplicate translation keys to fix linter warnings
- Ensure all new components support full i18n functionality
- **User Experience:**
- Enhance table readability with dedicated columns for each data type
- Maintain copyable client ID functionality in separate column
- Improve action button accessibility with clear text labels
- Add loading states and proper error handling in modal components
This refactoring improves code organization, enhances user experience, and follows React best practices for component composition and separation of concerns.
- Redesign OAuth consent page layout with centered card design
- Implement GitHub-style authorization flow presentation
- Add application popover with detailed information on hover
- Replace generic icons with scope-specific icons (email, profile, admin, etc.)
- Integrate i18n support for all hardcoded strings
- Optimize permission display with encapsulated ScopeItem component
- Improve visual hierarchy with Semi UI Divider components
- Unify avatar sizes and implement dynamic color generation
- Move action buttons and redirect info to card footer
- Add separate meta information card for technical details
- Remove redundant color styles to rely on Semi UI theming
- Enhance user account section with clearer GitHub-style messaging
- Replace dot separators with Lucide icons for better visual consistency
- Add site logo with fallback mechanism for branding
- Implement responsive design with Tailwind CSS utilities
This redesign significantly improves the OAuth consent experience by following
modern UI patterns and providing clearer information hierarchy for users.
