# All files / src/components DiffView.tsx

100% Statements 16/16
93.75% Branches 15/16
100% Functions 5/5
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43

    3x

    18x
    16x
    14x
    43x
    4x

    18x

    8x
    1x

    7x

    18x

     import { cn } from '@/lib/utils'

    interface DiffViewProps {
      diff: string
    }

    const DIFF_HEADER_PREFIXES = ['diff', 'index', '---', '+++', 'new file']

    function classifyDiffLine(line: string): string {
      if (line.startsWith('+') && !line.startsWith('+++')) return 'bg-[rgba(76,175,80,0.12)] text-[#4caf50]'
      if (line.startsWith('-') && !line.startsWith('---')) return 'bg-[rgba(244,67,54,0.12)] text-[#f44336]'
      if (line.startsWith('@@')) return 'bg-[rgba(33,150,243,0.08)] text-primary italic'
      if (DIFF_HEADER_PREFIXES.some((p) => line.startsWith(p))) return 'bg-muted text-muted-foreground font-semibold'
      return 'text-secondary-foreground'
    }

    function DiffLine({ line, lineNumber }: { line: string; lineNumber: number }) {
      return (
        <div className={cn("flex min-h-[22px] px-4", classifyDiffLine(line))}>
          <span className="w-10 shrink-0 text-right pr-3 text-muted-foreground select-none">{lineNumber}</span>
          <span className="flex-1 whitespace-pre-wrap break-all px-2">{line || '\u00A0'}</span>
        </div>
      )
    }

    export function DiffView({ diff }: DiffViewProps) {
      if (!diff) {
        return (
          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
            No changes to display
          </div>
        )
      }

      return (
        <div className="font-mono text-[13px] leading-relaxed py-3">
          {diff.split('\n').map((line, i) => (
            <DiffLine key={i} line={line} lineNumber={i + 1} />
          ))}
        </div>
      )
    }