From dfc4085b49cf04e79a419a3819548e5722841fd3 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 8 Dec 2025 06:53:01 +0000
Subject: [PATCH] appview/pages: introduce "tinyAvatarList" template
Change-Id: pnwvyvnvnllzsyuyzorupqmtqomqloqo

given a list of DIDs, this forms a list of profile pictures capped at 5
profile pictures. this component will be used to represent a collection
of users (e.g.: participants, coauthors).

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../templates/fragments/tinyAvatarList.html   | 22 +++++++++++++++++++
 .../repo/fragments/participants.html          | 17 +-------------
 2 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 appview/pages/templates/fragments/tinyAvatarList.html

diff --git a/appview/pages/templates/fragments/tinyAvatarList.html b/appview/pages/templates/fragments/tinyAvatarList.html
new file mode 100644
index 00000000..3499fd06
--- /dev/null
+++ b/appview/pages/templates/fragments/tinyAvatarList.html
@@ -0,0 +1,22 @@
+{{ define "fragments/tinyAvatarList" }}
+  {{ $all := .all }}
+  {{ $classes := .classes }}
+  {{ $ps := take $all 5 }}
+  <div class="inline-flex items-center -space-x-3">
+    {{ $c := "z-50 z-40 z-30 z-20 z-10" }}
+    {{ range $i, $p := $ps }}
+      <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 }}"
+      />
+    {{ end }}
+
+    {{ if gt (len $all) 5 }}
+      <span class="pl-4 text-gray-500 dark:text-gray-400 text-sm">
+        +{{ sub (len $all) 5 }}
+      </span>
+    {{ end }}
+  </div>
+{{ end }}
+
diff --git a/appview/pages/templates/repo/fragments/participants.html b/appview/pages/templates/repo/fragments/participants.html
index eeb50994..ac78b667 100644
--- a/appview/pages/templates/repo/fragments/participants.html
+++ b/appview/pages/templates/repo/fragments/participants.html
@@ -6,21 +6,6 @@
       <span class="font-bold text-gray-500 dark:text-gray-400 capitalize">Participants</span>
       <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 ml-1">{{ len $all }}</span>
     </div>
-    <div class="flex items-center -space-x-3 mt-2">
-      {{ $c := "z-50 z-40 z-30 z-20 z-10" }}
-      {{ range $i, $p := $ps }}
-        <img
-            src="{{ tinyAvatar . }}"
-            alt=""
-            class="rounded-full h-8 w-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-{{sub 5 $i}}0"
-        />
-      {{ end }}
-
-      {{ if gt (len $all) 5 }}
-        <span class="pl-4 text-gray-500 dark:text-gray-400 text-sm">
-          +{{ sub (len $all) 5 }}
-        </span>
-      {{ end }}
-    </div>
+    {{ template "fragments/tinyAvatarList" (dict "all" $all "classes" "w-8 h-8") }}
   </div>
 {{ end }}
-- 
2.43.0