feat(filters): bifurcated chips + Add Filter trigger (#137)

[flesher]

Summary

Screen.Recording.2026-05-04.at.12.01.27.PM.mov

• Replaces per-option filter chips with one bifurcated chip per category — left half is the title, right half summarizes the selection (single label or "N plural") and opens an inline edit popover. Closes Improve filter chips to reflect AND vs OR filters #137.
• Drops standalone filter dropdowns in favor of a single "+ Add Filter" trigger anchored at the end of the row; popover position is frozen at open so chips appearing in the row don't drag it sideways.
• Mobile/tablet collapses the nested side-panel into a drilldown that swaps the parent popover; click outside closes everything.
• New shared `FilterChipsBar` rolls up the chip+trigger UX; applied on Miners, Groups and Racks lists.

Test plan

• Verify Miners, Groups and Racks lists each show "+ Add Filter" with chips appearing inline as filters are added.
• Confirm chip's right side opens an editable popover; toggling everything off keeps the chip mounted; X clears the category.
• On phone/tablet, confirm Add Filter drills down (no side panel) and back chevron returns to the category list.
• Resize at `laptop` breakpoint to confirm Racks responsive layout still shows Add Filter + Sort + Add rack correctly.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Updates the ProtoFleet client filter UX to better communicate AND-across / OR-within semantics by switching to one “bifurcated” chip per filter category and consolidating filter selection under a single “+ Add Filter” trigger (with responsive mobile drilldown behavior).

Changes:

• Add freezePosition popover behavior to prevent layout shifts (chips appearing) from dragging an open popover.
• Introduce shared filter-chip UI (FilterChip, FilterChipsBar) and update list pages (Miners/Groups/Racks) to use the new pattern.
• Add/adjust unit and e2e tests for the new chip + nested filter interactions, including mobile/tablet drilldown.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
client/src/shared/components/Popover/usePopoverPosition.ts	Adds freezePosition support to stop tracking trigger coordinates after initial measurement.
client/src/shared/components/Popover/Popover.tsx	Adds freezePosition prop and forces portal-fixed render mode when enabled.
client/src/shared/components/List/List.test.tsx	Updates assertions for new chip test ids (category-level instead of per-option).
client/src/shared/components/List/Filters/types.ts	Adds pluralTitle for correct pluralization and prefixIcon for nested-filter triggers.
client/src/shared/components/List/Filters/NestedSubmenu.tsx	Refactors option row into reusable CheckboxOptionRow.
client/src/shared/components/List/Filters/NestedDropdownFilter.tsx	Adds prefix-icon trigger behavior, desktop category-row refactor, and mobile/tablet drilldown mode.
client/src/shared/components/List/Filters/NestedDropdownFilter.test.tsx	Adds viewport mocking + mobile drilldown coverage.
client/src/shared/components/List/Filters/Filters.tsx	Replaces per-option active pills with one FilterChip per dropdown category and supports keeping an “open” chip mounted.
client/src/shared/components/List/Filters/Filters.test.tsx	Updates/adds tests for bifurcated chips, plural summaries, clear behavior, and inline editing popover.
client/src/shared/components/List/Filters/FilterChipsBar.tsx	New shared “chips + Add Filter trigger” component.
client/src/shared/components/List/Filters/FilterChip.tsx	New bifurcated chip with inline-edit popover for a filter category.
client/src/protoFleet/features/rackManagement/pages/RacksPage.tsx	Migrates rack filters to FilterChipsBar and updates header layout.
client/src/protoFleet/features/groupManagement/pages/GroupsPage.tsx	Migrates group filters to FilterChipsBar and updates header layout.
client/src/protoFleet/features/fleetManagement/components/MinerList/MinerList.tsx	Updates filter metadata: plural titles + nested trigger becomes “Add Filter” with plus icon.
client/e2eTests/protoFleet/pages/racks.ts	Updates rack e2e flows to use “Add Filter” trigger and chip editing popover.
client/e2eTests/protoFleet/pages/miners.ts	Updates miner e2e flows to use nested “Add Filter” trigger and model submenu selection.

Comments suppressed due to low confidence (1)

client/src/protoFleet/features/rackManagement/pages/RacksPage.tsx:144

• handleClearFilters mutates selectedZonesRef.current but selectedZonesRef isn’t included in the useCallback dependency array. This is inconsistent with the rest of the file and will be flagged by react-hooks/exhaustive-deps.

Include selectedZonesRef in the dependencies (or explicitly disable the rule with a comment if omission is intentional).

  const handleClearFilters = useCallback(() => {
    setSelectedZones([]);
    selectedZonesRef.current = [];
    setSelectedIssues([]);
    selectedIssuesRef.current = [];
    resetAndFetch();
  }, [resetAndFetch, selectedIssuesRef]);

[github-actions]

🔐 Codex Security Review

Note: This is an automated security-focused code review generated by Codex.
It should be used as a supplementary check alongside human review.
False positives are possible - use your judgment.

Scope summary

• Reviewed pull request diff only (a57c322c6ff0e760531e8160f554fbcb3c7d8dd2...7401b133be739e51dddea364b6902f3711683017, exact PR three-dot diff)
• Model: gpt-5.4

💡 Click "edited" above to see previous reviews for this PR.

---

Review Summary

Overall Risk: LOW

Findings

[LOW] Server-backed filter editing now refetches on every checkbox toggle

• Category: Reliability
• Location: client/src/shared/components/List/Filters/FilterChip.tsx:81, client/src/shared/components/List/Filters/NestedDropdownFilter.tsx:111
• Description: The new chip editor and nested “Add Filter” flow commit every checkbox change immediately. On the pages converted in this PR, those callbacks now call resetAndFetch() right away (client/src/protoFleet/features/groupManagement/pages/GroupsPage.tsx:51, client/src/protoFleet/features/rackManagement/pages/RacksPage.tsx:99). The old DropdownFilter path on those pages used withButtons, so multi-select edits were staged locally and applied once.
• Impact: Selecting several zones/issues now fans out into several superseded list fetches (and follow-on stats fetches) instead of one request. That adds avoidable backend load and makes the UI noticeably more racy on slower links. The new rack Playwright helper is already working around this exact problem instead of exercising the chip-edit path directly (client/e2eTests/protoFleet/pages/racks.ts:352).
• Recommendation: Keep a local draft for the new chip/nested-filter flows on server-backed pages and only refetch on Apply, or debounce/coalesce changes before calling resetAndFetch / server-side onFilter.

Notes

Frontend-only diff in scope. I did not find auth, SQLi, gRPC, command-injection, cryptostealing/pool-hijack, protobuf wire-format, or infrastructure issues in the reviewed hunks.

I could not run the client Vitest suite in this environment because npm test fails with sh: 1: vitest: not found.

---

_{Generated by Codex Security Review |
Triggered by: @flesher |
Review workflow run}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5b9918b348

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[flesher]

Triaged the bot review feedback in 41abded:

Fixed

• Filters.tsx external-sync stale-chip (codex security chore: cutover Proto Fleet source from upstream repo #2): the resync block now also clears openChipFilterValue, so back/forward or sibling URL writes can't leave a 0 plural chip mounted.
• usePopoverPosition.ts frozen viewport (Copilot + codex P2): updateMeasurements keeps updating visibleViewport while the trigger rect stays frozen, so the layout effect re-clamps the popover on resize / zoom / mobile-chrome collapse.
• RacksPage.tsx deps (Copilot): added selectedZonesRef to handleFilterChange and handleClearFilters deps.

Acknowledged, not fixing in this PR

• Codex security Dependency Dashboard #1 (immediate-commit fan-out, one server reload per click): this is the deliberate inline-edit UX direction — there's no Apply/Reset path on the new chip. Real cost on slow connections, but mixing live editing with batched commits cleanly needs a design call. Will track as a follow-up rather than bundle here.