detached 502935e

refactor(web): drop the Wide button of the diff bar, the w shortcut covers it

commit
502935e68076ff7827c55e701bded5ded639fed4
author
brice · · 2026-10-19 15:17 UTC
committer
brice · · 2026-10-19 15:17 UTC
parent
a1f8e85
signature
GPG VerifiedCD88F9E564E0102646FB6077A1A07C7C7C3E349D · arch-gpg Verified for the committer email
5 files · +467 -522
Unified
UnifiedSplit
M internal/adapters/web/diff.templ +0 -9
@@ -73,7 +73,6 @@ templ Commit(l Layout, p CommitPage) {
7373 <span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>
7474 <span class="grow"></span>
7575 @diffViewMenu(p.DiffView)
76- @wideButton()
7776 </div>
7877 if p.Invisible {
7978 <p class="notice">
@@ -131,14 +130,6 @@ templ diffViewMenu(p DiffView) {
131130 </details>
132131 }
133132
134-// wideButton turns the wide mode (w, on every page) on or off: the rail goes
135-// to the right edge and the code takes the rest. ermite.js keeps the choice.
136-templ wideButton() {
137- <button type="button" class="btn" data-js data-fire="wide" data-wide-toggle aria-pressed="false" aria-keyshortcuts="w" title="use the whole width of the screen">
138- Wide<kbd aria-hidden="true">w</kbd>
139- </button>
140-}
141-
142133 // viewLink is a button of the diff tools. It is a link, so that the split
143134 // layout works without JavaScript; with it, and when both layouts are in the
144135 // page, a click only flips the layout.
@@ -73,7 +73,6 @@ templ Commit(l Layout, p CommitPage) {
73 <span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>73 <span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>
74 <span class="grow"></span>74 <span class="grow"></span>
75 @diffViewMenu(p.DiffView)75 @diffViewMenu(p.DiffView)
76- @wideButton()
77 </div>76 </div>
78 if p.Invisible {77 if p.Invisible {
79 <p class="notice">78 <p class="notice">
@@ -131,14 +130,6 @@ templ diffViewMenu(p DiffView) {
131 </details>130 </details>
132 }131 }
133 132
134-// wideButton turns the wide mode (w, on every page) on or off: the rail goes
135-// to the right edge and the code takes the rest. ermite.js keeps the choice.
136-templ wideButton() {
137- <button type="button" class="btn" data-js data-fire="wide" data-wide-toggle aria-pressed="false" aria-keyshortcuts="w" title="use the whole width of the screen">
138- Wide<kbd aria-hidden="true">w</kbd>
139- </button>
140-}
141-
142 // viewLink is a button of the diff tools. It is a link, so that the split133 // viewLink is a button of the diff tools. It is a link, so that the split
143 // layout works without JavaScript; with it, and when both layouts are in the134 // layout works without JavaScript; with it, and when both layouts are in the
144 // page, a click only flips the layout.135 // page, a click only flips the layout.
M internal/adapters/web/diff_templ.go +423 -458 generated file: collapsed
load diff
M internal/adapters/web/mr.templ +0 -2
@@ -434,7 +434,6 @@ templ mrBar(p MRPage) {
434434 <div class="diff-tools mr-bar" role="group" aria-label="Diff view and merge">
435435 <span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>
436436 @diffViewMenu(p.DiffView)
437- @wideButton()
438437 <span class="grow"></span>
439438 @MRChecksSum(p.ChecksSum)
440439 if p.Box != nil {
@@ -564,7 +563,6 @@ templ Compare(l Layout, p ComparePage) {
564563 <span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>
565564 <span class="grow"></span>
566565 @diffViewMenu(p.DiffView)
567- @wideButton()
568566 </div>
569567 if p.Invisible {
570568 <p class="notice">
@@ -434,7 +434,6 @@ templ mrBar(p MRPage) {
434 <div class="diff-tools mr-bar" role="group" aria-label="Diff view and merge">434 <div class="diff-tools mr-bar" role="group" aria-label="Diff view and merge">
435 <span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>435 <span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>
436 @diffViewMenu(p.DiffView)436 @diffViewMenu(p.DiffView)
437- @wideButton()
438 <span class="grow"></span>437 <span class="grow"></span>
439 @MRChecksSum(p.ChecksSum)438 @MRChecksSum(p.ChecksSum)
440 if p.Box != nil {439 if p.Box != nil {
@@ -564,7 +563,6 @@ templ Compare(l Layout, p ComparePage) {
564 <span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>563 <span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>
565 <span class="grow"></span>564 <span class="grow"></span>
566 @diffViewMenu(p.DiffView)565 @diffViewMenu(p.DiffView)
567- @wideButton()
568 </div>566 </div>
569 if p.Invisible {567 if p.Invisible {
570 <p class="notice">568 <p class="notice">
M internal/adapters/web/mr_templ.go +42 -50 generated file: collapsed
load diff
M internal/adapters/web/static/js/ermite.js +2 -3
@@ -557,14 +557,13 @@
557557 // The wide mode (w, on every page): the work area takes the whole width of
558558 // the screen, the rail at the right edge and the content in the rest.
559559 // The choice is kept by ermiteStore ("wide": '1' when wide) and shown
560- // as html.wide, which the styles follow, and as aria-pressed on the
561- // buttons [data-wide-toggle]. Another tab's change applies here at once.
560+ // as html.wide, which the styles follow. Another tab's change applies here
561+ // at once.
562562 window.ermiteWide = (() => {
563563 const pref = window.ermiteStore.pref('wide', { values: ['1', ''], fallback: '' });
564564 function apply() {
565565 const wide = pref.get() === '1';
566566 document.documentElement.classList.toggle?.('wide', wide);
567- for (const b of document.querySelectorAll('[data-wide-toggle]')) b.setAttribute('aria-pressed', String(wide));
568567 }
569568 function toggle() {
570569 pref.set(pref.get() === '1' ? '' : '1');
@@ -557,14 +557,13 @@
557 // The wide mode (w, on every page): the work area takes the whole width of557 // The wide mode (w, on every page): the work area takes the whole width of
558 // the screen, the rail at the right edge and the content in the rest.558 // the screen, the rail at the right edge and the content in the rest.
559 // The choice is kept by ermiteStore ("wide": '1' when wide) and shown559 // The choice is kept by ermiteStore ("wide": '1' when wide) and shown
560- // as html.wide, which the styles follow, and as aria-pressed on the560+ // as html.wide, which the styles follow. Another tab's change applies here
561- // buttons [data-wide-toggle]. Another tab's change applies here at once.561+ // at once.
562 window.ermiteWide = (() => {562 window.ermiteWide = (() => {
563 const pref = window.ermiteStore.pref('wide', { values: ['1', ''], fallback: '' });563 const pref = window.ermiteStore.pref('wide', { values: ['1', ''], fallback: '' });
564 function apply() {564 function apply() {
565 const wide = pref.get() === '1';565 const wide = pref.get() === '1';
566 document.documentElement.classList.toggle?.('wide', wide);566 document.documentElement.classList.toggle?.('wide', wide);
567- for (const b of document.querySelectorAll('[data-wide-toggle]')) b.setAttribute('aria-pressed', String(wide));
568 }567 }
569 function toggle() {568 function toggle() {
570 pref.set(pref.get() === '1' ? '' : '1');569 pref.set(pref.get() === '1' ? '' : '1');

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
esc
close a dialog, leave a field

Branches 2

Tags 44

↑↓ moveenter openesc close