Monorepo for Tangled
appview/pages: cleverer htmx-ing in new issue comment fragments
- errors are printed to the right of the button
- any existing error messages are dismissed before a new request is
fired
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Jun 15, 2026, 10:03 AM +0100)
b376287c
a1d71ce5
+9
-5
+9
-5
appview/pages/templates/repo/issues/fragments/newComment.html
+9
-5
appview/pages/templates/repo/issues/fragments/newComment.html
···
2
2
{{ if .LoggedInUser }}
3
3
<form
4
4
hx-post="/comment"
5
+
hx-swap="none"
5
6
hx-trigger="submit, click from:#close-button, keydown[commentButtonEnabled() && (ctrlKey || metaKey) && key=='Enter'] from:#comment-textarea"
6
7
hx-disabled-elt="find button[type='submit']"
8
+
hx-on::before-request="document.getElementById('comment-error').innerHTML = ''"
7
9
hx-on::after-request="if(event.detail.successful) this.reset()"
8
-
class="group/form"
10
+
class="group/form "
9
11
>
10
12
<input name="subject-uri" type="hidden" value="{{ .Issue.AtUri }}">
11
-
<div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full">
13
+
<div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full border border-gray-200 dark:border-gray-700">
12
14
<div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
13
15
{{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
14
16
</div>
···
21
23
rows="5"
22
24
required
23
25
></textarea>
24
-
<div id="comment-error" class="error"></div>
25
-
<div id="issue-action" class="error"></div>
26
26
</div>
27
27
28
-
<div class="flex gap-2 mt-2">
28
+
<div class="flex gap-2 mt-2 items-center">
29
29
<button
30
30
id="comment-button"
31
31
type="submit"
···
59
59
hx-target="#issue-action"
60
60
hx-swap="none"
61
61
hx-indicator="#close-button"
62
+
hx-on::before-request="document.getElementById('issue-action').innerHTML = ''"
62
63
>
63
64
</div>
64
65
{{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (not .Issue.Open) }}
···
73
74
Reopen
74
75
</button>
75
76
{{ end }}
77
+
78
+
<div id="comment-error" class="error"></div>
79
+
<div id="issue-action" class="error"></div>
76
80
77
81
<script>
78
82
function commentButtonEnabled() {