My own copy of Tangled :)
appview: pages/templates/repo: make issues more consistent with pulls
- improve issue page icons and icon states
- make issue comments more like pull comments
- padding and spacing consistency across the board
author
icyphox.sh
committer
Tangled
date
(Apr 12, 2025, 6:43 PM UTC)
commit
3b2e1037
3b2e1037480a21eec405ca9bb537844b69ba1c29
parent
48cbc686
48cbc6861829eb11fefcdbaea5b90e75e450fb22
+112
-52
+9
-10
appview/pages/templates/fragments/issueComment.html
+9
-10
appview/pages/templates/fragments/issueComment.html
···
5
5
{{ $owner := index $.DidHandleMap .OwnerDid }}
6
6
<a href="/{{ $owner }}" class="no-underline hover:underline">{{ $owner }}</a>
7
7
8
-
<!-- show user "hats" -->
9
-
{{ $isIssueAuthor := eq .OwnerDid $.Issue.OwnerDid }}
10
-
{{ if $isIssueAuthor }}
11
-
<span class="before:content-['·']"></span>
12
-
<span class="rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 mx-1/2 inline-flex items-center">
13
-
author
14
-
</span>
15
-
{{ end }}
16
-
17
-
<span class="before:content-['·']"></span>
8
+
<span class="before:content-['·']"></span>
18
9
<a
19
10
href="#{{ .CommentId }}"
20
11
class="text-gray-500 hover:text-gray-500 hover:underline no-underline"
···
27
18
{{ .Created | timeFmt }}
28
19
{{ end }}
29
20
</a>
21
+
22
+
<!-- show user "hats" -->
23
+
{{ $isIssueAuthor := eq .OwnerDid $.Issue.OwnerDid }}
24
+
{{ if $isIssueAuthor }}
25
+
<span class="text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 mx-1/2 inline-flex items-center">
26
+
author
27
+
</span>
28
+
{{ end }}
30
29
31
30
{{ $isCommentOwner := and $.LoggedInUser (eq $.LoggedInUser.Did .OwnerDid) }}
32
31
{{ if and $isCommentOwner (not .Deleted) }}
-1
appview/pages/templates/fragments/pullActions.html
-1
appview/pages/templates/fragments/pullActions.html
···
12
12
{{ $isSameRepoBranch := .Pull.IsSameRepoBranch }}
13
13
{{ $isUpToDate := .ResubmitCheck.No }}
14
14
<div class="relative w-fit">
15
-
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
16
15
<div id="actions-{{$roundNumber}}" class="flex flex-wrap gap-2">
17
16
<button
18
17
hx-get="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/round/{{ $roundNumber }}/comment"
+100
-38
appview/pages/templates/repo/issues/issue.html
+100
-38
appview/pages/templates/repo/issues/issue.html
···
45
45
46
46
{{ define "repoAfter" }}
47
47
{{ if gt (len .Comments) 0 }}
48
-
<section id="comments" class="mt-8 space-y-4 relative">
48
+
<section id="comments" class="my-4 space-y-2 relative">
49
49
{{ range $index, $comment := .Comments }}
50
50
<div
51
51
id="comment-{{ .CommentId }}"
52
-
class="rounded bg-white px-6 py-4 relative dark:bg-gray-800">
53
-
{{ if eq $index 0 }}
54
-
<div class="absolute left-8 -top-8 w-px h-8 bg-gray-300 dark:bg-gray-700" ></div>
55
-
{{ else }}
56
-
<div class="absolute left-8 -top-4 w-px h-4 bg-gray-300 dark:bg-gray-700" ></div>
52
+
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">
53
+
{{ if gt $index 0 }}
54
+
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
57
55
{{ end }}
58
-
59
56
{{ template "fragments/issueComment" (dict "RepoInfo" $.RepoInfo "LoggedInUser" $.LoggedInUser "DidHandleMap" $.DidHandleMap "Issue" $.Issue "Comment" .)}}
60
57
</div>
61
58
{{ end }}
···
64
61
65
62
{{ block "newComment" . }} {{ end }}
66
63
67
-
{{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.OwnerDid) }}
68
-
{{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
69
-
{{ if or $isIssueAuthor $isRepoCollaborator }}
70
-
{{ $action := "close" }}
71
-
{{ $icon := "circle-x" }}
72
-
{{ $hoverColor := "red" }}
73
-
{{ if eq .State "closed" }}
74
-
{{ $action = "reopen" }}
75
-
{{ $icon = "circle-dot" }}
76
-
{{ $hoverColor = "green" }}
77
-
{{ end }}
78
-
<form
79
-
hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/{{ $action }}"
80
-
hx-swap="none"
81
-
class="mt-8"
82
-
>
83
-
<button type="submit" class="btn hover:bg-{{ $hoverColor }}-300">
84
-
{{ i $icon "w-4 h-4 mr-2" }}
85
-
<span class="text-black dark:text-gray-400">{{ $action }}</span>
86
-
</button>
87
-
<div id="issue-action" class="error"></div>
88
-
</form>
89
-
{{ end }}
90
64
{{ end }}
91
65
92
66
{{ define "newComment" }}
93
67
{{ if .LoggedInUser }}
94
-
<div class="bg-white rounded drop-shadow-sm py-4 px-6 relative w-full flex flex-col gap-2 mt-8 dark:bg-gray-800 dark:text-gray-400">
95
-
<div class="absolute left-8 -top-8 w-px h-8 bg-gray-300 dark:bg-gray-700" ></div>
96
-
<div class="text-sm text-gray-500 dark:text-gray-400">
68
+
69
+
<form
70
+
id="comment-form"
71
+
hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
72
+
hx-on::after-request="if(event.detail.successful) this.reset()"
73
+
>
74
+
<div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full md:w-3/5">
75
+
<div class="absolute left-8 -top-4 w-px h-4 bg-gray-300 dark:bg-gray-600"></div>
76
+
<div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
97
77
{{ didOrHandle .LoggedInUser.Did .LoggedInUser.Handle }}
98
78
</div>
99
-
<form hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment">
100
79
<textarea
80
+
id="comment-textarea"
101
81
name="body"
102
82
class="w-full p-2 rounded border border-gray-200 dark:border-gray-700"
103
-
placeholder="Add to the discussion..."
83
+
placeholder="Add to the discussion. Markdown is supported."
84
+
onkeyup="updateCommentForm()"
104
85
></textarea>
105
-
<button type="submit" class="btn mt-2">comment</button>
106
86
<div id="issue-comment"></div>
107
-
</form>
87
+
88
+
<div id="issue-action" class="error"></div>
108
89
</div>
90
+
91
+
<div class="flex gap-2 mt-2">
92
+
<button
93
+
id="comment-button"
94
+
hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
95
+
type="submit"
96
+
hx-disabled-elt="#comment-button"
97
+
class="btn p-2 flex items-center gap-2 no-underline hover:no-underline"
98
+
disabled
99
+
>
100
+
{{ i "message-square-plus" "w-4 h-4" }}
101
+
comment
102
+
</button>
103
+
104
+
{{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.OwnerDid) }}
105
+
{{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
106
+
{{ if and (or $isIssueAuthor $isRepoCollaborator) (eq .State "open") }}
107
+
<button
108
+
id="close-button"
109
+
type="button"
110
+
class="btn flex items-center gap-2"
111
+
hx-trigger="click"
112
+
>
113
+
{{ i "ban" "w-4 h-4" }}
114
+
close
115
+
</button>
116
+
<div
117
+
id="close-with-comment"
118
+
hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
119
+
hx-trigger="click from:#close-button"
120
+
hx-disabled-elt="#close-with-comment"
121
+
hx-target="#issue-comment"
122
+
hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : null}">
123
+
</div>
124
+
<div
125
+
id="close-issue"
126
+
hx-disabled-elt="#close-issue"
127
+
hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close"
128
+
hx-trigger="click from:#close-button, revealed from:#close-with-comment"
129
+
hx-target="#issue-action"
130
+
hx-swap="none">
131
+
</div>
132
+
{{ else if and (or $isIssueAuthor $isRepoCollaborator) (eq .State "closed") }}
133
+
<button
134
+
type="button"
135
+
class="btn flex items-center gap-2"
136
+
hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
137
+
hx-swap="none"
138
+
>
139
+
{{ i "circle-dot" "w-4 h-4" }}
140
+
reopen
141
+
</button>
142
+
{{ end }}
143
+
144
+
<script>
145
+
function updateCommentForm() {
146
+
const textarea = document.getElementById('comment-textarea');
147
+
const commentButton = document.getElementById('comment-button');
148
+
const closeButton = document.getElementById('close-button');
149
+
150
+
if (textarea.value.trim() !== '') {
151
+
commentButton.removeAttribute('disabled');
152
+
} else {
153
+
commentButton.setAttribute('disabled', '');
154
+
}
155
+
156
+
if (closeButton) {
157
+
if (textarea.value.trim() !== '') {
158
+
closeButton.innerHTML = '{{ i "ban" "w-4 h-4" }} close with comment';
159
+
} else {
160
+
closeButton.innerHTML = '{{ i "ban" "w-4 h-4" }} close';
161
+
}
162
+
}
163
+
}
164
+
165
+
document.addEventListener('DOMContentLoaded', function() {
166
+
updateCommentForm();
167
+
});
168
+
</script>
169
+
</div>
170
+
</form>
109
171
{{ else }}
110
172
<div class="bg-white dark:bg-gray-800 dark:text-gray-400 rounded drop-shadow-sm px-6 py-4 mt-8">
111
-
<div class="absolute left-8 -top-8 w-px h-8 bg-gray-300 dark:bg-gray-700" ></div>
173
+
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
112
174
<a href="/login" class="underline">login</a> to join the discussion
113
175
</div>
114
176
{{ end }}
+2
-2
appview/pages/templates/repo/pulls/pull.html
+2
-2
appview/pages/templates/repo/pulls/pull.html
···
21
21
{{ $icon = "git-merge" }}
22
22
{{ end }}
23
23
24
-
<section>
24
+
<section class="mt-2">
25
25
<div class="flex items-center gap-2">
26
26
<div
27
27
id="state"
···
64
64
</div>
65
65
66
66
{{ if .Pull.Body }}
67
-
<article id="body" class="mt-2 prose dark:prose-invert">
67
+
<article id="body" class="mt-8 prose dark:prose-invert">
68
68
{{ .Pull.Body | markdown }}
69
69
</article>
70
70
{{ end }}
+1
-1
appview/pages/templates/repo/pulls/pulls.html
+1
-1
appview/pages/templates/repo/pulls/pulls.html
···
22
22
</p>
23
23
<a
24
24
href="/{{ .RepoInfo.FullName }}/pulls/new"
25
-
class="btn text-sm flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:bg-gray-700 dark:hover:bg-gray-600"
25
+
class="btn text-sm flex items-center gap-2 no-underline hover:no-underline"
26
26
>
27
27
{{ i "git-pull-request-create" "w-4 h-4" }}
28
28
<span>new</span>