feat(web): GitHub-style Changes view for compare mode

README.md

@@ -72,7 +72,8 @@ own files on it.
   also be seen **side by side**: both versions' own class diagrams (laid out
   together, pan and zoom linked), their content trees lined up row by row,
   and their XSD source with a line and word diff (or unified), plus the full
-  page of either version.
+  page of either version. A **Changes** tab lists every changed component
+  with its source diff, as a pull request lists changed files.
 - **Share links** that restore the page, the diagram's options, added boxes,
   open tree nodes and zoom; light and dark themes; a short manual (Help).
 
@@ -157,7 +158,15 @@ Several paths for one side are joined with commas. The JSON diff format is
 versioned (`format`, see `crates/core/src/diff.rs`). In the viewer, "Compare
 two versions" on the open page takes two schema sets; a link
 `?bundle=<new>&compare=<old>` opens the comparison directly. The overview
-lists the changes with filters. Each changed component gets a page with
+lists the changes with filters. The *Changes* tab (`#/diff/files`) shows
+them the way a pull request shows changed files: a tree of the changed
+components by schema file, and a card per component with its semantic
+changes, notes on the source lines they are about, and the source diff
+(split or unified, with word highlights and folded unchanged lines). Cards
+can be marked as viewed (kept in the browser); filters, layout and the
+current card are kept in the link; `j`/`k` move between cards, `v` marks
+one viewed, `s` switches split and unified, `t` shows the tree and `/`
+filters it. Each changed component gets a page with
 four views (kept in the link as `v=`): *Changes* marks what was added (+,
 green), removed (−, red, struck through) and changed (~, amber) on the
 later version's diagram; *Side by side* shows each version's own diagram or

web/src/app.ts

@@ -9,6 +9,7 @@ import { openAbout, openHelp } from "./views/dialogs";
 import { homePage } from "./views/home";
 import { overviewPage } from "./views/overview";
 import { diffBanner, diffComponentPage, diffLink, diffOverviewPage } from "./views/compare";
+import { diffFilesPage } from "./views/changes";
 import { oldVersionBanner, versionCtx } from "./views/sideBySide";
 import { componentPage, filePage } from "./views/pages";
 import { sidebar, type Sidebar } from "./views/sidebar";
@@ -232,6 +233,7 @@ export class App implements AppCtx {
       const i = r.query.indexOf("/");
       path = `#/diff/${r.query.slice(0, i)}/${encodeURIComponent(r.query.slice(i + 1))}`;
     }
+    else if (r.view === "difff") path = "#/diff/files";
     else if (r.view !== "home") path = "#/" + r.view;
     return path + (qs ? "?" + qs : "");
   }
@@ -250,6 +252,7 @@ export class App implements AppCtx {
     if (parts[0] === "overview") return { view: "overview", params };
     if (parts[0] === "diff") {
       if (parts.length >= 3) return { view: "diffc", query: `${parts[1]}/${decodeURIComponent(parts.slice(2).join("/"))}`, tab, params };
+      if (parts[1] === "files") return { view: "difff", params };
       return { view: "diff", params };
     }
     if (parts[0] === "old" && this._cmp && parts.length >= 3) {
@@ -570,6 +573,9 @@ export class App implements AppCtx {
     } else if (r.view === "diff" && this._cmp) {
       page = diffOverviewPage(this, this._cmp);
       if (this.opts.routing) document.title = `Changes · ${title}`;
+    } else if (r.view === "difff" && this._cmp) {
+      page = diffFilesPage(this, this._cmp);
+      if (this.opts.routing) document.title = `Changes, file by file · ${title}`;
     } else if (r.view === "diffc" && this._cmp && r.query) {
       const i = r.query.indexOf("/");
       const cd = this._cmp.find(r.query.slice(0, i), r.query.slice(i + 1));

web/src/ctx.ts

@@ -3,7 +3,7 @@ import type { Compare } from "./diff";
 import type { Id, Model } from "./model";
 
 export interface Route {
-  /** "home" | "comp" | "file" | "overview" | "missing" | "diff" | "diffc" (query: `slug/qname`) */
+  /** "home" | "comp" | "file" | "overview" | "missing" | "diff" | "difff" (all changes with their source diff) | "diffc" (query: `slug/qname`) */
   view: string;
   id?: Id;
   /** Sub view of a page: "diagram" | "tree" */