Merge 52bc7c76204e3378ca0e95aac7ac99f3079a6409 into cc7ba64ee52412f41c3ce5207bac7e47b9f01f30

commit: 8b72cc861258f23074c7c27f7a5920a914bb943b
author: ermite · 2d ago · 2026-10-20 05:13 UTC
merge of: cc7ba64 + 52bc7c7 · diff against the first parent
signature: unsigned

26 files · +1366 -866

M docs/merge-requests.md +14 -0


@@ -104,3 +104,17 @@ report whether more exist; ancestry, rather than the bounded list, detects a
104	104		rewrite. Merge-request details include at most `ports.MaxMergeRequestCommits`
105	105		(100) commits. These history queries remain on the merge-request service
106	106		because it owns the merge-git port.
	107	+
	108	+	### Review page panels
	109	+
	110	+	The main request card ends with a collapsed Commits / Checks footer. With
	111	+	scripts, arrow keys (and Home / End) switch its tabs; without scripts, opening
	112	+	the footer shows both sections. The checks summary above the diff opens the
	113	+	Checks tab and continues to update live. Commit totals use `N+` when the branch
	114	+	list is capped: the reader's existing count operation counts all reachable
	115	+	ancestors, not the source-minus-target range.
	116	+
	117	+	The rail keeps Files (including its `g f` shortcut) and Verdicts. Merge settings
	118	+	are read-only information in the More (⋯) menu, available to every viewer.
	119	+	Signing-key information is also there when a merge box offers signed modes;
	120	+	merge actions remain restricted to their existing permissions.


@@ -104,3 +104,17 @@ report whether more exist; ancestry, rather than the bounded list, detects a
104	rewrite. Merge-request details include at most `ports.MaxMergeRequestCommits`	104		rewrite. Merge-request details include at most `ports.MaxMergeRequestCommits`
105	(100) commits. These history queries remain on the merge-request service	105		(100) commits. These history queries remain on the merge-request service
106	because it owns the merge-git port.	106		because it owns the merge-git port.
		107	+
		108	+	### Review page panels
		109	+
		110	+	The main request card ends with a collapsed Commits / Checks footer. With
		111	+	scripts, arrow keys (and Home / End) switch its tabs; without scripts, opening
		112	+	the footer shows both sections. The checks summary above the diff opens the
		113	+	Checks tab and continues to update live. Commit totals use `N+` when the branch
		114	+	list is capped: the reader's existing count operation counts all reachable
		115	+	ancestors, not the source-minus-target range.
		116	+
		117	+	The rail keeps Files (including its `g f` shortcut) and Verdicts. Merge settings
		118	+	are read-only information in the More (⋯) menu, available to every viewer.
		119	+	Signing-key information is also there when a merge box offers signed modes;
		120	+	merge actions remain restricted to their existing permissions.

M internal/adapters/web/actions.templ +2 -2


@@ -434,7 +434,7 @@ templ CommitChecks(c ChecksSummary) {
434	434		}
435	435
436	436		// MRChecksSum is the state of the checks of a merge request in the bar above
437		-	// the diff, a link to the checks of the rail. The event stream replaces it
	437	+	// the diff, a link to the checks of the card footer. The event stream replaces it
438	438		// with the checks section (same event, fragments.go).
439	439		templ MRChecksSum(c ChecksSummary) {
440	440		<a class="ck-sum mr-ck" id="mr-ck" href="#mr-checks" title={ c.Title }>

@@ -447,7 +447,7 @@ templ MRChecksSum(c ChecksSummary) {
447	447		</a>
448	448		}
449	449
450		-	// MRChecks is the checks section of the rail of a merge request.
	450	+	// MRChecks is the checks section of the footer of a merge request.
451	451		templ MRChecks(c ChecksSection) {
452	452		<section aria-labelledby="r-checks" id="mr-checks">
453	453		<h2 id="r-checks">Checks <span class="count">{ itoa(len(c.Rows)) }</span></h2>


@@ -434,7 +434,7 @@ templ CommitChecks(c ChecksSummary) {
434		}	434		}
435			435
436		// MRChecksSum is the state of the checks of a merge request in the bar above	436		// MRChecksSum is the state of the checks of a merge request in the bar above
437	-	// the diff, a link to the checks of the rail. The event stream replaces it	437	+	// the diff, a link to the checks of the card footer. The event stream replaces it
438		// with the checks section (same event, fragments.go).	438		// with the checks section (same event, fragments.go).
439		templ MRChecksSum(c ChecksSummary) {	439		templ MRChecksSum(c ChecksSummary) {
440		<a class="ck-sum mr-ck" id="mr-ck" href="#mr-checks" title={ c.Title }>	440		<a class="ck-sum mr-ck" id="mr-ck" href="#mr-checks" title={ c.Title }>

@@ -447,7 +447,7 @@ templ MRChecksSum(c ChecksSummary) {
447		</a>	447		</a>
448		}	448		}
449			449
450	-	// MRChecks is the checks section of the rail of a merge request.	450	+	// MRChecks is the checks section of the footer of a merge request.
451		templ MRChecks(c ChecksSection) {	451		templ MRChecks(c ChecksSection) {
452		<section aria-labelledby="r-checks" id="mr-checks">	452		<section aria-labelledby="r-checks" id="mr-checks">
453		<h2 id="r-checks">Checks <span class="count">{ itoa(len(c.Rows)) }</span></h2>	453		<h2 id="r-checks">Checks <span class="count">{ itoa(len(c.Rows)) }</span></h2>

M internal/adapters/web/actions_templ.go +2 -2 generated file: collapsed

load diff

M internal/adapters/web/checks.go +1 -1


@@ -81,7 +81,7 @@ func checksSummary(repo domain.RepoName, sha string, checks []ports.CheckView) C
81	81		return sum
82	82		}
83	83
84		-	// checksSection is the checks of the rail of a merge request, with the rule of
	84	+	// checksSection is the checks of the footer of a merge request, with the rule of
85	85		// the repository that applies to them.
86	86		func checksSection(repo domain.Repo, checks []ports.CheckView) ChecksSection {
87	87		sec := ChecksSection{}


@@ -81,7 +81,7 @@ func checksSummary(repo domain.RepoName, sha string, checks []ports.CheckView) C
81		return sum	81		return sum
82		}	82		}
83			83
84	-	// checksSection is the checks of the rail of a merge request, with the rule of	84	+	// checksSection is the checks of the footer of a merge request, with the rule of
85		// the repository that applies to them.	85		// the repository that applies to them.
86		func checksSection(repo domain.Repo, checks []ports.CheckView) ChecksSection {	86		func checksSection(repo domain.Repo, checks []ports.CheckView) ChecksSection {
87		sec := ChecksSection{}	87		sec := ChecksSection{}

M internal/adapters/web/diff.templ +6 -2


@@ -117,7 +117,7 @@ templ diffViewMenu(p DiffView) {
117	117		<details class="menu vmenu">
118	118		<summary class="btn" aria-label="Diff view">
119	119		if p.Both {
120		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
	120	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
121	121		} else {
122	122		{ viewLabel(p.View) }
123	123		}

@@ -139,12 +139,16 @@ templ viewLink(p DiffView, view, label, key, href string) {
139	139		class="btn vbtn"
140	140		data-view={ view }
141	141		aria-keyshortcuts={ key }
	142	+	if view == "split" {
	143	+	:aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false"
	144	+	:title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'"
	145	+	}
142	146		if p.View == view {
143	147		aria-current="true"
144	148		}
145	149		if p.Both {
146	150		data-fire={ view }
147		-	:aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false"
	151	+	:aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false"
148	152		}
149	153		>{ label }<kbd aria-hidden="true">{ key }</kbd></a>
150	154		}

 	<details class="menu vmenu">
 		<summary class="btn" aria-label="Diff view">
 			if p.Both {
-				<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
+				<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
 			} else {
 				{ viewLabel(p.View) }
 			}
 		class="btn vbtn"
 		data-view={ view }
 		aria-keyshortcuts={ key }
+		if view == "split" {
+			:aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false"
+			:title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'"
+		}
 		if p.View == view {
 			aria-current="true"
 		}
 		if p.Both {
 			data-fire={ view }
-			:aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false"
+			:aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false"
 		}
 	>{ label }<kbd aria-hidden="true">{ key }</kbd></a>
 }

M internal/adapters/web/diff_templ.go +190 -184 generated file: collapsed

load diff

M internal/adapters/web/jstest/a11y.test.mjs +23 -0


@@ -358,3 +358,26 @@ test('activity moves a home row up only in newest activity order, preserving foc
358	358		assert.ok(fresh.hasAttribute('data-cursor'));
359	359		}
360	360		});
	361	+
	362	+	test('mobile MR layout shortcuts preserve the saved preference until back on desktop', () => {
	363	+	const diffs = el('div', { id: 'diffs', attrs: { 'data-mr': '', 'data-diff': 'split', 'data-mobile': 'true' } });
	364	+	dom.body.replaceChildren(diffs);
	365	+	const oldQuery = doc.querySelector;
	366	+	doc.querySelector = query.one;
	367	+	const previous = globalThis.sessionStorage;
	368	+	const writes = [];
	369	+	globalThis.sessionStorage = { setItem: (...args) => writes.push(args) };
	370	+	try {
	371	+	window.ermite.layout('unified');
	372	+	window.ermite.layout('split');
	373	+	assert.equal(diffs.dataset.diff, 'split');
	374	+	assert.deepEqual(writes, []);
	375	+	diffs.dataset.mobile = 'false';
	376	+	window.ermite.layout('unified');
	377	+	assert.equal(diffs.dataset.diff, 'unified');
	378	+	assert.deepEqual(writes, [['diff', 'unified']]);
	379	+	} finally {
	380	+	globalThis.sessionStorage = previous;
	381	+	doc.querySelector = oldQuery;
	382	+	}
	383	+	});


@@ -358,3 +358,26 @@ test('activity moves a home row up only in newest activity order, preserving foc
358	assert.ok(fresh.hasAttribute('data-cursor'));	358		assert.ok(fresh.hasAttribute('data-cursor'));
359	}	359		}
360	});	360		});
		361	+
		362	+	test('mobile MR layout shortcuts preserve the saved preference until back on desktop', () => {
		363	+	const diffs = el('div', { id: 'diffs', attrs: { 'data-mr': '', 'data-diff': 'split', 'data-mobile': 'true' } });
		364	+	dom.body.replaceChildren(diffs);
		365	+	const oldQuery = doc.querySelector;
		366	+	doc.querySelector = query.one;
		367	+	const previous = globalThis.sessionStorage;
		368	+	const writes = [];
		369	+	globalThis.sessionStorage = { setItem: (...args) => writes.push(args) };
		370	+	try {
		371	+	window.ermite.layout('unified');
		372	+	window.ermite.layout('split');
		373	+	assert.equal(diffs.dataset.diff, 'split');
		374	+	assert.deepEqual(writes, []);
		375	+	diffs.dataset.mobile = 'false';
		376	+	window.ermite.layout('unified');
		377	+	assert.equal(diffs.dataset.diff, 'unified');
		378	+	assert.deepEqual(writes, [['diff', 'unified']]);
		379	+	} finally {
		380	+	globalThis.sessionStorage = previous;
		381	+	doc.querySelector = oldQuery;
		382	+	}
		383	+	});

M internal/adapters/web/jstest/mr.test.mjs +149 -0


@@ -92,3 +92,152 @@ for (const dataset of [{diff:'split'}, {view:'split'}]) test(`reveal selects the
92	92		globalThis.requestAnimationFrame=savedRAF;
93	93		}
94	94		});
	95	+
	96	+	test('footer tabs switch panels, support arrows, and open on checks hash', () => {
	97	+	const oldDocument = globalThis.document;
	98	+	const oldLocation = globalThis.location;
	99	+	const oldAdd = globalThis.addEventListener;
	100	+	const listeners = {};
	101	+	const node = (id) => ({ id, attrs: {}, events: {}, hidden: false,
	102	+	setAttribute(k,v) { this.attrs[k]=v; },
	103	+	addEventListener(k,v) { this.events[k]=v; }, focus() { this.focused=true; } });
	104	+	const tabs = [node('mr-tab-commits'), node('mr-tab-checks')];
	105	+	const panels = [node('mr-commits'), node('mr-checks-panel')];
	106	+	const footer = node('mr-panels'); footer.open=false;
	107	+	const nav = node('tabs'); nav.querySelectorAll=()=>tabs;
	108	+	footer.querySelectorAll=()=>panels;
	109	+	globalThis.document = {querySelector: (s) => s === '#mr-panels' ? footer : s === '[data-mr-tabs]' ? nav : null,
	110	+	addEventListener(k,v) {listeners[k]=v;} };
	111	+	globalThis.location = {hash:''};
	112	+	globalThis.addEventListener = (k,v) => {listeners[k]=v;};
	113	+	try {
	114	+	window.ermiteMR.panels();
	115	+	assert.equal(footer.open,false);
	116	+	assert.equal(panels[0].hidden,false);
	117	+	assert.equal(panels[1].hidden,true);
	118	+	tabs[1].events.click({preventDefault(){}});
	119	+	assert.equal(panels[0].hidden,true);
	120	+	assert.equal(tabs[1].attrs['aria-selected'],'true');
	121	+	tabs[1].events.keydown({key:'ArrowRight',preventDefault(){}});
	122	+	assert.equal(tabs[0].focused,true);
	123	+	assert.equal(panels[0].hidden,false);
	124	+	location.hash='#mr-checks'; listeners.hashchange();
	125	+	assert.equal(footer.open,true);
	126	+	assert.equal(panels[1].hidden,false);
	127	+	footer.open=false;
	128	+	listeners.click({target:{closest:()=>true}});
	129	+	assert.equal(footer.open,true);
	130	+	assert.equal(C.tabIndex('Home',1,2),0);
	131	+	assert.equal(C.tabIndex('End',0,2),1);
	132	+	assert.equal(C.tabIndex('ArrowLeft',0,2),1);
	133	+	assert.equal(C.tabIndex('Escape',0,2),null);
	134	+	} finally {
	135	+	globalThis.document=oldDocument; globalThis.location=oldLocation; globalThis.addEventListener=oldAdd;
	136	+	}
	137	+	});
	138	+
	139	+	test('touch range: first tap anchors, second tap opens the sorted range', () => {
	140	+	const base = 'https://forge.test/demo/merge-requests/1';
	141	+	const first = base + '?on=new:24:a.go#f1';
	142	+	const last = base + '?on=new:10:a.go#f1';
	143	+	assert.deepEqual(C.touchRange(null, first, base), { start: first, url: null });
	144	+	const result = C.touchRange(first, last, base);
	145	+	assert.equal(result.start, null);
	146	+	assert.equal(new URL(result.url).searchParams.get('on'), 'new:10-24:a.go');
	147	+	assert.deepEqual(C.touchRange(first, first, base), { start: null, url: first });
	148	+	});
	149	+
	150	+	test('touch range: a different file, side or request becomes a new anchor', () => {
	151	+	const base = 'https://forge.test/demo/merge-requests/1';
	152	+	const first = base + '?on=new:24:a.go#f1';
	153	+	for (const next of [first.replace('new:', 'old:'), first.replace('a.go', 'b.go'), first.replace('/1?', '/2?')]) {
	154	+	assert.deepEqual(C.touchRange(first, next, base), { start: next, url: null });
	155	+	}
	156	+	});
	157	+
	158	+	test('mobile unified fallback only redirects single-layout split pages and preserves query/hash', () => {
	159	+	const href = 'https://forge.test/demo/merge-requests/1?view=split&from=25&on=new:3:a.go#f26';
	160	+	assert.equal(C.mobileURL(href, 'split', false), null);
	161	+	assert.equal(C.mobileURL(href, undefined, true), null, 'both layouts are switched by CSS');
	162	+	assert.equal(C.mobileURL(href, 'unified', true), null, 'no redirect loop');
	163	+	const url = new URL(C.mobileURL(href, 'split', true));
	164	+	assert.equal(url.searchParams.get('view'), 'unified');
	165	+	assert.equal(url.searchParams.get('from'), '25');
	166	+	assert.equal(url.searchParams.get('on'), 'new:3:a.go');
	167	+	assert.equal(url.hash, '#f26');
	168	+	});
	169	+
	170	+	test('touch control: lazy links enable toolbar; ordinary taps pass through; ranges navigate and cancel', async () => {
	171	+	const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'localStorage', 'sessionStorage', 'fetch', 'matchMedia'].map((k) => [k, globalThis[k]]));
	172	+	const make = () => ({
	173	+	attrs: {}, events: {}, children: [], textContent: '',
	174	+	setAttribute(k, v) { this.attrs[k] = v; },
	175	+	removeAttribute(k) { delete this.attrs[k]; },
	176	+	addEventListener(k, fn) { this.events[k] = fn; },
	177	+	append(...nodes) { this.children.push(...nodes); },
	178	+	prepend(node) { this.children.unshift(node); },
	179	+	querySelector() { return null; }, querySelectorAll() { return []; },
	180	+	});
	181	+	const diffs = make();
	182	+	diffs.dataset = { diff: 'split' };
	183	+	const base = 'https://forge.test/demo/merge-requests/1';
	184	+	const line = (n) => Object.assign(make(), { href: `${base}?on=new:${n}:a.go#f1`, textContent: String(n) });
	185	+	const a = line(20), b = line(10);
	186	+	let loaded = false;
	187	+	diffs.querySelector = () => loaded ? a : null;
	188	+	let assigned = null;
	189	+	globalThis.document = {
	190	+	querySelector: (sel) => sel === '#diffs[data-mr]' \|\| sel === '#diffs' ? diffs : null,
	191	+	querySelectorAll: () => [], createElement: (tag) => tag === 'template' ? { content: { querySelectorAll: () => [] } } : make(),
	192	+	};
	193	+	globalThis.location = { href: base, pathname: '/demo/merge-requests/1', hash: '', assign(url) { assigned = url; } };
	194	+	globalThis.addEventListener = () => {};
	195	+	let resize;
	196	+	const media = { matches: true, addEventListener(type, fn) { resize = fn; } };
	197	+	globalThis.matchMedia = () => media;
	198	+	globalThis.fetch = async () => { loaded = true; return { ok: true, status: 200, text: async () => '' }; };
	199	+	globalThis.localStorage = globalThis.sessionStorage = { getItem: () => null };
	200	+	const click = (link, modifiers = {}) => {
	201	+	const e = { target: { closest: () => link }, prevented: false, stopped: false,
	202	+	preventDefault() { this.prevented = true; }, stopPropagation() { this.stopped = true; }, ...modifiers };
	203	+	diffs.events.click(e);
	204	+	return e;
	205	+	};
	206	+	try {
	207	+	window.ermiteMR.start();
	208	+	const bar = diffs.children[0];
	209	+	const [button, status] = bar.children;
	210	+	assert.equal(bar.hidden, true, 'no commentable links in the initial window');
	211	+	assert.equal(typeof diffs.events.click, 'function', 'delegation installed before lazy load');
	212	+	await window.ermiteMR.load({ dataset: { src: '/files?from=25' } });
	213	+	assert.equal(bar.hidden, false, 'lazy window refresh reveals range control');
	214	+	assert.equal(diffs.dataset.mobile, 'true');
	215	+	assert.equal(diffs.dataset.diff, 'split', 'preferred layout is retained');
	216	+	media.matches = false;
	217	+	resize();
	218	+	assert.equal(diffs.dataset.mobile, 'false', 'desktop menu returns to preferred layout');
	219	+	assert.equal(diffs.dataset.diff, 'split');
	220	+	assert.equal(click(a).prevented, false, 'normal single-line navigation is untouched');
	221	+	button.events.click();
	222	+	assert.equal(button.attrs['aria-pressed'], 'true');
	223	+	assert.equal(click(a, { shiftKey: true }).prevented, false, 'desktop range selection is untouched');
	224	+	const event = click(a);
	225	+	assert.equal(event.prevented, true);
	226	+	assert.equal(event.stopped, true);
	227	+	assert.ok('data-range-start' in a.attrs);
	228	+	assert.match(status.textContent, /20/);
	229	+	click(b);
	230	+	assert.equal(new URL(assigned).searchParams.get('on'), 'new:10-20:a.go');
	231	+	assert.equal('data-range-start' in a.attrs, false);
	232	+	click(a);
	233	+	button.events.click();
	234	+	assert.equal(button.attrs['aria-pressed'], 'false');
	235	+	assert.equal(status.textContent, '');
	236	+	assert.equal('data-range-start' in a.attrs, false);
	237	+	assert.equal(click(b).prevented, false);
	238	+	} finally {
	239	+	for (const [k, v] of Object.entries(saved)) {
	240	+	if (v === undefined) delete globalThis[k]; else globalThis[k] = v;
	241	+	}
	242	+	}
	243	+	});


@@ -92,3 +92,152 @@ for (const dataset of [{diff:'split'}, {view:'split'}]) test(`reveal selects the
92	globalThis.requestAnimationFrame=savedRAF;	92		globalThis.requestAnimationFrame=savedRAF;
93	}	93		}
94	});	94		});
		95	+
		96	+	test('footer tabs switch panels, support arrows, and open on checks hash', () => {
		97	+	const oldDocument = globalThis.document;
		98	+	const oldLocation = globalThis.location;
		99	+	const oldAdd = globalThis.addEventListener;
		100	+	const listeners = {};
		101	+	const node = (id) => ({ id, attrs: {}, events: {}, hidden: false,
		102	+	setAttribute(k,v) { this.attrs[k]=v; },
		103	+	addEventListener(k,v) { this.events[k]=v; }, focus() { this.focused=true; } });
		104	+	const tabs = [node('mr-tab-commits'), node('mr-tab-checks')];
		105	+	const panels = [node('mr-commits'), node('mr-checks-panel')];
		106	+	const footer = node('mr-panels'); footer.open=false;
		107	+	const nav = node('tabs'); nav.querySelectorAll=()=>tabs;
		108	+	footer.querySelectorAll=()=>panels;
		109	+	globalThis.document = {querySelector: (s) => s === '#mr-panels' ? footer : s === '[data-mr-tabs]' ? nav : null,
		110	+	addEventListener(k,v) {listeners[k]=v;} };
		111	+	globalThis.location = {hash:''};
		112	+	globalThis.addEventListener = (k,v) => {listeners[k]=v;};
		113	+	try {
		114	+	window.ermiteMR.panels();
		115	+	assert.equal(footer.open,false);
		116	+	assert.equal(panels[0].hidden,false);
		117	+	assert.equal(panels[1].hidden,true);
		118	+	tabs[1].events.click({preventDefault(){}});
		119	+	assert.equal(panels[0].hidden,true);
		120	+	assert.equal(tabs[1].attrs['aria-selected'],'true');
		121	+	tabs[1].events.keydown({key:'ArrowRight',preventDefault(){}});
		122	+	assert.equal(tabs[0].focused,true);
		123	+	assert.equal(panels[0].hidden,false);
		124	+	location.hash='#mr-checks'; listeners.hashchange();
		125	+	assert.equal(footer.open,true);
		126	+	assert.equal(panels[1].hidden,false);
		127	+	footer.open=false;
		128	+	listeners.click({target:{closest:()=>true}});
		129	+	assert.equal(footer.open,true);
		130	+	assert.equal(C.tabIndex('Home',1,2),0);
		131	+	assert.equal(C.tabIndex('End',0,2),1);
		132	+	assert.equal(C.tabIndex('ArrowLeft',0,2),1);
		133	+	assert.equal(C.tabIndex('Escape',0,2),null);
		134	+	} finally {
		135	+	globalThis.document=oldDocument; globalThis.location=oldLocation; globalThis.addEventListener=oldAdd;
		136	+	}
		137	+	});
		138	+
		139	+	test('touch range: first tap anchors, second tap opens the sorted range', () => {
		140	+	const base = 'https://forge.test/demo/merge-requests/1';
		141	+	const first = base + '?on=new:24:a.go#f1';
		142	+	const last = base + '?on=new:10:a.go#f1';
		143	+	assert.deepEqual(C.touchRange(null, first, base), { start: first, url: null });
		144	+	const result = C.touchRange(first, last, base);
		145	+	assert.equal(result.start, null);
		146	+	assert.equal(new URL(result.url).searchParams.get('on'), 'new:10-24:a.go');
		147	+	assert.deepEqual(C.touchRange(first, first, base), { start: null, url: first });
		148	+	});
		149	+
		150	+	test('touch range: a different file, side or request becomes a new anchor', () => {
		151	+	const base = 'https://forge.test/demo/merge-requests/1';
		152	+	const first = base + '?on=new:24:a.go#f1';
		153	+	for (const next of [first.replace('new:', 'old:'), first.replace('a.go', 'b.go'), first.replace('/1?', '/2?')]) {
		154	+	assert.deepEqual(C.touchRange(first, next, base), { start: next, url: null });
		155	+	}
		156	+	});
		157	+
		158	+	test('mobile unified fallback only redirects single-layout split pages and preserves query/hash', () => {
		159	+	const href = 'https://forge.test/demo/merge-requests/1?view=split&from=25&on=new:3:a.go#f26';
		160	+	assert.equal(C.mobileURL(href, 'split', false), null);
		161	+	assert.equal(C.mobileURL(href, undefined, true), null, 'both layouts are switched by CSS');
		162	+	assert.equal(C.mobileURL(href, 'unified', true), null, 'no redirect loop');
		163	+	const url = new URL(C.mobileURL(href, 'split', true));
		164	+	assert.equal(url.searchParams.get('view'), 'unified');
		165	+	assert.equal(url.searchParams.get('from'), '25');
		166	+	assert.equal(url.searchParams.get('on'), 'new:3:a.go');
		167	+	assert.equal(url.hash, '#f26');
		168	+	});
		169	+
		170	+	test('touch control: lazy links enable toolbar; ordinary taps pass through; ranges navigate and cancel', async () => {
		171	+	const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'localStorage', 'sessionStorage', 'fetch', 'matchMedia'].map((k) => [k, globalThis[k]]));
		172	+	const make = () => ({
		173	+	attrs: {}, events: {}, children: [], textContent: '',
		174	+	setAttribute(k, v) { this.attrs[k] = v; },
		175	+	removeAttribute(k) { delete this.attrs[k]; },
		176	+	addEventListener(k, fn) { this.events[k] = fn; },
		177	+	append(...nodes) { this.children.push(...nodes); },
		178	+	prepend(node) { this.children.unshift(node); },
		179	+	querySelector() { return null; }, querySelectorAll() { return []; },
		180	+	});
		181	+	const diffs = make();
		182	+	diffs.dataset = { diff: 'split' };
		183	+	const base = 'https://forge.test/demo/merge-requests/1';
		184	+	const line = (n) => Object.assign(make(), { href: `${base}?on=new:${n}:a.go#f1`, textContent: String(n) });
		185	+	const a = line(20), b = line(10);
		186	+	let loaded = false;
		187	+	diffs.querySelector = () => loaded ? a : null;
		188	+	let assigned = null;
		189	+	globalThis.document = {
		190	+	querySelector: (sel) => sel === '#diffs[data-mr]' \|\| sel === '#diffs' ? diffs : null,
		191	+	querySelectorAll: () => [], createElement: (tag) => tag === 'template' ? { content: { querySelectorAll: () => [] } } : make(),
		192	+	};
		193	+	globalThis.location = { href: base, pathname: '/demo/merge-requests/1', hash: '', assign(url) { assigned = url; } };
		194	+	globalThis.addEventListener = () => {};
		195	+	let resize;
		196	+	const media = { matches: true, addEventListener(type, fn) { resize = fn; } };
		197	+	globalThis.matchMedia = () => media;
		198	+	globalThis.fetch = async () => { loaded = true; return { ok: true, status: 200, text: async () => '' }; };
		199	+	globalThis.localStorage = globalThis.sessionStorage = { getItem: () => null };
		200	+	const click = (link, modifiers = {}) => {
		201	+	const e = { target: { closest: () => link }, prevented: false, stopped: false,
		202	+	preventDefault() { this.prevented = true; }, stopPropagation() { this.stopped = true; }, ...modifiers };
		203	+	diffs.events.click(e);
		204	+	return e;
		205	+	};
		206	+	try {
		207	+	window.ermiteMR.start();
		208	+	const bar = diffs.children[0];
		209	+	const [button, status] = bar.children;
		210	+	assert.equal(bar.hidden, true, 'no commentable links in the initial window');
		211	+	assert.equal(typeof diffs.events.click, 'function', 'delegation installed before lazy load');
		212	+	await window.ermiteMR.load({ dataset: { src: '/files?from=25' } });
		213	+	assert.equal(bar.hidden, false, 'lazy window refresh reveals range control');
		214	+	assert.equal(diffs.dataset.mobile, 'true');
		215	+	assert.equal(diffs.dataset.diff, 'split', 'preferred layout is retained');
		216	+	media.matches = false;
		217	+	resize();
		218	+	assert.equal(diffs.dataset.mobile, 'false', 'desktop menu returns to preferred layout');
		219	+	assert.equal(diffs.dataset.diff, 'split');
		220	+	assert.equal(click(a).prevented, false, 'normal single-line navigation is untouched');
		221	+	button.events.click();
		222	+	assert.equal(button.attrs['aria-pressed'], 'true');
		223	+	assert.equal(click(a, { shiftKey: true }).prevented, false, 'desktop range selection is untouched');
		224	+	const event = click(a);
		225	+	assert.equal(event.prevented, true);
		226	+	assert.equal(event.stopped, true);
		227	+	assert.ok('data-range-start' in a.attrs);
		228	+	assert.match(status.textContent, /20/);
		229	+	click(b);
		230	+	assert.equal(new URL(assigned).searchParams.get('on'), 'new:10-20:a.go');
		231	+	assert.equal('data-range-start' in a.attrs, false);
		232	+	click(a);
		233	+	button.events.click();
		234	+	assert.equal(button.attrs['aria-pressed'], 'false');
		235	+	assert.equal(status.textContent, '');
		236	+	assert.equal('data-range-start' in a.attrs, false);
		237	+	assert.equal(click(b).prevented, false);
		238	+	} finally {
		239	+	for (const [k, v] of Object.entries(saved)) {
		240	+	if (v === undefined) delete globalThis[k]; else globalThis[k] = v;
		241	+	}
		242	+	}
		243	+	});

M internal/adapters/web/mr.go +3 -0


@@ -291,6 +291,7 @@ type MRPage struct {
291	291
292	292		Commits []MRCommit
293	293		CommitsNote string
	294	+	CommitCount string
294	295		Modes []string
295	296		ChecksBlock bool
296	297		// Checks are the CI checks of the head of the request, ChecksSum their

@@ -734,7 +735,9 @@ func (s Server) mrReadPresentation(p MRPage, name string, n int64, res ports.M
734	735		})
735	736		}
736	737		lastRead := res.LastReadID.String()
	738	+	p.CommitCount = itoa(len(p.Commits))
737	739		if res.CommitsTruncated {
	740	+	p.CommitCount += "+"
738	741		p.CommitsNote = "the branch has more commits than the " + itoa(len(p.Commits)) + " listed."
739	742		}
740	743


@@ -291,6 +291,7 @@ type MRPage struct {
291		291
292	Commits []MRCommit	292		Commits []MRCommit
293	CommitsNote string	293		CommitsNote string
		294	+	CommitCount string
294	Modes []string	295		Modes []string
295	ChecksBlock bool	296		ChecksBlock bool
296	// Checks are the CI checks of the head of the request, ChecksSum their	297		// Checks are the CI checks of the head of the request, ChecksSum their

@@ -734,7 +735,9 @@ func (s Server) mrReadPresentation(p MRPage, name string, n int64, res ports.M
734	})	735		})
735	}	736		}
736	lastRead := res.LastReadID.String()	737		lastRead := res.LastReadID.String()
		738	+	p.CommitCount = itoa(len(p.Commits))
737	if res.CommitsTruncated {	739		if res.CommitsTruncated {
		740	+	p.CommitCount += "+"
738	p.CommitsNote = "the branch has more commits than the " + itoa(len(p.Commits)) + " listed."	741		p.CommitsNote = "the branch has more commits than the " + itoa(len(p.Commits)) + " listed."
739	}	742		}
740		743

M internal/adapters/web/mr.templ +105 -82


@@ -147,6 +147,7 @@ templ MergeRequest(l Layout, p MRPage) {
147	147		@templ.Raw(string(p.Desc))
148	148		</article>
149	149		}
	150	+	@mrFooter(p)
150	151		</section>
151	152		if p.Deleting != "" {
152	153		<p class="note" role="status">merged. the branch { p.Deleting } is being deleted.</p>

@@ -366,6 +367,65 @@ templ commentForm(f CommentForm, suffix string) {
366	367		</form>
367	368		}
368	369
	370	+	templ mrFooter(p MRPage) {
	371	+	<footer class="mr-footer">
	372	+	<details id="mr-panels">
	373	+	<summary>Commits <span class="count">{ p.CommitCount }</span> · Checks</summary>
	374	+	<nav data-mr-tabs aria-label="Branch details">
	375	+	<a id="mr-tab-commits" href="#mr-commits">Commits <span class="count">{ p.CommitCount }</span></a>
	376	+	<a id="mr-tab-checks" href="#mr-checks">
	377	+	{ "Checks " }
	378	+	<span data-checks-label>
	379	+	if p.ChecksSum.Total > 0 {
	380	+	{ p.ChecksSum.Title }
	381	+	} else {
	382	+	no checks
	383	+	}
	384	+	</span>
	385	+	</a>
	386	+	</nav>
	387	+	<div id="mr-commits" data-mr-panel aria-labelledby="mr-tab-commits">
	388	+	<table class="mr-commits">
	389	+	<thead><tr><th>Commit</th><th>Subject</th><th>Author</th><th>Date</th><th>Signature</th><th>Status</th></tr></thead>
	390	+	<tbody>
	391	+	for _, c := range p.Commits {
	392	+	<tr data-new?={ c.New }>
	393	+	<td><a href={ templ.SafeURL(c.Href) }>{ c.Short }</a></td>
	394	+	<td>{ c.Subject }</td>
	395	+	<td>{ c.Author }</td>
	396	+	<td>
	397	+	if c.WhenAt != "" {
	398	+	<time datetime={ c.WhenAt }>{ c.When }</time>
	399	+	}
	400	+	</td>
	401	+	<td>
	402	+	if c.Sig != nil {
	403	+	@signaturePill(c.Sig)
	404	+	}
	405	+	</td>
	406	+	<td>
	407	+	if c.New {
	408	+	<span>new</span>
	409	+	}
	410	+	</td>
	411	+	</tr>
	412	+	}
	413	+	</tbody>
	414	+	</table>
	415	+	if len(p.Commits) == 0 {
	416	+	<p class="dim">no commit to merge.</p>
	417	+	}
	418	+	if p.CommitsNote != "" {
	419	+	<p class="note">{ p.CommitsNote }</p>
	420	+	}
	421	+	</div>
	422	+	<div id="mr-checks-panel" data-mr-panel aria-labelledby="mr-tab-checks">
	423	+	@MRChecks(p.Checks)
	424	+	</div>
	425	+	</details>
	426	+	</footer>
	427	+	}
	428	+
369	429		templ mrRail(p MRPage) {
370	430		<section aria-labelledby="r-files" class="r-files">
371	431		<h2 id="r-files">

@@ -391,51 +451,6 @@ templ mrRail(p MRPage) {
391	451		</ul>
392	452		</section>
393	453		}
394		-	@MRChecks(p.Checks)
395		-	<section aria-labelledby="r-commits">
396		-	<h2 id="r-commits">Commits <span class="count">{ itoa(len(p.Commits)) }</span></h2>
397		-	<ul class="pcommits">
398		-	for _, c := range p.Commits {
399		-	<li data-new?={ c.New }>
400		-	<a href={ templ.SafeURL(c.Href) }>{ c.Short }</a>
401		-	<span class="s">{ c.Subject }</span>
402		-	if c.Sig != nil {
403		-	@signaturePill(c.Sig)
404		-	}
405		-	<span class="mute">
406		-	{ c.Author }
407		-	if c.WhenAt != "" {
408		-	{ " · " }<time datetime={ c.WhenAt }>{ c.When }</time>
409		-	}
410		-	if c.New {
411		-	{ " · new" }
412		-	}
413		-	</span>
414		-	</li>
415		-	}
416		-	</ul>
417		-	if len(p.Commits) == 0 {
418		-	<p class="dim">no commit to merge.</p>
419		-	}
420		-	if p.CommitsNote != "" {
421		-	<p class="note">{ p.CommitsNote }</p>
422		-	}
423		-	</section>
424		-	<section aria-labelledby="r-settings">
425		-	<h2 id="r-settings">Settings</h2>
426		-	<dl class="kv">
427		-	<dt>modes</dt>
428		-	<dd>{ strings.Join(p.Modes, ", ") }</dd>
429		-	<dt>checks</dt>
430		-	<dd>
431		-	if p.ChecksBlock {
432		-	failing ones block the merge
433		-	} else {
434		-	do not block the merge
435		-	}
436		-	</dd>
437		-	</dl>
438		-	</section>
439	454		}
440	455
441	456		// mrBar is the bar above the diff, which follows the review: the totals, the

@@ -450,8 +465,8 @@ templ mrBar(p MRPage) {
450	465		@MRChecksSum(p.ChecksSum)
451	466		if p.Box != nil {
452	467		@mergeMenu(p)
453		-	@moreMenu(p)
454	468		}
	469	+	@moreMenu(p)
455	470		</div>
456	471		}
457	472

@@ -474,18 +489,9 @@ templ mergeMenu(p MRPage) {
474	489		<kbd aria-hidden="true">M</kbd>
475	490		</summary>
476	491		<div class="menu-pop" role="group" aria-label="Merge">
477		-	<dl class="kv">
478		-	<dt>head</dt>
479		-	<dd>
480		-	if p.Box.HeadGone {
481		-	gone: the source branch was deleted
482		-	} else {
483		-	{ p.HeadShort }
484		-	}
485		-	</dd>
486		-	<dt>into</dt>
487		-	<dd>{ p.Target }</dd>
488		-	</dl>
	492	+	if p.Box.HeadGone {
	493	+	<p class="dim">the source branch was deleted</p>
	494	+	}
489	495		if p.Box.Error != "" {
490	496		<p class="d-err" role="alert">{ p.Box.Error }</p>
491	497		}

@@ -519,15 +525,6 @@ templ mergeMenu(p MRPage) {
519	525		</label>
520	526		}
521	527		</fieldset>
522		-	if p.Box.Signed {
523		-	<p class="d-note" id="mr-signing">
524		-	squash and merge commits are signed with ermite's own key (generated on first start).
525		-	if p.Box.Fingerprint != "" {
526		-	fingerprint <code>{ p.Box.Fingerprint }</code>
527		-	}
528		-	<code>ermite signing-key show</code> prints it.
529		-	</p>
530		-	}
531	528		if p.Box.CanDeleteBranch {
532	529		<label class="d-check"><input type="checkbox" name="delete_branch" value="1"/> delete { p.Source } after the merge <kbd aria-hidden="true">D</kbd></label>
533	530		}

@@ -589,26 +586,52 @@ templ MRMergeabilityFragment(v MergeabilityView) {
589	586		@mrMergeabilitySlot(v)
590	587		}
591	588
592		-	// moreMenu is what else the owner does with an open request: mark the head
593		-	// read, close it, merge it from a terminal.
	589	+	// moreMenu shows read-only settings to every viewer, and keeps owner actions
	590	+	// behind the same merge-box permission as before.
594	591		templ moreMenu(p MRPage) {
595	592		<details class="menu omenu">
596	593		<summary class="btn icon" aria-label="More actions" title="more actions">⋯</summary>
597	594		<div class="menu-pop" role="group" aria-label="More actions">
598		-	if p.Box.CanMarkRead {
599		-	<form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
600		-	<input type="hidden" name="head_id" value={ p.Box.Head }/>
601		-	<button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
	595	+	<section class="merge-settings">
	596	+	<h2>Merge settings</h2>
	597	+	<dl class="kv">
	598	+	<dt>modes</dt>
	599	+	<dd>{ strings.Join(p.Modes, ", ") }</dd>
	600	+	<dt>checks</dt>
	601	+	<dd>
	602	+	if p.ChecksBlock {
	603	+	failing ones block the merge
	604	+	} else {
	605	+	do not block the merge
	606	+	}
	607	+	</dd>
	608	+	</dl>
	609	+	</section>
	610	+	if p.Box != nil {
	611	+	if p.Box.Signed {
	612	+	<p class="d-note" id="mr-signing">
	613	+	squash and merge commits are signed with ermite's own key (generated on first start).
	614	+	if p.Box.Fingerprint != "" {
	615	+	fingerprint <code>{ p.Box.Fingerprint }</code>
	616	+	}
	617	+	<code>ermite signing-key show</code> prints it.
	618	+	</p>
	619	+	}
	620	+	if p.Box.CanMarkRead {
	621	+	<form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
	622	+	<input type="hidden" name="head_id" value={ p.Box.Head }/>
	623	+	<button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
	624	+	</form>
	625	+	}
	626	+	<form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
	627	+	<button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
602	628		</form>
603		-	}
604		-	<form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
605		-	<button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
606		-	</form>
607		-	if !p.Box.HeadGone && p.Box.ReadyAction == "" {
608		-	<details class="d-or">
609		-	<summary class="mute">or from a terminal</summary>
610		-	@CloneBlock(p.Box.CLI)
611		-	</details>
	629	+	if !p.Box.HeadGone && p.Box.ReadyAction == "" {
	630	+	<details class="d-or">
	631	+	<summary class="mute">or from a terminal</summary>
	632	+	@CloneBlock(p.Box.CLI)
	633	+	</details>
	634	+	}
612	635		}
613	636		</div>
614	637		</details>

 					@templ.Raw(string(p.Desc))
 				</article>
 			}
+			@mrFooter(p)
 		</section>
 		if p.Deleting != "" {
 			<p class="note" role="status">merged. the branch { p.Deleting } is being deleted.</p>
 	</form>
 }
+templ mrFooter(p MRPage) {
+	<footer class="mr-footer">
+		<details id="mr-panels">
+			<summary>Commits <span class="count">{ p.CommitCount }</span> · Checks</summary>
+			<nav data-mr-tabs aria-label="Branch details">
+				<a id="mr-tab-commits" href="#mr-commits">Commits <span class="count">{ p.CommitCount }</span></a>
+				<a id="mr-tab-checks" href="#mr-checks">
+					{ "Checks " }
+					<span data-checks-label>
+						if p.ChecksSum.Total > 0 {
+							{ p.ChecksSum.Title }
+						} else {
+							no checks
+						}
+					</span>
+				</a>
+			</nav>
+			<div id="mr-commits" data-mr-panel aria-labelledby="mr-tab-commits">
+				<table class="mr-commits">
+					<thead><tr><th>Commit</th><th>Subject</th><th>Author</th><th>Date</th><th>Signature</th><th>Status</th></tr></thead>
+					<tbody>
+						for _, c := range p.Commits {
+							<tr data-new?={ c.New }>
+								<td><a href={ templ.SafeURL(c.Href) }>{ c.Short }</a></td>
+								<td>{ c.Subject }</td>
+								<td>{ c.Author }</td>
+								<td>
+									if c.WhenAt != "" {
+										<time datetime={ c.WhenAt }>{ c.When }</time>
+									}
+								</td>
+								<td>
+									if c.Sig != nil {
+										@signaturePill(c.Sig)
+									}
+								</td>
+								<td>
+									if c.New {
+										<span>new</span>
+									}
+								</td>
+							</tr>
+						}
+					</tbody>
+				</table>
+				if len(p.Commits) == 0 {
+					<p class="dim">no commit to merge.</p>
+				}
+				if p.CommitsNote != "" {
+					<p class="note">{ p.CommitsNote }</p>
+				}
+			</div>
+			<div id="mr-checks-panel" data-mr-panel aria-labelledby="mr-tab-checks">
+				@MRChecks(p.Checks)
+			</div>
+		</details>
+	</footer>
+}
 templ mrRail(p MRPage) {
 	<section aria-labelledby="r-files" class="r-files">
 		<h2 id="r-files">
 			</ul>
 		</section>
 	}
-	@MRChecks(p.Checks)
-	<section aria-labelledby="r-commits">
-		<h2 id="r-commits">Commits <span class="count">{ itoa(len(p.Commits)) }</span></h2>
-		<ul class="pcommits">
-			for _, c := range p.Commits {
-				<li data-new?={ c.New }>
-					<a href={ templ.SafeURL(c.Href) }>{ c.Short }</a>
-					<span class="s">{ c.Subject }</span>
-					if c.Sig != nil {
-						@signaturePill(c.Sig)
-					}
-					<span class="mute">
-						{ c.Author }
-						if c.WhenAt != "" {
-							{ " · " }<time datetime={ c.WhenAt }>{ c.When }</time>
-						}
-						if c.New {
-							{ " · new" }
-						}
-					</span>
-				</li>
-			}
-		</ul>
-		if len(p.Commits) == 0 {
-			<p class="dim">no commit to merge.</p>
-		}
-		if p.CommitsNote != "" {
-			<p class="note">{ p.CommitsNote }</p>
-		}
-	</section>
-	<section aria-labelledby="r-settings">
-		<h2 id="r-settings">Settings</h2>
-		<dl class="kv">
-			<dt>modes</dt>
-			<dd>{ strings.Join(p.Modes, ", ") }</dd>
-			<dt>checks</dt>
-			<dd>
-				if p.ChecksBlock {
-					failing ones block the merge
-				} else {
-					do not block the merge
-				}
-			</dd>
-		</dl>
-	</section>
 }
 // mrBar is the bar above the diff, which follows the review: the totals, the
 		@MRChecksSum(p.ChecksSum)
 		if p.Box != nil {
 			@mergeMenu(p)
-			@moreMenu(p)
 		}
+		@moreMenu(p)
 	</div>
 }
 			<kbd aria-hidden="true">M</kbd>
 		</summary>
 		<div class="menu-pop" role="group" aria-label="Merge">
-			<dl class="kv">
+			if p.Box.HeadGone {
-				<dt>head</dt>
+				<p class="dim">the source branch was deleted</p>
-				<dd>
+			}
-					if p.Box.HeadGone {
-						gone: the source branch was deleted
-					} else {
-						{ p.HeadShort }
-					}
-				</dd>
-				<dt>into</dt>
-				<dd>{ p.Target }</dd>
-			</dl>
 			if p.Box.Error != "" {
 				<p class="d-err" role="alert">{ p.Box.Error }</p>
 			}
 							</label>
 						}
 					</fieldset>
-					if p.Box.Signed {
-						<p class="d-note" id="mr-signing">
-							squash and merge commits are signed with ermite's own key (generated on first start).
-							if p.Box.Fingerprint != "" {
-								fingerprint <code>{ p.Box.Fingerprint }</code>
-							}
-							<code>ermite signing-key show</code> prints it.
-						</p>
-					}
 					if p.Box.CanDeleteBranch {
 						<label class="d-check"><input type="checkbox" name="delete_branch" value="1"/> delete { p.Source } after the merge <kbd aria-hidden="true">D</kbd></label>
 					}
 	@mrMergeabilitySlot(v)
 }
-// moreMenu is what else the owner does with an open request: mark the head
+// moreMenu shows read-only settings to every viewer, and keeps owner actions
-// read, close it, merge it from a terminal.
+// behind the same merge-box permission as before.
 templ moreMenu(p MRPage) {
 	<details class="menu omenu">
 		<summary class="btn icon" aria-label="More actions" title="more actions">⋯</summary>
 		<div class="menu-pop" role="group" aria-label="More actions">
-			if p.Box.CanMarkRead {
+			<section class="merge-settings">
-				<form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
+				<h2>Merge settings</h2>
-					<input type="hidden" name="head_id" value={ p.Box.Head }/>
+				<dl class="kv">
-					<button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
+					<dt>modes</dt>
+					<dd>{ strings.Join(p.Modes, ", ") }</dd>
+					<dt>checks</dt>
+					<dd>
+						if p.ChecksBlock {
+							failing ones block the merge
+						} else {
+							do not block the merge
+						}
+					</dd>
+				</dl>
+			</section>
+			if p.Box != nil {
+				if p.Box.Signed {
+					<p class="d-note" id="mr-signing">
+						squash and merge commits are signed with ermite's own key (generated on first start).
+						if p.Box.Fingerprint != "" {
+							fingerprint <code>{ p.Box.Fingerprint }</code>
+						}
+						<code>ermite signing-key show</code> prints it.
+					</p>
+				}
+				if p.Box.CanMarkRead {
+					<form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
+						<input type="hidden" name="head_id" value={ p.Box.Head }/>
+						<button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
+					</form>
+				}
+				<form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
+					<button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
 				</form>
-			}
+				if !p.Box.HeadGone && p.Box.ReadyAction == "" {
-			<form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
+					<details class="d-or">
-				<button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
+						<summary class="mute">or from a terminal</summary>
-			</form>
+						@CloneBlock(p.Box.CLI)
-			if !p.Box.HeadGone && p.Box.ReadyAction == "" {
+					</details>
-				<details class="d-or">
+				}
-					<summary class="mute">or from a terminal</summary>
-					@CloneBlock(p.Box.CLI)
-				</details>
 			}
 		</div>
 	</details>

M internal/adapters/web/mr_templ.go +607 -563 generated file: collapsed

load diff

M internal/adapters/web/mr_test.go +32 -0


@@ -128,3 +128,35 @@ func TestMergeabilityLiveEvents(t *testing.T) {
128	128		require.NoError(t, err)
129	129		assert.Empty(t, fs)
130	130		}
	131	+
	132	+	func TestMRPanelsAndMenus(t *testing.T) {
	133	+	p := MRPage{CommitCount: "500+", CommitsNote: "more commits", Modes: []string{"squash", "merge"}, ChecksBlock: true,
	134	+	ChecksSum: ChecksSummary{Total: 2, Label: "1/2", Title: "1/2 failed"}, Box: &MergeBox{Signed: true, Fingerprint: "fingerprint", HeadGone: true}}
	135	+	footer := renderToString(t, mrFooter(p))
	136	+	assert.Contains(t, footer, `<footer class="mr-footer"><details id="mr-panels">`)
	137	+	assert.Contains(t, footer, `data-mr-tabs`)
	138	+	assert.Contains(t, footer, `id="mr-commits"`)
	139	+	assert.Contains(t, footer, `id="mr-checks"`)
	140	+	assert.Contains(t, footer, `<table class="mr-commits">`)
	141	+	assert.Contains(t, footer, "500+")
	142	+	assert.Contains(t, footer, "more commits")
	143	+	assert.Contains(t, footer, "1/2 failed")
	144	+	rail := renderToString(t, mrRail(p))
	145	+	assert.Contains(t, rail, "g f")
	146	+	for _, text := range []string{"Checks", "Commits", "Settings", "mr-checks"} {
	147	+	assert.NotContains(t, rail, text)
	148	+	}
	149	+	more := renderToString(t, moreMenu(p))
	150	+	for _, text := range []string{"Merge settings", "squash, merge", "failing ones block", `id="mr-signing"`, "fingerprint", "ermite signing-key show"} {
	151	+	assert.Contains(t, more, text)
	152	+	}
	153	+	merge := renderToString(t, mergeMenu(p))
	154	+	assert.NotContains(t, merge, `<dl`)
	155	+	assert.NotContains(t, merge, `mr-signing`)
	156	+	assert.Contains(t, merge, "the source branch was deleted")
	157	+	bar := renderToString(t, mrBar(MRPage{}))
	158	+	assert.Contains(t, bar, `id="mr-ck"`)
	159	+	assert.Contains(t, bar, `href="#mr-checks"`)
	160	+	assert.Contains(t, bar, "Merge settings")
	161	+	assert.NotContains(t, bar, ">Close</button>")
	162	+	}


@@ -128,3 +128,35 @@ func TestMergeabilityLiveEvents(t *testing.T) {
128	require.NoError(t, err)	128		require.NoError(t, err)
129	assert.Empty(t, fs)	129		assert.Empty(t, fs)
130	}	130		}
		131	+
		132	+	func TestMRPanelsAndMenus(t *testing.T) {
		133	+	p := MRPage{CommitCount: "500+", CommitsNote: "more commits", Modes: []string{"squash", "merge"}, ChecksBlock: true,
		134	+	ChecksSum: ChecksSummary{Total: 2, Label: "1/2", Title: "1/2 failed"}, Box: &MergeBox{Signed: true, Fingerprint: "fingerprint", HeadGone: true}}
		135	+	footer := renderToString(t, mrFooter(p))
		136	+	assert.Contains(t, footer, `<footer class="mr-footer"><details id="mr-panels">`)
		137	+	assert.Contains(t, footer, `data-mr-tabs`)
		138	+	assert.Contains(t, footer, `id="mr-commits"`)
		139	+	assert.Contains(t, footer, `id="mr-checks"`)
		140	+	assert.Contains(t, footer, `<table class="mr-commits">`)
		141	+	assert.Contains(t, footer, "500+")
		142	+	assert.Contains(t, footer, "more commits")
		143	+	assert.Contains(t, footer, "1/2 failed")
		144	+	rail := renderToString(t, mrRail(p))
		145	+	assert.Contains(t, rail, "g f")
		146	+	for _, text := range []string{"Checks", "Commits", "Settings", "mr-checks"} {
		147	+	assert.NotContains(t, rail, text)
		148	+	}
		149	+	more := renderToString(t, moreMenu(p))
		150	+	for _, text := range []string{"Merge settings", "squash, merge", "failing ones block", `id="mr-signing"`, "fingerprint", "ermite signing-key show"} {
		151	+	assert.Contains(t, more, text)
		152	+	}
		153	+	merge := renderToString(t, mergeMenu(p))
		154	+	assert.NotContains(t, merge, `<dl`)
		155	+	assert.NotContains(t, merge, `mr-signing`)
		156	+	assert.Contains(t, merge, "the source branch was deleted")
		157	+	bar := renderToString(t, mrBar(MRPage{}))
		158	+	assert.Contains(t, bar, `id="mr-ck"`)
		159	+	assert.Contains(t, bar, `href="#mr-checks"`)
		160	+	assert.Contains(t, bar, "Merge settings")
		161	+	assert.NotContains(t, bar, ">Close</button>")
		162	+	}

M internal/adapters/web/signature_test.go +1 -1


@@ -145,7 +145,7 @@ func TestCommitPageShowsTheSignature(t *testing.T) {
145	145		func TestMergeRequestCommitsShowTheSignatureBadge(t *testing.T) {
146	146		t.Parallel()
147	147		signed := signatureBadge(verification(domain.FormatGPG, domain.StatusVerified, gpgFP, ""), false)
148		-	got := renderToString(t, mrRail(MRPage{Commits: []MRCommit{
	148	+	got := renderToString(t, mrFooter(MRPage{Commits: []MRCommit{
149	149		{Short: "aaaaaaa", Href: "/r/commit/a", Subject: "signed", Sig: signed},
150	150		{Short: "bbbbbbb", Href: "/r/commit/b", Subject: "unsigned"},
151	151		}}))


@@ -145,7 +145,7 @@ func TestCommitPageShowsTheSignature(t *testing.T) {
145		func TestMergeRequestCommitsShowTheSignatureBadge(t *testing.T) {	145		func TestMergeRequestCommitsShowTheSignatureBadge(t *testing.T) {
146		t.Parallel()	146		t.Parallel()
147		signed := signatureBadge(verification(domain.FormatGPG, domain.StatusVerified, gpgFP, ""), false)	147		signed := signatureBadge(verification(domain.FormatGPG, domain.StatusVerified, gpgFP, ""), false)
148	-	got := renderToString(t, mrRail(MRPage{Commits: []MRCommit{	148	+	got := renderToString(t, mrFooter(MRPage{Commits: []MRCommit{
149		{Short: "aaaaaaa", Href: "/r/commit/a", Subject: "signed", Sig: signed},	149		{Short: "aaaaaaa", Href: "/r/commit/a", Subject: "signed", Sig: signed},
150		{Short: "bbbbbbb", Href: "/r/commit/b", Subject: "unsigned"},	150		{Short: "bbbbbbb", Href: "/r/commit/b", Subject: "unsigned"},
151		}}))	151		}}))

M internal/adapters/web/static/css/60-mr.css +19 -2


@@ -8,6 +8,23 @@
8	8		& > .mr-desc.prose { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
9	9		}
10	10
	11	+	.mr-footer {
	12	+	border-top: 1px solid var(--border); padding: var(--s3) var(--s5);
	13	+	font-size: var(--fs-s);
	14	+	& summary { cursor: pointer; color: var(--ink-dim); }
	15	+	& nav { display: flex; gap: var(--s3); padding-block: var(--s3); }
	16	+	& [role="tab"] { padding: var(--s1) var(--s2); border-radius: var(--r-s); }
	17	+	& [aria-selected="true"] { background: var(--bg-raised); color: var(--ink-hi); }
	18	+	& [data-mr-panel] { overflow-x: auto; }
	19	+	& [hidden] { display: none; }
	20	+	& section h2 { font-size: var(--fs-s); color: var(--ink-dim); }
	21	+	& table { width: 100%; border-collapse: collapse; }
	22	+	& th, & td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--border); }
	23	+	& th { color: var(--ink-dim); font-weight: 500; }
	24	+	}
	25	+	.merge-settings { font-size: var(--fs-s); color: var(--ink-dim); }
	26	+	.merge-settings h2 { font-size: var(--fs-s); }
	27	+
11	28		.mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }
12	29		.mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }
13	30		.mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }

@@ -112,11 +129,11 @@
112	129		& .d-or > summary:hover { color: var(--ink-hi); }
113	130		& .d-or[open] > .clone { margin-top: var(--s2); }
114	131		& .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
	132	+	& #mr-signing code { overflow-wrap: anywhere; }
115	133		}
116	134
117	135		/* the rail of a merge request follows the review: it sticks under the
118		-	header, one screen high, and scrolls on its own to its checks, commits
119		-	and settings. The list of files keeps its own scroll, under a height, so
	136	+	header, one screen high, and scrolls on its own to its verdicts. The list of files keeps its own scroll, under a height, so
120	137		that the blocks below it stay in reach. Only on a two-column layout. */
121	138		@media (min-width: 1081px) {
122	139		.rail:has(.r-files) {


@@ -8,6 +8,23 @@
8		& > .mr-desc.prose { border: 0; border-top: 1px solid var(--border); border-radius: 0; }	8		& > .mr-desc.prose { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
9		}	9		}
10			10
			11	+	.mr-footer {
			12	+	border-top: 1px solid var(--border); padding: var(--s3) var(--s5);
			13	+	font-size: var(--fs-s);
			14	+	& summary { cursor: pointer; color: var(--ink-dim); }
			15	+	& nav { display: flex; gap: var(--s3); padding-block: var(--s3); }
			16	+	& [role="tab"] { padding: var(--s1) var(--s2); border-radius: var(--r-s); }
			17	+	& [aria-selected="true"] { background: var(--bg-raised); color: var(--ink-hi); }
			18	+	& [data-mr-panel] { overflow-x: auto; }
			19	+	& [hidden] { display: none; }
			20	+	& section h2 { font-size: var(--fs-s); color: var(--ink-dim); }
			21	+	& table { width: 100%; border-collapse: collapse; }
			22	+	& th, & td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--border); }
			23	+	& th { color: var(--ink-dim); font-weight: 500; }
			24	+	}
			25	+	.merge-settings { font-size: var(--fs-s); color: var(--ink-dim); }
			26	+	.merge-settings h2 { font-size: var(--fs-s); }
			27	+
11		.mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }	28		.mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }
12		.mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }	29		.mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }
13		.mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }	30		.mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }

@@ -112,11 +129,11 @@
112		& .d-or > summary:hover { color: var(--ink-hi); }	129		& .d-or > summary:hover { color: var(--ink-hi); }
113		& .d-or[open] > .clone { margin-top: var(--s2); }	130		& .d-or[open] > .clone { margin-top: var(--s2); }
114		& .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }	131		& .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
			132	+	& #mr-signing code { overflow-wrap: anywhere; }
115		}	133		}
116			134
117		/* the rail of a merge request follows the review: it sticks under the	135		/* the rail of a merge request follows the review: it sticks under the
118	-	header, one screen high, and scrolls on its own to its checks, commits	136	+	header, one screen high, and scrolls on its own to its verdicts. The list of files keeps its own scroll, under a height, so
119	-	and settings. The list of files keeps its own scroll, under a height, so
120		that the blocks below it stay in reach. Only on a two-column layout. */	137		that the blocks below it stay in reach. Only on a two-column layout. */
121		@media (min-width: 1081px) {	138		@media (min-width: 1081px) {
122		.rail:has(.r-files) {	139		.rail:has(.r-files) {

A internal/adapters/web/static/css/85-mobile.css +53 -0

@@ -0,0 +1,53 @@
	1	+	@layer components {
	2	+	.mr-touch-range { display: none; }
	3	+
	4	+	/* MR only: retain the shell's desktop layout and other pages' spacing. */
	5	+	@media (max-width: 720px) {
	6	+	body:has(#diffs[data-mr]) {
	7	+	--pad: 0px;
	8	+	--hdr-h: 97px;
	9	+	overflow-x: clip;
	10	+	}
	11	+	body:has(#diffs[data-mr]) .work { padding-inline: 0; margin-inline: 0; gap: var(--s3); }
	12	+	body:has(#diffs[data-mr]) main { min-width: 0; padding-inline: 0; }
	13	+	body:has(#diffs[data-mr]) :is(.card, .mr-card, .mr-desc, .dfile, .dscroll, .code, .rail section) {
	14	+	margin-inline: 0; border-inline: 0; border-radius: 0; min-width: 0; max-width: 100%;
	15	+	}
	16	+	body:has(#diffs[data-mr]) :is(.mr-h, .mr-desc.prose, .card-h, .mr-footer) { padding-inline: 4px; }
	17	+	body:has(#diffs[data-mr]) .mr-footer :is(th, td) { padding-inline: var(--s1); }
	18	+	body:has(#diffs[data-mr]) .mr-desc.prose > pre { margin-inline: -4px; padding-inline: 0; max-width: calc(100% + 8px); }
	19	+	#diffs[data-mr] .dfile > summary { padding-inline: 0; border-inline: 0; border-radius: 0; }
	20	+	#diffs[data-mr] :is(.dscroll, .code) { overflow-x: auto; overscroll-behavior-x: contain; padding-inline: 0; }
	21	+	#diffs[data-mr] .dt .ln { width: calc(var(--lnw) + .5ch); min-width: calc(var(--lnw) + .5ch); padding-inline: .25ch; }
	22	+	#diffs[data-mr] .dt .m { width: 1ch; }
	23	+	#diffs[data-mr][data-diff] .uni { display: table; }
	24	+	#diffs[data-mr][data-diff] .spl { display: none; }
	25	+	#diffs[data-mr] .fnote td { padding-inline: 0; }
	26	+	#diffs[data-mr] :is(.cform, .cmt) { width: min(65ch, calc(100vw - 5rem)); max-width: calc(100vw - 5rem); overflow-wrap: anywhere; }
	27	+	body:has(#diffs[data-mr]) :is(input, textarea, select) { font-size: 16px; }
	28	+	body:has(#diffs[data-mr]) .f-btns { flex-wrap: wrap; }
	29	+	body:has(#diffs[data-mr]) .menu .menu-pop {
	30	+	position: fixed; inset: auto 0 0; width: auto; max-width: 100%;
	31	+	max-height: 75dvh; overflow-y: auto; border-radius: var(--r) var(--r) 0 0;
	32	+	padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
	33	+	}
	34	+	body:has(#diffs[data-mr]) .mr-bar { position: static; }
	35	+	/* A wrapping toolbar has no reliable fixed sticky height. */
	36	+	body:has(#diffs[data-mr]) { --bar-h: 0px; }
	37	+	}
	38	+
	39	+	@media (pointer: coarse), (hover: none) {
	40	+	.mr-touch-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
	41	+	/* Real, disjoint cells: never expand invisible targets into other lines
	42	+	or into the neighbouring old/new gutter. */
	43	+	#diffs[data-mr] .dt { line-height: max(var(--lh-code), 40px); }
	44	+	#diffs[data-mr] .dt .ln { width: max(calc(var(--lnw) + .5ch), 40px); min-width: 40px; padding: 0; }
	45	+	#diffs[data-mr] .spl .c-ln { width: max(calc(var(--lnw) + .5ch), 40px); }
	46	+	#diffs[data-mr] .ln a { display: block; width: 100%; min-height: 40px; text-align: center; text-decoration: underline; }
	47	+	.mr-touch-range[hidden] { display: none; }
	48	+	#diffs[data-mr] .ln a[data-range-start] { outline: 2px solid var(--focus); background: var(--sel); }
	49	+	body:has(#diffs[data-mr]) :is(.cform .btn, .menu .btn, .mr-touch-range .btn, .c-act button) { min-height: 40px; height: auto; padding-block: var(--s2); }
	50	+	#diffs[data-mr] .cform { scroll-margin-block: calc(var(--hdr-h) + 12px); }
	51	+	.mr-footer :is(summary, [data-mr-tabs] a) { display: inline-flex; align-items: center; min-height: 40px; }
	52	+	}
	53	+	}

@@ -0,0 +1,53 @@
	1	+	@layer components {
	2	+	.mr-touch-range { display: none; }
	3	+
	4	+	/* MR only: retain the shell's desktop layout and other pages' spacing. */
	5	+	@media (max-width: 720px) {
	6	+	body:has(#diffs[data-mr]) {
	7	+	--pad: 0px;
	8	+	--hdr-h: 97px;
	9	+	overflow-x: clip;
	10	+	}
	11	+	body:has(#diffs[data-mr]) .work { padding-inline: 0; margin-inline: 0; gap: var(--s3); }
	12	+	body:has(#diffs[data-mr]) main { min-width: 0; padding-inline: 0; }
	13	+	body:has(#diffs[data-mr]) :is(.card, .mr-card, .mr-desc, .dfile, .dscroll, .code, .rail section) {
	14	+	margin-inline: 0; border-inline: 0; border-radius: 0; min-width: 0; max-width: 100%;
	15	+	}
	16	+	body:has(#diffs[data-mr]) :is(.mr-h, .mr-desc.prose, .card-h, .mr-footer) { padding-inline: 4px; }
	17	+	body:has(#diffs[data-mr]) .mr-footer :is(th, td) { padding-inline: var(--s1); }
	18	+	body:has(#diffs[data-mr]) .mr-desc.prose > pre { margin-inline: -4px; padding-inline: 0; max-width: calc(100% + 8px); }
	19	+	#diffs[data-mr] .dfile > summary { padding-inline: 0; border-inline: 0; border-radius: 0; }
	20	+	#diffs[data-mr] :is(.dscroll, .code) { overflow-x: auto; overscroll-behavior-x: contain; padding-inline: 0; }
	21	+	#diffs[data-mr] .dt .ln { width: calc(var(--lnw) + .5ch); min-width: calc(var(--lnw) + .5ch); padding-inline: .25ch; }
	22	+	#diffs[data-mr] .dt .m { width: 1ch; }
	23	+	#diffs[data-mr][data-diff] .uni { display: table; }
	24	+	#diffs[data-mr][data-diff] .spl { display: none; }
	25	+	#diffs[data-mr] .fnote td { padding-inline: 0; }
	26	+	#diffs[data-mr] :is(.cform, .cmt) { width: min(65ch, calc(100vw - 5rem)); max-width: calc(100vw - 5rem); overflow-wrap: anywhere; }
	27	+	body:has(#diffs[data-mr]) :is(input, textarea, select) { font-size: 16px; }
	28	+	body:has(#diffs[data-mr]) .f-btns { flex-wrap: wrap; }
	29	+	body:has(#diffs[data-mr]) .menu .menu-pop {
	30	+	position: fixed; inset: auto 0 0; width: auto; max-width: 100%;
	31	+	max-height: 75dvh; overflow-y: auto; border-radius: var(--r) var(--r) 0 0;
	32	+	padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
	33	+	}
	34	+	body:has(#diffs[data-mr]) .mr-bar { position: static; }
	35	+	/* A wrapping toolbar has no reliable fixed sticky height. */
	36	+	body:has(#diffs[data-mr]) { --bar-h: 0px; }
	37	+	}
	38	+
	39	+	@media (pointer: coarse), (hover: none) {
	40	+	.mr-touch-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
	41	+	/* Real, disjoint cells: never expand invisible targets into other lines
	42	+	or into the neighbouring old/new gutter. */
	43	+	#diffs[data-mr] .dt { line-height: max(var(--lh-code), 40px); }
	44	+	#diffs[data-mr] .dt .ln { width: max(calc(var(--lnw) + .5ch), 40px); min-width: 40px; padding: 0; }
	45	+	#diffs[data-mr] .spl .c-ln { width: max(calc(var(--lnw) + .5ch), 40px); }
	46	+	#diffs[data-mr] .ln a { display: block; width: 100%; min-height: 40px; text-align: center; text-decoration: underline; }
	47	+	.mr-touch-range[hidden] { display: none; }
	48	+	#diffs[data-mr] .ln a[data-range-start] { outline: 2px solid var(--focus); background: var(--sel); }
	49	+	body:has(#diffs[data-mr]) :is(.cform .btn, .menu .btn, .mr-touch-range .btn, .c-act button) { min-height: 40px; height: auto; padding-block: var(--s2); }
	50	+	#diffs[data-mr] .cform { scroll-margin-block: calc(var(--hdr-h) + 12px); }
	51	+	.mr-footer :is(summary, [data-mr-tabs] a) { display: inline-flex; align-items: center; min-height: 40px; }
	52	+	}
	53	+	}

M internal/adapters/web/static/js/ermite.js +1 -0


@@ -183,6 +183,7 @@
183	183		layout(mode) {
184	184		const el = $('[data-diff]');
185	185		if (!el) return;
	186	+	if (el.hasAttribute('data-mr') && el.dataset.mobile === 'true') return;
186	187		el.dataset.diff = mode;
187	188		try { sessionStorage.setItem('diff', mode); } catch { /* storage refused: the layout holds for this page */ }
188	189		for (const d of $$('[data-file]')) if ($('.dt', d)) d.open = true;


@@ -183,6 +183,7 @@
183	layout(mode) {	183		layout(mode) {
184	const el = $('[data-diff]');	184		const el = $('[data-diff]');
185	if (!el) return;	185		if (!el) return;
		186	+	if (el.hasAttribute('data-mr') && el.dataset.mobile === 'true') return;
186	el.dataset.diff = mode;	187		el.dataset.diff = mode;
187	try { sessionStorage.setItem('diff', mode); } catch { /* storage refused: the layout holds for this page */ }	188		try { sessionStorage.setItem('diff', mode); } catch { /* storage refused: the layout holds for this page */ }
188	for (const d of $$('[data-file]')) if ($('.dt', d)) d.open = true;	189		for (const d of $$('[data-file]')) if ($('.dt', d)) d.open = true;

M internal/adapters/web/static/js/mr.js +133 -2


@@ -27,6 +27,20 @@ window.ermiteMR = (() => {
27	27		b.searchParams.set('on', `${y[1]}:${nums[0]}-${nums[1]}:${y[3]}`);
28	28		return b.href;
29	29		},
	30	+	// Range mode is explicit: ordinary taps still open single-line forms.
	31	+	touchRange(previous, current, base) {
	32	+	if (!previous) return { start: current, url: null };
	33	+	const url = core.rangeURL(previous, current, base);
	34	+	if (url) return { start: null, url };
	35	+	if (previous === current) return { start: null, url: current };
	36	+	return { start: current, url: null }; // another file/side starts afresh
	37	+	},
	38	+	mobileURL(href, view, narrow) {
	39	+	if (!narrow \|\| view !== 'split') return null;
	40	+	const url = new URL(href);
	41	+	url.searchParams.set('view', 'unified');
	42	+	return url.href;
	43	+	},
30	44		quote(button) {
31	45		const thread = button.closest('.cmt').closest('[data-thread]');
32	46		const details = thread?.querySelector(':scope > details[data-reply]');

@@ -49,6 +63,13 @@ window.ermiteMR = (() => {
49	63		if (/^[1-9]$/.test(key) && Number(key) <= modes) return { mode: Number(key) - 1 };
50	64		return null;
51	65		},
	66	+	tabIndex(key, index, count) {
	67	+	if (key === 'Home') return 0;
	68	+	if (key === 'End') return count - 1;
	69	+	if (key === 'ArrowRight') return (index + 1) % count;
	70	+	if (key === 'ArrowLeft') return (index + count - 1) % count;
	71	+	return null;
	72	+	},
52	73		// step moves an index within [0, n).
53	74		step(i, d, n) {
54	75		if (n === 0) return -1;

@@ -60,6 +81,7 @@ window.ermiteMR = (() => {
60	81		const $ = (sel, root = document) => root.querySelector(sel);
61	82		const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
62	83		const loading = new Map(); // src -> promise of the swap
	84	+	let refreshTouchComments = () => {};
63	85		let moved = false;
64	86		let lazyIO = null; // the observer of the placeholders (watch)
65	87		let revealGen = 0; // the last reveal wins the scroll

@@ -108,6 +130,7 @@ window.ermiteMR = (() => {
108	130		window.htmx?.process(f);
109	131		window.ermite?.watchFile?.(f, old);
110	132		}
	133	+	refreshTouchComments();
111	134		}
112	135
113	136		// stale: the diff changed under the page. The placeholders say so; no file

@@ -130,7 +153,7 @@ window.ermiteMR = (() => {
130	153		// A page with both layouts says which shows in data-diff; a large diff
131	154		// rendered in one layout only says it in data-view.
132	155		const diffs = $('#diffs')?.dataset;
133		-	if (/^c\d+$/.test(id) && (diffs?.diff \|\| diffs?.view) === 'split') {
	156	+	if (/^c\d+$/.test(id) && !window.matchMedia?.('(max-width: 720px)').matches && (diffs?.diff \|\| diffs?.view) === 'split') {
134	157		const split = document.getElementById(id + '-s');
135	158		if (split) return split;
136	159		}

@@ -285,8 +308,116 @@ window.ermiteMR = (() => {
285	308		reveal(id);
286	309		}
287	310
	311	+	// Enhance the ordinary anchor navigation only when scripts are available.
	312	+	function panels() {
	313	+	const footer = $('#mr-panels'), nav = $('[data-mr-tabs]');
	314	+	if (!footer \|\| !nav) return;
	315	+	const tabs = $$('a', nav), panels = $$('[data-mr-panel]', footer);
	316	+	nav.setAttribute('role', 'tablist');
	317	+	function select(index, focus = false) {
	318	+	tabs.forEach((tab, i) => {
	319	+	tab.setAttribute('role', 'tab');
	320	+	tab.setAttribute('aria-controls', panels[i].id);
	321	+	tab.setAttribute('aria-selected', String(i === index));
	322	+	tab.tabIndex = i === index ? 0 : -1;
	323	+	panels[i].setAttribute('role', 'tabpanel');
	324	+	panels[i].tabIndex = 0;
	325	+	panels[i].hidden = i !== index;
	326	+	});
	327	+	if (focus) tabs[index].focus();
	328	+	}
	329	+	tabs.forEach((tab, i) => {
	330	+	tab.addEventListener('click', (e) => { e.preventDefault(); select(i); });
	331	+	tab.addEventListener('keydown', (e) => {
	332	+	const next = core.tabIndex(e.key, i, tabs.length);
	333	+	if (next === null) return;
	334	+	e.preventDefault(); select(next, true);
	335	+	});
	336	+	});
	337	+	function hash() {
	338	+	const index = location.hash === '#mr-checks' ? 1 : location.hash === '#mr-commits' ? 0 : -1;
	339	+	if (index < 0) return;
	340	+	footer.open = true; select(index);
	341	+	}
	342	+	// A repeated click on the same hash must also reopen a folded footer.
	343	+	document.addEventListener('click', (e) => {
	344	+	if (e.target.closest?.('#mr-ck')) { footer.open = true; select(1); }
	345	+	});
	346	+	const summary = $('#mr-ck');
	347	+	if (summary) {
	348	+	const sync = () => { $('[data-checks-label]', nav).textContent = $('#mr-ck')?.title \|\| $('#mr-ck')?.textContent.trim() \|\| 'no checks'; };
	349	+	new MutationObserver(sync).observe(summary.parentElement, { childList: true, subtree: true, characterData: true });
	350	+	sync();
	351	+	}
	352	+	select(0); hash();
	353	+	addEventListener('hashchange', hash);
	354	+	}
	355	+
	356	+	function touchComments() {
	357	+	const diffs = $('#diffs');
	358	+	const bar = document.createElement('div');
	359	+	bar.className = 'mr-touch-range';
	360	+	const button = document.createElement('button');
	361	+	button.type = 'button';
	362	+	button.className = 'btn';
	363	+	button.textContent = 'Select line range';
	364	+	button.setAttribute('aria-pressed', 'false');
	365	+	const status = document.createElement('span');
	366	+	status.setAttribute('role', 'status');
	367	+	bar.append(button, status);
	368	+	diffs.prepend(bar);
	369	+	refreshTouchComments = () => { bar.hidden = !$('.ln a[href*="on="]', diffs); };
	370	+	refreshTouchComments();
	371	+	let enabled = false, start = null, marker = null;
	372	+	const clear = () => { marker?.removeAttribute('data-range-start'); marker = null; start = null; };
	373	+	button.addEventListener('click', () => {
	374	+	enabled = !enabled;
	375	+	clear();
	376	+	button.setAttribute('aria-pressed', String(enabled));
	377	+	status.textContent = enabled ? 'Tap the first line number, then the last. Tap the same line for one line.' : '';
	378	+	});
	379	+	diffs.addEventListener('click', (e) => {
	380	+	const link = e.target.closest?.('.ln a[href*="on="]');
	381	+	if (!enabled \|\| !link \|\| e.shiftKey \|\| e.ctrlKey \|\| e.metaKey \|\| e.altKey) return;
	382	+	e.preventDefault();
	383	+	e.stopPropagation(); // do not alter the desktop shift-click anchor
	384	+	const next = core.touchRange(start, link.href, location.href);
	385	+	clear();
	386	+	if (next.url) { location.assign(next.url); return; }
	387	+	start = next.start;
	388	+	marker = link;
	389	+	marker.setAttribute('data-range-start', '');
	390	+	status.textContent = `Range starts at line ${link.textContent.trim()}. Tap the last line number (same file and side).`;
	391	+	});
	392	+	// The server opens the line form. Scroll after layout without stealing
	393	+	// focus or forcing a mobile keyboard to appear.
	394	+	if (new URL(location.href).searchParams.has('on')) requestAnimationFrame(() => {
	395	+	const form = $$('.fnote .cform', diffs).find((f) => f.getClientRects().length);
	396	+	form?.scrollIntoView({ block: 'center' });
	397	+	});
	398	+	}
	399	+
288	400		function start() {
289	401		if (!$('#diffs[data-mr]')) return;
	402	+	panels();
	403	+	// Large diffs may contain only the split table. Ask the existing server
	404	+	// route for unified rather than writing the saved session preference.
	405	+	const narrow = window.matchMedia?.('(max-width: 720px)');
	406	+	const unify = () => {
	407	+	$('#diffs').dataset.mobile = String(!!narrow?.matches);
	408	+	const url = core.mobileURL(location.href, $('#diffs')?.dataset.view, narrow?.matches);
	409	+	if (url) { location.replace(url); return true; }
	410	+	return false;
	411	+	};
	412	+	if (unify()) return;
	413	+	narrow?.addEventListener('change', unify);
	414	+	addEventListener('click', (e) => {
	415	+	if (narrow?.matches && e.target.closest?.('.vbtn[data-view="split"]')) {
	416	+	e.preventDefault();
	417	+	e.stopImmediatePropagation();
	418	+	}
	419	+	}, true);
	420	+	touchComments();
290	421		let folded = false;
291	422		try { folded = localStorage.getItem('mr-files-folded') === '1'; } catch { /* no storage: open */ }
292	423		if (folded) foldFiles(true);

@@ -316,7 +447,7 @@ window.ermiteMR = (() => {
316	447		});
317	448		}
318	449
319		-	return { core, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
	450	+	return { core, panels, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
320	451		})();
321	452
322	453		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());


@@ -27,6 +27,20 @@ window.ermiteMR = (() => {
27		b.searchParams.set('on', `${y[1]}:${nums[0]}-${nums[1]}:${y[3]}`);	27		b.searchParams.set('on', `${y[1]}:${nums[0]}-${nums[1]}:${y[3]}`);
28		return b.href;	28		return b.href;
29		},	29		},
			30	+	// Range mode is explicit: ordinary taps still open single-line forms.
			31	+	touchRange(previous, current, base) {
			32	+	if (!previous) return { start: current, url: null };
			33	+	const url = core.rangeURL(previous, current, base);
			34	+	if (url) return { start: null, url };
			35	+	if (previous === current) return { start: null, url: current };
			36	+	return { start: current, url: null }; // another file/side starts afresh
			37	+	},
			38	+	mobileURL(href, view, narrow) {
			39	+	if (!narrow \|\| view !== 'split') return null;
			40	+	const url = new URL(href);
			41	+	url.searchParams.set('view', 'unified');
			42	+	return url.href;
			43	+	},
30		quote(button) {	44		quote(button) {
31		const thread = button.closest('.cmt').closest('[data-thread]');	45		const thread = button.closest('.cmt').closest('[data-thread]');
32		const details = thread?.querySelector(':scope > details[data-reply]');	46		const details = thread?.querySelector(':scope > details[data-reply]');

@@ -49,6 +63,13 @@ window.ermiteMR = (() => {
49		if (/^[1-9]$/.test(key) && Number(key) <= modes) return { mode: Number(key) - 1 };	63		if (/^[1-9]$/.test(key) && Number(key) <= modes) return { mode: Number(key) - 1 };
50		return null;	64		return null;
51		},	65		},
			66	+	tabIndex(key, index, count) {
			67	+	if (key === 'Home') return 0;
			68	+	if (key === 'End') return count - 1;
			69	+	if (key === 'ArrowRight') return (index + 1) % count;
			70	+	if (key === 'ArrowLeft') return (index + count - 1) % count;
			71	+	return null;
			72	+	},
52		// step moves an index within [0, n).	73		// step moves an index within [0, n).
53		step(i, d, n) {	74		step(i, d, n) {
54		if (n === 0) return -1;	75		if (n === 0) return -1;

@@ -60,6 +81,7 @@ window.ermiteMR = (() => {
60		const $ = (sel, root = document) => root.querySelector(sel);	81		const $ = (sel, root = document) => root.querySelector(sel);
61		const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];	82		const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
62		const loading = new Map(); // src -> promise of the swap	83		const loading = new Map(); // src -> promise of the swap
			84	+	let refreshTouchComments = () => {};
63		let moved = false;	85		let moved = false;
64		let lazyIO = null; // the observer of the placeholders (watch)	86		let lazyIO = null; // the observer of the placeholders (watch)
65		let revealGen = 0; // the last reveal wins the scroll	87		let revealGen = 0; // the last reveal wins the scroll

@@ -108,6 +130,7 @@ window.ermiteMR = (() => {
108		window.htmx?.process(f);	130		window.htmx?.process(f);
109		window.ermite?.watchFile?.(f, old);	131		window.ermite?.watchFile?.(f, old);
110		}	132		}
			133	+	refreshTouchComments();
111		}	134		}
112			135
113		// stale: the diff changed under the page. The placeholders say so; no file	136		// stale: the diff changed under the page. The placeholders say so; no file

@@ -130,7 +153,7 @@ window.ermiteMR = (() => {
130		// A page with both layouts says which shows in data-diff; a large diff	153		// A page with both layouts says which shows in data-diff; a large diff
131		// rendered in one layout only says it in data-view.	154		// rendered in one layout only says it in data-view.
132		const diffs = $('#diffs')?.dataset;	155		const diffs = $('#diffs')?.dataset;
133	-	if (/^c\d+$/.test(id) && (diffs?.diff \|\| diffs?.view) === 'split') {	156	+	if (/^c\d+$/.test(id) && !window.matchMedia?.('(max-width: 720px)').matches && (diffs?.diff \|\| diffs?.view) === 'split') {
134		const split = document.getElementById(id + '-s');	157		const split = document.getElementById(id + '-s');
135		if (split) return split;	158		if (split) return split;
136		}	159		}

@@ -285,8 +308,116 @@ window.ermiteMR = (() => {
285		reveal(id);	308		reveal(id);
286		}	309		}
287			310
			311	+	// Enhance the ordinary anchor navigation only when scripts are available.
			312	+	function panels() {
			313	+	const footer = $('#mr-panels'), nav = $('[data-mr-tabs]');
			314	+	if (!footer \|\| !nav) return;
			315	+	const tabs = $$('a', nav), panels = $$('[data-mr-panel]', footer);
			316	+	nav.setAttribute('role', 'tablist');
			317	+	function select(index, focus = false) {
			318	+	tabs.forEach((tab, i) => {
			319	+	tab.setAttribute('role', 'tab');
			320	+	tab.setAttribute('aria-controls', panels[i].id);
			321	+	tab.setAttribute('aria-selected', String(i === index));
			322	+	tab.tabIndex = i === index ? 0 : -1;
			323	+	panels[i].setAttribute('role', 'tabpanel');
			324	+	panels[i].tabIndex = 0;
			325	+	panels[i].hidden = i !== index;
			326	+	});
			327	+	if (focus) tabs[index].focus();
			328	+	}
			329	+	tabs.forEach((tab, i) => {
			330	+	tab.addEventListener('click', (e) => { e.preventDefault(); select(i); });
			331	+	tab.addEventListener('keydown', (e) => {
			332	+	const next = core.tabIndex(e.key, i, tabs.length);
			333	+	if (next === null) return;
			334	+	e.preventDefault(); select(next, true);
			335	+	});
			336	+	});
			337	+	function hash() {
			338	+	const index = location.hash === '#mr-checks' ? 1 : location.hash === '#mr-commits' ? 0 : -1;
			339	+	if (index < 0) return;
			340	+	footer.open = true; select(index);
			341	+	}
			342	+	// A repeated click on the same hash must also reopen a folded footer.
			343	+	document.addEventListener('click', (e) => {
			344	+	if (e.target.closest?.('#mr-ck')) { footer.open = true; select(1); }
			345	+	});
			346	+	const summary = $('#mr-ck');
			347	+	if (summary) {
			348	+	const sync = () => { $('[data-checks-label]', nav).textContent = $('#mr-ck')?.title \|\| $('#mr-ck')?.textContent.trim() \|\| 'no checks'; };
			349	+	new MutationObserver(sync).observe(summary.parentElement, { childList: true, subtree: true, characterData: true });
			350	+	sync();
			351	+	}
			352	+	select(0); hash();
			353	+	addEventListener('hashchange', hash);
			354	+	}
			355	+
			356	+	function touchComments() {
			357	+	const diffs = $('#diffs');
			358	+	const bar = document.createElement('div');
			359	+	bar.className = 'mr-touch-range';
			360	+	const button = document.createElement('button');
			361	+	button.type = 'button';
			362	+	button.className = 'btn';
			363	+	button.textContent = 'Select line range';
			364	+	button.setAttribute('aria-pressed', 'false');
			365	+	const status = document.createElement('span');
			366	+	status.setAttribute('role', 'status');
			367	+	bar.append(button, status);
			368	+	diffs.prepend(bar);
			369	+	refreshTouchComments = () => { bar.hidden = !$('.ln a[href*="on="]', diffs); };
			370	+	refreshTouchComments();
			371	+	let enabled = false, start = null, marker = null;
			372	+	const clear = () => { marker?.removeAttribute('data-range-start'); marker = null; start = null; };
			373	+	button.addEventListener('click', () => {
			374	+	enabled = !enabled;
			375	+	clear();
			376	+	button.setAttribute('aria-pressed', String(enabled));
			377	+	status.textContent = enabled ? 'Tap the first line number, then the last. Tap the same line for one line.' : '';
			378	+	});
			379	+	diffs.addEventListener('click', (e) => {
			380	+	const link = e.target.closest?.('.ln a[href*="on="]');
			381	+	if (!enabled \|\| !link \|\| e.shiftKey \|\| e.ctrlKey \|\| e.metaKey \|\| e.altKey) return;
			382	+	e.preventDefault();
			383	+	e.stopPropagation(); // do not alter the desktop shift-click anchor
			384	+	const next = core.touchRange(start, link.href, location.href);
			385	+	clear();
			386	+	if (next.url) { location.assign(next.url); return; }
			387	+	start = next.start;
			388	+	marker = link;
			389	+	marker.setAttribute('data-range-start', '');
			390	+	status.textContent = `Range starts at line ${link.textContent.trim()}. Tap the last line number (same file and side).`;
			391	+	});
			392	+	// The server opens the line form. Scroll after layout without stealing
			393	+	// focus or forcing a mobile keyboard to appear.
			394	+	if (new URL(location.href).searchParams.has('on')) requestAnimationFrame(() => {
			395	+	const form = $$('.fnote .cform', diffs).find((f) => f.getClientRects().length);
			396	+	form?.scrollIntoView({ block: 'center' });
			397	+	});
			398	+	}
			399	+
288		function start() {	400		function start() {
289		if (!$('#diffs[data-mr]')) return;	401		if (!$('#diffs[data-mr]')) return;
			402	+	panels();
			403	+	// Large diffs may contain only the split table. Ask the existing server
			404	+	// route for unified rather than writing the saved session preference.
			405	+	const narrow = window.matchMedia?.('(max-width: 720px)');
			406	+	const unify = () => {
			407	+	$('#diffs').dataset.mobile = String(!!narrow?.matches);
			408	+	const url = core.mobileURL(location.href, $('#diffs')?.dataset.view, narrow?.matches);
			409	+	if (url) { location.replace(url); return true; }
			410	+	return false;
			411	+	};
			412	+	if (unify()) return;
			413	+	narrow?.addEventListener('change', unify);
			414	+	addEventListener('click', (e) => {
			415	+	if (narrow?.matches && e.target.closest?.('.vbtn[data-view="split"]')) {
			416	+	e.preventDefault();
			417	+	e.stopImmediatePropagation();
			418	+	}
			419	+	}, true);
			420	+	touchComments();
290		let folded = false;	421		let folded = false;
291		try { folded = localStorage.getItem('mr-files-folded') === '1'; } catch { /* no storage: open */ }	422		try { folded = localStorage.getItem('mr-files-folded') === '1'; } catch { /* no storage: open */ }
292		if (folded) foldFiles(true);	423		if (folded) foldFiles(true);

@@ -316,7 +447,7 @@ window.ermiteMR = (() => {
316		});	447		});
317		}	448		}
318			449
319	-	return { core, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };	450	+	return { core, panels, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
320		})();	451		})();
321			452
322		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());	453		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());

M internal/app/testdata/web/commit-big.html +3 -3


@@ -127,12 +127,12 @@
127	127		</span>
128	128		<details class="menu vmenu">
129	129		<summary class="btn" aria-label="Diff view">
130		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	130	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
131	131		</summary>
132	132		<div class="menu-pop" role="group" aria-label="Diff view">
133		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	133	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
134	134		</a>
135		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	135	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
136	136		</a>
137	137		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
138	138		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -127,12 +127,12 @@
127		</span>	127		</span>
128		<details class="menu vmenu">	128		<details class="menu vmenu">
129		<summary class="btn" aria-label="Diff view">	129		<summary class="btn" aria-label="Diff view">
130	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	130	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
131		</summary>	131		</summary>
132		<div class="menu-pop" role="group" aria-label="Diff view">	132		<div class="menu-pop" role="group" aria-label="Diff view">
133	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	133	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
134		</a>	134		</a>
135	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	135	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
136		</a>	136		</a>
137		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	137		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
138		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	138		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-binary.html +3 -3


@@ -123,12 +123,12 @@
123	123		</span>
124	124		<details class="menu vmenu">
125	125		<summary class="btn" aria-label="Diff view">
126		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	126	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
127	127		</summary>
128	128		<div class="menu-pop" role="group" aria-label="Diff view">
129		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	129	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
130	130		</a>
131		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	131	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
132	132		</a>
133	133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
134	134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -123,12 +123,12 @@
123		</span>	123		</span>
124		<details class="menu vmenu">	124		<details class="menu vmenu">
125		<summary class="btn" aria-label="Diff view">	125		<summary class="btn" aria-label="Diff view">
126	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	126	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
127		</summary>	127		</summary>
128		<div class="menu-pop" role="group" aria-label="Diff view">	128		<div class="menu-pop" role="group" aria-label="Diff view">
129	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	129	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
130		</a>	130		</a>
131	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	131	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
132		</a>	132		</a>
133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-merge.html +3 -3


@@ -122,12 +122,12 @@
122	122		</span>
123	123		<details class="menu vmenu">
124	124		<summary class="btn" aria-label="Diff view">
125		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	125	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
126	126		</summary>
127	127		<div class="menu-pop" role="group" aria-label="Diff view">
128		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	128	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
129	129		</a>
130		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	130	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
131	131		</a>
132	132		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
133	133		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -122,12 +122,12 @@
122		</span>	122		</span>
123		<details class="menu vmenu">	123		<details class="menu vmenu">
124		<summary class="btn" aria-label="Diff view">	124		<summary class="btn" aria-label="Diff view">
125	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	125	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
126		</summary>	126		</summary>
127		<div class="menu-pop" role="group" aria-label="Diff view">	127		<div class="menu-pop" role="group" aria-label="Diff view">
128	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	128	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
129		</a>	129		</a>
130	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	130	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
131		</a>	131		</a>
132		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	132		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
133		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	133		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-modify-split.html +3 -3


@@ -129,12 +129,12 @@ And <b>html</b> & "quotes".</pre>
129	129		</span>
130	130		<details class="menu vmenu">
131	131		<summary class="btn" aria-label="Diff view">
132		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Split</span>
	132	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Split</span>
133	133		</summary>
134	134		<div class="menu-pop" role="group" aria-label="Diff view">
135		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	135	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
136	136		</a>
137		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" aria-current="true" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	137	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" aria-current="true" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
138	138		</a>
139	139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
140	140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -129,12 +129,12 @@ And <b>html</b> & "quotes".</pre>
129		</span>	129		</span>
130		<details class="menu vmenu">	130		<details class="menu vmenu">
131		<summary class="btn" aria-label="Diff view">	131		<summary class="btn" aria-label="Diff view">
132	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Split</span>	132	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Split</span>
133		</summary>	133		</summary>
134		<div class="menu-pop" role="group" aria-label="Diff view">	134		<div class="menu-pop" role="group" aria-label="Diff view">
135	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	135	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
136		</a>	136		</a>
137	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" aria-current="true" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	137	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" aria-current="true" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
138		</a>	138		</a>
139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-modify.html +3 -3


@@ -129,12 +129,12 @@ And <b>html</b> & "quotes".</pre>
129	129		</span>
130	130		<details class="menu vmenu">
131	131		<summary class="btn" aria-label="Diff view">
132		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	132	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
133	133		</summary>
134	134		<div class="menu-pop" role="group" aria-label="Diff view">
135		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	135	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
136	136		</a>
137		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	137	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
138	138		</a>
139	139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
140	140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -129,12 +129,12 @@ And <b>html</b> & "quotes".</pre>
129		</span>	129		</span>
130		<details class="menu vmenu">	130		<details class="menu vmenu">
131		<summary class="btn" aria-label="Diff view">	131		<summary class="btn" aria-label="Diff view">
132	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	132	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
133		</summary>	133		</summary>
134		<div class="menu-pop" role="group" aria-label="Diff view">	134		<div class="menu-pop" role="group" aria-label="Diff view">
135	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	135	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
136		</a>	136		</a>
137	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	137	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
138		</a>	138		</a>
139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	139		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	140		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-rename.html +3 -3


@@ -123,12 +123,12 @@
123	123		</span>
124	124		<details class="menu vmenu">
125	125		<summary class="btn" aria-label="Diff view">
126		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	126	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
127	127		</summary>
128	128		<div class="menu-pop" role="group" aria-label="Diff view">
129		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	129	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
130	130		</a>
131		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	131	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
132	132		</a>
133	133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
134	134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -123,12 +123,12 @@
123		</span>	123		</span>
124		<details class="menu vmenu">	124		<details class="menu vmenu">
125		<summary class="btn" aria-label="Diff view">	125		<summary class="btn" aria-label="Diff view">
126	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	126	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
127		</summary>	127		</summary>
128		<div class="menu-pop" role="group" aria-label="Diff view">	128		<div class="menu-pop" role="group" aria-label="Diff view">
129	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	129	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
130		</a>	130		</a>
131	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	131	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
132		</a>	132		</a>
133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	133		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	134		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-root.html +3 -3


@@ -121,12 +121,12 @@
121	121		</span>
122	122		<details class="menu vmenu">
123	123		<summary class="btn" aria-label="Diff view">
124		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	124	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
125	125		</summary>
126	126		<div class="menu-pop" role="group" aria-label="Diff view">
127		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	127	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
128	128		</a>
129		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	129	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
130	130		</a>
131	131		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
132	132		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -121,12 +121,12 @@
121		</span>	121		</span>
122		<details class="menu vmenu">	122		<details class="menu vmenu">
123		<summary class="btn" aria-label="Diff view">	123		<summary class="btn" aria-label="Diff view">
124	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	124	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
125		</summary>	125		</summary>
126		<div class="menu-pop" role="group" aria-label="Diff view">	126		<div class="menu-pop" role="group" aria-label="Diff view">
127	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	127	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
128		</a>	128		</a>
129	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	129	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
130		</a>	130		</a>
131		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	131		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
132		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	132		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/testdata/web/commit-trojan.html +3 -3


@@ -124,12 +124,12 @@
124	124		</span>
125	125		<details class="menu vmenu">
126	126		<summary class="btn" aria-label="Diff view">
127		-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
	127	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
128	128		</summary>
129	129		<div class="menu-pop" role="group" aria-label="Diff view">
130		-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
	130	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
131	131		</a>
132		-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
	132	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
133	133		</a>
134	134		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
135	135		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>


@@ -124,12 +124,12 @@
124		</span>	124		</span>
125		<details class="menu vmenu">	125		<details class="menu vmenu">
126		<summary class="btn" aria-label="Diff view">	126		<summary class="btn" aria-label="Diff view">
127	-	<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>	127	+	<span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">Unified</span>
128		</summary>	128		</summary>
129		<div class="menu-pop" role="group" aria-label="Diff view">	129		<div class="menu-pop" role="group" aria-label="Diff view">
130	-	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>	130	+	<a href="/diffs/commit/SHA40?view=unified" class="btn vbtn" data-view="unified" aria-keyshortcuts="u" aria-current="true" data-fire="unified" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Unified<kbd aria-hidden="true">u</kbd>
131		</a>	131		</a>
132	-	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" data-fire="split" :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>	132	+	<a href="/diffs/commit/SHA40?view=split" class="btn vbtn" data-view="split" aria-keyshortcuts="d" :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false" :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'" data-fire="split" :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false">Split<kbd aria-hidden="true">d</kbd>
133		</a>	133		</a>
134		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">	134		<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
135		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>	135		<span hx-live="this.textContent = q('[data-file][open]').count \|\| !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span>

M internal/app/web_mr_test.go +1 -1


@@ -335,7 +335,7 @@ func TestWebMergeRequestReviewAndFastForward(t *testing.T) {
335	335		all := b.get(base, as(token))
336	336		assert.Contains(t, all.body, `href="/proj/merge-requests/1/since"`)
337	337		assert.Contains(t, all.body, "since your last read")
338		-	assert.Contains(t, all.body, "<li data-new>", "the commit pushed since is marked")
	338	+	assert.Contains(t, all.body, "<tr data-new>", "the commit pushed since is marked")
339	339		assert.Contains(t, all.body, "data-read>Mark read")
340	340		assert.Contains(t, all.body, "outdated", "the notes were written on the earlier head")
341	341		since := b.get(base+"/since", as(token))


@@ -335,7 +335,7 @@ func TestWebMergeRequestReviewAndFastForward(t *testing.T) {
335		all := b.get(base, as(token))	335		all := b.get(base, as(token))
336		assert.Contains(t, all.body, `href="/proj/merge-requests/1/since"`)	336		assert.Contains(t, all.body, `href="/proj/merge-requests/1/since"`)
337		assert.Contains(t, all.body, "since your last read")	337		assert.Contains(t, all.body, "since your last read")
338	-	assert.Contains(t, all.body, "<li data-new>", "the commit pushed since is marked")	338	+	assert.Contains(t, all.body, "<tr data-new>", "the commit pushed since is marked")
339		assert.Contains(t, all.body, "data-read>Mark read")	339		assert.Contains(t, all.body, "data-read>Mark read")
340		assert.Contains(t, all.body, "outdated", "the notes were written on the earlier head")	340		assert.Contains(t, all.body, "outdated", "the notes were written on the earlier head")
341		since := b.get(base+"/since", as(token))	341		since := b.get(base+"/since", as(token))