From dc2cc2b318297aaca96f29a7db9c6b2eaeba092b Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Tue, 27 Jan 2026 09:26:22 +0000
Subject: [PATCH] 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>
---
 .../pages/templates/fragments/tinyAvatarList.html | 10 +++-------
 .../pages/templates/layouts/fragments/topbar.html |  8 ++------
 .../repo/issues/fragments/commentList.html        | 12 ++----------
 .../fragments/replyIssueCommentPlaceholder.html   |  6 +-----
 appview/pages/templates/repo/pulls/pull.html      | 12 ++----------
 appview/pages/templates/repo/settings/access.html |  5 +----
 appview/pages/templates/user/fragments/pic.html   | 11 +++++++++++
 .../pages/templates/user/fragments/picLink.html   | 15 +++++++++++++++
 appview/pages/templates/user/login.html           |  2 +-
 9 files changed, 38 insertions(+), 43 deletions(-)
 create mode 100644 appview/pages/templates/user/fragments/pic.html
 create mode 100644 appview/pages/templates/user/fragments/picLink.html

diff --git a/appview/pages/templates/fragments/tinyAvatarList.html b/appview/pages/templates/fragments/tinyAvatarList.html
index 0b51f60e..7b3515df 100644
--- a/appview/pages/templates/fragments/tinyAvatarList.html
+++ b/appview/pages/templates/fragments/tinyAvatarList.html
@@ -5,13 +5,9 @@
   <div class="inline-flex items-center -space-x-3">
     {{ $c := "z-50 z-40 z-30 z-20 z-10" }}
     {{ range $i, $p := $ps }}
-      <a href="/{{ resolve . }}" title="{{ resolve . }}">
-        <img
-            src="{{ tinyAvatar . }}"
-            alt=""
-            class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-{{sub 5 $i}}0 {{ $classes }}"
-        />
-      </a>
+      {{ $zIdx := printf "z-%d0" (sub 5 $i) }}
+      {{ $classes = printf "%s %s" $zIdx $classes }}
+      {{ template "user/fragments/picLink" (list . $classes ) }}
     {{ end }}
 
     {{ if gt (len $all) 5 }}
diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index 026c7f19..f12ab6ea 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -46,11 +46,7 @@
 <details class="relative inline-block text-left nav-dropdown">
     <summary class="cursor-pointer list-none flex items-center gap-1">
         {{ $user := .Active.Did }}
-        <img
-            src="{{ tinyAvatar $user }}"
-            alt=""
-            class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
-        />
+        {{ template "user/fragments/pic" (list $user "size-6") }}
         <span class="hidden md:inline">{{ $user | resolve | truncateAt30 }}</span>
     </summary>
     <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,7 +64,7 @@
                 hx-swap="none"
                 class="{{$linkStyle}} w-full text-left pl-3"
             >
-                <img src="{{ tinyAvatar .Did }}" alt="" class="rounded-full size-6 flex-shrink-0 border border-gray-300 dark:border-gray-700" />
+                {{ template "user/fragments/pic" (list .Did "size-6") }}
                 <span class="truncate flex-1">{{ .Did | resolve }}</span>
             </button>
           {{ end }}
diff --git a/appview/pages/templates/repo/issues/fragments/commentList.html b/appview/pages/templates/repo/issues/fragments/commentList.html
index f19a62fe..765c397c 100644
--- a/appview/pages/templates/repo/issues/fragments/commentList.html
+++ b/appview/pages/templates/repo/issues/fragments/commentList.html
@@ -41,11 +41,7 @@
 {{ define "topLevelComment" }}
 <div class="rounded px-6 py-4 bg-white dark:bg-gray-800 flex gap-2 ">
   <div class="flex-shrink-0">
-    <img
-        src="{{ tinyAvatar .Comment.Did }}"
-        alt=""
-        class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900"
-    />
+    {{ template "user/fragments/picLink" (list .Comment.Did "size-8 mr-1") }}
   </div>
   <div class="flex-1 min-w-0">
     {{ template "repo/issues/fragments/issueCommentHeader" . }}
@@ -57,11 +53,7 @@
 {{ define "replyComment" }}
 <div class="py-4 pr-4 w-full mx-auto overflow-hidden flex gap-2 ">
   <div class="flex-shrink-0">
-    <img
-        src="{{ tinyAvatar .Comment.Did }}"
-        alt=""
-        class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900"
-    />
+    {{ template "user/fragments/picLink" (list .Comment.Did "size-8 mr-1") }}
   </div>
   <div class="flex-1 min-w-0">
     {{ template "repo/issues/fragments/issueCommentHeader" . }}
diff --git a/appview/pages/templates/repo/issues/fragments/replyIssueCommentPlaceholder.html b/appview/pages/templates/repo/issues/fragments/replyIssueCommentPlaceholder.html
index 2d189a4e..2f812d6c 100644
--- a/appview/pages/templates/repo/issues/fragments/replyIssueCommentPlaceholder.html
+++ b/appview/pages/templates/repo/issues/fragments/replyIssueCommentPlaceholder.html
@@ -1,11 +1,7 @@
 {{ define "repo/issues/fragments/replyIssueCommentPlaceholder" }}
   <div class="py-2 px-6 border-t flex gap-2 items-center border-gray-300 dark:border-gray-700">
     {{ if .LoggedInUser }}
-      <img
-          src="{{ tinyAvatar .LoggedInUser.Did }}"
-          alt=""
-          class="rounded-full size-8 mr-1 border-2 border-gray-300 dark:border-gray-700"
-      />
+      {{ template "user/fragments/pic" (list .LoggedInUser.Did "size-8 mr-1") }}
     {{ end }}
     <input
       class="w-full p-0 border-none focus:outline-none bg-transparent"
diff --git a/appview/pages/templates/repo/pulls/pull.html b/appview/pages/templates/repo/pulls/pull.html
index 1540336f..b13d15c2 100644
--- a/appview/pages/templates/repo/pulls/pull.html
+++ b/appview/pages/templates/repo/pulls/pull.html
@@ -265,11 +265,7 @@
     flex gap-2 sticky top-0 z-20">
     <!-- left column: just profile picture -->
     <div class="flex-shrink-0 pt-2">
-      <img
-          src="{{ tinyAvatar $root.Pull.OwnerDid }}"
-          alt=""
-          class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900"
-      />
+      {{ template "user/fragments/picLink" (list $root.Pull.OwnerDid "size-8") }}
     </div>
     <!-- right column -->
     <div class="flex-1 min-w-0 flex flex-col gap-1">
@@ -568,11 +564,7 @@
   <div id="comment-{{.ID}}" class="flex gap-2 -ml-4 py-4 w-full mx-auto">
     <!-- left column: profile picture -->
     <div class="flex-shrink-0 h-fit relative">
-      <img
-          src="{{ tinyAvatar .OwnerDid }}"
-          alt=""
-          class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-5"
-      />
+      {{ template "user/fragments/picLink" (list .OwnerDid "size-8") }}
     </div>
     <!-- right column: name and body in two rows -->
     <div class="flex-1 min-w-0">
diff --git a/appview/pages/templates/repo/settings/access.html b/appview/pages/templates/repo/settings/access.html
index 39a8e390..719f5cfc 100644
--- a/appview/pages/templates/repo/settings/access.html
+++ b/appview/pages/templates/repo/settings/access.html
@@ -32,10 +32,7 @@
       {{ $handle := resolve .Did }}
       <div class="border border-gray-200 dark:border-gray-700 rounded p-4">
         <div class="flex items-center gap-3">
-          <img
-            src="{{ fullAvatar $handle }}"
-            alt="{{ $handle }}"
-            class="rounded-full h-10 w-10 border border-gray-300 dark:border-gray-600 flex-shrink-0"/>
+          {{ template "user/fragments/picLink" (list .Did "size-10") }}
 
           <div class="flex-1 min-w-0">
             <a href="/{{ $handle }}" class="block truncate">
diff --git a/appview/pages/templates/user/fragments/pic.html b/appview/pages/templates/user/fragments/pic.html
new file mode 100644
index 00000000..b70cdb51
--- /dev/null
+++ b/appview/pages/templates/user/fragments/pic.html
@@ -0,0 +1,11 @@
+{{ define "user/fragments/pic" }}
+  {{ $did := index . 0 }}
+  {{ $classes := index . 1 }}
+  <img
+      src="{{ tinyAvatar $did }}"
+      alt=""
+      class="rounded-full border border-gray-300 dark:border-gray-700 {{ $classes }}"
+  />
+{{ end }}
+
+
diff --git a/appview/pages/templates/user/fragments/picLink.html b/appview/pages/templates/user/fragments/picLink.html
new file mode 100644
index 00000000..096c7d9f
--- /dev/null
+++ b/appview/pages/templates/user/fragments/picLink.html
@@ -0,0 +1,15 @@
+{{ define "user/fragments/picLink" }}
+  {{ $did := index . 0 }}
+  {{ $classes := index . 1 }}
+  {{ $handle := resolve $did  }}
+  <a href="/{{ $handle }}" title="{{ $handle }}">
+    <img
+        src="{{ tinyAvatar $did }}"
+        alt=""
+        class="rounded-full border border-gray-300 dark:border-gray-700 {{ $classes }}"
+    />
+  </a>
+{{ end }}
+
+
+
diff --git a/appview/pages/templates/user/login.html b/appview/pages/templates/user/login.html
index 03cc7f71..53f58975 100644
--- a/appview/pages/templates/user/login.html
+++ b/appview/pages/templates/user/login.html
@@ -48,7 +48,7 @@
                                 hx-swap="none"
                                 class="flex items-center gap-2 flex-1 text-left min-w-0"
                             >
-                                <img src="{{ tinyAvatar .Did }}" alt="" class="rounded-full h-8 w-8 flex-shrink-0 border border-gray-300 dark:border-gray-700" />
+                                {{ template "user/fragments/pic" (list .Did "size-8") }}
                                 <div class="flex flex-col min-w-0">
                                     <span class="text-sm font-medium dark:text-white truncate">{{ .Did | resolve | truncateAt30 }}</span>
                                     <span class="text-xs text-gray-500 dark:text-gray-400">Click to switch</span>
-- 
2.51.2