Skip to content

feat(library): add filter UI for install, platform, controls, and activity - #602

Merged
zortos293 merged 3 commits into
devfrom
capy/library-filter-ui
Jul 5, 2026
Merged

feat(library): add filter UI for install, platform, controls, and activity#602
zortos293 merged 3 commits into
devfrom
capy/library-filter-ui

Conversation

@zortos293

@zortos293 zortos293 commented Jul 5, 2026

Copy link
Copy Markdown
Collaborator

This PR adds a filter dropdown to the library page allowing users to filter games by play type (Install to Play, Cloud Launch), platform (Steam, Epic, Xbox, etc.), controls (Keyboard & Mouse, Controller, Touch), and play activity (Played, Never Played).

  • Added LibraryFilterGroup and LibraryFilterOption interfaces for filter structure
  • Implemented filter generation from game metadata (playType, availableStores, supportedControls, lastPlayed)
  • Added visibleLibraryGames memo to filter grid based on active filters
  • Rendered filter dropdown with grouped chips and option counts
  • Rendered active filter chips with clear buttons and animated transitions
  • Updated empty states to show contextual messages when filtering
  • Added translations for filter groups, options, and empty states
  • Styled filter dropdown menu and chips to match app aesthetic

Changes:

  • locales/en.json: Added library.filterGroups, library.filterOptions, library.filters, library.activeFilters, library.clearFilters, library.removeFilter, library.filteredGameCount, library.empty.noFilteredGames, library.empty.tryAdjustingFilters
  • opennow-stable/src/renderer/src/App.tsx: Pass allGames prop to LibraryPage for filter generation
  • opennow-stable/src/renderer/src/components/LibraryPage.tsx: Added filter UI, state management, and filtering logic
  • opennow-stable/src/renderer/src/styles.css: Added .library-filter-dropdown, .library-filter-chip, .library-active-filters styles

Open OPE-251 OPE-251


Note

Low Risk
Renderer-only library UI and client-side filtering; no auth, session, or backend changes.

Overview
Adds desktop library filtering alongside search and sort: a Filters dropdown with grouped chips (play type, platform/store, controls, played vs never played), counts per option, and a removable active filters bar with clear-all.

Filter options are derived from the full library (allGames from App) while the grid uses search/sort results then applies filters with OR within a group and AND across groups. Selection resets when options disappear, selection follows the first visible game when the current pick is filtered out, and empty states distinguish no matches for filters vs search.

New i18n strings and library-specific CSS mirror the store filter dropdown pattern; controller mode is unchanged (existing Y-hold store filter only).

Reviewed by Cursor Bugbot for commit 06a78f8. Configure here.

… and activity

Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
@zortos293 zortos293 added the capy Generated by capy.ai label Jul 5, 2026 — with Image Capy AI
@coderabbitai

coderabbitai Bot commented Jul 5, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c7dc6475-b447-4b17-b8e8-7128137793fd

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch capy/library-filter-ui

Comment @coderabbitai help to get the list of available commands.

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 06a78f8. Configure here.

{hasActiveLibraryFilters
? t("library.empty.tryAdjustingFilters")
: t("library.empty.noGamesMatch", { query: searchQuery })}
</p>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrong empty state with search

Medium Severity

When the search yields no rows but library filters stay selected, the grid empty state uses the “no games match those filters” copy instead of the search miss message. Parent games is already search-filtered, so an empty list with a non-empty query usually means search failed, not filters alone.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 06a78f8. Configure here.

} else if (game.playType?.trim()) {
const key = normalizeLibraryFilterValue(game.playType);
if (key) upsertLibraryFilterOption(playTypeOptions, `play:${key}`, formatLibraryPlayTypeLabel(game.playType));
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Play type filter mismatch

Medium Severity

Play Type options and matching use different rules. Titles counted as “Install to Play” via gameRequiresInstallToPlay can still match a “Cloud Launch” (or other) play filter because matching compares normalized game.playType without applying the install heuristic used when building options.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 06a78f8. Configure here.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 06a78f8c47

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

}

if (groupId === "activity") {
return value === "played" ? Boolean(game.lastPlayed) : !game.lastPlayed;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Include local playtime in activity filters

When a user launches a game in this client, usePlaytime records lastPlayedAt locally and sortLibraryGames already uses that value for the library's last-played ordering, but this new activity filter only checks the catalog game.lastPlayed field. For games played locally before the GFN library metadata refreshes, the game is still treated as Never Played and disappears when the user selects the Played filter; the activity filter needs to consider the same local playtime source passed from App.

Useful? React with 👍 / 👎.

Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>

@capy-ai capy-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added 2 comments

Comment thread opennow-stable/src/renderer/src/components/LibraryPage.tsx
Comment thread opennow-stable/src/renderer/src/components/LibraryPage.tsx
Co-authored-by: capy-ai[bot] <230910855+capy-ai[bot]@users.noreply.github.com>
@zortos293
zortos293 merged commit d88394c into dev Jul 5, 2026
16 checks passed
Chizuui pushed a commit to Chizuui/OpenNOW-Modified that referenced this pull request Aug 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

capy Generated by capy.ai

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant