Skip to content

feat(ui): add browser/refresh/lock icons, drop selection-state active variants - #1201

Merged
Astro-Han merged 1 commit into
devfrom
claude/browser-icons
Jun 7, 2026
Merged

feat(ui): add browser/refresh/lock icons, drop selection-state active variants#1201
Astro-Han merged 1 commit into
devfrom
claude/browser-icons

Conversation

@Astro-Han

@Astro-Han Astro-Han commented Jun 7, 2026

Copy link
Copy Markdown
Owner

Summary

Add three monoline chrome icons to the registry — browser (globe), refresh (circular arrow), lock (padlock) — and remove the three selection-state "active" icon variants: review-active, terminal-active, status-active.

Why

The three new icons are needed by the upcoming embedded-browser tab (the first shippable PR of #1186): browser marks the tab, refresh and lock sit in the address bar. Landing the icon work here keeps that PR focused on the WebContentsView wiring.

The *-active variants were never visually useful: tab/toggle selection is already shown by the chip background, so each one only added a redundant corner badge. Removing them lets RightPanelShellIcon drop its active prop and RightPanelTabStrip drop the now-unused activeTab prop (net −8 lines). sidebar-active is intentionally kept — it is the sidebar / right-panel on-state toggle, not a selection badge.

Each new glyph was generated from an imagegen sheet, traced via potrace + sharp, and fitted into the shared 0 0 20 20 viewBox the same way as the rest of the registry.

Related Issue

Part of #1186 (OpenCLI / embedded browser). Icon-prep PR ahead of the embedded-browser tab.

Human Review Status

Pending

Review Focus

  • icon.tsx: the 3 new glyph paths (keyshape fit inside the 20×20 viewBox) and the 3 deletions.
  • right-panel-tab-strip.tsx: removal of the active / activeTab props — confirm no other caller relied on them (the upstream activeTab memo is still used by the review body).

Risk Notes

Low. The only behavior change is that chip/toggle selection no longer swaps to a badge icon — selection is shown by the chip background, which is the intended design. sidebar-active is kept. No platform/packaging/docs/dependency surface was touched (the two conditional checklist items for those are left unticked for that reason).

How To Verify

eslint (4 changed files): pass
turbo typecheck: pass
e2e icon-viewbox-fit @smoke: 1 passed — every glyph incl. browser/refresh/lock renders inside 0..20 (no clipping)
right-panel-titlebar: Status(selected) and Review chips render correctly with no active badge.
  Confirmed from the captured frame; the snap's own assertion is flaky locally on a
  pre-existing file-tree keybind race (mod+\ first-press drop), unrelated to this change.

Screenshots or Recordings

Chip surface verified from a captured Chromium frame (local e2e artifact, not inlined): the right-panel tab strip shows the Status chip selected and the Review chip at rest, both rendering their icon with no active corner badge — selection is conveyed by the chip background only. The three new glyphs are not yet wired into any surface (that happens in the embedded-browser PR); their geometry is verified in Chromium by the icon-viewbox-fit smoke test above.

Checklist

  • Type label — this PR carries exactly one of bug, enhancement, task, documentation. Type labels are author-added; the labeler bot does NOT assign them. Add the label in the GitHub UI, then tick this.
  • Routing labels — this PR carries at least one of app, ui, platform, harness, ci. The labeler bot assigns these on PR open based on changed paths. Confirm the bot's choice (or override if wrong), then tick this.
  • Priority label — this PR carries exactly one of P0, P1, P2, P3. The priority-triage bot suggests one on PR open. Confirm or override, then tick this.
  • Human Review Status above is set to Pending, Approved by @<reviewer>, or Not required: <reason> (default is Pending; "not required" is restricted to bot-authored low-risk PRs).
  • I linked the related issue, or stated in Summary why there is no issue.
  • I described the review focus and any meaningful risks.
  • I replaced the example block in How To Verify with the real verification steps and the key result for each.
  • I did not introduce unrelated refactors, dependencies, generated files, or file changes beyond the stated scope.
  • (conditional) I manually checked visible UI or copy changes when needed, with screenshots or recordings. Leave unticked only if no visible UI or copy changed.
  • (conditional) I considered macOS and Windows impact for platform, packaging, updater, signing, paths, shell, or permissions changes. Leave unticked only if no platform/packaging surface was touched.
  • (conditional) I called out docs, release notes, dependencies, permissions, credentials, deletion behavior, generated content, or local file changes when relevant. Leave unticked only if none of those surfaces was touched.
  • I reviewed the final diff for unrelated changes and suspicious dependency changes.
  • I am targeting dev, and my PR title and commit messages use Conventional Commits in English.

Summary by CodeRabbit

  • Refactor

    • Simplified icon state management in UI components for improved consistency.
  • Style

    • Added new icons to the library: browser, lock, refresh, stop, stop-square, and terminal.
    • Removed terminal-active icon variant.

… variants

Add three monoline chrome icons for the upcoming embedded-browser tab (PR1):
browser (globe), refresh (circular arrow), lock (padlock). Each was generated
from an imagegen sheet, traced via potrace + sharp, and fitted into the shared
0 0 20 20 viewBox the same way as the rest of the registry.

The same change removes the three selection-state "active" icon variants that
were never visually useful: tab/toggle selection is already shown by the chip
background, so review-active / terminal-active / status-active only added a
redundant corner badge. Dropping them lets RightPanelShellIcon lose its `active`
prop and RightPanelTabStrip lose the now-unused `activeTab` prop. sidebar-active
is intentionally kept -- it is the sidebar / right-panel on-state toggle, not a
selection badge.

Verification:
- eslint (changed files) + turbo typecheck: pass
- e2e icon-viewbox-fit @smoke: pass -- every glyph incl. browser/refresh/lock
  renders inside 0..20 (no clipping)
- right-panel-titlebar: Status (selected) and Review chips render correctly with
  no active badge, confirmed from the captured frame. The snap's own assertion
  is flaky locally on a pre-existing file-tree keybind race (mod+\ first-press
  drop) unrelated to this change.
@Astro-Han Astro-Han added enhancement New feature or request P3 Low priority ui Design system and user interface labels Jun 7, 2026
@github-actions github-actions Bot added the app Application behavior and product flows label Jun 7, 2026
@coderabbitai

coderabbitai Bot commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: d7254a93-984f-4775-81de-4373c9831abd

📥 Commits

Reviewing files that changed from the base of the PR and between dbed534 and 939e2d3.

📒 Files selected for processing (4)
  • packages/app/src/components/status-popover.tsx
  • packages/app/src/pages/session/right-panel-tab-strip.tsx
  • packages/app/src/pages/session/session-side-panel.tsx
  • packages/ui/src/components/icon.tsx
💤 Files with no reviewable changes (1)
  • packages/app/src/pages/session/session-side-panel.tsx

📝 Walkthrough

Walkthrough

The PR removes active-state-driven icon switching across the session UI. Icon registry adds new glyphs and removes terminal-active. Component contracts for RightPanelShellIcon and RightPanelTabStrip drop active-state props, and implementations render fixed icon names. SessionSidePanel stops passing activeTab, and StatusPopover always uses the status icon.

Changes

Active-State Icon Removal

Layer / File(s) Summary
Icon registry updates
packages/ui/src/components/icon.tsx
Adds browser, lock, refresh, stop, stop-square, and terminal icon entries; removes terminal-active variant. IconName type set is updated accordingly.
Tab strip and popover component simplification
packages/app/src/pages/session/right-panel-tab-strip.tsx, packages/app/src/components/status-popover.tsx
RightPanelShellIcon removes active prop and hardcodes review and terminal icon names (no switching). RightPanelTabStrip removes activeTab prop, both ShellTab and SortableShellTab pass only icon to RightPanelShellIcon. StatusPopover always renders status icon.
Parent component callsite updates
packages/app/src/pages/session/session-side-panel.tsx
SessionSidePanel stops passing activeTab to RightPanelTabStrip.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • Astro-Han/pawwork#191: The main PR removes the active-state-driven review/terminal icon switching that was added in PR #191, suggesting this is a direct revert of icon variant behavior.
  • Astro-Han/pawwork#1013: Direct relation to status panel redesign work that also modifies the same right-panel tab icon rendering in right-panel-tab-strip.tsx.
  • Astro-Han/pawwork#890: Modifies the same extracted RightPanelTabStrip and RightPanelShellIcon components introduced in that PR.

Suggested labels

app

Poem

🐰 No more switching, icons stay still,
Active states take their final bow,
Terminal and review, dressed up plain,
Simpler contracts make code flow,
Clean and steady—that's the way! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title directly and accurately describes the primary change: adding three new icons and removing active-state variants.
Description check ✅ Passed The description comprehensively covers all required sections with clear explanations of what changed, why, related issues, verification steps, and review focus.
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 claude/browser-icons

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.


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 and usage tips.

@github-actions github-actions Bot added P2 Medium priority and removed P3 Low priority labels Jun 7, 2026

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested priority: P2 (includes user-path files (packages/app/src/components/status-popover.tsx, packages/app/src/pages/session/right-panel-tab-strip.tsx, packages/app/src/pages/session/session-side-panel.tsx)).

P1/P0 are reserved for maintainer confirmation. Please relabel manually if this is a release blocker, security issue, data-loss risk, or updater/runtime failure.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Code Review

This pull request simplifies icon rendering by removing active-state icons (review-active, status-active, and terminal-active) along with their associated conditional logic in components like StatusPopover and RightPanelTabStrip. Additionally, it adds new icons for browser, lock, and refresh to the icon library. There are no review comments, so I have no feedback to provide.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

@Astro-Han
Astro-Han merged commit 224a626 into dev Jun 7, 2026
37 of 38 checks passed
@Astro-Han
Astro-Han deleted the claude/browser-icons branch June 7, 2026 15:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app Application behavior and product flows enhancement New feature or request P2 Medium priority ui Design system and user interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant