dzming.li
A vibe coded tangled fork which supports pijul.
1{{ define "repo/issues/fragments/newComment" }}
2 {{ if .LoggedInUser }}
3 <form
4 id="comment-form"
5 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
6 hx-trigger="submit, keydown[commentButtonEnabled() && (ctrlKey || metaKey) && key=='Enter'] from:#comment-textarea"
7 hx-indicator="#comment-button"
8 hx-disabled-elt="#comment-form button"
9 hx-on::after-request="if(event.detail.successful) this.reset()"
10 >
11 <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full">
12 <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
13 {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
14 </div>
15 <textarea
16 id="comment-textarea"
17 name="body"
18 class="w-full p-2 rounded"
19 placeholder="Add to the discussion. Markdown is supported."
20 onkeyup="updateCommentForm()"
21 rows="5"
22 ></textarea>
23 <div id="issue-comment"></div>
24 <div id="issue-action" class="error"></div>
25 </div>
26
27 <div class="flex gap-2 mt-2">
28 <button
29 id="comment-button"
30 type="submit"
31 class="btn-create p-2 flex items-center gap-2 no-underline hover:no-underline group"
32 disabled
33 >
34 {{ i "message-square-plus" "w-4 h-4" }}
35 comment
36 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
37 </button>
38
39 {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.Did) }}
40 {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
41 {{ $isRepoOwner := .RepoInfo.Roles.IsOwner }}
42 {{ if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) .Issue.Open }}
43 <button
44 id="close-button"
45 type="button"
46 class="btn flex items-center gap-2"
47 hx-indicator="#close-spinner"
48 hx-trigger="click"
49 >
50 {{ i "ban" "w-4 h-4" }}
51 close
52 <span id="close-spinner" class="group">
53 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
54 </span>
55 </button>
56 <div
57 id="close-with-comment"
58 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
59 hx-trigger="click from:#close-button"
60 hx-disabled-elt="#close-with-comment"
61 hx-target="#issue-comment"
62 hx-indicator="#close-spinner"
63 hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : ''}"
64 hx-swap="none"
65 >
66 </div>
67 <div
68 id="close-issue"
69 hx-disabled-elt="#close-issue"
70 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close"
71 hx-trigger="click from:#close-button"
72 hx-target="#issue-action"
73 hx-indicator="#close-spinner"
74 hx-swap="none"
75 >
76 </div>
77 <script>
78 document.addEventListener('htmx:configRequest', function(evt) {
79 if (evt.target.id === 'close-with-comment') {
80 const commentText = document.getElementById('comment-textarea').value.trim();
81 if (commentText === '') {
82 evt.detail.parameters = {};
83 evt.preventDefault();
84 }
85 }
86 });
87 </script>
88 {{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (not .Issue.Open) }}
89 <button
90 type="button"
91 class="btn flex items-center gap-2"
92 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
93 hx-indicator="#reopen-spinner"
94 hx-swap="none"
95 >
96 {{ i "refresh-ccw-dot" "w-4 h-4" }}
97 reopen
98 <span id="reopen-spinner" class="group">
99 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
100 </span>
101 </button>
102 {{ end }}
103
104 <script>
105 function commentButtonEnabled() {
106 const commentButton = document.getElementById('comment-button');
107 return !commentButton.hasAttribute('disabled');
108 }
109
110 function updateCommentForm() {
111 const textarea = document.getElementById('comment-textarea');
112 const commentButton = document.getElementById('comment-button');
113 const closeButton = document.getElementById('close-button');
114
115 if (textarea.value.trim() !== '') {
116 commentButton.removeAttribute('disabled');
117 } else {
118 commentButton.setAttribute('disabled', '');
119 }
120
121 if (closeButton) {
122 if (textarea.value.trim() !== '') {
123 closeButton.innerHTML = `
124{{ i "ban" "w-4 h-4" }}
125<span>close with comment</span>
126<span id="close-spinner" class="group">
127 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
128</span>`;
129 } else {
130 closeButton.innerHTML = `
131{{ i "ban" "w-4 h-4" }}
132<span>close</span>
133<span id="close-spinner" class="group">
134 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
135</span>`;
136 }
137 }
138 }
139
140 document.addEventListener('DOMContentLoaded', function() {
141 updateCommentForm();
142 });
143 </script>
144 </div>
145 </form>
146 {{ else }}
147 <div class="bg-amber-50 dark:bg-amber-900 border border-amber-500 rounded drop-shadow-sm p-6 relative flex gap-2 items-center">
148 <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
149 sign up
150 </a>
151 <span class="text-gray-500 dark:text-gray-400">or</span>
152 <a href="/login" class="underline">login</a>
153 to add to the discussion
154 </div>
155 {{ end }}
156{{ end }}