Monorepo for Tangled
appview/pages: introduce fragments for just avatars
we already have picHandle and picHandle link, this change adds pic and
picLink.
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Jan 27, 2026, 10:05 AM UTC)
dc2cc2b3
ce33d485
+38
-43
+3
-7
appview/pages/templates/fragments/tinyAvatarList.html
+3
-7
appview/pages/templates/fragments/tinyAvatarList.html
···
5
5
<div class="inline-flex items-center -space-x-3">
6
6
{{ $c := "z-50 z-40 z-30 z-20 z-10" }}
7
7
{{ range $i, $p := $ps }}
8
-
<a href="/{{ resolve . }}" title="{{ resolve . }}">
9
-
<img
10
-
src="{{ tinyAvatar . }}"
11
-
alt=""
12
-
class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-{{sub 5 $i}}0 {{ $classes }}"
13
-
/>
14
-
</a>
8
+
{{ $zIdx := printf "z-%d0" (sub 5 $i) }}
9
+
{{ $classes = printf "%s %s" $zIdx $classes }}
10
+
{{ template "user/fragments/picLink" (list . $classes ) }}
15
11
{{ end }}
16
12
17
13
{{ if gt (len $all) 5 }}
+2
-6
appview/pages/templates/layouts/fragments/topbar.html
+2
-6
appview/pages/templates/layouts/fragments/topbar.html
···
46
46
<details class="relative inline-block text-left nav-dropdown">
47
47
<summary class="cursor-pointer list-none flex items-center gap-1">
48
48
{{ $user := .Active.Did }}
49
-
<img
50
-
src="{{ tinyAvatar $user }}"
51
-
alt=""
52
-
class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
53
-
/>
49
+
{{ template "user/fragments/pic" (list $user "size-6") }}
54
50
<span class="hidden md:inline">{{ $user | resolve | truncateAt30 }}</span>
55
51
</summary>
56
52
<div class="absolute right-0 mt-4 rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 shadow-lg z-50 text-sm" style="width: 14rem;">
···
68
64
hx-swap="none"
69
65
class="{{$linkStyle}} w-full text-left pl-3"
70
66
>
71
-
<img src="{{ tinyAvatar .Did }}" alt="" class="rounded-full size-6 flex-shrink-0 border border-gray-300 dark:border-gray-700" />
67
+
{{ template "user/fragments/pic" (list .Did "size-6") }}
72
68
<span class="truncate flex-1">{{ .Did | resolve }}</span>
73
69
</button>
74
70
{{ end }}
+2
-10
appview/pages/templates/repo/issues/fragments/commentList.html
+2
-10
appview/pages/templates/repo/issues/fragments/commentList.html
···
41
41
{{ define "topLevelComment" }}
42
42
<div class="rounded px-6 py-4 bg-white dark:bg-gray-800 flex gap-2 ">
43
43
<div class="flex-shrink-0">
44
-
<img
45
-
src="{{ tinyAvatar .Comment.Did }}"
46
-
alt=""
47
-
class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900"
48
-
/>
44
+
{{ template "user/fragments/picLink" (list .Comment.Did "size-8 mr-1") }}
49
45
</div>
50
46
<div class="flex-1 min-w-0">
51
47
{{ template "repo/issues/fragments/issueCommentHeader" . }}
···
57
53
{{ define "replyComment" }}
58
54
<div class="py-4 pr-4 w-full mx-auto overflow-hidden flex gap-2 ">
59
55
<div class="flex-shrink-0">
60
-
<img
61
-
src="{{ tinyAvatar .Comment.Did }}"
62
-
alt=""
63
-
class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900"
64
-
/>
56
+
{{ template "user/fragments/picLink" (list .Comment.Did "size-8 mr-1") }}
65
57
</div>
66
58
<div class="flex-1 min-w-0">
67
59
{{ template "repo/issues/fragments/issueCommentHeader" . }}
+1
-5
appview/pages/templates/repo/issues/fragments/replyIssueCommentPlaceholder.html
+1
-5
appview/pages/templates/repo/issues/fragments/replyIssueCommentPlaceholder.html
···
1
1
{{ define "repo/issues/fragments/replyIssueCommentPlaceholder" }}
2
2
<div class="py-2 px-6 border-t flex gap-2 items-center border-gray-300 dark:border-gray-700">
3
3
{{ if .LoggedInUser }}
4
-
<img
5
-
src="{{ tinyAvatar .LoggedInUser.Did }}"
6
-
alt=""
7
-
class="rounded-full size-8 mr-1 border-2 border-gray-300 dark:border-gray-700"
8
-
/>
4
+
{{ template "user/fragments/pic" (list .LoggedInUser.Did "size-8 mr-1") }}
9
5
{{ end }}
10
6
<input
11
7
class="w-full p-0 border-none focus:outline-none bg-transparent"
+2
-10
appview/pages/templates/repo/pulls/pull.html
+2
-10
appview/pages/templates/repo/pulls/pull.html
···
265
265
flex gap-2 sticky top-0 z-20">
266
266
<!-- left column: just profile picture -->
267
267
<div class="flex-shrink-0 pt-2">
268
-
<img
269
-
src="{{ tinyAvatar $root.Pull.OwnerDid }}"
270
-
alt=""
271
-
class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900"
272
-
/>
268
+
{{ template "user/fragments/picLink" (list $root.Pull.OwnerDid "size-8") }}
273
269
</div>
274
270
<!-- right column -->
275
271
<div class="flex-1 min-w-0 flex flex-col gap-1">
···
568
564
<div id="comment-{{.ID}}" class="flex gap-2 -ml-4 py-4 w-full mx-auto">
569
565
<!-- left column: profile picture -->
570
566
<div class="flex-shrink-0 h-fit relative">
571
-
<img
572
-
src="{{ tinyAvatar .OwnerDid }}"
573
-
alt=""
574
-
class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-5"
575
-
/>
567
+
{{ template "user/fragments/picLink" (list .OwnerDid "size-8") }}
576
568
</div>
577
569
<!-- right column: name and body in two rows -->
578
570
<div class="flex-1 min-w-0">
+1
-4
appview/pages/templates/repo/settings/access.html
+1
-4
appview/pages/templates/repo/settings/access.html
···
32
32
{{ $handle := resolve .Did }}
33
33
<div class="border border-gray-200 dark:border-gray-700 rounded p-4">
34
34
<div class="flex items-center gap-3">
35
-
<img
36
-
src="{{ fullAvatar $handle }}"
37
-
alt="{{ $handle }}"
38
-
class="rounded-full h-10 w-10 border border-gray-300 dark:border-gray-600 flex-shrink-0"/>
35
+
{{ template "user/fragments/picLink" (list .Did "size-10") }}
39
36
40
37
<div class="flex-1 min-w-0">
41
38
<a href="/{{ $handle }}" class="block truncate">
+11
appview/pages/templates/user/fragments/pic.html
+11
appview/pages/templates/user/fragments/pic.html
+15
appview/pages/templates/user/fragments/picLink.html
+15
appview/pages/templates/user/fragments/picLink.html
···
1
+
{{ define "user/fragments/picLink" }}
2
+
{{ $did := index . 0 }}
3
+
{{ $classes := index . 1 }}
4
+
{{ $handle := resolve $did }}
5
+
<a href="/{{ $handle }}" title="{{ $handle }}">
6
+
<img
7
+
src="{{ tinyAvatar $did }}"
8
+
alt=""
9
+
class="rounded-full border border-gray-300 dark:border-gray-700 {{ $classes }}"
10
+
/>
11
+
</a>
12
+
{{ end }}
13
+
14
+
15
+
+1
-1
appview/pages/templates/user/login.html
+1
-1
appview/pages/templates/user/login.html
···
48
48
hx-swap="none"
49
49
class="flex items-center gap-2 flex-1 text-left min-w-0"
50
50
>
51
-
<img src="{{ tinyAvatar .Did }}" alt="" class="rounded-full h-8 w-8 flex-shrink-0 border border-gray-300 dark:border-gray-700" />
51
+
{{ template "user/fragments/pic" (list .Did "size-8") }}
52
52
<div class="flex flex-col min-w-0">
53
53
<span class="text-sm font-medium dark:text-white truncate">{{ .Did | resolve | truncateAt30 }}</span>
54
54
<span class="text-xs text-gray-500 dark:text-gray-400">Click to switch</span>