+1 -1

src/components/Auth/SignOutButton.tsx

··· 18 18 <Button 19 19 icon={icon} 20 20 label="Sign Out" 21 21 - className="cursor-pointer hover:bg-surface1 transition-all p-2 pl-4 rounded-b-lg" 21 21 + className="cursor-pointer hover:bg-surface1 transition-all p-2 pl-4 rounded-b-sm" 22 22 labelClassName="text-sm text-negative" 23 23 onClick={handleSignOut} 24 24 iconTransitions={{ duration: 0.2, ease: "easeInOut" }}

+2 -2

src/components/Nav/NavBarAuthed.tsx

··· 70 70 return ( 71 71 <DropdownModal 72 72 buttonComponent={AvatarButton} 73 73 - className="bg-surface0 mt-3.5 flex w-48 flex-col rounded-lg" 73 73 + className="bg-surface0 mt-3.5 flex w-48 flex-col rounded-sm" 74 74 > 75 75 <UnderlineIconRouterLink 76 76 to={`/${handle}`} 77 77 label="Profile" 78 78 icon={LucideCircleUserRound({})} 79 79 - className="hover:bg-surface1 gap-2 rounded-t-lg p-2 pl-4 transition-all" 79 79 + className="hover:bg-surface1 gap-2 rounded-t-sm p-2 pl-4 transition-all" 80 80 labelClassName="text-sm text-text" 81 81 underlineClassName="bg-text" 82 82 iconClassName="text-text"

+8 -4

src/components/Profile/Avatar.tsx

··· 1 1 - export const Avatar = ({ uri }: { uri: string | undefined }) => { 2 2 - return ( 3 3 - <img src={uri} className="outline-accent h-10 rounded-full outline" /> 4 4 - ); 1 1 + export const Avatar = ({ 2 2 + uri, 3 3 + className = "outline-accent h-10 rounded-full outline", 4 4 + }: { 5 5 + uri: string | undefined; 6 6 + className?: string; 7 7 + }) => { 8 8 + return <img src={uri} className={className} />; 5 9 };

+50 -1

src/routes/_layout/$identifier/index.tsx

··· 1 1 + import { Loading } from "@/components/Icons/Loading"; 2 2 + import { Avatar } from "@/components/Profile/Avatar"; 3 3 + import { useAvatarQuery } from "@/lib/queries/get-avatar"; 4 4 + import { useProfileQuery } from "@/lib/queries/get-profile"; 5 5 + import { useMiniDoc } from "@/lib/queries/resolve-minidoc"; 1 6 import { createFileRoute } from "@tanstack/react-router"; 2 7 3 8 export const Route = createFileRoute("/_layout/$identifier/")({ ··· 6 11 7 12 function RouteComponent() { 8 13 const { identifier } = Route.useParams(); 9 9 - return <div>{identifier}'s profile</div>; 14 14 + const { 15 15 + isLoading: isMiniDocLoading, 16 16 + error: miniDocQueryErr, 17 17 + data: miniDocQueryData, 18 18 + } = useMiniDoc(identifier); 19 19 + const { 20 20 + isLoading: isAvatarLoading, 21 21 + error: avatarQueryErr, 22 22 + data: avatarQueryData, 23 23 + } = useAvatarQuery({ 24 24 + did: miniDocQueryData?.did ?? null, 25 25 + repoUrl: miniDocQueryData ? new URL(miniDocQueryData.pds) : null, 26 26 + }); 27 27 + const { 28 28 + isLoading: isProfileLoading, 29 29 + error: profileQueryErr, 30 30 + data: profileQueryData, 31 31 + } = useProfileQuery({ 32 32 + did: miniDocQueryData?.did ?? null, 33 33 + repoUrl: miniDocQueryData ? new URL(miniDocQueryData.pds) : null, 34 34 + }); 35 35 + 36 36 + const isLoading = 37 37 + isMiniDocLoading || 38 38 + !miniDocQueryData || 39 39 + isAvatarLoading || 40 40 + !avatarQueryData || 41 41 + isProfileLoading || 42 42 + !profileQueryData; 43 43 + const err = miniDocQueryErr ?? avatarQueryErr ?? profileQueryErr; 44 44 + 45 45 + if (isLoading) return <Loading />; 46 46 + if (err) return <p>{err.message}</p>; 47 47 + 48 48 + const avatarUri = avatarQueryData; 49 49 + 50 50 + return ( 51 51 + <div className="bg-surface0"> 52 52 + <p>{JSON.stringify(miniDocQueryData)}</p> 53 53 + <Avatar 54 54 + uri={avatarUri} 55 55 + className="outline-overlay0 h-48 rounded-full outline" 56 56 + /> 57 57 + </div> 58 58 + ); 10 59 }