Skip to content

feat: implement VersionSelector component #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jun 7, 2025
Merged

feat: implement VersionSelector component #99

merged 1 commit into from
Jun 7, 2025

Conversation

nullcoder
Copy link
Owner

Summary

  • Implement VersionSelector dropdown for viewing and switching between gist versions
  • Add human-readable relative timestamp formatting
  • Create both standard and compact variants for different layouts

Changes

  • ✨ Create VersionSelector component with:
    • Dropdown showing version list with timestamps and metadata
    • Current version highlighting with badge
    • Original version marking
    • PIN-edited version indicators with lock icon
    • Relative time formatting ("2 hours ago", "Yesterday", etc.)
    • Support for up to 50 versions in reverse chronological order
  • 📱 Add CompactVersionSelector variant for mobile/space-constrained layouts
  • ⏱️ Implement formatVersionTime utility for human-readable timestamps
  • 🔧 Handle loading and disabled states
  • ♿ Ensure keyboard navigation and proper ARIA labels
  • 🧪 Add comprehensive tests with Radix UI mocks
  • 📚 Create interactive demo page with multiple examples

Technical Details

  • Uses shadcn/ui Select component for dropdown functionality
  • Renamed onVersionChange to onVersionChangeAction to comply with Next.js serialization requirements
  • Added mocks for pointer capture methods to fix Radix UI testing issues
  • Implements spec requirement for version storage structure

Test Plan

  • All unit tests pass
  • Demo page works correctly at /demo/version-selector
  • Dropdown is keyboard navigable
  • Time formatting works correctly for all cases
  • Current/original versions are properly marked
  • PIN-edited versions show lock icon
  • Loading/disabled states work properly
  • Compact variant displays correctly

Closes #71

🤖 Generated with Claude Code

@nullcoder
feat: implement VersionSelector component (#71)
0f09324 
- Add VersionSelector dropdown with version list and timestamps
- Implement relative time formatting (e.g., "2 hours ago", "Yesterday")
- Show current version highlighting and original version badge
- Support PIN-edited version indicators with lock icon
- Add CompactVersionSelector variant for mobile layouts
- Handle loading and disabled states
- Implement keyboard navigation and accessibility
- Add comprehensive tests (with Radix UI mocks)
- Create interactive demo page

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <claude@ghostpaste.dev>
@nullcoder nullcoder merged commit b883792 into main Jun 7, 2025
1 check was pending
@nullcoder nullcoder deleted the feat/version-selector branch June 7, 2025 16:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

feat: create version history dropdown
1 participant
@nullcoder