@chisquare-tech/origine-ngx-apps-code 0.1.0 → 0.2.0

package/fesm2022/chisquare-tech-origine-ngx-apps-code.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, effect, untracked, Directive, ElementRef, input, output, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, Injectable, signal, computed, effect, untracked, Directive, ElementRef, input, output, HostListener, ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
 import { ApiService } from '@thescaffold/ngx-core';
 import { map, forkJoin, of } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink, Router } from '@angular/router';
+import { NgTemplateOutlet } from '@angular/common';
 import { map as map$1, catchError } from 'rxjs/operators';
 import { marked } from 'marked';
 
@@ -95,10 +96,14 @@ class CodeApi {
         return this.api.get(`${this.repoPath(project, name)}/commit/${enc(sha)}`).pipe(map((r) => data(r)));
     }
     /** One file's hunks from base to head ("" base: the head's first parent). */
-    diff(project, name, head, path, base = '') {
+    diff(project, name, head, path, base = '', opts = {}) {
         const p = { head, path };
         if (base)
             p['base'] = base;
+        if (opts.context)
+            p['context'] = String(opts.context);
+        if (opts.ignoreSpace)
+            p['w'] = 'ignore';
         return this.api.get(`${this.repoPath(project, name)}/diff`, p).pipe(map((r) => data(r)));
     }
     compare(project, name, base, head) {
@@ -153,6 +158,10 @@ class CodeApi {
     comment(project, name, n, c) {
         return this.api.post(`${this.repoPath(project, name)}/pulls/${n}/comments`, c).pipe(map((r) => data(r)));
     }
+    /** Discards one of the caller's pending review comments. */
+    discardComment(project, name, n, id) {
+        return this.api.delete(`${this.repoPath(project, name)}/pulls/${n}/comments/${enc(id)}`);
+    }
     review(project, name, n, state, body = '') {
         return this.api.post(`${this.repoPath(project, name)}/pulls/${n}/reviews`, { state, body }).pipe(map((r) => data(r)));
     }
@@ -414,22 +423,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
-// One file of a diff (prototype prDiffs): its header with +/−, the hunks highlighted, and, on a pull
-// request, the review threads on its lines and a comment form on any line number.
+/** Past this many changed lines a file waits for "Load diff" (DEV-19 large diffs). */
+const LARGE = 600;
+/** Context steps for "Show more context". */
+const CONTEXT = [3, 25, 100];
+// One file of a diff (prototype prDiffs): its header with +/− and Viewed, the hunks highlighted,
+// unified or split, and, on a pull request, the review threads on its lines and a comment form on
+// any line number ("Add single comment" or part of a review). The diff loads when the file scrolls
+// near the screen; a very large one waits to be asked for.
 class DiffView {
     constructor() {
         this.api = inject(CodeApi);
         this.host = inject(CodeHost);
+        this.el = inject((ElementRef));
+        this.destroyRef = inject(DestroyRef);
         this.repo = input.required(...(ngDevMode ? [{ debugName: "repo" }] : /* istanbul ignore next */ []));
         this.file = input.required(...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
         this.head = input.required(...(ngDevMode ? [{ debugName: "head" }] : /* istanbul ignore next */ []));
         this.base = input('', ...(ngDevMode ? [{ debugName: "base" }] : /* istanbul ignore next */ []));
         this.threads = input([], ...(ngDevMode ? [{ debugName: "threads" }] : /* istanbul ignore next */ []));
         this.canComment = input(false, ...(ngDevMode ? [{ debugName: "canComment" }] : /* istanbul ignore next */ []));
+        this.mode = input('unified', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.ignoreSpace = input(false, ...(ngDevMode ? [{ debugName: "ignoreSpace" }] : /* istanbul ignore next */ []));
+        /** The file is marked viewed (pull requests); null hides the Viewed button. */
+        this.viewed = input(null, ...(ngDevMode ? [{ debugName: "viewed" }] : /* istanbul ignore next */ []));
+        /** The caller has a pending review on this pull request. */
+        this.reviewing = input(false, ...(ngDevMode ? [{ debugName: "reviewing" }] : /* istanbul ignore next */ []));
         this.comment = output();
         this.reply = output();
         this.resolve = output();
+        this.discard = output();
+        this.viewedChange = output();
         this.open = signal(true, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.waiting = signal(false, ...(ngDevMode ? [{ debugName: "waiting" }] : /* istanbul ignore next */ []));
+        this.context = signal(CONTEXT[0], ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
         this.diff = signal(null, ...(ngDevMode ? [{ debugName: "diff" }] : /* istanbul ignore next */ []));
         this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
         this.drafting = signal('', ...(ngDevMode ? [{ debugName: "drafting" }] : /* istanbul ignore next */ []));
@@ -437,25 +465,82 @@ class DiffView {
         this.replies = signal({}, ...(ngDevMode ? [{ debugName: "replies" }] : /* istanbul ignore next */ []));
         this.people = computed(() => new People(this.host.people()), ...(ngDevMode ? [{ debugName: "people" }] : /* istanbul ignore next */ []));
         this.threadsHere = computed(() => this.threads().filter((t) => t.path === this.file().path), ...(ngDevMode ? [{ debugName: "threadsHere" }] : /* istanbul ignore next */ []));
+        this.viewable = computed(() => this.viewed() !== null, ...(ngDevMode ? [{ debugName: "viewable" }] : /* istanbul ignore next */ []));
+        this.me = computed(() => this.host.meId(), ...(ngDevMode ? [{ debugName: "me" }] : /* istanbul ignore next */ []));
+        this.splitRows = computed(() => (this.diff()?.hunks ?? []).map((h) => pair(h.lines)), ...(ngDevMode ? [{ debugName: "splitRows" }] : /* istanbul ignore next */ []));
         this.ago = (s) => ago(s);
+        this.asked = false;
+        effect(() => {
+            // viewed files fold away (and unfold when unmarked)
+            const v = this.viewed();
+            if (v !== null)
+                untracked(() => this.open.set(!v));
+        });
         effect(() => {
-            const head = this.head();
-            const base = this.base();
+            // what the diff depends on; it loads once the file is near the screen and open
+            this.head();
+            this.base();
+            this.ignoreSpace();
+            this.context();
             const f = this.file();
-            const p = this.host.project();
-            if (p && head && !f.binary)
-                untracked(() => this.api.diff(p.id, this.repo(), head, f.path, base).subscribe({
-                    next: (d) => this.diff.set(d),
-                    error: (e) => this.error.set(apiMessage(e, 'Could not load this diff.')),
-                }));
+            if (!this.visible() || !this.open() || f.binary)
+                return;
+            untracked(() => {
+                if (!this.asked && f.additions + f.deletions > LARGE) {
+                    this.waiting.set(true);
+                    return;
+                }
+                this.load();
+            });
         });
     }
+    ngAfterViewInit() {
+        if (typeof IntersectionObserver === 'undefined') {
+            this.visible.set(true);
+            return;
+        }
+        const io = new IntersectionObserver((entries) => {
+            if (entries.some((e) => e.isIntersecting)) {
+                this.visible.set(true);
+                io.disconnect();
+            }
+        }, { rootMargin: '600px 0px' });
+        io.observe(this.el.nativeElement);
+        this.destroyRef.onDestroy(() => io.disconnect());
+    }
+    load() {
+        const p = this.host.project();
+        const f = this.file();
+        if (!p || !this.head() || f.binary)
+            return;
+        this.asked = true;
+        this.waiting.set(false);
+        this.error.set('');
+        this.api.diff(p.id, this.repo(), this.head(), f.path, this.base(), { context: this.context(), ignoreSpace: this.ignoreSpace() }).subscribe({
+            next: (d) => this.diff.set(d),
+            error: (e) => this.error.set(apiMessage(e, 'Could not load this diff.')),
+        });
+    }
+    toggleOpen() {
+        this.open.set(!this.open());
+    }
+    moreContext() {
+        const next = CONTEXT.find((c) => c > this.context());
+        if (next)
+            this.context.set(next);
+    }
     key(l) {
         return `${l.kind === 'delete' ? 'old' : 'new'}:${this.lineOf(l)}`;
     }
     lineOf(l) {
         return (l.kind === 'delete' ? l.old : l.new) ?? 0;
     }
+    /** The lines of a split row that threads and drafts hang from (a context line once). */
+    rowLines(r) {
+        if (r.left && r.right && r.left === r.right)
+            return [r.left];
+        return [r.left, r.right].filter((l) => !!l);
+    }
     threadsAt(l) {
         const side = l.kind === 'delete' ? 'old' : 'new';
         const n = this.lineOf(l);
@@ -467,11 +552,11 @@ class DiffView {
         this.drafting.set(this.key(l));
         this.draftBody.set('');
     }
-    send(l) {
+    send(l, pending) {
         const body = this.draftBody().trim();
         if (!body)
             return;
-        this.comment.emit({ path: this.file().path, side: l.kind === 'delete' ? 'old' : 'new', line: this.lineOf(l), body });
+        this.comment.emit({ path: this.file().path, side: l.kind === 'delete' ? 'old' : 'new', line: this.lineOf(l), body, pending });
         this.drafting.set('');
         this.draftBody.set('');
     }
@@ -486,130 +571,254 @@ class DiffView {
         this.setReply(id, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DiffView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DiffView, isStandalone: true, selector: "o-diff", inputs: { repo: { classPropertyName: "repo", publicName: "repo", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, head: { classPropertyName: "head", publicName: "head", isSignal: true, isRequired: true, transformFunction: null }, base: { classPropertyName: "base", publicName: "base", isSignal: true, isRequired: false, transformFunction: null }, threads: { classPropertyName: "threads", publicName: "threads", isSignal: true, isRequired: false, transformFunction: null }, canComment: { classPropertyName: "canComment", publicName: "canComment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { comment: "comment", reply: "reply", resolve: "resolve" }, ngImport: i0, template: `
-    <div class="o-card" [attr.data-testid]="'diff-' + file().path">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DiffView, isStandalone: true, selector: "o-diff", inputs: { repo: { classPropertyName: "repo", publicName: "repo", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, head: { classPropertyName: "head", publicName: "head", isSignal: true, isRequired: true, transformFunction: null }, base: { classPropertyName: "base", publicName: "base", isSignal: true, isRequired: false, transformFunction: null }, threads: { classPropertyName: "threads", publicName: "threads", isSignal: true, isRequired: false, transformFunction: null }, canComment: { classPropertyName: "canComment", publicName: "canComment", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, ignoreSpace: { classPropertyName: "ignoreSpace", publicName: "ignoreSpace", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, reviewing: { classPropertyName: "reviewing", publicName: "reviewing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { comment: "comment", reply: "reply", resolve: "resolve", discard: "discard", viewedChange: "viewedChange" }, ngImport: i0, template: `
+    <div class="o-card" [attr.id]="'file-' + file().path" [attr.data-testid]="'diff-' + file().path">
       <div class="o-ch" style="background:var(--o-well)">
-        <button type="button" class="o-btn o-ghost o-xs" (click)="open.set(!open())" [attr.aria-expanded]="open()" [attr.aria-label]="(open() ? 'Collapse ' : 'Expand ') + file().path">{{ open() ? '▾' : '▸' }}</button>
+        <button type="button" class="o-btn o-ghost o-xs" (click)="toggleOpen()" [attr.aria-expanded]="open()" [attr.aria-label]="(open() ? 'Collapse ' : 'Expand ') + file().path">{{ open() ? '▾' : '▸' }}</button>
         <span class="o-mono o-sm o-ell">{{ file().oldPath && file().oldPath !== file().path ? file().oldPath + ' → ' : '' }}{{ file().path }}</span>
         <span class="o-grn-t o-sm">+{{ file().additions }}</span><span class="o-red-t o-sm">−{{ file().deletions }}</span>
         @if (threadsHere().length) {<span class="o-faint o-sm">💬 {{ threadsHere().length }}</span>}
-        <span class="o-r"><ng-content /></span>
+        <span class="o-r o-flex" style="gap:6px">
+          @if (open() && diff() && context() < 100 && !file().binary) {<button type="button" class="o-btn o-xs" (click)="moreContext()" [attr.aria-label]="'Show more context in ' + file().path">More context</button>}
+          <ng-content />
+          @if (viewable()) {
+            <button type="button" class="o-btn o-xs viewed" role="checkbox" [attr.aria-checked]="viewed()" [attr.aria-label]="'Viewed ' + file().path" (click)="viewedChange.emit(!viewed())"><span class="o-cbx" [class.o-on]="viewed()" style="width:12px;height:12px"></span>Viewed</button>
+          }
+        </span>
       </div>
       @if (open()) {
         @if (file().binary) {
           <div class="o-empty o-sm">A binary file.</div>
+        } @else if (waiting()) {
+          <div class="o-empty o-sm o-col" style="gap:8px;align-items:center">
+            <span>{{ file().additions + file().deletions }} changed lines.</span>
+            <button type="button" class="o-btn o-sm" (click)="waiting.set(false); load()">Load diff</button>
+          </div>
         } @else if (error()) {
           <div class="o-note o-red" role="alert">{{ error() }}</div>
         } @else if (diff(); as d) {
           @if (d.truncated) {<div class="o-note">This diff is too large to show in full.</div>}
-          <div class="o-code" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path">
-            @for (h of d.hunks; track $index) {
-              <div class="hunk o-mono" role="row">{{ h.header }}</div>
-              @for (l of h.lines; track $index) {
-                <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [class.o-del]="l.kind === 'delete'">
-                  <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.kind === 'delete' ? l.old : l.new }}</span>
-                  <span class="o-s" aria-hidden="true">{{ l.kind === 'add' ? '+' : l.kind === 'delete' ? '−' : ' ' }}</span>
-                  <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : l.kind === 'delete' ? 'removed' : '' }}</span>
-                  <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
-                </div>
-                @for (t of threadsAt(l); track t.id) {
-                  <div class="o-thread" [attr.data-testid]="'thread-' + t.id">
-                    <div class="o-cb o-col" style="gap:6px;padding:10px 12px">
-                      @for (c of t.comments; track c.id) {
-                        <span class="o-sm"><b>{{ people().name(c.authorId) }}</b><span class="o-faint"> · {{ ago(c.createdAt) }}{{ c.pending ? ' · pending' : '' }}</span></span>
-                        <span style="white-space:pre-wrap">{{ c.body }}</span>
-                      }
+          @if (mode() === 'split') {
+            <div class="o-code split" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path + ', side by side'">
+              @for (h of d.hunks; track $index; let hi = $index) {
+                <div class="hunk o-mono full" role="row">{{ h.header }}</div>
+                @for (r of splitRows()[hi]; track $index) {
+                  @if (r.left; as l) {
+                    <div class="o-ln side-l" role="row" [class.o-del]="l.kind === 'delete'" [attr.data-testid]="'split-old-' + l.old">
+                      <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.old }}</span>
+                      <span class="o-sr-only">{{ l.kind === 'delete' ? 'removed' : '' }}</span>
+                      <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
                     </div>
-                    @if (canComment()) {
-                      <div class="o-cf">
-                        <input class="o-in o-sm" placeholder="Reply…" aria-label="Reply" [ngModel]="replies()[t.id] ?? ''" (ngModelChange)="setReply(t.id, $event)" (keydown.enter)="sendReply(t.id)" />
-                        <button type="button" class="o-btn o-sm" (click)="sendReply(t.id)">Reply</button>
-                        <button type="button" class="o-btn o-sm" (click)="resolve.emit({ threadId: t.id, resolved: !t.resolved })">{{ t.resolved ? 'Unresolve' : 'Resolve' }}</button>
-                      </div>
-                    }
-                  </div>
+                  } @else {<div class="o-ln side-l empty-side" aria-hidden="true"><span class="o-n"></span><span class="o-t"></span></div>}
+                  @if (r.right; as l) {
+                    <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [attr.data-testid]="'split-new-' + l.new">
+                      <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.new }}</span>
+                      <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : '' }}</span>
+                      <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
+                    </div>
+                  } @else {<div class="o-ln empty-side" aria-hidden="true"><span class="o-n"></span><span class="o-t"></span></div>}
+                  @for (l of rowLines(r); track $index) {
+                    @for (t of threadsAt(l); track t.id) {<div class="full"><ng-container *ngTemplateOutlet="threadTpl; context: { $implicit: t }" /></div>}
+                    @if (drafting() === key(l)) {<div class="full"><ng-container *ngTemplateOutlet="draftTpl; context: { $implicit: l }" /></div>}
+                  }
                 }
-                @if (drafting() === key(l)) {
-                  <div class="o-thread"><div class="o-cb o-col" style="gap:8px;padding:10px 12px">
-                    <textarea class="o-in" rows="2" [placeholder]="'Leave a comment on line ' + lineOf(l)" [attr.aria-label]="'Comment on line ' + lineOf(l)" [ngModel]="draftBody()" (ngModelChange)="draftBody.set($event)" data-testid="line-comment"></textarea>
-                    <div class="o-flex"><span class="o-faint o-xs">Markdown works.</span><button type="button" class="o-btn o-sm o-r" (click)="drafting.set('')">Cancel</button><button type="button" class="o-btn o-sm o-dark" [disabled]="!draftBody().trim()" (click)="send(l)" data-testid="line-comment-add">Comment</button></div>
-                  </div></div>
+              } @empty {<div class="o-empty o-sm full">{{ ignoreSpace() ? 'Only whitespace changed.' : 'No changes to show.' }}</div>}
+            </div>
+          } @else {
+            <div class="o-code" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path">
+              @for (h of d.hunks; track $index) {
+                <div class="hunk o-mono" role="row">{{ h.header }}</div>
+                @for (l of h.lines; track $index) {
+                  <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [class.o-del]="l.kind === 'delete'">
+                    <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.kind === 'delete' ? l.old : l.new }}</span>
+                    <span class="o-s" aria-hidden="true">{{ l.kind === 'add' ? '+' : l.kind === 'delete' ? '−' : ' ' }}</span>
+                    <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : l.kind === 'delete' ? 'removed' : '' }}</span>
+                    <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
+                  </div>
+                  @for (t of threadsAt(l); track t.id) {<ng-container *ngTemplateOutlet="threadTpl; context: { $implicit: t }" />}
+                  @if (drafting() === key(l)) {<ng-container *ngTemplateOutlet="draftTpl; context: { $implicit: l }" />}
                 }
+              } @empty {
+                <div class="o-empty o-sm">{{ ignoreSpace() ? 'Only whitespace changed.' : 'No changes to show.' }}</div>
               }
-            } @empty {
-              <div class="o-empty o-sm">No changes to show.</div>
-            }
-          </div>
+            </div>
+          }
         } @else {
           <div class="o-empty o-sm">Loading…</div>
         }
       }
     </div>
-  `, isInline: true, styles: [":host ::ng-deep [class^=tk-k]{color:var(--o-tk-k)}:host ::ng-deep [class^=tk-s],:host ::ng-deep [class^=tk-l]{color:var(--o-tk-s)}:host ::ng-deep [class^=tk-c]{color:var(--o-tk-c);font-style:italic}:host ::ng-deep [class^=tk-m]{color:var(--o-tk-n)}:host ::ng-deep .tk-nf,:host ::ng-deep .tk-nx,:host ::ng-deep .tk-fm{color:var(--o-tk-f)}:host ::ng-deep .tk-nb,:host ::ng-deep .tk-nt,:host ::ng-deep .tk-bp{color:var(--o-tk-p)}:host ::ng-deep .tk-gi{color:var(--o-add)}:host ::ng-deep .tk-gd{color:var(--o-bad-tx)}\n", ".o-ln .o-n{cursor:default;width:44px}.o-ln .o-n.cmt{cursor:pointer}.o-ln .o-n.cmt:hover{color:var(--o-acc-tx)}.hunk{color:var(--o-dim);background:var(--o-well);padding:2px 12px;font-size:11px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+
+    <ng-template #threadTpl let-t>
+      <div class="o-thread" [attr.data-testid]="'thread-' + t.id">
+        <div class="o-cb o-col" style="gap:6px;padding:10px 12px">
+          @for (c of t.comments; track c.id) {
+            <span class="o-sm"><b>{{ people().name(c.authorId) }}</b><span class="o-faint"> · {{ ago(c.createdAt) }}</span>
+              @if (c.pending) {<span class="o-chip o-amb" style="margin-left:6px">Pending</span>
+                @if (c.authorId === me()) {<button type="button" class="o-lnk" style="margin-left:6px;color:var(--o-mut)" (click)="discard.emit(c.id)" [attr.aria-label]="'Discard pending comment: ' + c.body">Discard</button>}
+              }
+            </span>
+            <span style="white-space:pre-wrap">{{ c.body }}</span>
+          }
+        </div>
+        @if (canComment()) {
+          <div class="o-cf">
+            <input class="o-in o-sm" placeholder="Reply…" aria-label="Reply" [ngModel]="replies()[t.id] ?? ''" (ngModelChange)="setReply(t.id, $event)" (keydown.enter)="sendReply(t.id)" />
+            <button type="button" class="o-btn o-sm" (click)="sendReply(t.id)">Reply</button>
+            <button type="button" class="o-btn o-sm" (click)="resolve.emit({ threadId: t.id, resolved: !t.resolved })">{{ t.resolved ? 'Unresolve' : 'Resolve' }}</button>
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #draftTpl let-l>
+      <div class="o-thread"><div class="o-cb o-col" style="gap:8px;padding:10px 12px">
+        <textarea class="o-in" rows="2" [placeholder]="'Leave a comment on line ' + lineOf(l)" [attr.aria-label]="'Comment on line ' + lineOf(l)" [ngModel]="draftBody()" (ngModelChange)="draftBody.set($event)" data-testid="line-comment"></textarea>
+        <div class="o-flex o-wrap"><span class="o-faint o-xs">Markdown works.</span>
+          <button type="button" class="o-btn o-sm o-r" (click)="drafting.set('')">Cancel</button>
+          <button type="button" class="o-btn o-sm" [disabled]="!draftBody().trim()" (click)="send(l, false)" data-testid="line-comment-add">Add single comment</button>
+          <button type="button" class="o-btn o-sm o-pri" [disabled]="!draftBody().trim()" (click)="send(l, true)" data-testid="line-comment-review">{{ reviewing() ? 'Add review comment' : 'Start a review' }}</button>
+        </div>
+      </div></div>
+    </ng-template>
+  `, isInline: true, styles: [":host ::ng-deep [class^=tk-k]{color:var(--o-tk-k)}:host ::ng-deep [class^=tk-s],:host ::ng-deep [class^=tk-l]{color:var(--o-tk-s)}:host ::ng-deep [class^=tk-c]{color:var(--o-tk-c);font-style:italic}:host ::ng-deep [class^=tk-m]{color:var(--o-tk-n)}:host ::ng-deep .tk-nf,:host ::ng-deep .tk-nx,:host ::ng-deep .tk-fm{color:var(--o-tk-f)}:host ::ng-deep .tk-nb,:host ::ng-deep .tk-nt,:host ::ng-deep .tk-bp{color:var(--o-tk-p)}:host ::ng-deep .tk-gi{color:var(--o-add)}:host ::ng-deep .tk-gd{color:var(--o-bad-tx)}\n", ".o-ln .o-n{cursor:default;width:44px}.o-ln .o-n.cmt{cursor:pointer}.o-ln .o-n.cmt:hover{color:var(--o-acc-tx)}.hunk{color:var(--o-dim);background:var(--o-well);padding:2px 12px;font-size:11px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.split .side-l{border-right:1px solid var(--o-line-soft)}.split .full{grid-column:1 / -1}.split .o-ln .o-t{white-space:pre-wrap;word-break:break-all}.empty-side{background:var(--o-well)}.viewed{display:inline-flex;align-items:center;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DiffView, decorators: [{
             type: Component,
-            args: [{ selector: 'o-diff', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="o-card" [attr.data-testid]="'diff-' + file().path">
+            args: [{ selector: 'o-diff', imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="o-card" [attr.id]="'file-' + file().path" [attr.data-testid]="'diff-' + file().path">
       <div class="o-ch" style="background:var(--o-well)">
-        <button type="button" class="o-btn o-ghost o-xs" (click)="open.set(!open())" [attr.aria-expanded]="open()" [attr.aria-label]="(open() ? 'Collapse ' : 'Expand ') + file().path">{{ open() ? '▾' : '▸' }}</button>
+        <button type="button" class="o-btn o-ghost o-xs" (click)="toggleOpen()" [attr.aria-expanded]="open()" [attr.aria-label]="(open() ? 'Collapse ' : 'Expand ') + file().path">{{ open() ? '▾' : '▸' }}</button>
         <span class="o-mono o-sm o-ell">{{ file().oldPath && file().oldPath !== file().path ? file().oldPath + ' → ' : '' }}{{ file().path }}</span>
         <span class="o-grn-t o-sm">+{{ file().additions }}</span><span class="o-red-t o-sm">−{{ file().deletions }}</span>
         @if (threadsHere().length) {<span class="o-faint o-sm">💬 {{ threadsHere().length }}</span>}
-        <span class="o-r"><ng-content /></span>
+        <span class="o-r o-flex" style="gap:6px">
+          @if (open() && diff() && context() < 100 && !file().binary) {<button type="button" class="o-btn o-xs" (click)="moreContext()" [attr.aria-label]="'Show more context in ' + file().path">More context</button>}
+          <ng-content />
+          @if (viewable()) {
+            <button type="button" class="o-btn o-xs viewed" role="checkbox" [attr.aria-checked]="viewed()" [attr.aria-label]="'Viewed ' + file().path" (click)="viewedChange.emit(!viewed())"><span class="o-cbx" [class.o-on]="viewed()" style="width:12px;height:12px"></span>Viewed</button>
+          }
+        </span>
       </div>
       @if (open()) {
         @if (file().binary) {
           <div class="o-empty o-sm">A binary file.</div>
+        } @else if (waiting()) {
+          <div class="o-empty o-sm o-col" style="gap:8px;align-items:center">
+            <span>{{ file().additions + file().deletions }} changed lines.</span>
+            <button type="button" class="o-btn o-sm" (click)="waiting.set(false); load()">Load diff</button>
+          </div>
         } @else if (error()) {
           <div class="o-note o-red" role="alert">{{ error() }}</div>
         } @else if (diff(); as d) {
           @if (d.truncated) {<div class="o-note">This diff is too large to show in full.</div>}
-          <div class="o-code" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path">
-            @for (h of d.hunks; track $index) {
-              <div class="hunk o-mono" role="row">{{ h.header }}</div>
-              @for (l of h.lines; track $index) {
-                <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [class.o-del]="l.kind === 'delete'">
-                  <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.kind === 'delete' ? l.old : l.new }}</span>
-                  <span class="o-s" aria-hidden="true">{{ l.kind === 'add' ? '+' : l.kind === 'delete' ? '−' : ' ' }}</span>
-                  <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : l.kind === 'delete' ? 'removed' : '' }}</span>
-                  <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
-                </div>
-                @for (t of threadsAt(l); track t.id) {
-                  <div class="o-thread" [attr.data-testid]="'thread-' + t.id">
-                    <div class="o-cb o-col" style="gap:6px;padding:10px 12px">
-                      @for (c of t.comments; track c.id) {
-                        <span class="o-sm"><b>{{ people().name(c.authorId) }}</b><span class="o-faint"> · {{ ago(c.createdAt) }}{{ c.pending ? ' · pending' : '' }}</span></span>
-                        <span style="white-space:pre-wrap">{{ c.body }}</span>
-                      }
+          @if (mode() === 'split') {
+            <div class="o-code split" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path + ', side by side'">
+              @for (h of d.hunks; track $index; let hi = $index) {
+                <div class="hunk o-mono full" role="row">{{ h.header }}</div>
+                @for (r of splitRows()[hi]; track $index) {
+                  @if (r.left; as l) {
+                    <div class="o-ln side-l" role="row" [class.o-del]="l.kind === 'delete'" [attr.data-testid]="'split-old-' + l.old">
+                      <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.old }}</span>
+                      <span class="o-sr-only">{{ l.kind === 'delete' ? 'removed' : '' }}</span>
+                      <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
                     </div>
-                    @if (canComment()) {
-                      <div class="o-cf">
-                        <input class="o-in o-sm" placeholder="Reply…" aria-label="Reply" [ngModel]="replies()[t.id] ?? ''" (ngModelChange)="setReply(t.id, $event)" (keydown.enter)="sendReply(t.id)" />
-                        <button type="button" class="o-btn o-sm" (click)="sendReply(t.id)">Reply</button>
-                        <button type="button" class="o-btn o-sm" (click)="resolve.emit({ threadId: t.id, resolved: !t.resolved })">{{ t.resolved ? 'Unresolve' : 'Resolve' }}</button>
-                      </div>
-                    }
-                  </div>
+                  } @else {<div class="o-ln side-l empty-side" aria-hidden="true"><span class="o-n"></span><span class="o-t"></span></div>}
+                  @if (r.right; as l) {
+                    <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [attr.data-testid]="'split-new-' + l.new">
+                      <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.new }}</span>
+                      <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : '' }}</span>
+                      <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
+                    </div>
+                  } @else {<div class="o-ln empty-side" aria-hidden="true"><span class="o-n"></span><span class="o-t"></span></div>}
+                  @for (l of rowLines(r); track $index) {
+                    @for (t of threadsAt(l); track t.id) {<div class="full"><ng-container *ngTemplateOutlet="threadTpl; context: { $implicit: t }" /></div>}
+                    @if (drafting() === key(l)) {<div class="full"><ng-container *ngTemplateOutlet="draftTpl; context: { $implicit: l }" /></div>}
+                  }
                 }
-                @if (drafting() === key(l)) {
-                  <div class="o-thread"><div class="o-cb o-col" style="gap:8px;padding:10px 12px">
-                    <textarea class="o-in" rows="2" [placeholder]="'Leave a comment on line ' + lineOf(l)" [attr.aria-label]="'Comment on line ' + lineOf(l)" [ngModel]="draftBody()" (ngModelChange)="draftBody.set($event)" data-testid="line-comment"></textarea>
-                    <div class="o-flex"><span class="o-faint o-xs">Markdown works.</span><button type="button" class="o-btn o-sm o-r" (click)="drafting.set('')">Cancel</button><button type="button" class="o-btn o-sm o-dark" [disabled]="!draftBody().trim()" (click)="send(l)" data-testid="line-comment-add">Comment</button></div>
-                  </div></div>
+              } @empty {<div class="o-empty o-sm full">{{ ignoreSpace() ? 'Only whitespace changed.' : 'No changes to show.' }}</div>}
+            </div>
+          } @else {
+            <div class="o-code" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path">
+              @for (h of d.hunks; track $index) {
+                <div class="hunk o-mono" role="row">{{ h.header }}</div>
+                @for (l of h.lines; track $index) {
+                  <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [class.o-del]="l.kind === 'delete'">
+                    <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.kind === 'delete' ? l.old : l.new }}</span>
+                    <span class="o-s" aria-hidden="true">{{ l.kind === 'add' ? '+' : l.kind === 'delete' ? '−' : ' ' }}</span>
+                    <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : l.kind === 'delete' ? 'removed' : '' }}</span>
+                    <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
+                  </div>
+                  @for (t of threadsAt(l); track t.id) {<ng-container *ngTemplateOutlet="threadTpl; context: { $implicit: t }" />}
+                  @if (drafting() === key(l)) {<ng-container *ngTemplateOutlet="draftTpl; context: { $implicit: l }" />}
                 }
+              } @empty {
+                <div class="o-empty o-sm">{{ ignoreSpace() ? 'Only whitespace changed.' : 'No changes to show.' }}</div>
               }
-            } @empty {
-              <div class="o-empty o-sm">No changes to show.</div>
-            }
-          </div>
+            </div>
+          }
         } @else {
           <div class="o-empty o-sm">Loading…</div>
         }
       }
     </div>
-  `, styles: [":host ::ng-deep [class^=tk-k]{color:var(--o-tk-k)}:host ::ng-deep [class^=tk-s],:host ::ng-deep [class^=tk-l]{color:var(--o-tk-s)}:host ::ng-deep [class^=tk-c]{color:var(--o-tk-c);font-style:italic}:host ::ng-deep [class^=tk-m]{color:var(--o-tk-n)}:host ::ng-deep .tk-nf,:host ::ng-deep .tk-nx,:host ::ng-deep .tk-fm{color:var(--o-tk-f)}:host ::ng-deep .tk-nb,:host ::ng-deep .tk-nt,:host ::ng-deep .tk-bp{color:var(--o-tk-p)}:host ::ng-deep .tk-gi{color:var(--o-add)}:host ::ng-deep .tk-gd{color:var(--o-bad-tx)}\n", ".o-ln .o-n{cursor:default;width:44px}.o-ln .o-n.cmt{cursor:pointer}.o-ln .o-n.cmt:hover{color:var(--o-acc-tx)}.hunk{color:var(--o-dim);background:var(--o-well);padding:2px 12px;font-size:11px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { repo: [{ type: i0.Input, args: [{ isSignal: true, alias: "repo", required: true }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], head: [{ type: i0.Input, args: [{ isSignal: true, alias: "head", required: true }] }], base: [{ type: i0.Input, args: [{ isSignal: true, alias: "base", required: false }] }], threads: [{ type: i0.Input, args: [{ isSignal: true, alias: "threads", required: false }] }], canComment: [{ type: i0.Input, args: [{ isSignal: true, alias: "canComment", required: false }] }], comment: [{ type: i0.Output, args: ["comment"] }], reply: [{ type: i0.Output, args: ["reply"] }], resolve: [{ type: i0.Output, args: ["resolve"] }] } });
+
+    <ng-template #threadTpl let-t>
+      <div class="o-thread" [attr.data-testid]="'thread-' + t.id">
+        <div class="o-cb o-col" style="gap:6px;padding:10px 12px">
+          @for (c of t.comments; track c.id) {
+            <span class="o-sm"><b>{{ people().name(c.authorId) }}</b><span class="o-faint"> · {{ ago(c.createdAt) }}</span>
+              @if (c.pending) {<span class="o-chip o-amb" style="margin-left:6px">Pending</span>
+                @if (c.authorId === me()) {<button type="button" class="o-lnk" style="margin-left:6px;color:var(--o-mut)" (click)="discard.emit(c.id)" [attr.aria-label]="'Discard pending comment: ' + c.body">Discard</button>}
+              }
+            </span>
+            <span style="white-space:pre-wrap">{{ c.body }}</span>
+          }
+        </div>
+        @if (canComment()) {
+          <div class="o-cf">
+            <input class="o-in o-sm" placeholder="Reply…" aria-label="Reply" [ngModel]="replies()[t.id] ?? ''" (ngModelChange)="setReply(t.id, $event)" (keydown.enter)="sendReply(t.id)" />
+            <button type="button" class="o-btn o-sm" (click)="sendReply(t.id)">Reply</button>
+            <button type="button" class="o-btn o-sm" (click)="resolve.emit({ threadId: t.id, resolved: !t.resolved })">{{ t.resolved ? 'Unresolve' : 'Resolve' }}</button>
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #draftTpl let-l>
+      <div class="o-thread"><div class="o-cb o-col" style="gap:8px;padding:10px 12px">
+        <textarea class="o-in" rows="2" [placeholder]="'Leave a comment on line ' + lineOf(l)" [attr.aria-label]="'Comment on line ' + lineOf(l)" [ngModel]="draftBody()" (ngModelChange)="draftBody.set($event)" data-testid="line-comment"></textarea>
+        <div class="o-flex o-wrap"><span class="o-faint o-xs">Markdown works.</span>
+          <button type="button" class="o-btn o-sm o-r" (click)="drafting.set('')">Cancel</button>
+          <button type="button" class="o-btn o-sm" [disabled]="!draftBody().trim()" (click)="send(l, false)" data-testid="line-comment-add">Add single comment</button>
+          <button type="button" class="o-btn o-sm o-pri" [disabled]="!draftBody().trim()" (click)="send(l, true)" data-testid="line-comment-review">{{ reviewing() ? 'Add review comment' : 'Start a review' }}</button>
+        </div>
+      </div></div>
+    </ng-template>
+  `, styles: [":host ::ng-deep [class^=tk-k]{color:var(--o-tk-k)}:host ::ng-deep [class^=tk-s],:host ::ng-deep [class^=tk-l]{color:var(--o-tk-s)}:host ::ng-deep [class^=tk-c]{color:var(--o-tk-c);font-style:italic}:host ::ng-deep [class^=tk-m]{color:var(--o-tk-n)}:host ::ng-deep .tk-nf,:host ::ng-deep .tk-nx,:host ::ng-deep .tk-fm{color:var(--o-tk-f)}:host ::ng-deep .tk-nb,:host ::ng-deep .tk-nt,:host ::ng-deep .tk-bp{color:var(--o-tk-p)}:host ::ng-deep .tk-gi{color:var(--o-add)}:host ::ng-deep .tk-gd{color:var(--o-bad-tx)}\n", ".o-ln .o-n{cursor:default;width:44px}.o-ln .o-n.cmt{cursor:pointer}.o-ln .o-n.cmt:hover{color:var(--o-acc-tx)}.hunk{color:var(--o-dim);background:var(--o-well);padding:2px 12px;font-size:11px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.split .side-l{border-right:1px solid var(--o-line-soft)}.split .full{grid-column:1 / -1}.split .o-ln .o-t{white-space:pre-wrap;word-break:break-all}.empty-side{background:var(--o-well)}.viewed{display:inline-flex;align-items:center;gap:6px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { repo: [{ type: i0.Input, args: [{ isSignal: true, alias: "repo", required: true }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], head: [{ type: i0.Input, args: [{ isSignal: true, alias: "head", required: true }] }], base: [{ type: i0.Input, args: [{ isSignal: true, alias: "base", required: false }] }], threads: [{ type: i0.Input, args: [{ isSignal: true, alias: "threads", required: false }] }], canComment: [{ type: i0.Input, args: [{ isSignal: true, alias: "canComment", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], ignoreSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreSpace", required: false }] }], viewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewed", required: false }] }], reviewing: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviewing", required: false }] }], comment: [{ type: i0.Output, args: ["comment"] }], reply: [{ type: i0.Output, args: ["reply"] }], resolve: [{ type: i0.Output, args: ["resolve"] }], discard: [{ type: i0.Output, args: ["discard"] }], viewedChange: [{ type: i0.Output, args: ["viewedChange"] }] } });
+/** Pairs a hunk's lines side by side: context on both sides, a run of removals beside the run of additions that follows it. */
+function pair(lines) {
+    const rows = [];
+    let i = 0;
+    while (i < lines.length) {
+        const l = lines[i];
+        if (l.kind === 'context') {
+            rows.push({ left: l, right: l });
+            i++;
+            continue;
+        }
+        const dels = [];
+        const adds = [];
+        while (i < lines.length && lines[i].kind === 'delete')
+            dels.push(lines[i++]);
+        while (i < lines.length && lines[i].kind === 'add')
+            adds.push(lines[i++]);
+        for (let k = 0; k < Math.max(dels.length, adds.length); k++)
+            rows.push({ left: dels[k], right: adds[k] });
+    }
+    return rows;
+}
 
 // /{org}/{project}/code (prototype "code_repos"): the project's repositories.
 class ReposPage {
@@ -1686,7 +1895,7 @@ class CommitPage extends RepoPage {
         <div class="o-card"><div class="o-empty">Loading…</div></div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DiffView, selector: "o-diff", inputs: ["repo", "file", "head", "base", "threads", "canComment"], outputs: ["comment", "reply", "resolve"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DiffView, selector: "o-diff", inputs: ["repo", "file", "head", "base", "threads", "canComment", "mode", "ignoreSpace", "viewed", "reviewing"], outputs: ["comment", "reply", "resolve", "discard", "viewedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CommitPage, decorators: [{
             type: Component,
@@ -2176,6 +2385,17 @@ class PullPage extends RepoPage {
         this.initials = initials;
         this.dot = checkDot;
         this.threads = computed(() => this.timeline().threads, ...(ngDevMode ? [{ debugName: "threads" }] : /* istanbul ignore next */ []));
+        this.mode = signal(readPref('origine.diff.mode') === 'split' ? 'split' : 'unified', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.hideWs = signal(false, ...(ngDevMode ? [{ debugName: "hideWs" }] : /* istanbul ignore next */ []));
+        /** Files marked viewed, kept per pull request head in this browser (a new push resets them). */
+        this.viewed = signal({}, ...(ngDevMode ? [{ debugName: "viewed" }] : /* istanbul ignore next */ []));
+        this.viewedCount = computed(() => (this.cmp()?.files ?? []).filter((f) => this.viewed()[f.path]).length, ...(ngDevMode ? [{ debugName: "viewedCount" }] : /* istanbul ignore next */ []));
+        /** The caller's pending review comments (shown only to them until the review is submitted). */
+        this.myPending = computed(() => {
+            const me = this.host.meId();
+            const t = this.timeline();
+            return [...t.comments, ...t.threads.flatMap((th) => th.comments)].filter((c, i, all) => c.pending && c.authorId === me && all.findIndex((x) => x.id === c.id) === i);
+        }, ...(ngDevMode ? [{ debugName: "myPending" }] : /* istanbul ignore next */ []));
         this.openThreads = computed(() => this.threads().filter((t) => !t.resolved && !t.outdated).length, ...(ngDevMode ? [{ debugName: "openThreads" }] : /* istanbul ignore next */ []));
         this.tabs = computed(() => {
             const p = this.pr();
@@ -2194,8 +2414,12 @@ class PullPage extends RepoPage {
         this.approvedByMe = computed(() => (this.pr()?.reviews ?? []).some((r) => r.authorId === this.host.meId() && r.state === 'approved' && !r.stale), ...(ngDevMode ? [{ debugName: "approvedByMe" }] : /* istanbul ignore next */ []));
         this.reviewKinds = computed(() => {
             const need = this.pr()?.gate.rows.find((r) => /required by branch protection|requires/.test(r.text + (r.meta ?? '')));
+            const comment = { id: 'commented', label: 'Comment', hint: 'General feedback without approving.' };
+            // the author (or a role that cannot push) still posts their pending comments as a review
+            if (!this.pr()?.canReview)
+                return [{ ...comment, hint: 'Post your pending comments.' }];
             return [
-                { id: 'commented', label: 'Comment', hint: 'General feedback without approving.' },
+                comment,
                 { id: 'approved', label: 'Approve', hint: need ? `Counts toward the approvals ${this.pr()?.target} requires.` : 'Approve these changes.' },
                 { id: 'changes_requested', label: 'Request changes', hint: 'Blocks merge until you approve.' },
             ];
@@ -2271,7 +2495,32 @@ class PullPage extends RepoPage {
         this.run(this.api.comment(this.projectId(), this.name(), this.number, { body }), 'Could not add the comment.', () => this.draft.set(''));
     }
     lineComment(c) {
-        this.run(this.api.comment(this.projectId(), this.name(), this.number, { body: c.body, path: c.path, side: c.side, line: c.line }), 'Could not add the comment.');
+        this.run(this.api.comment(this.projectId(), this.name(), this.number, { body: c.body, path: c.path, side: c.side, line: c.line, pending: c.pending }), 'Could not add the comment.', () => { if (c.pending)
+            this.note.set('Added to your review. Submit it from Review changes to post your comments.'); });
+    }
+    discard(id) {
+        this.run(this.api.discardComment(this.projectId(), this.name(), this.number, id), 'Could not discard the comment.');
+    }
+    setMode(m) {
+        this.mode.set(m);
+        writePref('origine.diff.mode', m);
+    }
+    viewedKey() {
+        return `origine.viewed.${this.projectId()}.${this.name()}.${this.number}.${this.pr()?.headSha ?? ''}`;
+    }
+    isViewed(path) {
+        return !!this.viewed()[path];
+    }
+    setViewed(path, on) {
+        const v = { ...this.viewed(), [path]: on };
+        if (!on)
+            delete v[path];
+        this.viewed.set(v);
+        writePref(this.viewedKey(), JSON.stringify(v));
+    }
+    jump(path) {
+        const el = this.el.nativeElement.querySelector(`[id="file-${CSS.escape(path)}"]`);
+        el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
     reply(r) {
         this.run(this.api.comment(this.projectId(), this.name(), this.number, { body: r.body, threadId: r.threadId }), 'Could not reply.');
@@ -2310,7 +2559,16 @@ class PullPage extends RepoPage {
         const project = this.projectId();
         this.api.pull(project, this.name(), this.number).subscribe({
             next: (p) => {
+                const headChanged = this.pr()?.headSha !== p.headSha;
                 this.pr.set(p);
+                if (headChanged) {
+                    try {
+                        this.viewed.set(JSON.parse(readPref(this.viewedKey()) || '{}'));
+                    }
+                    catch {
+                        this.viewed.set({});
+                    }
+                }
                 if (first) {
                     this.method.set(p.mergeMethods[0] ?? 'merge');
                     this.delBranch.set(p.deleteBranchOnMerge);
@@ -2341,17 +2599,18 @@ class PullPage extends RepoPage {
         <div class="o-tabs" role="tablist">
           @for (t of tabs(); track t.id) {<button type="button" role="tab" class="o-tab" [class.o-on]="tab() === t.id" [attr.aria-selected]="tab() === t.id" (click)="pick(t.id)">{{ t.label }}@if (t.n !== undefined) {<span class="o-n">{{ t.n }}</span>}</button>}
           <span class="o-r"></span>
-          @if (p.state === 'open' && p.canReview) {
+          @if (p.state === 'open' && (p.canReview || myPending().length)) {
             <div class="anchor">
               <button type="button" class="o-btn o-sm o-pri" (click)="reviewOpen.set(!reviewOpen())" [attr.aria-expanded]="reviewOpen()" aria-haspopup="dialog" data-testid="review-open">Review changes ⌄</button>
               @if (reviewOpen()) {
                 <div class="o-menu" role="dialog" aria-label="Finish your review" style="right:0;top:36px;width:380px;padding:14px;display:flex;flex-direction:column;gap:10px">
                   <b>Finish your review</b>
+                  <span class="o-faint o-sm" data-testid="review-pending-note">{{ myPending().length ? myPending().length + ' pending ' + (myPending().length === 1 ? 'comment' : 'comments') + ' included' : 'No pending comments' }}</span>
                   <textarea class="o-in" rows="3" placeholder="Leave a comment" aria-label="Review comment" style="height:auto;padding:8px 10px" [ngModel]="revBody()" (ngModelChange)="revBody.set($event)"></textarea>
                   @for (k of reviewKinds(); track k.id) {
                     <button type="button" class="o-opt" style="padding:8px 10px" [class.o-on]="revKind() === k.id" (click)="revKind.set(k.id)"><span class="o-rad" [class.o-on]="revKind() === k.id"></span><span class="o-col" style="gap:1px"><b class="o-b5">{{ k.label }}</b><span class="o-faint o-sm">{{ k.hint }}</span></span></button>
                   }
-                  <div class="o-flex"><button type="button" class="o-btn o-sm o-pri o-r" (click)="submitReview()" [disabled]="busy() || (revKind() !== 'approved' && !revBody().trim())" data-testid="review-submit">Submit review</button></div>
+                  <div class="o-flex"><button type="button" class="o-btn o-sm o-pri o-r" (click)="submitReview()" [disabled]="busy() || (revKind() !== 'approved' && !revBody().trim() && !(revKind() === 'commented' && myPending().length))" data-testid="review-submit">Submit review</button></div>
                 </div>
               }
             </div>
@@ -2435,10 +2694,28 @@ class PullPage extends RepoPage {
                 </div>
               }
               @case ('files') {
-                <div class="o-flex o-wrap"><span class="o-faint o-sm">{{ cmp()?.files?.length ?? 0 }} {{ cmp()?.files?.length === 1 ? 'file' : 'files' }} · click a line number to comment</span><span class="o-r o-faint o-sm">{{ openThreads() }} unresolved {{ openThreads() === 1 ? 'conversation' : 'conversations' }}</span></div>
-                @for (f of cmp()?.files ?? []; track f.path) {
-                  <o-diff [repo]="name()" [file]="f" [head]="p.headSha" [base]="p.mergeBase" [threads]="threads()" [canComment]="p.state === 'open'" (comment)="lineComment($event)" (reply)="reply($event)" (resolve)="resolve($event)" />
-                } @empty {<div class="o-card"><div class="o-empty">{{ cmp() ? 'No changes.' : 'Loading…' }}</div></div>}
+                <div class="o-flex o-wrap">
+                  <div class="o-seg" role="group" aria-label="Diff view"><button type="button" [class.o-on]="mode() === 'unified'" [attr.aria-pressed]="mode() === 'unified'" (click)="setMode('unified')">Unified</button><button type="button" [class.o-on]="mode() === 'split'" [attr.aria-pressed]="mode() === 'split'" (click)="setMode('split')" data-testid="diff-split">Split</button></div>
+                  <button type="button" class="o-btn o-sm" [class.o-on]="hideWs()" [attr.aria-pressed]="hideWs()" (click)="hideWs.set(!hideWs())" data-testid="hide-ws">Hide whitespace</button>
+                  @if (myPending().length) {<span class="o-chip o-amb" data-testid="pending-count">{{ myPending().length }} pending {{ myPending().length === 1 ? 'comment' : 'comments' }}</span>}
+                  <span class="o-r o-faint o-sm" data-testid="viewed-note">{{ viewedCount() }} of {{ cmp()?.files?.length ?? 0 }} files viewed · {{ openThreads() }} unresolved {{ openThreads() === 1 ? 'conversation' : 'conversations' }}</span>
+                </div>
+                <div class="files-split">
+                  @if ((cmp()?.files?.length ?? 0) > 1) {
+                    <div class="o-card files-tree" role="navigation" aria-label="Files">
+                      @for (f of cmp()?.files ?? []; track f.path) {
+                        <button type="button" class="o-row o-click o-sm" style="width:100%;border:none;background:none;text-align:left" (click)="jump(f.path)"><span class="o-cbx" [class.o-on]="isViewed(f.path)" aria-hidden="true"></span><span class="o-mono o-ell" style="flex:1">{{ f.path }}</span><span class="o-grn-t o-xs">+{{ f.additions }}</span></button>
+                      }
+                    </div>
+                  }
+                  <div class="o-col" style="gap:14px;min-width:0">
+                    @for (f of cmp()?.files ?? []; track f.path) {
+                      <o-diff [repo]="name()" [file]="f" [head]="p.headSha" [base]="p.mergeBase" [threads]="threads()" [canComment]="p.state === 'open'" [mode]="mode()" [ignoreSpace]="hideWs()"
+                        [viewed]="isViewed(f.path)" [reviewing]="myPending().length > 0" (viewedChange)="setViewed(f.path, $event)"
+                        (comment)="lineComment($event)" (reply)="reply($event)" (resolve)="resolve($event)" (discard)="discard($event)" />
+                    } @empty {<div class="o-card"><div class="o-empty">{{ cmp() ? 'No changes.' : 'Loading…' }}</div></div>}
+                  </div>
+                </div>
               }
               @case ('checks') {
                 <div class="o-card">
@@ -2471,7 +2748,7 @@ class PullPage extends RepoPage {
         <div class="o-card"><div class="o-empty">Loading…</div></div>
       }
     </div>
-  `, isInline: true, styles: [".badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;color:var(--o-acc-fg)}.anchor{position:relative;align-self:center}.merge{display:flex;align-items:center;position:relative}.merge .go{height:32px;padding:0 14px;border-radius:7px 0 0 7px;border:none;font-size:13px;font-weight:500;color:var(--o-acc-fg);background:var(--o-ok);cursor:pointer}.merge .mn{height:32px;padding:0 10px;border:none;border-radius:0 7px 7px 0;font-size:12px;color:var(--o-acc-fg);background:var(--o-ok);border-left:1px solid rgba(255,255,255,.25);cursor:pointer}.merge button:disabled{background:var(--o-line-mid);cursor:not-allowed}.tl{display:flex;flex-direction:column;gap:10px;padding-left:14px;border-left:2px solid var(--o-line);margin-left:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DiffView, selector: "o-diff", inputs: ["repo", "file", "head", "base", "threads", "canComment"], outputs: ["comment", "reply", "resolve"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;color:var(--o-acc-fg)}.anchor{position:relative;align-self:center}.merge{display:flex;align-items:center;position:relative}.merge .go{height:32px;padding:0 14px;border-radius:7px 0 0 7px;border:none;font-size:13px;font-weight:500;color:var(--o-acc-fg);background:var(--o-ok);cursor:pointer}.merge .mn{height:32px;padding:0 10px;border:none;border-radius:0 7px 7px 0;font-size:12px;color:var(--o-acc-fg);background:var(--o-ok);border-left:1px solid rgba(255,255,255,.25);cursor:pointer}.merge button:disabled{background:var(--o-line-mid);cursor:not-allowed}.tl{display:flex;flex-direction:column;gap:10px;padding-left:14px;border-left:2px solid var(--o-line);margin-left:14px}.files-split{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;align-items:start}.files-split:has(>:only-child){grid-template-columns:minmax(0,1fr)}.files-tree{position:sticky;top:8px;max-height:calc(100vh - 120px);overflow:auto}@media(max-width:900px){.files-split{grid-template-columns:minmax(0,1fr)}.files-tree{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DiffView, selector: "o-diff", inputs: ["repo", "file", "head", "base", "threads", "canComment", "mode", "ignoreSpace", "viewed", "reviewing"], outputs: ["comment", "reply", "resolve", "discard", "viewedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PullPage, decorators: [{
             type: Component,
@@ -2492,17 +2769,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         <div class="o-tabs" role="tablist">
           @for (t of tabs(); track t.id) {<button type="button" role="tab" class="o-tab" [class.o-on]="tab() === t.id" [attr.aria-selected]="tab() === t.id" (click)="pick(t.id)">{{ t.label }}@if (t.n !== undefined) {<span class="o-n">{{ t.n }}</span>}</button>}
           <span class="o-r"></span>
-          @if (p.state === 'open' && p.canReview) {
+          @if (p.state === 'open' && (p.canReview || myPending().length)) {
             <div class="anchor">
               <button type="button" class="o-btn o-sm o-pri" (click)="reviewOpen.set(!reviewOpen())" [attr.aria-expanded]="reviewOpen()" aria-haspopup="dialog" data-testid="review-open">Review changes ⌄</button>
               @if (reviewOpen()) {
                 <div class="o-menu" role="dialog" aria-label="Finish your review" style="right:0;top:36px;width:380px;padding:14px;display:flex;flex-direction:column;gap:10px">
                   <b>Finish your review</b>
+                  <span class="o-faint o-sm" data-testid="review-pending-note">{{ myPending().length ? myPending().length + ' pending ' + (myPending().length === 1 ? 'comment' : 'comments') + ' included' : 'No pending comments' }}</span>
                   <textarea class="o-in" rows="3" placeholder="Leave a comment" aria-label="Review comment" style="height:auto;padding:8px 10px" [ngModel]="revBody()" (ngModelChange)="revBody.set($event)"></textarea>
                   @for (k of reviewKinds(); track k.id) {
                     <button type="button" class="o-opt" style="padding:8px 10px" [class.o-on]="revKind() === k.id" (click)="revKind.set(k.id)"><span class="o-rad" [class.o-on]="revKind() === k.id"></span><span class="o-col" style="gap:1px"><b class="o-b5">{{ k.label }}</b><span class="o-faint o-sm">{{ k.hint }}</span></span></button>
                   }
-                  <div class="o-flex"><button type="button" class="o-btn o-sm o-pri o-r" (click)="submitReview()" [disabled]="busy() || (revKind() !== 'approved' && !revBody().trim())" data-testid="review-submit">Submit review</button></div>
+                  <div class="o-flex"><button type="button" class="o-btn o-sm o-pri o-r" (click)="submitReview()" [disabled]="busy() || (revKind() !== 'approved' && !revBody().trim() && !(revKind() === 'commented' && myPending().length))" data-testid="review-submit">Submit review</button></div>
                 </div>
               }
             </div>
@@ -2586,10 +2864,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 </div>
               }
               @case ('files') {
-                <div class="o-flex o-wrap"><span class="o-faint o-sm">{{ cmp()?.files?.length ?? 0 }} {{ cmp()?.files?.length === 1 ? 'file' : 'files' }} · click a line number to comment</span><span class="o-r o-faint o-sm">{{ openThreads() }} unresolved {{ openThreads() === 1 ? 'conversation' : 'conversations' }}</span></div>
-                @for (f of cmp()?.files ?? []; track f.path) {
-                  <o-diff [repo]="name()" [file]="f" [head]="p.headSha" [base]="p.mergeBase" [threads]="threads()" [canComment]="p.state === 'open'" (comment)="lineComment($event)" (reply)="reply($event)" (resolve)="resolve($event)" />
-                } @empty {<div class="o-card"><div class="o-empty">{{ cmp() ? 'No changes.' : 'Loading…' }}</div></div>}
+                <div class="o-flex o-wrap">
+                  <div class="o-seg" role="group" aria-label="Diff view"><button type="button" [class.o-on]="mode() === 'unified'" [attr.aria-pressed]="mode() === 'unified'" (click)="setMode('unified')">Unified</button><button type="button" [class.o-on]="mode() === 'split'" [attr.aria-pressed]="mode() === 'split'" (click)="setMode('split')" data-testid="diff-split">Split</button></div>
+                  <button type="button" class="o-btn o-sm" [class.o-on]="hideWs()" [attr.aria-pressed]="hideWs()" (click)="hideWs.set(!hideWs())" data-testid="hide-ws">Hide whitespace</button>
+                  @if (myPending().length) {<span class="o-chip o-amb" data-testid="pending-count">{{ myPending().length }} pending {{ myPending().length === 1 ? 'comment' : 'comments' }}</span>}
+                  <span class="o-r o-faint o-sm" data-testid="viewed-note">{{ viewedCount() }} of {{ cmp()?.files?.length ?? 0 }} files viewed · {{ openThreads() }} unresolved {{ openThreads() === 1 ? 'conversation' : 'conversations' }}</span>
+                </div>
+                <div class="files-split">
+                  @if ((cmp()?.files?.length ?? 0) > 1) {
+                    <div class="o-card files-tree" role="navigation" aria-label="Files">
+                      @for (f of cmp()?.files ?? []; track f.path) {
+                        <button type="button" class="o-row o-click o-sm" style="width:100%;border:none;background:none;text-align:left" (click)="jump(f.path)"><span class="o-cbx" [class.o-on]="isViewed(f.path)" aria-hidden="true"></span><span class="o-mono o-ell" style="flex:1">{{ f.path }}</span><span class="o-grn-t o-xs">+{{ f.additions }}</span></button>
+                      }
+                    </div>
+                  }
+                  <div class="o-col" style="gap:14px;min-width:0">
+                    @for (f of cmp()?.files ?? []; track f.path) {
+                      <o-diff [repo]="name()" [file]="f" [head]="p.headSha" [base]="p.mergeBase" [threads]="threads()" [canComment]="p.state === 'open'" [mode]="mode()" [ignoreSpace]="hideWs()"
+                        [viewed]="isViewed(f.path)" [reviewing]="myPending().length > 0" (viewedChange)="setViewed(f.path, $event)"
+                        (comment)="lineComment($event)" (reply)="reply($event)" (resolve)="resolve($event)" (discard)="discard($event)" />
+                    } @empty {<div class="o-card"><div class="o-empty">{{ cmp() ? 'No changes.' : 'Loading…' }}</div></div>}
+                  </div>
+                </div>
               }
               @case ('checks') {
                 <div class="o-card">
@@ -2622,11 +2918,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         <div class="o-card"><div class="o-empty">Loading…</div></div>
       }
     </div>
-  `, styles: [".badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;color:var(--o-acc-fg)}.anchor{position:relative;align-self:center}.merge{display:flex;align-items:center;position:relative}.merge .go{height:32px;padding:0 14px;border-radius:7px 0 0 7px;border:none;font-size:13px;font-weight:500;color:var(--o-acc-fg);background:var(--o-ok);cursor:pointer}.merge .mn{height:32px;padding:0 10px;border:none;border-radius:0 7px 7px 0;font-size:12px;color:var(--o-acc-fg);background:var(--o-ok);border-left:1px solid rgba(255,255,255,.25);cursor:pointer}.merge button:disabled{background:var(--o-line-mid);cursor:not-allowed}.tl{display:flex;flex-direction:column;gap:10px;padding-left:14px;border-left:2px solid var(--o-line);margin-left:14px}\n"] }]
+  `, styles: [".badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;color:var(--o-acc-fg)}.anchor{position:relative;align-self:center}.merge{display:flex;align-items:center;position:relative}.merge .go{height:32px;padding:0 14px;border-radius:7px 0 0 7px;border:none;font-size:13px;font-weight:500;color:var(--o-acc-fg);background:var(--o-ok);cursor:pointer}.merge .mn{height:32px;padding:0 10px;border:none;border-radius:0 7px 7px 0;font-size:12px;color:var(--o-acc-fg);background:var(--o-ok);border-left:1px solid rgba(255,255,255,.25);cursor:pointer}.merge button:disabled{background:var(--o-line-mid);cursor:not-allowed}.tl{display:flex;flex-direction:column;gap:10px;padding-left:14px;border-left:2px solid var(--o-line);margin-left:14px}.files-split{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;align-items:start}.files-split:has(>:only-child){grid-template-columns:minmax(0,1fr)}.files-tree{position:sticky;top:8px;max-height:calc(100vh - 120px);overflow:auto}@media(max-width:900px){.files-split{grid-template-columns:minmax(0,1fr)}.files-tree{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { outside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
+// Per-viewer conveniences (the diff view, files viewed); storage can be missing or blocked.
+function readPref(key) {
+    try {
+        return localStorage.getItem(key) ?? '';
+    }
+    catch {
+        return '';
+    }
+}
+function writePref(key, value) {
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        /* private window or blocked storage: the setting lasts for this page only */
+    }
+}
 
 const BLANK = { id: '', pattern: '', blockDirectPush: true, blockForcePush: true, blockDeletion: true, requiredApprovals: 1, dismissStaleApprovals: true, requireUpToDate: false, requiredChecks: [] };
 // /{org}/{project}/code/{repo}/settings?section= (prototype "code_settings"): general settings and
@@ -2965,5 +3278,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BranchesPage, CodeApi, CodeHost, CommitPage, CommitsPage, CurrentRepo, CurrentRepoPage, DiffView, FilePage, NewRepoPage, People, PullPage, PullsPage, RefPicker, RepoHomePage, RepoPage, RepoSettingsPage, ReposPage, TOKEN_CSS, ago, apiMessage, checkDot, copy, dayLabel, initials, langColour, shortDate, size };
+export { BranchesPage, CodeApi, CodeHost, CommitPage, CommitsPage, CurrentRepo, CurrentRepoPage, DiffView, FilePage, NewRepoPage, People, PullPage, PullsPage, RefPicker, RepoHomePage, RepoPage, RepoSettingsPage, ReposPage, TOKEN_CSS, ago, apiMessage, checkDot, copy, dayLabel, initials, langColour, pair, shortDate, size };
 //# sourceMappingURL=chisquare-tech-origine-ngx-apps-code.mjs.map