feat(sidebar): add animated theme toggle button - #1722
Merged
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a sidebar theme toggle that cycles theme modes, registers an animated line‑md icon collection, suppresses CSS transitions during theme swaps, and adds localized labels across multiple chat.json files. ChangesTheme Toggle Feature
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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)
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 |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/renderer/src/components/WindowSideBar.vue`:
- Around line 100-114: The theme toggle Button
(data-testid="window-sidebar-theme-toggle") is icon-only and missing an
accessible name; add an aria-label and title to that Button using the localized
label and current mode (e.g., combine t('chat.sidebar.themeToggle') and
themeModeLabel) so assistive tech can announce it; ensure the attributes are
kept in sync with the icon/state and reference the existing
themeStore.cycleTheme() click handler and themeIcon/themeModeLabel values when
building the label.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 91646a43-d67f-41d0-b4aa-6813aafc6696
📒 Files selected for processing (23)
src/renderer/src/components/WindowSideBar.vuesrc/renderer/src/i18n/da-DK/chat.jsonsrc/renderer/src/i18n/de-DE/chat.jsonsrc/renderer/src/i18n/en-US/chat.jsonsrc/renderer/src/i18n/es-ES/chat.jsonsrc/renderer/src/i18n/fa-IR/chat.jsonsrc/renderer/src/i18n/fr-FR/chat.jsonsrc/renderer/src/i18n/he-IL/chat.jsonsrc/renderer/src/i18n/id-ID/chat.jsonsrc/renderer/src/i18n/it-IT/chat.jsonsrc/renderer/src/i18n/ja-JP/chat.jsonsrc/renderer/src/i18n/ko-KR/chat.jsonsrc/renderer/src/i18n/ms-MY/chat.jsonsrc/renderer/src/i18n/pl-PL/chat.jsonsrc/renderer/src/i18n/pt-BR/chat.jsonsrc/renderer/src/i18n/ru-RU/chat.jsonsrc/renderer/src/i18n/tr-TR/chat.jsonsrc/renderer/src/i18n/vi-VN/chat.jsonsrc/renderer/src/i18n/zh-CN/chat.jsonsrc/renderer/src/i18n/zh-HK/chat.jsonsrc/renderer/src/i18n/zh-TW/chat.jsonsrc/renderer/src/lib/iconLoader.tssrc/renderer/src/lib/icons/line-md-theme.json
Comment on lines
+100
to
+114
| <Button | ||
| data-testid="window-sidebar-theme-toggle" | ||
| class="flex items-center justify-center w-9 h-9 rounded-xl bg-transparent border-none hover:bg-white/30 dark:hover:bg-white/10 shadow-none" | ||
| @click="themeStore.cycleTheme()" | ||
| > | ||
| <span class="theme-icon-wrap"> | ||
| <Transition name="theme-icon"> | ||
| <Icon :key="themeIcon" :icon="themeIcon" class="theme-icon text-foreground/90" /> | ||
| </Transition> | ||
| </span> | ||
| </Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="right"> | ||
| {{ t('chat.sidebar.themeToggle') }} · {{ themeModeLabel }} | ||
| </TooltipContent> |
Contributor
There was a problem hiding this comment.
Add an accessible name to the icon-only theme button.
The new toggle button is icon-only and currently lacks aria-label/title, so assistive tech gets an unlabeled control.
Suggested fix
<Button
data-testid="window-sidebar-theme-toggle"
+ :aria-label="`${t('chat.sidebar.themeToggle')} · ${themeModeLabel}`"
+ :title="`${t('chat.sidebar.themeToggle')} · ${themeModeLabel}`"
class="flex items-center justify-center w-9 h-9 rounded-xl bg-transparent border-none hover:bg-white/30 dark:hover:bg-white/10 shadow-none"
`@click`="themeStore.cycleTheme()"
>📝 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.
Suggested change
| <Button | |
| data-testid="window-sidebar-theme-toggle" | |
| class="flex items-center justify-center w-9 h-9 rounded-xl bg-transparent border-none hover:bg-white/30 dark:hover:bg-white/10 shadow-none" | |
| @click="themeStore.cycleTheme()" | |
| > | |
| <span class="theme-icon-wrap"> | |
| <Transition name="theme-icon"> | |
| <Icon :key="themeIcon" :icon="themeIcon" class="theme-icon text-foreground/90" /> | |
| </Transition> | |
| </span> | |
| </Button> | |
| </TooltipTrigger> | |
| <TooltipContent side="right"> | |
| {{ t('chat.sidebar.themeToggle') }} · {{ themeModeLabel }} | |
| </TooltipContent> | |
| <Button | |
| data-testid="window-sidebar-theme-toggle" | |
| :aria-label="`${t('chat.sidebar.themeToggle')} · ${themeModeLabel}`" | |
| :title="`${t('chat.sidebar.themeToggle')} · ${themeModeLabel}`" | |
| class="flex items-center justify-center w-9 h-9 rounded-xl bg-transparent border-none hover:bg-white/30 dark:hover:bg-white/10 shadow-none" | |
| `@click`="themeStore.cycleTheme()" | |
| > | |
| <span class="theme-icon-wrap"> | |
| <Transition name="theme-icon"> | |
| <Icon :key="themeIcon" :icon="themeIcon" class="theme-icon text-foreground/90" /> | |
| </Transition> | |
| </span> | |
| </Button> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/renderer/src/components/WindowSideBar.vue` around lines 100 - 114, The
theme toggle Button (data-testid="window-sidebar-theme-toggle") is icon-only and
missing an accessible name; add an aria-label and title to that Button using the
localized label and current mode (e.g., combine t('chat.sidebar.themeToggle')
and themeModeLabel) so assistive tech can announce it; ensure the attributes are
kept in sync with the icon/state and reference the existing
themeStore.cycleTheme() click handler and themeIcon/themeModeLabel values when
building the label.
切换主题时临时禁用所有过渡，避免上百个带 transition-colors 的元素同时触发 220ms 颜色过渡造成的重绘卡顿。过渡仅在切换 当帧禁用，下一帧恢复，不影响日常 hover 等交互。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
68cc46c93f4a58d422bcc1b155764778_raw.mp4
Summary by CodeRabbit
New Features
Bug Fixes / Improvements