statusphere

src/lib/AccountComponent.svelte

···
 <script lang="ts">
   import type { AccountMetadata } from "./pdsfetch";
-  import { getTealNowListeningTo } from "./pdsfetch";
+  import { getTealNowListeningTo, getStatusSphere } from "./pdsfetch";
   const { account }: { account: AccountMetadata } = $props();
   import { Config } from "../../config";
 
   let nowListeningTo: string | null = $state(null);
+  let statusEmoji: string | null = $state(null);
 
   $effect(() => {
       if(account.did){
         getTealNowListeningTo(account.did).then(res => {
             nowListeningTo = res;
         });
+        getStatusSphere(account.did).then(res => {
+            statusEmoji = res;
+        })
       }
   })
 </script>
···
 <a id="link" href="{Config.FRONTEND_URL}/profile/{account.did}">
   <div id="accountContainer">
     {#if account.avatarCid}
-      <img
-        id="avatar"
-        alt="avatar of {account.displayName}"
-        src="https://cdn.bsky.app/img/feed_thumbnail/plain/{account.did}/{account.avatarCid}@jpeg"
-      />
+      <span class="avatar-wrapper">
+          {#if statusEmoji}
+            <span class="avatar-badge" aria-hidden="true" title="icon">{statusEmoji}</span>
+          {/if}
+        <img
+          id="avatar"
+          alt="avatar of {account.displayName}"
+          src="https://cdn.bsky.app/img/feed_thumbnail/plain/{account.did}/{account.avatarCid}@jpeg"
+        />
+      </span>
       <div id="accountName">
         {account.displayName || account.handle || account.did}
       </div>
     {:else}
-      <img
-         id="avatar"
-         alt="unknown avatar of {account.displayName}"
-         src="/unknown.png"
-        />
+      <span class="avatar-wrapper">
+          {#if statusEmoji}
+            <span class="avatar-badge" aria-hidden="true" title="icon">{statusEmoji}</span>
+          {/if}
+
+        <img
+           id="avatar"
+           alt="unknown avatar of {account.displayName}"
+           src="/unknown.png"
+          />
+      </span>
       <div id="accountName" class="no-avatar">
         {account.displayName || account.handle || account.did}
       </div>
···
 </a>
 
 <style>
-
+  .avatar-wrapper { position: relative; display: inline-block; }
+  .avatar-badge { position: absolute; top: 34px; left: 40px; font-size: 24px; line-height: 1; }
 </style>

src/lib/pdsfetch.ts

···
     return null;
 }
 
+type statusSphere = {
+    status: string;
+}
+
+const getStatusSphere = async (did: At.Did) => {
+    const { data } = await rpc.get("com.atproto.repo.listRecords", {
+        params: {
+            repo: did as At.Identifier,
+            collection: "xyz.statusphere.status",
+            limit: 1
+        },
+    });
+    if (data.records.length > 0) {
+        const record = data.records[0].value as statusSphere;
+        return record.status;
+    }
+    return null;
+}
+
 type CacheEntry<T> = {
     data: T;
     expire_timestamp: number;
···
     }
 }
 
-export { getAllMetadataFromPds, getNextPosts, Post, blueskyHandleFromDid, getTealNowListeningTo };
+export { getAllMetadataFromPds, getNextPosts, Post, blueskyHandleFromDid, getTealNowListeningTo, getStatusSphere };
 export type { AccountMetadata };