From 404a76496717ad7825eecf8c90ff877abe7ee809 Mon Sep 17 00:00:00 2001
From: rimar1337 <132627503+rimar1337@users.noreply.github.com>
Date: Mon, 13 Oct 2025 20:28:05 +0700
Subject: [PATCH] constellation-based follow state

---
 src/components/Login.tsx          |  20 ++++-
 src/routes/profile.$did/index.tsx |  51 ++++++++++--
 src/utils/followState.ts          | 129 ++++++++++++++++++++++++++++++
 src/utils/useQuery.ts             |  28 ++++---
 4 files changed, 210 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/followState.ts

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index f388241..5c3a24b 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -154,7 +154,19 @@ const TabButton = ({ label, active, onClick }: { label: string; active: boolean;
 const OAuthForm = () => {
   const { loginWithOAuth } = useAuth();
   const [handle, setHandle] = useState("");
-  const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (handle.trim()) loginWithOAuth(handle); };
+
+  useEffect(() => {
+    const lastHandle = localStorage.getItem("lastHandle");
+    if (lastHandle) setHandle(lastHandle);
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (handle.trim()) {
+      localStorage.setItem("lastHandle", handle);
+      loginWithOAuth(handle);
+    }
+  };
   return (
     <form onSubmit={handleSubmit} className="flex flex-col gap-3">
       <p className="text-xs text-gray-500 dark:text-gray-400">Sign in with AT. Your password is never shared.</p>
@@ -171,10 +183,16 @@ const PasswordForm = () => {
   const [serviceURL, setServiceURL] = useState("bsky.social");
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    const lastHandle = localStorage.getItem("lastHandle");
+    if (lastHandle) setUser(lastHandle);
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
     try {
+      localStorage.setItem("lastHandle", user);
       await loginWithPassword(user, password, `https://${serviceURL}`);
     } catch (err) {
       setError("Login failed. Check your handle and App Password.");
diff --git a/src/routes/profile.$did/index.tsx b/src/routes/profile.$did/index.tsx
index ccd0c98..64949f1 100644
--- a/src/routes/profile.$did/index.tsx
+++ b/src/routes/profile.$did/index.tsx
@@ -7,22 +7,34 @@ import {
   useQueryIdentity,
   useQueryProfile,
   useInfiniteQueryAuthorFeed,
+  useQueryConstellation,
+  type linksRecordsResponse,
 } from "~/utils/useQuery";
+import { useAuth } from "~/providers/UnifiedAuthProvider";
+import { AtUri } from "@atproto/api";
+import { TID } from "@atproto/common-web";
+import { toggleFollow, useGetFollowState } from "~/utils/followState";
 
 export const Route = createFileRoute("/profile/$did/")({
   component: ProfileComponent,
 });
 
 function ProfileComponent() {
+  // booo bad this is not always the did it might be a handle, use identity.did instead
   const { did } = Route.useParams();
   const queryClient = useQueryClient();
-
+  const { agent } = useAuth();
   const {
     data: identity,
     isLoading: isIdentityLoading,
     error: identityError,
   } = useQueryIdentity(did);
 
+  const followRecords = useGetFollowState({
+    target: identity?.did || did,
+    user: agent?.did,
+  });
+
   const resolvedDid = did.startsWith("did:") ? did : identity?.did;
   const resolvedHandle = did.startsWith("did:") ? identity?.handle : did;
   const pdsUrl = identity?.pds;
@@ -141,14 +153,37 @@ function ProfileComponent() {
             also delay the backfill to be on demand because it would be pretty intense
             also save it persistently
           */}
-          {true ? (
+          {identity?.did !== agent?.did ? (
             <>
-              <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
-                Follow
-              </button>
-              <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
-                Unfollow
-              </button>
+              {!(followRecords?.length && followRecords?.length > 0) ? (
+                <button
+                  onClick={() =>
+                    toggleFollow({
+                      agent: agent || undefined,
+                      targetDid: identity?.did,
+                      followRecords: followRecords,
+                      queryClient: queryClient,
+                    })
+                  }
+                  className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"
+                >
+                  Follow
+                </button>
+              ) : (
+                <button
+                  onClick={() =>
+                    toggleFollow({
+                      agent: agent || undefined,
+                      targetDid: identity?.did,
+                      followRecords: followRecords,
+                      queryClient: queryClient,
+                    })
+                  }
+                  className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"
+                >
+                  Unfollow
+                </button>
+              )}
             </>
           ) : (
             <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
diff --git a/src/utils/followState.ts b/src/utils/followState.ts
new file mode 100644
index 0000000..b7a4c8e
--- /dev/null
+++ b/src/utils/followState.ts
@@ -0,0 +1,129 @@
+import { AtUri, type Agent } from "@atproto/api";
+import { useQueryConstellation, type linksRecordsResponse } from "./useQuery";
+import type { QueryClient } from "@tanstack/react-query";
+import { TID } from "@atproto/common-web";
+
+export function useGetFollowState({
+  target,
+  user,
+}: {
+  target: string;
+  user?: string;
+}): string[] | undefined {
+  const { data: followData } = useQueryConstellation(
+    user
+      ? {
+          method: "/links",
+          target: target,
+          // @ts-expect-error overloading sucks so much
+          collection: "app.bsky.graph.follow",
+          path: ".subject",
+          dids: [user],
+        }
+      : { method: "undefined", target: "whatever" }
+    // overloading sucks so much
+  ) as { data: linksRecordsResponse | undefined };
+  const follows = followData?.linking_records.slice(0, 50) ?? [];
+
+  if (follows.length > 0) {
+    return follows.map((linksRecord) => {
+      return `at://${linksRecord.did}/${linksRecord.collection}/${linksRecord.rkey}`;
+    });
+  }
+
+  return undefined;
+}
+
+export function toggleFollow({
+  agent,
+  targetDid,
+  followRecords,
+  queryClient,
+}: {
+  agent?: Agent;
+  targetDid?: string;
+  followRecords: undefined | string[];
+  queryClient: QueryClient;
+}) {
+  if (!agent?.did || !targetDid) return;
+
+  const queryKey = [
+    "constellation",
+    "/links",
+    targetDid,
+    "app.bsky.graph.follow",
+    ".subject",
+    undefined,
+    [agent.did],
+  ] as const;
+
+  const updateCache = (
+    updater: (
+      oldData: linksRecordsResponse | undefined
+    ) => linksRecordsResponse | undefined
+  ) => {
+    queryClient.setQueryData(
+      queryKey,
+      (oldData: linksRecordsResponse | undefined) => updater(oldData)
+    );
+  };
+
+  if (typeof followRecords === "undefined") {
+    const newRecord = {
+      repo: agent.did,
+      collection: "app.bsky.graph.follow",
+      rkey: TID.next().toString(),
+      record: {
+        $type: "app.bsky.graph.follow",
+        subject: targetDid,
+        createdAt: new Date().toISOString(),
+      },
+    };
+
+    updateCache((old) => {
+      const newLinkingRecords = [newRecord, ...(old?.linking_records ?? [])];
+      return {
+        ...old,
+        linking_records: newLinkingRecords,
+      } as linksRecordsResponse;
+    });
+
+    agent.com.atproto.repo.createRecord(newRecord).catch((err) => {
+      console.error("Follow failed, reverting cache:", err);
+      // rollback cache
+      updateCache((old) => {
+        return {
+          ...old,
+          linking_records:
+            old?.linking_records.filter((r) => r.rkey !== newRecord.rkey) ?? [],
+        } as linksRecordsResponse;
+      });
+    });
+
+    return;
+  }
+
+  followRecords.forEach((followRecord) => {
+    const aturi = new AtUri(followRecord);
+    agent.com.atproto.repo
+      .deleteRecord({
+        repo: agent.did!,
+        collection: "app.bsky.graph.follow",
+        rkey: aturi.rkey,
+      })
+      .catch(console.error);
+  });
+
+  updateCache((old) => {
+    if (!old?.linking_records) return old;
+    return {
+      ...old,
+      linking_records: old.linking_records.filter(
+        (rec) =>
+          !followRecords.includes(
+            `at://${rec.did}/${rec.collection}/${rec.rkey}`
+          )
+      ),
+    };
+  });
+}
diff --git a/src/utils/useQuery.ts b/src/utils/useQuery.ts
index 9400d67..c87071b 100644
--- a/src/utils/useQuery.ts
+++ b/src/utils/useQuery.ts
@@ -187,11 +187,13 @@ export function constructConstellationQuery(query?:{
     | "/links/distinct-dids"
     | "/links/count"
     | "/links/count/distinct-dids"
-    | "/links/all",
+    | "/links/all"
+    | "undefined",
   target: string,
   collection?: string,
   path?: string,
-  cursor?: string
+  cursor?: string,
+  dids?: string[]
 }
 ) {
   // : QueryOptions<
@@ -203,16 +205,17 @@ export function constructConstellationQuery(query?:{
   //   Error
   // >
   return queryOptions({
-    queryKey: ["post", query?.method, query?.target, query?.collection, query?.path, query?.cursor] as const,
+    queryKey: ["constellation", query?.method, query?.target, query?.collection, query?.path, query?.cursor, query?.dids] as const,
     queryFn: async () => {
-      if (!query) return undefined as undefined
+      if (!query || query.method === "undefined") return undefined as undefined
       const method = query.method
       const target = query.target
       const collection = query?.collection
       const path = query?.path
       const cursor = query.cursor
+      const dids = query?.dids
       const res = await fetch(
-        `https://constellation.microcosm.blue${method}?target=${encodeURIComponent(target)}${collection ? `&collection=${encodeURIComponent(collection)}` : ""}${path ? `&path=${encodeURIComponent(path)}` : ""}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}`
+        `https://constellation.microcosm.blue${method}?target=${encodeURIComponent(target)}${collection ? `&collection=${encodeURIComponent(collection)}` : ""}${path ? `&path=${encodeURIComponent(path)}` : ""}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}${dids ? dids.map((did) => `&did=${encodeURIComponent(did)}`).join("") : ""}`
       );
       if (!res.ok) throw new Error("Failed to fetch post");
       try {
@@ -235,8 +238,8 @@ export function constructConstellationQuery(query?:{
       }
     },
     // enforce short lifespan
-    staleTime: 5 * 60 * 1000, // 5 minutes
-    gcTime: 5 * 60 * 1000,
+    staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes
+    gcTime: /*0//*/5 * 60 * 1000,
   });
 }
 export function useQueryConstellation(query: {
@@ -245,6 +248,7 @@ export function useQueryConstellation(query: {
   collection: string;
   path: string;
   cursor?: string;
+  dids?: string[];
 }): UseQueryResult<linksRecordsResponse, Error>;
 export function useQueryConstellation(query: {
   method: "/links/distinct-dids";
@@ -272,17 +276,23 @@ export function useQueryConstellation(query: {
   target: string;
 }): UseQueryResult<linksAllResponse, Error>;
 export function useQueryConstellation(): undefined;
+export function useQueryConstellation(query: {
+  method: "undefined";
+  target: string;
+}): undefined;
 export function useQueryConstellation(query?: {
   method:
     | "/links"
     | "/links/distinct-dids"
     | "/links/count"
     | "/links/count/distinct-dids"
-    | "/links/all";
+    | "/links/all"
+    | "undefined";
   target: string;
   collection?: string;
   path?: string;
   cursor?: string;
+  dids?: string[];
 }):
   | UseQueryResult<
       | linksRecordsResponse
@@ -304,7 +314,7 @@ type linksRecord = {
   collection: string;
   rkey: string;
 };
-type linksRecordsResponse = {
+export type linksRecordsResponse = {
   total: string;
   linking_records: linksRecord[];
   cursor?: string;
-- 
2.51.2