Diff — SortUI

Diff

src/notes/sync.ts+5−1

for (const note of queue) {

await api.save(note)

const saved = await api.save(note).catch(() => null)

if (!saved) {

offline.push(note)

continue

}

synced.add(note.id)

}

Installation

pnpm dlx shadcn@latest add @sortui/diff

Usage

import {
  Diff,
  DiffHeader,
  DiffTitle,
  DiffStats,
  DiffContent,
} from "@/components/ui/diff"

Examples

Split

src/billing/invoice.ts+5−4

export function invoiceTotal(items: LineItem[]) {

let total = 0

for (const item of items) total += item.price

return total

}

export function dueDate(issued: Date) {

@@ -21,3 +22,3 @@

export function invoiceTitle(invoice: Invoice) {

return "Invoice " + invoice.number

}

export function invoiceTotal(items: LineItem[]) {

return items.reduce(

(total, item) => total + item.price * item.quantity,

)

}

export function dueDate(issued: Date) {

@@ -21,3 +22,3 @@

export function invoiceTitle(invoice: Invoice) {

return `Invoice ${invoice.number} · ${invoice.customer}`

}

From two versions

package.json+6−5

{

"name": "notes-app",

"version": "2.3.0",

"version": "2.4.0",

"private": true,

"scripts": {

"dev": "next dev",

"build": "next build"

"dev": "next dev --turbopack",

"build": "next build",

"test": "vitest"

"dependencies": {

"next": "15.4.0",

"react": "19.1.0"

"next": "16.0.0",

"react": "19.2.0"

}

Folded context

src/notes/notes.ts+3−1

title: string

body: string

pinned: boolean

updatedAt: Date

}

title,

body: "",

pinned: false,

updatedAt: new Date(),

}

export function noteUrl(note: Note) {

return "/notes/" + note.id

return `/notes/${slugify(note.title)}-${note.id}`

}

Review an agent's edit

src/notes/search.ts+10−3

export function searchNotes(notes: Note[], query: string) {

const q = query.toLowerCase()

return notes.filter((note) => note.title.toLowerCase().includes(q))

const q = query.trim().toLowerCase()

if (!q) return notes

return notes.filter(

(note) =>

note.title.toLowerCase().includes(q) ||

note.body.toLowerCase().includes(q)

)

}

export function sortNotes(notes: Note[]) {

return [...notes].sort((a, b) => b.updatedAt - a.updatedAt)

return [...notes].sort(

(a, b) => Number(b.pinned) - Number(a.pinned) || b.updatedAt - a.updatedAt

)

}