Tidy custom notification sound settings layout

[pauldambra]

Problem

UI feedback on the new custom notification sounds section: the Add button sat next to the sound picker rather than with the custom sounds, the picker's "Test" control and the per-sound "Play" control looked different, and the Play button was to the left of each sound's name.

Changes

• Move the Add button into the Custom sounds section as a new row below the list. The section now always renders, so adding a sound simply appends a row.
• Replace the Test text button next to the sound picker with a Play icon button, matching the custom sound rows.
• In each custom sound row, move the Play button to the right of the sound name.

How did you test this?

• pnpm --filter @posthog/ui typecheck
• biome lint on the changed file

Automatic notifications

• Publish to changelog?
• Alert Sales and Marketing teams?

---

Created with PostHog from a Slack thread

[github-actions]

React Doctor found 1 issue in 1 file · 1 warning.

1 warning

src/features/settings/sections/NotificationsSettings.tsx

• ⚠️ src/features/settings/sections/NotificationsSettings.tsx:37 Large component is hard to read and change no-giant-component

_{Reviewed by React Doctor for commit 92dc7b6.}

[greptile-apps]

_{Reviews (1): Last reviewed commit: "refactor(notifications): tidy custom sou..." | Re-trigger Greptile}

[greptile-apps]

_{Reviews (2): Last reviewed commit: "feat(notifications): explain custom soun..." | Re-trigger Greptile}

[pauldambra]

Note

🤖 Automated comment by QA Swarm — not written by a human

Multi-perspective review: paul-reviewer, xp-reviewer, security-audit (qa-team unavailable in this environment — skipped)

Verdict: 💬 APPROVE WITH NITS

Clean, well-scoped response to the UI feedback. No correctness or security concerns — only low/nit design and UX polish suggestions, none blocking.

Key findings

• 🟢 UX — Play icon lost its hover affordance. Swapping the Test text button for a bare Play icon means sighted mouse users no longer get a label; only aria-label remains. Consider a Radix Tooltip (applies to the per-row Play icons too). (paul)
• 🟢 Stale noBorder flag. noBorder={completionSound === "none"} on the Sound-effect row predates this change — the "Custom sounds" row now always renders directly below, so the last-row-before-a-gap intent no longer holds. Worth eyeballing the none case in the running app. (paul)
• 🟢 Lift the description ternary to a named const (customSoundsDescription) so the JSX stays scannable. (xp)
• 🟢 completionSound !== "none" is repeated 4× to gate rows — a single const soundEnabled = completionSound !== "none" names the concept once. (xp)
• ⚪ No test locks in the new "always renders" behaviour of the Custom sounds section (+ that it hosts Add). A one-line render assertion would be cheap. (paul)
• ⚪ No analytics on add/play/remove custom sound — since this PR is about making Add discoverable, a track on it would tell us if it's used. Not necessarily this PR. (paul)

Convergence

Both reviewers independently concluded the playCompletionSound appearing in the picker (selected-sound preview) and in CustomSoundRow (single-sound preview) is not duplication worth extracting — same JSX, different intent. Leave them separate.

Reviewer summaries

Reviewer	Assessment
👤 paul	nice tidy-up matching the feedback; eyeball the none border case and consider a tooltip on the icon; approve with comments
📐 xp	the code is the design and reads that way; two small clarity/OnceAndOnlyOnce touch-ups, take or leave
🛡 security-audit	pure UI rearrangement, no user input reaches a new/modified sink — no findings

---

Automated by QA Swarm — not a human review

[github-actions]

Purely cosmetic UI layout changes in a single settings component — no business logic, data models, API contracts, or dependencies touched. All review comments are low-severity nits; the one unresolved comment (tooltip affordance on the Play icon) is explicitly non-blocking.

New commits pushed (delta classified non_trivial_delta) — stamphog approval dismissed; re-review running automatically.

[github-actions]

Pure UI layout and accessibility improvement in a single settings component — no business logic, data models, API contracts, or new dependencies. All review comments are resolved, including the tooltip affordance concern that was addressed in a follow-up commit.

[github-actions]

Pure UI layout and accessibility improvement in a single settings component — no business logic, data models, API contracts, or new dependencies. All inline review comments are resolved, including the tooltip affordance concern that was addressed in a follow-up commit.