initial commit

src/components/profile/FriendSpace.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  /**
+   * "Tom's Friend Space" — the grid of tiny avatars with names above them.
+   *
+   * Mastodon lets an account hide its follower/following lists, and remote
+   * accounts often return an empty list rather than an error, so the count and
+   * the grid are allowed to disagree; the count is authoritative.
+   */
+  import type { Account } from '$lib/api/types'
+  import { displayNameOf, formatCount, profilePath } from '$lib/util/profile'
+  import Module from '../common/Module.svelte'
+
+  interface Props {
+    title: string
+    /** The subject, used in "Tom has 527 friends." */
+    ownerName: string
+    friends: Account[]
+    total: number
+    viewAllHref: string
+    loading?: boolean
+    /** The list is withheld by the account's privacy settings. */
+    hidden?: boolean
+    /** The count is withheld too, so `total` is not meaningful. */
+    countHidden?: boolean
+    compact?: boolean
+  }
+
+  let {
+    title,
+    ownerName,
+    friends,
+    total,
+    viewAllHref,
+    loading = false,
+    hidden = false,
+    countHidden = false,
+    compact = false,
+  }: Props = $props()
+</script>
+
+<Module {title} variant="band">
+  {#snippet action()}
+    <a href={viewAllHref}>[view all]</a>
+  {/snippet}
+
+  <!-- Never render a withheld count as "0 friends" — that reports a privacy
+       setting as a fact about the person. -->
+  {#if countHidden}
+    <p class="friend-count">{ownerName} keeps their friend count private.</p>
+  {:else}
+    <p class="friend-count">
+      {ownerName} has <span class="friend-count-value">{formatCount(total)}</span>
+      friend{total === 1 ? '' : 's'}.
+    </p>
+  {/if}
+
+  {#if hidden}
+    <p class="empty-note">This friends list is private.</p>
+  {:else if loading && friends.length === 0}
+    <p class="loading-note">Loading friends&hellip;</p>
+  {:else if friends.length === 0}
+    <p class="empty-note">No friends to show yet.</p>
+  {:else}
+    <ul class="friend-grid" class:friend-grid--compact={compact}>
+      {#each friends as friend (friend.id)}
+        <li class="friend-card" data-account={friend.acct}>
+          <a class="friend-card-link" href={profilePath(friend)}>
+            <span class="friend-card-name">{displayNameOf(friend)}</span>
+            <img
+              class="friend-card-photo"
+              src={friend.avatar_static || friend.avatar}
+              alt=""
+              loading="lazy"
+              decoding="async"
+            />
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</Module>