From f4a82aebd272c1958375882c4ba1aae9cd722963 Mon Sep 17 00:00:00 2001 From: Louis Knight-Webb Date: Tue, 16 Sep 2025 16:37:22 +0100 Subject: [PATCH] Use file search when leaving a review comment (vibe-kanban) (#743) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Perfect! I've successfully implemented file search functionality for review comments. Here's a summary of what was completed: ## ✅ Implementation Complete ### **Changes Made:** 1. **Updated [`ReviewCommentRenderer.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/components/diff/ReviewCommentRenderer.tsx)**: - Replaced basic textarea with FileSearchTextarea in edit mode - Added `projectId` prop to interface - Imported and configured FileSearchTextarea with proper styling 2. **Updated [`CommentWidgetLine.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/components/diff/CommentWidgetLine.tsx)**: - Replaced textarea with FileSearchTextarea for new comment creation - Added `projectId` prop to interface 3. **Updated [`DiffCard.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/components/DiffCard.tsx)**: - Integrated useProject hook to get projectId from context - Passed projectId to both ReviewCommentRenderer and CommentWidgetLine 4. **Enhanced [`ReviewProvider.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/contexts/ReviewProvider.tsx)**: - Added regex pattern to format file paths with backticks in generated markdown - Preserves existing functionality while enhancing visual formatting ### **Key Features:** - **@-mention file search** in both new and edit review comments - **Auto-complete dropdown** with arrow key navigation - **Project context integration** - no schema changes needed - **Enhanced markdown export** with properly formatted file paths - **Preserves all existing functionality** - keyboard shortcuts, styling, etc. ### **User Experience:** 1. Type `@` in any review comment field 2. Search dropdown appears automatically 3. Arrow keys ↑↓ to navigate, Enter to select, Esc to dismiss 4. Selected files inserted as full paths 5. Generated review markdown formats paths with backticks for readability The implementation successfully integrates file search into the review comment workflow while maintaining the existing architecture and user experience! * Cleanup script changes for task attempt a558e290-557a-475f-81e9-be9ae44a3621 * Perfect! Updated both placeholder texts to inform users about the file search functionality: - **New comments**: `"Add a comment... (type @ to search files)"` - **Edit comments**: `"Edit comment... (type @ to search files)"` This provides clear user guidance about the @ file search feature right in the input fields. --- frontend/src/components/DiffCard.tsx | 7 ++++++- .../src/components/diff/CommentWidgetLine.tsx | 14 +++++++++----- .../components/diff/ReviewCommentRenderer.tsx | 18 ++++++++++++------ frontend/src/contexts/ReviewProvider.tsx | 9 ++++++--- 4 files changed, 33 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/DiffCard.tsx b/frontend/src/components/DiffCard.tsx index e74e0464..31779f46 100644 --- a/frontend/src/components/DiffCard.tsx +++ b/frontend/src/components/DiffCard.tsx @@ -26,6 +26,7 @@ import { useReview, type ReviewDraft } from '@/contexts/ReviewProvider'; import { CommentWidgetLine } from '@/components/diff/CommentWidgetLine'; import { ReviewCommentRenderer } from '@/components/diff/ReviewCommentRenderer'; import { useDiffViewMode } from '@/stores/useDiffViewStore'; +import { useProject } from '@/contexts/project-context'; type Props = { diff: Diff; @@ -75,6 +76,7 @@ export default function DiffCard({ const theme = getActualTheme(config?.theme); const { comments, drafts, setDraft } = useReview(); const globalMode = useDiffViewMode(); + const { projectId } = useProject(); const oldName = diff.oldPath || undefined; const newName = diff.newPath || oldName || 'unknown'; @@ -173,12 +175,15 @@ export default function DiffCard({ widgetKey={widgetKey} onSave={props.onClose} onCancel={props.onClose} + projectId={projectId} /> ); }; const renderExtendLine = (lineData: any) => { - return ; + return ( + + ); }; // Title row diff --git a/frontend/src/components/diff/CommentWidgetLine.tsx b/frontend/src/components/diff/CommentWidgetLine.tsx index 20429d48..f09679ec 100644 --- a/frontend/src/components/diff/CommentWidgetLine.tsx +++ b/frontend/src/components/diff/CommentWidgetLine.tsx @@ -1,5 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; import { Button } from '@/components/ui/button'; +import { FileSearchTextarea } from '@/components/ui/file-search-textarea'; import { useReview, type ReviewDraft } from '@/contexts/ReviewProvider'; interface CommentWidgetLineProps { @@ -7,6 +8,7 @@ interface CommentWidgetLineProps { widgetKey: string; onSave: () => void; onCancel: () => void; + projectId?: string; } export function CommentWidgetLine({ @@ -14,6 +16,7 @@ export function CommentWidgetLine({ widgetKey, onSave, onCancel, + projectId, }: CommentWidgetLineProps) { const { setDraft, addComment } = useReview(); const [value, setValue] = useState(draft.text); @@ -52,14 +55,15 @@ export function CommentWidgetLine({ return (
-