follows and follower routes

src/routeTree.gen.ts

···
 import { Route as CallbackIndexRouteImport } from './routes/callback/index'
 import { Route as PathlessLayoutNestedLayoutRouteImport } from './routes/_pathlessLayout/_nested-layout'
 import { Route as ProfileDidIndexRouteImport } from './routes/profile.$did/index'
+import { Route as ProfileDidFollowsRouteImport } from './routes/profile.$did/follows'
+import { Route as ProfileDidFollowersRouteImport } from './routes/profile.$did/followers'
 import { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from './routes/_pathlessLayout/_nested-layout/route-b'
 import { Route as PathlessLayoutNestedLayoutRouteARouteImport } from './routes/_pathlessLayout/_nested-layout/route-a'
 import { Route as ProfileDidPostRkeyRouteImport } from './routes/profile.$did/post.$rkey'
···
   path: '/profile/$did/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ProfileDidFollowsRoute = ProfileDidFollowsRouteImport.update({
+  id: '/profile/$did/follows',
+  path: '/profile/$did/follows',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ProfileDidFollowersRoute = ProfileDidFollowersRouteImport.update({
+  id: '/profile/$did/followers',
+  path: '/profile/$did/followers',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PathlessLayoutNestedLayoutRouteBRoute =
   PathlessLayoutNestedLayoutRouteBRouteImport.update({
     id: '/route-b',
···
   '/callback': typeof CallbackIndexRoute
   '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
   '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
+  '/profile/$did/followers': typeof ProfileDidFollowersRoute
+  '/profile/$did/follows': typeof ProfileDidFollowsRoute
   '/profile/$did': typeof ProfileDidIndexRoute
   '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute
   '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
···
   '/callback': typeof CallbackIndexRoute
   '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
   '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
+  '/profile/$did/followers': typeof ProfileDidFollowersRoute
+  '/profile/$did/follows': typeof ProfileDidFollowsRoute
   '/profile/$did': typeof ProfileDidIndexRoute
   '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute
   '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
···
   '/callback/': typeof CallbackIndexRoute
   '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
   '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
+  '/profile/$did/followers': typeof ProfileDidFollowersRoute
+  '/profile/$did/follows': typeof ProfileDidFollowsRoute
   '/profile/$did/': typeof ProfileDidIndexRoute
   '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute
   '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren
···
     | '/callback'
     | '/route-a'
     | '/route-b'
+    | '/profile/$did/followers'
+    | '/profile/$did/follows'
     | '/profile/$did'
     | '/profile/$did/feed/$rkey'
     | '/profile/$did/post/$rkey'
···
     | '/callback'
     | '/route-a'
     | '/route-b'
+    | '/profile/$did/followers'
+    | '/profile/$did/follows'
     | '/profile/$did'
     | '/profile/$did/feed/$rkey'
     | '/profile/$did/post/$rkey'
···
     | '/callback/'
     | '/_pathlessLayout/_nested-layout/route-a'
     | '/_pathlessLayout/_nested-layout/route-b'
+    | '/profile/$did/followers'
+    | '/profile/$did/follows'
     | '/profile/$did/'
     | '/profile/$did/feed/$rkey'
     | '/profile/$did/post/$rkey'
···
   SearchRoute: typeof SearchRoute
   SettingsRoute: typeof SettingsRoute
   CallbackIndexRoute: typeof CallbackIndexRoute
+  ProfileDidFollowersRoute: typeof ProfileDidFollowersRoute
+  ProfileDidFollowsRoute: typeof ProfileDidFollowsRoute
   ProfileDidIndexRoute: typeof ProfileDidIndexRoute
   ProfileDidFeedRkeyRoute: typeof ProfileDidFeedRkeyRoute
   ProfileDidPostRkeyRoute: typeof ProfileDidPostRkeyRouteWithChildren
···
       preLoaderRoute: typeof ProfileDidIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/profile/$did/follows': {
+      id: '/profile/$did/follows'
+      path: '/profile/$did/follows'
+      fullPath: '/profile/$did/follows'
+      preLoaderRoute: typeof ProfileDidFollowsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/profile/$did/followers': {
+      id: '/profile/$did/followers'
+      path: '/profile/$did/followers'
+      fullPath: '/profile/$did/followers'
+      preLoaderRoute: typeof ProfileDidFollowersRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_pathlessLayout/_nested-layout/route-b': {
       id: '/_pathlessLayout/_nested-layout/route-b'
       path: '/route-b'
···
   SearchRoute: SearchRoute,
   SettingsRoute: SettingsRoute,
   CallbackIndexRoute: CallbackIndexRoute,
+  ProfileDidFollowersRoute: ProfileDidFollowersRoute,
+  ProfileDidFollowsRoute: ProfileDidFollowsRoute,
   ProfileDidIndexRoute: ProfileDidIndexRoute,
   ProfileDidFeedRkeyRoute: ProfileDidFeedRkeyRoute,
   ProfileDidPostRkeyRoute: ProfileDidPostRkeyRouteWithChildren,

src/routes/notifications.tsx

···
   );
 }
 
-function FollowsTab() {
+export function FollowsTab({did}:{did?:string}) {
   const { agent } = useAuth();
+  const userdidunsafe = did ?? agent?.did;
+  const { data: identity} = useQueryIdentity(userdidunsafe);
+  const userdid = identity?.did;
+  
   const [constellationurl] = useAtom(constellationURLAtom);
   const infinitequeryresults = useInfiniteQuery({
     ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
       {
         constellation: constellationurl,
         method: "/links",
-        target: agent?.did,
+        target: userdid,
         collection: "app.bsky.graph.follow",
         path: ".subject",
       }
     ),
-    enabled: !!agent?.did,
+    enabled: !!userdid,
   });
 
   const {

src/routes/profile.$did/feed.$rkey.tsx

···
   component: FeedRoute,
 });
 
+// todo: scroll restoration
 function FeedRoute() {
   const { did, rkey } = Route.useParams();
   const { agent, status } = useAuth();

src/routes/profile.$did/followers.tsx

···
+import { createFileRoute } from "@tanstack/react-router";
+
+import { Header } from "~/components/Header";
+
+import { FollowsTab } from "../notifications";
+
+export const Route = createFileRoute("/profile/$did/followers")({
+  component: RouteComponent,
+});
+
+// todo: scroll restoration
+function RouteComponent() {
+  const params = Route.useParams();
+
+  return (
+    <div>
+      <Header
+        title={"Followers"}
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+      />
+      <FollowsTab did={params.did} />
+    </div>
+  );
+}

src/routes/profile.$did/follows.tsx

···
+import * as ATPAPI from "@atproto/api"
+import { createFileRoute } from '@tanstack/react-router'
+import React from 'react';
+
+import { Header } from '~/components/Header';
+import { useReusableTabScrollRestore } from '~/components/ReusableTabRoute';
+import { useInfiniteQueryAuthorFeed, useQueryIdentity } from '~/utils/useQuery';
+
+import { EmptyState, ErrorState, LoadingState, NotificationItem } from '../notifications';
+
+export const Route = createFileRoute('/profile/$did/follows')({
+  component: RouteComponent,
+})
+
+// todo: scroll restoration
+function RouteComponent() {
+  const params = Route.useParams();
+  return (
+    <div>
+      <Header
+        title={"Follows"}
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+      />
+      <Follows did={params.did}/>
+    </div>
+  );
+}
+
+function Follows({did}:{did:string}) {
+  const {data: identity} = useQueryIdentity(did);
+  const infinitequeryresults = useInfiniteQueryAuthorFeed(identity?.did, identity?.pds, "app.bsky.graph.follow");
+
+  const {
+    data: infiniteFollowsData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+    error,
+  } = infinitequeryresults;
+
+  const followsAturis = React.useMemo(
+    () => infiniteFollowsData?.pages.flatMap((page) => page.records) ?? [],
+    [infiniteFollowsData]
+  );
+
+  useReusableTabScrollRestore("Notifications");
+
+  if (isLoading) return <LoadingState text="Loading follows..." />;
+  if (isError) return <ErrorState error={error} />;
+
+  if (!followsAturis?.length) return <EmptyState text="No follows yet." />;
+
+  return (
+    <>
+      {followsAturis.map((m) => {
+        const record = m.value as unknown as ATPAPI.AppBskyGraphFollow.Record;
+        return <NotificationItem key={record.subject} notification={record.subject} />
+      })}
+
+      {hasNextPage && (
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={isFetchingNextPage}
+          className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold disabled:opacity-50"
+        >
+          {isFetchingNextPage ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </>
+  );
+}

src/routes/profile.$did/index.tsx

···
   useInfiniteQueryAuthorFeed,
   useQueryArbitrary,
   useQueryConstellation,
+  useQueryConstellationLinksCountDistinctDids,
   useQueryIdentity,
   useQueryProfile,
 } from "~/utils/useQuery";
···
   const description = profile?.description || "";
 
   const isReady = !!resolvedDid && !isIdentityLoading && !!profileRecord;
+
+  const resultwhateversure = useQueryConstellationLinksCountDistinctDids(resolvedDid ? {
+    method: "/links/count/distinct-dids",
+    collection: "app.bsky.graph.follow",
+    target: resolvedDid,
+    path: ".subject"
+  } : undefined)
+
+  const followercount = resultwhateversure?.data?.total;
 
   return (
     <div className="">
···
           <div className="text-gray-500 dark:text-gray-400 text-base mb-3 flex flex-row gap-1">
             <Mutual targetdidorhandle={did} />
             {handle}
+          </div>
+          <div className="flex flex-row gap-2 text-md text-gray-500 dark:text-gray-400 mb-2">
+            <Link to="/profile/$did/followers" params={{did: did}}>{followercount && (<span className="mr-1 text-gray-900 dark:text-gray-200 font-medium">{followercount}</span>)}Followers</Link>
+            -
+            <Link to="/profile/$did/follows" params={{did: did}}>Follows</Link>
           </div>
           {description && (
             <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]">

src/utils/useQuery.ts

···
     gcTime: /*0//*/5 * 60 * 1000,
   });
 }
+// todo do more of these instead of overloads since overloads sucks so much apparently
+export function useQueryConstellationLinksCountDistinctDids(query?: {
+  method: "/links/count/distinct-dids";
+  target: string;
+  collection: string;
+  path: string;
+  cursor?: string;
+}): UseQueryResult<linksCountResponse, Error> | undefined {
+  //if (!query) return;
+  const [constellationurl] = useAtom(constellationURLAtom)
+  const queryres = useQuery(
+    constructConstellationQuery(query && {constellation: constellationurl, ...query})
+  ) as unknown as UseQueryResult<linksCountResponse, Error>;
+  if (!query) {
+    return undefined as undefined; 
+  }
+  return queryres as UseQueryResult<linksCountResponse, Error>;
+}
+
 export function useQueryConstellation(query: {
   method: "/links";
   target: string;