Changed member and comment filters to match post lists

[peterzimon]

ref https://linear.app/ghost/issue/PLA-338/post-release-consolidate-filters-ui-in-admin

Why

The React posts and pages lists introduce updated filter controls. Members and Comments should use the same visual details while that experience is enabled, without changing their existing flag-off UI.

What changed

• Uses ListFilter and ListFilterPlus in Members and Comments when postsListReact is enabled
• Makes the active Add filter controls icon-only and outlined while retaining their accessible names
• Makes Clear controls outlined and text-only under the same flag
• Matches the Members Clear/Save action spacing to Posts
• Keeps the existing outlined Save/Edit view trigger and preserves the legacy flag-off controls

Validation

• Existing ManageViewPopover unit test
• Targeted ESLint
• Pre-commit formatting, dependency-boundary, secrets, submodule, and changeset checks
• git diff --check
• Full Admin typecheck (currently blocked by unrelated existing custom-field type errors)

Checklist

• I have read and followed the Contributor Guide
• I have explained my change
• I have written automated tests to prove my change works — omitted for these visual class-level changes to avoid brittle implementation-detail coverage

[nx-cloud]

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci

---

View your CI Pipeline Execution ↗ for commit bfe1de0

Command	Status	Duration	Result
nx run @tryghost/admin:test:acceptance	✅ Succeeded	7m 54s	View ↗
nx run-many -t test:unit -p @tryghost/admin	✅ Succeeded	2m 53s	View ↗
nx run ghost-monorepo:lint:boundaries	✅ Succeeded	25s	View ↗
nx run-many -t lint -p @tryghost/admin,ghost-mo...	✅ Succeeded	1m 36s	View ↗
nx run @tryghost/e2e:test:fixtures	✅ Succeeded	1s	View ↗
nx run @tryghost/admin:build	✅ Succeeded	19s	View ↗
nx run-many --target=build --projects=tag:publi...	✅ Succeeded	<1s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-09-01 15:10:36 UTC

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: QUIET

Plan: Team

Run ID: 170fab20-5f5d-446c-b55b-bafd7ed1ba12

📥 Commits

Reviewing files that changed from the base of the PR and between 671bd96 and bfe1de0.

📒 Files selected for processing (1)

• apps/admin/src/members/components/members-filters.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 5 remain after this review.

📜 Recent review details

⏰ Context from checks skipped due to timeout. (9)

• GitHub Check: Build Admin
• GitHub Check: Build E2E Public App Assets
• GitHub Check: Stripe fixture checks
• GitHub Check: App Playwright Acceptance Tests (@tryghost/admin)
• GitHub Check: Build Docker Images
• GitHub Check: Unit tests (Node 22.23.1)
• GitHub Check: Check migration integrity
• GitHub Check: Check app version bump
• GitHub Check: Lint

🧰 Additional context used

📓 Path-based instructions (6)

Review Admin UI for existing Shade reuse, correct component layer, semantic

⚙️ CodeRabbit configuration file

Files:

• apps/admin/src/members/components/members-filters.tsx

Review lens: "where does this data become trusted?"

⚙️ CodeRabbit configuration file

Files:

• apps/admin/src/members/components/members-filters.tsx

Prioritise concrete correctness, security, data-integrity, compatibility,

⚙️ CodeRabbit configuration file

Files:

• apps/admin/src/members/components/members-filters.tsx

Type-safe boundaries: Fail only if the PR:

📄 CodeRabbit inference engine (Custom checks)

Files:

• apps/admin/src/members/components/members-filters.tsx

Build new features in React,

📄 CodeRabbit inference engine (AGENTS.md)

Files:

• apps/admin/src/members/components/members-filters.tsx

Always use `pnpm`, never npm or Yarn.

📄 CodeRabbit inference engine (AGENTS.md)

Files:

• apps/admin/src/members/components/members-filters.tsx

🔇 Additional comments (1)

apps/admin/src/members/components/members-filters.tsx (1)

1-1: LGTM!

Also applies to: 7-7, 35-35, 147-166, 191-218, 229-250

---

Walkthrough

CommentsFilters and MembersFilters now use the postsListReact feature flag to select consolidated filter controls. The enabled path uses list-filter icons, updated Clear button styling, conditional add-button styling, and composed classes. The existing path preserves the previous funnel icons, spacing, and Clear button behavior.

Suggested reviewers: 9larsons, rob-ghost

Merge Risk: ⚪ Minimal · up to bfe1d

This PR makes localized visual updates to Members and Comments filters behind the existing posts-list flag while preserving the legacy flag-off controls; no actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: updating member and comment filters to match post list controls.
Description check	✅ Passed	The description directly explains the feature-flagged filter UI changes, preserved legacy behavior, and validation results.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Type-Safe Boundaries	✅ Passed	PASS. The PR changes only the Comments and Members filter components. The additions use existing UI components, class composition, and the pre-existing useFeatureFlag module hook. They add no bounda…
New Files Are Typescript	✅ Passed	PASS: The PR-side diff from the merge's main parent contains only modifications to comments-filters.tsx and members-filters.tsx. Both files pre-existed in the base revision. The diff adds no .js…

Full details: Type-Safe Boundaries

Explanation

PASS. The PR changes only the Comments and Members filter components. The additions use existing UI components, class composition, and the pre-existing useFeatureFlag module hook. They add no boundary parser, response type, any, unchecked as, @ts-ignore, or @ts-nocheck. The existing cast in members-filters.tsx is unchanged. The feature-flag config read remains inside the existing hook, so no new direct boundary-data handling or duplicated schema type was introduced.

Full details: New Files Are Typescript

Explanation

PASS: The PR-side diff from the merge's main parent contains only modifications to comments-filters.tsx and members-filters.tsx. Both files pre-existed in the base revision. The diff adds no .js, .jsx, .cjs, or .mjs files, so the stated failure condition is not met.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/pla-338-consolidate-filter-ui

---

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