From 422c3b6d1ac0dfba06a0e07b9f437718919493df Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Fri, 24 Apr 2026 16:50:24 -0400
Subject: [PATCH] use avatar in subscribe box

---
 components/Subscribe/HandleSubscribe.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/Subscribe/HandleSubscribe.tsx b/components/Subscribe/HandleSubscribe.tsx
index 1d96823f..cb11cca7 100644
--- a/components/Subscribe/HandleSubscribe.tsx
+++ b/components/Subscribe/HandleSubscribe.tsx
@@ -10,6 +10,9 @@ import { useToaster } from "components/Toast";
 import { DotLoader } from "components/utils/DotLoader";
 import type { OAuthSessionError } from "src/atproto-oauth";
 import { HandleInput } from "./HandleInput";
+import { Avatar } from "components/Avatar";
+import { useIdentityData } from "components/IdentityProvider";
+import { useRecordFromDid } from "src/utils/useRecordFromDid";
 const apps = [
   { name: "Leaflet", logo: "/logos/leaflet.svg" },
   { name: "Bluesky", logo: "/logos/bluesky.svg" },
@@ -46,6 +49,8 @@ export const SubscribeWithHandle = (props: {
   };
 }) => {
   let toaster = useToaster();
+  let { identity } = useIdentityData();
+  let { data: record } = useRecordFromDid(identity?.atp_did);
   let [loading, setLoading] = useState(false);
   let [subscribing, setSubscribing] = useState(false);
   let [oauthError, setOauthError] = useState<OAuthSessionError | null>(null);
@@ -86,7 +91,11 @@ export const SubscribeWithHandle = (props: {
             <>
               <span className="shrink-0">Subscribe as</span>
               <span className="flex gap-1 items-center max-w-full grow min-w-0">
-                <div className="w-4 h-4 shrink-0 rounded-full bg-test" />
+                <Avatar
+                  size="tiny"
+                  src={record?.avatar}
+                  displayName={record?.displayName || record?.handle}
+                />
 
                 <div className="grow truncate">{props.user.handle}</div>
               </span>
-- 
2.51.2