feat: implement collections system for game organization #1790
Conversation
- Add collection creation, editing, and deletion functionality - Implement drag-and-drop and context menu for adding/removing games - Create dedicated collections page with filtering and sorting - Add navigation between specific collection views - Implement duplicate name validation - Modernize UI with design system alignment - Add Redux slice for state management - Implement LevelDB persistence layer - Create IPC handlers for main/renderer communication - Add modular and reusable components
- Add proper ARIA roles and keyboard navigation support - Remove autoFocus attributes for better accessibility - Add proper label associations for form inputs - Fix React hooks dependencies with useCallback - Ensure all interactive elements have keyboard event handlers - Resolve jsx-a11y linting errors for better compliance
- Fix modal closing prematurely when selecting games in add games modal - Add proper event propagation handling to prevent overlay clicks from closing modal - Improve state management for selected games in collection creation flow - Add success callback to differentiate between cancel and successful game addition - Increase spacing between collection title and filters section on collection detail page - Increase collection card height from 180px to 220px to prevent game preview image cropping - Enlarge game preview images from 28x28px to 32x32px for better visibility - Adjust preview indicator styling to match new image dimensions
- Remove translateY transform that was pushing content outside card boundaries - Use margin-top: auto for proper content positioning - Adjust bottom padding to provide adequate space for preview images - Ensure all game preview images are fully visible within card limits
- Remove unnecessary event handlers from non-interactive div element - Ensure compliance with jsx-a11y accessibility rules - Fix pre-push hook validation issues
… modal - Add stopPropagation to game item click and keydown events - Prevent event bubbling to overlay that was causing modal to close - Maintain proper game selection functionality without modal interference - Ensure accessibility compliance with proper event handling
|
@joseook could you please attach some screenshots? Thank you for your work. |
📸 Screenshots & Analysis1. Collections Page — Empty State
2. Creating a New Collection
3. Add Games to Collection Modal
4. Main Collections View
5. Quick Access via Sidebar
6. Collection Detail Page
7. Editing Collection Details
✅ Implemented
Developer NotesThis feature was built to be scalable and robust. The use of LevelDB ensures that user data is stored efficiently on the client side, and the Redux slice for state management guarantees that the UI remains consistent and responsive across all components. A significant amount of effort was put into fixing UI bugs and improving accessibility to ensure the feature is polished and usable for everyone. The implementation aims to provide a user experience that feels native to the launcher while adding significant organizational value. I'm confident users will find this feature extremely use@ ful for managing their game libraries. 🚀 |
… for all supported languages
|
@thegrannychaseroperation I initially implemented the collections feature with translations only for Portuguese (Brazil) and English, but forgot to add proper translations for the other 28 supported languages. This commit 527c7e4 fixes the translation system and ensures the collections pages, modals, and all related UI elements are properly localized in all supported languages. The collections feature now works seamlessly when users switch between different languages in the settings. |
|
|
@joseook This was magnificent, really very good, it would be cool if it also had an integration with the same game genre filter and markers as on the catalog page, for a quick search to add games through "My Collections" |
3 participants
When submitting this pull request, I confirm the following (please check the boxes):
Fill in the PR content: