use bluesky api for profile data

app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx

···
 import { PubIcon } from "components/ActionBar/Publications";
 import { Json } from "supabase/database.types";
 import { BlueskyTiny } from "components/Icons/BlueskyTiny";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 
 export const ProfileHeader = (props: {
-  profile: ProfileData;
+  profile: ProfileViewDetailed;
   publications: { record: Json; uri: string }[];
 }) => {
-  let profileRecord = props.profile.record as AppBskyActorProfile.Record;
+  console.log(props.profile);
+  let profileRecord = props.profile;
 
   return (
     <div className="flex flex-col relative" id="profile-header">
       <Avatar
-        src={
-          profileRecord.avatar?.ref &&
-          blobRefToSrc(profileRecord.avatar?.ref, props.profile.did)
-        }
+        src={profileRecord.avatar}
         displayName={profileRecord.displayName}
         className="mx-auto mt-3 sm:mt-4"
         giant

app/(home-pages)/p/[didOrHandle]/layout.tsx

···
 import { ProfileTabs } from "./ProfileTabs";
 import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
 import { ProfileLayout } from "./ProfileLayout";
+import { Agent } from "@atproto/api";
 
 export default async function ProfilePageLayout(props: {
   params: Promise<{ didOrHandle: string }>;
···
     did = resolved;
   }
 
-  let { data: profile } = await supabaseServerClient
-    .from("bsky_profiles")
-    .select(`*`)
-    .eq("did", did)
-    .single();
-  let { data: publications } = await supabaseServerClient
+  let agent = new Agent({
+    service: "https://public.api.bsky.app",
+  });
+  let profileReq = agent.app.bsky.actor.getProfile({ actor: did });
+
+  let publicationsReq = supabaseServerClient
     .from("publications")
     .select("*")
     .eq("identity_did", did);
+
+  let [{ data: profile }, { data: publications }] = await Promise.all([
+    profileReq,
+    publicationsReq,
+  ]);
 
   if (!profile) return null;
 

app/api/rpc/[command]/get_profile_data.ts

···
 import { makeRoute } from "../lib";
 import type { Env } from "./route";
 import { idResolver } from "app/(home-pages)/reader/idResolver";
+import { supabaseServerClient } from "supabase/serverClient";
+import { Agent } from "@atproto/api";
 
 export type GetProfileDataReturnType = Awaited<
   ReturnType<(typeof get_profile_data)["handler"]>
···
       did = resolved;
     }
 
-    // Fetch profile
-    const { data: profile, error: profileError } = await supabase
-      .from("bsky_profiles")
-      .select("*")
-      .eq("did", did)
-      .single();
-
-    if (profileError) {
-      throw new Error(`Failed to fetch profile: ${profileError.message}`);
-    }
-
-    if (!profile) {
-      throw new Error("Profile not found");
-    }
+    let agent = new Agent({
+      service: "https://public.api.bsky.app",
+    });
+    let profileReq = agent.app.bsky.actor.getProfile({ actor: did });
 
-    // Fetch publications for the DID
-    const { data: publications, error: publicationsError } = await supabase
+    let publicationsReq = supabaseServerClient
       .from("publications")
       .select("*")
       .eq("identity_did", did);
 
-    if (publicationsError) {
-      throw new Error(
-        `Failed to fetch publications: ${publicationsError.message}`,
-      );
-    }
+    let [{ data: profile }, { data: publications }] = await Promise.all([
+      profileReq,
+      publicationsReq,
+    ]);
 
     return {
       result: {

components/ProfilePopover.tsx

···
 "use client";
-import { ProfileHeader } from "app/p/[didOrHandle]/(profile)/ProfileHeader";
 import { Popover } from "./Popover";
 import useSWR from "swr";
 import { callRPC } from "app/api/rpc/client";
 import { useState } from "react";
+import { ProfileHeader } from "app/(home-pages)/p/[didOrHandle]/ProfileHeader";
 
 export const ProfilePopover = (props: {
   trigger: React.ReactNode;