Skip to content

Spotlight header indicator is icon-only#259

Merged
cameronapak merged 2 commits into
mainfrom
spotlight-indicator-icon-only
Jul 15, 2026
Merged

Spotlight header indicator is icon-only#259
cameronapak merged 2 commits into
mainfrom
spotlight-indicator-icon-only

Conversation

@cameronapak

@cameronapak cameronapak commented Jul 15, 2026

Copy link
Copy Markdown
Owner

Summary

The spotlight header chip drops its "Spotlight" text label on desktop and is now icon-only on every breakpoint. The visible label distracted and stole horizontal space from the breadcrumb and other header controls.

Changes

  1. SpotlightIndicator renders icon-only everywhere — the label is always an SR-only span, with the title tooltip carrying the text affordance for pointer users.
  2. ADR 0033's header-indicator note and the component JSDoc now match the shipped design and record the space/distraction rationale.

Test plan

  • Pre-commit gates (oxlint + oxfmt) passed on commit.
  • e2e/spotlight.spec.ts targets [data-spotlight-indicator], not the visible text, so its indicator coverage is unaffected.
  • Needs manual check: the on-state chip still reads clearly as "spotlight is on" at icon-only size without crowding the breadcrumb (visual, not e2e-reachable).

Summary by CodeRabbit

  • UI Improvements

    • Updated the Spotlight header indicator to use an icon-only presentation at all screen sizes.
    • Added a tooltip and screen-reader label to clarify the control’s purpose.
    • Clicking the indicator turns Spotlight mode off, removes the indicator, and restores the normal page appearance without showing a notification.
  • Documentation

    • Updated Spotlight mode guidance to reflect the revised indicator behavior.

cameronapak and others added 2 commits July 15, 2026 04:48
Drop the desktop "Spotlight" label from SpotlightIndicator; the chip is
now icon-only on every breakpoint (label always SR-only, title tooltip
carries the pointer affordance). The visible label distracted and stole
horizontal space from the breadcrumb and other header controls, and the
solid fill plus present-only-when-on already carry awareness.

Sync the rationale into ADR 0033's header-indicator note and the
component JSDoc so both match the shipped design.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jul 15, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d7517e48-7879-45e0-a1fb-5c6f61d39d0b

📥 Commits

Reviewing files that changed from the base of the PR and between d23e57b and 590c729.

📒 Files selected for processing (4)
  • .changeset/breezy-rabbits-yawn.md
  • AGENTS.md
  • docs/adr/0033-spotlight-focus-mode.md
  • src/components/spotlight-indicator.tsx

📝 Walkthrough

Walkthrough

SpotlightIndicator now renders as an icon-only header chip at every breakpoint, with “Spotlight” retained as screen-reader-only text. The component comments, ADR, agent guidance, and changeset describe the updated behavior.

Changes

Spotlight indicator presentation

Layer / File(s) Summary
Icon-only indicator behavior and documentation
src/components/spotlight-indicator.tsx, docs/adr/0033-spotlight-focus-mode.md, AGENTS.md, .changeset/breezy-rabbits-yawn.md
The button uses icon-sm, its label is always sr-only, and related documentation records the icon-only presentation and off-switch behavior.

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

Possibly related PRs

✨ 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 spotlight-indicator-icon-only

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

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

@cameronapak cameronapak merged commit 774e9e0 into main Jul 15, 2026
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant