Populated reply box avatar

ref https://linear.app/tryghost/issue/AP-397

I think we're gonna want to pass this data into the component long
term, but this will do for now, I'm going to look at cleaning up these
components in my next B week

apps/admin-x-activitypub/src/api/activitypub.ts

@@ -203,4 +203,13 @@ export class ActivityPubAPI {
         const response = await this.fetchJSON(url, 'POST', {content});
         return response;
     }
+
+    get userApiUrl() {
+        return new URL(`.ghost/activitypub/users/${this.handle}`, this.apiUrl);
+    }
+
+    async getUser() {
+        const json = await this.fetchJSON(this.userApiUrl);
+        return json;
+    }
 }

apps/admin-x-activitypub/src/components/global/APReplyBox.tsx

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import getUsername from '../../utils/get-username';
 import {Button, showToast} from '@tryghost/admin-x-design-system';
 import {ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub';
-import {useReplyMutationForUser} from '../../hooks/useActivityPubQueries';
+import {useReplyMutationForUser, useUserDataForUser} from '../../hooks/useActivityPubQueries';
 // import {useFocusContext} from '@tryghost/admin-x-design-system/types/providers/DesignSystemProvider';
 
 export interface APTextAreaProps extends HTMLProps<HTMLTextAreaElement> {
@@ -41,6 +41,8 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
     const [textValue, setTextValue] = useState(value); // Manage the textarea value with state
     const replyMutation = useReplyMutationForUser('index');
 
+    const {data: user} = useUserDataForUser('index');
+
     const styles = clsx(
         'ap-textarea order-2 w-full resize-none rounded-lg border py-2 pr-3 text-[1.5rem] transition-all dark:text-white',
         error ? 'border-red' : 'border-transparent placeholder:text-grey-500 dark:placeholder:text-grey-800',
@@ -67,7 +69,7 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
 
     return (
         <div className='flex w-full gap-x-3 py-6'>
-            <APAvatar/>
+            <APAvatar author={user} />
             <div className='relative w-full'>
                 <FormPrimitive.Root asChild>
                     <div className='flex w-full flex-col'>

apps/admin-x-activitypub/src/hooks/useActivityPubQueries.ts

@@ -131,6 +131,17 @@ export function useUnlikeMutationForUser(handle: string) {
     });
 }
 
+export function useUserDataForUser(handle: string) {
+    const siteUrl = useSiteUrl();
+    const api = createActivityPubAPI(handle, siteUrl);
+    return useQuery({
+        queryKey: [`user:${handle}`],
+        async queryFn() {
+            return api.getUser();
+        }
+    });
+}
+
 export function useFollowersCountForUser(handle: string) {
     const siteUrl = useSiteUrl();
     const api = createActivityPubAPI(handle, siteUrl);