refactor(web): the new design is the only design, with no toggle#25778

merged2
main
t3/remove-redesign-toggle
opened16d agobyTtheo
View on GitHubTwo-way sync enabledPR last imported 15d ago

The new design shipped and is the default, but the "New design" switch in Settings β†’ Appearance and the old classic look were still in the code. Every redesigned element carried two styles, which made the UI harder to change. Turning the switch off showed a half-maintained old look.

The new design is now the only design. Users see no change if they never turned the switch off, which was the default.

  • Switch removed: the setting, its Appearance row, its settings search entry, and its "Restore defaults" entry. Saved settings that still have the old key load fine; the key is dropped.
  • Two styles become one:
    • The redesign: Tailwind variant and the data-redesign attribute are gone. Every redesign: class is now a plain class.
    • The html[data-redesign] CSS rules are unconditional, with the same cascade.
    • Classic-only code is deleted: the old compact pill, old shelf counts, classic model picker rows, and the chat-centering flag in the canvas layout.
  • Tech debt from the switch:
    • The diff worker pool no longer listens to every settings change.
    • The unused pierre-light syntax theme is dropped, so light code always uses the readable palette.
    • Hidden-but-rendered DOM is no longer rendered: the sidebar meta line and the usage period controls on Limits.
  • Fixed along the way:
    • The launch splash, theme-color, and the desktop window background used the old #0a0a0a dark canvas, so dark mode flashed gray before the app's true black. They now use #000.
    • Dragging the active sidebar row in light mode now shows the same drag shadow as other rows. A leftover classic style hid it.

Before / after

Settings β†’ Appearance β†’ Interface. The only visible change.

Everything else renders the same as main with the new design on:

Proof:

  • I ran main and this branch on the same dev server with the same seeded data and diffed the screenshots pixel by pixel. They match except for clock labels and the text caret on these screens: the thread view in dark and light, the diff panel, the model picker, provider settings, and usage limits.
  • The diff caught two spots where dropping the redesign: prefix changed a cn() merge: the model picker's selected marker and the font preview height. Both are fixed to match main.
  • vp run check:changed passes, and the related unit and browser tests pass.

Reviewed with sol-loop: 1 round with GPT-6.1 Sol. Sol verdict: approved

Made with Claude Opus 5.5 in Claude Code, running in T3 Code.

πŸ€– Generated with Claude Code

Checks

23 successful Β· 12 skipped Β· 1 neutral
All checks passed
6285690

Added 2 commits

  • refactor(web): the new design is the only design; drop its toggle3b0cae8
  • fix(web): keep the picker rail marker and font preview height from the new design6285690
Synced from GitHub

Approvability

Verdict: Needs Human Approval

Macroscope's review found this PR requires human approval β€” This PR makes the redesigned web UI unconditional, removes the classic-design setting, and changes behavior across settings, layout, sidebar, composer, diffs, and usage surfaces. The removal of an existing product choice and the resulting default change warrant human review.

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

Synced from GitHub

Thread transfer impact

βœ… Thread transfer remains within every enforced ceiling.

ProviderMetricMain baselineThis PRImpactPR ceiling
CodexTotal thread wire4.9 KiB5.0 KiB+30 B (+0.6%)6.8 KiBβœ…
CodexThread snapshot wire3.8 KiB3.8 KiB0 B (0.0%)4.9 KiBβœ…
CodexLive turn WebSocket wire1.2 KiB1.2 KiB+30 B (+2.5%)2.0 KiBβœ…
CodexLive turn WebSocket decoded20.8 KiB20.9 KiB+41 B (+0.2%)29.3 KiBβœ…
CodexLive turn messages12+1 (+100.0%)8βœ…
ClaudeTotal thread wire5.0 KiB5.0 KiBβˆ’24 B (βˆ’0.5%)6.8 KiBβœ…
ClaudeThread snapshot wire3.8 KiB3.8 KiB0 B (0.0%)4.9 KiBβœ…
ClaudeLive turn WebSocket wire1.2 KiB1.2 KiBβˆ’24 B (βˆ’2.0%)2.0 KiBβœ…
ClaudeLive turn WebSocket decoded21.2 KiB21.2 KiBβˆ’41 B (βˆ’0.2%)29.3 KiBβœ…
ClaudeLive turn messages21βˆ’1 (βˆ’50.0%)8βœ…

Baseline: c294d63 Β· PR result: 6285690 Β· 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: 108.5 KiB
  • Claude decoded thread snapshot: 108.8 KiB

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

Synced from GitHub

Review in Change Stack β†’

No actionable comments were generated in the recent review.

External image Recent review info
External image Run configuration
External image Commits

Reviewing files that changed from the base of the PR and between c294d63b2135771dd74f0a2b57af5b501043a74b and 62856905938535156df804792d7ddaa9b31cbc89.

External image Files selected for processing: 51
  • apps/desktop/src/window/DesktopWindow.ts
  • apps/web/index.html
  • apps/web/src/appInit.tsx
  • apps/web/src/components/ChatView.tsx
  • apps/web/src/components/ComposerPromptEditorTiptap.tsx
  • apps/web/src/components/DiffPanel.tsx
  • apps/web/src/components/DiffWorkerPoolProvider.tsx
  • apps/web/src/components/GitActionsControl.tsx
  • apps/web/src/components/Sidebar.tsx
  • apps/web/src/components/ThreadStatusIndicators.tsx
  • apps/web/src/components/chat/ChatCanvas.tsx
  • apps/web/src/components/chat/ChatComposer.tsx
  • apps/web/src/components/chat/ComposerPrimaryActions.tsx
  • apps/web/src/components/chat/ModelListRow.tsx
  • apps/web/src/components/chat/ModelPickerContent.tsx
  • apps/web/src/components/chat/ModelPickerSidebar.tsx
  • apps/web/src/components/chat/ThreadDetailsControl.tsx
  • apps/web/src/components/chat/ThreadDetailsPrRow.tsx
  • apps/web/src/components/chat/ThreadDetailsPrRows.tsx
  • apps/web/src/components/chat/ThreadRelationshipsControl.tsx
  • apps/web/src/components/chat/ThreadStatusLine.tsx
  • apps/web/src/components/chat/TraitsPicker.tsx
  • apps/web/src/components/chat/canvasStore.test.ts
  • apps/web/src/components/chat/canvasStore.ts
  • apps/web/src/components/chat/chatCanvasLayout.test.ts
  • apps/web/src/components/chat/chatCanvasLayout.ts
  • apps/web/src/components/pullRequest/PullRequestGhosts.tsx
  • apps/web/src/components/settings/AppearanceSettingsPanel.tsx
  • apps/web/src/components/settings/ProviderInstanceCard.tsx
  • apps/web/src/components/settings/ProviderModelsSection.tsx
  • apps/web/src/components/settings/ProviderSettingsPanel.tsx
  • apps/web/src/components/settings/SettingsFontPreviews.tsx
  • apps/web/src/components/settings/SettingsPanels.tsx
  • apps/web/src/components/settings/ThemePreviewCircles.tsx
  • apps/web/src/components/settings/ThemeSettings.tsx
  • apps/web/src/components/settings/settingsSearch.ts
  • apps/web/src/components/sidebar/SidebarListMarkers.tsx
  • apps/web/src/components/sidebar/SidebarThreadHeader.tsx
  • apps/web/src/components/sidebar/SidebarThreadRow.tsx
  • apps/web/src/components/ui/button.tsx
  • apps/web/src/components/ui/collapsible-section-header.tsx
  • apps/web/src/components/ui/combobox.tsx
  • apps/web/src/components/ui/command.tsx
  • apps/web/src/components/ui/kbd.tsx
  • apps/web/src/components/usage/UsageLimitsPooled.tsx
  • apps/web/src/components/usage/UsagePage.tsx
  • apps/web/src/index.css
  • apps/web/src/lib/diffRendering.ts
  • apps/web/src/lib/incrementalHighlighting.ts
  • apps/web/src/lib/syntaxHighlighting.ts
  • packages/contracts/src/settings.ts
External image Files with no reviewable changes: 10
  • apps/web/src/components/settings/SettingsPanels.tsx
  • packages/contracts/src/settings.ts
  • apps/web/src/appInit.tsx
  • apps/web/src/components/ChatView.tsx
  • apps/web/src/components/settings/AppearanceSettingsPanel.tsx
  • apps/web/src/components/chat/canvasStore.test.ts
  • apps/web/src/components/chat/canvasStore.ts
  • apps/web/src/components/chat/ChatCanvas.tsx
  • apps/web/src/components/GitActionsControl.tsx
  • apps/web/src/components/settings/settingsSearch.ts

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

Walkthrough

The pull request removes the New design toggle and its conditional styling paths. It makes the selected chat, sidebar, settings, usage, and diff behavior unconditional, updates chat-canvas positioning, and changes dark-mode backgrounds to pure black.

Changes: Default interface and appearance

Layer / File(s)Summary
Remove the redesign setting and update default appearance
packages/contracts/src/settings.ts, apps/web/src/appInit.tsx, apps/web/src/components/settings/AppearanceSettingsPanel.tsx, apps/web/src/components/settings/settingsSearch.ts, apps/web/src/components/settings/SettingsPanels.tsx, apps/web/src/index.css, apps/web/index.html, apps/desktop/src/window/DesktopWindow.ts
The client settings contract and appearance controls no longer include the redesign setting. Startup no longer toggles data-redesign. Dark-mode boot and canvas backgrounds change to black, and the selected global styles apply without the redesign variant.
Unify chat and model-picker behavior
apps/web/src/components/ChatView.tsx, apps/web/src/components/chat/*
The chat canvas resolves its position beside details cards without centerBesideDetails. Chat controls, composer, and model picker no longer branch on the redesign setting.
Unify sidebar and shared controls
apps/web/src/components/Sidebar.tsx, apps/web/src/components/ThreadStatusIndicators.tsx, apps/web/src/components/sidebar/*, apps/web/src/components/ui/*, apps/web/src/components/pullRequest/PullRequestGhosts.tsx
Sidebar rows, section counts, and shared controls use the selected styles and rendering without redesign-specific variants. Slim sidebar rows no longer render the PR badge.
Unify settings and usage surfaces
apps/web/src/components/settings/*, apps/web/src/components/usage/*
Provider and appearance settings use consistent layouts and focus styles. Usage period controls are omitted when Limits is selected, and the pooled percentage is shown only when the account name is shown.
Update diff theme and controls
apps/web/src/components/DiffPanel.tsx, apps/web/src/components/DiffWorkerPoolProvider.tsx, apps/web/src/lib/diffRendering.ts, apps/web/src/lib/incrementalHighlighting.ts, apps/web/src/lib/syntaxHighlighting.ts, apps/web/src/index.css
Diff theme selection no longer checks data-redesign; the light theme uses the readable palette. Diff controls and worker subscriptions use the updated theme behavior and types.

Priority: External image Low

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

Change: Refactor

Possibly related issues

  • Issue 25132 concerns a white app border in dark mode. This change makes the desktop dark-mode window background black.

Possibly related PRs

  • pingdotgg/t3code#24837: It implements the broader web design changes that this pull request makes unconditional.
  • pingdotgg/t3code#25251: It adds the redesigned model picker, chat canvas, details controls, and dark colors that this pull request retains as the only implementation.
  • pingdotgg/t3code#25277: It extends the redesign to diff, usage, and other UI surfaces that this pull request makes unconditional.

Suggested reviewers: juliusmarminge, maria-rcks

Merge Risk: External image Minimal Β· up to 62856

No actionable issue remains from this review; the change is ready for normal merge checks.

Pre-merge checks: Passed 3 Β· Failed 1

Failed Failed checks: 1 warning

Check nameStatusExplanationResolution
Description checkWarningThe description explains the problem, implementation, visual impact, screenshots, verification steps, test results, and agent usage. However, it does not follow the required section structure and does…Organize the description under Problem, Change, Scope and approval, and Verification headings. Add a link to the triaged issue or maintainer discussion, including the explicit approval comment. If no prior approval applies, explain why this…
Passed Passed checks: 3 passed
Check nameStatusExplanation
Title checkPassedThe title clearly and concisely describes the primary change: removing the design toggle and making the new design the only design.
Linked Issues checkPassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes checkPassedCheck skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description explains the problem, implementation, visual impact, screenshots, verification steps, test results, and agent usage. However, it does not follow the required section structure and does not provide the required Scope and approval information, such as a triaged issue or explicit maintainer approval with a link and approval comment.

Resolution

Organize the description under Problem, Change, Scope and approval, and Verification headings. Add a link to the triaged issue or maintainer discussion, including the explicit approval comment. If no prior approval applies, explain why this change qualifies for the exemption. Keep the existing screenshots and specific verification results under Verification.

Finishing Touches
πŸ“ Generate docstrings
  • Commit to this branch
  • Create a new PR
πŸ§ͺ Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix Β· Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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