this repo has no description
tangled.org
1{{ define "title" }}{{ .Issue.Title }} · issue #{{ .Issue.IssueId }} · {{ .RepoInfo.FullName }}{{ end }}
2
3{{ define "repoContent" }}
4 <header class="pb-4">
5 <h1 class="text-2xl">
6 {{ .Issue.Title }}
7 <span class="text-gray-500 dark:text-gray-400">#{{ .Issue.IssueId }}</span>
8 </h1>
9 </header>
10
11 {{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
12 {{ $icon := "ban" }}
13 {{ if eq .State "open" }}
14 {{ $bgColor = "bg-green-600 dark:bg-green-700" }}
15 {{ $icon = "circle-dot" }}
16 {{ end }}
17
18 <section class="mt-2">
19 <div class="inline-flex items-center gap-2">
20 <div id="state"
21 class="inline-flex items-center rounded px-3 py-1 {{ $bgColor }}">
22 {{ i $icon "w-4 h-4 mr-1.5 text-white" }}
23 <span class="text-white">{{ .State }}</span>
24 </div>
25 <span class="text-gray-500 dark:text-gray-400 text-sm">
26 opened by
27 {{ $owner := didOrHandle .Issue.OwnerDid .IssueOwnerHandle }}
28 <a href="/{{ $owner }}" class="no-underline hover:underline"
29 >{{ $owner }}</a
30 >
31 <span class="px-1 select-none before:content-['\00B7']"></span>
32 <time title="{{ .Issue.Created | longTimeFmt }}">
33 {{ .Issue.Created | timeFmt }}
34 </time>
35 </span>
36 </div>
37
38 {{ if .Issue.Body }}
39 <article id="body" class="mt-8 prose dark:prose-invert">
40 {{ .Issue.Body | markdown }}
41 </article>
42 {{ end }}
43 </section>
44{{ end }}
45
46{{ define "repoAfter" }}
47 <section id="comments" class="my-2 mt-2 space-y-2 relative">
48 {{ range $index, $comment := .Comments }}
49 <div
50 id="comment-{{ .CommentId }}"
51 class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-2 px-4 relative w-full md:max-w-3/5 md:w-fit">
52 {{ if gt $index 0 }}
53 <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
54 {{ end }}
55 {{ template "repo/issues/fragments/issueComment" (dict "RepoInfo" $.RepoInfo "LoggedInUser" $.LoggedInUser "DidHandleMap" $.DidHandleMap "Issue" $.Issue "Comment" .)}}
56 </div>
57 {{ end }}
58 </section>
59
60 {{ block "newComment" . }} {{ end }}
61
62{{ end }}
63
64{{ define "newComment" }}
65 {{ if .LoggedInUser }}
66 <form
67 id="comment-form"
68 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
69 hx-on::after-request="if(event.detail.successful) this.reset()"
70 >
71 <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full md:w-3/5">
72 <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
73 {{ didOrHandle .LoggedInUser.Did .LoggedInUser.Handle }}
74 </div>
75 <textarea
76 id="comment-textarea"
77 name="body"
78 class="w-full p-2 rounded border border-gray-200 dark:border-gray-700"
79 placeholder="Add to the discussion. Markdown is supported."
80 onkeyup="updateCommentForm()"
81 ></textarea>
82 <div id="issue-comment"></div>
83 <div id="issue-action" class="error"></div>
84 </div>
85
86 <div class="flex gap-2 mt-2">
87 <button
88 id="comment-button"
89 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
90 type="submit"
91 hx-disabled-elt="#comment-button"
92 class="btn p-2 flex items-center gap-2 no-underline hover:no-underline group"
93 disabled
94 >
95 {{ i "message-square-plus" "w-4 h-4" }}
96 comment
97 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
98 </button>
99
100 {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.OwnerDid) }}
101 {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
102 {{ $isRepoOwner := .RepoInfo.Roles.IsOwner }}
103 {{ if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (eq .State "open") }}
104 <button
105 id="close-button"
106 type="button"
107 class="btn flex items-center gap-2"
108 hx-indicator="#close-spinner"
109 hx-trigger="click"
110 >
111 {{ i "ban" "w-4 h-4" }}
112 close
113 <span id="close-spinner" class="group">
114 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
115 </span>
116 </button>
117 <div
118 id="close-with-comment"
119 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
120 hx-trigger="click from:#close-button"
121 hx-disabled-elt="#close-with-comment"
122 hx-target="#issue-comment"
123 hx-indicator="#close-spinner"
124 hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : ''}"
125 hx-swap="none"
126 >
127 </div>
128 <div
129 id="close-issue"
130 hx-disabled-elt="#close-issue"
131 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close"
132 hx-trigger="click from:#close-button"
133 hx-target="#issue-action"
134 hx-indicator="#close-spinner"
135 hx-swap="none"
136 >
137 </div>
138 <script>
139 document.addEventListener('htmx:configRequest', function(evt) {
140 if (evt.target.id === 'close-with-comment') {
141 const commentText = document.getElementById('comment-textarea').value.trim();
142 if (commentText === '') {
143 evt.detail.parameters = {};
144 evt.preventDefault();
145 }
146 }
147 });
148 </script>
149 {{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (eq .State "closed") }}
150 <button
151 type="button"
152 class="btn flex items-center gap-2"
153 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
154 hx-indicator="#reopen-spinner"
155 hx-swap="none"
156 >
157 {{ i "refresh-ccw-dot" "w-4 h-4" }}
158 reopen
159 <span id="reopen-spinner" class="group">
160 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
161 </span>
162 </button>
163 {{ end }}
164
165 <script>
166 function updateCommentForm() {
167 const textarea = document.getElementById('comment-textarea');
168 const commentButton = document.getElementById('comment-button');
169 const closeButton = document.getElementById('close-button');
170
171 if (textarea.value.trim() !== '') {
172 commentButton.removeAttribute('disabled');
173 } else {
174 commentButton.setAttribute('disabled', '');
175 }
176
177 if (closeButton) {
178 if (textarea.value.trim() !== '') {
179 closeButton.innerHTML = `
180{{ i "ban" "w-4 h-4" }}
181<span>close with comment</span>
182<span id="close-spinner" class="group">
183 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
184</span>`;
185 } else {
186 closeButton.innerHTML = `
187{{ i "ban" "w-4 h-4" }}
188<span>close</span>
189<span id="close-spinner" class="group">
190 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
191</span>`;
192 }
193 }
194 }
195
196 document.addEventListener('DOMContentLoaded', function() {
197 updateCommentForm();
198 });
199 </script>
200 </div>
201 </form>
202 {{ else }}
203 <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-fit">
204 <a href="/login" class="underline">login</a> to join the discussion
205 </div>
206 {{ end }}
207{{ end }}