Monorepo for Tangled
appview/pages: unify diff & interdiff templates
any object that adheres to the DiffRenderer interface can now be
presented as html using the repo/fragments/diff template.
authored by
oppiliappan
and committed by
tangled.org
(Jan 17, 2026, 2:45 PM UTC)
d7c6aa99
d33579d7
+170
-194
+1
-18
appview/pages/templates/repo/commit.html
+1
-18
appview/pages/templates/repo/commit.html
···
116
116
{{ block "content" . }}{{ end }}
117
117
{{ end }}
118
118
119
-
{{ block "contentAfterLayout" . }}
120
-
<div class="flex-grow grid grid-cols-1 md:grid-cols-12 gap-4">
121
-
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
122
-
{{ block "contentAfterLeft" . }} {{ end }}
123
-
</div>
124
-
<main class="col-span-1 md:col-span-10">
125
-
{{ block "contentAfter" . }}{{ end }}
126
-
</main>
127
-
</div>
128
-
{{ end }}
119
+
{{ block "contentAfter" . }}{{ end }}
129
120
</div>
130
121
{{ end }}
131
122
···
139
130
{{ template "repo/fragments/diff" (list .Diff .DiffOpts) }}
140
131
{{end}}
141
132
142
-
{{ define "contentAfterLeft" }}
143
-
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
144
-
{{ template "repo/fragments/diffOpts" .DiffOpts }}
145
-
</div>
146
-
<div class="sticky top-0 flex-grow max-h-screen overflow-y-auto">
147
-
{{ template "repo/fragments/diffChangedFiles" .Diff }}
148
-
</div>
149
-
{{end}}
+1
-19
appview/pages/templates/repo/compare/compare.html
+1
-19
appview/pages/templates/repo/compare/compare.html
···
22
22
{{ block "content" . }}{{ end }}
23
23
{{ end }}
24
24
25
-
{{ block "contentAfterLayout" . }}
26
-
<div class="flex-grow grid grid-cols-1 md:grid-cols-12 gap-4">
27
-
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
28
-
{{ block "contentAfterLeft" . }} {{ end }}
29
-
</div>
30
-
<main class="col-span-1 md:col-span-10">
31
-
{{ block "contentAfter" . }}{{ end }}
32
-
</main>
33
-
</div>
34
-
{{ end }}
25
+
{{ block "contentAfter" . }}{{ end }}
35
26
</div>
36
27
{{ end }}
37
28
···
44
35
{{ define "contentAfter" }}
45
36
{{ template "repo/fragments/diff" (list .Diff .DiffOpts) }}
46
37
{{end}}
47
-
48
-
{{ define "contentAfterLeft" }}
49
-
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
50
-
{{ template "repo/fragments/diffOpts" .DiffOpts }}
51
-
</div>
52
-
<div class="sticky top-0 flex-grow max-h-screen overflow-y-auto">
53
-
{{ template "repo/fragments/diffChangedFiles" .Diff }}
54
-
</div>
55
-
{{end}}
+164
-43
appview/pages/templates/repo/fragments/diff.html
+164
-43
appview/pages/templates/repo/fragments/diff.html
···
1
1
{{ define "repo/fragments/diff" }}
2
+
<style>
3
+
#filesToggle:checked ~ div label[for="filesToggle"] .show-text { display: none; }
4
+
#filesToggle:checked ~ div label[for="filesToggle"] .hide-text { display: inline; }
5
+
#filesToggle:not(:checked) ~ div label[for="filesToggle"] .hide-text { display: none; }
6
+
#filesToggle:checked ~ div div#files { width: fit-content; max-width: 15vw; margin-right: 1rem; }
7
+
#filesToggle:not(:checked) ~ div div#files { width: 0; display: hidden; margin-right: 0; }
8
+
</style>
9
+
10
+
{{ template "diffTopbar" . }}
11
+
{{ block "diffLayout" . }} {{ end }}
12
+
{{ end }}
13
+
14
+
{{ define "diffTopbar" }}
2
15
{{ $diff := index . 0 }}
3
16
{{ $opts := index . 1 }}
4
17
5
-
{{ $commit := $diff.Commit }}
6
-
{{ $diff := $diff.Diff }}
7
-
{{ $isSplit := $opts.Split }}
8
-
{{ $this := $commit.This }}
9
-
{{ $parent := $commit.Parent }}
10
-
{{ $last := sub (len $diff) 1 }}
18
+
{{ block "filesCheckbox" $ }} {{ end }}
19
+
{{ block "subsCheckbox" $ }} {{ end }}
20
+
21
+
<!-- top bar -->
22
+
<div class="sticky top-0 z-30 bg-slate-100 dark:bg-gray-900 flex items-center gap-2 col-span-full h-12 p-2">
23
+
<!-- left panel toggle -->
24
+
{{ template "filesToggle" . }}
11
25
26
+
<!-- stats -->
27
+
{{ $stat := $diff.Stats }}
28
+
{{ $count := len $diff.ChangedFiles }}
29
+
{{ template "repo/fragments/diffStatPill" $stat }}
30
+
{{ $count }} changed file{{ if ne $count 1 }}s{{ end }}
31
+
32
+
<!-- spacer -->
33
+
<div class="flex-grow"></div>
34
+
35
+
<!-- collapse diffs -->
36
+
{{ template "collapseToggle" }}
37
+
38
+
<!-- diff options -->
39
+
{{ template "repo/fragments/diffOpts" $opts }}
40
+
41
+
<!-- right panel toggle -->
42
+
{{ block "subsToggle" $ }} {{ end }}
43
+
</div>
44
+
45
+
{{ end }}
46
+
47
+
{{ define "diffLayout" }}
48
+
{{ $diff := index . 0 }}
49
+
{{ $opts := index . 1 }}
50
+
51
+
<div class="flex col-span-full flex-grow">
52
+
<!-- left panel -->
53
+
<div id="files" class="w-0 hidden md:block overflow-hidden sticky top-12 max-h-screen overflow-y-auto pb-12">
54
+
<section class="overflow-x-auto text-sm px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto min-h-full rounded bg-white dark:bg-gray-800 drop-shadow-sm">
55
+
{{ template "repo/fragments/fileTree" $diff.FileTree }}
56
+
</section>
57
+
</div>
58
+
59
+
<!-- main content -->
60
+
<div class="flex-1 min-w-0 sticky top-12 pb-12">
61
+
{{ template "diffFiles" (list $diff $opts) }}
62
+
</div>
63
+
64
+
</div>
65
+
{{ end }}
66
+
67
+
{{ define "diffFiles" }}
68
+
{{ $diff := index . 0 }}
69
+
{{ $opts := index . 1 }}
70
+
{{ $files := $diff.ChangedFiles }}
71
+
{{ $isSplit := $opts.Split }}
12
72
<div class="flex flex-col gap-4">
13
-
{{ if eq (len $diff) 0 }}
73
+
{{ if eq (len $files) 0 }}
14
74
<div class="text-center text-gray-500 dark:text-gray-400 py-8">
15
75
<p>No differences found between the selected revisions.</p>
16
76
</div>
17
77
{{ else }}
18
-
{{ range $idx, $hunk := $diff }}
19
-
{{ with $hunk }}
20
-
<details open id="file-{{ .Id }}" class="group border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm" tabindex="{{ add $idx 1 }}">
21
-
<summary class="list-none cursor-pointer sticky top-0">
22
-
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
23
-
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
24
-
<span class="group-open:hidden inline">{{ i "chevron-right" "w-4 h-4" }}</span>
25
-
<span class="hidden group-open:inline">{{ i "chevron-down" "w-4 h-4" }}</span>
26
-
{{ template "repo/fragments/diffStatPill" .Stats }}
78
+
{{ range $idx, $file := $files }}
79
+
{{ template "diffFile" (list $idx $file $isSplit) }}
80
+
{{ end }}
81
+
{{ end }}
82
+
</div>
83
+
{{ end }}
27
84
28
-
<div class="flex gap-2 items-center overflow-x-auto">
29
-
{{ if .IsDelete }}
30
-
{{ .Name.Old }}
31
-
{{ else if (or .IsCopy .IsRename) }}
32
-
{{ .Name.Old }} {{ i "arrow-right" "w-4 h-4" }} {{ .Name.New }}
33
-
{{ else }}
34
-
{{ .Name.New }}
35
-
{{ end }}
36
-
</div>
37
-
</div>
38
-
</div>
39
-
</summary>
85
+
{{ define "diffFile" }}
86
+
{{ $idx := index . 0 }}
87
+
{{ $file := index . 1 }}
88
+
{{ $isSplit := index . 2 }}
89
+
{{ with $file }}
90
+
<details open id="file-{{ .Id }}" class="group border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm" tabindex="{{ add $idx 1 }}">
91
+
<summary class="list-none cursor-pointer sticky top-12 group-open:border-b border-gray-200 dark:border-gray-700">
92
+
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
93
+
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
94
+
<span class="group-open:hidden inline">{{ i "chevron-right" "w-4 h-4" }}</span>
95
+
<span class="hidden group-open:inline">{{ i "chevron-down" "w-4 h-4" }}</span>
96
+
{{ template "repo/fragments/diffStatPill" .Stats }}
40
97
41
-
<div class="transition-all duration-700 ease-in-out">
42
-
{{ if .IsBinary }}
43
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
44
-
This is a binary file and will not be displayed.
45
-
</p>
46
-
{{ else }}
47
-
{{ if $isSplit }}
48
-
{{- template "repo/fragments/splitDiff" .Split -}}
98
+
<div class="flex gap-2 items-center overflow-x-auto">
99
+
{{ $n := .Names }}
100
+
{{ if and $n.New $n.Old (ne $n.New $n.Old)}}
101
+
{{ $n.Old }} {{ i "arrow-right" "w-4 h-4" }} {{ $n.New }}
102
+
{{ else if $n.New }}
103
+
{{ $n.New }}
49
104
{{ else }}
50
-
{{- template "repo/fragments/unifiedDiff" . -}}
105
+
{{ $n.Old }}
51
106
{{ end }}
52
-
{{- end -}}
107
+
</div>
53
108
</div>
54
-
</details>
55
-
{{ end }}
56
-
{{ end }}
57
-
{{ end }}
58
-
</div>
109
+
</div>
110
+
</summary>
111
+
112
+
<div class="transition-all duration-700 ease-in-out">
113
+
{{ $reason := .CanRender }}
114
+
{{ if $reason }}
115
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">{{ $reason }}</p>
116
+
{{ else }}
117
+
{{ if $isSplit }}
118
+
{{- template "repo/fragments/splitDiff" .Split -}}
119
+
{{ else }}
120
+
{{- template "repo/fragments/unifiedDiff" . -}}
121
+
{{ end }}
122
+
{{- end -}}
123
+
</div>
124
+
</details>
125
+
{{ end }}
126
+
{{ end }}
127
+
128
+
{{ define "filesCheckbox" }}
129
+
<input type="checkbox" id="filesToggle" class="peer/files hidden" checked/>
130
+
{{ end }}
131
+
132
+
{{ define "filesToggle" }}
133
+
<label title="Toggle filetree panel" for="filesToggle" class="hidden md:inline-flex items-center justify-center rounded cursor-pointer text-normal font-normal normalcase">
134
+
<span class="show-text">{{ i "panel-left-open" "size-4" }}</span>
135
+
<span class="hide-text">{{ i "panel-left-close" "size-4" }}</span>
136
+
</label>
137
+
{{ end }}
138
+
139
+
{{ define "collapseToggle" }}
140
+
<label
141
+
title="Expand/Collapse diffs"
142
+
for="collapseToggle"
143
+
class="btn font-normal normal-case p-2"
144
+
>
145
+
<input type="checkbox" id="collapseToggle" class="peer/collapse hidden" checked/>
146
+
<span class="peer-checked/collapse:hidden inline-flex items-center gap-2">
147
+
{{ i "fold-vertical" "w-4 h-4" }}
148
+
<span class="hidden md:inline">expand all</span>
149
+
</span>
150
+
<span class="peer-checked/collapse:inline-flex hidden flex items-center gap-2">
151
+
{{ i "unfold-vertical" "w-4 h-4" }}
152
+
<span class="hidden md:inline">collapse all</span>
153
+
</span>
154
+
</label>
155
+
<script>
156
+
document.addEventListener('DOMContentLoaded', function() {
157
+
const checkbox = document.getElementById('collapseToggle');
158
+
const details = document.querySelectorAll('details[id^="file-"]');
159
+
160
+
checkbox.addEventListener('change', function() {
161
+
details.forEach(detail => {
162
+
detail.open = checkbox.checked;
163
+
});
164
+
});
165
+
166
+
details.forEach(detail => {
167
+
detail.addEventListener('toggle', function() {
168
+
const allOpen = Array.from(details).every(d => d.open);
169
+
const allClosed = Array.from(details).every(d => !d.open);
170
+
171
+
if (allOpen) {
172
+
checkbox.checked = true;
173
+
} else if (allClosed) {
174
+
checkbox.checked = false;
175
+
}
176
+
});
177
+
});
178
+
});
179
+
</script>
59
180
{{ end }}
-13
appview/pages/templates/repo/fragments/diffChangedFiles.html
-13
appview/pages/templates/repo/fragments/diffChangedFiles.html
···
1
-
{{ define "repo/fragments/diffChangedFiles" }}
2
-
{{ $stat := .Stat }}
3
-
{{ $fileTree := fileTree .ChangedFiles }}
4
-
<section class="overflow-x-auto text-sm px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto min-h-full rounded bg-white dark:bg-gray-800 drop-shadow-sm">
5
-
<div class="diff-stat">
6
-
<div class="flex gap-2 items-center">
7
-
<strong class="text-sm uppercase dark:text-gray-200">Changed files</strong>
8
-
{{ template "repo/fragments/diffStatPill" $stat }}
9
-
</div>
10
-
{{ template "repo/fragments/fileTree" $fileTree }}
11
-
</div>
12
-
</section>
13
-
{{ end }}
-67
appview/pages/templates/repo/fragments/interdiff.html
-67
appview/pages/templates/repo/fragments/interdiff.html
···
1
-
{{ define "repo/fragments/interdiff" }}
2
-
{{ $repo := index . 0 }}
3
-
{{ $x := index . 1 }}
4
-
{{ $opts := index . 2 }}
5
-
{{ $fileTree := fileTree $x.AffectedFiles }}
6
-
{{ $diff := $x.Files }}
7
-
{{ $last := sub (len $diff) 1 }}
8
-
{{ $isSplit := $opts.Split }}
9
-
10
-
<div class="flex flex-col gap-4">
11
-
{{ range $idx, $hunk := $diff }}
12
-
{{ with $hunk }}
13
-
<details {{ if not (.Status.IsOnlyInOne) }}open{{end}} id="file-{{ .Name }}" class="border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
14
-
<summary class="list-none cursor-pointer sticky top-0">
15
-
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
16
-
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
17
-
<div class="flex gap-1 items-center" style="direction: ltr;">
18
-
{{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
19
-
{{ if .Status.IsOk }}
20
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">CHANGED</span>
21
-
{{ else if .Status.IsUnchanged }}
22
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">UNCHANGED</span>
23
-
{{ else if .Status.IsOnlyInOne }}
24
-
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">REVERTED</span>
25
-
{{ else if .Status.IsOnlyInTwo }}
26
-
<span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">NEW</span>
27
-
{{ else if .Status.IsRebased }}
28
-
<span class="bg-amber-100 text-amber-700 dark:bg-amber-800/50 dark:text-amber-400 {{ $markerstyle }}">REBASED</span>
29
-
{{ else }}
30
-
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">ERROR</span>
31
-
{{ end }}
32
-
</div>
33
-
34
-
<div class="flex gap-2 items-center overflow-x-auto" style="direction: rtl;">{{ .Name }}</div>
35
-
</div>
36
-
37
-
</div>
38
-
</summary>
39
-
40
-
<div class="transition-all duration-700 ease-in-out">
41
-
{{ if .Status.IsUnchanged }}
42
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
43
-
This file has not been changed.
44
-
</p>
45
-
{{ else if .Status.IsRebased }}
46
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
47
-
This patch was likely rebased, as context lines do not match.
48
-
</p>
49
-
{{ else if .Status.IsError }}
50
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
51
-
Failed to calculate interdiff for this file.
52
-
</p>
53
-
{{ else }}
54
-
{{ if $isSplit }}
55
-
{{- template "repo/fragments/splitDiff" .Split -}}
56
-
{{ else }}
57
-
{{- template "repo/fragments/unifiedDiff" . -}}
58
-
{{ end }}
59
-
{{- end -}}
60
-
</div>
61
-
62
-
</details>
63
-
{{ end }}
64
-
{{ end }}
65
-
</div>
66
-
{{ end }}
67
-
-11
appview/pages/templates/repo/fragments/interdiffFiles.html
-11
appview/pages/templates/repo/fragments/interdiffFiles.html
···
1
-
{{ define "repo/fragments/interdiffFiles" }}
2
-
{{ $fileTree := fileTree .AffectedFiles }}
3
-
<section class="px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm min-h-full text-sm">
4
-
<div class="diff-stat">
5
-
<div class="flex gap-2 items-center">
6
-
<strong class="text-sm uppercase dark:text-gray-200">files</strong>
7
-
</div>
8
-
{{ template "repo/fragments/fileTree" $fileTree }}
9
-
</div>
10
-
</section>
11
-
{{ end }}
+1
-1
appview/pages/templates/repo/fragments/splitDiff.html
+1
-1
appview/pages/templates/repo/fragments/splitDiff.html
···
3
3
{{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800" -}}
4
4
{{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}}
5
5
{{- $lineNrSepStyle := "pr-2 border-r border-gray-200 dark:border-gray-700" -}}
6
-
{{- $containerStyle := "inline-flex w-full items-center target:border target:rounded-sm target:border-yellow-200 target:dark:border-yellow-700 scroll-mt-20" -}}
6
+
{{- $containerStyle := "inline-flex w-full items-center target:bg-yellow-200 target:dark:bg-yellow-700 scroll-mt-48" -}}
7
7
{{- $emptyStyle := "bg-gray-200/30 dark:bg-gray-700/30" -}}
8
8
{{- $addStyle := "bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400" -}}
9
9
{{- $delStyle := "bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 " -}}
+1
-1
appview/pages/templates/repo/fragments/unifiedDiff.html
+1
-1
appview/pages/templates/repo/fragments/unifiedDiff.html
···
7
7
{{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}}
8
8
{{- $lineNrSepStyle1 := "" -}}
9
9
{{- $lineNrSepStyle2 := "pr-2 border-r border-gray-200 dark:border-gray-700" -}}
10
-
{{- $containerStyle := "inline-flex w-full items-center target:border target:rounded-sm target:border-yellow-200 target:dark:border-yellow-700 scroll-mt-20" -}}
10
+
{{- $containerStyle := "inline-flex w-full items-center target:bg-yellow-200 target:dark:bg-yellow-700 scroll-mt-48" -}}
11
11
{{- $addStyle := "bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 " -}}
12
12
{{- $delStyle := "bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 " -}}
13
13
{{- $ctxStyle := "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400" -}}
+2
-21
appview/pages/templates/repo/pulls/interdiff.html
+2
-21
appview/pages/templates/repo/pulls/interdiff.html
···
25
25
{{ template "repo/pulls/fragments/pullHeader" . }}
26
26
</header>
27
27
</section>
28
-
29
28
{{ end }}
30
29
31
30
{{ define "mainLayout" }}
···
34
33
{{ block "content" . }}{{ end }}
35
34
{{ end }}
36
35
37
-
{{ block "contentAfterLayout" . }}
38
-
<div class="flex-grow grid grid-cols-1 md:grid-cols-12 gap-4">
39
-
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
40
-
{{ block "contentAfterLeft" . }} {{ end }}
41
-
</div>
42
-
<main class="col-span-1 md:col-span-10">
43
-
{{ block "contentAfter" . }}{{ end }}
44
-
</main>
45
-
</div>
46
-
{{ end }}
36
+
{{ block "contentAfter" . }}{{ end }}
47
37
</div>
48
38
{{ end }}
49
39
50
40
{{ define "contentAfter" }}
51
-
{{ template "repo/fragments/interdiff" (list .RepoInfo.FullName .Interdiff .DiffOpts) }}
52
-
{{end}}
53
-
54
-
{{ define "contentAfterLeft" }}
55
-
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
56
-
{{ template "repo/fragments/diffOpts" .DiffOpts }}
57
-
</div>
58
-
<div class="sticky top-0 flex-grow max-h-screen overflow-y-auto">
59
-
{{ template "repo/fragments/interdiffFiles" .Interdiff }}
60
-
</div>
41
+
{{ template "repo/fragments/diff" (list .Interdiff .DiffOpts) }}
61
42
{{end}}