lewis.moe
Monorepo for Tangled
1{{ define "repo/issues/fragments/replyComment" }}
2 <form
3 class="p-2 group w-full border-t border-gray-200 dark:border-gray-700 flex flex-col gap-2"
4 id="reply-form-{{ .Comment.Id }}"
5 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
6 hx-on::after-request="if(event.detail.successful) this.reset()"
7 hx-disabled-elt="#reply-{{ .Comment.Id }}"
8 >
9 {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
10 <textarea
11 id="reply-{{.Comment.Id}}-textarea"
12 name="body"
13 class="w-full p-2"
14 placeholder="Leave a reply..."
15 autofocus
16 rows="3"
17 hx-trigger="keydown[ctrlKey&&key=='Enter']"
18 hx-target="#reply-form-{{ .Comment.Id }}"
19 hx-get="#"
20 hx-on:htmx:before-request="event.preventDefault(); document.getElementById('reply-form-{{ .Comment.Id }}').requestSubmit()"></textarea>
21
22 <input
23 type="text"
24 id="reply-to"
25 name="reply-to"
26 required
27 value="{{ .Comment.AtUri }}"
28 class="hidden"
29 />
30 {{ template "replyActions" . }}
31 </form>
32{{ end }}
33
34{{ define "replyActions" }}
35 <div class="flex flex-wrap items-stretch justify-end gap-2 text-gray-500 dark:text-gray-400 text-sm">
36 {{ template "cancel" . }}
37 {{ template "reply" . }}
38 </div>
39{{ end }}
40
41{{ define "cancel" }}
42 <button
43 class="btn text-red-500 dark:text-red-400 flex gap-2 items-center group"
44 hx-get="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment/{{ .Comment.Id }}/replyPlaceholder"
45 hx-target="#reply-form-{{ .Comment.Id }}"
46 hx-swap="outerHTML">
47 {{ i "x" "size-4" }}
48 cancel
49 </button>
50{{ end }}
51
52{{ define "reply" }}
53 <button
54 id="reply-{{ .Comment.Id }}"
55 type="submit"
56 class="btn-create flex items-center gap-2 no-underline hover:no-underline">
57 {{ i "reply" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
58 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
59 reply
60 </button>
61{{ end }}