From d744cf053a8d29a6575a4ca6c67949b349e809c1 Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Wed, 20 May 2026 15:07:25 +0200
Subject: [PATCH] added profile popover on hover of handle/avatar

---
 src/api/bluesky_api.ts                       |  14 +-
 src/components/ProfilePopover.svelte         |  71 ++++++++++
 src/components/ProfilePopoverContents.svelte | 142 +++++++++++++++++++
 src/components/posts/PostHeader.svelte       |  40 ++++--
 4 files changed, 251 insertions(+), 16 deletions(-)
 create mode 100644 src/components/ProfilePopover.svelte
 create mode 100644 src/components/ProfilePopoverContents.svelte

diff --git a/src/api/bluesky_api.ts b/src/api/bluesky_api.ts
index 6b34788..b0781bc 100644
--- a/src/api/bluesky_api.ts
+++ b/src/api/bluesky_api.ts
@@ -1,6 +1,6 @@
 import { HandleCache } from './handle_cache.js';
 import { appView, constellationAPI } from '../api.js';
-import { APIError, Minisky, type FetchAllOnPageLoad, type MiniskyConfig, type MiniskyOptions } from './minisky.js';
+import { APIError, Minisky, type FetchAllOnPageLoad, type MiniskyConfig, type MiniskyOptions, type MiniskyRequestOptions } from './minisky.js';
 import { atURI, feedPostTime } from '../utils.js';
 import { Post } from '../models/posts.js';
 import { parseBlueskyPostURL } from '../router.js';
@@ -101,14 +101,14 @@ export class BlueskyAPI extends Minisky {
     return await this.getRequest('app.bsky.feed.getPostThread', { uri: uri, depth: 10 });
   }
 
-  async loadUserProfile(handle: string): Promise<json> {
-    if (this.profiles[handle]) {
+  async loadUserProfile(handle: string, full: boolean = false, options: MiniskyRequestOptions = {}): Promise<json> {
+    if (this.profiles[handle] && (!full || 'description' in this.profiles[handle])) {
       return this.profiles[handle];
-    } else {
-      let profile = await this.getRequest('app.bsky.actor.getProfile', { actor: handle });
-      this.cacheProfile(profile);
-      return profile;
     }
+
+    let profile = await this.getRequest('app.bsky.actor.getProfile', { actor: handle }, options);
+    this.cacheProfile(profile);
+    return profile;
   }
 
   async autocompleteUsers(query: string): Promise<json[]> {
diff --git a/src/components/ProfilePopover.svelte b/src/components/ProfilePopover.svelte
new file mode 100644
index 0000000..47d1d60
--- /dev/null
+++ b/src/components/ProfilePopover.svelte
@@ -0,0 +1,71 @@
+<script module lang="ts">
+  const supportsAnchorPositioning =
+    CSS.supports('anchor-name: --x')
+    && CSS.supports('anchor-scope: --x')
+    && CSS.supports('position-anchor: --x')
+    && CSS.supports('position-area: block-start');
+</script>
+
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { api } from '../api.js';
+  import ProfilePopoverContents from './ProfilePopoverContents.svelte';
+
+  const hoverDelay = 500;
+
+  let { did, anchor }: { did: string, anchor: HTMLElement } = $props();
+
+  let profile: json | undefined = $state();
+  let popover: HTMLDivElement | undefined = $state();
+
+  async function loadProfile(abortSignal: AbortSignal) {
+    try {
+      let loadedProfile = await api.loadUserProfile(did, true, { abortSignal });
+
+      if (!abortSignal.aborted) {
+        profile = loadedProfile;
+      }
+
+      return loadedProfile;
+    } catch (error) {
+      if (!abortSignal.aborted) {
+        console.warn('Could not load profile for popover:', error);
+      }
+
+      return null;
+    }
+  }
+
+  $effect(() => {
+    if (!supportsAnchorPositioning) { return }
+
+    anchor.style.setProperty('anchor-name', '--profile-popover-anchor');
+
+    let abortController = new AbortController();
+    let loadProfilePromise = loadProfile(abortController.signal);
+
+    let timer = window.setTimeout(async () => {
+      let loadedProfile = await loadProfilePromise;
+
+      if (abortController.signal.aborted || !loadedProfile) return;
+
+      await tick();
+      popover?.showPopover();
+    }, hoverDelay);
+
+    return () => {
+      abortController.abort();
+      window.clearTimeout(timer);
+
+      if (popover?.matches(':popover-open')) {
+        popover.hidePopover();
+      }
+
+      anchor.style.removeProperty('anchor-name');
+    };
+  });
+</script>
+
+{#if profile}
+  <ProfilePopoverContents {profile} bind:element={popover} />
+{/if}
diff --git a/src/components/ProfilePopoverContents.svelte b/src/components/ProfilePopoverContents.svelte
new file mode 100644
index 0000000..b7543ff
--- /dev/null
+++ b/src/components/ProfilePopoverContents.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+  type Props = {
+    profile: json;
+    element?: HTMLDivElement | undefined;
+  };
+
+  let { profile, element = $bindable() }: Props = $props();
+
+  let displayName = $derived.by(() => {
+    let name = profile.displayName?.trim();
+
+    if (name) {
+      return name;
+    } else if (profile.handle.endsWith('.bsky.social')) {
+      return profile.handle.replace(/\.bsky\.social$/, '');
+    } else {
+      return profile.handle;
+    }
+  });
+
+  let handle = $derived.by(() => {
+    if (profile.handle.endsWith('.ap.brid.gy')) {
+      return `@${profile.handle.replace(/\.ap\.brid\.gy$/, '').replace('.', '@')}`;
+    } else if (profile.handle == 'handle.invalid') {
+      return '[invalid handle]';
+    } else {
+      return `@${profile.handle}`;
+    }
+  });
+</script>
+
+<div popover class="profile-popover" bind:this={element}>
+  <div class="contents">
+    <div class="avatar-column">
+      {#if profile.viewer?.muted}
+        <i class="muted-avatar fa-regular fa-circle-user fa-3x"></i>
+      {:else if profile.avatar}
+        <img class="avatar" alt="Avatar" loading="lazy" src={profile.avatar}>
+      {:else}
+        <i class="no-avatar fa-regular fa-face-smile fa-3x"></i>
+      {/if}
+    </div>
+
+    <div class="main-column">
+      <h3>{displayName}</h3>
+      <div class="handle">{handle}</div>
+
+      {#if profile.pronouns}
+        <div class="pronouns">{profile.pronouns}</div>
+      {/if}
+
+      {#if profile.description}
+        <p>{profile.description}</p>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .profile-popover {
+    position: fixed;
+    width: 360px;
+    border: 1px solid #dddddd;
+    border-radius: 12px;
+    background: #fff;
+    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16);
+    box-sizing: border-box;
+    position-anchor: --profile-popover-anchor;
+    position-area: bottom center;
+    position-try-fallbacks: top center;
+    margin: unset;
+  }
+
+  .contents {
+    display: flex;
+    gap: 15px;
+    padding: 14px 12px 12px 14px;
+  }
+
+  .avatar-column {
+    flex: 0 0 auto;
+  }
+
+  .avatar {
+    width: 64px;
+    height: 64px;
+    border-radius: 32px;
+    display: block;
+  }
+
+  .main-column {
+    min-width: 0;
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 15pt;
+    line-height: 1.2;
+  }
+
+  .handle {
+    margin-top: 2px;
+    color: #666;
+    font-size: 11pt;
+  }
+
+  .main-column p {
+    margin: 14px 0 0;
+    color: #333;
+    font-size: 11pt;
+    line-height: 1.45;
+  }
+
+  .pronouns {
+    margin-top: 4px;
+    color: #9a9a9a;
+    font-size: 10.5pt;
+  }
+
+  .no-avatar, .muted-avatar {
+    color: #aaa;
+    background-color: #eee;
+    border-radius: 36px;
+    vertical-align: middle;
+  }
+
+  .muted-avatar {
+    color: #bbb;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .profile-popover {
+      border-color: #4a4a4a;
+      background: #333;
+      box-shadow: 0 7px 20px rgba(0, 0, 0, 0.4);
+    }
+
+    .handle { color: #aaa; }
+    .pronouns { color: #7f7f7f; }
+    .main-column p { color: #ddd; }
+  }
+</style>
diff --git a/src/components/posts/PostHeader.svelte b/src/components/posts/PostHeader.svelte
index 70992fc..fba88b1 100644
--- a/src/components/posts/PostHeader.svelte
+++ b/src/components/posts/PostHeader.svelte
@@ -3,11 +3,13 @@
   import { avatarPreloader } from '../../utils.js';
   import { PostPresenter } from '../../utils/post_presenter.js';
   import PostSubtreeLink from './PostSubtreeLink.svelte';
+  import ProfilePopover from '../ProfilePopover.svelte';
 
   let { post, placement } = getPostContext();
   let presenter = new PostPresenter(post, placement);
 
   let avatar: HTMLImageElement | undefined = $state();
+  let activeAnchor: HTMLElement | undefined = $state();
 
   $effect(() => {
     if (avatar) {
@@ -18,24 +20,35 @@
       avatar && avatarPreloader.unobserve(avatar);
     };
   });
+
+  function showPopover(event: MouseEvent) {
+    activeAnchor = event.currentTarget as HTMLElement;
+  }
+
+  function hidePopover() {
+    activeAnchor = undefined;
+  }
 </script>
 
+<div class="post-header">
 <h2>
-  {#if post.muted}
-    <i class="muted-avatar fa-regular fa-circle-user fa-2x"></i>
-  {:else if post.author.avatar}
-    <img class="avatar" alt="Avatar" loading="lazy" src={post.author.avatar} bind:this={avatar}>
-  {:else}
-    <i class="no-avatar fa-regular fa-face-smile fa-2x"></i>
-  {/if}
+  <span class="avatar-wrapper" onmouseenter={showPopover} onmouseleave={hidePopover}>
+    {#if post.muted}
+      <i class="muted-avatar fa-regular fa-circle-user fa-2x"></i>
+    {:else if post.author.avatar}
+      <img class="avatar" alt="Avatar" loading="lazy" src={post.author.avatar} bind:this={avatar}>
+    {:else}
+      <i class="no-avatar fa-regular fa-face-smile fa-2x"></i>
+    {/if}
+  </span>
 
   {post.authorDisplayName}
 
   {#if post.isFediPost}
-    <a class="handle" href="{post.linkToAuthor}" target="_blank">@{post.authorFediHandle}</a>
+    <a class="handle" href="{post.linkToAuthor}" target="_blank" onmouseenter={showPopover} onmouseleave={hidePopover}>@{post.authorFediHandle}</a>
     <img src="icons/mastodon.svg" class="mastodon" alt="Mastodon logo">
   {:else}
-    <a class="handle" href="{post.linkToAuthor}" target="_blank">{post.hasValidHandle ? `@${post.author.handle}` : '[invalid handle]'}</a>
+    <a class="handle" href="{post.linkToAuthor}" target="_blank" onmouseenter={showPopover} onmouseleave={hidePopover}>{post.hasValidHandle ? `@${post.author.handle}` : '[invalid handle]'}</a>
   {/if}
 
   <span class="separator">&bull;</span>
@@ -53,7 +66,16 @@
   {/if}
 </h2>
 
+{#if activeAnchor}
+  <ProfilePopover did={post.author.did} anchor={activeAnchor} />
+{/if}
+</div>
+
 <style>
+  .post-header {
+    anchor-scope: --profile-popover-anchor;
+  }
+
   h2 {
     font-size: 12pt;
     margin-bottom: 0;
-- 
2.51.2