Refactor issues page#12
Merged
Merged
Conversation
Add comprehensive design document for updating the CSV parser and UI to support the new 3-column CSV format with level field. Design includes: - Type definitions for level field - CSV parser updates with header support - Filtering logic and helpers - UI changes with color-coded level badges Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add detailed step-by-step implementation plan with: - Type definition updates - CSV parser changes with header support - Filtering logic enhancements - IssueTable UI updates with color-coded badges - Manual testing procedures Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add level field to support new CSV format with difficulty levels (Beginner/Intermediate/Advanced). Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Pass through level field when creating EnrichedIssue objects to fix TypeScript compilation errors. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Parse CSV with header row using Papa.parse header mode - Extract repo, level, issueId from named columns - Add validation for level values - Update row numbering to account for header row Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add level field to FilterOptions interface - Add level filtering logic to filterIssues function - Add getUniqueLevels helper sorted by difficulty order Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add level filter dropdown sorted by difficulty - Add level column with color-coded badges - Beginner: green, Intermediate: blue, Advanced: orange - Import and use getUniqueLevels helper Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add level field (Beginner/Intermediate/Advanced) to all 86 issues with proper CSV header format (repo,level,issueId). Distribution: - 43 Beginner issues - 39 Intermediate issues - 4 Advanced issues Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Remove author filtering functionality to simplify the issues table: - Remove author field from FilterOptions interface - Remove author filtering logic from filterIssues - Remove getUniqueAuthors helper function - Remove author filter dropdown from UI - Remove Author column from table Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add caching mechanism to reduce GitHub API calls: - Cache enriched issues in localStorage for 10 minutes - Auto-load from cache if available and fresh - Add refresh button to manually reload data - Display last updated timestamp with relative time - Show loading state during refresh Benefits: - Reduces API rate limit usage - Faster page loads on repeat visits - User control over data freshness Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add label filtering to help users find issues by specific labels: - Add label field to FilterOptions interface - Add label filtering logic that checks if issue has selected label - Add Label filter dropdown to UI with all unique labels - Import and use getUniqueLabels helper function Benefits: - Users can filter by labels like "good first issue", "bug", "documentation" - Better issue discovery and targeting - Combines with existing filters for powerful search Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Update Refresh button to use consistent BUI design system styles: - Use BUI color variables (bg-app, border-1, fg-primary) - Match padding (12px 24px) and border radius (8px) - Add border for better visual consistency - Add hover effect (changes to bg-info) - Use opacity for disabled state instead of color change - Increase font size to 16px to match Reset button Provides consistent button styling across the application. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Make the Refresh button more compact: - Reduce padding from 12px 24px to 8px 16px - Reduce border radius from 8px to 6px - Reduce font size from 16px to 14px Still maintains BUI design system styling with hover effects and proper color variables. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add date-based access control with animated countdown: - Create CountdownModal component with animated countdown timer - Display days, hours, minutes, seconds until March 26, 2026 - Block data loading until target date - Add admin bypass with ?admin=true query parameter - Update useIssues hook to accept shouldLoad parameter - Animated pulse effect on countdown numbers - Full-screen modal overlay with darkened background Access control: - Before March 26, 2026: Show countdown modal, no data loads - After March 26, 2026: Normal access, data loads - With ?admin=true: Bypass countdown, full access anytime Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add helpful link to guide users while waiting: - Link to /getting-started page with clear call-to-action - Styled with BUI blue color and underline - Hover effect for interactivity - Encourages users to prepare while countdown runs Helps users be ready for ContribFest by completing setup steps before the issues page becomes available. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add line break between 'completed' and 'the' to prevent awkward text wrapping on the Getting Started link. Now reads: "While you wait make sure you've completed the Getting Started checklist!" Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace digital countdown boxes with circular progress indicators: - SVG-based circular progress rings for each time unit - Progress fills clockwise like an analog clock - Each unit shows percentage of max value (days/365, hours/24, etc.) - Smooth 1-second transitions between values - Clean, minimalist design with centered numbers - Light gray background ring with blue progress stroke - Larger circles (120px) for better visibility Visual improvements: - More elegant and modern appearance - Better communicates time progression - Intuitive clock-like metaphor - Removed pulsing animation for cleaner look Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace circular progress with retro flip clock style: - Square flip cards for each digit (60x80px) - Dark background cards (#2d2d2d) with white numbers - 3D flip animation when numbers change - Horizontal divider line mimicking mechanical flip clocks - Two-digit display for each time unit - Smooth rotateX animation (0.6s ease-out) Design inspired by classic TWEMCO flip clocks: - Nostalgic mechanical clock aesthetic - Cards "flip down" to reveal new numbers - Realistic depth with perspective and shadows - Clean, retro typography Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Track previous time values with useRef to compare against current - Add shouldFlip prop to FlipCard component for conditional animation - Compare digit-by-digit in TimeUnit to determine which cards should flip - Fix useEffect dependency array to prevent interval memory leak This ensures only the digits that are actually changing will flip, while static digits remain still, creating a more natural countdown animation similar to TWEMCO flip clocks. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Use functional form of setState to get actual current time value instead of stale closure value. This ensures prevTimeRef.current is updated with the real previous value, preventing cards from flipping unnecessarily. The issue was that the interval callback captured the initial timeRemaining value, so prevTimeRef was always being set to that stale value rather than the actual current state. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Increase modal maxWidth from 600px to 720px to properly accommodate the four time units (Days, Hours, Minutes, Seconds) with their flip cards and spacing without overflowing. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Wrap BackstageLogo in Link component pointing to "/" so users can click the logo to return to the welcome page. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace unescaped apostrophe in "you've" with ' to satisfy react/no-unescaped-entities ESLint rule. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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
1 participant
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.
No description provided.