feat collapsible diff files and hunks in commit view

Use <details open>/<summary> for both the per-file diff section and each individual hunk. Clicking the file header or hunk header collapses/expands its content. No JavaScript required. Hide the default disclosure marker with list-style: none and ::marker/::webkit-details-marker overrides for a clean appearance.

Commit
fb9f79eb7a93eef47efa4ec425f0cb1bfaddf17a
Author
GPT-5.6 Sol <kiro@amazon.com>
Author date
Committer
Marius Peter <dev@marius-peter.com>
Committer date
Changed files
lib/static/styles.css
index 81671e00..b274fa24 100644..100644
@@ -424,6 +424,10 @@
424 424 overflow-x: auto;
425 425 }
426 426
427 Added: .diff-hunk {
428 Added: border-top: 1px solid #3a3a3a;
429 Added: }
430 Added:
427 431 .diff-file-header,
428 432 .diff-meta,
429 433 .hunk-header {
@@ -434,8 +438,18 @@
434 438
435 439 .diff-file-header {
436 440 background: #242424;
441 Added: cursor: pointer;
442 Added: list-style: none;
437 443 }
438 444
445 Added: .diff-file-header::-webkit-details-marker {
446 Added: display: none;
447 Added: }
448 Added:
449 Added: .diff-file-header::marker {
450 Added: content: "";
451 Added: }
452 Added:
439 453 .diff-meta {
440 454 color: #b0b0b0;
441 455 border-top: 1px solid #3a3a3a;
@@ -444,6 +458,16 @@
444 458 .hunk-header {
445 459 color: #b7c9ff;
446 460 background: #252535;
461 Added: cursor: pointer;
462 Added: list-style: none;
463 Added: }
464 Added:
465 Added: .hunk-header::-webkit-details-marker {
466 Added: display: none;
467 Added: }
468 Added:
469 Added: .hunk-header::marker {
470 Added: content: "";
447 471 }
448 472
449 473 .diff-line {
lib/views/repo.ml
index ad887e0a..282f0bf5 100644..100644
@@ -232,13 +232,15 @@
232 232 let hunk (hunk : Resolvers.Diff.hunk) =
233 233 HTML.
234 234 [
235 Removed: div
236 Removed: [ class_ "hunk-header" ]
237 Removed: [
238 Removed: txt "@@ -%d,%d +%d,%d @@" hunk.old_start hunk.old_count
239 Removed: hunk.new_start hunk.new_count;
240 Removed: ];
241 Removed: null (List.map line hunk.lines);
235 Added: details
236 Added: [ class_ "diff-hunk"; open_ ]
237 Added: (summary
238 Added: [ class_ "hunk-header" ]
239 Added: [
240 Added: txt "@@ -%d,%d +%d,%d @@" hunk.old_start hunk.old_count
241 Added: hunk.new_start hunk.new_count;
242 Added: ]
243 Added: :: List.map line hunk.lines);
242 244 ]
243 245 in
244 246 let mode = function
@@ -256,9 +258,9 @@
256 258 else List.concat_map hunk file.hunks
257 259 in
258 260 HTML.(
259 Removed: section
260 Removed: [ class_ "diff-file" ]
261 Removed: (h4 [ class_ "diff-file-header" ] [ txt "%s" file.path ]
261 Added: details
262 Added: [ class_ "diff-file"; open_ ]
263 Added: (summary [ class_ "diff-file-header" ] [ txt "%s" file.path ]
262 264 :: div
263 265 [ class_ "diff-meta" ]
264 266 [