From 0ceea9fbf228b09345ef86f1b5f1acf5d63c2bf6 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 25 Mar 2026 17:59:42 -0400
Subject: [PATCH] new subscribe flow in Pub Page

---
 .../[did]/[publication]/PublicationAuthor.tsx |   2 +-
 .../[rkey]/Interactions/Interactions.tsx      |   2 +-
 .../[rkey]/LinearDocumentPage.tsx             |  12 +-
 .../[publication]/[rkey]/PostPubInfo.tsx      |  20 +-
 app/lish/[did]/[publication]/page.tsx         | 258 +++++++++---------
 components/Subscribe/EmailSubscribe.tsx       |   5 +-
 .../{AtSubscribe.tsx => HandleSubscribe.tsx}  |  78 ++++--
 components/Subscribe/SubscribeButton.tsx      |   4 +-
 8 files changed, 208 insertions(+), 173 deletions(-)
 rename components/Subscribe/{AtSubscribe.tsx => HandleSubscribe.tsx} (68%)

diff --git a/app/lish/[did]/[publication]/PublicationAuthor.tsx b/app/lish/[did]/[publication]/PublicationAuthor.tsx
index 15f3e949..16e92c1c 100644
--- a/app/lish/[did]/[publication]/PublicationAuthor.tsx
+++ b/app/lish/[did]/[publication]/PublicationAuthor.tsx
@@ -11,7 +11,7 @@ export const PublicationAuthor = (props: {
       <ProfilePopover
         didOrHandle={props.did}
         trigger={
-          <span className="hover:underline">
+          <span className="hover:text-accent-contrast">
             <strong>by {props.displayName}</strong> @{props.handle}
           </span>
         }
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
index a89f07ec..15d56a5d 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
@@ -15,7 +15,7 @@ import { PubLeafletComment } from "lexicons/api";
 import { type CommentOnDocument } from "contexts/DocumentContext";
 import { prefetchQuotesData } from "./Quotes";
 import { useIdentityData } from "components/IdentityProvider";
-import { ManageSubscription, SubscribeWithBluesky } from "app/lish/Subscribe";
+import { ManageSubscription } from "app/lish/Subscribe";
 import { EditTiny } from "components/Icons/EditTiny";
 import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
 import { RecommendButton } from "components/RecommendButton";
diff --git a/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx b/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
index 23f85717..bce4552d 100644
--- a/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
@@ -1,11 +1,6 @@
 "use client";
 import { PubLeafletPagesLinearDocument } from "lexicons/api";
 import { useLeafletContent } from "contexts/LeafletContentContext";
-import { PostPageData } from "./getPostPageData";
-import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
-import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
-import { SubscribeWithBluesky } from "app/lish/Subscribe";
-import { EditTiny } from "components/Icons/EditTiny";
 import {
   ExpandedInteractions,
   getCommentCount,
@@ -74,7 +69,10 @@ export function LinearDocumentPage({
         pageOptions={pageOptions}
         footnoteSideColumn={
           !props.hasContentToRight ? (
-            <PublishedFootnoteSideColumn footnotes={footnotes} fullPageScroll={fullPageScroll} />
+            <PublishedFootnoteSideColumn
+              footnotes={footnotes}
+              fullPageScroll={fullPageScroll}
+            />
           ) : undefined
         }
       >
@@ -96,7 +94,7 @@ export function LinearDocumentPage({
           footnoteIndexMap={footnoteIndexMap}
         />
         <PublishedFootnoteSection footnotes={footnotes} />
-        <PostSubscribe />
+        {/*<PostSubscribe />*/}
         <PostPrevNextButtons
           showPrevNext={preferences.showPrevNext !== false && !isSubpage}
         />
diff --git a/app/lish/[did]/[publication]/[rkey]/PostPubInfo.tsx b/app/lish/[did]/[publication]/[rkey]/PostPubInfo.tsx
index bfc5c0d7..99ae80ca 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostPubInfo.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostPubInfo.tsx
@@ -1,22 +1,28 @@
 import { SubscribeButton } from "components/Subscribe/SubscribeButton";
 
-export const PostPubInfo = () => {
-  let newsletterMode = true;
-  let user = {
+export const dummy = {
+  newsletterMode: true,
+  user: {
     loggedIn: false,
     email: undefined,
     handle: undefined,
-    subscribed: false,
-  };
+    subscribed: true,
+  },
+};
+
+export const PostPubInfo = () => {
   return (
     <div className="px-3 sm:px-4 w-full">
       <div className="accent-container rounded-lg! w-full px-3 pt-3 pb-4 sm:px-4 sm:pt-4 sm:pb-5 text-center justify-center">
         <h3 className="leading-snug text-secondary">Pub Title here</h3>
         <div className="text-tertiary pb-3">this is the pubs description</div>
-        {user.subscribed ? (
+        {dummy.user.subscribed ? (
           <div>Manage Sub</div>
         ) : (
-          <SubscribeButton newsletterMode={newsletterMode} user={user} />
+          <SubscribeButton
+            newsletterMode={dummy.newsletterMode}
+            user={dummy.user}
+          />
         )}
       </div>
     </div>
diff --git a/app/lish/[did]/[publication]/page.tsx b/app/lish/[did]/[publication]/page.tsx
index 9902d594..62e3704d 100644
--- a/app/lish/[did]/[publication]/page.tsx
+++ b/app/lish/[did]/[publication]/page.tsx
@@ -1,9 +1,8 @@
 import { supabaseServerClient } from "supabase/serverClient";
 import { AtUri } from "@atproto/syntax";
-import { getPublicationURL, getDocumentURL } from "app/lish/createPub/getPublicationURL";
+import { getDocumentURL } from "app/lish/createPub/getPublicationURL";
 import { BskyAgent } from "@atproto/api";
 import { publicationNameOrUriFilter } from "src/utils/uriHelpers";
-import { SubscribeWithBluesky } from "app/lish/Subscribe";
 import React from "react";
 import {
   PublicationBackgroundProvider,
@@ -15,13 +14,14 @@ import { InteractionPreview } from "components/InteractionsPreview";
 import { LocalizedDate } from "./LocalizedDate";
 import { PublicationHomeLayout } from "./PublicationHomeLayout";
 import { PublicationAuthor } from "./PublicationAuthor";
-import { Separator } from "components/Layout";
 import {
   normalizePublicationRecord,
   normalizeDocumentRecord,
 } from "src/utils/normalizeRecords";
 import { getFirstParagraph } from "src/utils/getFirstParagraph";
 import { FontLoader } from "components/FontLoader";
+import { SubscribeButton } from "components/Subscribe/SubscribeButton";
+import { dummy } from "./[rkey]/PostPubInfo";
 
 export default async function Publication(props: {
   params: Promise<{ publication: string; did: string }>;
@@ -61,141 +61,153 @@ export default async function Publication(props: {
   try {
     return (
       <>
-      <FontLoader headingFontId={record?.theme?.headingFont} bodyFontId={record?.theme?.bodyFont} />
-      <PublicationThemeProvider
-        theme={record?.theme}
-        pub_creator={publication.identity_did}
-      >
-        <PublicationBackgroundProvider
+        <FontLoader
+          headingFontId={record?.theme?.headingFont}
+          bodyFontId={record?.theme?.bodyFont}
+        />
+        <PublicationThemeProvider
           theme={record?.theme}
           pub_creator={publication.identity_did}
         >
-          <PublicationHomeLayout
-            uri={publication.uri}
-            showPageBackground={!!showPageBackground}
+          <PublicationBackgroundProvider
+            theme={record?.theme}
+            pub_creator={publication.identity_did}
           >
-            <div className="pubHeader flex flex-col pb-8 w-full text-center justify-center ">
-              {record?.icon && (
-                <div
-                  className="shrink-0 w-10 h-10 rounded-full mx-auto"
-                  style={{
-                    backgroundImage: `url(/api/atproto_images?did=${did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]})`,
-                    backgroundRepeat: "no-repeat",
-                    backgroundPosition: "center",
-                    backgroundSize: "cover",
-                  }}
-                />
-              )}
-              <h2 className="text-accent-contrast sm:text-xl text-[22px] pt-1 ">
-                {publication.name}
-              </h2>
-              <p className="sm:text-lg text-secondary">
-                {record?.description}{" "}
-              </p>
-              {profile && (
-                <PublicationAuthor
-                  did={profile.did}
-                  displayName={profile.displayName}
-                  handle={profile.handle}
-                />
-              )}
-              <div className="sm:pt-4 pt-4">
+            <PublicationHomeLayout
+              uri={publication.uri}
+              showPageBackground={!!showPageBackground}
+            >
+              <div className="pubHeader flex flex-col pb-8 w-full text-center justify-center ">
+                {record?.icon && (
+                  <div
+                    className="shrink-0 w-10 h-10 rounded-full mx-auto"
+                    style={{
+                      backgroundImage: `url(/api/atproto_images?did=${did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]})`,
+                      backgroundRepeat: "no-repeat",
+                      backgroundPosition: "center",
+                      backgroundSize: "cover",
+                    }}
+                  />
+                )}
+                <h2 className="text-accent-contrast sm:text-xl text-[22px] pt-1 ">
+                  {publication.name}
+                </h2>
+                <p className="sm:text-lg text-secondary">
+                  {record?.description}{" "}
+                </p>
+                {profile && (
+                  <PublicationAuthor
+                    did={profile.did}
+                    displayName={profile.displayName}
+                    handle={profile.handle}
+                  />
+                )}
+                <div className="spacer h-4 w-full" />
+                <SubscribeButton {...dummy} />
+                {/*<div className="sm:pt-4 pt-4">
                 <SubscribeWithBluesky
                   base_url={getPublicationURL(publication)}
                   pubName={publication.name}
                   pub_uri={publication.uri}
                   subscribers={publication.publication_subscriptions}
                 />
+              </div>*/}
               </div>
-            </div>
-            <div className="publicationPostList w-full flex flex-col gap-4">
-              {publication.documents_in_publications
-                .filter((d) => !!d?.documents)
-                .sort((a, b) => {
-                  const aRecord = normalizeDocumentRecord(a.documents?.data);
-                  const bRecord = normalizeDocumentRecord(b.documents?.data);
-                  const aDate = aRecord?.publishedAt
-                    ? new Date(aRecord.publishedAt)
-                    : new Date(0);
-                  const bDate = bRecord?.publishedAt
-                    ? new Date(bRecord.publishedAt)
-                    : new Date(0);
-                  return bDate.getTime() - aDate.getTime(); // Sort by most recent first
-                })
-                .map((doc) => {
-                  if (!doc.documents) return null;
-                  const doc_record = normalizeDocumentRecord(
-                    doc.documents.data,
-                  );
-                  if (!doc_record) return null;
-                  let uri = new AtUri(doc.documents.uri);
-                  let quotes =
-                    doc.documents.document_mentions_in_bsky[0].count || 0;
-                  let comments =
-                    record?.preferences?.showComments === false
-                      ? 0
-                      : doc.documents.comments_on_documents[0].count || 0;
-                  let recommends =
-                    doc.documents.recommends_on_documents?.[0]?.count || 0;
-                  let tags = doc_record.tags || [];
+              <div className="publicationPostList w-full flex flex-col gap-4">
+                {publication.documents_in_publications
+                  .filter((d) => !!d?.documents)
+                  .sort((a, b) => {
+                    const aRecord = normalizeDocumentRecord(a.documents?.data);
+                    const bRecord = normalizeDocumentRecord(b.documents?.data);
+                    const aDate = aRecord?.publishedAt
+                      ? new Date(aRecord.publishedAt)
+                      : new Date(0);
+                    const bDate = bRecord?.publishedAt
+                      ? new Date(bRecord.publishedAt)
+                      : new Date(0);
+                    return bDate.getTime() - aDate.getTime(); // Sort by most recent first
+                  })
+                  .map((doc) => {
+                    if (!doc.documents) return null;
+                    const doc_record = normalizeDocumentRecord(
+                      doc.documents.data,
+                    );
+                    if (!doc_record) return null;
+                    let uri = new AtUri(doc.documents.uri);
+                    let quotes =
+                      doc.documents.document_mentions_in_bsky[0].count || 0;
+                    let comments =
+                      record?.preferences?.showComments === false
+                        ? 0
+                        : doc.documents.comments_on_documents[0].count || 0;
+                    let recommends =
+                      doc.documents.recommends_on_documents?.[0]?.count || 0;
+                    let tags = doc_record.tags || [];
 
-                  const docUrl = getDocumentURL(doc_record, doc.documents.uri, publication);
-                  return (
-                    <React.Fragment key={doc.documents?.uri}>
-                      <div className="flex w-full grow flex-col ">
-                        <SpeedyLink
-                          href={docUrl}
-                          className="publishedPost hover:no-underline! flex flex-col"
-                        >
-                          {doc_record.title && (
-                            <h3 className="text-primary">{doc_record.title}</h3>
-                          )}
-                          <p className="italic text-secondary line-clamp-3">
-                            {doc_record.description || getFirstParagraph(doc_record)}
-                          </p>
-                        </SpeedyLink>
+                    const docUrl = getDocumentURL(
+                      doc_record,
+                      doc.documents.uri,
+                      publication,
+                    );
+                    return (
+                      <React.Fragment key={doc.documents?.uri}>
+                        <div className="flex w-full grow flex-col ">
+                          <SpeedyLink
+                            href={docUrl}
+                            className="publishedPost hover:no-underline! flex flex-col"
+                          >
+                            {doc_record.title && (
+                              <h3 className="text-primary">
+                                {doc_record.title}
+                              </h3>
+                            )}
+                            <p className="italic text-secondary line-clamp-3">
+                              {doc_record.description ||
+                                getFirstParagraph(doc_record)}
+                            </p>
+                          </SpeedyLink>
 
-                        <div className="justify-between w-full text-sm text-tertiary flex gap-1 flex-wrap pt-2 items-center">
-                          <p className="text-sm text-tertiary ">
-                            {doc_record.publishedAt && (
-                              <LocalizedDate
-                                dateString={doc_record.publishedAt}
-                                options={{
-                                  year: "numeric",
-                                  month: "long",
-                                  day: "2-digit",
-                                }}
-                              />
-                            )}{" "}
-                          </p>
+                          <div className="justify-between w-full text-sm text-tertiary flex gap-1 flex-wrap pt-2 items-center">
+                            <p className="text-sm text-tertiary ">
+                              {doc_record.publishedAt && (
+                                <LocalizedDate
+                                  dateString={doc_record.publishedAt}
+                                  options={{
+                                    year: "numeric",
+                                    month: "long",
+                                    day: "2-digit",
+                                  }}
+                                />
+                              )}{" "}
+                            </p>
 
-                          <InteractionPreview
-                            quotesCount={quotes}
-                            commentsCount={comments}
-                            recommendsCount={recommends}
-                            documentUri={doc.documents.uri}
-                            tags={tags}
-                            postUrl={docUrl}
-                            showComments={
-                              record?.preferences?.showComments !== false
-                            }
-                            showMentions={
-                              record?.preferences?.showMentions !== false
-                            }
-                            showRecommends={
-                              record?.preferences?.showRecommends !== false
-                            }
-                          />
+                            <InteractionPreview
+                              quotesCount={quotes}
+                              commentsCount={comments}
+                              recommendsCount={recommends}
+                              documentUri={doc.documents.uri}
+                              tags={tags}
+                              postUrl={docUrl}
+                              showComments={
+                                record?.preferences?.showComments !== false
+                              }
+                              showMentions={
+                                record?.preferences?.showMentions !== false
+                              }
+                              showRecommends={
+                                record?.preferences?.showRecommends !== false
+                              }
+                            />
+                          </div>
                         </div>
-                      </div>
-                      <hr className="last:hidden border-border-light" />
-                    </React.Fragment>
-                  );
-                })}
-            </div>
-          </PublicationHomeLayout>
-        </PublicationBackgroundProvider>
-      </PublicationThemeProvider>
+                        <hr className="last:hidden border-border-light" />
+                      </React.Fragment>
+                    );
+                  })}
+              </div>
+            </PublicationHomeLayout>
+          </PublicationBackgroundProvider>
+        </PublicationThemeProvider>
       </>
     );
   } catch (e) {
diff --git a/components/Subscribe/EmailSubscribe.tsx b/components/Subscribe/EmailSubscribe.tsx
index 5583709e..bab3641a 100644
--- a/components/Subscribe/EmailSubscribe.tsx
+++ b/components/Subscribe/EmailSubscribe.tsx
@@ -1,10 +1,11 @@
+"use client";
 import * as OneTimePasswordField from "@radix-ui/react-one-time-password-field";
 import { ButtonPrimary } from "components/Buttons";
 import { GoToArrow } from "components/Icons/GoToArrow";
 import { Input } from "components/Input";
 import { Modal } from "components/Modal";
 import { useState } from "react";
-import { HandleInput, UniversalHandleInfo } from "./AtSubscribe";
+import { HandleInputandOAuth, UniversalHandleInfo } from "./HandleSubscribe";
 
 export const EmailSubscribe = (props: {
   compact?: boolean;
@@ -117,7 +118,7 @@ const EmailSubscribeSuccess = (props: {
               </div>
               <UniversalHandleInfo />
             </div>
-            <HandleInput />
+            <HandleInputandOAuth />
           </div>
         </>
       )}
diff --git a/components/Subscribe/AtSubscribe.tsx b/components/Subscribe/HandleSubscribe.tsx
similarity index 68%
rename from components/Subscribe/AtSubscribe.tsx
rename to components/Subscribe/HandleSubscribe.tsx
index 3ca0205e..dad77a45 100644
--- a/components/Subscribe/AtSubscribe.tsx
+++ b/components/Subscribe/HandleSubscribe.tsx
@@ -1,9 +1,7 @@
-import { ManageSubscription } from "app/lish/Subscribe";
+"use client";
 import { ButtonPrimary } from "components/Buttons";
 import { BlueskyTiny } from "components/Icons/BlueskyTiny";
-import { GoToArrow } from "components/Icons/GoToArrow";
 import { Input } from "components/Input";
-import { Modal } from "components/Modal";
 import { Popover } from "components/Popover";
 import Link from "next/link";
 import { useState } from "react";
@@ -14,8 +12,10 @@ import {
   LogoLeaflet,
   LogoTangled,
 } from "./Logos";
+import { GoToArrow } from "components/Icons/GoToArrow";
+import { Separator } from "components/Layout";
 
-export const AtSubscribe = (props: {
+export const HandleSubscribe = (props: {
   compact?: boolean;
   user: {
     loggedIn: boolean;
@@ -23,7 +23,7 @@ export const AtSubscribe = (props: {
     handle: string | undefined;
   };
 }) => {
-  if (props.user.loggedIn) {
+  if (props.user.loggedIn && props.user.handle) {
     return (
       <ButtonPrimary className="mx-auto max-w-full">
         <span className="shrink-0">Subscribe as</span>
@@ -38,8 +38,9 @@ export const AtSubscribe = (props: {
     return (
       <div className="max-w-sm mx-auto">
         <HandleInput compact={props.compact} />
-        <div className="flex justify-between pt-0.5">
-          <UniversalHandleInfo />{" "}
+        <div className="flex gap-2 justify-center items-center mx-auto pt-0.5 ">
+          <UniversalHandleInfo />
+          <Separator classname="h-3! border-accent-contrast!" />
           <div className="text-sm text-accent-contrast font-bold">Create</div>
         </div>
       </div>
@@ -49,35 +50,52 @@ export const AtSubscribe = (props: {
 export const HandleInput = (props: { compact?: boolean }) => {
   let [handleValue, setHandleValue] = useState("");
   return (
-    <div className="flex flex-col">
-      <div className="input-with-border pl-0! py-0! flex gap-0 ">
-        <div className="border-r border-border text-center w-7 mr-2">@</div>
-        <Input
-          className="appearance-none! outline-none! py-0.5 grow max-w-full"
-          placeholder="universal.handle"
-          size={30}
-          value={handleValue}
-          onChange={(e) => setHandleValue(e.target.value)}
-        />
+    <div className="handleInput input-with-border relative pl-0! py-0! flex gap-0 ">
+      <div className="border-r border-border text-center w-7 shrink-0 mr-2">
+        @
       </div>
-      {!props.compact && (
-        <>
-          <div className="w-full flex gap-2 items-center mt-2 mb-3 ">
-            <hr className="grow border-border-light" />
-            <div className="shrink-0 text-sm italix text-tertiary">
-              or link with
-            </div>
-            <hr className="grow border-border-light" />
-          </div>
-          <ButtonPrimary fullWidth>
-            <BlueskyTiny /> Bluesky
-          </ButtonPrimary>
-        </>
+      <Input
+        className={`appearance-none! outline-none! py-0.5 ${props.compact ? "pr-6" : "pr-14"} grow max-w-full`}
+        placeholder="universal.handle"
+        size={30}
+        value={handleValue}
+        onChange={(e) => setHandleValue(e.target.value)}
+      />
+
+      {props.compact ? (
+        <button className="absolute text-sm py-0! right-[6px] top-[6px] leading-snug outline-none!">
+          <GoToArrow />
+        </button>
+      ) : (
+        <ButtonPrimary
+          compact
+          className="absolute text-sm py-0! right-[3px] top-[3.5px] leading-snug outline-none!"
+        >
+          Subscribe
+        </ButtonPrimary>
       )}
     </div>
   );
 };
 
+export const HandleInputandOAuth = () => {
+  return (
+    <div className="handleInputAndOAuth flex flex-col">
+      <HandleInput />
+      <div className="w-full flex gap-2 items-center mt-2 mb-3 ">
+        <hr className="grow border-border-light" />
+        <div className="shrink-0 text-sm italix text-tertiary">
+          or link with
+        </div>
+        <hr className="grow border-border-light" />
+      </div>
+      <ButtonPrimary fullWidth>
+        <BlueskyTiny /> Bluesky
+      </ButtonPrimary>
+    </div>
+  );
+};
+
 export const AtSubscribeSuccess = (props: {}) => {
   return (
     <div className="flex flex-col text-center justify-center p-4 text-secondary max-w-md">
diff --git a/components/Subscribe/SubscribeButton.tsx b/components/Subscribe/SubscribeButton.tsx
index 81b6a3c6..ea2e7a8b 100644
--- a/components/Subscribe/SubscribeButton.tsx
+++ b/components/Subscribe/SubscribeButton.tsx
@@ -1,4 +1,4 @@
-import { AtSubscribe } from "./AtSubscribe";
+import { HandleSubscribe } from "./HandleSubscribe";
 import { EmailSubscribe } from "./EmailSubscribe";
 
 export const SubscribeButton = (props: {
@@ -11,5 +11,5 @@ export const SubscribeButton = (props: {
 }) => {
   if (props.newsletterMode) {
     return <EmailSubscribe user={props.user} />;
-  } else return <AtSubscribe user={props.user} compact />;
+  } else return <HandleSubscribe user={props.user} />;
 };
-- 
2.51.2