fix: sync font size changes across all tabs in real-time #786
Conversation
WalkthroughIntroduces a new config event FONT_SIZE_CHANGED across main and renderer. Main presenter emits this event when fontSizeLevel changes. Renderer listens and updates its fontSizeLevel state accordingly. Event constants updated in both main and renderer. No public API signatures changed. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant R as Renderer UI
participant S as Renderer Store
participant M as Main configPresenter
participant W as All BrowserWindows
User->>R: Change font size setting (fontSizeLevel)
R->>M: setSetting(key=fontSizeLevel, value)
M->>M: Persist setting
M-->>W: emit SETTING_CHANGED
M-->>W: emit FONT_SIZE_CHANGED(value) %% New
W-->>S: IPC: CONFIG_EVENTS.FONT_SIZE_CHANGED(value)
S->>S: Update fontSizeLevel and derived fontSizeClass
S-->>R: Reactive/UI updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/main/presenter/configPresenter/index.ts (1)
279-283: Broadcasting font-size changes to all windows from setSetting is correct.Special-casing 'fontSizeLevel' and using eventBus.sendToRenderer with SendTarget.ALL_WINDOWS matches the guideline “Main to Renderer: broadcast via mainWindow.webContents.send()”. No feedback loop risk since renderers don’t write back on receipt.
If you plan to gate more settings like this, consider extracting a constants map for “fan-out” settings keys to avoid stringly-typed checks:
+const FANOUT_SETTINGS_KEYS = new Set(['fontSizeLevel']) ... - if (key === 'fontSizeLevel') { + if (FANOUT_SETTINGS_KEYS.has(key)) { eventBus.sendToRenderer(CONFIG_EVENTS.FONT_SIZE_CHANGED, SendTarget.ALL_WINDOWS, value) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
src/main/events.ts(1 hunks)src/main/presenter/configPresenter/index.ts(1 hunks)src/renderer/src/events.ts(1 hunks)src/renderer/src/stores/settings.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (16)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for logs and comments
Files:
src/main/presenter/configPresenter/index.tssrc/renderer/src/events.tssrc/main/events.tssrc/renderer/src/stores/settings.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Strict type checking enabled for TypeScript
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
src/main/presenter/configPresenter/index.tssrc/renderer/src/events.tssrc/main/events.tssrc/renderer/src/stores/settings.ts
src/main/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Main to Renderer: Use EventBus to broadcast events via mainWindow.webContents.send()
Use Electron's built-in APIs for file system and native dialogs
Files:
src/main/presenter/configPresenter/index.tssrc/main/events.ts
src/main/presenter/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
One presenter per functional domain
Files:
src/main/presenter/configPresenter/index.ts
src/main/presenter/configPresenter/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Centralize configuration in configPresenter/
Files:
src/main/presenter/configPresenter/index.ts
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写
Files:
src/main/presenter/configPresenter/index.tssrc/renderer/src/events.tssrc/main/events.tssrc/renderer/src/stores/settings.ts
src/{main,renderer}/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)
src/{main,renderer}/**/*.ts: Use context isolation for improved security
Implement proper inter-process communication (IPC) patterns
Optimize application startup time with lazy loading
Implement proper error handling and logging for debugging
Files:
src/main/presenter/configPresenter/index.tssrc/renderer/src/events.tssrc/main/events.tssrc/renderer/src/stores/settings.ts
src/main/**/*.{ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
主进程代码放在
src/main
Files:
src/main/presenter/configPresenter/index.tssrc/main/events.ts
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/src/**/*.{ts,tsx,vue}: Use Pinia for frontend state management
Renderer to Main: Use usePresenter.ts composable for direct presenter method calls
Files:
src/renderer/src/events.tssrc/renderer/src/stores/settings.ts
src/renderer/src/**/*
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/events.tssrc/renderer/src/stores/settings.ts
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/events.tssrc/renderer/src/stores/settings.ts
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/events.tssrc/renderer/src/stores/settings.ts
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
src/renderer/src/events.tssrc/renderer/src/stores/settings.ts
src/renderer/**/*.{vue,ts}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/events.tssrc/renderer/src/stores/settings.ts
src/renderer/**/*.{ts,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.
Files:
src/renderer/src/events.tssrc/renderer/src/stores/settings.ts
src/renderer/src/stores/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/pinia-best-practices.mdc)
src/renderer/src/stores/**/*.{vue,ts,tsx,js,jsx}: Use modules to organize related state and actions
Implement proper state persistence for maintaining data across sessions
Use getters for computed state properties
Utilize actions for side effects and asynchronous operations
Keep the store focused on global state, not component-specific data
Files:
src/renderer/src/stores/settings.ts
🧠 Learnings (1)
📚 Learning: 2025-07-21T01:45:33.790Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T01:45:33.790Z
Learning: Applies to src/main/presenter/configPresenter/**/*.ts : Centralize configuration in configPresenter/
Applied to files:
src/main/presenter/configPresenter/index.ts
🧬 Code graph analysis (2)
src/main/presenter/configPresenter/index.ts (3)
src/main/eventbus.ts (1)
eventBus(151-151)src/main/events.ts (1)
CONFIG_EVENTS(12-37)src/renderer/src/events.ts (1)
CONFIG_EVENTS(11-26)
src/renderer/src/stores/settings.ts (2)
src/main/events.ts (1)
CONFIG_EVENTS(12-37)src/renderer/src/events.ts (1)
CONFIG_EVENTS(11-26)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
🔇 Additional comments (2)
src/main/events.ts (1)
35-36: Event added for font-size sync — looks good and aligned with naming.The new CONFIG_EVENTS.FONT_SIZE_CHANGED constant follows the existing naming scheme and domain prefix. Matches the renderer counterpart and keeps the config event family cohesive.
src/renderer/src/events.ts (1)
24-25: Renderer event constant added — in sync with main.CONFIG_EVENTS.FONT_SIZE_CHANGED mirrors main/events.ts, preventing cross-process mismatch. Trailing comma style is consistent.
| // 设置字体大小事件监听器 | ||
| setupFontSizeListener() | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Duplicate listener registration path; move or guard setupFontSizeListener to avoid double handlers.
setupProviderListener() is invoked inside initSettings() and again in onMounted(), which means setupFontSizeListener() is currently registered at least twice. This will cause duplicate event handling and jitter when FONT_SIZE_CHANGED fires. The AI summary also states it’s called directly during initialization, but in code it’s nested under setupProviderListener().
Apply this diff to prevent duplicate registration here (call it once from initSettings instead; see snippet below):
- // 设置字体大小事件监听器
- setupFontSizeListener()
+ // Font-size listener is initialized once during initSettings()Additionally, update the initialization and lifecycle (outside this hunk) as follows:
- In initSettings(), after setupCopyWithCotEnabledListener(), call setupFontSizeListener().
- In onMounted(), remove the second call to setupProviderListener() to avoid double-binding.
Example (outside changed ranges):
// inside initSettings(), near other listener setup
setupContentProtectionListener()
setupCopyWithCotEnabledListener()
setupFontSizeListener() // add this
// onMounted
onMounted(async () => {
await initSettings()
// remove: await setupProviderListener()
})Optionally, add cleanup:
cleanup = () => {
window.electron?.ipcRenderer?.removeAllListeners(CONFIG_EVENTS.FONT_SIZE_CHANGED)
// ...existing cleanup
}🤖 Prompt for AI Agents
In src/renderer/src/stores/settings.ts around lines 695-697,
setupFontSizeListener is being registered twice because setupProviderListener
(which calls setupFontSizeListener) is invoked both from initSettings and again
in onMounted; to fix, remove the second registration by calling
setupFontSizeListener once from initSettings (after
setupCopyWithCotEnabledListener) and delete the extra await
setupProviderListener() call in onMounted, and additionally either add a guard
inside setupFontSizeListener to no-op if already registered or add cleanup logic
that removes CONFIG_EVENTS.FONT_SIZE_CHANGED listeners during teardown to
prevent duplicate handlers.
| const setupFontSizeListener = () => { | ||
| window.electron.ipcRenderer.on( | ||
| CONFIG_EVENTS.FONT_SIZE_CHANGED, | ||
| (_event, newFontSizeLevel: number) => { | ||
| fontSizeLevel.value = newFontSizeLevel | ||
| } | ||
| ) | ||
| } | ||
|
|
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Make the listener idempotent and validate/clamp payload before applying.
Guard against multiple registrations and out-of-range/invalid payloads. This avoids leaks under HMR and prevents invalid class indexing.
-const setupFontSizeListener = () => {
- window.electron.ipcRenderer.on(
- CONFIG_EVENTS.FONT_SIZE_CHANGED,
- (_event, newFontSizeLevel: number) => {
- fontSizeLevel.value = newFontSizeLevel
- }
- )
-}
+const setupFontSizeListener = () => {
+ // Ensure idempotency: remove any existing handlers before binding
+ window.electron?.ipcRenderer?.removeAllListeners(CONFIG_EVENTS.FONT_SIZE_CHANGED)
+ window.electron.ipcRenderer.on(
+ CONFIG_EVENTS.FONT_SIZE_CHANGED,
+ (_event, newFontSizeLevel: number) => {
+ // Validate and clamp to valid range
+ const parsed =
+ typeof newFontSizeLevel === 'number' ? newFontSizeLevel : Number(newFontSizeLevel)
+ const clamped = Number.isFinite(parsed)
+ ? Math.max(0, Math.min(parsed, FONT_SIZE_CLASSES.length - 1))
+ : DEFAULT_FONT_SIZE_LEVEL
+ fontSizeLevel.value = clamped
+ }
+ )
+}After applying, trigger a few rapid font-size changes in one tab and confirm only one handler fires by temporarily logging inside the listener once. You should see a single log per event across tabs.
🏁 Script executed:
#!/bin/bash
# Search for the setupFontSizeListener implementation
rg -n "setupFontSizeListener" -C3 --type=ts
# Check for FONT_SIZE_CLASSES definition or usage
rg -n "FONT_SIZE_CLASSES" -C3 --type=ts
# Check for DEFAULT_FONT_SIZE_LEVEL definition or usage
rg -n "DEFAULT_FONT_SIZE_LEVEL" -C3 --type=ts
# Inspect ipcRenderer usage patterns
rg -n "ipcRenderer" -C3 --type=tsLength of output: 29703
Implement Idempotent Font-Size Listener with Input Validation
To avoid duplicate handlers during HMR and prevent out-of-range values from corrupting the UI, update the listener in src/renderer/src/stores/settings.ts as follows:
• Before registering, clear any existing "FONT_SIZE_CHANGED" handlers.
• Inside the callback, coerce non-numeric payloads, clamp to [0, FONT_SIZE_CLASSES.length-1], and default on invalid input.
Apply this diff at lines ~1439–1448:
const setupFontSizeListener = () => {
- window.electron.ipcRenderer.on(
- CONFIG_EVENTS.FONT_SIZE_CHANGED,
- (_event, newFontSizeLevel: number) => {
- fontSizeLevel.value = newFontSizeLevel
- }
- )
+ // Ensure single registration (idempotent under HMR)
+ window.electron.ipcRenderer.removeAllListeners(CONFIG_EVENTS.FONT_SIZE_CHANGED)
+ window.electron.ipcRenderer.on(
+ CONFIG_EVENTS.FONT_SIZE_CHANGED,
+ (_event, payload: unknown) => {
+ // Parse and clamp the new level
+ const raw = typeof payload === 'number' ? payload : Number(payload)
+ const valid = Number.isFinite(raw)
+ ? Math.min(Math.max(0, raw), FONT_SIZE_CLASSES.length - 1)
+ : DEFAULT_FONT_SIZE_LEVEL
+ fontSizeLevel.value = valid
+ }
+ )
}Locations to update:
src/renderer/src/stores/settings.tsaroundsetupFontSizeListener(lines 1439–1448).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const setupFontSizeListener = () => { | |
| window.electron.ipcRenderer.on( | |
| CONFIG_EVENTS.FONT_SIZE_CHANGED, | |
| (_event, newFontSizeLevel: number) => { | |
| fontSizeLevel.value = newFontSizeLevel | |
| } | |
| ) | |
| } | |
| const setupFontSizeListener = () => { | |
| // Ensure single registration (idempotent under HMR) | |
| window.electron.ipcRenderer.removeAllListeners(CONFIG_EVENTS.FONT_SIZE_CHANGED) | |
| window.electron.ipcRenderer.on( | |
| CONFIG_EVENTS.FONT_SIZE_CHANGED, | |
| (_event, payload: unknown) => { | |
| // Parse and clamp the new level | |
| const raw = typeof payload === 'number' ? payload : Number(payload) | |
| const valid = Number.isFinite(raw) | |
| ? Math.min(Math.max(0, raw), FONT_SIZE_CLASSES.length - 1) | |
| : DEFAULT_FONT_SIZE_LEVEL | |
| fontSizeLevel.value = valid | |
| } | |
| ) | |
| } |
🤖 Prompt for AI Agents
In src/renderer/src/stores/settings.ts around lines 1439–1448, the
FONT_SIZE_CHANGED listener can be registered multiple times during HMR and
accepts unvalidated payloads; before registering call
window.electron.ipcRenderer.removeAllListeners(CONFIG_EVENTS.FONT_SIZE_CHANGED)
(or the equivalent off/unsubscribe API) to ensure idempotence, then in the
callback coerce the payload to a number (e.g. Number(newFontSizeLevel)), check
for NaN and fall back to a sane default (e.g. 0), clamp the value to the valid
range [0, FONT_SIZE_CLASSES.length - 1], and only then assign
fontSizeLevel.value to the clamped value.
sync font size changes across all tabs in real-time
old:
now:
Summary by CodeRabbit