feat(share): flat share band after an upvote, for everyone

packages/shared/src/components/post/EndOfConversationShare.tsx

@@ -2,13 +2,7 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../graphql/posts';
-import { ShareActions } from '../share/ShareActions';
-import {
-  Typography,
-  TypographyColor,
-  TypographyType,
-} from '../typography/Typography';
-import { ButtonSize, ButtonVariant } from '../buttons/common';
+import { ShareBand } from '../share/ShareBand';
 import { useLogContext } from '../../contexts/LogContext';
 import { postLogEvent } from '../../lib/feed';
 import { LogEvent, Origin } from '../../lib/log';
@@ -62,42 +56,20 @@ export const EndOfConversationShare = ({
     );
 
   return (
-    <aside
-      // Labelled by its own visible copy, so no aria-label here — a second
-      // label on the landmark would shadow the share button's.
+    <ShareBand
+      title="Enjoyed this discussion?"
+      description="Send it to someone who’d have opinions."
+      link={post.commentsPermalink}
+      text={post.title ?? post.sharedPost?.title ?? ''}
+      cid={ReferralCampaignKey.SharePost}
       className={classNames(
-        'flex flex-col items-center gap-3 text-center tablet:flex-row tablet:justify-between tablet:text-left',
         variant === 'card' &&
           'rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4',
         variant === 'flat' &&
           'border-t border-border-subtlest-tertiary pb-4 pt-6',
         className,
       )}
-    >
-      <div className="flex min-w-0 flex-col gap-0.5">
-        <Typography bold type={TypographyType.Callout}>
-          Enjoyed this discussion?
-        </Typography>
-        <Typography
-          type={TypographyType.Footnote}
-          color={TypographyColor.Tertiary}
-        >
-          Send it to someone who&apos;d have opinions.
-        </Typography>
-      </div>
-      <ShareActions
-        link={post.commentsPermalink}
-        text={post.title ?? post.sharedPost?.title ?? ''}
-        cid={ReferralCampaignKey.SharePost}
-        variant="split"
-        buttonVariant={ButtonVariant.Primary}
-        buttonSize={ButtonSize.Small}
-        label="Copy link"
-        triggerText="Copy link"
-        dropdownLabel="More share options"
-        className="shrink-0"
-        onShare={onShare}
-      />
-    </aside>
+      onShare={onShare}
+    />
   );
 };

packages/shared/src/components/post/MobilePostFloatingBar.tsx

@@ -15,6 +15,7 @@ import { ButtonColor, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { IconSize } from '../Icon';
 import InteractionCounter from '../InteractionCounter';
 import { useVotePost } from '../../hooks/vote/useVotePost';
+import { useRecordUpvoteInteraction } from '../../hooks/post/usePostActions';
 import { useBookmarkPost } from '../../hooks/useBookmarkPost';
 import { useBlockPostPanel } from '../../hooks/post/useBlockPostPanel';
 import { useCopyPostLink } from '../../hooks/useCopyPostLink';
@@ -62,6 +63,7 @@ function MobilePostFloatingBarV1({
   const origin = LogOrigin.ArticlePage;
   const { onClose, onShowPanel } = useBlockPostPanel(post);
   const { toggleUpvote, toggleDownvote } = useVotePost();
+  const recordUpvoteInteraction = useRecordUpvoteInteraction({ post });
   const { toggleBookmark } = useBookmarkPost();
 
   // Match the desktop `PostActions` copy flow: fetch the short URL imperatively
@@ -80,6 +82,8 @@ function MobilePostFloatingBarV1({
       onClose(true);
     }
 
+    recordUpvoteInteraction(isUpvoteActive);
+
     await toggleUpvote({ payload: post, origin });
   };
 

packages/shared/src/components/post/MobilePostFloatingBar.v2.tsx

@@ -14,6 +14,7 @@ import { CardActionBar } from '../buttons/CardActionBar';
 import { BookmarkButton } from '../buttons/BookmarkButton.v2';
 import { ButtonColor } from '../buttons/ButtonV2';
 import { useVotePost } from '../../hooks/vote/useVotePost';
+import { useRecordUpvoteInteraction } from '../../hooks/post/usePostActions';
 import { useBookmarkPost } from '../../hooks/useBookmarkPost';
 import { useBlockPostPanel } from '../../hooks/post/useBlockPostPanel';
 import { useCopyPostLink } from '../../hooks/useCopyPostLink';
@@ -45,6 +46,7 @@ export function MobilePostFloatingBar({
   const origin = LogOrigin.ArticlePage;
   const { onClose, onShowPanel } = useBlockPostPanel(post);
   const { toggleUpvote, toggleDownvote } = useVotePost();
+  const recordUpvoteInteraction = useRecordUpvoteInteraction({ post });
   const { toggleBookmark } = useBookmarkPost();
 
   const { getShortUrl } = useGetShortUrl();
@@ -61,6 +63,8 @@ export function MobilePostFloatingBar({
       onClose(true);
     }
 
+    recordUpvoteInteraction(isUpvoteActive);
+
     await toggleUpvote({ payload: post, origin });
   };
 

packages/shared/src/components/post/PostActions.tsx

@@ -16,6 +16,7 @@ import { useMutationSubscription, useVotePost } from '../../hooks';
 import { Origin } from '../../lib/log';
 import { PostTagsPanel } from './block/PostTagsPanel';
 import { useBlockPostPanel } from '../../hooks/post/useBlockPostPanel';
+import { useRecordUpvoteInteraction } from '../../hooks/post/usePostActions';
 import { useBookmarkPost } from '../../hooks/useBookmarkPost';
 import { ButtonColor, ButtonVariant } from '../buttons/Button';
 import { BookmarkButton } from '../buttons';
@@ -53,6 +54,7 @@ function PostActionsV1({
   const { showLogin, user } = useAuthContext();
   const { openModal } = useLazyModal();
   const { data, onShowPanel, onClose } = useBlockPostPanel(post);
+  const recordUpvoteInteraction = useRecordUpvoteInteraction({ post });
   const { showTagsPanel } = data;
   const actionsRef = useRef<HTMLDivElement>(null);
   const canAward = useCanAwardUser({
@@ -93,6 +95,8 @@ function PostActionsV1({
       onClose(true);
     }
 
+    recordUpvoteInteraction(isUpvoteActive);
+
     await toggleUpvote({ payload: post, origin });
   };
 

packages/shared/src/components/post/PostEngagements.tsx

@@ -63,7 +63,7 @@ function PostEngagements({
     useSettingsContext();
   const { user, showLogin } = useAuthContext();
   const { isPlus } = usePlusSubscription();
-  const commentRef = useRef<NewCommentRef>();
+  const commentRef = useRef<NewCommentRef>(null);
   const [authorOnboarding, setAuthorOnboarding] = useState(false);
   const [permissionNotificationCommentId, setPermissionNotificationCommentId] =
     useState<string>();
@@ -91,6 +91,7 @@ function PostEngagements({
     setPermissionNotificationCommentId(comment.id);
 
     if (
+      !!post.source &&
       isSourcePublicSquad(post.source) &&
       !post.source?.currentMember &&
       !isJoinSquadBannerDismissed
@@ -125,7 +126,10 @@ function PostEngagements({
         origin={logOrigin}
       />
       <PostContentReminder post={post} />
-      <PostContentShare post={post} />
+      {/* `PostContainer` is a flex column with no gap, so margins do not
+          collapse: the sort row below already carries `mt-3`. Spending only
+          `mb-1` here lands 16px of air on both sides of the prompt. */}
+      <PostContentShare post={post} className="mb-1 mt-4" />
       {linkClicked && <SocialBar post={post} className="mt-6" />}
       <span className="mt-3 flex flex-row items-center">
         <Typography type={TypographyType.Callout}>Sort:</Typography>
@@ -136,7 +140,9 @@ function PostEngagements({
           icon={
             <TimeSortIcon
               secondary
-              className={sortBy === SortCommentsBy.OldestFirst && 'rotate-180'}
+              className={
+                sortBy === SortCommentsBy.OldestFirst ? 'rotate-180' : undefined
+              }
             />
           }
           onClick={() =>
@@ -176,7 +182,7 @@ function PostEngagements({
       {authorOnboarding && (
         <AuthorOnboarding
           onSignUp={
-            !user && (() => showLogin({ trigger: AuthTriggers.Author }))
+            user ? undefined : () => showLogin({ trigger: AuthTriggers.Author })
           }
         />
       )}