Section diff view

[TomMaSS]

Goal

Show visual diffs between section revisions. Users can compare any two revisions side-by-side.

Frontend

Install diff library (yarn add diff, BSD licensed).

frontend/src/components/revision-diff.tsx:

Props: oldContent, newContent, oldRevision, newRevision

• Green highlighted lines for additions
• Red highlighted lines for deletions
• Gray unchanged context lines (3 lines of context around changes)
• Header: "Revision 5 → Revision 7"

Backend

Add GET /api/projects/{slug}/sections/{section}/revisions/{rev_number} returning full content for a specific revision:

{"revision_number": 5, "content": "...", "summary": "...", "change_description": "...", "created_by": "...", "created_at": "..."}

Integration

Revision history in SectionViewer:

• Add "Compare" button on each revision row
• Click opens Dialog with:
  • Left: selected revision content
  • Right: current content (or dropdown to select comparison target)
  • Unified diff rendered via revision-diff.tsx

Rollback preview:

• Before confirming a rollback, show diff between current and target revision
• "You are about to restore revision 3. Here's what will change:" + diff + Confirm/Cancel

Acceptance Criteria

• Diff correctly highlights additions and deletions
• Comparing identical revisions shows "No changes"
• Rollback preview shows accurate diff before confirmation
• New revision endpoint returns correct content for any revision number
• Compare dropdown allows selecting any two revisions