Monorepo for Tangled
tangled.org
appview/pages: add htmx fragments for profile popups
also removes the gray shield indicator for profiles that are not vouched
for.
Signed-off-by: oppiliappan <me@oppi.li>
+87
-4
+28
-4
appview/pages/templates/user/fragments/picLink.html
+28
-4
appview/pages/templates/user/fragments/picLink.html
···
6
6
{{ if ge (len .) 3 }}
7
7
{{ $vr = index . 2 }}
8
8
{{ end }}
9
-
<div class="relative inline-block">
10
-
<a href="/{{ $handle }}" title="{{ $handle }}">
9
+
<div class="relative inline-block"
10
+
onmouseenter="(function(el){
11
+
var r=el.getBoundingClientRect(),p=el.querySelector('[data-profile-popover]');
12
+
if(p){p.style.top=r.bottom+'px';p.style.left=r.left+'px';p.classList.remove('hidden');}
13
+
})(this)"
14
+
onmouseleave="(function(el){
15
+
var p=el.querySelector('[data-profile-popover]');
16
+
if(!p)return;
17
+
var modal=document.getElementById('vouch-modal-'+p.dataset.vouchModalId);
18
+
if(modal&&modal.matches(':popover-open'))return;
19
+
p.classList.add('hidden');
20
+
})(this)">
21
+
<a href="/{{ $handle }}" title="{{ $handle }}"
22
+
hx-get="/profile/popover?did={{ $did }}"
23
+
hx-trigger="mouseenter once"
24
+
hx-target="next [data-profile-popover-content]"
25
+
hx-swap="innerHTML">
11
26
<img
12
27
src="{{ tinyAvatar $did }}"
13
28
alt=""
···
32
47
{{ template "fragments/icons/shield-indirect-vouch" "w-full h-full text-white dark:text-gray-900" }}
33
48
{{ else if $vr.IsIndirectDenounce }}
34
49
{{ template "fragments/icons/shield-indirect-denounce" "w-full h-full text-white dark:text-gray-900" }}
35
-
{{ else }}
36
-
{{ template "fragments/icons/shield-empty" "w-full h-full" }}
37
50
{{ end }}
38
51
</button>
39
52
{{ end }}
40
53
{{ end }}
54
+
<div data-profile-popover
55
+
data-vouch-modal-id="{{ normalizeForHtmlId $did }}"
56
+
class="hidden z-[9999] pt-1 w-72"
57
+
style="position:fixed;">
58
+
<div data-profile-popover-content
59
+
class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-sm p-3">
60
+
<div class="flex items-center justify-center py-4">
61
+
{{ i "loader-circle" "w-5 h-5 animate-spin text-gray-400" }}
62
+
</div>
63
+
</div>
64
+
</div>
41
65
</div>
42
66
{{ if $vr }}
43
67
{{ if ne $did $vr.ViewerDid }}
+59
appview/pages/templates/user/fragments/profilePopover.html
+59
appview/pages/templates/user/fragments/profilePopover.html
···
1
+
{{ define "user/fragments/profilePopover" }}
2
+
{{ $handle := resolve .UserDid }}
3
+
<div class="space-y-2 dark:text-white">
4
+
5
+
<div class="flex items-center flex-row flex-nowrap gap-2">
6
+
<a href="/{{ $handle }}">
7
+
<img
8
+
src="{{ tinyAvatar .UserDid }}"
9
+
alt=""
10
+
class="rounded-full border border-gray-300 dark:border-gray-700 size-10"
11
+
/>
12
+
</a>
13
+
<div class="min-w-0">
14
+
<p title="{{ $handle }}" class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">
15
+
<a href="/{{ $handle }}">{{ $handle }}</a>
16
+
</p>
17
+
{{ with .Profile }}
18
+
{{ if .Pronouns }}
19
+
<p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p>
20
+
{{ end }}
21
+
{{ end }}
22
+
</div>
23
+
</div>
24
+
25
+
<div class="text-sm space-y-2">
26
+
{{ with .Profile }}
27
+
{{ if .Description }}
28
+
<p class="line-clamp-3">{{ .Description }}</p>
29
+
{{ end }}
30
+
{{ end }}
31
+
32
+
<div class="flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
33
+
{{ i "users" "size-4" }}
34
+
<a href="/{{ $handle }}?tab=followers">{{ .Stats.FollowersCount }} followers</a>
35
+
<span class="select-none after:content-['·']"></span>
36
+
<a href="/{{ $handle }}?tab=following">{{ .Stats.FollowingCount }} following</a>
37
+
</div>
38
+
39
+
{{ if and .LoggedInUser (ne .FollowStatus.String "IsSelf") }}
40
+
<div class="flex items-center gap-2">
41
+
{{ template "user/fragments/follow" . }}
42
+
{{ template "user/fragments/vouchButton" . }}
43
+
</div>
44
+
45
+
{{ if .VouchRelationship }}
46
+
{{ if .VouchRelationship.IndirectVouches }}
47
+
{{ template "user/fragments/networkVouches" .VouchRelationship }}
48
+
{{ end }}
49
+
{{ end }}
50
+
{{ end }}
51
+
</div>
52
+
53
+
</div>
54
+
55
+
{{/* render the vouch modal outside the popover content div so the popover api places it in the top layer correctly */}}
56
+
{{ if and .LoggedInUser (ne .FollowStatus.String "IsSelf") }}
57
+
{{ template "user/fragments/vouchPopover" . }}
58
+
{{ end }}
59
+
{{ end }}