From 5c8ef5347ffa5bb76e81bc54794311fcbc2512b0 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Sun, 3 May 2026 16:08:11 +0100
Subject: [PATCH] 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>
---
 .../templates/user/fragments/picLink.html     | 32 ++++++++--
 .../user/fragments/profilePopover.html        | 59 +++++++++++++++++++
 2 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 appview/pages/templates/user/fragments/profilePopover.html

diff --git a/appview/pages/templates/user/fragments/picLink.html b/appview/pages/templates/user/fragments/picLink.html
index 33d5629a..a769c481 100644
--- a/appview/pages/templates/user/fragments/picLink.html
+++ b/appview/pages/templates/user/fragments/picLink.html
@@ -6,8 +6,23 @@
   {{ if ge (len .) 3 }}
     {{ $vr = index . 2 }}
   {{ end }}
-  <div class="relative inline-block">
-    <a href="/{{ $handle }}" title="{{ $handle }}">
+  <div class="relative inline-block"
+       onmouseenter="(function(el){
+         var r=el.getBoundingClientRect(),p=el.querySelector('[data-profile-popover]');
+         if(p){p.style.top=r.bottom+'px';p.style.left=r.left+'px';p.classList.remove('hidden');}
+       })(this)"
+       onmouseleave="(function(el){
+         var p=el.querySelector('[data-profile-popover]');
+         if(!p)return;
+         var modal=document.getElementById('vouch-modal-'+p.dataset.vouchModalId);
+         if(modal&&modal.matches(':popover-open'))return;
+         p.classList.add('hidden');
+       })(this)">
+    <a href="/{{ $handle }}" title="{{ $handle }}"
+       hx-get="/profile/popover?did={{ $did }}"
+       hx-trigger="mouseenter once"
+       hx-target="next [data-profile-popover-content]"
+       hx-swap="innerHTML">
       <img
           src="{{ tinyAvatar $did }}"
           alt=""
@@ -32,12 +47,21 @@
             {{ template "fragments/icons/shield-indirect-vouch" "w-full h-full text-white dark:text-gray-900" }}
           {{ else if $vr.IsIndirectDenounce }}
             {{ template "fragments/icons/shield-indirect-denounce" "w-full h-full text-white dark:text-gray-900" }}
-          {{ else }}
-            {{ template "fragments/icons/shield-empty" "w-full h-full" }}
           {{ end }}
         </button>
       {{ end }}
     {{ end }}
+    <div data-profile-popover
+         data-vouch-modal-id="{{ normalizeForHtmlId $did }}"
+         class="hidden z-[9999] pt-1 w-72"
+         style="position:fixed;">
+      <div data-profile-popover-content
+           class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-sm p-3">
+        <div class="flex items-center justify-center py-4">
+          {{ i "loader-circle" "w-5 h-5 animate-spin text-gray-400" }}
+        </div>
+      </div>
+    </div>
   </div>
   {{ if $vr }}
     {{ if ne $did $vr.ViewerDid }}
diff --git a/appview/pages/templates/user/fragments/profilePopover.html b/appview/pages/templates/user/fragments/profilePopover.html
new file mode 100644
index 00000000..3cf20f83
--- /dev/null
+++ b/appview/pages/templates/user/fragments/profilePopover.html
@@ -0,0 +1,59 @@
+{{ define "user/fragments/profilePopover" }}
+{{ $handle := resolve .UserDid }}
+<div class="space-y-2 dark:text-white">
+
+  <div class="flex items-center flex-row flex-nowrap gap-2">
+    <a href="/{{ $handle }}">
+      <img
+        src="{{ tinyAvatar .UserDid }}"
+        alt=""
+        class="rounded-full border border-gray-300 dark:border-gray-700 size-10"
+      />
+    </a>
+    <div class="min-w-0">
+      <p title="{{ $handle }}" class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">
+        <a href="/{{ $handle }}">{{ $handle }}</a>
+      </p>
+      {{ with .Profile }}
+        {{ if .Pronouns }}
+          <p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p>
+        {{ end }}
+      {{ end }}
+    </div>
+  </div>
+
+  <div class="text-sm space-y-2">
+    {{ with .Profile }}
+      {{ if .Description }}
+        <p class="line-clamp-3">{{ .Description }}</p>
+      {{ end }}
+    {{ end }}
+
+    <div class="flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
+      {{ i "users" "size-4" }}
+      <a href="/{{ $handle }}?tab=followers">{{ .Stats.FollowersCount }} followers</a>
+      <span class="select-none after:content-['·']"></span>
+      <a href="/{{ $handle }}?tab=following">{{ .Stats.FollowingCount }} following</a>
+    </div>
+
+    {{ if and .LoggedInUser (ne .FollowStatus.String "IsSelf") }}
+      <div class="flex items-center gap-2">
+        {{ template "user/fragments/follow" . }}
+        {{ template "user/fragments/vouchButton" . }}
+      </div>
+
+      {{ if .VouchRelationship }}
+        {{ if .VouchRelationship.IndirectVouches }}
+          {{ template "user/fragments/networkVouches" .VouchRelationship }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
+  </div>
+
+</div>
+
+  {{/* render the vouch modal outside the popover content div so the popover api places it in the top layer correctly */}}
+  {{ if and .LoggedInUser (ne .FollowStatus.String "IsSelf") }}
+    {{ template "user/fragments/vouchPopover" . }}
+  {{ end }}
+{{ end }}
-- 
2.51.2