From cf76a5763e994fd2017a6a73269b29dd23d1cee0 Mon Sep 17 00:00:00 2001
From: Lewis <lewis@tangled.org>
Date: Thu, 23 Apr 2026 13:10:37 +0300
Subject: [PATCH] appview/pages: rework label panel and new-pull shell for
 compose

Lewis: May this revision serve well! <lewis@tangled.org>
---
 .../repo/fragments/compareAllowPull.html      |   2 +-
 .../pages/templates/repo/fragments/diff.html  |  11 +-
 .../templates/repo/fragments/diffOpts.html    |  47 ++++--
 .../repo/fragments/editLabelPanel.html        | 148 +++++++++++------
 .../templates/repo/fragments/fileTree.html    |  34 ++--
 .../fragments/labelSectionHeaderText.html     |   2 +-
 appview/pages/templates/repo/pulls/new.html   | 153 +-----------------
 7 files changed, 164 insertions(+), 233 deletions(-)

diff --git a/appview/pages/templates/repo/fragments/compareAllowPull.html b/appview/pages/templates/repo/fragments/compareAllowPull.html
index 870a3a9e..9cdf9374 100644
--- a/appview/pages/templates/repo/fragments/compareAllowPull.html
+++ b/appview/pages/templates/repo/fragments/compareAllowPull.html
@@ -9,7 +9,7 @@
             discussed.
         </p>
 
-        {{ $newPullUrl := printf "/%s/pulls/new?strategy=branch&targetBranch=%s&sourceBranch=%s" .RepoInfo.FullName .Base .Head }}
+        {{ $newPullUrl := printf "/%s/pulls/new?source=branch&sourceBranch=%s&targetBranch=%s" .RepoInfo.FullName (urlquery .Head) (urlquery .Base) }}
 
 
         <div class="flex justify-start items-center gap-2 mt-2">
diff --git a/appview/pages/templates/repo/fragments/diff.html b/appview/pages/templates/repo/fragments/diff.html
index ecc77798..95f56b15 100644
--- a/appview/pages/templates/repo/fragments/diff.html
+++ b/appview/pages/templates/repo/fragments/diff.html
@@ -101,10 +101,11 @@
 {{ define "diffLayout" }}
   {{ $diff := index . 0 }}
   {{ $opts := index . 1 }}
+  {{ $padBottom := gt (len .) 2 }}
 
   <div class="flex col-span-full flex-grow">
     <!-- left panel -->
-    <div id="files" class="w-0 hidden md:block overflow-hidden sticky top-12 max-h-screen overflow-y-auto pb-12">
+    <div id="files" class="w-0 hidden md:block overflow-hidden sticky top-12 max-h-screen overflow-y-auto {{ if $padBottom }}pb-12{{ end }}">
       <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">
         {{ template "repo/fragments/fileTree" $diff.FileTree }}
       </section>
@@ -113,7 +114,7 @@
     {{ template "resize-grip" (list "resize-files" "files" "before") }}
 
     <!-- main content -->
-    <div id="diff-files" class="flex-1 min-w-0 sticky top-12 pb-12">
+    <div id="diff-files" class="flex-1 min-w-0 sticky top-12 {{ if $padBottom }}pb-12{{ end }}">
       {{ template "diffFiles" (list $diff $opts) }}
     </div>
 
@@ -142,6 +143,8 @@
   {{ $idx := index . 0 }}
   {{ $file := index . 1 }}
   {{ $isSplit := index . 2 }}
+  {{ $collapsed := false }}
+  {{ if gt (len .) 3 }}{{ $collapsed = index . 3 }}{{ end }}
   {{ $isGenerated := false }}
   {{ $isDeleted := false }}
   {{ with $file }}
@@ -152,7 +155,7 @@
     {{ else if $n.Old }}
       {{ $isGenerated = isGenerated $n.Old }}
     {{ end }}
-    <details {{ if and (not $isGenerated) (not $isDeleted) }}open{{ end }} 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 }}">
+    <details {{ if and (not $isGenerated) (not $isDeleted) (not $collapsed) }}open{{ end }} 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 }}">
       <summary class="list-none cursor-pointer sticky top-12 group-open:border-b border-gray-200 dark:border-gray-700">
         <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
           <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
@@ -214,7 +217,7 @@
 {{ end }}
 
 {{ define "filesCheckbox" }}
-  <input type="checkbox" id="filesToggle" class="peer/files hidden" checked/>
+  <input type="checkbox" id="filesToggle" class="peer/files hidden" {{ if gt (len .) 2 }}checked{{ end }}/>
 {{ end }}
 
 {{ define "filesToggle" }}
diff --git a/appview/pages/templates/repo/fragments/diffOpts.html b/appview/pages/templates/repo/fragments/diffOpts.html
index 64a6785a..912f7dcc 100644
--- a/appview/pages/templates/repo/fragments/diffOpts.html
+++ b/appview/pages/templates/repo/fragments/diffOpts.html
@@ -4,29 +4,48 @@
     {{ $active = "split" }}
   {{ end }}
 
-  {{ $activeTab := "bg-white dark:bg-gray-700 shadow-sm" }}
-  {{ $inactiveTab := "bg-gray-100 dark:bg-gray-800 shadow-inner" }}
+  {{ $activeTab := "bg-white dark:bg-gray-800 shadow-sm cursor-default" }}
+  {{ $inactiveTab := "hover:text-gray-900 dark:hover:text-white" }}
+  {{ $usePost := ne .RefreshUrl "" }}
+  {{ $target := .Target }}
+  {{ if eq $target "" }}{{ $target = "#diff-files" }}{{ end }}
+  {{ $field := .Field }}
+  {{ if eq $field "" }}{{ $field = "diff" }}{{ end }}
 
-  <div class="flex justify-between divide-x divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 overflow-hidden"
-       hx-on::before-request="const t=event.target.closest('button'); if(!t||t.classList.contains('shadow-sm'))return event.preventDefault(); this.querySelectorAll('button').forEach(b => { const active=b===t; b.classList.toggle('bg-white',active); b.classList.toggle('dark:bg-gray-700',active); b.classList.toggle('shadow-sm',active); b.classList.toggle('bg-gray-100',!active); b.classList.toggle('dark:bg-gray-800',!active); b.classList.toggle('shadow-inner',!active); })">
+  <div class="inline-flex items-center gap-1 p-1 bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300"
+       hx-on::before-request="const t=event.target.closest('button'); if(!t||t.classList.contains('shadow-sm'))return event.preventDefault(); this.querySelectorAll('button').forEach(b => { const active=b===t; b.classList.toggle('bg-white',active); b.classList.toggle('dark:bg-gray-800',active); b.classList.toggle('shadow-sm',active); b.classList.toggle('cursor-default',active); b.classList.toggle('hover:text-gray-900',!active); b.classList.toggle('dark:hover:text-white',!active); })">
     <button
-       hx-get="?diff=unified"
-       hx-target="#diff-files"
-       hx-select="#diff-files"
-       hx-swap="outerHTML"
+       {{ if $usePost }}
+       hx-post="{{ .RefreshUrl }}"
+       hx-vals='{"{{ $field }}":"unified"}'
+       hx-include="closest form"
+       {{ else }}
+       hx-get="?{{ $field }}=unified"
        hx-push-url="true"
-       class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center {{ if eq $active "unified" }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
+       {{ end }}
+       hx-target="{{ $target }}"
+       hx-select="{{ $target }}"
+       hx-swap="outerHTML"
+       hx-indicator="this"
+       class="group flex items-center justify-center gap-2 px-3 py-1 text-sm whitespace-nowrap rounded hover:no-underline {{ if eq $active "unified" }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
       {{ i "square-split-vertical" "size-4 inline group-[.htmx-request]:hidden" }}
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
       unified
     </button>
     <button
-       hx-get="?diff=split"
-       hx-target="#diff-files"
-       hx-select="#diff-files"
-       hx-swap="outerHTML"
+       {{ if $usePost }}
+       hx-post="{{ .RefreshUrl }}"
+       hx-vals='{"{{ $field }}":"split"}'
+       hx-include="closest form"
+       {{ else }}
+       hx-get="?{{ $field }}=split"
        hx-push-url="true"
-       class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center {{ if eq $active "split" }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
+       {{ end }}
+       hx-target="{{ $target }}"
+       hx-select="{{ $target }}"
+       hx-swap="outerHTML"
+       hx-indicator="this"
+       class="group flex items-center justify-center gap-2 px-3 py-1 text-sm whitespace-nowrap rounded hover:no-underline {{ if eq $active "split" }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
       {{ i "square-split-horizontal" "size-4 inline group-[.htmx-request]:hidden" }}
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
       split
diff --git a/appview/pages/templates/repo/fragments/editLabelPanel.html b/appview/pages/templates/repo/fragments/editLabelPanel.html
index e121783d..8807c4ab 100644
--- a/appview/pages/templates/repo/fragments/editLabelPanel.html
+++ b/appview/pages/templates/repo/fragments/editLabelPanel.html
@@ -20,42 +20,56 @@
   {{ $defs := .Defs }}
   {{ $subject := .Subject }}
   {{ $state := .State }}
+  {{ $prefix := .Prefix }}
   {{ $labelStyle := "flex items-center gap-2 rounded py-1 px-2 border border-gray-200 dark:border-gray-700 text-sm bg-white dark:bg-gray-800 text-black dark:text-white" }}
-  <div>
-    {{ template "repo/fragments/labelSectionHeaderText" "Labels" }}
-
-    <div class="flex gap-1 items-center flex-wrap">
-      {{ range $k, $d := $defs }}
-        {{ $isChecked := $state.ContainsLabel $k }}
-        {{ if $d.ValueType.IsNull }}
-          {{ $fieldName := $d.AtUri }}
-          <label class="{{$labelStyle}}">
-            <input type="checkbox" id="{{ $fieldName }}" name="{{ $fieldName }}" value="null" {{if $isChecked}}checked{{end}}>
-            {{ template "labels/fragments/labelDef" $d }}
-          </label>
+  {{ $hasNullDefs := false }}
+  {{ range $k, $d := $defs }}
+    {{ if $d.ValueType.IsNull }}{{ $hasNullDefs = true }}{{ end }}
+  {{ end }}
+  {{ if or $hasNullDefs (not $defs) }}
+    <div>
+      {{ template "repo/fragments/labelSectionHeaderText" "Labels" }}
+
+      <div class="flex flex-col gap-1 items-start">
+        {{ range $k, $d := $defs }}
+          {{ $isChecked := $state.ContainsLabel $k }}
+          {{ if $d.ValueType.IsNull }}
+            {{ $fieldName := $d.AtUri.String }}
+            {{ if $prefix }}{{ $fieldName = printf "%s[%s]" $prefix $d.AtUri }}{{ end }}
+            <label class="{{$labelStyle}}">
+              <input type="checkbox" name="{{ $fieldName }}" value="null" {{if $isChecked}}checked{{end}}>
+              {{ template "labels/fragments/labelDef" $d }}
+            </label>
+          {{ end }}
+        {{ else }}
+          <p class="text-gray-500 dark:text-gray-400 text-sm py-1">
+            No labels defined yet. You can choose default labels or define custom
+            labels in <a class="underline" href="/{{ $.RepoInfo.FullName }}/settings">settings</a>.
+          </p>
         {{ end }}
-      {{ else }}
-        <p class="text-gray-500 dark:text-gray-400 text-sm py-1">
-          No labels defined yet. You can choose default labels or define custom
-          labels in <a class="underline" href="/{{ $.RepoInfo.FullName }}/settings">settings</a>.
-        </p>
-      {{ end }}
+      </div>
     </div>
-  </div>
+  {{ end }}
 {{ end }}
 
 {{ define "editKvLabels" }}
   {{ $defs := .Defs }}
   {{ $subject := .Subject }}
   {{ $state := .State }}
+  {{ $prefix := .Prefix }}
+  {{ $groupSuffix := "" }}
+  {{ if $prefix }}{{ $groupSuffix = printf "-%s" $prefix }}{{ end }}
   {{ $labelStyle := "font-normal normal-case flex items-center gap-2 p-0" }}
 
   {{ range $k, $d := $defs }}
     {{ if (not $d.ValueType.IsNull) }}
-      {{ $fieldName := $d.AtUri }}
+      {{ $fieldName := $d.AtUri.String }}
+      {{ if $prefix }}{{ $fieldName = printf "%s[%s]" $prefix $d.AtUri }}{{ end }}
       {{ $valset := $state.GetValSet $k }}
-      <div id="label-{{$d.Id}}" class="flex flex-col gap-1">
-        {{ template "repo/fragments/labelSectionHeaderText" $d.Name }}
+      <div id="label-{{$d.Id}}{{ $groupSuffix }}" class="flex flex-col gap-1">
+        {{ if not $d.ValueType.IsBool }}
+          {{ template "repo/fragments/labelSectionHeaderText" $d.Name }}
+        {{ end }}
           {{ if (and $d.Multiple $d.ValueType.IsEnum) }}
             <!-- checkbox -->
             {{ range $variant := $d.ValueType.Enum }}
@@ -67,11 +81,14 @@
           {{ else if $d.Multiple }}
             <!-- dynamically growing input fields -->
             {{ range $v, $s := $valset }}
-              {{ template "multipleInputField" (dict "def" $d "value" $v "key" $k) }}
+              {{ template "multipleInputField" (dict "def" $d "value" $v "key" $k "prefix" $prefix) }}
             {{ else }}
-              {{ template "multipleInputField" (dict "def" $d "value" "" "key" $k) }}
+              {{ template "multipleInputField" (dict "def" $d "value" "" "key" $k "prefix" $prefix) }}
+            {{ end }}
+            {{ template "addFieldButton" (dict "def" $d "prefix" $prefix "groupSuffix" $groupSuffix) }}
+            {{ if and $.LoggedInUser $d.ValueType.IsString $d.ValueType.IsDidFormat }}
+              {{ template "assignToMeButton" (dict "def" $d "user" $.LoggedInUser "groupSuffix" $groupSuffix) }}
             {{ end }}
-            {{ template "addFieldButton" $d }}
           {{ else if $d.ValueType.IsEnum }}
             <!-- radio buttons -->
             {{ $isUsed := $state.ContainsLabel $k }}
@@ -88,9 +105,9 @@
           {{ else }}
             <!-- single input field based on value type -->
             {{ range $v, $s := $valset }}
-              {{ template "valueTypeInput" (dict "def" $d "value" $v "key" $k) }}
+              {{ template "valueTypeInput" (dict "def" $d "value" $v "key" $k "prefix" $prefix) }}
             {{ else }}
-              {{ template "valueTypeInput" (dict "def" $d "value" "" "key" $k) }}
+              {{ template "valueTypeInput" (dict "def" $d "value" "" "key" $k "prefix" $prefix) }}
             {{ end }}
           {{ end }}
       </div>
@@ -100,16 +117,49 @@
 
 {{ define "multipleInputField" }}
   <div class="flex gap-1 items-stretch">
-    {{ template "valueTypeInput" . }}
+    <div class="flex-1 min-w-0">
+      {{ template "valueTypeInput" . }}
+    </div>
     {{ template "removeFieldButton" }}
   </div>
 {{ end }}
 
+{{ define "assignToMeButton" }}
+  {{ $def := .def }}
+  {{ $user := .user }}
+  {{ $groupSuffix := .groupSuffix }}
+  {{ $handle := trimPrefix (resolve $user.Did) "@" }}
+  <button type="button"
+    data-assign-to-me="{{ $def.Id }}{{ $groupSuffix }}"
+    data-handle="{{ $handle }}"
+    onclick="(() => {
+      const group = document.getElementById('label-' + this.dataset.assignToMe);
+      const handle = this.dataset.handle;
+      const inputs = group.querySelectorAll('input[type=text]');
+      const empty = Array.from(inputs).find(i => !i.value.trim());
+      if (empty) { empty.value = handle; return; }
+      if (Array.from(inputs).some(i => i.value.trim() === handle)) return;
+      const tpl = document.getElementById('tpl-' + this.dataset.assignToMe);
+      if (!tpl) return;
+      const addBtn = tpl.nextElementSibling;
+      addBtn.insertAdjacentHTML('beforebegin', tpl.innerHTML);
+      const newInput = addBtn.previousElementSibling.querySelector('input[type=text]');
+      if (newInput) newInput.value = handle;
+    })()"
+    class="text-xs text-gray-500 dark:text-gray-400 hover:underline self-end inline-flex items-center gap-1">
+    {{ i "user-round-plus" "size-3.5" }}
+    assign to me
+  </button>
+{{ end }}
+
 {{ define "addFieldButton" }}
-  <div style="display:none" id="tpl-{{ .Id }}">
-    {{ template "multipleInputField" (dict "def" . "value" "" "key" .AtUri.String) }}
+  {{ $def := .def }}
+  {{ $prefix := .prefix }}
+  {{ $groupSuffix := .groupSuffix }}
+  <div style="display:none" id="tpl-{{ $def.Id }}{{ $groupSuffix }}">
+    {{ template "multipleInputField" (dict "def" $def "value" "" "key" $def.AtUri.String "prefix" $prefix) }}
   </div>
-  <button type="button" onClick="this.insertAdjacentHTML('beforebegin', document.getElementById('tpl-{{ .Id }}').innerHTML)" class="w-full btn flex items-center gap-2">
+  <button type="button" onClick="this.insertAdjacentHTML('beforebegin', document.getElementById('tpl-{{ $def.Id }}{{ $groupSuffix }}').innerHTML)" class="w-full btn flex items-center gap-2">
     {{ i "plus" "size-4" }} add
   </button>
 {{ end }}
@@ -139,35 +189,31 @@
 
 {{ define "boolTypeInput" }}
   {{ $def := .def }}
-  {{ $fieldName := $def.AtUri }}
+  {{ $prefix := .prefix }}
+  {{ $fieldName := $def.AtUri.String }}
+  {{ if $prefix }}{{ $fieldName = printf "%s[%s]" $prefix $def.AtUri }}{{ end }}
   {{ $value := .value }}
-  {{ $labelStyle = "font-normal normal-case flex items-center gap-2" }}
-  <div class="flex flex-col gap-1">
-    <label class="{{$labelStyle}}">
-      <input type="radio" name="{{ $fieldName }}" value="true" {{ if not $value }}checked{{ end }}>
-      None
-    </label>
-    <label class="{{$labelStyle}}">
-      <input type="radio" name="{{ $fieldName }}" value="true" {{ if not $value }}checked{{ end }}>
-      None
-    </label>
-    <label class="{{$labelStyle}}">
-      <input type="radio" name="{{ $fieldName }}" value="true" {{ if not $value }}checked{{ end }}>
-      None
-    </label>
-  </div>
+  {{ $isOn := eq $value "true" }}
+  <label class="font-normal normal-case flex items-center gap-2">
+    <input type="checkbox" name="{{ $fieldName }}" value="true" {{ if $isOn }}checked{{ end }}>
+    {{ $def.Name }}
+  </label>
 {{ end }}
 
 {{ define "intTypeInput" }}
   {{ $def := .def }}
-  {{ $fieldName := $def.AtUri }}
+  {{ $prefix := .prefix }}
+  {{ $fieldName := $def.AtUri.String }}
+  {{ if $prefix }}{{ $fieldName = printf "%s[%s]" $prefix $def.AtUri }}{{ end }}
   {{ $value := .value }}
   <input class="p-1 w-full" type="number" name="{{$fieldName}}" value="{{$value}}">
 {{ end }}
 
 {{ define "stringTypeInput" }}
   {{ $def := .def }}
-  {{ $fieldName := $def.AtUri }}
+  {{ $prefix := .prefix }}
+  {{ $fieldName := $def.AtUri.String }}
+  {{ if $prefix }}{{ $fieldName = printf "%s[%s]" $prefix $def.AtUri }}{{ end }}
   {{ $valueType := $def.ValueType }}
   {{ $value := .value }}
 
@@ -192,7 +238,9 @@
 
 {{ define "nullTypeInput" }}
   {{ $def := .def }}
-  {{ $fieldName := $def.AtUri }}
+  {{ $prefix := .prefix }}
+  {{ $fieldName := $def.AtUri.String }}
+  {{ if $prefix }}{{ $fieldName = printf "%s[%s]" $prefix $def.AtUri }}{{ end }}
   <input class="p-1" type="hidden" name="{{$fieldName}}" value="null">
 {{ end }}
 
diff --git a/appview/pages/templates/repo/fragments/fileTree.html b/appview/pages/templates/repo/fragments/fileTree.html
index 186cffdd..d8a52939 100644
--- a/appview/pages/templates/repo/fragments/fileTree.html
+++ b/appview/pages/templates/repo/fragments/fileTree.html
@@ -1,4 +1,16 @@
 {{ define "repo/fragments/fileTree" }}
+  {{ template "fileTreeImpl" (dict "Node" . "Prefix" "file-") }}
+{{ end }}
+
+{{ define "repo/fragments/fileTreePrefixed" }}
+  {{ $prefix := .Prefix }}
+  {{ if eq $prefix "" }}{{ $prefix = "file-" }}{{ end }}
+  {{ template "fileTreeImpl" (dict "Node" .Tree "Prefix" $prefix) }}
+{{ end }}
+
+{{ define "fileTreeImpl" }}
+  {{ $n := .Node }}
+  {{ $prefix := .Prefix }}
   {{/* tailwind safelist:
     group/level-1 group/level-2 group/level-3 group/level-4 group/level-5 group/level-6
     group/level-7 group/level-8 group/level-9 group/level-10 group/level-11 group/level-12
@@ -7,29 +19,29 @@
     group-open/level-1:block group-open/level-2:block group-open/level-3:block group-open/level-4:block group-open/level-5:block group-open/level-6:block
     group-open/level-7:block group-open/level-8:block group-open/level-9:block group-open/level-10:block group-open/level-11:block group-open/level-12:block
     */}}
-  {{ if and .Name .IsDirectory }}
-    <details open class="group/level-{{ .Level }}">
+  {{ if and $n.Name $n.IsDirectory }}
+    <details open class="group/level-{{ $n.Level }}">
       <summary class="cursor-pointer list-none pt-1">
         <span class="tree-directory inline-flex items-center gap-2">
-          {{ i "folder" (printf "flex-shrink-0 size-4 group-open/level-%d:hidden" .Level)}}
-          {{ i "folder-open" (printf "flex-shrink-0 size-4 hidden group-open/level-%d:block" .Level)}}
-          <span class="filename truncate text-black dark:text-white">{{ .Name }}</span>
+          {{ i "folder" (printf "flex-shrink-0 size-4 group-open/level-%d:hidden" $n.Level)}}
+          {{ i "folder-open" (printf "flex-shrink-0 size-4 hidden group-open/level-%d:block" $n.Level)}}
+          <span class="filename truncate text-black dark:text-white">{{ $n.Name }}</span>
         </span>
       </summary>
       <div class="ml-1 pl-2 border-l border-gray-200 dark:border-gray-700">
-        {{ range $child := .Children }}
-          {{ template "repo/fragments/fileTree" $child }}
+        {{ range $child := $n.Children }}
+          {{ template "fileTreeImpl" (dict "Node" $child "Prefix" $prefix) }}
         {{ end }}
       </div>
     </details>
-  {{ else if .Name }}
+  {{ else if $n.Name }}
     <div class="tree-file flex items-center gap-2 pt-1">
       {{ i "file" "flex-shrink-0 size-4" }}
-      <a href="#file-{{ .Path }}" data-path="{{ .Path }}" class="filetree-link filename truncate text-black dark:text-white no-underline hover:underline">{{ .Name }}</a>
+      <a href="#{{ $prefix }}{{ $n.Path }}" data-path="{{ $n.Path }}" class="filetree-link filename truncate text-black dark:text-white no-underline hover:underline">{{ $n.Name }}</a>
     </div>
   {{ else }}
-    {{ range $child := .Children }}
-      {{ template "repo/fragments/fileTree" $child }}
+    {{ range $child := $n.Children }}
+      {{ template "fileTreeImpl" (dict "Node" $child "Prefix" $prefix) }}
     {{ end }}
   {{ end }}
 {{ end }}
diff --git a/appview/pages/templates/repo/fragments/labelSectionHeaderText.html b/appview/pages/templates/repo/fragments/labelSectionHeaderText.html
index 638fb11d..72cabe6e 100644
--- a/appview/pages/templates/repo/fragments/labelSectionHeaderText.html
+++ b/appview/pages/templates/repo/fragments/labelSectionHeaderText.html
@@ -1,3 +1,3 @@
 {{ define "repo/fragments/labelSectionHeaderText" }}
-  <span class="text-sm py-1 font-bold text-gray-500 dark:text-gray-400 capitalize">{{ . }}</span>
+  <span class="text-xs uppercase tracking-wide text-gray-800 dark:text-gray-200">{{ . }}</span>
 {{ end }}
diff --git a/appview/pages/templates/repo/pulls/new.html b/appview/pages/templates/repo/pulls/new.html
index cc0b8d92..735b4bbf 100644
--- a/appview/pages/templates/repo/pulls/new.html
+++ b/appview/pages/templates/repo/pulls/new.html
@@ -1,156 +1,5 @@
 {{ define "title" }}new pull &middot; {{ .RepoInfo.FullName }}{{ end }}
 
 {{ define "repoContent" }}
-    <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
-        Create new pull request
-    </h2>
-
-    <form
-        hx-post="/{{ .RepoInfo.FullName }}/pulls/new"
-        hx-trigger="submit, keydown[(ctrlKey || metaKey) && key=='Enter'] from:(#patch,#title,#body)"
-        hx-indicator="#create-pull-spinner"
-        hx-swap="none"
-    >
-        <div class="flex flex-col gap-6">
-            <div class="flex gap-2 items-center">
-              <p>First, choose a target branch on {{ .RepoInfo.FullName }}:</p>
-              <div>
-                <select
-                  required
-                  name="targetBranch"
-                  class="p-1 border border-gray-200 bg-white dark:bg-gray-700 dark:text-white dark:border-gray-600"
-                  >
-                  <option disabled selected>target branch</option>
-
-
-                  {{ range .Branches }}
-
-                  {{ $preset := false }}
-                  {{ if $.TargetBranch }}
-                    {{ $preset = eq .Reference.Name $.TargetBranch }}
-                  {{ else }}
-                    {{ $preset = .IsDefault }}
-                  {{ end }}
-
-                  <option value="{{ .Reference.Name }}" class="py-1" {{if $preset}}selected{{end}}>
-                  {{ .Reference.Name }}
-                  </option>
-                  {{ end }}
-                </select>
-              </div>
-            </div>
-
-            <div class="flex flex-col gap-2">
-              <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
-                  Choose pull strategy
-              </h2>
-              <nav class="flex space-x-4 items-center">
-                  <button
-                      type="button"
-                      class="btn"
-                      hx-get="/{{ .RepoInfo.FullName }}/pulls/new/patch-upload"
-                      hx-target="#patch-strategy"
-                      hx-swap="innerHTML"
-                  >
-                      paste patch
-                  </button>
-
-                  {{ if .RepoInfo.Roles.IsPushAllowed }}
-                      <span class="text-sm text-gray-500 dark:text-gray-400">
-                          or
-                      </span>
-                      <button
-                          type="button"
-                          class="btn"
-                          hx-get="/{{ .RepoInfo.FullName }}/pulls/new/compare-branches"
-                          hx-target="#patch-strategy"
-                          hx-swap="innerHTML"
-                      >
-                          compare branches
-                      </button>
-                  {{ end }}
-
-
-                  <span class="text-sm text-gray-500 dark:text-gray-400">
-                      or
-                  </span>
-                  <script>
-                    function getQueryParams() {
-                      return Object.fromEntries(new URLSearchParams(window.location.search));
-                    }
-                  </script>
-                  <!--
-                  since compare-forks need the server to load forks, we
-                  hx-get this button; unlike simply loading the pullCompareForks template
-                  as we do for the rest of the gang below. the hx-vals thing just populates
-                  the query params so the forks page gets it.
-                  -->
-                  <button
-                      type="button"
-                      class="btn"
-                      hx-get="/{{ .RepoInfo.FullName }}/pulls/new/compare-forks"
-                      hx-target="#patch-strategy"
-                      hx-swap="innerHTML"
-                      {{ if eq .Strategy "fork" }}
-                      hx-trigger="click, load"
-                      hx-vals='js:{...getQueryParams()}'
-                      {{ end }}
-                  >
-                      compare forks
-                  </button>
-
-
-              </nav>
-              <section id="patch-strategy" class="flex flex-col gap-2">
-                  {{ if eq .Strategy "patch" }}
-                    {{ template "repo/pulls/fragments/pullPatchUpload" . }}
-                  {{ else if eq .Strategy "branch" }}
-                    {{ template "repo/pulls/fragments/pullCompareBranches" . }}
-                  {{ else }}
-                    {{ template "repo/pulls/fragments/pullPatchUpload" . }}
-                  {{ end }}
-              </section>
-
-              <div id="patch-error" class="error dark:text-red-300"></div>
-            </div>
-
-            <div>
-                <label for="title" class="dark:text-white">write a title</label>
-
-                <input
-                    type="text"
-                    name="title"
-                    id="title"
-                    value="{{ .Title }}"
-                    class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600"
-                    placeholder="One-line summary of your change."
-                />
-            </div>
-
-            <div>
-                <label for="body" class="dark:text-white"
-                    >add a description</label
-                >
-
-                <textarea
-                    name="body"
-                    id="body"
-                    rows="6"
-                    class="w-full resize-y dark:bg-gray-700 dark:text-white dark:border-gray-600"
-                    placeholder="Describe your change. Markdown is supported."
-                >{{ .Body }}</textarea>
-            </div>
-
-            <div class="flex justify-start items-center gap-2 mt-4">
-                <button type="submit" class="btn-create flex items-center gap-2">
-                    {{ i "git-pull-request-create" "w-4 h-4" }}
-                    create pull
-                    <span id="create-pull-spinner" class="group">
-                      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-                    </span>
-                </button>
-            </div>
-        </div>
-        <div id="pull" class="error dark:text-red-300"></div>
-    </form>
+    {{ template "repo/pulls/fragments/pullComposeHost" . }}
 {{ end }}
-- 
2.51.2