feat(settings): add configurable chat font size (#157)#276
feat(settings): add configurable chat font size (#157)#276proyectoauraorg wants to merge 4 commits into
Conversation
proyectoauraorg
requested review from
JamesRobert20,
edelauna,
hannesrudolph,
navedmerchant and
taltas
as code owners
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (29)
✅ Files skipped from review due to trivial changes (10)
🚧 Files skipped from review as they are similar to previous changes (18)
📝 WalkthroughWalkthroughAdds a nullable ChangesChat Font Size Setting Feature
Sequence Diagram(s)Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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
packages/types/src/global-settings.tsESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. packages/types/src/vscode-extension-host.tsESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox. src/core/webview/ClineProvider.tsESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
edelauna
left a comment
edelauna
left a comment
There was a problem hiding this comment.
Should this be modeled as a scale relative to VS Code’s current font size instead of an absolute pixel value? If the default is meant to inherit VS Code, using a multiplier/percent would preserve the user’s existing VS Code font baseline across machines while still allowing chat-specific enlargement.
Also could you include some screen recordings of how this looks on max size.
|
@edelauna addressed all three in
All green locally (SettingsView/UISettings/ExtensionStateContext specs + tsc + eslint). One note: I verified behavior via the unit tests but not visually — if you'd like a screenshot of the chat at a couple of sizes, I can capture one. Ready for another look — thanks! 🦘 |
The Zoo Code chat font could not be sized independently of VS Code's UI zoom. Adds an optional chatFontSize setting (px, 8-32) surfaced as a slider with a 'Use VS Code default' reset in the UI settings section. When unset the appearance is unchanged: the --zoo-chat-font-size CSS var defaults to --vscode-font-size, and the webview text scale derives from it. When set, the value is applied to the document root and persisted via the generic updateSettings path (nullish + null-on-reset, matching allowedMaxRequests). Includes init-vs-user-edit webview tests and full i18n for all 18 locales. Closes Zoo-Code-Org#157
proyectoauraorg
force-pushed
the
feat/157-configurable-chat-font-size
branch
from
03a1df2 to
a046159
Compare
edelauna
left a comment
edelauna
left a comment
There was a problem hiding this comment.
Nice - going to try and test this either tonight or tomorrow. Had some additional questions.
| const handleChatFontSizeChange = (value: number) => { | ||
| setCachedStateField("chatFontSize", value) | ||
| } | ||
|
|
||
| const handleChatFontSizeReset = () => { | ||
| setCachedStateField("chatFontSize", undefined) | ||
| } |
There was a problem hiding this comment.
The other two handlers in this file both emit a telemetry event — should these do the same? Something like ui_settings_chat_font_size_changed (with value) and ui_settings_chat_font_size_reset would keep the feature visible in analytics.
| const slider = within(content).getByTestId("chat-font-size-slider") | ||
|
|
||
| // Pick a size, then Save — the boundary should forward it to the host. | ||
| fireEvent.change(slider, { target: { value: "18" } }) |
There was a problem hiding this comment.
Does fireEvent.change on the Radix <Slider> root element actually reach onValueChange? The matching UISettings.spec.tsx test drives the slider via fireEvent.keyDown(slider, { key: "ArrowRight" }) on the [role="slider"] thumb — if this change event is silently ignored, the assertion below might be passing because chatFontSize was already 18 in the initial mock state rather than because the interaction worked.
…rg#157) The chat font size change/reset handlers now emit telemetry like the other UI settings handlers in this file (ui_settings_chat_font_size_changed with the value, and ui_settings_chat_font_size_reset). Covered by UISettings spec.
2 participants
Summary
The Zoo Code chat font was small on laptops/small screens and could only be enlarged by zooming the entire VS Code UI (which also scales the editor). This adds an independent, configurable chat font size.
Change
chatFontSizesetting (integer px, bounds 8–32,nullish) in global settings, threaded throughClineProviderstate.--zoo-chat-font-sizedefaults to--vscode-font-size; the webview text scale (--text-xs/sm/base/lg) andbodyfont-size derive from it. Appearance is unchanged when unset.useEffectapplies the override to the document root when set and removes it on reset.allowedMaxRequestsnullish/reset pattern.Tests & i18n
UISettings.spec.tsx: init default display, configured value, user-edit persistence, reset enable/clear.ExtensionStateContext.spec.tsx: CSS var not set on init (unset), set on edit, cleared on reset.find-missing-translationspasses).Closes #157
Summary by CodeRabbit
New Features
Style
Localization
Tests