Adding quick filter menu to the inventory page#11754
Draft
NoahHendrickson wants to merge 15 commits into
Draft
Conversation
Introduce a header filter control on the inventory page that opens a menu of armor set bonuses (2/4-piece sets), archetypes, and tuning stats; selections append the existing setbonus:, archetype:, and tuning: clauses to the search bar. Register archetype, setbonus, and tuning filters with item search and narrow set bonus suggestions accordingly. Declare setbonus as freeform so manifest-only slugs do not call suggestions.includes on undefined (which crashed the UI). Add English and i18n config strings, the Font Awesome filter icon subset, and default the dev server to port 8080 (override with DIM_DEV_PORT). Co-authored-by: Cursor <cursoragent@cursor.com>
Extend applyArmorKvFilter with tertiarystat so the menu can replace an existing tertiarystat: clause like tuning. Add a Tertiary stat chip section that applies tertiarystat:<stat> (same values as tuning stat). Co-authored-by: Noah Hendrickson <NoahHendrickson@users.noreply.github.com>
The dropdown used overflow:hidden with a fixed max-height, so the new tertiary stat section was clipped. Allow vertical scrolling. Co-authored-by: Noah Hendrickson <NoahHendrickson@users.noreply.github.com>
Stop closing the picker after applying setbonus/archetype/tuning/tertiary tokens. Add armorKvFilterIsActive for matching UI to the query and style selected chips with a DIM accent (theme orange) outline. Co-authored-by: Noah Hendrickson <NoahHendrickson@users.noreply.github.com>
…tays-open-chip-outline-91f0 Armor filter menu: stay open on select, accent outline on active chips
- Emit tunedstat: from inventory armor chips; applyArmorKvFilter toggles off an exact keyword:value token - Deprecate tuning: (omitted from filter help/autocomplete; saved queries still parse) - Menu: section padding and chip gap, 8% accent fill on active chips, remove inner scrolling so content fits Co-authored-by: Cursor <cursoragent@cursor.com>
… spacing - Build setbonus/archetype/tunedstat/tertiarystat clauses with `or` between values; strip contiguous keyword chains without breaking unrelated `or`. - Use default filterBarButton horizontal margin on the armor filter trigger. Co-authored-by: Cursor <cursoragent@cursor.com>
- Add theme tokens for menu bg, border, chip fill, and shadow; default base theme to prior search-dropdown styling. - Throne World: mint-tinted border/shadow/chips and green-mixed panel background from fill-modal + actions layers. Co-authored-by: Cursor <cursoragent@cursor.com>
- Default Beyond Light: light gray search dropdown border (match Pyramid). - Classic + DIM Dark: set search dropdown border token. - Europa: armor filter panel tokens (blue mix, frosted chips, ice/teal shadow). - Vexnet: tone down border/chips (neutral edge + chips; teal/blue glow). - Armor filter menu: resolve bg/border with fallbacks to search tokens (fix inherited transparent border on nested themes). Co-authored-by: Cursor <cursoragent@cursor.com>
- Menu min/max width 400/420px (was 500/560 then 420/450). - Vex Network: armor filter panel uses --theme-search-dropdown-bg. Co-authored-by: Cursor <cursoragent@cursor.com>
Add a section-local search in the armorset bonus header that filters chips by label or slug, with empty-state copy and i18n keys. Lock the popover width so filtering does not resize the menu. Tint the default (Beyond Light) panel background with the app gradient start so it reads closer to the page. Co-authored-by: Cursor <cursoragent@cursor.com>
Replace chip grid with a compact root menu and side flyouts on hover (with open/close delays), preserving multi-select via applyArmorKvFilter. Add keyboard support (arrows/Enter/Escape), outside-click includes flyout, and set-bonus search in the flyout panel. Co-authored-by: Cursor <cursoragent@cursor.com>
Set-bonus search aligns with flyout styling (search icon, no boxed input, accent divider only when the field shows focus-visible). Secondary flyout overlaps the primary column slightly and both panels use narrower widths. Category rows show an accent-colored count of active filters to the left of the chevron. Adds armorKvKeywordSelectionCount helper with unit tests. Co-authored-by: Cursor <cursoragent@cursor.com>
Inventory armor filter menu: flyout UX and set bonus search
Author
|
second PR, hopefully its not too bad :) |
Contributor
|
Thanks for taking a crack at this. We'd considered something similar (a button/menu-driven query builder) but decided it really wasn't worth adding the complexity to the UI. At the very least this would need to support a lot more of the query language surface rather than just filtering a few armor properties. Overall I'd prefer an improvement to the search autocompleter over a menu system like this. |
Author
|
Improving the search autocomplete sounds like a fun thing to try and getting the ux correct should be a fun challenge. Ill get a PR for sometime soon :) As far as the filter UI, generally i agree, it seems weird to have a filter ui for a small subset of things, but Armor 3.0 really simplified how ppl think about armor and I just wanted to target whats the easiest/fastest way to find ferropotent gunner gear with super tertiary. Ill let that be my last comment on it ;) |
Contributor
|
Cool, we have a bunch of stuff under the "Feature: Search" label: https://github.com/DestinyItemManager/DIM/issues?q=sort%3Aupdated-desc%20is%3Aissue%20is%3Aopen%20label%3A%22Feature%3A%20Search%22 |
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
3 participants
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.
With the release of Armor 3.0 I found myself wanting quick filters to find armor with certain attributes. The search-based filtering is powerful, but I wanted a simple filter menu specifically for armor that you can click through quickly. I also tried to design it so other categories could be added later. I'm a product designer and wanted to try my hand at some vibe coding for fun!
What this does
setbonus:,archetype:,tunedstat:,tertiarystat:) plus helper logic and tests.How to test