Skip to content

Fix Quick Chat phrase search contrast - #6427

Open
DawsonCodes wants to merge 3 commits into
openfrontio:mainfrom
DawsonCodes:fix/6338-quick-chat-phrase-search
Open

DawsonCodes wants to merge 3 commits into
openfrontio:mainfrom
DawsonCodes:fix/6338-quick-chat-phrase-search

Conversation

@DawsonCodes

@DawsonCodes DawsonCodes commented Nov 14, 2026 •

Copy link
Copy Markdown

Resolves #6338

Description

When All phrases is enabled in Quick Chat, the search field shows black text and a black caret on a dark background. This adds text-white so the query and caret are visible.

Screenshots

Before

Phrase search before the fix

After

Phrase search after the fix

Testing

  • Verified in a local Solo match in Chromium that the query and caret are visible, troops returns three matching phrases, and Enter selects the first result.
  • All 215 affected tests passed locally, along with type checking and the production build.

Checklist

  • Added before-and-after screenshots.
  • The search placeholder uses the existing translateText() key.
  • Added a regression test for the phrase search input style.

Discord

dawson___

@CLAassistant

CLAassistant commented Nov 14, 2026 •

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@CLAassistant

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@github-actions

Copy link
Copy Markdown
Contributor

Thanks for the PR, @DawsonCodes!

When it's ready for a maintainer to review, comment /ready. That adds the ready-for-review label, which is how we find PRs waiting on us. Until then we assume you're still working on it.

  • Draft PRs can't be marked ready. Click Ready for review on the PR first, then comment /ready.
  • If we request changes, the label comes off. Push your fixes, then comment /ready again so we know to take another look. Pushing alone doesn't put it back in the queue.
  • Comment /unready to take it out of the queue yourself.

See CONTRIBUTING.md for the full process.

@coderabbitai

coderabbitai Bot commented Nov 14, 2026 •

Copy link
Copy Markdown
Contributor

Explain Change →

No actionable comments were generated in the recent review.

Walkthrough

The all-phrases search input now uses white text. A test checks that the input has the text-white class.

Changes

Chat search text styling

Layer / File(s) Summary
All-phrases search styling
src/client/hud/layers/ChatModal.ts, tests/client/ChatModal.test.ts
The all-phrases search input adds the text-white class. A test checks for the class when all phrases are enabled.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: flopinguin, celant

Merge Risk: Minimal · up to ee26c

This change makes the typed text in the Quick Chat all-phrases search visible against the dark background. The risk is minimal. A maintainer still needs to assign a milestone to satisfy the CI check.

Pre-merge checks: Passed 4

Check name Status Explanation
Linked Issues check Passed Issue #6338 requires visible text in the chat search bar after a user presses 'r' and selects "All phrases". The reviewed head adds text-white to the phrase search input in the showAll branch of s…
Out of Scope Changes check Passed The whole-PR diff against the merge base changes two files. src/client/hud/layers/ChatModal.ts adds text-white to the phrase search input only. tests/client/ChatModal.test.ts adds one test for that …
Title check Passed The title names the main change: Quick Chat phrase search input contrast is fixed. The change adds text-white to the All phrases search input in ChatModal.ts, so the title matches the changeset. The t…
Description check Passed The description states the problem (black search text and caret when All phrases is enabled), the fix (adding text-white), before and after screenshots, testing steps, and a regression test. It matche…
Full details: Linked Issues check

Explanation

Issue #6338 requires visible text in the chat search bar after a user presses 'r' and selects "All phrases". The reviewed head adds text-white to the phrase search input in the showAll branch of src/client/hud/layers/ChatModal.ts (one-line change). The input previously set no text color and inherited the dark color on bg-zinc-800. The class sets light text, and the caret follows the text color by default. The incremental change adds one test in tests/client/ChatModal.test.ts that asserts the text-white class on the phrase search input. The test checks the class, not rendered contrast. Visual contrast rests on the author's before and after screenshots. The player picker change named in the PR description is absent from the head diff. The commit 'Revert Quick Chat player search changes' removed it. The player picker is not part of #6338's reproduction steps, so this does not leave a #6338 requirement unmet. The PR description's claim of regression coverage for both inputs is stale. Only the phrase search has a test.

Full details: Out of Scope Changes check

Explanation

The whole-PR diff against the merge base changes two files. src/client/hud/layers/ChatModal.ts adds text-white to the phrase search input only. tests/client/ChatModal.test.ts adds one test for that input. Both changes support the #6338 fix. No search, filtering, selection, or send logic changed. No unrelated changes appear. The earlier player picker change no longer appears in the head diff, so the earlier out-of-scope concern does not apply.

Full details: Title check

Explanation

The title names the main change: Quick Chat phrase search input contrast is fixed. The change adds text-white to the All phrases search input in ChatModal.ts, so the title matches the changeset. The title is short and specific.

Full details: Description check

Explanation

The description states the problem (black search text and caret when All phrases is enabled), the fix (adding text-white), before and after screenshots, testing steps, and a regression test. It matches the changeset, which adds text-white to the phrase search input and a test for it.

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

White text appears in the search bar
A class keeps the letters bright
The test checks the updated style
The all-phrases field is clear
One small change completes the view

Recent review info

Run configuration

  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: ec53416c-0eb2-4270-9ad2-c578937b0ed7
Commits

Reviewing files that changed from the base of the PR and between 9896bdb and ee26cb1.

Files selected for processing: 2

  • src/client/hud/layers/ChatModal.ts
  • tests/client/ChatModal.test.ts
Files with no reviewable changes: 1

  • tests/client/ChatModal.test.ts
Files skipped from review as they are similar to previous changes: 1

  • src/client/hud/layers/ChatModal.ts

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

@github-actions github-actions Bot added the small-fix Small fix (≤ 50 lines) — auto-applied by PR gate label Nov 14, 2026
coderabbitai[bot]
coderabbitai Bot previously approved these changes Nov 14, 2026
@github-actions

Copy link
Copy Markdown
Contributor

🤖 Claude Code Review

Verdict: No issues found. Findings: 0 critical, 0 high, 0 medium, 0 low.

Checked for bugs and CLAUDE.md compliance. The text-white utility overrides the base-layer input { color: #000 } rule in src/client/styles.css, so the fix is correct. The new test targets the right element, because the phrase search is the only <input> in the modal while no phrase is selected.

Non-blocking note, outside this diff: the player-picker search input at src/client/hud/layers/ChatModal.ts:332 uses the same class string without text-white, so it probably has the same black-on-dark contrast problem. You could fix it in this PR too.

coderabbitai[bot]
coderabbitai Bot previously approved these changes Nov 14, 2026
@DawsonCodes DawsonCodes changed the title Fix Quick Chat phrase search contrast ix Quick Chat phrase and player search contrast. Nov 14, 2026
@DawsonCodes DawsonCodes changed the title ix Quick Chat phrase and player search contrast. Fix Quick Chat phrase and player search contrast. Nov 14, 2026
@github-actions

Copy link
Copy Markdown
Contributor

🤖 Claude Code Review

Reviewed range: 48b63c0..9896bdb (incremental since the last Claude review).

Verdict: No issues found. Findings: 0 critical, 0 major, 0 minor.

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

This range adds text-white to the player-picker search input in src/client/hud/layers/ChatModal.ts, along with a matching test. Two reviewers reported that the phrase-search input (the "All phrases" view) still had dark text. A validator checked the PR head and rejected that report: an earlier commit in this PR already adds text-white to that input and tests it.

@DawsonCodes

Copy link
Copy Markdown
Author

/ready

@Celant Celant left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the before/after shots, they make this a thirty-second read. The phrase search half is good and lands on its own. The player picker half is the problem: that line is already fixed in #6290, which has been open since the 5th against #6247 (approved, v36, assigned to ashique-perumbavoor). Two PRs can't both change it, and that one has the claim. Also worth knowing that #6338 is still not-approved; the player search part of it is a duplicate of #6247, so I'd expect it to get approved for the phrase search only.

Comment thread src/client/hud/layers/ChatModal.ts Resolved
Keep this PR focused on phrase search. The player picker is covered by openfrontio#6290.
@DawsonCodes DawsonCodes changed the title Fix Quick Chat phrase and player search contrast. Fix Quick Chat phrase search contrast Nov 14, 2026
@github-actions

Copy link
Copy Markdown
Contributor

🤖 Claude Code Review

Reviewed range: 9896bdb..ee26cb1 (incremental since the last Claude review).

Verdict: No issues found. Checked for bugs and CLAUDE.md compliance.

Findings: 0 (0 high, 0 medium, 0 low)

This range reverts the earlier player-search change: it takes text-white off the player-picker input and deletes its test. That input now matches main again. The PR still adds text-white and its regression test to the phrase-search input, which fixes #6338.

@DawsonCodes

Copy link
Copy Markdown
Author

/ready

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ready-for-review small-fix Small fix (≤ 50 lines) — auto-applied by PR gate

Projects

Status: Triage

Development

Successfully merging this pull request may close these issues.

Chat search bar text colour is black

3 participants