feat: Pinterest-style post discovery mockup

packages/shared/src/components/ShareBar.tsx

@@ -23,16 +23,24 @@ import { useAuthContext } from '../contexts/AuthContext';
 
 interface ShareBarProps {
   post: Post;
+  visibleRows?: number;
 }
 
-const visibleRows = 2;
 const columns = 4;
 const fixedOptions = 4;
-const maxVisibleOptions = visibleRows * columns;
-const maxVisibleSquadsWhenCollapsed = maxVisibleOptions - fixedOptions;
 
-export default function ShareBar({ post }: ShareBarProps): ReactElement {
+export default function ShareBar({
+  post,
+  visibleRows = 2,
+}: ShareBarProps): ReactElement {
   const [isExpanded, setIsExpanded] = useState(false);
+  const maxVisibleOptions = visibleRows * columns;
+  const maxVisibleSquadsWhenCollapsed = Math.max(
+    maxVisibleOptions - fixedOptions,
+    0,
+  );
+  const shouldShowSquadOptions =
+    isExpanded || maxVisibleSquadsWhenCollapsed > 0;
   const href = post.commentsPermalink;
   const cid = ReferralCampaignKey.SharePost;
   const { getShortUrl } = useGetShortUrl();
@@ -130,12 +138,14 @@ export default function ShareBar({ post }: ShareBarProps): ReactElement {
           onClick={() => onClick(ShareProvider.Twitter)}
           label="X"
         />
-        <SquadsToShare
-          size={ButtonSize.Medium}
-          squadAvatarSize={ProfileImageSize.Large}
-          maxItems={isExpanded ? undefined : maxVisibleSquadsWhenCollapsed}
-          onClick={(_, squad) => onShareToSquad(squad)}
-        />
+        {shouldShowSquadOptions && (
+          <SquadsToShare
+            size={ButtonSize.Medium}
+            squadAvatarSize={ProfileImageSize.Large}
+            maxItems={isExpanded ? undefined : maxVisibleSquadsWhenCollapsed}
+            onClick={(_, squad) => onShareToSquad(squad)}
+          />
+        )}
       </div>
       {shouldShowToggle && (
         <Button

packages/shared/src/components/modals/ArticlePostModal.tsx

@@ -9,6 +9,8 @@ import type { Post } from '../../graphql/posts';
 import { PostType } from '../../graphql/posts';
 import type { PassedPostNavigationProps } from '../post/common';
 import { Origin } from '../../lib/log';
+import { usePostDiscoveryExperience } from '../../hooks/post/usePostDiscoveryExperience';
+import { PostFocusCard } from '../post/discovery/PostFocusCard';
 
 interface ArticlePostModalProps extends ModalProps, PassedPostNavigationProps {
   id: string;
@@ -29,12 +31,15 @@ export default function ArticlePostModal({
     isDisplayed: props.isOpen,
     offset: 0,
   });
+  const { showDiscovery } = usePostDiscoveryExperience(post);
 
   return (
     <BasePostModal
       {...props}
       post={post}
       onAfterOpen={onLoad}
+      size={showDiscovery ? Modal.Size.Large : Modal.Size.XLarge}
+      className={showDiscovery ? 'laptop:!overflow-visible' : undefined}
       onRequestClose={onRequestClose}
       postType={PostType.Article}
       source={post.source}
@@ -43,24 +48,32 @@ export default function ArticlePostModal({
       onPreviousPost={onPreviousPost}
       onNextPost={onNextPost}
     >
-      <PostContent
-        position={position}
-        post={post}
-        postPosition={postPosition}
-        onPreviousPost={onPreviousPost}
-        onNextPost={onNextPost}
-        inlineActions
-        className={{
-          onboarding: 'mt-8',
-          navigation: { actions: 'ml-auto tablet:hidden' },
-          fixedNavigation: {
-            container: modalSizeToClassName[Modal.Size.XLarge],
-            actions: 'ml-auto',
-          },
-        }}
-        onClose={onRequestClose}
-        origin={Origin.ArticleModal}
-      />
+      {showDiscovery ? (
+        <PostFocusCard
+          post={post}
+          origin={Origin.ArticleModal}
+          onClose={() => onRequestClose?.(undefined as never)}
+        />
+      ) : (
+        <PostContent
+          position={position}
+          post={post}
+          postPosition={postPosition}
+          onPreviousPost={onPreviousPost}
+          onNextPost={onNextPost}
+          inlineActions
+          className={{
+            onboarding: 'mt-8',
+            navigation: { actions: 'ml-auto tablet:hidden' },
+            fixedNavigation: {
+              container: modalSizeToClassName[Modal.Size.XLarge],
+              actions: 'ml-auto',
+            },
+          }}
+          onClose={onRequestClose}
+          origin={Origin.ArticleModal}
+        />
+      )}
     </BasePostModal>
   );
 }

packages/shared/src/components/modals/CollectionPostModal.tsx

@@ -9,6 +9,8 @@ import type { Post } from '../../graphql/posts';
 import { PostType } from '../../graphql/posts';
 import type { PassedPostNavigationProps } from '../post/common';
 import { CollectionPostContent } from '../post/collection';
+import { usePostDiscoveryExperience } from '../../hooks/post/usePostDiscoveryExperience';
+import { PostFocusCard } from '../post/discovery/PostFocusCard';
 
 interface CollectionPostModalProps
   extends ModalProps,
@@ -31,12 +33,15 @@ export default function CollectionPostModal({
     isDisplayed: props.isOpen,
     offset: 0,
   });
+  const { showDiscovery } = usePostDiscoveryExperience(post);
 
   return (
     <BasePostModal
       {...props}
       post={post}
       onAfterOpen={onLoad}
+      size={showDiscovery ? Modal.Size.Large : Modal.Size.XLarge}
+      className={showDiscovery ? 'laptop:!overflow-visible' : undefined}
       onRequestClose={onRequestClose}
       postType={PostType.Collection}
       source={post.source}
@@ -45,24 +50,32 @@ export default function CollectionPostModal({
       onPreviousPost={onPreviousPost}
       onNextPost={onNextPost}
     >
-      <CollectionPostContent
-        position={position}
-        post={post}
-        postPosition={postPosition}
-        onPreviousPost={onPreviousPost}
-        onNextPost={onNextPost}
-        inlineActions
-        className={{
-          onboarding: 'mt-8',
-          navigation: { actions: 'ml-auto laptop:hidden' },
-          fixedNavigation: {
-            container: modalSizeToClassName[Modal.Size.XLarge],
-            actions: 'ml-auto',
-          },
-        }}
-        onClose={onRequestClose}
-        origin={Origin.CollectionModal}
-      />
+      {showDiscovery ? (
+        <PostFocusCard
+          post={post}
+          origin={Origin.CollectionModal}
+          onClose={() => onRequestClose?.(undefined as never)}
+        />
+      ) : (
+        <CollectionPostContent
+          position={position}
+          post={post}
+          postPosition={postPosition}
+          onPreviousPost={onPreviousPost}
+          onNextPost={onNextPost}
+          inlineActions
+          className={{
+            onboarding: 'mt-8',
+            navigation: { actions: 'ml-auto laptop:hidden' },
+            fixedNavigation: {
+              container: modalSizeToClassName[Modal.Size.XLarge],
+              actions: 'ml-auto',
+            },
+          }}
+          onClose={onRequestClose}
+          origin={Origin.CollectionModal}
+        />
+      )}
     </BasePostModal>
   );
 }

packages/shared/src/components/modals/SharePostModal.tsx

@@ -11,6 +11,8 @@ import { PostType } from '../../graphql/posts';
 import EnableNotification from '../notifications/EnableNotification';
 import { SquadPostContent } from '../post/SquadPostContent';
 import { isSourceUserSource } from '../../graphql/sources';
+import { usePostDiscoveryExperience } from '../../hooks/post/usePostDiscoveryExperience';
+import { PostFocusCard } from '../post/discovery/PostFocusCard';
 
 interface PostModalProps extends ModalProps, PassedPostNavigationProps {
   id: string;
@@ -31,13 +33,15 @@ export default function PostModal({
     isDisplayed: props.isOpen,
     offset: 0,
   });
+  const { showDiscovery } = usePostDiscoveryExperience(post);
 
   return (
     <BasePostModal
       {...props}
       post={post}
       onAfterOpen={onLoad}
-      size={Modal.Size.XLarge}
+      size={showDiscovery ? Modal.Size.Large : Modal.Size.XLarge}
+      className={showDiscovery ? 'laptop:!overflow-visible' : undefined}
       onRequestClose={onRequestClose}
       postType={PostType.Share}
       source={post.source}
@@ -46,29 +50,42 @@ export default function PostModal({
       onPreviousPost={onPreviousPost}
       onNextPost={onNextPost}
     >
-      <EnableNotification
-        source={NotificationPromptSource.SquadPostModal}
-        label={
-          isSourceUserSource(post?.source)
-            ? post?.author?.username
-            : post?.source?.handle
-        }
-      />
-      <SquadPostContent
-        position={position}
-        post={post}
-        onPreviousPost={onPreviousPost}
-        onNextPost={onNextPost}
-        postPosition={postPosition}
-        inlineActions
-        onClose={onRequestClose}
-        origin={Origin.ArticleModal}
-        className={{
-          fixedNavigation: { container: '!w-[inherit]', actions: 'ml-auto' },
-          navigation: { actions: 'ml-auto tablet:hidden' },
-          onboarding: 'mb-0 mt-8',
-        }}
-      />
+      {showDiscovery ? (
+        <PostFocusCard
+          post={post}
+          origin={Origin.ArticleModal}
+          onClose={() => onRequestClose?.(undefined as never)}
+        />
+      ) : (
+        <>
+          <EnableNotification
+            source={NotificationPromptSource.SquadPostModal}
+            label={
+              isSourceUserSource(post?.source)
+                ? post?.author?.username
+                : post?.source?.handle
+            }
+          />
+          <SquadPostContent
+            position={position}
+            post={post}
+            onPreviousPost={onPreviousPost}
+            onNextPost={onNextPost}
+            postPosition={postPosition}
+            inlineActions
+            onClose={onRequestClose}
+            origin={Origin.ArticleModal}
+            className={{
+              fixedNavigation: {
+                container: '!w-[inherit]',
+                actions: 'ml-auto',
+              },
+              navigation: { actions: 'ml-auto tablet:hidden' },
+              onboarding: 'mb-0 mt-8',
+            }}
+          />
+        </>
+      )}
     </BasePostModal>
   );
 }

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

@@ -44,6 +44,12 @@ interface PostCommentsProps {
   onClickUpvote?: (commentId: string, upvotes: number) => unknown;
   className?: CommentClassName;
   onCommented?: MainCommentProps['onCommented'];
+  /**
+   * Drop the list's top margin. Use when comments are the first element in
+   * their container (e.g. the discovery discussion panel) so they don't get an
+   * extra gap above the first item.
+   */
+  removeTopSpacing?: boolean;
 }
 
 const noopShare = (): void => {};
@@ -61,6 +67,7 @@ export function PostComments({
   joinNotificationCommentId,
   className = {},
   onCommented,
+  removeTopSpacing = false,
 }: PostCommentsProps): ReactElement {
   const { id } = post;
   const container = useRef<HTMLDivElement | null>(null);
@@ -119,9 +126,12 @@ export function PostComments({
         isModalThread
           ? classNames(
               'mb-12 flex flex-col gap-4',
-              isComposerOpen ? 'mt-2' : 'mt-5',
+              !removeTopSpacing && (isComposerOpen ? 'mt-2' : 'mt-5'),
+            )
+          : classNames(
+              '-mx-4 mb-12 flex flex-col gap-4 mobileL:mx-0',
+              !removeTopSpacing && 'mt-6',
             )
-          : '-mx-4 mb-12 mt-6 flex flex-col gap-4 mobileL:mx-0'
       }
       ref={container}
     >

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

@@ -38,6 +38,8 @@ export function PostHeaderActions({
   isFixedNavigation,
   buttonSize,
   hideSubscribeAction,
+  hideMenuOptions,
+  readButtonVariant,
   ...props
 }: PostHeaderActionsProps): ReactElement {
   const { openNewTab } = useContext(SettingsContext);
@@ -110,7 +112,7 @@ export function PostHeaderActions({
               variant={
                 isFixedNavigation || isMobile
                   ? ButtonVariant.Tertiary
-                  : ButtonVariant.Secondary
+                  : readButtonVariant ?? ButtonVariant.Secondary
               }
               tag="a"
               href={readHref}
@@ -133,11 +135,13 @@ export function PostHeaderActions({
       {isCollection && !hideSubscribeAction && (
         <CollectionSubscribeButton post={post} />
       )}
-      <PostMenuOptions
-        post={post}
-        origin={Origin.ArticleModal}
-        buttonSize={buttonSize}
-      />
+      {!hideMenuOptions && (
+        <PostMenuOptions
+          post={post}
+          origin={Origin.ArticleModal}
+          buttonSize={buttonSize}
+        />
+      )}
     </Container>
   );
 }