feat: add Claude Code changelog link to version notifiers#820
Conversation
Add link to Claude Code Changelog in both: - Claude Code CLI status badge popover - App Update Notification dialog The link opens https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md in external browser, allowing users to check what's new in Claude Code. Also converts AppUpdateNotification to use i18n translations. Fixes AndyMik90#817
📝 WalkthroughWalkthroughAdds i18n support to update and Claude Code status UI, introduces a Claude Code Changelog external link in update UI, and updates related English and French translation files. No public API or exported signatures changed. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
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
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (3)apps/frontend/src/**/*.{ts,tsx,jsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
apps/frontend/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
apps/frontend/**/*.{ts,tsx}⚙️ CodeRabbit configuration file
Files:
🧠 Learnings (6)📓 Common learnings📚 Learning: 2025-12-30T16:38:36.314ZApplied to files:
📚 Learning: 2025-12-30T16:38:36.314ZApplied to files:
📚 Learning: 2025-12-30T16:38:36.314ZApplied to files:
📚 Learning: 2026-01-04T23:59:45.209ZApplied to files:
📚 Learning: 2025-12-30T16:38:36.314ZApplied to files:
⏰ 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). (2)
🔇 Additional comments (6)
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 |
Summary of ChangesHello @StillKnotKnown, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request enhances the user experience by integrating direct links to the Claude Code Changelog within the application's update and status notification interfaces. This allows users to easily review new features and changes before applying updates. Furthermore, the update notification system has been significantly improved with internationalization support, making it more accessible to a global user base. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a link to the Claude Code changelog in both the app update notification dialog and the Claude Code status badge popover. It also refactors the AppUpdateNotification component to use i18n for all its text, which is a great improvement for localization. The changes are well-implemented. My main feedback is to extract the duplicated changelog URL into a shared constant to improve maintainability.
| onClick={() => | ||
| window.electronAPI?.openExternal?.( | ||
| "https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md" | ||
| ) | ||
| } |
There was a problem hiding this comment.
The changelog URL is hardcoded here. This same URL is also used in ClaudeCodeStatusBadge.tsx. To improve maintainability and avoid duplication, it would be better to define this URL as a constant in a shared file (e.g., apps/frontend/src/shared/constants.ts or a new dedicated file for links) and import it in both components.
| onClick={() => | ||
| window.electronAPI?.openExternal?.( | ||
| "https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md" | ||
| ) | ||
| } |
There was a problem hiding this comment.
This hardcoded changelog URL is a duplicate of the one in AppUpdateNotification.tsx. Defining this as a shared constant would prevent the URLs from getting out of sync in the future and make updates easier.
StillKnotKnown
added
feature
![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
🤖 Fix all issues with AI agents
In @apps/frontend/src/renderer/components/AppUpdateNotification.tsx:
- Around line 188-205: Extract the hardcoded Claude Code changelog URL into a
named constant (e.g., CLAUDE_CODE_CHANGELOG_URL) at the top of the file and
replace the string literal in the Button's onClick handler (the anonymous
function that calls window.electronAPI?.openExternal) with that constant; ensure
the Button component (the one rendering the Claude Code changelog link)
references the new constant so future updates only require changing the URL in
one place.
- Line 67: The useTranslation hook in AppUpdateNotification currently requests
the unused "common" namespace; update the call to only request the "dialogs"
namespace by changing the useTranslation invocation (the const { t } =
useTranslation([...]) line) to remove "common" so it only loads "dialogs",
ensuring translations still use the "dialogs:" prefix and avoiding unnecessary
namespace loading.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
apps/frontend/src/renderer/components/AppUpdateNotification.tsxapps/frontend/src/renderer/components/ClaudeCodeStatusBadge.tsxapps/frontend/src/shared/i18n/locales/en/dialogs.jsonapps/frontend/src/shared/i18n/locales/en/navigation.jsonapps/frontend/src/shared/i18n/locales/fr/dialogs.jsonapps/frontend/src/shared/i18n/locales/fr/navigation.json
🧰 Additional context used
📓 Path-based instructions (4)
apps/frontend/src/shared/i18n/locales/**/*.json
📄 CodeRabbit inference engine (CLAUDE.md)
apps/frontend/src/shared/i18n/locales/**/*.json: Store translation strings in namespace-organized JSON files atapps/frontend/src/shared/i18n/locales/{lang}/*.jsonfor each supported language
When implementing new frontend features, add translation keys to all language files (minimum: en/.json and fr/.json)
Files:
apps/frontend/src/shared/i18n/locales/en/navigation.jsonapps/frontend/src/shared/i18n/locales/fr/dialogs.jsonapps/frontend/src/shared/i18n/locales/fr/navigation.jsonapps/frontend/src/shared/i18n/locales/en/dialogs.json
apps/frontend/src/**/*.{ts,tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Always use i18n translation keys for all user-facing text in the frontend instead of hardcoded strings
Files:
apps/frontend/src/renderer/components/AppUpdateNotification.tsxapps/frontend/src/renderer/components/ClaudeCodeStatusBadge.tsx
apps/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
useTranslation()hook with namespace prefixes (e.g., 'navigation:items.key') for accessing translation strings in React components
Files:
apps/frontend/src/renderer/components/AppUpdateNotification.tsxapps/frontend/src/renderer/components/ClaudeCodeStatusBadge.tsx
apps/frontend/**/*.{ts,tsx}
⚙️ CodeRabbit configuration file
apps/frontend/**/*.{ts,tsx}: Review React patterns and TypeScript type safety.
Check for proper state management and component composition.
Files:
apps/frontend/src/renderer/components/AppUpdateNotification.tsxapps/frontend/src/renderer/components/ClaudeCodeStatusBadge.tsx
🧠 Learnings (7)
📓 Common learnings
Learnt from: MikeeBuilds
Repo: AndyMik90/Auto-Claude PR: 661
File: apps/frontend/src/renderer/components/onboarding/OllamaModelSelector.tsx:176-189
Timestamp: 2026-01-04T23:59:45.209Z
Learning: In the AndyMik90/Auto-Claude repository, pre-existing i18n issues (hardcoded user-facing strings that should be localized) can be deferred to future i18n cleanup passes rather than requiring immediate fixes in PRs that don't introduce new i18n violations.
Learnt from: CR
Repo: AndyMik90/Auto-Claude PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-30T16:38:36.314Z
Learning: Applies to apps/frontend/src/shared/i18n/locales/**/*.json : When implementing new frontend features, add translation keys to all language files (minimum: en/*.json and fr/*.json)
📚 Learning: 2025-12-30T16:38:36.314Z
Learnt from: CR
Repo: AndyMik90/Auto-Claude PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-30T16:38:36.314Z
Learning: Applies to apps/frontend/src/shared/i18n/locales/**/*.json : When implementing new frontend features, add translation keys to all language files (minimum: en/*.json and fr/*.json)
Applied to files:
apps/frontend/src/shared/i18n/locales/en/navigation.jsonapps/frontend/src/renderer/components/AppUpdateNotification.tsxapps/frontend/src/shared/i18n/locales/fr/dialogs.jsonapps/frontend/src/shared/i18n/locales/fr/navigation.jsonapps/frontend/src/shared/i18n/locales/en/dialogs.json
📚 Learning: 2026-01-04T23:59:45.209Z
Learnt from: MikeeBuilds
Repo: AndyMik90/Auto-Claude PR: 661
File: apps/frontend/src/renderer/components/onboarding/OllamaModelSelector.tsx:176-189
Timestamp: 2026-01-04T23:59:45.209Z
Learning: In the AndyMik90/Auto-Claude repository, pre-existing i18n issues (hardcoded user-facing strings that should be localized) can be deferred to future i18n cleanup passes rather than requiring immediate fixes in PRs that don't introduce new i18n violations.
Applied to files:
apps/frontend/src/shared/i18n/locales/en/navigation.json
📚 Learning: 2025-12-30T16:38:36.314Z
Learnt from: CR
Repo: AndyMik90/Auto-Claude PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-30T16:38:36.314Z
Learning: Applies to apps/frontend/src/**/*.{ts,tsx,jsx} : Always use i18n translation keys for all user-facing text in the frontend instead of hardcoded strings
Applied to files:
apps/frontend/src/renderer/components/AppUpdateNotification.tsxapps/frontend/src/renderer/components/ClaudeCodeStatusBadge.tsx
📚 Learning: 2025-12-30T16:38:36.314Z
Learnt from: CR
Repo: AndyMik90/Auto-Claude PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-30T16:38:36.314Z
Learning: Applies to apps/frontend/src/**/*.{ts,tsx} : Use `useTranslation()` hook with namespace prefixes (e.g., 'navigation:items.key') for accessing translation strings in React components
Applied to files:
apps/frontend/src/renderer/components/AppUpdateNotification.tsxapps/frontend/src/renderer/components/ClaudeCodeStatusBadge.tsx
📚 Learning: 2026-01-04T23:59:45.209Z
Learnt from: MikeeBuilds
Repo: AndyMik90/Auto-Claude PR: 661
File: apps/frontend/src/renderer/components/onboarding/OllamaModelSelector.tsx:176-189
Timestamp: 2026-01-04T23:59:45.209Z
Learning: In the AndyMik90/Auto-Claude repository, pre-existing i18n issues (hardcoded user-facing strings) can be deferred for future i18n cleanup passes. Do not fix such issues in PRs that do not introduce new i18n violations, especially in frontend TSX components (e.g., apps/frontend/**/*.tsx). If a PR adds new i18n violations, address them in that PR.
Applied to files:
apps/frontend/src/renderer/components/AppUpdateNotification.tsxapps/frontend/src/renderer/components/ClaudeCodeStatusBadge.tsx
📚 Learning: 2025-12-30T16:38:36.314Z
Learnt from: CR
Repo: AndyMik90/Auto-Claude PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-30T16:38:36.314Z
Learning: Applies to apps/frontend/src/shared/i18n/locales/**/*.json : Store translation strings in namespace-organized JSON files at `apps/frontend/src/shared/i18n/locales/{lang}/*.json` for each supported language
Applied to files:
apps/frontend/src/renderer/components/AppUpdateNotification.tsxapps/frontend/src/shared/i18n/locales/en/dialogs.json
🧬 Code graph analysis (1)
apps/frontend/src/renderer/components/ClaudeCodeStatusBadge.tsx (2)
.design-system/src/lib/icons.ts (2)
Check(21-21)X(37-37)apps/frontend/src/renderer/components/ui/popover.tsx (1)
PopoverTrigger(36-36)
⏰ 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). (2)
- GitHub Check: CodeQL (python)
- GitHub Check: CodeQL (javascript-typescript)
🔇 Additional comments (11)
apps/frontend/src/shared/i18n/locales/fr/navigation.json (1)
47-48: LGTM! French translations are accurate and accessible.The French translations properly convey the changelog link purpose and include appropriate accessibility information in the aria label.
apps/frontend/src/shared/i18n/locales/fr/dialogs.json (1)
137-151: LGTM! Comprehensive French i18n coverage for app update flow.The new
appUpdatesection provides complete localization for the entire update workflow, including progress states, actions, and the Claude Code changelog link.apps/frontend/src/shared/i18n/locales/en/dialogs.json (1)
137-151: LGTM! Complete English i18n coverage for app update feature.The
appUpdatesection provides clear, user-friendly English translations for all app update states and actions, properly aligned with the French translations.apps/frontend/src/shared/i18n/locales/en/navigation.json (1)
47-48: LGTM! Clear English translations with proper accessibility labels.The changelog link translations are user-friendly and include appropriate accessibility information.
apps/frontend/src/renderer/components/AppUpdateNotification.tsx (1)
139-275: LGTM! Complete and correct i18n implementation.All user-facing strings have been successfully converted to use i18n translation keys with:
- Proper namespace prefixes (
dialogs:appUpdate.*)- Fallback strings for safety
- Consistent key usage matching the translation JSON files
- Preserved existing functionality and error handling
The component now fully supports localization for the app update workflow.
apps/frontend/src/renderer/components/ClaudeCodeStatusBadge.tsx (6)
1-49: LGTM! Proper setup with i18n and React best practices.The imports, hook configuration, and state management follow React and TypeScript best practices. The
useTranslationhook correctly uses namespace prefixes as per coding guidelines.
52-173: LGTM! Proper error handling and i18n implementation.The version checking logic, installation flow, and UI state helpers are well-implemented. All user-facing strings correctly use translation keys with fallback values, and error handling uses appropriate optional chaining for the Electron API.
175-293: LGTM! Well-structured UI with proper accessibility.The popover UI is properly composed with Tooltip and Popover components, includes appropriate conditional rendering, and uses translation keys throughout. The component structure follows React best practices.
296-308: LGTM! External link follows security and accessibility best practices.The Learn more link correctly uses the Electron API for opening external URLs with optional chaining, includes proper ARIA labels for accessibility, and uses i18n translation keys. This is a good pattern for external navigation.
332-352: LGTM! Update warning dialog provides good UX.The warning dialog appropriately alerts users about session closure during updates, uses clear action buttons, and follows i18n best practices with translation keys.
310-327: LGTM! Changelog link correctly implements PR requirements.The new "View Claude Code Changelog" link is properly implemented with:
- Correct URL matching the specification (https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md)
- Secure external link handling via Electron API
- Proper accessibility with aria-label and aria-hidden
- i18n translation keys defined in both English and French with proper namespace prefixes (
navigation:claudeCode.viewChangelogandnavigation:claudeCode.viewChangelogAriaLabel)- useTranslation hook correctly configured with "navigation" namespace
- Consistent pattern with the existing "Learn more" link
The implementation fulfills all requirements from issue #817 and complies with project i18n guidelines.
💡 Optional: Reduce code duplication between external links
The "Learn more" and "Changelog" links follow nearly identical patterns. Consider extracting a reusable
ExternalLinkButtoncomponent to reduce duplication:interface ExternalLinkButtonProps { url: string; label: string; ariaLabel: string; } const ExternalLinkButton = ({ url, label, ariaLabel }: ExternalLinkButtonProps) => ( <Button variant="link" size="sm" className="w-full text-xs text-muted-foreground gap-1" onClick={() => window.electronAPI?.openExternal?.(url)} aria-label={ariaLabel} > {label} <ExternalLink className="h-3 w-3" aria-hidden="true" /> </Button> );This is a low-priority suggestion and can be deferred to future refactoring efforts.
apps/frontend/src/renderer/components/AppUpdateNotification.tsx
Outdated
Show resolved
Hide resolved
- Extract CLAUDE_CODE_CHANGELOG_URL to named constant - Remove unused "common" namespace from useTranslation hook
…-code-changelog-link-to-version-notifier
AndyMik90
left a comment
AndyMik90
left a comment
There was a problem hiding this comment.
✅ Auto Claude Review - APPROVED
Status: Ready to Merge
Summary: ### Merge Verdict: ✅ READY TO MERGE
✅ Ready to merge - All checks passing, no blocking issues found.
No blocking issues. 2 non-blocking suggestion(s) to consider
Risk Assessment
| Factor | Level | Notes |
|---|---|---|
| Complexity | Medium | Based on lines changed |
| Security Impact | None | Based on security findings |
| Scope Coherence | Good | Based on structural review |
Findings Summary
- Low: 2 issue(s)
Generated by Auto Claude PR Review
💡 Suggestions (2)
These are non-blocking suggestions for consideration:
🔵 [0022a7a21feb] [LOW] Duplicate changelog URL should use shared constant
📁 apps/frontend/src/renderer/components/ClaudeCodeStatusBadge.tsx:315
The Claude Code changelog URL is hardcoded inline in ClaudeCodeStatusBadge.tsx, while the same URL is already defined as a constant (CLAUDE_CODE_CHANGELOG_URL) in AppUpdateNotification.tsx. This creates inconsistency within the PR and a minor maintenance burden if the URL ever changes.
Suggested fix:
Either: (1) Extract the URL to a shared constant that both files import, or (2) Define a local constant in ClaudeCodeStatusBadge.tsx matching the pattern in AppUpdateNotification.tsx: const CLAUDE_CODE_CHANGELOG_URL = 'https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md';
🔵 [6b4f498f48cf] [LOW] AI False Positive: No unused i18n namespace
📁 apps/frontend/src/renderer/components/AppUpdateNotification.tsx:70
CodeRabbit incorrectly flagged an 'unused common namespace' in the useTranslation hook. The actual code only declares ["dialogs"] namespace. This AI comment should be dismissed.
Suggested fix:
No action needed - this was a false positive from CodeRabbit AI reviewer.
This automated review found no blocking issues. The PR can be safely merged.
Generated by Auto Claude
StillKnotKnown
deleted the
stillknotknown/acs-170-feature-add-claude-code-changelog-link-to-version-notifier
branch
) * feat: add Claude Code changelog link to version notifiers Add link to Claude Code Changelog in both: - Claude Code CLI status badge popover - App Update Notification dialog The link opens https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md in external browser, allowing users to check what's new in Claude Code. Also converts AppUpdateNotification to use i18n translations. Fixes AndyMik90#817 * refactor: improve AppUpdateNotification code quality - Extract CLAUDE_CODE_CHANGELOG_URL to named constant - Remove unused "common" namespace from useTranslation hook --------- Co-authored-by: StillKnotKnown <stillknotknown@users.noreply.github.com>
3 participants
Summary
Details
The "View Claude Code Changelog" link opens https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md in an external browser, allowing users to quickly check what's new in Claude Code before updating.
Changes
viewChangelogandviewChangelogAriaLabelkeysappUpdatesection with all text keysFixes #817
Summary by CodeRabbit
New Features
Internationalization
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.