From c2191c83fda36c65077e572a4ae57d889b068eea Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Mon, 27 Apr 2026 23:09:32 -0400
Subject: [PATCH] show attach account on attempted recommend

---
 components/LoginButton.tsx     | 12 ++++-
 components/RecommendButton.tsx | 82 +++++++++++++++++++---------------
 2 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/components/LoginButton.tsx b/components/LoginButton.tsx
index a02c46be..3ad565bb 100644
--- a/components/LoginButton.tsx
+++ b/components/LoginButton.tsx
@@ -24,11 +24,19 @@ import { mutate } from "swr";
 
 export const LoginModal = (props: {
   noEmailLogin?: boolean;
-  trigger: React.ReactNode;
+  trigger?: React.ReactNode;
   asChild?: boolean;
   redirectRoute?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) => {
-  let [open, setOpen] = useState(false);
+  let [internalOpen, setInternalOpen] = useState(false);
+  let isControlled = props.open !== undefined;
+  let open = props.open ?? internalOpen;
+  let setOpen = (o: boolean) => {
+    if (!isControlled) setInternalOpen(o);
+    props.onOpenChange?.(o);
+  };
   return (
     <Modal
       asChild={props.asChild}
diff --git a/components/RecommendButton.tsx b/components/RecommendButton.tsx
index 55b6f44f..7223ba60 100644
--- a/components/RecommendButton.tsx
+++ b/components/RecommendButton.tsx
@@ -13,6 +13,8 @@ import { useSmoker, useToaster } from "./Toast";
 import { OAuthErrorMessage, isOAuthSessionError } from "./OAuthError";
 import { ButtonSecondary } from "./Buttons";
 import { Separator } from "./Layout";
+import { useIdentityData } from "./IdentityProvider";
+import { LoginModal } from "./LoginButton";
 
 // Create a batcher for recommendation checks
 // Batches requests made within 10ms window
@@ -61,11 +63,13 @@ export function RecommendButton(props: {
   const { hasRecommended, isLoading } = useUserRecommendation(
     props.documentUri,
   );
+  const { identity } = useIdentityData();
   const [count, setCount] = useState(props.recommendsCount);
   const [isPending, setIsPending] = useState(false);
   const [optimisticRecommended, setOptimisticRecommended] = useState<
     boolean | null
   >(null);
+  const [loginOpen, setLoginOpen] = useState(false);
   const toaster = useToaster();
   const smoker = useSmoker();
 
@@ -75,6 +79,10 @@ export function RecommendButton(props: {
 
   const handleClick = async (e: React.MouseEvent) => {
     if (isPending || isLoading) return;
+    if (!identity?.atp_did) {
+      setLoginOpen(true);
+      return;
+    }
 
     const currentlyRecommended = displayRecommended;
     setIsPending(true);
@@ -117,43 +125,34 @@ export function RecommendButton(props: {
     setIsPending(false);
   };
 
-  if (props.expanded)
-    return (
-      <ButtonSecondary
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          handleClick(e);
-        }}
-      >
-        {displayRecommended ? (
-          <RecommendTinyFilled className="text-accent-contrast" />
-        ) : (
-          <RecommendTinyEmpty />
-        )}
-        <div className="flex gap-2 items-center">
-          {count > 0 && (
-            <>
-              <span
-                className={`${displayRecommended && "text-accent-contrast"}`}
-              >
-                {count}
-              </span>
-              <Separator classname="h-4! text-accent-contrast!" />
-            </>
-          )}
-          {displayRecommended ? "Recommended!" : "Recommend"}
-        </div>
-      </ButtonSecondary>
-    );
+  const onClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    handleClick(e);
+  };
 
-  return (
+  const button = props.expanded ? (
+    <ButtonSecondary onClick={onClick}>
+      {displayRecommended ? (
+        <RecommendTinyFilled className="text-accent-contrast" />
+      ) : (
+        <RecommendTinyEmpty />
+      )}
+      <div className="flex gap-2 items-center">
+        {count > 0 && (
+          <>
+            <span className={`${displayRecommended && "text-accent-contrast"}`}>
+              {count}
+            </span>
+            <Separator classname="h-4! text-accent-contrast!" />
+          </>
+        )}
+        {displayRecommended ? "Recommended!" : "Recommend"}
+      </div>
+    </ButtonSecondary>
+  ) : (
     <button
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        handleClick(e);
-      }}
+      onClick={onClick}
       className={`recommendButton relative flex gap-1  items-center hover:text-accent-contrast ${props.className || ""}`}
       aria-label={displayRecommended ? "Remove recommend" : "Recommend"}
     >
@@ -169,4 +168,17 @@ export function RecommendButton(props: {
       )}
     </button>
   );
+
+  return (
+    <>
+      {button}
+      {loginOpen && (
+        <LoginModal
+          noEmailLogin
+          open={loginOpen}
+          onOpenChange={setLoginOpen}
+        />
+      )}
+    </>
+  );
 }
-- 
2.51.2