fix(renderer): apply custom font to shell tab bar and tooltip overlay #1188

yyhhyyyyyy · 2025-12-17T02:21:38Z

This PR ensures the configured custom font is applied consistently in the renderer. The shell tab bar and tooltip overlay now respect the custom font instead of falling back to the system default.

Summary by CodeRabbit

New Features
- Implemented comprehensive font management system with support for dynamic font family updates throughout the application and tooltip interfaces.
Refactor
- Reorganized font utility functions and constants into a dedicated library module for improved code maintainability and reusability.
Chores
- Added development tool version specifications.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

chatgpt-codex-connector · 2025-12-17T02:21:46Z

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

coderabbitai · 2025-12-17T02:21:49Z

Walkthrough

The changes establish font management integration throughout the renderer, introducing a new font utilities library and applying dynamic font handling to the app shell and tooltip overlay via IPC event listeners and startup initialization.

Changes

Cohort / File(s)	Summary
Font Utilities Library `src/renderer/src/lib/fontStack.ts`	New module exporting DEFAULT_TEXT_FONT_STACK, DEFAULT_CODE_FONT_STACK constants and buildFontStack() function to compose font-family strings with custom and fallback options.
App Shell Font Management `src/renderer/shell/App.vue`	Imports and invokes setupFontListener during module initialization alongside onMounted logic, establishing font event handling at startup.
Tooltip Overlay Font Handling `src/renderer/shell/tooltip-overlay/main.ts`	Adds async font initialization via initFonts(), IPC listeners for FONT_FAMILY_CHANGED and CODE_FONT_FAMILY_CHANGED events, and applies font families to CSS variables.
Store Refactoring `src/renderer/src/stores/uiSettingsStore.ts`	Removes local font utility definitions and imports buildFontStack, DEFAULT_TEXT_FONT_STACK, DEFAULT_CODE_FONT_STACK from new font utilities library.
Configuration `mise.toml`	New tool version configuration specifying node "24" and pnpm "latest".

Sequence Diagram

sequenceDiagram
    participant App as App Shell
    participant Config as Config Presenter
    participant Tooltip as Tooltip Overlay
    participant IPC as IPC Channel
    participant DOM as CSS Variables

    App->>App: setupFontListener (on module init)
    
    Tooltip->>Tooltip: initFonts on startup
    Tooltip->>Config: Fetch font families
    Config-->>Tooltip: Return font config
    Tooltip->>DOM: Apply font CSS variables
    Tooltip->>IPC: Register listeners
    
    IPC->>IPC: FONT_FAMILY_CHANGED event
    IPC->>DOM: Update font CSS variable
    
    IPC->>IPC: CODE_FONT_FAMILY_CHANGED event
    IPC->>DOM: Update code font CSS variable

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

src/renderer/shell/App.vue: Verify that setupFontListener() side effect during module initialization doesn't cause timing issues or unintended font load behavior before component mounting.
src/renderer/shell/tooltip-overlay/main.ts: Review async initFonts() error handling, IPC listener registration/cleanup, and ensure font CSS variable updates are applied correctly and persistently.
src/renderer/src/lib/fontStack.ts: Validate font-family string composition logic, especially quote wrapping for custom fonts with whitespace, and confirm DEFAULT_TEXT_FONT_STACK and DEFAULT_CODE_FONT_STACK fallback chains are complete.

Possibly related PRs

feat(shell): overlay tooltips for AppBar #1183: Directly complements this PR by adding font utilities and injecting dynamic font handling into tooltip-overlay and App.vue implementation.
fix: font setting not work on settings page #1169: Modifies the app's font-management flow by introducing useFontManager and setupFontListener, sharing similar font event architecture with this PR.

Poem

🐰 A rabbit hops through fonts so fine,
With stacks of text and code align,
Font listeners now spring to life,
No CSS variable strife!
CSS whispers change at last,
Config tied to present, past. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: applying custom fonts to shell tab bar and tooltip overlay, which is the core objective of this PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/font-customization-shell-tooltip

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.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (3)

mise.toml (1)
1-3: Pin specific versions for reproducibility.

Using "latest" for pnpm and an unpinned major version for Node reduces build reproducibility across environments and over time.

Apply this diff to pin specific versions:
 [tools]
-node = "24"
-pnpm = "latest"
+node = "24.0.0"
+pnpm = "10.11.0"
Based on learnings, the project requires Node.js >= 22 and pnpm >= 10.11.0.
src/renderer/shell/tooltip-overlay/main.ts (1)
59-65: Consider IPC listener cleanup.

The IPC event listeners for font changes are registered but never removed. While this may be acceptable if the tooltip overlay lives for the entire application lifetime, it's best practice to clean up listeners to prevent potential memory leaks.

If the overlay can be destroyed before app exit, consider adding cleanup:
// Store listeners for cleanup
const fontFamilyListener = (_event: unknown, value: unknown) => {
  document.documentElement.style.setProperty('--dc-font-family', toTextFontStack(value))
}

const codeFontFamilyListener = (_event: unknown, value: unknown) => {
  document.documentElement.style.setProperty('--dc-code-font-family', toCodeFontStack(value))
}

ipcRenderer.on(CONFIG_EVENTS.FONT_FAMILY_CHANGED, fontFamilyListener)
ipcRenderer.on(CONFIG_EVENTS.CODE_FONT_FAMILY_CHANGED, codeFontFamilyListener)

// Add cleanup on window unload if needed
window.addEventListener('beforeunload', () => {
  ipcRenderer.off(CONFIG_EVENTS.FONT_FAMILY_CHANGED, fontFamilyListener)
  ipcRenderer.off(CONFIG_EVENTS.CODE_FONT_FAMILY_CHANGED, codeFontFamilyListener)
})
As per coding guidelines, proper cleanup prevents resource leaks.
src/renderer/src/lib/fontStack.ts (1)
7-13: Consider edge cases in font name handling.

The buildFontStack function handles common cases well, but has edge cases:

If custom = "My Font", Arial, the result would be "My Font", Arial, ${fallback}, potentially creating redundant fallback entries.

If custom = My, Font (font name containing comma without quotes), it won't be wrapped despite needing quotes.

The current implementation is pragmatic for typical usage, but consider documenting expected input format or adding validation.

Optionally, add a comment documenting the expected format:
+/**
+ * Builds a font-family CSS value by prepending a custom font to a fallback stack.
+ * @param custom - A single font name (will be auto-quoted if it contains spaces)
+ * @param fallback - The fallback font stack
+ * @returns Combined font-family value
+ * @example buildFontStack('Inter', 'sans-serif') // => 'Inter, sans-serif'
+ * @example buildFontStack('Source Sans Pro', 'sans-serif') // => '"Source Sans Pro", sans-serif'
+ */
 export const buildFontStack = (custom: string, fallback: string) => {

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b8f923e and b4c5b8d.

📒 Files selected for processing (5)

mise.toml (1 hunks)
src/renderer/shell/App.vue (1 hunks)
src/renderer/shell/tooltip-overlay/main.ts (2 hunks)
src/renderer/src/lib/fontStack.ts (1 hunks)
src/renderer/src/stores/uiSettingsStore.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (24)

**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for logs and comments (Chinese text exists in legacy code, but new code should use English)

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts
src/renderer/shell/App.vue

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Enable and maintain strict TypeScript type checking for all files

**/*.{ts,tsx}: Always use try-catch to handle possible errors in TypeScript code
Provide meaningful error messages when catching errors
Log detailed error logs including error details, context, and stack traces
Distinguish and handle different error types (UserError, NetworkError, SystemError, BusinessError) with appropriate handlers in TypeScript
Use structured logging with logger.error(), logger.warn(), logger.info(), logger.debug() methods from logging utilities
Do not suppress errors (avoid empty catch blocks or silently ignoring errors)
Provide user-friendly error messages for user-facing errors in TypeScript components
Implement error retry mechanisms for transient failures in TypeScript
Avoid logging sensitive information (passwords, tokens, PII) in logs

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts

src/renderer/**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Use the usePresenter.ts composable for renderer-to-main IPC communication to call presenter methods directly

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts

**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Do not include AI co-authoring information (e.g., 'Co-Authored-By: Claude') in git commits

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts

**/*.{js,ts,jsx,tsx,mjs,cjs}

📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)

Write logs and comments in English

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts

{src/main/presenter/**/*.ts,src/renderer/**/*.ts}

📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)

Implement proper inter-process communication (IPC) patterns using Electron's ipcRenderer and ipcMain APIs

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts

src/renderer/src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)

src/renderer/src/**/*.{vue,ts,tsx}: All user-facing strings must use i18n keys with vue-i18n framework in the renderer
Import and use useI18n() composable with the t() function to access translations in Vue components and TypeScript files
Use the dynamic locale.value property to switch languages at runtime
Avoid hardcoding user-facing text and ensure all user-visible text uses the i18n translation system

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.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 in Pinia stores
Implement proper state persistence for maintaining data across sessions in Pinia stores
Use getters for computed state properties in Pinia stores
Utilize actions for side effects and asynchronous operations in Pinia stores
Keep Pinia stores focused on global state, not component-specific data

Files:

src/renderer/src/stores/uiSettingsStore.ts

src/**/*

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

New features should be developed in the src directory

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts
src/renderer/shell/App.vue

src/renderer/**/*.{vue,js,ts}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

Renderer process code should be placed in src/renderer (Vue 3 application)

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts
src/renderer/shell/App.vue

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 in Vue.js applications
Implement proper state management with Pinia in Vue.js applications
Utilize Vue Router for navigation and route management in Vue.js applications
Leverage Vue's built-in reactivity system for efficient data handling

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts

src/renderer/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,tsx,vue}: Write concise, technical TypeScript code with accurate examples
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
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

Vue 3 app code in src/renderer/src should be organized into components/, stores/, views/, i18n/, lib/ directories with shell UI in src/renderer/shell/

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts
src/renderer/shell/App.vue

src/renderer/**

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Use lowercase with dashes for directories (e.g., components/auth-wizard)

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts
src/renderer/shell/App.vue

src/renderer/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Use TypeScript for all code; prefer types over interfaces

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts

src/renderer/**/stores/*.ts

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Use Pinia for state management

Files:

src/renderer/src/stores/uiSettingsStore.ts

src/renderer/**/*.{ts,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching
Leverage ref, reactive, and computed for reactive state management
Use provide/inject for dependency injection when appropriate
Use Iconify/Vue for icon implementation

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts
src/renderer/shell/App.vue

src/renderer/src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

src/renderer/src/**/*.{ts,tsx,vue}: Use TypeScript with Vue 3 Composition API for the renderer application
All user-facing strings must use vue-i18n keys in src/renderer/src/i18n

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts

src/renderer/src/stores/**/*.ts

📄 CodeRabbit inference engine (AGENTS.md)

Use Pinia for state management

Files:

src/renderer/src/stores/uiSettingsStore.ts

src/**/*.{ts,tsx,vue,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use Prettier with single quotes, no semicolons, and 100 character width

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts
src/renderer/shell/App.vue

src/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use OxLint for linting JavaScript and TypeScript files

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,tsx}: Use camelCase for variable and function names in TypeScript files
Use PascalCase for type and class names in TypeScript
Use SCREAMING_SNAKE_CASE for constant names

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts

src/**/*.ts

📄 CodeRabbit inference engine (AGENTS.md)

Use EventBus for inter-process communication events

Files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/src/lib/fontStack.ts
src/renderer/shell/tooltip-overlay/main.ts

**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.vue: Use Vue 3 Composition API for all components instead of Options API
Use Tailwind CSS with scoped styles for component styling

Files:

src/renderer/shell/App.vue

src/renderer/**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

src/renderer/**/*.vue: All user-facing strings must use i18n keys via vue-i18n for internationalization
Ensure proper error handling and loading states in all UI components
Implement responsive design using Tailwind CSS utilities for all UI components

src/renderer/**/*.vue: Use composition API and declarative programming patterns; avoid options API
Structure files: exported component, composables, helpers, static content, types
Use PascalCase for component names (e.g., AuthWizard.vue)
Use Vue 3 with TypeScript, leveraging defineComponent and PropType
Use template syntax for declarative rendering
Use Shadcn Vue, Radix Vue, and Tailwind for components and styling
Implement responsive design with Tailwind CSS; use a mobile-first approach
Use Suspense for asynchronous components
Use <script setup> syntax for concise component definitions
Prefer 'lucide:' icon family as the primary choice for Iconify icons
Import Icon component from '@iconify/vue' and use with lucide icons following pattern '{collection}:{icon-name}'

Files:

src/renderer/shell/App.vue

🧠 Learnings (27)

📚 Learning: 2025-11-25T05:26:43.510Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/i18n.mdc:0-0
Timestamp: 2025-11-25T05:26:43.510Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx} : Avoid hardcoding user-facing text and ensure all user-visible text uses the i18n translation system

Applied to files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:28:04.454Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/**/stores/*.ts : Use Pinia for state management

Applied to files:

src/renderer/src/stores/uiSettingsStore.ts

📚 Learning: 2025-11-25T05:28:20.513Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T05:28:20.513Z
Learning: Applies to src/renderer/src/stores/**/*.ts : Use Pinia for state management

Applied to files:

src/renderer/src/stores/uiSettingsStore.ts

📚 Learning: 2025-11-25T05:26:11.312Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T05:26:11.312Z
Learning: Applies to src/main/presenter/configPresenter/**/*.ts : Store and retrieve custom prompts via `configPresenter.getCustomPrompts()` for config-based data source management

Applied to files:

src/renderer/src/stores/uiSettingsStore.ts
src/renderer/shell/tooltip-overlay/main.ts

📚 Learning: 2025-11-25T05:27:20.067Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/pinia-best-practices.mdc:0-0
Timestamp: 2025-11-25T05:27:20.067Z
Learning: Applies to src/renderer/src/stores/**/*.{vue,ts,tsx,js,jsx} : Use modules to organize related state and actions in Pinia stores

Applied to files:

src/renderer/src/stores/uiSettingsStore.ts

📚 Learning: 2025-11-25T05:27:20.067Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/pinia-best-practices.mdc:0-0
Timestamp: 2025-11-25T05:27:20.067Z
Learning: Applies to src/renderer/src/stores/**/*.{vue,ts,tsx,js,jsx} : Keep Pinia stores focused on global state, not component-specific data

Applied to files:

src/renderer/src/stores/uiSettingsStore.ts

📚 Learning: 2025-11-25T05:27:20.067Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/pinia-best-practices.mdc:0-0
Timestamp: 2025-11-25T05:27:20.067Z
Learning: Applies to src/renderer/src/stores/**/*.{vue,ts,tsx,js,jsx} : Implement proper state persistence for maintaining data across sessions in Pinia stores

Applied to files:

src/renderer/src/stores/uiSettingsStore.ts

📚 Learning: 2025-11-25T05:28:04.454Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/**/*.{ts,tsx,vue} : Write concise, technical TypeScript code with accurate examples

Applied to files:

src/renderer/src/lib/fontStack.ts

📚 Learning: 2025-11-25T05:28:04.454Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/**/*.{ts,vue} : Use Iconify/Vue for icon implementation

Applied to files:

src/renderer/shell/tooltip-overlay/main.ts
src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:26:24.867Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/electron-best-practices.mdc:0-0
Timestamp: 2025-11-25T05:26:24.867Z
Learning: Applies to {src/main/presenter/**/*.ts,src/renderer/**/*.ts} : Implement proper inter-process communication (IPC) patterns using Electron's ipcRenderer and ipcMain APIs

Applied to files:

src/renderer/shell/tooltip-overlay/main.ts

📚 Learning: 2025-11-25T05:26:11.312Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T05:26:11.312Z
Learning: Applies to src/renderer/**/*.ts : Use the `usePresenter.ts` composable for renderer-to-main IPC communication to call presenter methods directly

Applied to files:

src/renderer/shell/tooltip-overlay/main.ts

📚 Learning: 2025-11-25T05:28:20.513Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T05:28:20.513Z
Learning: Applies to src/main/**/*.ts : Use the Presenter pattern in the main process for UI coordination

Applied to files:

src/renderer/shell/tooltip-overlay/main.ts

📚 Learning: 2025-11-25T05:28:04.454Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/**/composables/*.ts : Implement custom composables for reusable logic

Applied to files:

src/renderer/shell/tooltip-overlay/main.ts

📚 Learning: 2025-11-25T05:28:04.454Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/**/*.vue : Use <script setup> syntax for concise component definitions

Applied to files:

src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:27:45.545Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-11-25T05:27:45.545Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx,js,jsx} : Use the Composition API for better code organization and reusability in Vue.js applications

Applied to files:

src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:28:04.454Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/**/*.vue : Prefer 'lucide:' icon family as the primary choice for Iconify icons

Applied to files:

src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:28:04.454Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/(components|composables)/**/*.{ts,vue} : Utilize Nuxt's auto-imports feature for components and composables

Applied to files:

src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:28:20.513Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T05:28:20.513Z
Learning: Applies to src/renderer/**/*.{ts,tsx,vue} : Vue 3 app code in `src/renderer/src` should be organized into `components/`, `stores/`, `views/`, `i18n/`, `lib/` directories with shell UI in `src/renderer/shell/`

Applied to files:

src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:28:04.454Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/**/*.{ts,vue} : Leverage ref, reactive, and computed for reactive state management

Applied to files:

src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:28:04.454Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/**/*.vue : Use Shadcn Vue, Radix Vue, and Tailwind for components and styling

Applied to files:

src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:26:43.510Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/i18n.mdc:0-0
Timestamp: 2025-11-25T05:26:43.510Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx} : Import and use useI18n() composable with the t() function to access translations in Vue components and TypeScript files

Applied to files:

src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:28:04.454Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/**/composables/*.ts : Use VueUse for common composables and utility functions

Applied to files:

src/renderer/shell/App.vue

📚 Learning: 2025-11-25T05:28:20.513Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T05:28:20.513Z
Learning: Require Node ≥ 20.19 and pnpm ≥ 10.11 (pnpm only, not npm) as the project toolchain

Applied to files:

mise.toml

📚 Learning: 2025-11-25T05:26:15.929Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/development-setup.mdc:0-0
Timestamp: 2025-11-25T05:26:15.929Z
Learning: Applies to package.json : Node.js >= 22 required

Applied to files:

mise.toml

📚 Learning: 2025-11-25T05:26:15.929Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/development-setup.mdc:0-0
Timestamp: 2025-11-25T05:26:15.929Z
Learning: Applies to package.json : pnpm >= 9 required

Applied to files:

mise.toml

📚 Learning: 2025-11-25T05:26:11.312Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T05:26:11.312Z
Learning: Use `pnpm` as the package manager (required Node.js >= 20.19.0, pnpm >= 10.11.0)

Applied to files:

mise.toml

📚 Learning: 2025-11-25T05:26:15.929Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/development-setup.mdc:0-0
Timestamp: 2025-11-25T05:26:15.929Z
Learning: Use pnpm for package management

Applied to files:

mise.toml

🧬 Code graph analysis (2)

src/renderer/src/stores/uiSettingsStore.ts (1)

src/renderer/src/lib/fontStack.ts (2)

buildFontStack (7-13)

DEFAULT_TEXT_FONT_STACK (1-2)

src/renderer/shell/tooltip-overlay/main.ts (2)

src/renderer/src/composables/usePresenter.ts (1)

usePresenter (103-105)

src/renderer/src/lib/fontStack.ts (3)

buildFontStack (7-13)

DEFAULT_TEXT_FONT_STACK (1-2)

DEFAULT_CODE_FONT_STACK (4-5)

⏰ 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 (4)

src/renderer/src/stores/uiSettingsStore.ts (1)

5-5: LGTM: Clean refactoring to centralized font utilities.

The migration to shared font stack constants and the buildFontStack helper improves code maintainability and eliminates duplication.

Also applies to: 30-32

src/renderer/shell/tooltip-overlay/main.ts (2)

47-57: LGTM: Font initialization with proper error handling.

The async initialization with try-catch and warning log follows the error handling guidelines correctly.

19-22: LGTM: Defensive type checking for font values.

The typeof checks ensure safe handling of IPC event payloads, preventing runtime errors if unexpected values are received.

src/renderer/src/lib/fontStack.ts (1)

1-5: LGTM: Well-designed default font stacks.

The font stacks provide comprehensive fallbacks with emoji support for text fonts and common developer fonts for code, ensuring broad cross-platform compatibility.

coderabbitai · 2025-12-17T02:25:02Z

src/renderer/shell/App.vue

 import AppBar from './components/AppBar.vue'
 import { useDeviceVersion } from '@/composables/useDeviceVersion'
 import { useMcpStore } from '@/stores/mcp'
+import { useFontManager } from '@/composables/useFontManager'


🛠️ Refactor suggestion | 🟠 Major

Add error handling for font listener setup.

The setupFontListener() call at module scope lacks error handling. If it throws during initialization, the component won't render.

Apply this diff to add error handling:

const { setupFontListener } = useFontManager() -setupFontListener() +try { + setupFontListener() +} catch (error) { + console.error('Failed to setup font listener:', error) +}

As per coding guidelines, always use try-catch to handle possible errors and provide meaningful error messages.

Also applies to: 22-23

🤖 Prompt for AI Agents

In src/renderer/shell/App.vue around lines 16 and 22-23, the calls to setupFontListener() are invoked without any error handling which can throw during initialization and prevent the component from rendering; wrap each setupFontListener() invocation in a try-catch, log or report the caught error with a clear message (e.g. using console.error or the app logger), and ensure a safe fallback path so the component can continue rendering (do not rethrow the error).

fix(renderer): apply custom font to shell tab bar and tooltip overlay

b4c5b8d

coderabbitai bot reviewed Dec 17, 2025

View reviewed changes

zerob13 merged commit e2ede5b into dev Dec 17, 2025
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(renderer): apply custom font to shell tab bar and tooltip overlay #1188

fix(renderer): apply custom font to shell tab bar and tooltip overlay #1188

Uh oh!

yyhhyyyyyy commented Dec 17, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

chatgpt-codex-connector bot commented Dec 17, 2025

Uh oh!

coderabbitai bot commented Dec 17, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Dec 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix(renderer): apply custom font to shell tab bar and tooltip overlay #1188

fix(renderer): apply custom font to shell tab bar and tooltip overlay #1188

Uh oh!

Conversation

yyhhyyyyyy commented Dec 17, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

chatgpt-codex-connector bot commented Dec 17, 2025

Uh oh!

coderabbitai bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yyhhyyyyyy commented Dec 17, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 17, 2025 •

edited

Loading