UI/refactor #980
UI/refactor #980
Conversation
WalkthroughAdds theme selection UI with previews in DisplaySettings.vue, exposes setThemeMode from the theme store, introduces new i18n strings for theme options across multiple locales, and adjusts CSS variables (notably dark mode muted-foreground opacity). No structural logic beyond UI-to-store theme switching. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant DS as DisplaySettings.vue
participant TS as ThemeStore
participant DOM as Document/Styles
U->>DS: Select theme (light/dark/system)
DS->>DS: Guard concurrent updates (isUpdatingTheme)
DS->>TS: setThemeMode(mode)
TS->>DOM: Apply theme tokens/classes
DOM-->>DS: Theme applied (reactive state updates)
DS-->>U: UI reflects selected theme
alt Error
TS-->>DS: Throw/Reject
DS-->>U: Show failure state (reset guard)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (2)src/renderer/src/**/*📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
Files:
src/renderer/src/**📄 CodeRabbit inference engine (AGENTS.md)
Files:
🪛 Biome (2.1.2)src/renderer/src/assets/style.css[error] 63-63: Duplicate custom properties can lead to unexpected behavior and may override previous declarations unintentionally. --foreground is already defined here. Remove or rename the duplicate custom property to ensure consistent styling. (lint/suspicious/noDuplicateCustomProperties) ⏰ 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)
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 |
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/renderer/src/components/settings/DisplaySettings.vue (1)
426-426: Use English for console logs.The console.log statement contains Chinese text, which violates the guideline requiring English for all logs and comments.
As per coding guidelines
Apply this diff:
- console.log('准备切换投屏保护状态:', value) + console.log('Preparing to toggle content protection:', value)
🧹 Nitpick comments (1)
src/renderer/src/components/settings/DisplaySettings.vue (1)
350-403: LGTM! Well-structured theme implementation.The theme settings logic is well-organized with:
- Proper type safety using
ThemePreviewModetype- Clean preview styles mapping
- Concurrent update prevention with
isUpdatingThemeguard- Integration with the theme store
Optional: Consider adding user-visible error feedback when theme updates fail (currently only logs to console at line 399). You could show a toast notification or error message to inform users if the theme change doesn't complete successfully.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
src/renderer/shell/components/AppBar.vue(1 hunks)src/renderer/src/App.vue(1 hunks)src/renderer/src/assets/style.css(3 hunks)src/renderer/src/components/message/MessageList.vue(3 hunks)src/renderer/src/components/prompt-input/PromptInput.vue(1 hunks)src/renderer/src/components/settings/DisplaySettings.vue(4 hunks)src/renderer/src/i18n/en-US/settings.json(1 hunks)src/renderer/src/i18n/fa-IR/settings.json(1 hunks)src/renderer/src/i18n/fr-FR/settings.json(1 hunks)src/renderer/src/i18n/ja-JP/settings.json(1 hunks)src/renderer/src/i18n/ko-KR/settings.json(1 hunks)src/renderer/src/i18n/pt-BR/settings.json(1 hunks)src/renderer/src/i18n/ru-RU/settings.json(1 hunks)src/renderer/src/i18n/zh-CN/settings.json(1 hunks)src/renderer/src/i18n/zh-HK/settings.json(1 hunks)src/renderer/src/i18n/zh-TW/settings.json(1 hunks)src/renderer/src/stores/theme.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (20)
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/i18n/en-US/settings.jsonsrc/renderer/src/i18n/fr-FR/settings.jsonsrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/i18n/fa-IR/settings.jsonsrc/renderer/src/assets/style.csssrc/renderer/src/i18n/zh-CN/settings.jsonsrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/i18n/ko-KR/settings.jsonsrc/renderer/src/i18n/zh-TW/settings.jsonsrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/i18n/zh-HK/settings.jsonsrc/renderer/src/i18n/ja-JP/settings.jsonsrc/renderer/src/i18n/ru-RU/settings.jsonsrc/renderer/src/i18n/pt-BR/settings.jsonsrc/renderer/src/App.vuesrc/renderer/src/stores/theme.ts
src/renderer/src/**
📄 CodeRabbit inference engine (AGENTS.md)
Put application code for the Vue app under src/renderer/src (components, stores, views, i18n, lib)
Files:
src/renderer/src/i18n/en-US/settings.jsonsrc/renderer/src/i18n/fr-FR/settings.jsonsrc/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/i18n/fa-IR/settings.jsonsrc/renderer/src/assets/style.csssrc/renderer/src/i18n/zh-CN/settings.jsonsrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/i18n/ko-KR/settings.jsonsrc/renderer/src/i18n/zh-TW/settings.jsonsrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/i18n/zh-HK/settings.jsonsrc/renderer/src/i18n/ja-JP/settings.jsonsrc/renderer/src/i18n/ru-RU/settings.jsonsrc/renderer/src/i18n/pt-BR/settings.jsonsrc/renderer/src/App.vuesrc/renderer/src/stores/theme.ts
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/stores/theme.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/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/src/stores/theme.ts
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
Use scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vue
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/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/stores/theme.ts
src/renderer/**/*.{vue,ts}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/stores/theme.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.Use Pinia for frontend state management (do not introduce alternative state libraries)
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/stores/theme.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/stores/theme.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/stores/theme.ts
src/renderer/{src,shell,floating}/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/shell/components/AppBar.vue
src/renderer/src/components/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Organize UI components by feature within src/renderer/src/
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vue
src/renderer/src/**/*.{vue,ts}
📄 CodeRabbit inference engine (AGENTS.md)
All user-facing strings in the renderer must use vue-i18n keys defined in src/renderer/src/i18n
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/src/stores/theme.ts
**/*.{js,jsx,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting: single quotes, no semicolons, max width 100
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/shell/components/AppBar.vuesrc/renderer/src/stores/theme.ts
src/renderer/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue components in PascalCase (e.g., ChatInput.vue)
Files:
src/renderer/src/components/prompt-input/PromptInput.vuesrc/renderer/src/components/message/MessageList.vuesrc/renderer/src/components/settings/DisplaySettings.vuesrc/renderer/src/App.vuesrc/renderer/shell/components/AppBar.vue
src/renderer/shell/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep shell UI code in src/renderer/shell/
Files:
src/renderer/shell/components/AppBar.vue
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写
**/*.{js,jsx,ts,tsx}: Use OxLint for JS/TS code; pre-commit hooks run lint-staged and typecheck
Use camelCase for variables and functions
Use PascalCase for types and classes
Use SCREAMING_SNAKE_CASE for constants
Files:
src/renderer/src/stores/theme.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/renderer/src/stores/theme.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
src/renderer/src/stores/theme.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/theme.ts
🧠 Learnings (3)
📚 Learning: 2025-07-21T01:46:30.354Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/i18n.mdc:0-0
Timestamp: 2025-07-21T01:46:30.354Z
Learning: Applies to src/renderer/src/i18n/common.json : Shared translation keys must be placed in 'src/renderer/src/i18n/common.json'
Applied to files:
src/renderer/src/i18n/pt-BR/settings.json
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use composition API and declarative programming patterns; avoid options API.
Applied to files:
src/renderer/src/App.vue
📚 Learning: 2025-07-21T01:47:28.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-07-21T01:47:28.817Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx,js,jsx} : Use the Composition API for better code organization and reusability
Applied to files:
src/renderer/src/App.vue
🔇 Additional comments (1)
src/renderer/src/components/message/MessageList.vue (1)
57-90: Theme action buttons look consistent with the new token palette.Switching the quick-action buttons to
size="icon"with the sharedbg-card/backdrop-blurstyling keeps them aligned with the refreshed theme tokens. The updatedtext-foregroundicons read well against both light/dark surfaces in my spot checks. Nice tidy cleanup.
| --foreground: hsl(0 0 15% / 1); | ||
| --card: hsl(0 0% 100%); | ||
| --card-foreground: var(--base-800); | ||
| --card-foreground: hsl(0 0 15% / 1); | ||
| --popover: hsl(0 0% 100%); | ||
| --popover-foreground: var(--base-800); | ||
| --popover-foreground: hsl(0 0 15% / 1); | ||
| --primary: hsl(210 100% 43%); | ||
| --primary-foreground: hsl(0 0% 100%); | ||
| --secondary: var(--base-200); | ||
| --secondary-foreground: var(--base-700); | ||
| --secondary: hsl(0 0 0% / 0.05); | ||
| --secondary-foreground: hsl(0 0 15% / 0.5); | ||
| --muted: hsl(0 0 0% / 0.03); | ||
| --muted-foreground: var(--base-400); | ||
| --muted-foreground: hsl(0 0 15% / 0.5); | ||
| --accent: hsl(0 0 15% / 0.05); | ||
| --accent-foreground: hsl(0 0 15% / 0.05); | ||
| --accent-foreground: hsl(0 0 15% / 0.8); | ||
| --destructive: hsl(0 84.2% 60.2%); |
There was a problem hiding this comment.
Fix invalid HSL syntax breaking theme colors
The new light-theme tokens drop the % on the saturation channel (e.g. hsl(0 0 15% / 1)), which is invalid CSS. When these variables are substituted (e.g. color: var(--foreground)), the property fails to parse and falls back, wiping out foreground/background colors across the UI. Please add the missing percent signs so the colors compile correctly.
- --foreground: hsl(0 0 15% / 1);
- --card-foreground: hsl(0 0 15% / 1);
- --popover-foreground: hsl(0 0 15% / 1);
- --secondary: hsl(0 0 0% / 0.05);
- --secondary-foreground: hsl(0 0 15% / 0.5);
- --muted-foreground: hsl(0 0 15% / 0.5);
- --accent-foreground: hsl(0 0 15% / 0.8);
+ --foreground: hsl(0 0% 15% / 1);
+ --card-foreground: hsl(0 0% 15% / 1);
+ --popover-foreground: hsl(0 0% 15% / 1);
+ --secondary: hsl(0 0% 0% / 0.05);
+ --secondary-foreground: hsl(0 0% 15% / 0.5);
+ --muted-foreground: hsl(0 0% 15% / 0.5);
+ --accent-foreground: hsl(0 0% 15% / 0.8);Repeat the same fix for the other new HSL literals in this file (e.g. Lines 156, 214).
📝 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.
| --foreground: hsl(0 0 15% / 1); | |
| --card: hsl(0 0% 100%); | |
| --card-foreground: var(--base-800); | |
| --card-foreground: hsl(0 0 15% / 1); | |
| --popover: hsl(0 0% 100%); | |
| --popover-foreground: var(--base-800); | |
| --popover-foreground: hsl(0 0 15% / 1); | |
| --primary: hsl(210 100% 43%); | |
| --primary-foreground: hsl(0 0% 100%); | |
| --secondary: var(--base-200); | |
| --secondary-foreground: var(--base-700); | |
| --secondary: hsl(0 0 0% / 0.05); | |
| --secondary-foreground: hsl(0 0 15% / 0.5); | |
| --muted: hsl(0 0 0% / 0.03); | |
| --muted-foreground: var(--base-400); | |
| --muted-foreground: hsl(0 0 15% / 0.5); | |
| --accent: hsl(0 0 15% / 0.05); | |
| --accent-foreground: hsl(0 0 15% / 0.05); | |
| --accent-foreground: hsl(0 0 15% / 0.8); | |
| --destructive: hsl(0 84.2% 60.2%); | |
| --foreground: hsl(0 0% 15% / 1); | |
| --card: hsl(0 0% 100%); | |
| --card-foreground: hsl(0 0% 15% / 1); | |
| --popover: hsl(0 0% 100%); | |
| --popover-foreground: hsl(0 0% 15% / 1); | |
| --primary: hsl(210 100% 43%); | |
| --primary-foreground: hsl(0 0% 100%); | |
| --secondary: hsl(0 0% 0% / 0.05); | |
| --secondary-foreground: hsl(0 0% 15% / 0.5); | |
| --muted: hsl(0 0 0% / 0.03); | |
| --muted-foreground: hsl(0 0% 15% / 0.5); | |
| --accent: hsl(0 0 15% / 0.05); | |
| --accent-foreground: hsl(0 0% 15% / 0.8); | |
| --destructive: hsl(0 84.2% 60.2%); |
🤖 Prompt for AI Agents
In src/renderer/src/assets/style.css around lines 62 to 75, the HSL color
literals are using an invalid syntax by omitting the '%' on the saturation
channel (e.g. "hsl(0 0 15% / 1)" written as "hsl(0 0 15 / 1)"), causing CSS
properties that use these variables to fail; update each hsl(...) token to
include the '%' after the saturation value (and any other missing percent signs
for hue/saturation where applicable) so they become valid CSS (e.g. ensure "15"
becomes "15%"), and apply the same corrections to the other affected HSL
literals at lines ~156 and ~214 in the same file.
| class="flex items-center gap-1 text-[10px] font-medium text-slate-200/90" | ||
| > | ||
| <span class="h-2 w-2 rounded-full bg-sky-400/80"></span> | ||
| Dark |
There was a problem hiding this comment.
Replace hard-coded text with i18n keys.
The hard-coded strings "Dark" and "Light" in the system theme preview violate the i18n guideline. All user-facing strings in the renderer must use translation keys.
As per coding guidelines
Apply this diff to use i18n keys:
- Dark
+ {{ t('settings.common.themeDark') }}- Light
+ {{ t('settings.common.themeLight') }}Also applies to: 151-151
🤖 Prompt for AI Agents
In src/renderer/src/components/settings/DisplaySettings.vue around lines 141 and
151, replace the hard-coded "Dark" and "Light" strings in the system theme
preview with i18n translation keys; update the template to call the project's
i18n function (e.g. $t('settings.theme.dark') and $t('settings.theme.light') or
the project's established keys), and add corresponding keys/values to the
renderer locale files (for example en.json and other locales) so the
translations exist.
add theme settings
Summary by CodeRabbit
New Features
Style