Skip to content

feat(ui): Add favorites/pinned applications with localStorage persistence#448

Merged
ullbergm merged 10 commits intomainfrom
copilot/fix-273876-820694792-de80d9fa-1391-448e-8aa7-297c090953f7
Nov 3, 2025
Merged

feat(ui): Add favorites/pinned applications with localStorage persistence#448
ullbergm merged 10 commits intomainfrom
copilot/fix-273876-820694792-de80d9fa-1391-448e-8aa7-297c090953f7

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Nov 3, 2025

Users can now mark applications as favorites for quick access. Favorites appear at the top of the applications list and persist across sessions.

Implementation

State Management Hook (useFavorites.js)

  • Native Preact hooks (useState/useEffect) with functional updates for concurrent changes
  • localStorage format: { version: 1, favorites: ["namespace/resourceName", ...] }
  • Storage events for cross-tab synchronization, handling both updates and clears
  • Export/import via exportFavorites() and importFavorites(jsonString)
const { isFavorite, toggleFavorite } = useFavorites();

// Application ID generation ensures uniqueness
getApplicationId(app) // => "namespace/resourceName"

UI Integration

  • Star icon in Application component (edit mode only)
    • Filled star for favorites, outline for non-favorites
    • aria-pressed state, descriptive aria-label for screen readers
  • ApplicationGroupList filters favorites into top section (no heading)
  • separateFavoritesFromGroups() helper for clean separation logic

Accessibility

  • Full keyboard navigation (Tab, Enter, Space)
  • Proper ARIA semantics on star toggle button
  • High contrast mode compatible

Testing

  • 23 tests for useFavorites hook covering all methods and edge cases
  • 7 additional tests for Application component star icon behavior
  • All 248 existing tests pass
  • CodeQL: no security issues
Original prompt

This section details on the original issue you should resolve

<issue_title>feat(ui): Favorites/Pinned Applications</issue_title>
<issue_description>## Overview

Enable users to mark applications as favorites for quick access, improving productivity for users managing many applications.

Features

Core Functionality

  • Star/Pin Applications: Toggle favorite status via star icon on application cards. The star icon shows up in edit mode only.
  • Quick Access: Favorites appear before regular application groups but it has no heading for the section.

User Experience

  • Easy Management: Unfavorite via star icon
  • Cross-Tab Sync: Use storage events to keep favorites synchronized across browser tabs
  • Data Portability: Export/import favorites in JSON format, along with display preferences for backup and sharing
  • Persistent Storage: Local storage per user, preserving favorites across sessions

Benefits

  • Personalized experience for frequently accessed applications
  • Reduced search and scroll time
  • Improved productivity for users with 20+ applications

User Documentation

  • Update user guide with favorites feature
  • Document export/import process
  • Add screenshots

Technical Considerations

Data Persistence

  • Primary Key: Application ID (from backend)
  • Storage Format: { "version": 1, "favorites": ["app-id-1", "app-id-2"] }
  • Future Enhancement: Backend persistence for multi-device sync

Browser Compatibility

  • localStorage supported in all modern browsers
  • Graceful degradation if localStorage unavailable (in-memory fallback)

Acceptance Criteria

  • Users can star/unstar applications with a single click
  • Favorites section appears at the top
  • Favorites persist across page reloads
  • Favorites sync across browser tabs in real-time
  • Export/import functions work correctly with valid JSON
  • All interactions are keyboard accessible
  • Screen readers announce favorite state changes
  • Unit test coverage ≥80% for new code
  • No visual regressions in existing application cards
  • Feature works in light and dark themes
  • High contrast mode supported

Future Enhancements

  • Backend persistence for favorites (sync across devices)
  • Drag-and-drop reordering of favorites
  • Favorite groups/collections
  • Search within favorites
  • Bulk favorite/unfavorite operations</issue_description>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: ullbergm <273876+ullbergm@users.noreply.github.com>
@ullbergm ullbergm marked this pull request as ready for review November 3, 2025 16:34
@ullbergm ullbergm self-requested a review as a code owner November 3, 2025 16:34
@github-actions github-actions Bot added size/S Denotes a PR that changes 10-29 lines, ignoring generated files. area/frontend Changes made to the frontend labels Nov 3, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 3, 2025

Test Results - JVM

857 tests  +50   849 ✅ +50   53s ⏱️ -1s
 69 suites + 1     8 💤 ± 0 
 49 files   ± 0     0 ❌ ± 0 

Results for commit f78ab38. ± Comparison against base commit b7a7613.

♻️ This comment has been updated with latest results.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 3, 2025

Test Results - Native

857 tests  +50   849 ✅ +50   55s ⏱️ -1s
 69 suites + 1     8 💤 ± 0 
 49 files   ± 0     0 ❌ ± 0 

Results for commit cb4a11b. ± Comparison against base commit b7a7613.

♻️ This comment has been updated with latest results.

- Create useFavorites.js hook for managing favorites with localStorage
- Implement favorites storage format with version control
- Add cross-tab sync using storage events
- Add export/import functionality for favorites
- Create comprehensive test suite with 23 passing tests
- Use native Preact hooks instead of @rehooks for better control

Co-authored-by: ullbergm <273876+ullbergm@users.noreply.github.com>
@github-actions github-actions Bot added size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. and removed size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels Nov 3, 2025
Copilot AI and others added 3 commits November 3, 2025 16:57
- Add star icon to Application component (visible only in edit mode)
- Add isFavorite and onToggleFavorite props to Application
- Update ApplicationGroupList to use useFavorites hook
- Separate favorites into a dedicated section at the top (no heading)
- Filter favorited apps from regular groups
- Pass favorites props through ApplicationGroup to Application
- All existing tests pass, frontend builds successfully

Co-authored-by: ullbergm <273876+ullbergm@users.noreply.github.com>
- Add tests for star icon visibility in edit mode
- Add tests for filled vs outline star states
- Add tests for favorite toggle functionality
- Add tests for accessibility attributes (aria-label, aria-pressed)
- Add tests for event propagation prevention
- All 29 Application component tests passing

Co-authored-by: ullbergm <273876+ullbergm@users.noreply.github.com>
- Handle null newValue in storage event handler for proper cross-tab sync when favorites are cleared
- Extract favorites filtering logic into separate function for better readability and testability
- Improve code organization in ApplicationGroupList

Co-authored-by: ullbergm <273876+ullbergm@users.noreply.github.com>
Copilot AI changed the title [WIP] feat(ui): Favorites/Pinned Applications feat(ui): Add favorites/pinned applications with localStorage persistence Nov 3, 2025
… keyboard support for reordering

Signed-off-by: Magnus Ullberg <magnus@ullberg.us>
@github-actions github-actions Bot added size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. and removed size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. labels Nov 3, 2025
…48e-8aa7-297c090953f7

Signed-off-by: Magnus Ullberg <magnus@ullberg.us>
Signed-off-by: Magnus Ullberg <magnus@ullberg.us>
Signed-off-by: Magnus Ullberg <magnus@ullberg.us>
@ullbergm ullbergm merged commit d8f5494 into main Nov 3, 2025
9 checks passed
@ullbergm ullbergm deleted the copilot/fix-273876-820694792-de80d9fa-1391-448e-8aa7-297c090953f7 branch November 3, 2025 22:33
@github-actions
Copy link
Copy Markdown
Contributor

Pull Request closed and locked due to lack of activity.
If you'd like to build on this closed PR, you can clone it using this method: https://stackoverflow.com/a/14969986
Then open a new PR, referencing this closed PR in your message.

@github-actions github-actions Bot locked and limited conversation to collaborators Nov 11, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area/frontend Changes made to the frontend enhancement size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(ui): Favorites/Pinned Applications

2 participants