feat(build): add screenshot metadata filter

[jsfez]

Fix ARG-289

• Use sub-menus instead of groups (similar to Linear)

• Keep the global number of items instead of updating the number based on the actual filter. It will also ensure the list is not updated while clicked, it creates CLS actually and make it hard to select multiple filters.

• Bonus: in Linear you can either click on the checkbox or click on the whole line. If we click on the checkbox it does not close the filter, if we click on the line it closes it. It's very useful to select several filters at once.

• Improve the UI of chip filters:

  • Add [name|value|x]
  • Make the x button affordable
  • Bonus: allow to update a filter by clicking on the value
  • Reuse the same design as the chip already displayed on top of the screenshots (icons, etc..)

• Disable text selection on filter chips / menu

• Bug: the number of total reviewed (review indicator at the top right) should not be impacted by this filter.

[linear]

ARG-289 Allow to filter by tags

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	5 changed	Mar 17, 2026, 10:49 AM

[gregberge]

Some UX feedbacks:

• Use sub-menus instead of groups (similar to Linear)

• Keep the global number of items instead of updating the number based on the actual filter. It will also ensure the list is not updated while clicked, it creates CLS actually and make it hard to select multiple filters.

• Bonus: in Linear you can either click on the checkbox or click on the whole line. If we click on the checkbox it does not close the filter, if we click on the line it closes it. It's very useful to select several filters at once.

• Improve the UI of chip filters:

  • Add [name|value|x]
  • Make the x button affordable
  • Bonus: allow to update a filter by clicking on the value
  • Reuse the same design as the chip already displayed on top of the screenshots (icons, etc..)

• Disable text selection on filter chips / menu

• Bug: the number of total reviewed (review indicator at the top right) should not be impacted by this filter.

[Copilot]

Pull request overview

Adds a screenshot metadata filtering UI to the Build sidebar/diff list, while ensuring review progression indicators remain based on the full (unfiltered) diff set.

Changes:

• Introduces a metadata filter state/context and applies the selected filters to the Build diff list results.
• Adds UI for selecting filters via a submenu-based filter button and managing active filters via pill chips.
• Adjusts review progression and hotkey handling to account for the new menu/filtered diff behavior.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
apps/frontend/src/ui/Menu.tsx	Adds submenu trigger export and introduces MenuCheckboxItem for checkbox-style menu options.
apps/frontend/src/pages/Build/metadata/MetadataFilterState.tsx	New filter context + helpers to extract metadata tags and match diffs against selected filters.
apps/frontend/src/pages/Build/metadata/MetadataCategoryMenu.tsx	New per-category checkbox menu rendering (with optional split of selected/unselected).
apps/frontend/src/pages/Build/metadata/MetadataCategories.tsx	New category/value icon mapping and pluralization labels for pills.
apps/frontend/src/pages/Build/metadata/FilterButton.tsx	New filter button that opens category submenus and updates filter selection.
apps/frontend/src/pages/Build/metadata/ActiveFilterPills.tsx	New active filter “chip/pill” UI with inline editing via menu and removal via X button.
apps/frontend/src/pages/Build/header/BuildHeader.tsx	Uses unfiltered diffs for review progression counts.
apps/frontend/src/pages/Build/BuildSidebar.tsx	Wires filter button + active pills into the sidebar layout.
apps/frontend/src/pages/Build/BuildDiffState.tsx	Applies metadata filters to displayed diffs; provides allDiffs and metadata filter context.
apps/frontend/src/containers/BuildModeIndicator.tsx	Minor layout tweak (self-center).
apps/frontend/src/containers/Build/BuildHotkeys.tsx	Treats menuitemcheckbox/menuitemradio like menu items for hotkey suppression.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gregberge]

Some UX feedbacks:

• The menu is empty when we open / close it (you can see it's a thin box with just padding)

CleanShot.2026-03-16.at.08.59.28.mp4

• Not part of your PR but the animation when the sub-menu is shown is very annoying, make it instant please

• Add icons for categories in the menu

• Use the same style as Linear for checkboxes: make it a bit smaller, only visible on hover (or menu item focused) or if checked

• Hide category from the filter if there is only one item, it's useless

• Add a tooltip and a shortcut (F) on the filter button similar to the search

[Copilot]

Pull request overview

Adds a screenshot-metadata filtering system to the Build sidebar, including submenu-based filter selection and chip-based active filter UI, while ensuring global review progression counters remain unaffected by filtering.

Changes:

• Introduce metadata tag extraction + diff filtering logic and expose filter state via context.
• Add Build sidebar filter button (submenu per metadata category) and active filter chips with “edit value” / “remove” interactions.
• Refactor metadata indicator/icon handling and fix review progression to use the unfiltered diff list.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
apps/frontend/src/ui/StackedItems.tsx	New small UI primitive for stacked avatar/icon rows.
apps/frontend/src/ui/Menu.tsx	Adds SubmenuTrigger export and introduces MenuCheckboxItem styling/behavior.
apps/frontend/src/ui/Chip.tsx	Adds segmented-chip building blocks for filter chips.
apps/frontend/src/pages/Project/BuildTypeFilter.tsx	Uses StackedItems for consistent stacked display.
apps/frontend/src/pages/Project/BuildStatusFilter.tsx	Uses StackedItems for consistent stacked display.
apps/frontend/src/pages/Build/metadata/metadataIcons.ts	Centralizes icon mappings + parsing helpers for metadata values.
apps/frontend/src/pages/Build/metadata/metadataCategories.ts	Defines supported metadata categories and their UI definitions.
apps/frontend/src/pages/Build/metadata/filters/metadataFilterUtils.ts	Implements tag extraction, grouping, and diff matching for selected filters.
apps/frontend/src/pages/Build/metadata/filters/MetadataFilterState.tsx	Adds context + hook for metadata filter state.
apps/frontend/src/pages/Build/metadata/filters/MetadataCategoryMenu.tsx	Renders a per-category multi-select menu (with optional split selected/unchecked).
apps/frontend/src/pages/Build/metadata/filters/FilterChips.tsx	Adds chip UI for active filters (edit value via menu, remove via X).
apps/frontend/src/pages/Build/metadata/filters/FilterButton.tsx	Adds sidebar filter button with submenu per category.
apps/frontend/src/pages/Build/metadata/ViewportIndicator.tsx	Refactors viewport icon selection to shared helpers.
apps/frontend/src/pages/Build/metadata/MetadataTagIcons.tsx	New component to render category/value icons for tags.
apps/frontend/src/pages/Build/metadata/MediaTypeIndicator.tsx	Refactors media type icon selection to shared helpers.
apps/frontend/src/pages/Build/metadata/ColorSchemeIndicator.tsx	Refactors color scheme icon selection to shared helpers.
apps/frontend/src/pages/Build/header/BuildHeader.tsx	Ensures review progression uses unfiltered diffs (allDiffs).
apps/frontend/src/pages/Build/BuildSidebar.tsx	Wires filter UI + hotkey into the sidebar and renders filter chips above the diff list.
apps/frontend/src/pages/Build/BuildDiffState.tsx	Adds filter state/context, keeps stable tag list, and exposes allDiffs.
apps/frontend/src/containers/BuildStatusChip.tsx	Uses StackedItems for reviewer avatars.
apps/frontend/src/containers/Build/BuildHotkeys.tsx	Adds “Open filters” hotkey and improves menu role detection.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.