alice.pds.demo.boltless.dev
This repository has no description
1{{ define "repo/pulls/fragments/pullStepReview" }}
2 {{ $root := . }}
3 {{ $params := .StepReviewParams }}
4 <section class="flex flex-col gap-3">
5 {{ if not $params }}
6 <div class="p-4 border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-800/30 text-sm text-gray-600 dark:text-gray-400">
7 {{ if eq $root.Source "patch" }}
8 Paste a patch above to see a comparison.
9 {{ else }}
10 Pick a source and target above to see a comparison.
11 {{ end }}
12 </div>
13 {{ else if eq .Source "patch" }}
14 <!-- TODO: implement patch based PR -->
15 {{ else }}
16 {{ if $params.Commits }}
17 {{ $commits := $params.Commits }}
18 <div class="flex flex-col gap-2">
19 <div class="flex items-center justify-between gap-3 min-w-0 text-sm text-gray-500 dark:text-gray-400">
20 <span class="flex-shrink-0">{{ len $commits }} commit{{ if ne (len $commits) 1 }}s{{ end }}</span>
21 {{ if and $root.SourceBranch $root.TargetBranch }}
22 <span class="inline-flex items-center gap-2 font-mono text-gray-600 dark:text-gray-300 truncate">
23 <span>{{ $root.TargetBranch }}</span>
24 {{ i "arrow-left-right" "w-4 h-4 flex-shrink-0" }}
25 <span>{{ $root.SourceBranch }}</span>
26 </span>
27 {{ end }}
28 </div>
29 {{ template "pullReviewCommits" (list $root.SourceRepo $params.Commits) }}
30 </div>
31
32 <!-- query diff on load -->
33 <div class="w-full relative min-w-0">
34 <div
35 id="diff-area"
36 hx-get="/{{ $root.SourceRepo }}/pulls/_/composediff?baseRepo={{ $root.RepoInfo.RepoDid }}&base={{ $root.TargetBranch }}&headRepo={{ $root.SourceRepo }}&head={{ $root.SourceBranch }}&view=unified"
37 hx-target="this"
38 hx-swap="outerHTML"
39 hx-trigger="load"
40 >
41 Loading...
42 </div>
43 </div>
44 {{ else }}
45 <div class="p-4 border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-800/30 text-sm text-gray-600 dark:text-gray-400">
46 {{ if and .SourceBranch .TargetBranch (eq .SourceBranch .TargetBranch) }}
47 Source and target are the same branch, nothing to merge.
48 {{ else }}
49 No commits between target and source. Make sure your source branch has commits not on the target.
50 {{ end }}
51 </div>
52 {{ end }}
53 {{ end }}
54 </section>
55{{ end }}
56
57{{ define "pullReviewCommits" }}
58 {{ $sourceRepo := index . 0 }}
59 {{ $commits := index . 1 }}
60 <ul class="flex flex-col gap-2">
61 {{ range $commits }}
62 {{- $messageParts := splitN .Message "\n\n" 2 -}}
63 {{- $title := index $messageParts 0 -}}
64 <li class="border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800 px-3 py-2 flex items-center gap-3">
65 <span class="text-gray-700 dark:text-gray-300 flex-shrink-0">
66 {{ i "git-commit-vertical" "size-4" }}
67 </span>
68 <span class="flex-1 min-w-0 truncate text-sm dark:text-gray-200">{{ $title }}</span>
69 <span class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
70 {{ if not .Author.When.IsZero }}
71 {{ template "repo/fragments/shortTimeAgo" .Author.When }}
72 {{ end }}
73 <span class="font-mono bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 px-2 py-0.5 rounded">{{ slice .Hash.String 0 8 }}</span>
74 </span>
75 <span class="-my-2 self-stretch w-px bg-gray-200 dark:bg-gray-700"></span>
76 <span class="flex items-center gap-1 text-gray-700 dark:text-gray-300 flex-shrink-0">
77 <button type="button"
78 class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-gray-300"
79 title="Copy SHA"
80 onclick='event.preventDefault(); event.stopPropagation(); navigator.clipboard.writeText(`{{ .Hash.String }}`); this.innerHTML=`{{ i "copy-check" "size-4" }}`; setTimeout(() => this.innerHTML=`{{ i "copy" "size-4" }}`, 1500)'>
81 {{ i "copy" "size-4" }}
82 </button>
83 <a href="/{{ $sourceRepo }}/tree/{{ .Hash.String }}"
84 onclick="event.stopPropagation()"
85 class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-gray-300"
86 title="Browse repository at this commit">
87 {{ i "folder-code" "size-4" }}
88 </a>
89 </span>
90 </li>
91 {{ end }}
92 </ul>
93{{ end }}
94
95{{ define "pullComposeFlatDiff" }}
96 {{ $diff := index . 0 }}
97 {{ $opts := index . 1 }}
98 {{ $files := $diff.ChangedFiles }}
99 {{ $isSplit := $opts.Split }}
100 {{ $count := len $files }}
101 {{ $stat := $diff.Stats }}
102
103 <style>
104 #composeFilesToggle:checked ~ * label[for="composeFilesToggle"] .show-text { display: none; }
105 #composeFilesToggle:checked ~ * label[for="composeFilesToggle"] .hide-text { display: inline; }
106 #composeFilesToggle:not(:checked) ~ * label[for="composeFilesToggle"] .hide-text { display: none; }
107 #composeFilesToggle:checked ~ * div#composeFiles { width: fit-content; max-width: 15vw; }
108 #composeFilesToggle:not(:checked) ~ * div#composeFiles { width: 0; display: none; margin-right: 0; }
109 </style>
110
111 <input type="checkbox" id="composeFilesToggle" class="hidden"/>
112
113 <div id="diff-area">
114 <div class="bg-slate-100 dark:bg-gray-700/50 flex items-center gap-2 h-12 p-2 rounded-t-md border border-b-0 border-gray-200 dark:border-gray-700">
115 <label title="Toggle filetree panel" for="composeFilesToggle" class="hidden md:inline-flex items-center justify-center rounded cursor-pointer text-normal font-normal normal-case">
116 <span class="show-text">{{ i "panel-left-open" "size-4" }}</span>
117 <span class="hide-text">{{ i "panel-left-close" "size-4" }}</span>
118 </label>
119
120 {{ template "repo/fragments/diffStatPill" $stat }}
121 <span class="text-xs text-gray-600 dark:text-gray-300 hidden md:inline-flex">{{ $count }} changed file{{ if ne $count 1 }}s{{ end }}</span>
122
123 <div class="flex-grow"></div>
124
125 <label title="Expand/Collapse diffs" for="composeCollapseToggle" class="btn font-normal normal-case">
126 <input type="checkbox" id="composeCollapseToggle" class="peer/collapse hidden"/>
127 <span class="peer-checked/collapse:hidden inline-flex items-center gap-2">
128 {{ i "unfold-vertical" "w-4 h-4" }}
129 <span class="hidden md:inline">Expand all</span>
130 </span>
131 <span class="peer-checked/collapse:inline-flex hidden flex items-center gap-2">
132 {{ i "fold-vertical" "w-4 h-4" }}
133 <span class="hidden md:inline">Collapse all</span>
134 </span>
135 </label>
136
137 {{ template "repo/fragments/diffOpts" $opts }}
138 </div>
139
140 <div class="flex border border-gray-200 dark:border-gray-700 rounded-b-md">
141 <div id="composeFiles" class="hidden md:block overflow-hidden max-h-[60vh] overflow-y-auto border-r border-gray-200 dark:border-gray-700">
142 <section class="overflow-x-auto text-sm px-3 py-2 w-full mx-auto">
143 {{ template "repo/fragments/fileTree" $diff.FileTree }}
144 </section>
145 </div>
146
147 <div class="flex-1 min-w-0 p-2">
148 <div class="flex flex-col gap-2">
149 {{ if eq $count 0 }}
150 <div class="text-center text-gray-500 dark:text-gray-400 py-8">
151 <p>No differences found.</p>
152 </div>
153 {{ else if le $count 5 }}
154 {{ range $idx, $file := $files }}
155 {{ template "diffFile" (list $idx $file $isSplit true) }}
156 {{ end }}
157 {{ else }}
158 {{ range $idx, $file := slice $files 0 5 }}
159 {{ template "diffFile" (list $idx $file $isSplit true) }}
160 {{ end }}
161 {{ $remaining := sub $count 5 }}
162 <details class="group/showmore">
163 <summary class="cursor-pointer text-sm text-gray-700 dark:text-gray-300 py-2 px-1 flex items-center gap-2 select-none hover:text-gray-900 dark:hover:text-gray-100 list-none">
164 <span class="group-open/showmore:hidden inline-flex items-center gap-2">
165 {{ i "chevron-right" "w-4 h-4" }}
166 Show {{ $remaining }} more file{{ if ne $remaining 1 }}s{{ end }}
167 </span>
168 <span class="hidden group-open/showmore:inline-flex items-center gap-2">
169 {{ i "chevron-down" "w-4 h-4" }}
170 Hide {{ $remaining }} file{{ if ne $remaining 1 }}s{{ end }}
171 </span>
172 </summary>
173 <div class="flex flex-col gap-2 mt-2">
174 {{ range $idx, $file := slice $files 5 }}
175 {{ template "diffFile" (list (add $idx 5) $file $isSplit true) }}
176 {{ end }}
177 </div>
178 </details>
179 {{ end }}
180 </div>
181 </div>
182 </div>
183 </div>
184
185 <script>
186 (() => {
187 const checkbox = document.getElementById('composeCollapseToggle');
188 const diffArea = document.getElementById('diff-area');
189 if (!checkbox || !diffArea) return;
190 const all = () => diffArea.querySelectorAll('details[id^="file-"]');
191 checkbox.addEventListener('change', () => {
192 all().forEach(d => { d.open = checkbox.checked; });
193 });
194 diffArea.addEventListener('toggle', (e) => {
195 if (!e.target.matches('details[id^="file-"]')) return;
196 const dets = Array.from(all());
197 const allOpen = dets.every(d => d.open);
198 const allClosed = dets.every(d => !d.open);
199 if (allOpen) checkbox.checked = true;
200 else if (allClosed) checkbox.checked = false;
201 }, true);
202 })();
203 </script>
204{{ end }}