feat: UI revamp with modern components and public API integration - #46
Merged
Conversation
added 28 commits
October 6, 2025 10:37
- Replace StyledOcticon with Octicon in Navbar - Replace AvatarPair with AvatarStack in Table - Update ButtonPrimary to Button with variant in Footer - Update Label props to use sx prop - Fix manifest.json with correct icon references - Add rel=noreferrer to external links
- Octicon component doesn't exist in @primer/react v37 - Use icon component directly from @primer/octicons-react
- Fix React Query API to use @tanstack/react-query v5 syntax - Fix use-local-storage-state API usage - Update @primer/react components to v37 API (Grid -> Box, StateLabel -> Label) - Fix axios interceptor types for latest axios version - Remove unused React imports (React 17+ JSX transform) - Add proper typing for component parameters - Fix themes.js import with ts-ignore for JS interop
- Fix use-local-storage-state API usage with correct options object - Fix axios interceptor types compatibility Build now completes successfully with no errors
- Create eslint.config.js for ESLint v9 flat config format - Add required ESLint v9 dependencies (@eslint/js, globals, typescript-eslint) - Fix all TypeScript type errors and lint warnings - Replace @ts-ignore with @ts-expect-error - Fix axios interceptor types with InternalAxiosRequestConfig - Remove unused eslint-disable directives - Add proper types for themes module - Fix ternary expression lint error Build and lint now pass with 0 errors
- The backend API doesn't have a /pending-prs endpoint - Fetch pending PRs directly from GitHub REST API - This eliminates the 404 error when fetching pending PRs
- Use GitHub Search API to fetch PRs from entire organization - Display repository name for each PR - Show PR number along with title - Update PullRequest model to match GitHub Search API response - Fetch up to 100 most recent open PRs across all repos
- Filter out PRs created by dependabot and app/dependabot - Only show human-created pull requests for review
- Replace timeline with modern card grid layout - Add gradient background and hover effects - Improve typography and visual hierarchy - Add dark mode support - Enhance loading and empty states - Add ClockIcon for better time visualization - Make layout responsive for mobile devices - Add smooth animations and transitions - Fix font visibility issues with proper color contrasts
- Move Navbar inside ThemeProvider for proper theme application - Add theme variables for PR section (light/dark mode) - Replace CSS media query dark mode with theme-based styling - Apply theme colors to all headings (h1, h2, h3) - Add proper theme support for PR cards, borders, and shadows - Fix header and footer to respond to theme toggle - All sections now properly switch between light and dark mode
- Remove hardcoded dark background (#24292e) from navbar - Add headerBg, headerText, headerBorder to theme configs - Light mode: white background with dark text - Dark mode: dark background with white text - Apply theme colors to all header links and icons - Fix text visibility issue in light mode
- Fix pagination state management with proper setter - Paginate contributors to show 10 items per page - Use useMemo for efficient pagination calculation - Maintain correct global rank across pages - Hide pagination when only 1 page - Add smooth scroll to top on page change - Redesign points chip with better styling - Add 'pts' suffix and rounded pill design - Increase font size and padding for better visibility
- Add empty placeholder rows when page has fewer than 10 items - Set consistent row height of 73px - Style empty rows with reduced opacity (0.3) - Prevents UI jumping when switching between pages - Provides smooth, professional table appearance
- Empty rows now have identical structure to data rows - Include AvatarStack, Labels with same styling - Use visibility:hidden instead of opacity for proper spacing - Prevents table height jumping between pages - Maintains exact pixel-perfect consistency
- Set table-layout: fixed for consistent column sizing - Define column widths: Rank (10%), Contributor (65%), Points (25%) - Use colgroup to enforce column widths - Prevents columns from resizing based on content - Ensures smooth, stable pagination UX
- Migrated to latest UI components (@primer/react, framer-motion, radix-ui) - Implemented smooth animations and page transitions - Added theme-aware components with light/dark mode support - Created new leaderboard table with improved UX - Added community stats dashboard with responsive grid layout - Implemented pending PRs section with modern card design API Changes: - Using GitHub public REST API (no authentication required) - PRs section now retrieves only PRs from the past 1 year - Rate limit: 60 requests/hour per IP (unauthenticated) - Excludes dependabot PRs automatically Limitations: - Backend changes not fully implemented in leaderboard-api - Frontend directly calls GitHub public API for PRs - Some backend endpoints may require GitHub token configuration Note: PR section filters show only open PRs created within the past year from sliit-foss organization.
- Add missing web-vitals dependency - Create vite-env.d.ts for import.meta.env types and SVG modules - Remove unused LoadingSpinner import from PRList.tsx Fixes GitHub Actions build failures
The CI was failing because pnpm-lock.yaml was out of sync with package.json after adding web-vitals
- Use official pnpm/action-setup action - Update to actions/checkout@v4 and setup-node@v4 - Enable pnpm caching for faster builds - Properly set CI=false as environment variable - Remove unnecessary --if-present flag
- Change postinstall to prepare (standard husky setup) - Add --ignore-scripts flag to pnpm install in CI - This prevents husky from running in CI where git hooks aren't needed
Root cause: lockfile was generated with pnpm 9.14.2 locally but CI was using pnpm 8. The lockfile format changed between versions, causing frozen-lockfile validation to fail. Solution: Update CI to use pnpm v9 to match the lockfile format (lockfileVersion: '9.0')
- Auto-deploy each PR to GitHub Pages subdirectory - Preview URL: https://sliit-foss.github.io/leaderboard/pr-{NUMBER}/ - Auto-cleanup when PR is closed - Comments on PR with preview link - Configurable base path in vite.config.ts
🚀 Preview DeploymentYour PR has been deployed for preview! Preview URL: https://leaderboard.sliitfoss.org/pr-46/ This preview will be updated automatically when you push new commits to this PR. Preview build powered by GitHub Pages |
- Change base path from /leaderboard/pr-X/ to /pr-X/ - Update preview URL to use custom domain: https://leaderboard.sliitfoss.org/pr-X/ - Fixes 404 error on PR preview deployments
- Add verification step to check build output - Configure peaceiris/actions-gh-pages to not exclude assets - Set enable_jekyll: false to prevent Jekyll from ignoring underscore files - Add explicit exclude_assets: '' to ensure no files are filtered
…t deployment The peaceiris action was not deploying the assets directory properly. JamesIves action is more reliable for full directory deployments including all subdirectories.
…lity
- Replace HashRouter with BrowserRouter to support subdirectory deployments
- Add basename prop using import.meta.env.BASE_URL from Vite config
- Enables proper routing for PR previews at /pr-{number}/ paths
- Maintains compatibility with root-level production deployment
icy-r
marked this pull request as draft
October 6, 2025 10:47
- Add .nojekyll to disable Jekyll processing - Add 404.html for client-side routing redirect - Add redirect script to index.html to handle URL restoration - This enables BrowserRouter to work correctly at /pr-46/ path
The redirect script needs to be in the root index.html (not public/) since Vite uses that as the template during build.
The custom domain (leaderboard.sliitfoss.org) is configured to serve from the main branch using GitHub Pages artifacts deployment. This prevents subdirectory deployments to the gh-pages branch from working. Changes: - Updated PR preview workflow to only build (no deployment) - Removed BrowserRouter basename (not needed without subdirectory deployment) - Updated workflow comment to explain testing instructions - Removed .nojekyll and 404.html (not needed for main deployment) PR contributors should test locally using 'pnpm dev' before merging.
|
- Custom domain configuration prevents subdirectory deployments - PRs should be tested locally before merging - Production deployment to leaderboard.sliitfoss.org happens automatically on merge to main
- Commented out StatsDashboard component (hardcoded data) - Changed avatar display from AvatarStack to single avatar with GitHub badge overlay - GitHub icon now appears as small badge in bottom-left corner of user avatar - Improved visual hierarchy and reduced redundant icon display
SayuruRehan
marked this pull request as ready for review
October 8, 2025 07:04
SayuruRehan
approved these changes
Oct 8, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete UI overhaul with modern components, smooth animations, and improved UX.
Key Changes
API Integration
Limitations
Stats