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/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>
   );
 }

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

@@ -12,7 +12,7 @@ import type {
   UsePostContent,
   UsePostContentProps,
 } from '../../hooks/usePostContent';
-import type { ButtonSize } from '../buttons/common';
+import type { ButtonSize, ButtonVariant } from '../buttons/common';
 
 export interface PostContentClassName {
   container?: string;
@@ -69,6 +69,10 @@ export interface PostHeaderActionsProps {
   isFixedNavigation?: boolean;
   buttonSize?: ButtonSize;
   hideSubscribeAction?: boolean;
+  /** Hides the trailing "..." menu (e.g. when it is surfaced elsewhere). */
+  hideMenuOptions?: boolean;
+  /** Overrides the read button variant on desktop (defaults to Secondary). */
+  readButtonVariant?: ButtonVariant;
 }
 
 export interface PostContentProps

packages/shared/src/components/post/common/PostClickbaitShield.tsx

@@ -12,6 +12,7 @@ import {
 } from '../../../hooks';
 import { useLazyModal } from '../../../hooks/useLazyModal';
 import { LazyModal } from '../../modals/common/types';
+import { IconSize } from '../../Icon';
 
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
 import type { Post } from '../../../graphql/posts';
@@ -23,7 +24,13 @@ import { Typography, TypographyType } from '../../typography/Typography';
 import { PostUpgradeToPlus } from '../../plus/PostUpgradeToPlus';
 import { TargetId } from '../../../lib/log';
 
-export const PostClickbaitShield = ({ post }: { post: Post }): ReactElement => {
+export const PostClickbaitShield = ({
+  post,
+  iconOnly = false,
+}: {
+  post: Post;
+  iconOnly?: boolean;
+}): ReactElement => {
   const { openModal } = useLazyModal();
   const { isPlus } = usePlusSubscription();
   const { fetchSmartTitle, fetchedSmartTitle, shieldActive } =
@@ -33,6 +40,78 @@ export const PostClickbaitShield = ({ post }: { post: Post }): ReactElement => {
   const { user } = useAuthContext();
   const { hasUsedFreeTrial, triesLeft } = useClickbaitTries();
 
+  if (iconOnly) {
+    const isActive = isPlus ? shieldActive : fetchedSmartTitle;
+    const handleIconClick = async () => {
+      if (isPlus || !hasUsedFreeTrial) {
+        await fetchSmartTitle();
+        return;
+      }
+
+      if (isMobile) {
+        openModal({ type: LazyModal.ClickbaitShield });
+        return;
+      }
+
+      if (!user) {
+        throw new Error(
+          'PostClickbaitShield requires an authenticated user to edit feed settings',
+        );
+      }
+
+      router.push(
+        `${webappUrl}feeds/${user.id}/edit?dview=${FeedSettingsMenu.AI}`,
+      );
+    };
+
+    const tooltipContent = (() => {
+      if (isActive) {
+        return 'Click to see the original title';
+      }
+      return isPlus
+        ? 'Click to see the optimized title'
+        : 'Optimize this title with Clickbait Shield';
+    })();
+
+    const renderIcon = () => {
+      if (isActive) {
+        return (
+          <ShieldCheckIcon
+            className="text-status-success"
+            size={IconSize.Large}
+          />
+        );
+      }
+      if (isPlus) {
+        return <ShieldIcon size={IconSize.Large} />;
+      }
+      return (
+        <ShieldWarningIcon
+          className={
+            hasUsedFreeTrial
+              ? 'text-accent-ketchup-default'
+              : 'text-accent-cheese-default'
+          }
+          size={IconSize.Large}
+        />
+      );
+    };
+
+    return (
+      <Tooltip content={tooltipContent}>
+        <Button
+          aria-label="Clickbait Shield"
+          icon={renderIcon()}
+          iconSecondaryOnHover
+          onClick={handleIconClick}
+          size={ButtonSize.Medium}
+          type="button"
+          variant={ButtonVariant.Tertiary}
+        />
+      </Tooltip>
+    );
+  }
+
   if (!isPlus) {
     return (
       <>

packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx

@@ -0,0 +1,106 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { Post } from '../../../graphql/posts';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
+import { useSettingsContext } from '../../../contexts/SettingsContext';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { TimeSortIcon } from '../../icons/Sort/Time';
+import { AnalyticsIcon } from '../../icons';
+import { SortCommentsBy } from '../../../graphql/comments';
+import { ClickableText } from '../../buttons/ClickableText';
+import Link from '../../utilities/Link';
+import { largeNumberFormat } from '../../../lib';
+import { canViewPostAnalytics } from '../../../lib/user';
+import { webappUrl } from '../../../lib/constants';
+
+interface DiscussionMetaBarProps {
+  post: Post;
+  className?: string;
+  /** Optional content rendered on the right edge of the strip (e.g. clickbait shield). */
+  rightSlot?: ReactNode;
+}
+
+/**
+ * Post stats + comment sort strip. Lives in the left content column above the
+ * action bar; the sort toggle updates the shared settings context, so the
+ * discussion panel re-sorts its comments accordingly.
+ */
+export const DiscussionMetaBar = ({
+  post,
+  className,
+  rightSlot,
+}: DiscussionMetaBarProps): ReactElement => {
+  const { user } = useAuthContext();
+  const { onShowUpvoted } = useUpvoteQuery();
+  const { sortCommentsBy: sortBy, updateSortCommentsBy: setSortBy } =
+    useSettingsContext();
+  const upvotes = post.numUpvotes || 0;
+  const comments = post.numComments || 0;
+  const canSeeAnalytics = canViewPostAnalytics({ user, post });
+  const isNewestFirst = sortBy === SortCommentsBy.NewestFirst;
+  const sortLabel = isNewestFirst ? 'Sort: Newest first' : 'Sort: Oldest first';
+
+  return (
+    <div
+      className={classNames(
+        'flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 text-text-tertiary typo-callout',
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-wrap items-center gap-x-4">
+        {upvotes > 0 && (
+          <ClickableText onClick={() => onShowUpvoted(post.id, upvotes)}>
+            {largeNumberFormat(upvotes)} Upvote{upvotes > 1 ? 's' : ''}
+          </ClickableText>
+        )}
+        <span>
+          {largeNumberFormat(comments)} Comment{comments === 1 ? '' : 's'}
+        </span>
+        {canSeeAnalytics && (
+          <Link
+            href={`${webappUrl}posts/${post.id}/analytics`}
+            passHref
+            prefetch={false}
+          >
+            <ClickableText
+              tag="a"
+              className="gap-1"
+              textClassName="text-text-tertiary"
+            >
+              <AnalyticsIcon />
+              Analytics
+            </ClickableText>
+          </Link>
+        )}
+        <Button
+          type="button"
+          size={ButtonSize.XSmall}
+          variant={ButtonVariant.Tertiary}
+          icon={
+            <TimeSortIcon
+              secondary
+              className={isNewestFirst ? undefined : 'rotate-180'}
+            />
+          }
+          onClick={() =>
+            setSortBy(
+              isNewestFirst
+                ? SortCommentsBy.OldestFirst
+                : SortCommentsBy.NewestFirst,
+            )
+          }
+          aria-label={sortLabel}
+          title={sortLabel}
+          className="!text-text-tertiary"
+        />
+      </div>
+      {rightSlot && (
+        <div className="flex shrink-0 items-center [&_.mr-2]:!mr-0 [&_.mt-4]:!mt-0 [&_.mt-6]:!mt-0">
+          {rightSlot}
+        </div>
+      )}
+    </div>
+  );
+};