Files
vibe-kanban/frontend/src/i18n/locales/zh-Hans/common.json
Louis Knight-Webb 4a0fad03c2 Display GitHub PR comments inline in diff view (Vibe Kanban) (#1991)
* The GitHub comments integration is now complete. Here's a summary of what was implemented:

## Summary

The GitHub PR comments integration for the new UI (ui-new) is now complete. All tasks have been implemented:

### Files Modified:
1. **`useUiPreferencesStore.ts`** - Added persistence key for `showGitHubComments` toggle
2. **`WorkspaceContext.tsx`** - Extended with PR comments data, helpers (`getGitHubCommentsForFile`, `gitHubFileCommentCounts`), and toggle state
3. **`CommentCard.tsx`** (new) - Shared primitive for displaying comments with three variants: `user`, `github`, `input`
4. **`GitHubCommentRenderer.tsx`** (new) - Read-only renderer for GitHub comments with GitHub logo, author, timestamp, and external link
5. **`ReviewCommentRenderer.tsx`** - Refactored to use `CommentCard` primitive
6. **`CommentWidgetLine.tsx`** - Refactored to use `CommentCard` primitive
7. **`DiffViewCardWithComments.tsx`** - Integrated GitHub comments into diff view, showing both user and GitHub comments with separate counts in the header
8. **`FileTreeNode.tsx`** - Added GitHub comment badge showing count next to files
9. **`FileTree.tsx`** - Added toggle button in header to show/hide GitHub comments
10. **`FileTreeContainer.tsx`** - Wired up the context to pass toggle state and comment counts to FileTree
11. **`common.json`** (i18n) - Added translation keys for show/hide GitHub comments

### Features:
- GitHub PR comments displayed inline next to relevant code in diff views
- Toggle button in file tree to show/hide GitHub comments (persisted)
- Comment count badges on files in the file tree
- Visual differentiation: user comments have orange styling (`bg-brand/20 border-brand`), GitHub comments have neutral styling (`bg-secondary border-border`)
- User comments take priority when both exist on the same line

* Cleanup script changes for workspace 881e2956-9cca-406d-835f-7ea8acbe550e

* All checks pass. Let me show a summary of the changes made:

## Summary of Fixes

All code review feedback has been addressed:

| # | Fix | File | Change |
|---|-----|------|--------|
| 1 | Date parsing | `GitHubCommentRenderer.tsx:9-27` | Replaced `try/catch` with `isNaN(date.getTime())` check |
| 2 | Comment priority | `DiffViewCardWithComments.tsx:258-260` | Added comment explaining user comments take priority |
| 3 | SplitSide.new | `WorkspaceContext.tsx:163-165` | Added comment explaining why `SplitSide.new` is correct |
| 4 | Multi-repo TODO | `WorkspaceContext.tsx:133-134` | Added TODO about supporting multiple repos |
| 5 | Loading state | `FileTreeContainer.tsx`, `FileTree.tsx` | Passed `isGitHubCommentsLoading` prop and added `opacity-50 animate-pulse` to button |

Type checks pass. Ready for commit.

* Fixed! The `FileTree.tsx` now uses the correct `Tooltip` component from `@/components/ui-new/primitives/Tooltip` instead of the old `@/components/ui/tooltip`.

Changes made:
- Updated import to use `import { Tooltip } from '../primitives/Tooltip'`
- Simplified the tooltip usage from the compound component pattern (`Tooltip` + `TooltipTrigger` + `TooltipContent`) to the simpler API (`<Tooltip content="...">...</Tooltip>`)

* The path matching bug has been fixed. Here's a summary of the changes:

## Summary of Bug Fix

**Problem**: GitHub comments weren't displaying because paths didn't match.
- GitHub API returns paths like: `frontend/src/components/ui-new/actions/index.ts`
- Diff paths are prefixed with repo name: `vibe-kanban/frontend/src/components/ui-new/actions/index.ts`

**Solution**: Use `endsWith` matching instead of exact string equality.

### Files Changed:

1. **`WorkspaceContext.tsx`**:
   - Added `pathMatches` helper function that checks if paths match using `endsWith`
   - Updated `getGitHubCommentsForFile` to use `pathMatches`
   - Replaced `gitHubFileCommentCounts: Record<string, number>` with `getGitHubCommentCountForFile: (filePath: string) => number` function that also uses `pathMatches`

2. **`FileTree.tsx`**:
   - Changed prop from `fileCommentCounts?: Record<string, number>` to `getGitHubCommentCountForFile?: (filePath: string) => number`
   - Updated usage from `fileCommentCounts?.[node.path]` to `getGitHubCommentCountForFile?.(node.path)`

3. **`FileTreeContainer.tsx`**:
   - Updated to pass the new `getGitHubCommentCountForFile` function instead of `gitHubFileCommentCounts` Record

* Cleanup script changes for workspace 881e2956-9cca-406d-835f-7ea8acbe550e

* Fixed! The `renderExtendLine` function now includes a null check for `lineData.data` to prevent the TypeError when switching diff modes. The fix adds:

```typescript
// Guard against undefined data (can happen when switching diff modes)
if (!lineData.data) return null;
```

This prevents the crash when the `@git-diff-view` library passes undefined data during mode transitions.

* Done! GitHub comments will now be shown by default. The change was a simple one-liner in `WorkspaceContext.tsx`:

```typescript
// Before:
false // Default to hidden

// After:
true // Default to shown
```

* The proper fix is complete. Here's a summary of the changes:

## Summary: Comments on deleted lines fix

**Problem**: GitHub comments on deleted lines weren't showing because we were placing all comments on `SplitSide.new`.

**Solution**: Pass through the `side` field from GitHub's API which indicates whether the comment is on the "LEFT" (old/deleted) or "RIGHT" (new/added) side.

### Files Changed:

1. **`crates/services/src/services/git_host/types.rs`**
   - Added `side: Option<String>` field to `UnifiedPrComment::Review` variant

2. **`crates/services/src/services/git_host/github/mod.rs`**
   - Pass `c.side` through when creating `UnifiedPrComment::Review`

3. **`crates/services/src/services/git_host/azure/cli.rs`**
   - Added `side: None` to Azure DevOps (doesn't have this info)

4. **`shared/types.ts`** (regenerated)
   - Now includes `side: string | null` in the review comment type

5. **`frontend/src/contexts/WorkspaceContext.tsx`**
   - Updated normalization to use `comment.side === 'LEFT' ? SplitSide.old : SplitSide.new`

6. **`frontend/src/components/ui-new/containers/DiffViewCardWithComments.tsx`**
   - Updated `extendData` building to place GitHub comments on the correct side (`oldFileData` or `newFileData`) based on `comment.side`

* The refactoring is complete. Here's a summary of the changes:

**Created new file:** `frontend/src/hooks/useGitHubComments.ts`
- Contains the `NormalizedGitHubComment` interface
- Contains all GitHub comments logic: fetching, toggle state, normalization, path matching helpers

**Updated:** `frontend/src/contexts/WorkspaceContext.tsx`
- Removed ~70 lines of GitHub comments logic
- Now imports and uses `useGitHubComments` hook
- Re-exports `NormalizedGitHubComment` type for consumers that import it from the context

The context file is now smaller and more focused on workspace management, while the GitHub comments functionality is encapsulated in its own dedicated hook.

* Cleanup script changes for workspace 881e2956-9cca-406d-835f-7ea8acbe550e

* Done. Removed the duplicate `formatRelativeTime` function from `GitHubCommentRenderer.tsx` and replaced it with an import from the existing `@/utils/date` utility.

* The i18n check now passes. All translation keys are consistent across locales. I added the missing `showGitHubComments` and `hideGitHubComments` translations to:
- Spanish (es)
- Japanese (ja)
- Korean (ko)
- Simplified Chinese (zh-Hans)
- Traditional Chinese (zh-Hant)
2026-01-12 23:47:53 +00:00

207 lines
5.8 KiB
JSON

{
"buttons": {
"save": "保存",
"cancel": "取消",
"send": "发送",
"delete": "删除",
"edit": "编辑",
"create": "创建",
"continue": "继续",
"reset": "重置",
"manage": "管理",
"connect": "连接",
"disconnect": "断开连接",
"close": "关闭",
"replay": "重播"
},
"states": {
"loading": "加载中...",
"loadingHistory": "加载历史记录",
"saving": "保存中...",
"error": "错误",
"success": "成功",
"reconnecting": "重新连接中"
},
"language": {
"browserDefault": "浏览器默认"
},
"conversation": {
"plan": "计划",
"planToggle": {
"show": "显示计划",
"hide": "隐藏计划"
},
"toolDetailsToggle": {
"show": "显示详情",
"hide": "隐藏详情"
},
"args": "参数",
"output": "输出",
"result": "结果",
"deniedByUser": "用户拒绝了 {{toolName}}",
"taskCompleted": "任务完成",
"ran": "执行了",
"tool": "工具",
"toolSummary": {
"read": "读取 {{path}}",
"searched": "搜索 \"{{query}}\"",
"fetched": "获取 {{url}}",
"ranCommand": "执行命令",
"createdTask": "创建任务:{{description}}",
"todoOperation": "{{operation}} 待办事项"
},
"fixScript": "修复脚本"
},
"folderPicker": {
"legend": "点击文件夹名称进行导航 • 使用操作按钮进行选择",
"manualPathLabel": "手动输入路径:",
"go": "前往",
"searchLabel": "搜索当前目录:",
"selectCurrent": "选择当前",
"gitRepo": "git 仓库",
"selectPath": "选择路径"
},
"branchSelector": {
"placeholder": "选择分支",
"searchPlaceholder": "搜索分支...",
"empty": "未找到分支",
"badges": {
"current": "当前",
"remote": "远程"
},
"currentDisabled": "无法选择当前分支"
},
"breadcrumb": {
"more": "更多"
},
"orgMembers": {
"moreCount": "还有 {{count}} 位"
},
"orgSwitcher": {
"title": "切换组织",
"description": "选择要切换到的组织。",
"loadError": "加载组织失败。请重试。",
"noOrganizations": "您不是任何组织的成员。",
"menuItem": "组织",
"loadingPlaceholder": "加载组织中...",
"selectPlaceholder": "选择组织",
"currentBadge": "(当前)"
},
"navbar": {
"tryNewUI": "试用新界面"
},
"signOut": "退出登录",
"devMode": {
"banner": "开发模式 - 这是开发版本"
},
"oauth": {
"title": "登录 Vibe Kanban",
"description": "登录以加入组织并与团队共享任务",
"continueWithGitHub": "使用 GitHub 继续",
"continueWithGoogle": "使用 Google 继续",
"waitingTitle": "完成身份验证",
"waitingDescription": "已打开弹出窗口进行身份验证",
"waitingForAuth": "等待身份验证...",
"popupInstructions": "如果弹出窗口未打开,请检查您的弹窗拦截器设置。",
"back": "返回",
"successTitle": "身份验证成功!",
"welcomeBack": "欢迎回来,{{name}}",
"errorTitle": "身份验证失败",
"errorDescription": "验证您的账户时出现问题",
"tryAgain": "重试"
},
"toolbar": {
"sortBy": "排序方式",
"groupBy": "分组方式"
},
"sorting": {
"ascending": "升序",
"descending": "降序"
},
"grouping": {
"date": "日期",
"assignee": "负责人",
"label": "标签"
},
"workspaces": {
"title": "工作区",
"searchPlaceholder": "搜索...",
"active": "活跃",
"archived": "已归档",
"loading": "加载中...",
"selectToStart": "选择一个工作区开始",
"draft": "草稿",
"rename": {
"title": "重命名工作区",
"description": "输入此工作区的新名称。",
"nameLabel": "名称",
"placeholder": "输入工作区名称",
"action": "重命名",
"renaming": "正在重命名..."
}
},
"fileTree": {
"searchPlaceholder": "搜索文件...",
"noResults": "没有匹配的文件",
"title": "文件",
"showGitHubComments": "显示 GitHub 评论",
"hideGitHubComments": "隐藏 GitHub 评论"
},
"sections": {
"changes": "更改",
"repositories": "仓库",
"addRepositories": "添加仓库",
"project": "项目",
"processes": "进程",
"devServer": "开发服务器",
"advanced": "高级",
"workingBranch": "工作分支",
"recent": "最近",
"other": "其他",
"devServerPreview": "开发服务器预览"
},
"repos": {
"loading": "正在加载仓库...",
"noRecentRepos": "未找到最近的仓库",
"noReposAdded": "未添加仓库",
"noReposAddedHint": "从下面的选项中添加一个或多个仓库到此工作区"
},
"actions": {
"browseRepos": "浏览磁盘上的仓库",
"createNewRepo": "在磁盘上创建新仓库",
"viewInChangesPanel": "在更改面板中查看",
"copyPath": "复制路径",
"copyWorktreePath": "复制工作树路径",
"openInIde": "在IDE中打开",
"cancel": "取消",
"saveChanges": "保存更改",
"copied": "已复制"
},
"comments": {
"addReviewComment": "添加审查评论",
"addPlaceholder": "添加评论...",
"editPlaceholder": "编辑评论..."
},
"confirm": {
"defaultConfirm": "确认",
"defaultCancel": "取消"
},
"empty": {
"noChanges": "没有要显示的更改"
},
"commandBar": {
"noResults": "未找到结果。",
"back": "返回",
"defaultPlaceholder": "输入命令或搜索..."
},
"chatBox": {
"variants": "变体"
},
"projects": {
"noProjectFound": "未找到项目",
"createFirstPrompt": "请先创建项目以开始处理任务。",
"createNew": "创建新项目",
"noProjectsFound": "未找到项目"
}
}