Skip to content

refactor(web): field controls stop restyling Input, Select, Combobox and Command - #13206

Merged
juliusmarminge merged 1 commit into
restyle/stack-menufrom
restyle/stack-fields
Sep 23, 2026
Merged

juliusmarminge merged 1 commit into
restyle/stack-menufrom
restyle/stack-fields

Conversation

@juliusmarminge

@juliusmarminge juliusmarminge commented Sep 23, 2026 •

Copy link
Copy Markdown
Member

Form fields stop restyling Input, Select, Combobox and Command. The only components/ui change is a default: AutocompleteItem spaces its children with gap-2, like ComboboxItem content.

  • Dense toolbar inputs use Input size="compact" font="mono": the browser viewport size, the accent colour hex, and the theme editor hex field. The theme hex field is the biggest change: it becomes a normal bordered compact input instead of a borderless tinted chip.
  • Keybindings settings:
    • The header search is an InputGroup with the icon as an addon.
    • The "when" field is a compact mono InputGroupInput, with the unknown-condition warning in an end addon. The invalid state comes from aria-invalid, so it uses the standard error colour.
    • While recording a shortcut, the field no longer turns primary-coloured. The focus ring and "Press shortcut" placeholder still show it's recording.
  • Composer branch toolbar: the workspace and run-on selects lose their size overrides (sm and medium weight on mobile), and the branch picker renders ComposerControl size="xs".
  • Diff panel: the compare-against trigger is Button ghost-muted xs.
  • Legacy sidebar options: the visible-threads stepper uses the stock sm size.
  • Composer slash and mention menus: rows use the CommandItem padding and radius, so they are tighter.
  • Preview address bar: the "open in system browser" button still appears on hover, through a wrapper inside the addon. The URL no longer shifts on hover.
  • Deleted overrides, small shifts: command palette label and footer spacing, snooze field gap, project filter weight, input surfaces in the provider dialogs, the pairing textarea size, and the empty SSH host message.

no-restyle findings: 499 → 402.

No screenshots yet: these changes are verified by lint, typecheck and tests only.

Claude Opus 5.5 via Claude Code.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Refined the appearance and spacing of toolbars, menus, dialogs, settings forms, and search controls for a more consistent interface.
    • Updated browser viewport fields and color inputs with compact styling.
  • Usability
    • The “Open in system browser” action now appears on hover or keyboard focus and sits beside the preview URL field.
    • Search and condition controls in keybinding settings now group icons and warnings with their inputs.

…and Command

Drops every className restyle on the field-family ui exports (Input,
NumberField*, InputGroup*, Combobox*, Select*, Command*, Autocomplete,
Textarea). Only one ui file changes; everything else moves onto an
existing variant or size, or restructures.

Primitive change (a real concept, several consumers):
- AutocompleteItem lays its children out with gap-2, like ComboboxItem
  content already does. Its only item consumer (SSH host suggestions)
  passed gap-2 by hand; CommandItem inherits it, so the palette and
  composer menus drop their gap overrides.

Moved onto existing variants/sizes (drift, visible change accepted):
- Dense numeric/hex inputs (browser viewport width/height, provider
  accent hex, theme token hex) use Input size="compact" + font="mono"
  instead of hand-shrunk sm inputs. The theme token hex field becomes a
  normal bordered compact input instead of a borderless tinted chip.
- Keybinding "when" expression uses InputGroup + compact mono
  InputGroupInput with the unknown-condition warning as an inline-end
  addon; the header search uses InputGroup + addon icon instead of an
  absolutely placed icon and a reach-in padding override. Invalid state
  comes from aria-invalid, which the group already styles.
- Keybinding recording state drops its primary tint; the focus ring and
  "Press shortcut" placeholder carry it.
- Branch toolbar env/workspace selects and the branch combobox trigger
  lose their font/size/colour overrides; the branch trigger renders
  through ComposerControl size="xs", the owner of that resting look.
- Diff panel base-ref trigger renders as Button ghost-muted size="xs"
  instead of a hand-built button recipe.
- Legacy sidebar visible-thread stepper uses NumberField size="sm" as is.
- ComboboxItem pe-* overrides, ComboboxItem font-medium, CommandGroupLabel
  and CommandFooter spacing tweaks, CommandDialogPopup p-0 (it has no
  padding), NumberField gap tweaks, redundant bg-background on Inputs,
  Textarea and AutocompleteEmpty text tweaks, SelectValue leading-7 and
  the StorageSettings NumberFieldInput padding are deleted outright.
- ComposerCommandMenu rows use CommandItem's own padding and radius.

Restructured:
- Preview address bar: the hover-revealed "open in browser" button fades
  via a plain span inside the addon; the input no longer animates its
  padding.
- Empty project-content search renders its message as a plain <p>
  instead of styling CommandPaletteContent's panel text.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@github-actions github-actions Bot added the vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. label Sep 23, 2026
@juliusmarminge
juliusmarminge added this pull request to stack #13194 September 23, 2026 04:08
@github-actions github-actions Bot added the size:L 100-499 changed lines (additions + deletions). label Sep 23, 2026
@macroscopeapp

macroscopeapp Bot commented Sep 23, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is primarily a broad UI restyling refactor, but it also changes the shared AutocompleteItem default, automatically altering spacing for all autocomplete consumers. That product-wide default change has a wider visual blast radius than the local control cleanups.

You can add or adjust custom eligibility rules. Learn more.

@github-actions

Copy link
Copy Markdown
Contributor

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ No successful main baseline artifact is available yet. This run establishes the initial measurement.

Provider Metric Main baseline This PR Impact PR ceiling
Codex Total thread wire — 13.5 KiB — 15.1 KiB ✅
Codex Thread snapshot wire — 7.1 KiB — 7.3 KiB ✅
Codex Live turn WebSocket wire — 6.4 KiB — 7.8 KiB ✅
Codex Live turn WebSocket decoded — 56.2 KiB — 66.4 KiB ✅
Codex Live turn messages — 9 — 21 ✅
Claude Total thread wire — 13.5 KiB — 15.1 KiB ✅
Claude Thread snapshot wire — 7.1 KiB — 7.3 KiB ✅
Claude Live turn WebSocket wire — 6.4 KiB — 7.8 KiB ✅
Claude Live turn WebSocket decoded — 57.0 KiB — 66.4 KiB ✅
Claude Live turn messages — 9 — 21 ✅

Baseline: unavailable · PR result: f265549 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

  • Codex decoded thread snapshot: 114.0 KiB
  • Claude decoded thread snapshot: 114.6 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

@coderabbitai

coderabbitai Bot commented Sep 23, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 29525413-b942-4b4d-a7f3-54fb2fa9e97f

📥 Commits

Reviewing files that changed from the base of the PR and between 2585a7e and f265549.

📒 Files selected for processing (24)
  • apps/web/src/browser/BrowserDeviceToolbar.tsx
  • apps/web/src/components/BranchToolbarBranchSelector.tsx
  • apps/web/src/components/BranchToolbarEnvModeSelector.tsx
  • apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
  • apps/web/src/components/CommandPalette.tsx
  • apps/web/src/components/CommandPaletteContent.tsx
  • apps/web/src/components/CommandPaletteResults.tsx
  • apps/web/src/components/CustomSnoozeDialog.tsx
  • apps/web/src/components/DiffPanel.tsx
  • apps/web/src/components/LegacySidebar.tsx
  • apps/web/src/components/Sidebar.tsx
  • apps/web/src/components/chat/ComposerCommandMenu.tsx
  • apps/web/src/components/preview/PreviewChromeRow.tsx
  • apps/web/src/components/search/ProjectContentSearchDialog.tsx
  • apps/web/src/components/settings/AddProviderInstanceDialog.tsx
  • apps/web/src/components/settings/ConnectionsSettings.tsx
  • apps/web/src/components/settings/KeybindingsSettings.tsx
  • apps/web/src/components/settings/ProjectFaviconPickerDialog.tsx
  • apps/web/src/components/settings/ProviderAccentColorPicker.tsx
  • apps/web/src/components/settings/ProviderSettingsForm.tsx
  • apps/web/src/components/settings/StorageSettings.tsx
  • apps/web/src/components/settings/ThemeColorPicker.tsx
  • apps/web/src/components/ui/autocomplete.tsx
  • scripts/lint-restyle-ceiling.ts
💤 Files with no reviewable changes (5)
  • apps/web/src/components/settings/AddProviderInstanceDialog.tsx
  • apps/web/src/components/settings/ProviderSettingsForm.tsx
  • apps/web/src/components/chat/ComposerCommandMenu.tsx
  • apps/web/src/components/CustomSnoozeDialog.tsx
  • apps/web/src/components/Sidebar.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 3 remain after this review.


📝 Walkthrough

Walkthrough

This pull request updates styling across browser, branch, command, preview, and settings controls. It removes local class overrides, adopts compact or grouped input components in selected controls, changes the preview browser action layout, and lowers RESTYLE_CEILING from 499 to 402.

Changes

Web controls

Layer / File(s) Summary
Toolbar and navigation controls
apps/web/src/browser/BrowserDeviceToolbar.tsx, apps/web/src/components/BranchToolbar*.tsx, apps/web/src/components/DiffPanel.tsx, apps/web/src/components/LegacySidebar.tsx, apps/web/src/components/Sidebar.tsx
Browser dimension fields use compact monospace sizing and wider narrow-screen widths. Branch, environment, comparison, and sidebar controls remove or replace local styling.
Command menus and dialogs
apps/web/src/components/CommandPalette*.tsx, apps/web/src/components/CustomSnoozeDialog.tsx, apps/web/src/components/chat/ComposerCommandMenu.tsx, apps/web/src/components/search/ProjectContentSearchDialog.tsx, apps/web/src/components/settings/ProjectFaviconPickerDialog.tsx
Command, menu, and dialog controls remove local spacing or padding classes. Empty-search text styling moves to the paragraph containing the existing message.
Preview browser action
apps/web/src/components/preview/PreviewChromeRow.tsx
The URL input loses conditional right padding. The system-browser action moves into a trailing addon that becomes visible and interactive on hover or keyboard focus.
Keybinding input groups
apps/web/src/components/settings/KeybindingsSettings.tsx
The search and expression fields use input groups with addons. The expression warning appears in an inline-end addon. Capture inputs no longer apply recording-state border and background classes.
Settings inputs and autocomplete
apps/web/src/components/settings/AddProviderInstanceDialog.tsx, apps/web/src/components/settings/ConnectionsSettings.tsx, apps/web/src/components/settings/ProviderAccentColorPicker.tsx, apps/web/src/components/settings/ProviderSettingsForm.tsx, apps/web/src/components/settings/StorageSettings.tsx, apps/web/src/components/settings/ThemeColorPicker.tsx, apps/web/src/components/ui/autocomplete.tsx, scripts/lint-restyle-ceiling.ts
Settings inputs remove or replace local styling classes. Autocomplete items gain a gap. RESTYLE_CEILING changes from 499 to 402.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Refactor

Suggested reviewers: maria-rcks, t3dotgg

Merge Risk: ⚪ Minimal · up to f2655

No introduced issue identified here needs resolution before merging; proceed with normal checks.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 9.52% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 21 functions across 19 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
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.
Title check ✅ Passed The title clearly and concisely describes the main refactoring: removing custom restyling from field controls.
Description check ✅ Passed The description gives a detailed, focused summary of the changes and validation. It does not use the template headings, provide a separate rationale section, or include before-and-after screenshots fo…
  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

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

@juliusmarminge
juliusmarminge merged commit 2107939 into main Sep 23, 2026
25 of 26 checks passed
@juliusmarminge
juliusmarminge deleted the restyle/stack-fields branch September 23, 2026 04:33
cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Sep 23, 2026
…and Command (pingdotgg#13206)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
cursor Bot pushed a commit to aaditagrawal/t3code that referenced this pull request Sep 23, 2026
…and Command (pingdotgg#13206)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
github-actions Bot added a commit to omarcresp/t3code-flake that referenced this pull request Sep 23, 2026
## What's Changed
* hatch/variant functions by @juliusmarminge in pingdotgg/t3code#13191
* refactor(web): context chips render through one ContextChip component by @juliusmarminge in pingdotgg/t3code#13192
* refactor(web): ui components drop their secondary className props by @juliusmarminge in pingdotgg/t3code#13193
* refactor(web): menu triggers and items stop restyling ui/menu by @juliusmarminge in pingdotgg/t3code#13205
* refactor(web): field controls stop restyling Input, Select, Combobox and Command by @juliusmarminge in pingdotgg/t3code#13206
* refactor(web): app code stops restyling sidebar, popover, table and misc ui exports by @juliusmarminge in pingdotgg/t3code#13207
* refactor(web): Button consumers outside the composer stop restyling it by @juliusmarminge in pingdotgg/t3code#13208
* refactor(web): composer controls own their look instead of restyling ui components by @juliusmarminge in pingdotgg/t3code#13209
* chore(web): no-restyle fails lint, and the ceiling gate goes by @juliusmarminge in pingdotgg/t3code#13210
* fix(mobile): recover from screen render errors by @juliusmarminge in pingdotgg/t3code#13197
* feat(web): navigate back and forward with mod+[ and mod+] by @juliusmarminge in pingdotgg/t3code#13212
* fix(web): sort title matches by recent activity by @Yash-Singh1 in pingdotgg/t3code#13219
* test(desktop): remove redundant keyring module-load test by @t3-code[bot] in pingdotgg/t3code#13220


**Full Changelog**: pingdotgg/t3code@v0.0.43-nightly.20260923.2135...v0.0.43-nightly.20260923.2150

Upstream release: https://github.com/pingdotgg/t3code/releases/tag/v0.0.43-nightly.20260923.2150
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L 100-499 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant