feat(FN-683): add diff syntax highlighting with background colors
- Add highlightDiff utility React component for diff rendering - Add CSS styles for diff-add (green), diff-del (red), diff-hunk (blue) line highlighting - Integrate highlightDiff in TaskChangesTab for inline diffs - Integrate highlightDiff in ChangedFilesModal for file diffs - Add unit tests for highlightDiff utility
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { FileEdit, FileMinus, FilePlus, FileSymlink, FolderGit2, X } from "lucide-react";
|
||||
import { useChangedFiles } from "../hooks/useChangedFiles";
|
||||
import { highlightDiff } from "../utils/highlightDiff";
|
||||
import type { TaskFileDiff } from "../api";
|
||||
|
||||
interface ChangedFilesModalProps {
|
||||
@@ -121,7 +122,9 @@ export function ChangedFilesModal({ taskId, worktree, column, isOpen, onClose }:
|
||||
</div>
|
||||
<div className="gm-diff-viewer">
|
||||
{selectedStat ? <pre className="gm-diff-stat">{selectedStat}</pre> : null}
|
||||
<pre className="gm-diff-patch">{selectedFile.diff || "No diff available"}</pre>
|
||||
<pre className="gm-diff-patch">
|
||||
<code>{highlightDiff(selectedFile.diff || "No diff available")}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { FileCode, ChevronDown, ChevronRight, AlertCircle } from "lucide-react";
|
||||
import { fetchTaskDiff, type TaskDiff } from "../api";
|
||||
import { highlightDiff } from "../utils/highlightDiff";
|
||||
|
||||
interface TaskChangesTabProps {
|
||||
taskId: string;
|
||||
@@ -185,7 +186,7 @@ export function TaskChangesTab({ taskId, worktree }: TaskChangesTabProps) {
|
||||
{isExpanded && patch && (
|
||||
<div className="changes-file-content">
|
||||
<pre className="changes-diff-patch">
|
||||
<code>{patch}</code>
|
||||
<code>{highlightDiff(patch)}</code>
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user