appview/pages: introduce fragments for just avatars

we already have picHandle and picHandle link, this change adds pic and
picLink.

Signed-off-by: oppiliappan <[e-mail]>

appview/pages/templates/fragments/tinyAvatarList.html

···
   <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 }}

appview/pages/templates/layouts/fragments/topbar.html

···
 <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;">
···
                 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 }}

appview/pages/templates/repo/issues/fragments/commentList.html

···
 {{ 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" . }}
···
 {{ 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" . }}

appview/pages/templates/repo/issues/fragments/replyIssueCommentPlaceholder.html

···
 {{ 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"

appview/pages/templates/repo/pulls/pull.html

···
     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">
···
   <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">

appview/pages/templates/repo/settings/access.html

···
       {{ $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">

appview/pages/templates/user/fragments/pic.html

···
+{{ 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 }}
+
+

appview/pages/templates/user/fragments/picLink.html

···
+{{ 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 }}
+
+
+

appview/pages/templates/user/login.html

···
                                 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>