appview/pages: rework the PR page entirely #973

the new 3-panel layout puts the diff upfront, and the review panel off to the right. on mobile devices, the review panel is a collapsible bottom-sheet, and on desktop, it is a collapsible side-panel. it is now possible to comment on a PR while viewing its diff.

all the JS on the page is entirely optional and simply added for quality-of-life (such as auto-collapsing the bottomsheet on mobile etc.).

in the review panel, submissions are listed with a top-level entry, and comments on each submission are "reply" entries. the top-level submission header includes the following information:

commit messages and bodies (if available, on patch PRs this is omitted)
pipeline status (if avaiable, only for PRs that have triggered CI)
mergability (if available, this is calculated only for the latest submission)

the actual merge status (merged/closed/deleted) of the PR is listed above the pull-action bar. previous designs combined the mergability check and the merge-status into one component.

Signed-off-by: oppiliappan me@oppi.li

+6 -4

1 changed file

Interdiff #0 → #1

expand all

unified split

appview

pages

templates

repo

pulls

pull.html

+6 -4

appview/pages/templates/repo/pulls/pull.html

··· 181 181 margin-left: 0; 182 182 } 183 183 #subsToggle:checked ~ div label[for="subsToggle"] .show-toggle { display: none; } 184 - #subsToggle:checked ~ div label[for="subsToggle"] .hide-toggle { display: inline; } 184 + #subsToggle:checked ~ div label[for="subsToggle"] .hide-toggle { display: flex; } 185 185 #subsToggle:not(:checked) ~ div label[for="subsToggle"] .hide-toggle { display: none; } 186 186 187 187 /* Desktop: 25vw with left margin */ ··· 198 198 } 199 199 } 200 200 </style> 201 - <label title="Toggle review panel" for="subsToggle" class="hidden md:inline-flex items-center justify-center rounded cursor-pointer p-2"> 201 + <label title="Toggle review panel" for="subsToggle" class="hidden md:flex items-center justify-end rounded cursor-pointer"> 202 202 <span class="show-toggle">{{ i "message-square-more" "size-4" }}</span> 203 - <span class="hide-toggle">{{ i "message-square" "size-4" }}</span> 203 + <span class="hide-toggle w-[25vw] flex justify-end">{{ i "message-square" "size-4" }}</span> 204 204 </label> 205 205 {{ end }} 206 206 ··· 284 284 </a> 285 285 </span> 286 286 <div class="flex gap-2 items-center"> 287 + {{ if ne $root.ActiveRound $round }} 287 288 <a class="btn-flat flex items-center gap-2 no-underline hover:no-underline text-sm" 288 289 href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ $round }}?{{ safeUrl $root.DiffOpts.Encode }}"> 289 290 {{ i "diff" "w-4 h-4" }} 290 291 diff 291 292 </a> 293 + {{ end }} 292 294 {{ if ne $idx 0 }} 293 295 <a class="btn-flat flex items-center gap-2 no-underline hover:no-underline text-sm" 294 296 href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ $round }}/interdiff?{{ safeUrl $root.DiffOpts.Encode }}"> ··· 395 397 </li> 396 398 {{ else if .Reason }} 397 399 <li class="flex items-center whitespace-nowrap"> 398 - {{ i "file-warning" "w-4 h-4 mr-1.5 text-red-500 dark:text-red-300" }} 400 + {{ i "file-warning" "w-4 h-4 mr-1.5 text-red-600 dark:text-red-500 " }} 399 401 <span>{{.Reason}}</span> 400 402 </li> 401 403 {{ end }}