forked from
tangled.org/core
Monorepo for Tangled
appview/pages: split star button to include starrers link
Signed-off-by: Patrick Dewey <p@pdewey.com>
+35
-19
+33
-18
appview/pages/templates/fragments/starBtn.html
+33
-18
appview/pages/templates/fragments/starBtn.html
···
1
1
{{ define "fragments/starBtn" }}
2
2
{{/* NOTE: this fragment is always replaced with hx-swap-oob */}}
3
-
<button
3
+
<div
4
4
id="starBtn"
5
-
class="btn disabled:opacity-50 disabled:cursor-not-allowed flex gap-2 items-center group"
5
+
class="flex w-full min-h-[30px] items-stretch overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
6
6
data-star-subject-at="{{ .SubjectAt }}"
7
-
{{ if .IsStarred }}
8
-
hx-delete="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}"
9
-
{{ else }}
10
-
hx-post="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}"
11
-
{{ end }}
12
7
{{ if .HxSwapOob }}hx-swap-oob='outerHTML:#starBtn[data-star-subject-at="{{ .SubjectAt }}"]'{{ end }}
13
-
14
-
hx-trigger="click"
15
-
hx-disabled-elt="#starBtn"
16
8
>
17
-
{{ if .IsStarred }}
18
-
{{ i "star" "w-4 h-4 fill-current inline group-[.htmx-request]:hidden" }}
9
+
<button
10
+
class="flex flex-1 justify-center gap-2 items-center px-2 group disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
11
+
{{ if .IsStarred }}
12
+
hx-delete="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}&repoName={{ .RepoName }}"
13
+
{{ else }}
14
+
hx-post="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}&repoName={{ .RepoName }}"
15
+
{{ end }}
16
+
hx-trigger="click"
17
+
hx-disabled-elt="this"
18
+
>
19
+
{{ if .IsStarred }}
20
+
{{ i "star" "w-4 h-4 fill-current inline group-[.htmx-request]:hidden" }}
21
+
{{ else }}
22
+
{{ i "star" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
23
+
{{ end }}
24
+
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
25
+
<span class="text-sm md:hidden group-[.htmx-request]:hidden">{{ if .IsStarred }}unstar{{ else }}star{{ end }}</span>
26
+
</button>
27
+
{{ if .RepoName }}
28
+
{{ $did := .SubjectAt.Authority | string }}
29
+
<a
30
+
href="/{{ resolve $did }}/{{ .RepoName }}/stars"
31
+
class="flex items-center px-2 text-sm no-underline hover:no-underline border-l border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
32
+
title="Starred by"
33
+
>
34
+
{{ .StarCount }}
35
+
</a>
19
36
{{ else }}
20
-
{{ i "star" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
37
+
<span class="flex items-center px-2 text-sm border-l border-gray-200 dark:border-gray-700">
38
+
{{ .StarCount }}
39
+
</span>
21
40
{{ end }}
22
-
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
23
-
<span class="text-sm">
24
-
{{ .StarCount }}
25
-
</span>
26
-
</button>
41
+
</div>
27
42
{{ end }}
+2
-1
appview/pages/templates/layouts/repobase.html
+2
-1
appview/pages/templates/layouts/repobase.html
···
115
115
{{ template "fragments/starBtn"
116
116
(dict "SubjectAt" .RepoInfo.RepoAt
117
117
"IsStarred" .RepoInfo.IsStarred
118
-
"StarCount" .RepoInfo.Stats.StarCount) }}
118
+
"StarCount" .RepoInfo.Stats.StarCount
119
+
"RepoName" .RepoInfo.Name) }}
119
120
<a
120
121
class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
121
122
hx-boost="true"