Improved members empty state

[weylandswart]

Closes https://linear.app/ghost/issue/DES-1406/members-empty-screen-looks-pretty-bad

Our empty state for members didn't look great after the port from Ember. This cleans it up.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 72af4b76-3656-45af-ae8f-9a9ab8e4e674

📥 Commits

Reviewing files that changed from the base of the PR and between da7e859 and dff7bf3.

📒 Files selected for processing (8)

• apps/posts/src/views/members/components/members-actions.tsx
• apps/posts/src/views/members/components/members-empty-state.tsx
• apps/posts/src/views/members/components/members-help-cards.tsx
• apps/posts/src/views/members/members.tsx
• apps/posts/test/unit/views/members/members-actions.test.tsx
• apps/shade/src/components/ui/empty-indicator.tsx
• e2e/helpers/pages/admin/members/members-list-page.ts
• e2e/tests/admin/members/import.test.ts

✅ Files skipped from review due to trivial changes (1)

• apps/shade/src/components/ui/empty-indicator.tsx

🚧 Files skipped from review as they are similar to previous changes (6)

• e2e/tests/admin/members/import.test.ts
• e2e/helpers/pages/admin/members/members-list-page.ts
• apps/posts/test/unit/views/members/members-actions.test.tsx
• apps/posts/src/views/members/members.tsx
• apps/posts/src/views/members/components/members-actions.tsx
• apps/posts/src/views/members/components/members-help-cards.tsx

---

Walkthrough

This PR refactors the Members page to introduce conditional visibility of header controls and action menus. It adds optional showMenu/showNewMember props to MembersActions, a shouldShowMemberControls flag on the Members page to gate search/filter/toolbar UI, replaces the memberships empty-state actions with a two-button layout plus an import link, simplifies help cards to a uniform icon+text layout, and switches EmptyIndicator spacing classes from space-y-* to gap-*.

Possibly related PRs

• TryGhost/Ghost#27964: Modifies the Members page header and layout at the same UI wiring level that this change gates with shouldShowMemberControls.
• TryGhost/Ghost#28484: Touches MembersActions New member rendering and small-viewport label adjustments that overlap this PR's showNewMember gating.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Improved members empty state' accurately summarizes the main change—refactoring the members empty state UI as documented across multiple component files.
Description check	✅ Passed	The description is directly related to the changeset, referencing the linear issue DES-1406 about improving the members empty state appearance after the Ember port, with visual evidence.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 weyland-des-1406-members-empty-screen-looks-pretty-bad

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

apps/posts/src/views/members/components/members-help-cards.tsx (1)

13-18: 💤 Low value

Consider indicating external link behavior for accessibility.

The cards open in a new tab but lack visual or semantic indication. While the security attributes are correct, adding an aria-label or visual indicator (e.g., external link icon) would improve accessibility and set clear user expectations.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/posts/src/views/members/components/members-help-cards.tsx` around lines
13 - 18, The anchor in members-help-cards.tsx (the <a> with className
"group/card ..." and attributes href, target="_blank", rel="noopener
noreferrer") opens a new tab but lacks accessibility cues; update this element
to include an accessible label and/or indicator by adding an aria-label (e.g.,
append "opens in a new tab" to the visible title or use aria-label on the <a>),
and add a visible indicator (an external-link icon or visually-hidden text)
inside the link so screen readers and sighted users know it opens externally;
ensure any added icon is non-focusable and the aria-label matches the visible
cue.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/posts/src/views/members/components/members-help-cards.tsx`:
- Around line 13-18: The anchor in members-help-cards.tsx (the <a> with
className "group/card ..." and attributes href, target="_blank", rel="noopener
noreferrer") opens a new tab but lacks accessibility cues; update this element
to include an accessible label and/or indicator by adding an aria-label (e.g.,
append "opens in a new tab" to the visible title or use aria-label on the <a>),
and add a visible indicator (an external-link icon or visually-hidden text)
inside the link so screen readers and sighted users know it opens externally;
ensure any added icon is non-focusable and the aria-label matches the visible
cue.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 58eb996c-21e7-4846-a6cd-4a06560034f9

📥 Commits

Reviewing files that changed from the base of the PR and between c1637ee and da7e859.

📒 Files selected for processing (7)

• apps/posts/src/views/members/components/members-actions.tsx
• apps/posts/src/views/members/components/members-empty-state.tsx
• apps/posts/src/views/members/components/members-help-cards.tsx
• apps/posts/src/views/members/members.tsx
• apps/posts/test/unit/views/members/members-actions.test.tsx
• e2e/helpers/pages/admin/members/members-list-page.ts
• e2e/tests/admin/members/import.test.ts

🚧 Files skipped from review as they are similar to previous changes (4)

• apps/posts/test/unit/views/members/members-actions.test.tsx
• e2e/helpers/pages/admin/members/members-list-page.ts
• apps/posts/src/views/members/members.tsx
• apps/posts/src/views/members/components/members-actions.tsx