feat: Add inline code review comments (#231)

Author: jamesefhawkins

apps/array/src/renderer/features/code-editor/components/CodeMirrorDiffEditor.tsx

@@ -9,17 +9,22 @@ interface CodeMirrorDiffEditorProps {
   originalContent: string;
   modifiedContent: string;
   filePath?: string;
+  fileId?: string; // Unique identifier for comments (e.g., relative path)
   onContentChange?: (content: string) => void;
 }
 
 export function CodeMirrorDiffEditor({
   originalContent,
   modifiedContent,
   filePath,
+  fileId,
   onContentChange,
 }: CodeMirrorDiffEditorProps) {
   const [viewMode, setViewMode] = useState<ViewMode>("split");
-  const extensions = useEditorExtensions(filePath, true);
+  const extensions = useEditorExtensions(filePath, true, {
+    enableComments: true,
+    fileId: fileId || filePath, // Fall back to filePath if no fileId provided
+  });
   const options = useMemo(
     () => ({
       original: originalContent,

apps/array/src/renderer/features/code-editor/components/CodeMirrorEditor.tsx

@@ -5,15 +5,22 @@ import { useEditorExtensions } from "../hooks/useEditorExtensions";
 interface CodeMirrorEditorProps {
   content: string;
   filePath?: string;
+  fileId?: string; // Unique identifier for comments (e.g., relative path)
   readOnly?: boolean;
+  enableComments?: boolean;
 }
 
 export function CodeMirrorEditor({
   content,
   filePath,
+  fileId,
   readOnly = false,
+  enableComments = false,
 }: CodeMirrorEditorProps) {
-  const extensions = useEditorExtensions(filePath, readOnly);
+  const extensions = useEditorExtensions(filePath, readOnly, {
+    enableComments,
+    fileId: fileId || filePath,
+  });
   const options = useMemo(
     () => ({ doc: content, extensions, filePath }),
     [content, extensions, filePath],

apps/array/src/renderer/features/code-editor/components/DiffEditorPanel.tsx

@@ -96,13 +96,16 @@ export function DiffEditorPanel({
           originalContent={originalContent ?? ""}
           modifiedContent={modifiedContent ?? ""}
           filePath={absolutePath}
+          fileId={filePath} // Use relative path as fileId for comments
           onContentChange={handleContentChange}
         />
       ) : (
         <CodeMirrorEditor
           content={content ?? ""}
           filePath={absolutePath}
+          fileId={filePath}
           readOnly
+          enableComments
         />
       )}
     </Box>

apps/array/src/renderer/features/code-editor/hooks/useEditorExtensions.ts

@@ -4,19 +4,61 @@ import {
   highlightActiveLineGutter,
   lineNumbers,
 } from "@codemirror/view";
+import { commentComposerExtension } from "@features/comments/extensions/commentComposerExtension";
+import { commentGutterExtension } from "@features/comments/extensions/commentGutterExtension";
+import { commentWidgetExtension } from "@features/comments/extensions/commentWidgetExtension";
+import { useCommentStore } from "@features/comments/store/commentStore";
 import { useThemeStore } from "@stores/themeStore";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { mergeViewTheme, oneDark, oneLight } from "../theme/editorTheme";
 import { getLanguageExtension } from "../utils/languages";
 
-export function useEditorExtensions(filePath?: string, readOnly = false) {
+export function useEditorExtensions(
+  filePath?: string,
+  readOnly = false,
+  options?: { enableComments?: boolean; fileId?: string },
+) {
   const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const showComments = useCommentStore((state) => state.showComments);
+  const getCommentsForFile = useCommentStore(
+    (state) => state.getCommentsForFile,
+  );
+  const openComposer = useCommentStore((state) => state.openComposer);
+  const closeComposer = useCommentStore((state) => state.closeComposer);
+  const createComment = useCommentStore((state) => state.createComment);
+  const composerState = useCommentStore((state) => state.composerState);
+
+  const { enableComments = false, fileId } = options || {};
+
+  // Handler for when user clicks "+" to add a comment
+  const handleOpenComposer = useCallback(
+    (clickedFileId: string, line: number) => {
+      openComposer(clickedFileId, line);
+    },
+    [openComposer],
+  );
+
+  // Handler for submitting a new comment
+  const handleSubmitComment = useCallback(
+    async (line: number, content: string) => {
+      if (!fileId) return;
+
+      await createComment({
+        fileId,
+        line,
+        side: "right",
+        content,
+      });
+      closeComposer();
+    },
+    [fileId, createComment, closeComposer],
+  );
 
   return useMemo(() => {
     const languageExtension = filePath ? getLanguageExtension(filePath) : null;
     const theme = isDarkMode ? oneDark : oneLight;
 
-    return [
+    const extensions = [
       lineNumbers(),
       highlightActiveLineGutter(),
       theme,
@@ -25,5 +67,38 @@ export function useEditorExtensions(filePath?: string, readOnly = false) {
       ...(readOnly ? [EditorState.readOnly.of(true)] : []),
       ...(languageExtension ? [languageExtension] : []),
     ];
-  }, [filePath, isDarkMode, readOnly]);
+
+    // Add comment extensions if enabled and we have a fileId
+    if (enableComments && fileId) {
+      // Gutter with "+" button for adding comments
+      extensions.push(commentGutterExtension(fileId, handleOpenComposer));
+      // Inline comment composer
+      extensions.push(
+        commentComposerExtension(
+          fileId,
+          () => composerState,
+          handleSubmitComment,
+          closeComposer,
+        ),
+      );
+      // Inline comment display
+      extensions.push(
+        commentWidgetExtension(() => getCommentsForFile(fileId), showComments),
+      );
+    }
+
+    return extensions;
+  }, [
+    filePath,
+    isDarkMode,
+    readOnly,
+    enableComments,
+    fileId,
+    showComments,
+    getCommentsForFile,
+    handleOpenComposer,
+    handleSubmitComment,
+    closeComposer,
+    composerState,
+  ]);
 }

apps/array/src/renderer/features/comments/api/commentApi.ts

@@ -0,0 +1,172 @@
+/**
+ * ============================================
+ * COMMENT API ADAPTER
+ * ============================================
+ *
+ * TODO FOR API INTEGRATION:
+ *
+ * 1. Create a new file `githubCommentApi.ts` that implements `CommentApi`
+ * 2. Replace `mockCommentApi` with your implementation below
+ *
+ * Example:
+ *   import { githubCommentApi } from "./githubCommentApi";
+ *   export const commentApi: CommentApi = githubCommentApi;
+ *
+ * The store calls these functions automatically - you just need to
+ * implement them to hit your GitHub API endpoints.
+ * ============================================
+ */
+
+import type { Comment } from "@shared/types";
+import { getCurrentUser } from "../utils/currentUser";
+
+// ============================================
+// INPUT TYPES
+// ============================================
+
+export interface CreateCommentInput {
+  fileId: string;
+  line: number;
+  side: "left" | "right";
+  content: string;
+}
+
+export interface CreateReplyInput extends CreateCommentInput {
+  parentId: string;
+}
+
+// ============================================
+// API INTERFACE
+// ============================================
+
+export interface CommentApi {
+  /**
+   * Fetch all comments for a file
+   * GET /api/comments?fileId=...
+   */
+  fetchComments(fileId: string): Promise<Comment[]>;
+
+  /**
+   * Create a new comment on a line
+   * POST /api/comments
+   * Body: { fileId, line, side, content }
+   * Returns: Created comment with server-generated ID
+   */
+  createComment(input: CreateCommentInput): Promise<Comment>;
+
+  /**
+   * Create a reply to an existing comment
+   * POST /api/comments/:parentId/replies
+   * Body: { content }
+   * Returns: Created reply with server-generated ID
+   */
+  createReply(input: CreateReplyInput): Promise<Comment>;
+
+  /**
+   * Update a comment's content
+   * PATCH /api/comments/:commentId
+   * Body: { content }
+   * Returns: Updated comment
+   */
+  updateComment(commentId: string, content: string): Promise<Comment>;
+
+  /**
+   * Delete a comment
+   * DELETE /api/comments/:commentId
+   */
+  deleteComment(commentId: string): Promise<void>;
+
+  /**
+   * Mark a comment as resolved or unresolved
+   * PATCH /api/comments/:commentId/resolve
+   * Body: { resolved: boolean }
+   * Returns: Updated comment
+   */
+  resolveComment(commentId: string, resolved: boolean): Promise<Comment>;
+}
+
+// ============================================
+// MOCK IMPLEMENTATION (local-only, no persistence)
+// ============================================
+
+/**
+ * Mock API that works with local state only.
+ * Replace this with `githubCommentApi` when ready.
+ */
+export const mockCommentApi: CommentApi = {
+  async fetchComments(_fileId) {
+    // Mock: Return empty array (store manages local state)
+    // Real: GET /api/comments?fileId=...
+    return [];
+  },
+
+  async createComment(input) {
+    // Mock: Create comment object with generated ID
+    // Real: POST /api/comments, return server response
+    const user = getCurrentUser();
+    return {
+      id: crypto.randomUUID(),
+      fileId: input.fileId,
+      line: input.line,
+      side: input.side,
+      content: input.content,
+      author: user.name,
+      timestamp: new Date(),
+      resolved: false,
+      replies: [],
+    };
+  },
+
+  async createReply(input) {
+    // Mock: Create reply object with generated ID
+    // Real: POST /api/comments/:parentId/replies
+    const user = getCurrentUser();
+    return {
+      id: crypto.randomUUID(),
+      fileId: input.fileId,
+      line: input.line,
+      side: input.side,
+      content: input.content,
+      author: user.name,
+      timestamp: new Date(),
+      resolved: false,
+      replies: [],
+    };
+  },
+
+  async updateComment(commentId, content) {
+    // Mock: Return updated comment (store handles state update)
+    // Real: PATCH /api/comments/:commentId
+    return {
+      id: commentId,
+      content,
+    } as Comment;
+  },
+
+  async deleteComment(_commentId) {
+    // Mock: No-op (store handles state removal)
+    // Real: DELETE /api/comments/:commentId
+  },
+
+  async resolveComment(commentId, resolved) {
+    // Mock: Return updated comment (store handles state update)
+    // Real: PATCH /api/comments/:commentId/resolve
+    return {
+      id: commentId,
+      resolved,
+    } as Comment;
+  },
+};
+
+// ============================================
+// ACTIVE API IMPLEMENTATION
+// ============================================
+
+/**
+ * Change this to switch between mock and real API.
+ *
+ * When ready for GitHub integration:
+ *   import { githubCommentApi } from "./githubCommentApi";
+ *   export const commentApi: CommentApi = githubCommentApi;
+ */
+export const commentApi: CommentApi = mockCommentApi;