dzming.li
A vibe coded tangled fork which supports pijul.
1{{ define "repo/fragments/diffOpts" }}
2 {{ $active := "unified" }}
3 {{ if .Split }}
4 {{ $active = "split" }}
5 {{ end }}
6
7 {{ $activeTab := "bg-white dark:bg-gray-700 shadow-sm" }}
8 {{ $inactiveTab := "bg-gray-100 dark:bg-gray-800 shadow-inner" }}
9
10 <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"
11 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); })">
12 <button
13 hx-get="?diff=unified"
14 hx-target="#diff-files"
15 hx-select="#diff-files"
16 hx-swap="outerHTML"
17 hx-push-url="true"
18 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 }}">
19 {{ i "square-split-vertical" "size-4 inline group-[.htmx-request]:hidden" }}
20 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
21 unified
22 </button>
23 <button
24 hx-get="?diff=split"
25 hx-target="#diff-files"
26 hx-select="#diff-files"
27 hx-swap="outerHTML"
28 hx-push-url="true"
29 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 }}">
30 {{ i "square-split-horizontal" "size-4 inline group-[.htmx-request]:hidden" }}
31 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
32 split
33 </button>
34 </div>
35{{ end }}