[MathiasVDA]

Requested by Mathias · project thread

Summary

This adds a Changes tab next to the compare overview (#/diff/files). It shows every changed component the way a pull request shows changed files. It follows the mockup approved in the project thread.

• Tree: the changed components, grouped by schema file. Each one shows its status (+/−/~ or renamed) and a dot when the change is breaking. You can filter the tree, fold files, and it highlights the card you are reading.
• Card per component: a +/− line count, the kind, breaking, docs-only and renamed badges, and file:line old → new. It has links to the explorer and to the component diff page, and a Viewed toggle that is stored per pair of versions and fills a progress bar.
• Semantic changes: the list of what changed, plus notes placed under the source line each change is about.
• Source diff: split or unified, with words highlighted inside changed lines, XML colouring, @@ hunks with real line numbers, and "Show N unchanged lines" to unfold hidden lines. Docs-only components and long added or removed ones wait behind "Load diff". Cards render only when they scroll near.
• Toolbar: filters for status, kind and docs-only, split/unified and collapse all. Keys: j/k, v, s, t, /. Filters, layout and the current card are kept in the link.

The source loading and diff table move out of sbsSourcePanel into views/codeDiff.ts, which both views now share. Side by side gains three things from that: JSON Schema sources, XML colouring, and removed lines listed above added ones in unified mode.

Testing

• npm run check, the app build and the lib typecheck pass.
• I tested in Playwright with railML 3.2 → 3.3 and with the JSON/YAML test pair, in light, dark and at 400 px width. I checked the tabs, the shortcuts, that viewed marks survive a reload, Load diff, the expanders, the phone tree drawer and the card links. There were no page errors and no horizontal scroll.

---

Generated by Claude Code