From f6d9fbe39b32ebf43402a0849738365036d41418 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 11:09:53 +0300
Subject: [PATCH 001/111] feat: add Pinterest-style post discovery mockup

Introduce a discovery experience for the post page that turns a read into a
continuous exploration loop:

- PostFocusCard: borderless two-column card (summary/key points left, live
  discussion right) with a Lean/Rich content-depth toggle.
- PostDiscussionPanel: extracted the comment stack (counts, sort, composer,
  comments, share) out of EngagementRail so the reader and the focus card
  share one source of truth instead of duplicating it.
- PostDiscoveryFeed: a finite, topic-relevant rail followed by the infinite
  personalized feed, filling the page with relevant content.
- PostDiscoveryLayout: shell with a value-timed signup nudge, impression
  logging, and a back-to-top control.
- Mockup route /posts/[id]/discovery (noindex) gated behind the new
  post_discovery_experience flag.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscoveryFeed.tsx      | 124 ++++++++++++
 .../post/discovery/PostDiscoveryLayout.tsx    | 102 ++++++++++
 .../post/discovery/PostDiscussionPanel.tsx    | 181 ++++++++++++++++++
 .../post/discovery/PostFocusCard.tsx          | 162 ++++++++++++++++
 .../components/post/reader/EngagementRail.tsx | 162 +++-------------
 packages/shared/src/lib/featureManagement.ts  |   4 +
 .../webapp/pages/posts/[id]/discovery.tsx     | 175 +++++++++++++++++
 7 files changed, 775 insertions(+), 135 deletions(-)
 create mode 100644 packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
 create mode 100644 packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
 create mode 100644 packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
 create mode 100644 packages/shared/src/components/post/discovery/PostFocusCard.tsx
 create mode 100644 packages/webapp/pages/posts/[id]/discovery.tsx

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
new file mode 100644
index 00000000000..c565519eb39
--- /dev/null
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -0,0 +1,124 @@
+import type { ReactElement } from 'react';
+import React, { useContext, useMemo } from 'react';
+import type { Post } from '../../../graphql/posts';
+import Feed from '../../Feed';
+import FeedContext from '../../../contexts/FeedContext';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import {
+  ANONYMOUS_FEED_QUERY,
+  FEED_BY_TAGS_QUERY,
+  FEED_V2_QUERY,
+} from '../../../graphql/feed';
+import { OtherFeedPage } from '../../../lib/query';
+import { SharedFeedPage } from '../../utilities';
+import {
+  getPostTopicLabel,
+  getPostTopicTags,
+} from '../anonymousPostExperience';
+
+export const POST_DISCOVERY_FEED_ANCHOR = 'post-discovery-feed';
+
+interface PostDiscoveryFeedProps {
+  post: Post;
+}
+
+interface SectionHeaderProps {
+  eyebrow: string;
+  title: string;
+  description: string;
+}
+
+const SectionHeader = ({
+  eyebrow,
+  title,
+  description,
+}: SectionHeaderProps): ReactElement => (
+  <header className="mb-4 flex flex-col gap-1">
+    <p className="text-accent-cabbage-default typo-caption1">{eyebrow}</p>
+    <h2 className="font-bold text-text-primary typo-title2">{title}</h2>
+    <p className="text-text-tertiary typo-callout">{description}</p>
+  </header>
+);
+
+/**
+ * Wraps a Feed in a FeedContext override so the discovery rail/grid uses a
+ * deliberate column count instead of inheriting the user's feed density.
+ */
+const FeedWithColumns = ({
+  columns,
+  children,
+}: {
+  columns: number;
+  children: ReactElement;
+}): ReactElement => {
+  const currentSettings = useContext(FeedContext);
+  const value = useMemo(
+    () => ({
+      ...currentSettings,
+      numCards: { eco: columns, roomy: columns, cozy: columns },
+    }),
+    [currentSettings, columns],
+  );
+
+  return <FeedContext.Provider value={value}>{children}</FeedContext.Provider>;
+};
+
+/**
+ * The Pinterest-style discovery surface below the focus card: a finite,
+ * topic-relevant rail ("more like this") followed by the infinite personalized
+ * feed, turning the post page into a continuous exploration loop.
+ */
+export const PostDiscoveryFeed = ({
+  post,
+}: PostDiscoveryFeedProps): ReactElement => {
+  const { user } = useAuthContext();
+  const topics = getPostTopicTags(post);
+  const topicLabel = getPostTopicLabel(topics);
+  const tags = (post.tags ?? []).filter((tag): tag is string => !!tag);
+  const hasTags = tags.length > 0;
+
+  const mainQuery = user ? FEED_V2_QUERY : ANONYMOUS_FEED_QUERY;
+
+  return (
+    <div
+      className="flex w-full flex-col gap-10"
+      id={POST_DISCOVERY_FEED_ANCHOR}
+    >
+      {hasTags && (
+        <section aria-label="More on this topic">
+          <SectionHeader
+            eyebrow="More like this"
+            title={`More on ${topicLabel}`}
+            description="Hand-picked stories close to what you just read."
+          />
+          <FeedWithColumns columns={3}>
+            <Feed
+              feedName={OtherFeedPage.ExploreTag}
+              feedQueryKey={['post-discovery-related', post.id]}
+              query={FEED_BY_TAGS_QUERY}
+              variables={{ tags }}
+              disableAds
+              allowFetchMore={false}
+              pageSize={12}
+              isHorizontal
+            />
+          </FeedWithColumns>
+        </section>
+      )}
+
+      <section aria-label="Discover more">
+        <SectionHeader
+          eyebrow="Keep exploring"
+          title="Discover more"
+          description="A fresh stream of developer stories, discussions, and tools."
+        />
+        <Feed
+          feedName={SharedFeedPage.Popular}
+          feedQueryKey={['post-discovery-more', post.id]}
+          query={mainQuery}
+          variables={{}}
+        />
+      </section>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
new file mode 100644
index 00000000000..43d4f8f9cc3
--- /dev/null
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -0,0 +1,102 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import type { Post } from '../../../graphql/posts';
+import type { PostOrigin } from '../../../hooks/log/useLogContextData';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { useLogContext } from '../../../contexts/LogContext';
+import { LogEvent, TargetType } from '../../../lib/log';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { ArrowIcon } from '../../icons';
+import { BuildYourFeedWidget } from '../BuildYourFeedWidget';
+import type { FocusCardLeftVariant } from './PostFocusCard';
+import { PostFocusCard } from './PostFocusCard';
+import {
+  POST_DISCOVERY_FEED_ANCHOR,
+  PostDiscoveryFeed,
+} from './PostDiscoveryFeed';
+
+interface PostDiscoveryLayoutProps {
+  post: Post;
+  origin: PostOrigin;
+  leftVariant?: FocusCardLeftVariant;
+}
+
+const BackToTop = (): ReactElement | null => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const onScroll = (): void => {
+      setIsVisible(globalThis.window.scrollY > 800);
+    };
+    onScroll();
+    globalThis.window.addEventListener('scroll', onScroll, { passive: true });
+
+    return () => globalThis.window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  const scrollToTop = useCallback(() => {
+    globalThis.window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, []);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <Button
+      aria-label="Back to top"
+      className="fixed bottom-6 right-6 z-3 -rotate-90"
+      icon={<ArrowIcon />}
+      onClick={scrollToTop}
+      size={ButtonSize.Large}
+      type="button"
+      variant={ButtonVariant.Primary}
+    />
+  );
+};
+
+export const PostDiscoveryLayout = ({
+  post,
+  origin,
+  leftVariant = 'rich',
+}: PostDiscoveryLayoutProps): ReactElement => {
+  const { user } = useAuthContext();
+  const { logEvent } = useLogContext();
+
+  useEffect(() => {
+    logEvent({
+      event_name: LogEvent.Impression,
+      target_type: TargetType.Post,
+      target_id: post.id,
+      extra: JSON.stringify({ origin, surface: 'post_discovery' }),
+    });
+    // Fire once per post on this surface.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [post.id]);
+
+  return (
+    <div className="flex w-full flex-col bg-background-default">
+      <div className="mx-auto flex w-full max-w-[75rem] flex-col gap-10 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
+        <div className="mx-auto w-full max-w-[64rem]">
+          <PostFocusCard
+            discoveryAnchorId={POST_DISCOVERY_FEED_ANCHOR}
+            leftVariant={leftVariant}
+            origin={origin}
+            post={post}
+          />
+        </div>
+
+        {!user && (
+          <div className="mx-auto w-full max-w-[64rem]">
+            <div className="shadow-1 overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-subtle p-4 tablet:p-6">
+              <BuildYourFeedWidget />
+            </div>
+          </div>
+        )}
+
+        <PostDiscoveryFeed post={post} />
+      </div>
+      <BackToTop />
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
new file mode 100644
index 00000000000..d62711df4f4
--- /dev/null
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -0,0 +1,181 @@
+import dynamic from 'next/dynamic';
+import type { LegacyRef, ReactElement } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import type { Post } from '../../../graphql/posts';
+import { useShareComment } from '../../../hooks/useShareComment';
+import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
+import { Origin } from '../../../lib/log';
+import { PostComments } from '../PostComments';
+import type { NewCommentRef } from '../NewComment';
+import { NewComment } from '../NewComment';
+import { useSettingsContext } from '../../../contexts/SettingsContext';
+import {
+  Button,
+  ButtonIconPosition,
+  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';
+import { ProfileImageSize } from '../../ProfilePicture';
+import ShareBar from '../../ShareBar';
+
+const CommentInputOrModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "commentInputOrModal" */ '../../comments/CommentInputOrModal'
+    ),
+);
+
+export interface PostDiscussionPanelProps {
+  post: Post;
+  origin?: Origin;
+  className?: string;
+  /**
+   * Lets a parent (e.g. a floating "comment" action) focus the composer.
+   */
+  onRegisterFocusComment?: (fn: () => void) => void;
+  /**
+   * The element the comment edit/reply modals portal into. Defaults to the
+   * panel root so modals stay scoped to this surface.
+   */
+  modalParentSelector?: () => HTMLElement;
+}
+
+const noopFocus = (): void => {};
+
+/**
+ * The discussion surface (counts, sort, composer, comments, share) shared by
+ * the reader's EngagementRail and the post discovery focus card. Extracted so
+ * both surfaces stay in sync instead of duplicating the comment stack.
+ */
+export const PostDiscussionPanel = ({
+  post,
+  origin = Origin.ArticlePage,
+  className,
+  onRegisterFocusComment,
+  modalParentSelector,
+}: PostDiscussionPanelProps): ReactElement => {
+  const { user } = useAuthContext();
+  const { sortCommentsBy: sortBy, updateSortCommentsBy: setSortBy } =
+    useSettingsContext();
+  const commentRef = useRef<NewCommentRef | null>(null);
+  const rootRef = useRef<HTMLElement | null>(null);
+  const [isComposerOpen, setIsComposerOpen] = useState(false);
+  const { onShowUpvoted } = useUpvoteQuery();
+  const { openShareComment } = useShareComment(origin);
+  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';
+
+  useEffect(() => {
+    if (!onRegisterFocusComment) {
+      return undefined;
+    }
+
+    const run = (): void => {
+      commentRef.current?.onShowInput(Origin.PostCommentButton);
+    };
+    onRegisterFocusComment(run);
+
+    return () => {
+      onRegisterFocusComment(noopFocus);
+    };
+  }, [onRegisterFocusComment, post.id]);
+
+  const resolveModalParent = (): HTMLElement => {
+    if (modalParentSelector) {
+      return modalParentSelector();
+    }
+
+    return rootRef.current ?? document.body;
+  };
+
+  return (
+    <section
+      ref={rootRef}
+      aria-label="Discussion"
+      className={classNames('flex min-w-0 flex-col gap-3', className)}
+    >
+      <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 text-text-tertiary typo-callout">
+        <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>
+          )}
+        </div>
+        <Button
+          type="button"
+          size={ButtonSize.XSmall}
+          variant={ButtonVariant.Tertiary}
+          iconPosition={ButtonIconPosition.Right}
+          icon={
+            <TimeSortIcon
+              secondary
+              className={isNewestFirst ? undefined : 'rotate-180'}
+            />
+          }
+          onClick={() =>
+            setSortBy(
+              isNewestFirst
+                ? SortCommentsBy.OldestFirst
+                : SortCommentsBy.NewestFirst,
+            )
+          }
+          aria-label={sortLabel}
+          className="!text-text-tertiary"
+        >
+          {isNewestFirst ? 'Newest first' : 'Oldest first'}
+        </Button>
+      </div>
+      <NewComment
+        post={post}
+        ref={commentRef as LegacyRef<NewCommentRef>}
+        shouldHandleCommentQuery
+        onComposerOpenChange={setIsComposerOpen}
+        size={ProfileImageSize.Medium}
+        CommentInputOrModal={CommentInputOrModal}
+      />
+      <PostComments
+        post={post}
+        sortBy={sortBy}
+        origin={origin}
+        isComposerOpen={isComposerOpen}
+        onShare={(comment) => openShareComment(comment, post)}
+        onClickUpvote={(id, count) => onShowUpvoted(id, count, 'comment')}
+        modalParentSelector={resolveModalParent}
+      />
+      <ShareBar post={post} />
+    </section>
+  );
+};
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
new file mode 100644
index 00000000000..76604bf2d9d
--- /dev/null
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -0,0 +1,162 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { Post } from '../../../graphql/posts';
+import { isVideoPost } from '../../../graphql/posts';
+import type { PostOrigin } from '../../../hooks/log/useLogContextData';
+import usePostContent from '../../../hooks/usePostContent';
+import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
+import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromptGate';
+import PostMetadata from '../../cards/common/PostMetadata';
+import YoutubeVideo from '../../video/YoutubeVideo';
+import { PostHero } from '../experience/PostHero';
+import { PostInsightPanel } from '../experience/PostInsightPanel';
+import { PostTopicChips } from '../PostTopicChips';
+import {
+  getPostTopicLabel,
+  getPostTopicTags,
+} from '../anonymousPostExperience';
+import { PostDiscussionPanel } from './PostDiscussionPanel';
+
+export type FocusCardLeftVariant = 'lean' | 'rich';
+
+interface PostFocusCardProps {
+  post: Post;
+  origin: PostOrigin;
+  leftVariant?: FocusCardLeftVariant;
+  /**
+   * Anchor id the "jump to related" teaser scrolls to (the discovery feed).
+   */
+  discoveryAnchorId?: string;
+}
+
+/**
+ * Pulls the first sentences out of the summary to fake "key takeaways" for the
+ * Rich mockup variant. Real key points would come from the backend.
+ */
+const getKeyPoints = (summary?: string): string[] => {
+  if (!summary) {
+    return [];
+  }
+
+  return summary
+    .split(/(?<=[.!?])\s+/)
+    .map((sentence) => sentence.trim())
+    .filter((sentence) => sentence.length > 24)
+    .slice(0, 3);
+};
+
+export const PostFocusCard = ({
+  post,
+  origin,
+  leftVariant = 'rich',
+  discoveryAnchorId,
+}: PostFocusCardProps): ReactElement => {
+  const isVideoType = isVideoPost(post);
+  const { title } = useSmartTitle(post);
+  const { onReadArticle } = usePostContent({ origin, post });
+  const { onReadClick: onReaderInstallGateClick } =
+    useReaderInstallPromptGate(post);
+  const handleImageClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onReaderInstallGateClick(event)) {
+      return;
+    }
+    onReadArticle();
+  };
+
+  const topics = getPostTopicTags(post);
+  const topicLabel = getPostTopicLabel(topics);
+  const keyPoints = leftVariant === 'rich' ? getKeyPoints(post.summary) : [];
+
+  return (
+    <article
+      className="relative flex w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2"
+      data-testid="post-focus-card"
+    >
+      <div className="bg-accent-cabbage-default/10 pointer-events-none absolute -left-20 -top-20 size-80 rounded-full blur-3xl" />
+      <div className="bg-accent-onion-default/10 pointer-events-none absolute -right-16 top-16 size-72 rounded-full blur-3xl" />
+
+      <div className="relative z-1">
+        <PostHero
+          isVideoType={isVideoType}
+          metadata={
+            <PostMetadata
+              className="!typo-callout"
+              createdAt={post.createdAt}
+              isVideoType={isVideoType}
+              readTime={post.readTime}
+            />
+          }
+          onImageClick={handleImageClick}
+          onReadArticle={onReadArticle}
+          post={post}
+          title={title}
+        />
+      </div>
+
+      <div className="relative z-1 grid gap-6 border-t border-border-subtlest-tertiary p-4 tablet:p-6 laptop:grid-cols-[minmax(0,1fr)_24rem] laptop:gap-8">
+        <div className="flex min-w-0 flex-col gap-5">
+          {isVideoType && post.videoId && (
+            <YoutubeVideo
+              className="shadow-1 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3"
+              placeholderProps={{ post, onWatchVideo: onReadArticle }}
+              videoId={post.videoId}
+            />
+          )}
+
+          <PostInsightPanel post={post} />
+
+          {leftVariant === 'rich' && keyPoints.length > 0 && (
+            <section className="flex flex-col gap-3 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-4">
+              <p className="font-bold text-text-primary typo-title3">
+                Key takeaways
+              </p>
+              <ul className="flex flex-col gap-2">
+                {keyPoints.map((point) => (
+                  <li
+                    key={point}
+                    className="flex gap-2 text-text-secondary typo-callout"
+                  >
+                    <span
+                      aria-hidden
+                      className="mt-2 size-1.5 shrink-0 rounded-full bg-accent-cabbage-default"
+                    />
+                    <span className="min-w-0">{point}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+
+          {leftVariant === 'rich' && (
+            <a
+              href={discoveryAnchorId ? `#${discoveryAnchorId}` : undefined}
+              className={classNames(
+                'flex flex-col gap-3 rounded-24 border border-dashed border-border-subtlest-tertiary bg-background-subtle p-4 transition-colors',
+                discoveryAnchorId && 'hover:border-accent-cabbage-default',
+              )}
+            >
+              <p className="text-accent-cabbage-default typo-caption1">
+                Keep exploring
+              </p>
+              <p className="font-bold text-text-primary typo-title3">
+                More developer stories on {topicLabel}
+              </p>
+              <PostTopicChips topics={topics} />
+            </a>
+          )}
+        </div>
+
+        <div className="flex min-w-0 flex-col gap-3 laptop:max-h-[44rem] laptop:overflow-y-auto laptop:pr-1">
+          <div className="flex flex-col gap-1">
+            <p className="text-text-tertiary typo-caption1">Community</p>
+            <h2 className="font-bold text-text-primary typo-title2">
+              What developers are saying
+            </h2>
+          </div>
+          <PostDiscussionPanel post={post} origin={origin} />
+        </div>
+      </div>
+    </article>
+  );
+};
diff --git a/packages/shared/src/components/post/reader/EngagementRail.tsx b/packages/shared/src/components/post/reader/EngagementRail.tsx
index 1ac4bda6a88..905c4f520e4 100644
--- a/packages/shared/src/components/post/reader/EngagementRail.tsx
+++ b/packages/shared/src/components/post/reader/EngagementRail.tsx
@@ -1,47 +1,28 @@
 import dynamic from 'next/dynamic';
-import type { LegacyRef, ReactElement } from 'react';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import type { ReactElement } from 'react';
+import React, { useCallback, useContext, useRef } from 'react';
 import classNames from 'classnames';
-import AuthContext, { useAuthContext } from '../../../contexts/AuthContext';
+import AuthContext from '../../../contexts/AuthContext';
 import type { Post } from '../../../graphql/posts';
 import { isVideoPost } from '../../../graphql/posts';
 import { SourceType } from '../../../graphql/sources';
 import type { SourceTooltip } from '../../../graphql/sources';
-import { useShareComment } from '../../../hooks/useShareComment';
-import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import { Origin } from '../../../lib/log';
 import EntityCardSkeleton from '../../cards/entity/EntityCardSkeleton';
 import FurtherReading from '../../widgets/FurtherReading';
 import { PostSidebarAdWidget } from '../PostSidebarAdWidget';
-import { PostComments } from '../PostComments';
-import type { NewCommentRef } from '../NewComment';
-import { NewComment } from '../NewComment';
 import { PostTagList } from '../tags/PostTagList';
 import PostMetadata from '../../cards/common/PostMetadata';
-import { useSettingsContext } from '../../../contexts/SettingsContext';
 import ShowMoreContent from '../../cards/common/ShowMoreContent';
-import {
-  Button,
-  ButtonIconPosition,
-  ButtonSize,
-  ButtonVariant,
-} from '../../buttons/Button';
-import { TimeSortIcon } from '../../icons/Sort/Time';
-import { AnalyticsIcon, ArrowIcon } from '../../icons';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { ArrowIcon } from '../../icons';
 import { PostMenuOptions } from '../PostMenuOptions';
-import { SortCommentsBy } from '../../../graphql/comments';
 import { Tooltip } from '../../tooltip/Tooltip';
-import { ClickableText } from '../../buttons/ClickableText';
-import Link from '../../utilities/Link';
-import { largeNumberFormat } from '../../../lib';
-import { canViewPostAnalytics } from '../../../lib/user';
-import { webappUrl } from '../../../lib/constants';
-import { ProfileImageSize } from '../../ProfilePicture';
 import { PostPosition } from '../../../hooks/usePostModalNavigation';
 import { SourceStrip } from './SourceStrip';
 import { ReaderRailActionBar } from './ReaderRailActionBar';
-import ShareBar from '../../ShareBar';
 import { ReaderCloseButton } from './ReaderHeaderActionButtons';
+import { PostDiscussionPanel } from '../discovery/PostDiscussionPanel';
 
 const SquadEntityCard = dynamic(
   () =>
@@ -53,13 +34,6 @@ const SquadEntityCard = dynamic(
   },
 );
 
-const CommentInputOrModal = dynamic(
-  () =>
-    import(
-      /* webpackChunkName: "commentInputOrModal" */ '../../comments/CommentInputOrModal'
-    ),
-);
-
 type EngagementRailProps = {
   post: Post;
   postPosition?: PostPosition;
@@ -80,8 +54,6 @@ type EngagementRailProps = {
   inlineHeaderMenu?: boolean;
 };
 
-const noopFocus = (): void => {};
-
 export function EngagementRail({
   post,
   postPosition,
@@ -93,33 +65,23 @@ export function EngagementRail({
   inlineHeaderMenu = false,
 }: EngagementRailProps): ReactElement {
   const { tokenRefreshed } = useContext(AuthContext);
-  const { user } = useAuthContext();
-  const { sortCommentsBy: sortBy, updateSortCommentsBy: setSortBy } =
-    useSettingsContext();
-  const commentRef = useRef<NewCommentRef | null>(null);
-  const [isComposerOpen, setIsComposerOpen] = useState(false);
-  const { onShowUpvoted } = useUpvoteQuery();
-  const { openShareComment } = useShareComment(Origin.ReaderModal);
   const isVideoType = isVideoPost(post);
-  const upvotes = post.numUpvotes || 0;
-  const comments = post.numComments || 0;
-  const canSeeAnalytics = canViewPostAnalytics({ user, post });
 
-  useEffect(() => {
-    const run = (): void => {
-      commentRef.current?.onShowInput(Origin.PostCommentButton);
-    };
-    onRegisterFocusComment(run);
-    return () => {
-      onRegisterFocusComment(noopFocus);
-    };
-  }, [onRegisterFocusComment, post.id]);
+  // The discussion composer lives inside PostDiscussionPanel; keep a local
+  // handle so the summary action bar's "comment" button can focus it too, while
+  // still forwarding registration up to the reader's floating action bar.
+  const focusCommentRef = useRef<() => void>(() => {});
+  const registerFocusComment = useCallback(
+    (fn: () => void) => {
+      focusCommentRef.current = fn;
+      onRegisterFocusComment(fn);
+    },
+    [onRegisterFocusComment],
+  );
 
   const { source } = post;
   const showNavigation = !!onPreviousPost || !!onNextPost;
 
-  const isNewestFirst = sortBy === SortCommentsBy.NewestFirst;
-  const sortLabel = isNewestFirst ? 'Sort: Newest first' : 'Sort: Oldest first';
   const railHeaderGroupClasses =
     'flex h-9 items-center gap-px rounded-12 border border-border-subtlest-tertiary bg-background-default/70 p-px shadow-3 backdrop-blur-md backdrop-saturate-150';
   const iconButtonClassName = '!h-8 !w-8 !min-w-8 !rounded-10 !p-0';
@@ -244,90 +206,20 @@ export function EngagementRail({
           />
           <ReaderRailActionBar
             post={post}
-            onCommentClick={() =>
-              commentRef.current?.onShowInput(Origin.PostCommentButton)
-            }
+            onCommentClick={() => focusCommentRef.current()}
             className="mt-1"
           />
         </section>
 
-        <section
-          aria-label="Discussion"
-          className="flex min-w-0 flex-col gap-3 border-t border-border-subtlest-tertiary pt-4"
-        >
-          <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 text-text-tertiary typo-callout">
-            <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>
-              )}
-            </div>
-            <Button
-              type="button"
-              size={ButtonSize.XSmall}
-              variant={ButtonVariant.Tertiary}
-              iconPosition={ButtonIconPosition.Right}
-              icon={
-                <TimeSortIcon
-                  secondary
-                  className={isNewestFirst ? undefined : 'rotate-180'}
-                />
-              }
-              onClick={() =>
-                setSortBy(
-                  isNewestFirst
-                    ? SortCommentsBy.OldestFirst
-                    : SortCommentsBy.NewestFirst,
-                )
-              }
-              aria-label={sortLabel}
-              className="!text-text-tertiary"
-            >
-              {isNewestFirst ? 'Newest first' : 'Oldest first'}
-            </Button>
-          </div>
-          <NewComment
-            post={post}
-            ref={commentRef as LegacyRef<NewCommentRef>}
-            shouldHandleCommentQuery
-            onComposerOpenChange={setIsComposerOpen}
-            size={ProfileImageSize.Medium}
-            CommentInputOrModal={CommentInputOrModal}
-          />
-          <PostComments
-            post={post}
-            sortBy={sortBy}
-            origin={Origin.ReaderModal}
-            isComposerOpen={isComposerOpen}
-            onShare={(comment) => openShareComment(comment, post)}
-            onClickUpvote={(id, count) => onShowUpvoted(id, count, 'comment')}
-            modalParentSelector={() =>
-              document.getElementById('reader-post-modal-root') ?? document.body
-            }
-          />
-          <ShareBar post={post} />
-        </section>
+        <PostDiscussionPanel
+          post={post}
+          origin={Origin.ReaderModal}
+          className="border-t border-border-subtlest-tertiary pt-4"
+          onRegisterFocusComment={registerFocusComment}
+          modalParentSelector={() =>
+            document.getElementById('reader-post-modal-root') ?? document.body
+          }
+        />
 
         <PostSidebarAdWidget
           postId={post.id}
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 9be458baacf..950159f70a2 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -40,6 +40,10 @@ export const featureAnonymousPostExperience = new Feature(
   'anonymous_post_experience',
   true,
 );
+export const featurePostDiscoveryExperience = new Feature(
+  'post_discovery_experience',
+  false,
+);
 
 // @ts-expect-error stale feature without default
 export const plusTakeoverContent = new Feature<{
diff --git a/packages/webapp/pages/posts/[id]/discovery.tsx b/packages/webapp/pages/posts/[id]/discovery.tsx
new file mode 100644
index 00000000000..e72c8137e65
--- /dev/null
+++ b/packages/webapp/pages/posts/[id]/discovery.tsx
@@ -0,0 +1,175 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import type {
+  GetStaticPathsResult,
+  GetStaticPropsContext,
+  GetStaticPropsResult,
+} from 'next';
+import type { ParsedUrlQuery } from 'querystring';
+import type { ClientError } from 'graphql-request';
+import type { NextSeoProps } from 'next-seo/lib/types';
+import Head from 'next/head';
+import classNames from 'classnames';
+import type { Post, PostData } from '@dailydotdev/shared/src/graphql/posts';
+import { POST_BY_ID_STATIC_FIELDS_QUERY } from '@dailydotdev/shared/src/graphql/posts';
+import { ApiError, gqlClient } from '@dailydotdev/shared/src/graphql/common';
+import { usePostById } from '@dailydotdev/shared/src/hooks';
+import { Origin } from '@dailydotdev/shared/src/lib/log';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { ActivePostContextProvider } from '@dailydotdev/shared/src/contexts/ActivePostContext';
+import { Loader } from '@dailydotdev/shared/src/components/Loader';
+import type { FocusCardLeftVariant } from '@dailydotdev/shared/src/components/post/discovery/PostFocusCard';
+import { PostDiscoveryLayout } from '@dailydotdev/shared/src/components/post/discovery/PostDiscoveryLayout';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { getLayout } from '../../../components/layouts/MainLayout';
+import FooterNavBarLayout from '../../../components/layouts/FooterNavBarLayout';
+import { getSeoDescription } from '../../../components/PostSEOSchema';
+import { getPageSeoTitles } from '../../../components/layouts/utils';
+import type { DynamicSeoProps } from '../../../components/common';
+import { seoTitle } from './index';
+
+export interface Props extends DynamicSeoProps {
+  id: string;
+  initialData?: PostData;
+  error?: ApiError;
+}
+
+interface VariantControlProps {
+  leftVariant: FocusCardLeftVariant;
+  onChange: (variant: FocusCardLeftVariant) => void;
+}
+
+const VariantControl = ({
+  leftVariant,
+  onChange,
+}: VariantControlProps): ReactElement => {
+  const options: { id: FocusCardLeftVariant; label: string }[] = [
+    { id: 'lean', label: 'Lean' },
+    { id: 'rich', label: 'Rich' },
+  ];
+
+  return (
+    <div className="mx-auto flex w-full max-w-[75rem] items-center gap-3 px-4 pt-4 tablet:px-6 laptop:px-8">
+      <span className="text-text-tertiary typo-footnote">Mockup · content</span>
+      <div className="flex items-center gap-1 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-1">
+        {options.map((option) => (
+          <Button
+            key={option.id}
+            type="button"
+            size={ButtonSize.XSmall}
+            variant={
+              leftVariant === option.id
+                ? ButtonVariant.Primary
+                : ButtonVariant.Tertiary
+            }
+            onClick={() => onChange(option.id)}
+          >
+            {option.label}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const PostDiscoveryPage = ({ id, initialData }: Props): ReactElement => {
+  const [leftVariant, setLeftVariant] = useState<FocusCardLeftVariant>('rich');
+  const { post, isError, isLoading } = usePostById({
+    id,
+    options: { initialData, retry: false },
+  });
+
+  if (isLoading) {
+    return (
+      <div
+        className={classNames(
+          'flex min-h-page w-full items-center justify-center',
+        )}
+      >
+        <Loader />
+      </div>
+    );
+  }
+
+  if (!post || isError) {
+    return (
+      <div className="flex min-h-page w-full items-center justify-center text-text-tertiary typo-title3">
+        Post not found
+      </div>
+    );
+  }
+
+  return (
+    <ActivePostContextProvider post={post}>
+      <FooterNavBarLayout post={post}>
+        <Head>
+          <link as="image" href={post?.image} rel="preload" />
+        </Head>
+        <VariantControl leftVariant={leftVariant} onChange={setLeftVariant} />
+        <PostDiscoveryLayout
+          leftVariant={leftVariant}
+          origin={Origin.ArticlePage}
+          post={post}
+        />
+      </FooterNavBarLayout>
+    </ActivePostContextProvider>
+  );
+};
+
+PostDiscoveryPage.getLayout = getLayout;
+PostDiscoveryPage.layoutProps = {
+  screenCentered: false,
+};
+
+export default PostDiscoveryPage;
+
+export interface PostParams extends ParsedUrlQuery {
+  id: string;
+}
+
+export async function getStaticPaths(): Promise<GetStaticPathsResult> {
+  return { paths: [], fallback: 'blocking' };
+}
+
+export async function getStaticProps({
+  params,
+}: GetStaticPropsContext<PostParams>): Promise<GetStaticPropsResult<Props>> {
+  if (!params?.id) {
+    return { notFound: true, revalidate: 60 };
+  }
+
+  const { id } = params;
+  try {
+    const initialData = await gqlClient.request<PostData>(
+      POST_BY_ID_STATIC_FIELDS_QUERY,
+      { id },
+    );
+    const post = initialData.post as Post;
+    const pageSeoTitles = getPageSeoTitles(seoTitle(post) ?? '');
+    const seo: NextSeoProps = {
+      canonical: post?.slug ? `${webappUrl}posts/${post.slug}` : undefined,
+      title: pageSeoTitles.title,
+      description: getSeoDescription(post),
+      // This is an internal mockup surface; keep it out of the index.
+      noindex: true,
+      nofollow: true,
+    };
+
+    return {
+      props: { id: initialData.post.id, initialData, seo },
+      revalidate: 60,
+    };
+  } catch (err) {
+    const clientError = err as ClientError;
+    const errorCode = clientError?.response?.errors?.[0]?.extensions?.code;
+    if (errorCode === ApiError.NotFound) {
+      return { notFound: true, revalidate: 60 };
+    }
+
+    return { props: { id, error: errorCode as ApiError }, revalidate: 60 };
+  }
+}

From 7508344f523c95eedc9baba007c858b0e20d0b5e Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 11:25:40 +0300
Subject: [PATCH 002/111] feat: render discovery experience on the real post
 page behind flag

Gate /posts/[id] on post_discovery_experience for article/video posts so the
discovery layout takes over the actual post page (not only the standalone
mockup route). Add a ?discovery=1 query override for easy preview without
flipping the flag, and suppress the duplicate auth banner in that mode.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/webapp/pages/posts/[id]/index.tsx | 58 +++++++++++++++-------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/packages/webapp/pages/posts/[id]/index.tsx b/packages/webapp/pages/posts/[id]/index.tsx
index 682d087d756..7afd3779d05 100644
--- a/packages/webapp/pages/posts/[id]/index.tsx
+++ b/packages/webapp/pages/posts/[id]/index.tsx
@@ -26,12 +26,15 @@ import type { PostContentProps } from '@dailydotdev/shared/src/components/post/c
 import { useScrollTopOffset } from '@dailydotdev/shared/src/hooks/useScrollTopOffset';
 import { LogEvent, Origin, TargetType } from '@dailydotdev/shared/src/lib/log';
 import {
+  useConditionalFeature,
   useEventListener,
   useJoinReferral,
   usePostById,
   useViewSize,
   ViewSize,
 } from '@dailydotdev/shared/src/hooks';
+import { featurePostDiscoveryExperience } from '@dailydotdev/shared/src/lib/featureManagement';
+import { PostDiscoveryLayout } from '@dailydotdev/shared/src/components/post/discovery/PostDiscoveryLayout';
 import { usePrivateSourceJoin } from '@dailydotdev/shared/src/hooks/source/usePrivateSourceJoin';
 import { ApiError, gqlClient } from '@dailydotdev/shared/src/graphql/common';
 import PostLoadingSkeleton from '@dailydotdev/shared/src/components/post/PostLoadingSkeleton';
@@ -203,6 +206,18 @@ export const PostPage = ({
     },
   });
   const featureTheme = useFeatureTheme();
+  const isDiscoveryEligible = [
+    PostType.Article,
+    PostType.VideoYouTube,
+  ].includes(post?.type);
+  const { value: isDiscoveryFlagOn } = useConditionalFeature({
+    feature: featurePostDiscoveryExperience,
+    shouldEvaluate: isDiscoveryEligible,
+  });
+  const forceDiscovery =
+    router.query.discovery === '1' || router.query.discovery === 'true';
+  const showDiscovery =
+    isDiscoveryEligible && (isDiscoveryFlagOn || forceDiscovery);
   const containerClass = classNames(
     'mb-16 min-h-page max-w-[69.25rem] tablet:mb-8 laptop:mb-0 laptop:pb-6 laptopL:pb-0',
     [
@@ -278,25 +293,30 @@ export const PostPage = ({
             <link rel="preload" as="image" href={post?.image} />
           </Head>
           <PostSEOSchema post={post} topComments={topComments} />
-          <Content
-            position={position}
-            isPostPage
-            post={post}
-            isFallback={isFallback}
-            backToSquad={!!router?.query?.squad}
-            shouldOnboardAuthor={!!router.query?.author}
-            origin={Origin.ArticlePage}
-            isBannerVisible={shouldShowAuthBanner && !isLaptop}
-            className={{
-              container: containerClass,
-              fixedNavigation: { container: 'flex laptop:hidden' },
-              navigation: {
-                container: 'flex tablet:hidden',
-                actions: 'flex-1 justify-between',
-              },
-            }}
-          />
-          {shouldShowAuthBanner &&
+          {showDiscovery ? (
+            <PostDiscoveryLayout post={post} origin={Origin.ArticlePage} />
+          ) : (
+            <Content
+              position={position}
+              isPostPage
+              post={post}
+              isFallback={isFallback}
+              backToSquad={!!router?.query?.squad}
+              shouldOnboardAuthor={!!router.query?.author}
+              origin={Origin.ArticlePage}
+              isBannerVisible={shouldShowAuthBanner && !isLaptop}
+              className={{
+                container: containerClass,
+                fixedNavigation: { container: 'flex laptop:hidden' },
+                navigation: {
+                  container: 'flex tablet:hidden',
+                  actions: 'flex-1 justify-between',
+                },
+              }}
+            />
+          )}
+          {!showDiscovery &&
+            shouldShowAuthBanner &&
             isLaptop &&
             (isAnonPostExperience ? (
               <PostTopicAuthBanner />

From 5d62e66a243c79cc61b57acb31f73137db96014f Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 11:55:12 +0300
Subject: [PATCH 003/111] fix: show post discovery preview by default

Default the post discovery feature on for the mockup branch so PR preview URLs
show the planned discovery design without requiring a query param. Keep
?discovery=0 as a reviewer escape hatch for comparing against the classic post
page.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/lib/featureManagement.ts | 2 +-
 packages/webapp/pages/posts/[id]/index.tsx   | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 950159f70a2..f151ed8135a 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -42,7 +42,7 @@ export const featureAnonymousPostExperience = new Feature(
 );
 export const featurePostDiscoveryExperience = new Feature(
   'post_discovery_experience',
-  false,
+  true,
 );
 
 // @ts-expect-error stale feature without default
diff --git a/packages/webapp/pages/posts/[id]/index.tsx b/packages/webapp/pages/posts/[id]/index.tsx
index 7afd3779d05..5caeba24ade 100644
--- a/packages/webapp/pages/posts/[id]/index.tsx
+++ b/packages/webapp/pages/posts/[id]/index.tsx
@@ -216,8 +216,12 @@ export const PostPage = ({
   });
   const forceDiscovery =
     router.query.discovery === '1' || router.query.discovery === 'true';
+  const forceClassic =
+    router.query.discovery === '0' || router.query.discovery === 'false';
   const showDiscovery =
-    isDiscoveryEligible && (isDiscoveryFlagOn || forceDiscovery);
+    isDiscoveryEligible &&
+    !forceClassic &&
+    (isDiscoveryFlagOn || forceDiscovery);
   const containerClass = classNames(
     'mb-16 min-h-page max-w-[69.25rem] tablet:mb-8 laptop:mb-0 laptop:pb-6 laptopL:pb-0',
     [

From a26f1f7bc0c6da7aa5d0cd102ec6b717cc605453 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:03:25 +0300
Subject: [PATCH 004/111] fix: align discovery post layout with platform
 reading surface

Simplify the discovery post surface so it feels like daily.dev instead of a
new boxed composition. Render the post details directly in the left column,
keep comments in a compact reader-style right rail, widen the focus area, and
show related content as feed-grid cards instead of a horizontal/list-like rail.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscoveryFeed.tsx      |  19 +-
 .../post/discovery/PostDiscoveryLayout.tsx    |   8 +-
 .../post/discovery/PostFocusCard.tsx          | 210 ++++++++++--------
 3 files changed, 135 insertions(+), 102 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
index c565519eb39..205ce661c1c 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -99,8 +99,8 @@ export const PostDiscoveryFeed = ({
               variables={{ tags }}
               disableAds
               allowFetchMore={false}
-              pageSize={12}
-              isHorizontal
+              pageSize={9}
+              disableListFrame
             />
           </FeedWithColumns>
         </section>
@@ -112,12 +112,15 @@ export const PostDiscoveryFeed = ({
           title="Discover more"
           description="A fresh stream of developer stories, discussions, and tools."
         />
-        <Feed
-          feedName={SharedFeedPage.Popular}
-          feedQueryKey={['post-discovery-more', post.id]}
-          query={mainQuery}
-          variables={{}}
-        />
+        <FeedWithColumns columns={3}>
+          <Feed
+            feedName={SharedFeedPage.Popular}
+            feedQueryKey={['post-discovery-more', post.id]}
+            query={mainQuery}
+            variables={{}}
+            disableListFrame
+          />
+        </FeedWithColumns>
       </section>
     </div>
   );
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index 43d4f8f9cc3..ea0fda212be 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -10,10 +10,7 @@ import { ArrowIcon } from '../../icons';
 import { BuildYourFeedWidget } from '../BuildYourFeedWidget';
 import type { FocusCardLeftVariant } from './PostFocusCard';
 import { PostFocusCard } from './PostFocusCard';
-import {
-  POST_DISCOVERY_FEED_ANCHOR,
-  PostDiscoveryFeed,
-} from './PostDiscoveryFeed';
+import { PostDiscoveryFeed } from './PostDiscoveryFeed';
 
 interface PostDiscoveryLayoutProps {
   post: Post;
@@ -77,9 +74,8 @@ export const PostDiscoveryLayout = ({
   return (
     <div className="flex w-full flex-col bg-background-default">
       <div className="mx-auto flex w-full max-w-[75rem] flex-col gap-10 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
-        <div className="mx-auto w-full max-w-[64rem]">
+        <div className="mx-auto w-full max-w-[75rem]">
           <PostFocusCard
-            discoveryAnchorId={POST_DISCOVERY_FEED_ANCHOR}
             leftVariant={leftVariant}
             origin={origin}
             post={post}
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 76604bf2d9d..a2b535e9c2d 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -1,21 +1,24 @@
 import type { ReactElement } from 'react';
 import React from 'react';
-import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
-import { isVideoPost } from '../../../graphql/posts';
+import {
+  getReadArticleHref,
+  getReadPostButtonText,
+  isVideoPost,
+} from '../../../graphql/posts';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import usePostContent from '../../../hooks/usePostContent';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
 import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromptGate';
 import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
-import { PostHero } from '../experience/PostHero';
-import { PostInsightPanel } from '../experience/PostInsightPanel';
-import { PostTopicChips } from '../PostTopicChips';
-import {
-  getPostTopicLabel,
-  getPostTopicTags,
-} from '../anonymousPostExperience';
+import { PostTagList } from '../tags/PostTagList';
+import PostSourceInfo from '../PostSourceInfo';
+import { PostHeaderActions } from '../PostHeaderActions';
+import { PostClickbaitShield } from '../common/PostClickbaitShield';
+import { LazyImage } from '../../LazyImage';
+import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
 
 export type FocusCardLeftVariant = 'lean' | 'rich';
@@ -24,10 +27,6 @@ interface PostFocusCardProps {
   post: Post;
   origin: PostOrigin;
   leftVariant?: FocusCardLeftVariant;
-  /**
-   * Anchor id the "jump to related" teaser scrolls to (the discovery feed).
-   */
-  discoveryAnchorId?: string;
 }
 
 /**
@@ -50,7 +49,6 @@ export const PostFocusCard = ({
   post,
   origin,
   leftVariant = 'rich',
-  discoveryAnchorId,
 }: PostFocusCardProps): ReactElement => {
   const isVideoType = isVideoPost(post);
   const { title } = useSmartTitle(post);
@@ -64,99 +62,135 @@ export const PostFocusCard = ({
     onReadArticle();
   };
 
-  const topics = getPostTopicTags(post);
-  const topicLabel = getPostTopicLabel(topics);
   const keyPoints = leftVariant === 'rich' ? getKeyPoints(post.summary) : [];
+  const readHref = getReadArticleHref(post);
+  const readText = getReadPostButtonText(post);
 
   return (
     <article
-      className="relative flex w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2"
+      className="grid w-full overflow-hidden rounded-24 bg-background-default laptop:grid-cols-[minmax(0,1fr)_24rem]"
       data-testid="post-focus-card"
     >
-      <div className="bg-accent-cabbage-default/10 pointer-events-none absolute -left-20 -top-20 size-80 rounded-full blur-3xl" />
-      <div className="bg-accent-onion-default/10 pointer-events-none absolute -right-16 top-16 size-72 rounded-full blur-3xl" />
-
-      <div className="relative z-1">
-        <PostHero
-          isVideoType={isVideoType}
-          metadata={
+      <div className="flex min-w-0 flex-col gap-6 p-4 tablet:p-6 laptop:p-8">
+        <div className="flex min-w-0 flex-col gap-4">
+          <PostSourceInfo
+            className="min-w-0"
+            hideSubscribeAction
+            onReadArticle={onReadArticle}
+            post={post}
+            showActions={false}
+          />
+          <div className="flex min-w-0 flex-col gap-3">
+            <h1
+              className="break-words font-bold text-text-primary typo-large-title laptop:typo-mega3"
+              data-testid="post-modal-title"
+            >
+              {title}
+            </h1>
             <PostMetadata
-              className="!typo-callout"
+              className="!mt-0 !typo-callout"
               createdAt={post.createdAt}
               isVideoType={isVideoType}
               readTime={post.readTime}
             />
-          }
-          onImageClick={handleImageClick}
-          onReadArticle={onReadArticle}
-          post={post}
-          title={title}
-        />
-      </div>
+            {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
+          </div>
 
-      <div className="relative z-1 grid gap-6 border-t border-border-subtlest-tertiary p-4 tablet:p-6 laptop:grid-cols-[minmax(0,1fr)_24rem] laptop:gap-8">
-        <div className="flex min-w-0 flex-col gap-5">
-          {isVideoType && post.videoId && (
-            <YoutubeVideo
-              className="shadow-1 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3"
-              placeholderProps={{ post, onWatchVideo: onReadArticle }}
-              videoId={post.videoId}
+          <div className="flex flex-col gap-3 tablet:flex-row tablet:items-center">
+            {!!readHref && (
+              <Button
+                className="w-full tablet:w-auto"
+                href={readHref}
+                onClick={() => onReadArticle()}
+                size={ButtonSize.Large}
+                tag="a"
+                target="_blank"
+                variant={ButtonVariant.Primary}
+              >
+                {readText}
+              </Button>
+            )}
+            <PostHeaderActions
+              buttonSize={ButtonSize.Large}
+              className="justify-center tablet:justify-start"
+              contextMenuId="post-discovery-actions"
+              hideSubscribeAction
+              inlineActions
+              onReadArticle={onReadArticle}
+              post={post}
             />
-          )}
-
-          <PostInsightPanel post={post} />
+          </div>
+        </div>
 
-          {leftVariant === 'rich' && keyPoints.length > 0 && (
-            <section className="flex flex-col gap-3 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-4">
-              <p className="font-bold text-text-primary typo-title3">
-                Key takeaways
-              </p>
-              <ul className="flex flex-col gap-2">
-                {keyPoints.map((point) => (
-                  <li
-                    key={point}
-                    className="flex gap-2 text-text-secondary typo-callout"
-                  >
-                    <span
-                      aria-hidden
-                      className="mt-2 size-1.5 shrink-0 rounded-full bg-accent-cabbage-default"
-                    />
-                    <span className="min-w-0">{point}</span>
-                  </li>
-                ))}
-              </ul>
-            </section>
-          )}
+        {isVideoType && post.videoId ? (
+          <YoutubeVideo
+            className="rounded-16 bg-background-subtle"
+            placeholderProps={{ post, onWatchVideo: onReadArticle }}
+            videoId={post.videoId}
+          />
+        ) : (
+          <a
+            className="block overflow-hidden rounded-16 bg-background-subtle"
+            href={readHref}
+            onClick={handleImageClick}
+            rel="noopener"
+            target="_blank"
+            title="Go to post"
+          >
+            <LazyImage
+              eager
+              fallbackSrc={cloudinaryPostImageCoverPlaceholder}
+              fetchPriority="high"
+              imgAlt="Post cover image"
+              imgSrc={post.image}
+              ratio="56%"
+            />
+          </a>
+        )}
 
-          {leftVariant === 'rich' && (
-            <a
-              href={discoveryAnchorId ? `#${discoveryAnchorId}` : undefined}
-              className={classNames(
-                'flex flex-col gap-3 rounded-24 border border-dashed border-border-subtlest-tertiary bg-background-subtle p-4 transition-colors',
-                discoveryAnchorId && 'hover:border-accent-cabbage-default',
-              )}
+        <section className="flex min-w-0 flex-col gap-3">
+          <p className="text-text-tertiary typo-caption1">TL;DR</p>
+          {post.summary ? (
+            <p
+              className="select-text break-words text-text-secondary typo-markdown"
+              data-testid="tldr-container"
             >
-              <p className="text-accent-cabbage-default typo-caption1">
-                Keep exploring
-              </p>
-              <p className="font-bold text-text-primary typo-title3">
-                More developer stories on {topicLabel}
-              </p>
-              <PostTopicChips topics={topics} />
-            </a>
+              {post.summary}
+            </p>
+          ) : (
+            <p className="text-text-secondary typo-callout">
+              Read the original post, then use the developer discussion and feed
+              below to keep exploring related stories.
+            </p>
           )}
-        </div>
+        </section>
 
-        <div className="flex min-w-0 flex-col gap-3 laptop:max-h-[44rem] laptop:overflow-y-auto laptop:pr-1">
-          <div className="flex flex-col gap-1">
-            <p className="text-text-tertiary typo-caption1">Community</p>
-            <h2 className="font-bold text-text-primary typo-title2">
-              What developers are saying
-            </h2>
-          </div>
-          <PostDiscussionPanel post={post} origin={origin} />
-        </div>
+        {leftVariant === 'rich' && keyPoints.length > 0 && (
+          <section className="flex min-w-0 flex-col gap-3">
+            <p className="text-text-tertiary typo-caption1">Key takeaways</p>
+            <ul className="flex flex-col gap-2">
+              {keyPoints.map((point) => (
+                <li
+                  key={point}
+                  className="flex gap-2 text-text-secondary typo-callout"
+                >
+                  <span
+                    aria-hidden
+                    className="mt-2 size-1.5 shrink-0 rounded-full bg-accent-cabbage-default"
+                  />
+                  <span className="min-w-0">{point}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+
+        <PostTagList post={post} />
       </div>
+
+      <aside className="flex min-h-0 min-w-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle p-4 tablet:p-6 laptop:sticky laptop:top-16 laptop:max-h-[calc(100vh-8rem)] laptop:border-l laptop:border-t-0 laptop:p-4">
+        <PostDiscussionPanel post={post} origin={origin} />
+      </aside>
     </article>
   );
 };

From bbc79880f6eb2add14f13090454359bf610a1660 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:05:47 +0300
Subject: [PATCH 005/111] fix: remove duplicate discovery read action

Keep the discovery post action row focused on the primary read/watch CTA plus the
context menu, avoiding a second icon-only read action from PostHeaderActions.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/discovery/PostFocusCard.tsx    | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index a2b535e9c2d..10b314a863b 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -14,7 +14,7 @@ import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
 import { PostTagList } from '../tags/PostTagList';
 import PostSourceInfo from '../PostSourceInfo';
-import { PostHeaderActions } from '../PostHeaderActions';
+import { PostMenuOptions } from '../PostMenuOptions';
 import { PostClickbaitShield } from '../common/PostClickbaitShield';
 import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
@@ -110,13 +110,9 @@ export const PostFocusCard = ({
                 {readText}
               </Button>
             )}
-            <PostHeaderActions
+            <PostMenuOptions
               buttonSize={ButtonSize.Large}
-              className="justify-center tablet:justify-start"
-              contextMenuId="post-discovery-actions"
-              hideSubscribeAction
-              inlineActions
-              onReadArticle={onReadArticle}
+              origin={origin}
               post={post}
             />
           </div>

From bdce1caaf40a1d5f1448a1dcdfbfbc6928aa44cf Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:14:58 +0300
Subject: [PATCH 006/111] test: keep classic post page tests on classic layout

Pin the post discovery feature mock off in the existing PostPage suite so those
assertions continue to cover the classic post-page behavior while the mockup
branch defaults the new discovery experience on for preview.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/webapp/__tests__/PostPage.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/webapp/__tests__/PostPage.tsx b/packages/webapp/__tests__/PostPage.tsx
index 8caab583e4e..09d9bb38daf 100644
--- a/packages/webapp/__tests__/PostPage.tsx
+++ b/packages/webapp/__tests__/PostPage.tsx
@@ -90,6 +90,9 @@ jest.mock('@dailydotdev/shared/src/hooks/useConditionalFeature', () => ({
     if (args?.feature?.id === 'reader_modal') {
       return { value: false, isLoading: false };
     }
+    if (args?.feature?.id === 'post_discovery_experience') {
+      return { value: false, isLoading: false };
+    }
     return { value: args?.feature?.defaultValue, isLoading: false };
   },
 }));

From 5611539783127d2b4b17ff97e760f35dafbc4b10 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:25:06 +0300
Subject: [PATCH 007/111] fix: force discovery feed to render as card grid

The discovery feed was inheriting the post page/list-mode feed layout, so users
with list mode enabled still saw list cards. Scope the nested discovery feeds to
a grid-oriented feed context and disable insane mode only for this surface so it
uses the familiar card grid regardless of global feed layout preference.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscoveryFeed.tsx      | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
index 205ce661c1c..8200f2ecbbc 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -3,7 +3,9 @@ import React, { useContext, useMemo } from 'react';
 import type { Post } from '../../../graphql/posts';
 import Feed from '../../Feed';
 import FeedContext from '../../../contexts/FeedContext';
+import SettingsContext from '../../../contexts/SettingsContext';
 import { useAuthContext } from '../../../contexts/AuthContext';
+import { ActiveFeedNameContext } from '../../../contexts';
 import {
   ANONYMOUS_FEED_QUERY,
   FEED_BY_TAGS_QUERY,
@@ -52,15 +54,28 @@ const FeedWithColumns = ({
   children: ReactElement;
 }): ReactElement => {
   const currentSettings = useContext(FeedContext);
-  const value = useMemo(
+  const settings = useContext(SettingsContext);
+  const feedContextValue = useMemo(
     () => ({
       ...currentSettings,
       numCards: { eco: columns, roomy: columns, cozy: columns },
     }),
     [currentSettings, columns],
   );
+  const settingsContextValue = useMemo(
+    () => ({ ...settings, insaneMode: false }),
+    [settings],
+  );
 
-  return <FeedContext.Provider value={value}>{children}</FeedContext.Provider>;
+  return (
+    <ActiveFeedNameContext.Provider value={{ feedName: OtherFeedPage.Tag }}>
+      <SettingsContext.Provider value={settingsContextValue}>
+        <FeedContext.Provider value={feedContextValue}>
+          {children}
+        </FeedContext.Provider>
+      </SettingsContext.Provider>
+    </ActiveFeedNameContext.Provider>
+  );
 };
 
 /**

From cd763748946fc7b5c5aca20300af8b493e9eac40 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:27:57 +0300
Subject: [PATCH 008/111] fix: reuse production post actions in discovery
 layout

Keep the discovery left column closer to the production post page by using the
existing stats/action bar components instead of a custom detail section. Wire the
comment action to the right-side discussion rail composer and remove the custom
key-takeaways block from this surface.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostFocusCard.tsx          | 69 ++++++++-----------
 1 file changed, 28 insertions(+), 41 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 10b314a863b..37c87d094ff 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useRef } from 'react';
 import type { Post } from '../../../graphql/posts';
 import {
   getReadArticleHref,
@@ -10,6 +10,7 @@ import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import usePostContent from '../../../hooks/usePostContent';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
 import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromptGate';
+import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
 import { PostTagList } from '../tags/PostTagList';
@@ -19,6 +20,8 @@ import { PostClickbaitShield } from '../common/PostClickbaitShield';
 import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { PostActions } from '../PostActions';
+import { PostUpvotesCommentsCount } from '../PostUpvotesCommentsCount';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
 
 export type FocusCardLeftVariant = 'lean' | 'rich';
@@ -29,32 +32,17 @@ interface PostFocusCardProps {
   leftVariant?: FocusCardLeftVariant;
 }
 
-/**
- * Pulls the first sentences out of the summary to fake "key takeaways" for the
- * Rich mockup variant. Real key points would come from the backend.
- */
-const getKeyPoints = (summary?: string): string[] => {
-  if (!summary) {
-    return [];
-  }
-
-  return summary
-    .split(/(?<=[.!?])\s+/)
-    .map((sentence) => sentence.trim())
-    .filter((sentence) => sentence.length > 24)
-    .slice(0, 3);
-};
-
 export const PostFocusCard = ({
   post,
   origin,
-  leftVariant = 'rich',
 }: PostFocusCardProps): ReactElement => {
   const isVideoType = isVideoPost(post);
   const { title } = useSmartTitle(post);
-  const { onReadArticle } = usePostContent({ origin, post });
+  const { onCopyPostLink, onReadArticle } = usePostContent({ origin, post });
   const { onReadClick: onReaderInstallGateClick } =
     useReaderInstallPromptGate(post);
+  const { onShowUpvoted } = useUpvoteQuery();
+  const focusCommentRef = useRef<() => void>(() => {});
   const handleImageClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
     if (onReaderInstallGateClick(event)) {
       return;
@@ -62,7 +50,6 @@ export const PostFocusCard = ({
     onReadArticle();
   };
 
-  const keyPoints = leftVariant === 'rich' ? getKeyPoints(post.summary) : [];
   const readHref = getReadArticleHref(post);
   const readText = getReadPostButtonText(post);
 
@@ -161,31 +148,31 @@ export const PostFocusCard = ({
           )}
         </section>
 
-        {leftVariant === 'rich' && keyPoints.length > 0 && (
-          <section className="flex min-w-0 flex-col gap-3">
-            <p className="text-text-tertiary typo-caption1">Key takeaways</p>
-            <ul className="flex flex-col gap-2">
-              {keyPoints.map((point) => (
-                <li
-                  key={point}
-                  className="flex gap-2 text-text-secondary typo-callout"
-                >
-                  <span
-                    aria-hidden
-                    className="mt-2 size-1.5 shrink-0 rounded-full bg-accent-cabbage-default"
-                  />
-                  <span className="min-w-0">{point}</span>
-                </li>
-              ))}
-            </ul>
-          </section>
-        )}
-
         <PostTagList post={post} />
+
+        <section className="flex min-w-0 flex-col gap-3 border-t border-border-subtlest-tertiary pt-4">
+          <PostUpvotesCommentsCount
+            post={post}
+            onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
+          />
+          <PostActions
+            post={post}
+            postQueryKey={['post', post.id]}
+            onComment={() => focusCommentRef.current()}
+            onCopyLinkClick={onCopyPostLink}
+            origin={origin}
+          />
+        </section>
       </div>
 
       <aside className="flex min-h-0 min-w-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle p-4 tablet:p-6 laptop:sticky laptop:top-16 laptop:max-h-[calc(100vh-8rem)] laptop:border-l laptop:border-t-0 laptop:p-4">
-        <PostDiscussionPanel post={post} origin={origin} />
+        <PostDiscussionPanel
+          onRegisterFocusComment={(fn) => {
+            focusCommentRef.current = fn;
+          }}
+          post={post}
+          origin={origin}
+        />
       </aside>
     </article>
   );

From 6b6ac3165107ea454d48c604f72a4e60bce25b04 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:34:35 +0300
Subject: [PATCH 009/111] fix: let discovery feed use full page width

Keep the post details constrained, but render the discovery feed outside that
post-detail wrapper so it can expand like the main feed. Let it use the normal
responsive feed column counts while still forcing this nested surface onto the
grid-card layout path.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscoveryFeed.tsx      | 29 +++++--------------
 .../post/discovery/PostDiscoveryLayout.tsx    |  2 ++
 2 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
index 8200f2ecbbc..68142d8a7b2 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -2,7 +2,6 @@ import type { ReactElement } from 'react';
 import React, { useContext, useMemo } from 'react';
 import type { Post } from '../../../graphql/posts';
 import Feed from '../../Feed';
-import FeedContext from '../../../contexts/FeedContext';
 import SettingsContext from '../../../contexts/SettingsContext';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import { ActiveFeedNameContext } from '../../../contexts';
@@ -43,25 +42,15 @@ const SectionHeader = ({
 );
 
 /**
- * Wraps a Feed in a FeedContext override so the discovery rail/grid uses a
- * deliberate column count instead of inheriting the user's feed density.
+ * Keeps the nested discovery feeds on the grid-card path even though the page
+ * route itself is a post page, which normally forces list layout.
  */
-const FeedWithColumns = ({
-  columns,
+const DiscoveryFeedGridScope = ({
   children,
 }: {
-  columns: number;
   children: ReactElement;
 }): ReactElement => {
-  const currentSettings = useContext(FeedContext);
   const settings = useContext(SettingsContext);
-  const feedContextValue = useMemo(
-    () => ({
-      ...currentSettings,
-      numCards: { eco: columns, roomy: columns, cozy: columns },
-    }),
-    [currentSettings, columns],
-  );
   const settingsContextValue = useMemo(
     () => ({ ...settings, insaneMode: false }),
     [settings],
@@ -70,9 +59,7 @@ const FeedWithColumns = ({
   return (
     <ActiveFeedNameContext.Provider value={{ feedName: OtherFeedPage.Tag }}>
       <SettingsContext.Provider value={settingsContextValue}>
-        <FeedContext.Provider value={feedContextValue}>
-          {children}
-        </FeedContext.Provider>
+        {children}
       </SettingsContext.Provider>
     </ActiveFeedNameContext.Provider>
   );
@@ -106,7 +93,7 @@ export const PostDiscoveryFeed = ({
             title={`More on ${topicLabel}`}
             description="Hand-picked stories close to what you just read."
           />
-          <FeedWithColumns columns={3}>
+          <DiscoveryFeedGridScope>
             <Feed
               feedName={OtherFeedPage.ExploreTag}
               feedQueryKey={['post-discovery-related', post.id]}
@@ -117,7 +104,7 @@ export const PostDiscoveryFeed = ({
               pageSize={9}
               disableListFrame
             />
-          </FeedWithColumns>
+          </DiscoveryFeedGridScope>
         </section>
       )}
 
@@ -127,7 +114,7 @@ export const PostDiscoveryFeed = ({
           title="Discover more"
           description="A fresh stream of developer stories, discussions, and tools."
         />
-        <FeedWithColumns columns={3}>
+        <DiscoveryFeedGridScope>
           <Feed
             feedName={SharedFeedPage.Popular}
             feedQueryKey={['post-discovery-more', post.id]}
@@ -135,7 +122,7 @@ export const PostDiscoveryFeed = ({
             variables={{}}
             disableListFrame
           />
-        </FeedWithColumns>
+        </DiscoveryFeedGridScope>
       </section>
     </div>
   );
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index ea0fda212be..2c458d839e8 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -89,7 +89,9 @@ export const PostDiscoveryLayout = ({
             </div>
           </div>
         )}
+      </div>
 
+      <div className="w-full px-4 pb-10 tablet:px-6 laptop:px-8">
         <PostDiscoveryFeed post={post} />
       </div>
       <BackToTop />

From 5e02970be7e704352ccb29e737cd54d2f9fd2448 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:37:00 +0300
Subject: [PATCH 010/111] fix: reuse production post details in discovery
 layout

Render the discovery left column with the same production post detail stack used
above comments today: PostHero, video embed, PostInsightPanel, code snippets,
and the standard stats/action bar. Keep only the comment thread separated into
the right rail.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostFocusCard.tsx          | 212 +++++++++---------
 1 file changed, 101 insertions(+), 111 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 37c87d094ff..6b51210be5d 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -1,11 +1,8 @@
-import type { ReactElement } from 'react';
+import dynamic from 'next/dynamic';
+import type { ComponentProps, ReactElement } from 'react';
 import React, { useRef } from 'react';
 import type { Post } from '../../../graphql/posts';
-import {
-  getReadArticleHref,
-  getReadPostButtonText,
-  isVideoPost,
-} from '../../../graphql/posts';
+import { isVideoPost } from '../../../graphql/posts';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import usePostContent from '../../../hooks/usePostContent';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
@@ -13,17 +10,22 @@ import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromp
 import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
-import { PostTagList } from '../tags/PostTagList';
-import PostSourceInfo from '../PostSourceInfo';
-import { PostMenuOptions } from '../PostMenuOptions';
-import { PostClickbaitShield } from '../common/PostClickbaitShield';
-import { LazyImage } from '../../LazyImage';
-import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
-import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { PostActions } from '../PostActions';
 import { PostUpvotesCommentsCount } from '../PostUpvotesCommentsCount';
+import { PostHero } from '../experience/PostHero';
+import { PostInsightPanel } from '../experience/PostInsightPanel';
+import { TruncateText } from '../../utilities';
+import { combinedClicks } from '../../../lib/click';
+import { useFeature } from '../../GrowthBookProvider';
+import { feature } from '../../../lib/featureManagement';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
 
+const PostCodeSnippets = dynamic(() =>
+  import(/* webpackChunkName: "postCodeSnippets" */ '../PostCodeSnippets').then(
+    (mod) => ({ default: mod.PostCodeSnippets }),
+  ),
+);
+
 export type FocusCardLeftVariant = 'lean' | 'rich';
 
 interface PostFocusCardProps {
@@ -32,9 +34,36 @@ interface PostFocusCardProps {
   leftVariant?: FocusCardLeftVariant;
 }
 
+const ArticleLink = ({
+  href,
+  onClick,
+  children,
+  ...props
+}: ComponentProps<'a'> & {
+  href?: string;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}) => {
+  const clickHandlers = onClick
+    ? combinedClicks<HTMLAnchorElement>(onClick)
+    : undefined;
+  return (
+    <a
+      href={href}
+      title="Go to post"
+      target="_blank"
+      rel="noopener"
+      {...clickHandlers}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+};
+
 export const PostFocusCard = ({
   post,
   origin,
+  leftVariant,
 }: PostFocusCardProps): ReactElement => {
   const isVideoType = isVideoPost(post);
   const { title } = useSmartTitle(post);
@@ -42,6 +71,7 @@ export const PostFocusCard = ({
   const { onReadClick: onReaderInstallGateClick } =
     useReaderInstallPromptGate(post);
   const { onShowUpvoted } = useUpvoteQuery();
+  const showCodeSnippets = useFeature(feature.showCodeSnippets);
   const focusCommentRef = useRef<() => void>(() => {});
   const handleImageClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
     if (onReaderInstallGateClick(event)) {
@@ -50,119 +80,79 @@ export const PostFocusCard = ({
     onReadArticle();
   };
 
-  const readHref = getReadArticleHref(post);
-  const readText = getReadPostButtonText(post);
-
   return (
     <article
       className="grid w-full overflow-hidden rounded-24 bg-background-default laptop:grid-cols-[minmax(0,1fr)_24rem]"
       data-testid="post-focus-card"
     >
-      <div className="flex min-w-0 flex-col gap-6 p-4 tablet:p-6 laptop:p-8">
-        <div className="flex min-w-0 flex-col gap-4">
-          <PostSourceInfo
-            className="min-w-0"
-            hideSubscribeAction
-            onReadArticle={onReadArticle}
-            post={post}
-            showActions={false}
-          />
-          <div className="flex min-w-0 flex-col gap-3">
-            <h1
-              className="break-words font-bold text-text-primary typo-large-title laptop:typo-mega3"
-              data-testid="post-modal-title"
-            >
-              {title}
-            </h1>
+      <div className="flex min-w-0 flex-col">
+        <PostHero
+          hideSubscribeAction
+          inlineActions
+          isVideoType={isVideoType}
+          metadata={
             <PostMetadata
-              className="!mt-0 !typo-callout"
+              className="!typo-callout"
               createdAt={post.createdAt}
+              domain={
+                !isVideoType &&
+                post.domain &&
+                post.domain.length > 0 && (
+                  <TruncateText>
+                    From{' '}
+                    <ArticleLink
+                      className="hover:underline"
+                      href={post.permalink}
+                      onClick={onReadArticle}
+                      title={post.domain}
+                    >
+                      {post.domain}
+                    </ArticleLink>
+                  </TruncateText>
+                )
+              }
               isVideoType={isVideoType}
               readTime={post.readTime}
             />
-            {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
-          </div>
-
-          <div className="flex flex-col gap-3 tablet:flex-row tablet:items-center">
-            {!!readHref && (
-              <Button
-                className="w-full tablet:w-auto"
-                href={readHref}
-                onClick={() => onReadArticle()}
-                size={ButtonSize.Large}
-                tag="a"
-                target="_blank"
-                variant={ButtonVariant.Primary}
-              >
-                {readText}
-              </Button>
-            )}
-            <PostMenuOptions
-              buttonSize={ButtonSize.Large}
-              origin={origin}
-              post={post}
-            />
-          </div>
-        </div>
+          }
+          onImageClick={handleImageClick}
+          onReadArticle={onReadArticle}
+          post={post}
+          title={title}
+        />
 
-        {isVideoType && post.videoId ? (
-          <YoutubeVideo
-            className="rounded-16 bg-background-subtle"
-            placeholderProps={{ post, onWatchVideo: onReadArticle }}
-            videoId={post.videoId}
-          />
-        ) : (
-          <a
-            className="block overflow-hidden rounded-16 bg-background-subtle"
-            href={readHref}
-            onClick={handleImageClick}
-            rel="noopener"
-            target="_blank"
-            title="Go to post"
-          >
-            <LazyImage
-              eager
-              fallbackSrc={cloudinaryPostImageCoverPlaceholder}
-              fetchPriority="high"
-              imgAlt="Post cover image"
-              imgSrc={post.image}
-              ratio="56%"
+        <div className="flex min-w-0 flex-col gap-6 border-t border-border-subtlest-tertiary p-4 tablet:p-6 laptop:p-8">
+          {isVideoType && (
+            <YoutubeVideo
+              className="shadow-1 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3"
+              placeholderProps={{ post, onWatchVideo: onReadArticle }}
+              videoId={post.videoId ?? ''}
             />
-          </a>
-        )}
-
-        <section className="flex min-w-0 flex-col gap-3">
-          <p className="text-text-tertiary typo-caption1">TL;DR</p>
-          {post.summary ? (
-            <p
-              className="select-text break-words text-text-secondary typo-markdown"
-              data-testid="tldr-container"
-            >
-              {post.summary}
-            </p>
-          ) : (
-            <p className="text-text-secondary typo-callout">
-              Read the original post, then use the developer discussion and feed
-              below to keep exploring related stories.
-            </p>
           )}
-        </section>
 
-        <PostTagList post={post} />
+          <PostInsightPanel post={post}>
+            {showCodeSnippets && (
+              <PostCodeSnippets
+                className={leftVariant === 'lean' ? 'mb-4' : 'mb-6'}
+                post={post}
+              />
+            )}
+          </PostInsightPanel>
 
-        <section className="flex min-w-0 flex-col gap-3 border-t border-border-subtlest-tertiary pt-4">
-          <PostUpvotesCommentsCount
-            post={post}
-            onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
-          />
-          <PostActions
-            post={post}
-            postQueryKey={['post', post.id]}
-            onComment={() => focusCommentRef.current()}
-            onCopyLinkClick={onCopyPostLink}
-            origin={origin}
-          />
-        </section>
+          <section className="flex min-w-0 flex-col gap-3 border-t border-border-subtlest-tertiary pt-4">
+            <PostUpvotesCommentsCount
+              post={post}
+              onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
+            />
+            <PostActions
+              post={post}
+              postQueryKey={['post', post.id]}
+              onComment={() => focusCommentRef.current()}
+              onCopyLinkClick={onCopyPostLink}
+              origin={origin}
+            />
+          </section>
+        </div>
       </div>
 
       <aside className="flex min-h-0 min-w-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle p-4 tablet:p-6 laptop:sticky laptop:top-16 laptop:max-h-[calc(100vh-8rem)] laptop:border-l laptop:border-t-0 laptop:p-4">

From 7788b4fe3986a06408c0941b8fe92f1c0f1c9571 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:39:10 +0300
Subject: [PATCH 011/111] fix: use reader source strip in discovery hero

Allow PostHero to receive a custom source row and render the discovery post
source with the Read Inside daily.dev SourceStrip pattern: logo, source name,
handle, and follow action.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostFocusCard.tsx           | 10 ++++++++++
 .../components/post/experience/PostHero.tsx    | 18 +++++++++++-------
 .../src/components/post/reader/SourceStrip.tsx |  9 +++++++--
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 6b51210be5d..989de9d48c4 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -3,6 +3,7 @@ import type { ComponentProps, ReactElement } from 'react';
 import React, { useRef } from 'react';
 import type { Post } from '../../../graphql/posts';
 import { isVideoPost } from '../../../graphql/posts';
+import type { SourceTooltip } from '../../../graphql/sources';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import usePostContent from '../../../hooks/usePostContent';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
@@ -18,6 +19,7 @@ import { TruncateText } from '../../utilities';
 import { combinedClicks } from '../../../lib/click';
 import { useFeature } from '../../GrowthBookProvider';
 import { feature } from '../../../lib/featureManagement';
+import { SourceStrip } from '../reader/SourceStrip';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
 
 const PostCodeSnippets = dynamic(() =>
@@ -118,6 +120,14 @@ export const PostFocusCard = ({
           onImageClick={handleImageClick}
           onReadArticle={onReadArticle}
           post={post}
+          sourceInfo={
+            post.source ? (
+              <SourceStrip
+                className="w-full"
+                source={post.source as SourceTooltip}
+              />
+            ) : undefined
+          }
           title={title}
         />
 
diff --git a/packages/shared/src/components/post/experience/PostHero.tsx b/packages/shared/src/components/post/experience/PostHero.tsx
index 7f835c12bd8..e6a26c13873 100644
--- a/packages/shared/src/components/post/experience/PostHero.tsx
+++ b/packages/shared/src/components/post/experience/PostHero.tsx
@@ -20,6 +20,7 @@ interface PostHeroProps {
   title: string;
   isVideoType?: boolean;
   metadata?: ReactNode;
+  sourceInfo?: ReactNode;
   onReadArticle?: () => void;
   onImageClick?: MouseEventHandler<HTMLAnchorElement>;
   onClose?: MouseEventHandler | React.KeyboardEventHandler;
@@ -32,6 +33,7 @@ export const PostHero = ({
   title,
   isVideoType,
   metadata,
+  sourceInfo,
   onReadArticle,
   onImageClick,
   onClose,
@@ -46,13 +48,15 @@ export const PostHero = ({
     <section className="relative overflow-hidden bg-background-subtle px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-10">
       <div className="mx-auto grid w-full max-w-[64rem] gap-8 laptop:grid-cols-[minmax(0,1fr)_22rem] laptop:items-center">
         <div className="flex min-w-0 flex-col gap-6">
-          <PostSourceInfo
-            className="min-w-0"
-            hideSubscribeAction={hideSubscribeAction}
-            onClose={onClose}
-            onReadArticle={onReadArticle}
-            post={post}
-          />
+          {sourceInfo ?? (
+            <PostSourceInfo
+              className="min-w-0"
+              hideSubscribeAction={hideSubscribeAction}
+              onClose={onClose}
+              onReadArticle={onReadArticle}
+              post={post}
+            />
+          )}
           <div className="flex flex-col gap-4">
             <div className="inline-flex w-fit rounded-10 border border-border-subtlest-tertiary bg-surface-float px-2.5 py-1 text-text-tertiary typo-caption1">
               External article discussed on daily.dev
diff --git a/packages/shared/src/components/post/reader/SourceStrip.tsx b/packages/shared/src/components/post/reader/SourceStrip.tsx
index f91e4e5cc36..702138bc853 100644
--- a/packages/shared/src/components/post/reader/SourceStrip.tsx
+++ b/packages/shared/src/components/post/reader/SourceStrip.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import React from 'react';
+import classNames from 'classnames';
 import type { SourceTooltip } from '../../../graphql/sources';
 import { FollowButton } from '../../contentPreference/FollowButton';
 import { useContentPreferenceStatusQuery } from '../../../hooks/contentPreference/useContentPreferenceStatusQuery';
@@ -18,9 +19,13 @@ import SourceEntityCard from '../../cards/entity/SourceEntityCard';
 
 type SourceStripProps = {
   source: SourceTooltip;
+  className?: string;
 };
 
-export function SourceStrip({ source }: SourceStripProps): ReactElement | null {
+export function SourceStrip({
+  source,
+  className,
+}: SourceStripProps): ReactElement | null {
   const sourceId = source?.id ?? '';
   const sourceName = source?.name ?? '';
   const { showActionBtn } = useShowFollowAction({
@@ -38,7 +43,7 @@ export function SourceStrip({ source }: SourceStripProps): ReactElement | null {
   const sourceHandle = source.handle ? `@${source.handle}` : null;
 
   return (
-    <div className="flex min-w-0 items-center gap-2">
+    <div className={classNames('flex min-w-0 items-center gap-2', className)}>
       <HoverCard
         appendTo={globalThis?.document?.body}
         side="top"

From b97f2540680152ffd23a34238e205cae003d8234 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:45:58 +0300
Subject: [PATCH 012/111] fix: render discovery feed across available page
 width

Keep the post details constrained, but let the discovery feed itself occupy the
available page width like the main feed. Move padding to the section headings
and scope nested feeds to their real feed names so responsive card columns match
home/explore behavior.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/post/discovery/PostDiscoveryFeed.tsx   | 11 +++++++----
 .../components/post/discovery/PostDiscoveryLayout.tsx |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
index 68142d8a7b2..623995e0f27 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -10,6 +10,7 @@ import {
   FEED_BY_TAGS_QUERY,
   FEED_V2_QUERY,
 } from '../../../graphql/feed';
+import type { AllFeedPages } from '../../../lib/query';
 import { OtherFeedPage } from '../../../lib/query';
 import { SharedFeedPage } from '../../utilities';
 import {
@@ -34,7 +35,7 @@ const SectionHeader = ({
   title,
   description,
 }: SectionHeaderProps): ReactElement => (
-  <header className="mb-4 flex flex-col gap-1">
+  <header className="mb-4 flex flex-col gap-1 px-4 tablet:px-6 laptop:px-8">
     <p className="text-accent-cabbage-default typo-caption1">{eyebrow}</p>
     <h2 className="font-bold text-text-primary typo-title2">{title}</h2>
     <p className="text-text-tertiary typo-callout">{description}</p>
@@ -46,8 +47,10 @@ const SectionHeader = ({
  * route itself is a post page, which normally forces list layout.
  */
 const DiscoveryFeedGridScope = ({
+  feedName,
   children,
 }: {
+  feedName: AllFeedPages;
   children: ReactElement;
 }): ReactElement => {
   const settings = useContext(SettingsContext);
@@ -57,7 +60,7 @@ const DiscoveryFeedGridScope = ({
   );
 
   return (
-    <ActiveFeedNameContext.Provider value={{ feedName: OtherFeedPage.Tag }}>
+    <ActiveFeedNameContext.Provider value={{ feedName }}>
       <SettingsContext.Provider value={settingsContextValue}>
         {children}
       </SettingsContext.Provider>
@@ -93,7 +96,7 @@ export const PostDiscoveryFeed = ({
             title={`More on ${topicLabel}`}
             description="Hand-picked stories close to what you just read."
           />
-          <DiscoveryFeedGridScope>
+          <DiscoveryFeedGridScope feedName={OtherFeedPage.ExploreTag}>
             <Feed
               feedName={OtherFeedPage.ExploreTag}
               feedQueryKey={['post-discovery-related', post.id]}
@@ -114,7 +117,7 @@ export const PostDiscoveryFeed = ({
           title="Discover more"
           description="A fresh stream of developer stories, discussions, and tools."
         />
-        <DiscoveryFeedGridScope>
+        <DiscoveryFeedGridScope feedName={SharedFeedPage.Popular}>
           <Feed
             feedName={SharedFeedPage.Popular}
             feedQueryKey={['post-discovery-more', post.id]}
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index 2c458d839e8..e443919b9b9 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -91,7 +91,7 @@ export const PostDiscoveryLayout = ({
         )}
       </div>
 
-      <div className="w-full px-4 pb-10 tablet:px-6 laptop:px-8">
+      <div className="w-full pb-10">
         <PostDiscoveryFeed post={post} />
       </div>
       <BackToTop />

From edb14374ec9c416f2f0292efb7b4d69606fa3417 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:48:49 +0300
Subject: [PATCH 013/111] fix: restore production post details column structure

Use the production PostContainer as the discovery left column so the post details
keep the same flex, padding, and right-border behavior as today's post page.
Render only the comment thread in the right rail while preserving the source,
title, summary, tags, metadata, media, TOC, snippets, and action bar in the left
post details area.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostFocusCard.tsx          | 114 ++++++++++++------
 1 file changed, 78 insertions(+), 36 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 989de9d48c4..bc38d309fdd 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { useRef } from 'react';
 import type { Post } from '../../../graphql/posts';
-import { isVideoPost } from '../../../graphql/posts';
+import { getReadArticleHref, isVideoPost } from '../../../graphql/posts';
 import type { SourceTooltip } from '../../../graphql/sources';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import usePostContent from '../../../hooks/usePostContent';
@@ -11,10 +11,16 @@ import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromp
 import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
+import { LazyImage } from '../../LazyImage';
+import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
+import { ButtonSize } from '../../buttons/Button';
+import { PostClickbaitShield } from '../common/PostClickbaitShield';
+import { PostHeaderActions } from '../PostHeaderActions';
 import { PostActions } from '../PostActions';
 import { PostUpvotesCommentsCount } from '../PostUpvotesCommentsCount';
-import { PostHero } from '../experience/PostHero';
-import { PostInsightPanel } from '../experience/PostInsightPanel';
+import { PostContainer } from '../common';
+import { PostTagList } from '../tags/PostTagList';
+import PostToc from '../../widgets/PostToc';
 import { TruncateText } from '../../utilities';
 import { combinedClicks } from '../../../lib/click';
 import { useFeature } from '../../GrowthBookProvider';
@@ -75,6 +81,8 @@ export const PostFocusCard = ({
   const { onShowUpvoted } = useUpvoteQuery();
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
   const focusCommentRef = useRef<() => void>(() => {});
+  const readHref = getReadArticleHref(post);
+  const hasToc = (post.toc?.length ?? 0) > 0;
   const handleImageClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
     if (onReaderInstallGateClick(event)) {
       return;
@@ -84,15 +92,46 @@ export const PostFocusCard = ({
 
   return (
     <article
-      className="grid w-full overflow-hidden rounded-24 bg-background-default laptop:grid-cols-[minmax(0,1fr)_24rem]"
+      className="flex w-full flex-col overflow-hidden rounded-24 bg-background-default laptop:flex-row"
       data-testid="post-focus-card"
     >
-      <div className="flex min-w-0 flex-col">
-        <PostHero
-          hideSubscribeAction
-          inlineActions
-          isVideoType={isVideoType}
-          metadata={
+      <PostContainer className="relative">
+        <div className="flex min-w-0 flex-col gap-6 py-6 laptop:py-8">
+          <div className="flex min-w-0 items-start gap-3">
+            {post.source && (
+              <SourceStrip
+                className="min-w-0 flex-1"
+                source={post.source as SourceTooltip}
+              />
+            )}
+            <PostHeaderActions
+              buttonSize={ButtonSize.Large}
+              className="ml-auto shrink-0"
+              contextMenuId="post-discovery-header-actions"
+              hideSubscribeAction
+              inlineActions
+              onReadArticle={onReadArticle}
+              post={post}
+            />
+          </div>
+
+          <div className="flex min-w-0 flex-col gap-4">
+            <h1
+              className="break-words font-bold text-text-primary typo-large-title laptop:typo-mega2"
+              data-testid="post-modal-title"
+            >
+              {title}
+            </h1>
+            {post.summary && (
+              <p
+                className="select-text break-words text-text-secondary typo-title3"
+                data-testid="tldr-container"
+              >
+                {post.summary}
+              </p>
+            )}
+            {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
+            <PostTagList post={post} />
             <PostMetadata
               className="!typo-callout"
               createdAt={post.createdAt}
@@ -116,38 +155,41 @@ export const PostFocusCard = ({
               isVideoType={isVideoType}
               readTime={post.readTime}
             />
-          }
-          onImageClick={handleImageClick}
-          onReadArticle={onReadArticle}
-          post={post}
-          sourceInfo={
-            post.source ? (
-              <SourceStrip
-                className="w-full"
-                source={post.source as SourceTooltip}
-              />
-            ) : undefined
-          }
-          title={title}
-        />
+          </div>
 
-        <div className="flex min-w-0 flex-col gap-6 border-t border-border-subtlest-tertiary p-4 tablet:p-6 laptop:p-8">
-          {isVideoType && (
+          {isVideoType ? (
             <YoutubeVideo
               className="shadow-1 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3"
               placeholderProps={{ post, onWatchVideo: onReadArticle }}
               videoId={post.videoId ?? ''}
             />
+          ) : (
+            <a
+              className="block overflow-hidden rounded-16 bg-background-subtle"
+              href={readHref}
+              onClick={handleImageClick}
+              rel="noopener"
+              target="_blank"
+              title="Go to post"
+            >
+              <LazyImage
+                eager
+                fallbackSrc={cloudinaryPostImageCoverPlaceholder}
+                fetchPriority="high"
+                imgAlt="Post cover image"
+                imgSrc={post.image}
+                ratio="48%"
+              />
+            </a>
           )}
 
-          <PostInsightPanel post={post}>
-            {showCodeSnippets && (
-              <PostCodeSnippets
-                className={leftVariant === 'lean' ? 'mb-4' : 'mb-6'}
-                post={post}
-              />
-            )}
-          </PostInsightPanel>
+          {hasToc && <PostToc post={post} />}
+
+          {showCodeSnippets && (
+            <div className={leftVariant === 'lean' ? 'mb-4' : 'mb-6'}>
+              <PostCodeSnippets post={post} />
+            </div>
+          )}
 
           <section className="flex min-w-0 flex-col gap-3 border-t border-border-subtlest-tertiary pt-4">
             <PostUpvotesCommentsCount
@@ -163,9 +205,9 @@ export const PostFocusCard = ({
             />
           </section>
         </div>
-      </div>
+      </PostContainer>
 
-      <aside className="flex min-h-0 min-w-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle p-4 tablet:p-6 laptop:sticky laptop:top-16 laptop:max-h-[calc(100vh-8rem)] laptop:border-l laptop:border-t-0 laptop:p-4">
+      <aside className="flex min-h-0 min-w-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle p-4 tablet:p-6 laptop:sticky laptop:top-16 laptop:max-h-[calc(100vh-8rem)] laptop:w-96 laptop:border-t-0 laptop:p-4">
         <PostDiscussionPanel
           onRegisterFocusComment={(fn) => {
             focusCommentRef.current = fn;

From f83318dd83b6a22006e8551761215c3606c246de Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:55:48 +0300
Subject: [PATCH 014/111] fix: polish discovery discussion sidebar card

Render the right-side discussion as a contained card with improved spacing,
shadow, and padding. Cap the sidebar height and make the comment thread scroll
inside the card so long discussions and replies do not stretch the post details
surface.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscussionPanel.tsx    | 146 ++++++++++--------
 .../post/discovery/PostFocusCard.tsx          |  19 ++-
 2 files changed, 90 insertions(+), 75 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index d62711df4f4..ab583291fdc 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -105,77 +105,89 @@ export const PostDiscussionPanel = ({
     <section
       ref={rootRef}
       aria-label="Discussion"
-      className={classNames('flex min-w-0 flex-col gap-3', className)}
+      className={classNames('flex min-h-0 min-w-0 flex-col gap-3', className)}
     >
-      <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 text-text-tertiary typo-callout">
-        <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
+      <div className="flex shrink-0 flex-col gap-3">
+        <div className="flex min-w-0 flex-col gap-1 border-b border-border-subtlest-tertiary pb-3">
+          <p className="text-text-tertiary typo-caption1">Discussion</p>
+          <h2 className="font-bold text-text-primary typo-title3">
+            What developers are saying
+          </h2>
+        </div>
+        <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 text-text-tertiary typo-callout">
+          <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>
-            </Link>
-          )}
+            )}
+            <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>
+            )}
+          </div>
+          <Button
+            type="button"
+            size={ButtonSize.XSmall}
+            variant={ButtonVariant.Tertiary}
+            iconPosition={ButtonIconPosition.Right}
+            icon={
+              <TimeSortIcon
+                secondary
+                className={isNewestFirst ? undefined : 'rotate-180'}
+              />
+            }
+            onClick={() =>
+              setSortBy(
+                isNewestFirst
+                  ? SortCommentsBy.OldestFirst
+                  : SortCommentsBy.NewestFirst,
+              )
+            }
+            aria-label={sortLabel}
+            className="!text-text-tertiary"
+          >
+            {isNewestFirst ? 'Newest first' : 'Oldest first'}
+          </Button>
         </div>
-        <Button
-          type="button"
-          size={ButtonSize.XSmall}
-          variant={ButtonVariant.Tertiary}
-          iconPosition={ButtonIconPosition.Right}
-          icon={
-            <TimeSortIcon
-              secondary
-              className={isNewestFirst ? undefined : 'rotate-180'}
-            />
-          }
-          onClick={() =>
-            setSortBy(
-              isNewestFirst
-                ? SortCommentsBy.OldestFirst
-                : SortCommentsBy.NewestFirst,
-            )
-          }
-          aria-label={sortLabel}
-          className="!text-text-tertiary"
-        >
-          {isNewestFirst ? 'Newest first' : 'Oldest first'}
-        </Button>
+        <NewComment
+          post={post}
+          ref={commentRef as LegacyRef<NewCommentRef>}
+          shouldHandleCommentQuery
+          onComposerOpenChange={setIsComposerOpen}
+          size={ProfileImageSize.Medium}
+          CommentInputOrModal={CommentInputOrModal}
+        />
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1">
+        <PostComments
+          post={post}
+          sortBy={sortBy}
+          origin={origin}
+          isComposerOpen={isComposerOpen}
+          onShare={(comment) => openShareComment(comment, post)}
+          onClickUpvote={(id, count) => onShowUpvoted(id, count, 'comment')}
+          modalParentSelector={resolveModalParent}
+        />
+      </div>
+      <div className="shrink-0 border-t border-border-subtlest-tertiary pt-3">
+        <ShareBar post={post} />
       </div>
-      <NewComment
-        post={post}
-        ref={commentRef as LegacyRef<NewCommentRef>}
-        shouldHandleCommentQuery
-        onComposerOpenChange={setIsComposerOpen}
-        size={ProfileImageSize.Medium}
-        CommentInputOrModal={CommentInputOrModal}
-      />
-      <PostComments
-        post={post}
-        sortBy={sortBy}
-        origin={origin}
-        isComposerOpen={isComposerOpen}
-        onShare={(comment) => openShareComment(comment, post)}
-        onClickUpvote={(id, count) => onShowUpvoted(id, count, 'comment')}
-        modalParentSelector={resolveModalParent}
-      />
-      <ShareBar post={post} />
     </section>
   );
 };
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index bc38d309fdd..3a8349ee6ce 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -207,14 +207,17 @@ export const PostFocusCard = ({
         </div>
       </PostContainer>
 
-      <aside className="flex min-h-0 min-w-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle p-4 tablet:p-6 laptop:sticky laptop:top-16 laptop:max-h-[calc(100vh-8rem)] laptop:w-96 laptop:border-t-0 laptop:p-4">
-        <PostDiscussionPanel
-          onRegisterFocusComment={(fn) => {
-            focusCommentRef.current = fn;
-          }}
-          post={post}
-          origin={origin}
-        />
+      <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle p-3 tablet:p-4 laptop:sticky laptop:top-20 laptop:h-[calc(100vh-6rem)] laptop:max-h-[calc(100vh-6rem)] laptop:w-[26rem] laptop:border-t-0 laptop:bg-background-default">
+        <div className="flex min-h-0 w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2 laptop:h-full">
+          <PostDiscussionPanel
+            className="h-full p-4"
+            onRegisterFocusComment={(fn) => {
+              focusCommentRef.current = fn;
+            }}
+            post={post}
+            origin={origin}
+          />
+        </div>
       </aside>
     </article>
   );

From 74dcd4d265cfce0d19910cc30a01873afad0bdac Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 12:59:11 +0300
Subject: [PATCH 015/111] fix: render more-like-this as three-column card grid

Scope the related discovery feed to three cards per row with the same grid/gap
behavior expected from feed cards, and add the requested top spacing before the
card grid.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscoveryFeed.tsx      | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
index 623995e0f27..f106d24a1d0 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
 import React, { useContext, useMemo } from 'react';
 import type { Post } from '../../../graphql/posts';
 import Feed from '../../Feed';
+import FeedContext from '../../../contexts/FeedContext';
 import SettingsContext from '../../../contexts/SettingsContext';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import { ActiveFeedNameContext } from '../../../contexts';
@@ -48,12 +49,25 @@ const SectionHeader = ({
  */
 const DiscoveryFeedGridScope = ({
   feedName,
+  columns,
   children,
 }: {
   feedName: AllFeedPages;
+  columns?: number;
   children: ReactElement;
 }): ReactElement => {
+  const currentFeedSettings = useContext(FeedContext);
   const settings = useContext(SettingsContext);
+  const feedContextValue = useMemo(() => {
+    if (!columns) {
+      return currentFeedSettings;
+    }
+
+    return {
+      ...currentFeedSettings,
+      numCards: { eco: columns, roomy: columns, cozy: columns },
+    };
+  }, [columns, currentFeedSettings]);
   const settingsContextValue = useMemo(
     () => ({ ...settings, insaneMode: false }),
     [settings],
@@ -62,7 +76,9 @@ const DiscoveryFeedGridScope = ({
   return (
     <ActiveFeedNameContext.Provider value={{ feedName }}>
       <SettingsContext.Provider value={settingsContextValue}>
-        {children}
+        <FeedContext.Provider value={feedContextValue}>
+          {children}
+        </FeedContext.Provider>
       </SettingsContext.Provider>
     </ActiveFeedNameContext.Provider>
   );
@@ -96,8 +112,12 @@ export const PostDiscoveryFeed = ({
             title={`More on ${topicLabel}`}
             description="Hand-picked stories close to what you just read."
           />
-          <DiscoveryFeedGridScope feedName={OtherFeedPage.ExploreTag}>
+          <DiscoveryFeedGridScope
+            columns={3}
+            feedName={OtherFeedPage.ExploreTag}
+          >
             <Feed
+              className="mt-8"
               feedName={OtherFeedPage.ExploreTag}
               feedQueryKey={['post-discovery-related', post.id]}
               query={FEED_BY_TAGS_QUERY}

From d49c6cfa89679e295562b9ddb5652f4b5c01ced4 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 13:07:03 +0300
Subject: [PATCH 016/111] fix: tighten discovery actions and comment rail
 spacing

Compact the post recommendation/action area into a single row on tablet and up,
remove the extra discussion title from the right rail, and pull the discussion
card flush to the top while keeping its card styling and internal scroll.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscussionPanel.tsx    |  3 ---
 .../post/discovery/PostFocusCard.tsx          | 22 +++++++++++--------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index ab583291fdc..fd56627038e 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -110,9 +110,6 @@ export const PostDiscussionPanel = ({
       <div className="flex shrink-0 flex-col gap-3">
         <div className="flex min-w-0 flex-col gap-1 border-b border-border-subtlest-tertiary pb-3">
           <p className="text-text-tertiary typo-caption1">Discussion</p>
-          <h2 className="font-bold text-text-primary typo-title3">
-            What developers are saying
-          </h2>
         </div>
         <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 text-text-tertiary typo-callout">
           <div className="flex min-w-0 flex-wrap items-center gap-x-4">
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 3a8349ee6ce..356d8b8cf10 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -191,23 +191,27 @@ export const PostFocusCard = ({
             </div>
           )}
 
-          <section className="flex min-w-0 flex-col gap-3 border-t border-border-subtlest-tertiary pt-4">
+          <section className="flex min-w-0 flex-col gap-3 border-t border-border-subtlest-tertiary pt-4 tablet:flex-row tablet:items-center tablet:justify-between">
             <PostUpvotesCommentsCount
+              compact
+              className="shrink-0"
               post={post}
               onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
             />
-            <PostActions
-              post={post}
-              postQueryKey={['post', post.id]}
-              onComment={() => focusCommentRef.current()}
-              onCopyLinkClick={onCopyPostLink}
-              origin={origin}
-            />
+            <div className="min-w-0 flex-1">
+              <PostActions
+                post={post}
+                postQueryKey={['post', post.id]}
+                onComment={() => focusCommentRef.current()}
+                onCopyLinkClick={onCopyPostLink}
+                origin={origin}
+              />
+            </div>
           </section>
         </div>
       </PostContainer>
 
-      <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle p-3 tablet:p-4 laptop:sticky laptop:top-20 laptop:h-[calc(100vh-6rem)] laptop:max-h-[calc(100vh-6rem)] laptop:w-[26rem] laptop:border-t-0 laptop:bg-background-default">
+      <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle laptop:sticky laptop:top-16 laptop:h-[calc(100vh-4rem)] laptop:max-h-[calc(100vh-4rem)] laptop:w-[26rem] laptop:border-t-0 laptop:bg-background-default">
         <div className="flex min-h-0 w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2 laptop:h-full">
           <PostDiscussionPanel
             className="h-full p-4"

From 41eeabe323a3f2a34cd9f3b1203fe11f417a223b Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 13:08:52 +0300
Subject: [PATCH 017/111] fix: place action bar at top of discussion card

Replace the discussion-card header area with the standard post action bar and
remove the duplicate action bar from the left post details column. Keep the stats
line with the post details and let the right rail action bar control the comment
composer.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscussionPanel.tsx    | 12 +++++---
 .../post/discovery/PostFocusCard.tsx          | 28 ++++++++-----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index fd56627038e..eca5a9519e7 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic';
-import type { LegacyRef, ReactElement } from 'react';
+import type { LegacyRef, ReactElement, ReactNode } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useAuthContext } from '../../../contexts/AuthContext';
@@ -39,6 +39,7 @@ export interface PostDiscussionPanelProps {
   post: Post;
   origin?: Origin;
   className?: string;
+  actionBar?: ReactNode;
   /**
    * Lets a parent (e.g. a floating "comment" action) focus the composer.
    */
@@ -61,6 +62,7 @@ export const PostDiscussionPanel = ({
   post,
   origin = Origin.ArticlePage,
   className,
+  actionBar,
   onRegisterFocusComment,
   modalParentSelector,
 }: PostDiscussionPanelProps): ReactElement => {
@@ -108,9 +110,11 @@ export const PostDiscussionPanel = ({
       className={classNames('flex min-h-0 min-w-0 flex-col gap-3', className)}
     >
       <div className="flex shrink-0 flex-col gap-3">
-        <div className="flex min-w-0 flex-col gap-1 border-b border-border-subtlest-tertiary pb-3">
-          <p className="text-text-tertiary typo-caption1">Discussion</p>
-        </div>
+        {actionBar && (
+          <div className="border-b border-border-subtlest-tertiary pb-3">
+            {actionBar}
+          </div>
+        )}
         <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 text-text-tertiary typo-callout">
           <div className="flex min-w-0 flex-wrap items-center gap-x-4">
             {upvotes > 0 && (
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 356d8b8cf10..b88077f25be 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -191,14 +191,17 @@ export const PostFocusCard = ({
             </div>
           )}
 
-          <section className="flex min-w-0 flex-col gap-3 border-t border-border-subtlest-tertiary pt-4 tablet:flex-row tablet:items-center tablet:justify-between">
-            <PostUpvotesCommentsCount
-              compact
-              className="shrink-0"
-              post={post}
-              onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
-            />
-            <div className="min-w-0 flex-1">
+          <PostUpvotesCommentsCount
+            post={post}
+            onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
+          />
+        </div>
+      </PostContainer>
+
+      <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle laptop:sticky laptop:top-16 laptop:h-[calc(100vh-4rem)] laptop:max-h-[calc(100vh-4rem)] laptop:w-[26rem] laptop:border-t-0 laptop:bg-background-default">
+        <div className="flex min-h-0 w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2 laptop:h-full">
+          <PostDiscussionPanel
+            actionBar={
               <PostActions
                 post={post}
                 postQueryKey={['post', post.id]}
@@ -206,14 +209,7 @@ export const PostFocusCard = ({
                 onCopyLinkClick={onCopyPostLink}
                 origin={origin}
               />
-            </div>
-          </section>
-        </div>
-      </PostContainer>
-
-      <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle laptop:sticky laptop:top-16 laptop:h-[calc(100vh-4rem)] laptop:max-h-[calc(100vh-4rem)] laptop:w-[26rem] laptop:border-t-0 laptop:bg-background-default">
-        <div className="flex min-h-0 w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2 laptop:h-full">
-          <PostDiscussionPanel
+            }
             className="h-full p-4"
             onRegisterFocusComment={(fn) => {
               focusCommentRef.current = fn;

From 368a4801514514c4760c18aa12a03a5ebfcf845f Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 13:09:43 +0300
Subject: [PATCH 018/111] fix: remove discovery post column separator

Remove the production column border in the discovery layout so the left post
details and right comments card do not have a hard separator between them.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/post/discovery/PostFocusCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index b88077f25be..eea6e1aa965 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -95,7 +95,7 @@ export const PostFocusCard = ({
       className="flex w-full flex-col overflow-hidden rounded-24 bg-background-default laptop:flex-row"
       data-testid="post-focus-card"
     >
-      <PostContainer className="relative">
+      <PostContainer className="relative laptop:border-r-0">
         <div className="flex min-w-0 flex-col gap-6 py-6 laptop:py-8">
           <div className="flex min-w-0 items-start gap-3">
             {post.source && (

From d3e492df41f6d18dafa244dc69351fdae4e8f8ca Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 13:34:48 +0300
Subject: [PATCH 019/111] fix: simplify discussion card actions and sharing

Allow the post action bar to render without its outer border in the discovery
rail, and make ShareBar configurable so this surface shows one row of share
options with the rest behind the expand button.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/ShareBar.tsx           | 11 +++++++----
 packages/shared/src/components/post/PostActions.tsx   |  9 ++++++++-
 .../shared/src/components/post/PostActions.v2.tsx     |  9 ++++++++-
 .../components/post/discovery/PostDiscussionPanel.tsx |  2 +-
 .../src/components/post/discovery/PostFocusCard.tsx   |  1 +
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/shared/src/components/ShareBar.tsx b/packages/shared/src/components/ShareBar.tsx
index 6b9461f11cf..1c6b171fae0 100644
--- a/packages/shared/src/components/ShareBar.tsx
+++ b/packages/shared/src/components/ShareBar.tsx
@@ -23,16 +23,19 @@ 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 = maxVisibleOptions - fixedOptions;
   const href = post.commentsPermalink;
   const cid = ReferralCampaignKey.SharePost;
   const { getShortUrl } = useGetShortUrl();
diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx
index 5b0acf6a5dd..0654829ec01 100644
--- a/packages/shared/src/components/post/PostActions.tsx
+++ b/packages/shared/src/components/post/PostActions.tsx
@@ -42,9 +42,11 @@ interface PostActionsProps {
   onComment?: () => unknown;
   origin?: PostOrigin;
   onCopyLinkClick?: (post?: Post) => void;
+  borderless?: boolean;
 }
 
 function PostActionsV1({
+  borderless = false,
   onCopyLinkClick,
   post,
   onComment,
@@ -214,7 +216,12 @@ function PostActionsV1({
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex items-center rounded-16 border border-border-subtlest-tertiary">
+      <div
+        className={classNames(
+          'flex items-center rounded-16',
+          !borderless && 'border border-border-subtlest-tertiary',
+        )}
+      >
         <div
           className="flex flex-1 items-center justify-between gap-x-1 overflow-hidden py-2 pl-4 pr-6"
           ref={actionsRef}
diff --git a/packages/shared/src/components/post/PostActions.v2.tsx b/packages/shared/src/components/post/PostActions.v2.tsx
index 61bd1280856..09112479b2a 100644
--- a/packages/shared/src/components/post/PostActions.v2.tsx
+++ b/packages/shared/src/components/post/PostActions.v2.tsx
@@ -42,9 +42,11 @@ interface PostActionsProps {
   onComment?: () => unknown;
   origin?: PostOrigin;
   onCopyLinkClick?: (post?: Post) => void;
+  borderless?: boolean;
 }
 
 export function PostActions({
+  borderless = false,
   onCopyLinkClick,
   post,
   onComment,
@@ -196,7 +198,12 @@ export function PostActions({
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex items-center rounded-16 border border-border-subtlest-tertiary">
+      <div
+        className={classNames(
+          'flex items-center rounded-16',
+          !borderless && 'border border-border-subtlest-tertiary',
+        )}
+      >
         <CardActionBar
           ref={actionsRef}
           layout="between"
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index eca5a9519e7..d78560c6c7f 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -187,7 +187,7 @@ export const PostDiscussionPanel = ({
         />
       </div>
       <div className="shrink-0 border-t border-border-subtlest-tertiary pt-3">
-        <ShareBar post={post} />
+        <ShareBar post={post} visibleRows={1} />
       </div>
     </section>
   );
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index eea6e1aa965..6101cc1918f 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -203,6 +203,7 @@ export const PostFocusCard = ({
           <PostDiscussionPanel
             actionBar={
               <PostActions
+                borderless
                 post={post}
                 postQueryKey={['post', post.id]}
                 onComment={() => focusCommentRef.current()}

From a9122fdec47c5292332ee8f4bd15d632c4945a15 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 13:35:42 +0300
Subject: [PATCH 020/111] fix: remove duplicate discovery stats row

Remove the left-column post stats row from the discovery layout because the
right discussion panel already surfaces upvotes, comments, and analytics.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/discovery/PostFocusCard.tsx       | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 6101cc1918f..0287d7f90e9 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -8,7 +8,6 @@ import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import usePostContent from '../../../hooks/usePostContent';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
 import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromptGate';
-import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
 import { LazyImage } from '../../LazyImage';
@@ -17,7 +16,6 @@ import { ButtonSize } from '../../buttons/Button';
 import { PostClickbaitShield } from '../common/PostClickbaitShield';
 import { PostHeaderActions } from '../PostHeaderActions';
 import { PostActions } from '../PostActions';
-import { PostUpvotesCommentsCount } from '../PostUpvotesCommentsCount';
 import { PostContainer } from '../common';
 import { PostTagList } from '../tags/PostTagList';
 import PostToc from '../../widgets/PostToc';
@@ -78,7 +76,6 @@ export const PostFocusCard = ({
   const { onCopyPostLink, onReadArticle } = usePostContent({ origin, post });
   const { onReadClick: onReaderInstallGateClick } =
     useReaderInstallPromptGate(post);
-  const { onShowUpvoted } = useUpvoteQuery();
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
   const focusCommentRef = useRef<() => void>(() => {});
   const readHref = getReadArticleHref(post);
@@ -190,11 +187,6 @@ export const PostFocusCard = ({
               <PostCodeSnippets post={post} />
             </div>
           )}
-
-          <PostUpvotesCommentsCount
-            post={post}
-            onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
-          />
         </div>
       </PostContainer>
 

From b65975bc3ce34bfb27bec3c00411d164805d53dc Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 13:36:58 +0300
Subject: [PATCH 021/111] fix: let related discovery feed use main feed columns

Remove the fixed three-column override from the More like this feed so it uses
the same responsive card count and grid behavior as the main feed.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscoveryFeed.tsx      | 23 ++-----------------
 1 file changed, 2 insertions(+), 21 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
index f106d24a1d0..7cbc39833fb 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -2,7 +2,6 @@ import type { ReactElement } from 'react';
 import React, { useContext, useMemo } from 'react';
 import type { Post } from '../../../graphql/posts';
 import Feed from '../../Feed';
-import FeedContext from '../../../contexts/FeedContext';
 import SettingsContext from '../../../contexts/SettingsContext';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import { ActiveFeedNameContext } from '../../../contexts';
@@ -49,25 +48,12 @@ const SectionHeader = ({
  */
 const DiscoveryFeedGridScope = ({
   feedName,
-  columns,
   children,
 }: {
   feedName: AllFeedPages;
-  columns?: number;
   children: ReactElement;
 }): ReactElement => {
-  const currentFeedSettings = useContext(FeedContext);
   const settings = useContext(SettingsContext);
-  const feedContextValue = useMemo(() => {
-    if (!columns) {
-      return currentFeedSettings;
-    }
-
-    return {
-      ...currentFeedSettings,
-      numCards: { eco: columns, roomy: columns, cozy: columns },
-    };
-  }, [columns, currentFeedSettings]);
   const settingsContextValue = useMemo(
     () => ({ ...settings, insaneMode: false }),
     [settings],
@@ -76,9 +62,7 @@ const DiscoveryFeedGridScope = ({
   return (
     <ActiveFeedNameContext.Provider value={{ feedName }}>
       <SettingsContext.Provider value={settingsContextValue}>
-        <FeedContext.Provider value={feedContextValue}>
-          {children}
-        </FeedContext.Provider>
+        {children}
       </SettingsContext.Provider>
     </ActiveFeedNameContext.Provider>
   );
@@ -112,10 +96,7 @@ export const PostDiscoveryFeed = ({
             title={`More on ${topicLabel}`}
             description="Hand-picked stories close to what you just read."
           />
-          <DiscoveryFeedGridScope
-            columns={3}
-            feedName={OtherFeedPage.ExploreTag}
-          >
+          <DiscoveryFeedGridScope feedName={OtherFeedPage.ExploreTag}>
             <Feed
               className="mt-8"
               feedName={OtherFeedPage.ExploreTag}

From 94cae4c389f4310072ad493a668240d924a585a5 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 13:38:06 +0300
Subject: [PATCH 022/111] fix: align discovery header action icon sizes

Use the small post header action size in the discovery source row so the read
icon, menu icon, follow button, and source avatar share the same visual height.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/post/discovery/PostFocusCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 0287d7f90e9..895f02bb796 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -102,7 +102,7 @@ export const PostFocusCard = ({
               />
             )}
             <PostHeaderActions
-              buttonSize={ButtonSize.Large}
+              buttonSize={ButtonSize.Small}
               className="ml-auto shrink-0"
               contextMenuId="post-discovery-header-actions"
               hideSubscribeAction

From 3826f856d7343e7739db2744d50ebdf025f748b7 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 13:38:55 +0300
Subject: [PATCH 023/111] fix: make discovery toc compact and collapsible

Use the compact collapsible table-of-contents style in the discovery post
surface so it does not take over the left column on desktop.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/discovery/PostFocusCard.tsx       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 895f02bb796..4cb0ab0a6d1 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -180,7 +180,13 @@ export const PostFocusCard = ({
             </a>
           )}
 
-          {hasToc && <PostToc post={post} />}
+          {hasToc && (
+            <PostToc
+              collapsible
+              className="rounded-16 border border-border-subtlest-tertiary bg-surface-float"
+              post={post}
+            />
+          )}
 
           {showCodeSnippets && (
             <div className={leftVariant === 'lean' ? 'mb-4' : 'mb-6'}>

From ff0cb4cf68f7e2fd66d5c5243364025c8c82c16b Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 13:39:48 +0300
Subject: [PATCH 024/111] fix: align keep-exploring feed spacing

Apply the same top spacing to the Keep exploring feed as the More like this
section so both discovery grids share the same visual rhythm.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../shared/src/components/post/discovery/PostDiscoveryFeed.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
index 7cbc39833fb..621c82f7e14 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -120,6 +120,7 @@ export const PostDiscoveryFeed = ({
         />
         <DiscoveryFeedGridScope feedName={SharedFeedPage.Popular}>
           <Feed
+            className="mt-8"
             feedName={SharedFeedPage.Popular}
             feedQueryKey={['post-discovery-more', post.id]}
             query={mainQuery}

From e6677df28e3756222ce5382ad7799f596d9eed73 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 14:08:51 +0300
Subject: [PATCH 025/111] fix: polish discovery post details and video layout

- compact source strip + centered header action icons
- hide New Squad behind share bar "show more options"
- move clickbait shield below title, composer below comments
- icon-only comment sort in the stats row
- use main feed grid columns for discovery feeds
- video posts show TLDR below the embed in one card

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/ShareBar.tsx   | 21 ++++--
 .../src/components/post/PostActions.tsx       | 16 ++++-
 .../src/components/post/PostActions.v2.tsx    | 11 ++-
 .../post/discovery/PostDiscoveryFeed.tsx      |  3 +-
 .../post/discovery/PostDiscussionPanel.tsx    | 71 +++++++++----------
 .../post/discovery/PostFocusCard.tsx          | 29 +++++---
 .../components/post/reader/SourceStrip.tsx    | 32 +++++++--
 7 files changed, 119 insertions(+), 64 deletions(-)

diff --git a/packages/shared/src/components/ShareBar.tsx b/packages/shared/src/components/ShareBar.tsx
index 1c6b171fae0..8a093b5034a 100644
--- a/packages/shared/src/components/ShareBar.tsx
+++ b/packages/shared/src/components/ShareBar.tsx
@@ -35,7 +35,12 @@ export default function ShareBar({
 }: ShareBarProps): ReactElement {
   const [isExpanded, setIsExpanded] = useState(false);
   const maxVisibleOptions = visibleRows * columns;
-  const maxVisibleSquadsWhenCollapsed = maxVisibleOptions - fixedOptions;
+  const maxVisibleSquadsWhenCollapsed = Math.max(
+    maxVisibleOptions - fixedOptions,
+    0,
+  );
+  const shouldShowSquadOptions =
+    isExpanded || maxVisibleSquadsWhenCollapsed > 0;
   const href = post.commentsPermalink;
   const cid = ReferralCampaignKey.SharePost;
   const { getShortUrl } = useGetShortUrl();
@@ -133,12 +138,14 @@ export default function ShareBar({
           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
diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx
index 0654829ec01..9be0a0efa32 100644
--- a/packages/shared/src/components/post/PostActions.tsx
+++ b/packages/shared/src/components/post/PostActions.tsx
@@ -17,7 +17,7 @@ import { Origin } from '../../lib/log';
 import { PostTagsPanel } from './block/PostTagsPanel';
 import { useBlockPostPanel } from '../../hooks/post/useBlockPostPanel';
 import { useBookmarkPost } from '../../hooks/useBookmarkPost';
-import { ButtonColor, ButtonVariant } from '../buttons/Button';
+import { ButtonColor, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { BookmarkButton } from '../buttons';
 import { AuthTriggers } from '../../lib/auth';
 import { LazyModal } from '../modals/common/types';
@@ -43,10 +43,12 @@ interface PostActionsProps {
   origin?: PostOrigin;
   onCopyLinkClick?: (post?: Post) => void;
   borderless?: boolean;
+  compact?: boolean;
 }
 
 function PostActionsV1({
   borderless = false,
+  compact = false,
   onCopyLinkClick,
   post,
   onComment,
@@ -62,6 +64,7 @@ function PostActionsV1({
     receivingUser: post.author as LoggedUser | undefined,
   });
   const { getUpvoteAnimation } = useBrandSponsorship();
+  const buttonSize = compact ? ButtonSize.Small : undefined;
 
   const { toggleUpvote, toggleDownvote } = useVotePost();
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
@@ -223,7 +226,10 @@ function PostActionsV1({
         )}
       >
         <div
-          className="flex flex-1 items-center justify-between gap-x-1 overflow-hidden py-2 pl-4 pr-6"
+          className={classNames(
+            'flex flex-1 items-center justify-between gap-x-1 overflow-hidden',
+            compact ? 'px-2 py-0' : 'py-2 pl-4 pr-6',
+          )}
           ref={actionsRef}
         >
           <Tooltip
@@ -233,6 +239,7 @@ function PostActionsV1({
               id="upvote-post-btn"
               pressed={isUpvoteActive}
               onClick={onToggleUpvote}
+              size={buttonSize}
               icon={
                 <UpvoteButtonIcon
                   secondary={isUpvoteActive}
@@ -251,6 +258,7 @@ function PostActionsV1({
               id="downvote-post-btn"
               pressed={isDownvoteActive}
               onClick={onToggleDownvote}
+              size={buttonSize}
               icon={<DownvoteIcon secondary={isDownvoteActive} />}
               aria-label="Downvote"
               variant={ButtonVariant.Tertiary}
@@ -261,6 +269,7 @@ function PostActionsV1({
             id="comment-post-btn"
             pressed={post.commented}
             onClick={onComment}
+            size={buttonSize}
             icon={<CommentIcon secondary={post.commented} />}
             aria-label="Comment"
             className="btn-tertiary-blueCheese"
@@ -281,6 +290,7 @@ function PostActionsV1({
               <QuaternaryButton
                 id="award-post-btn"
                 pressed={post?.userState?.awarded}
+                size={buttonSize}
                 onClick={() => {
                   if (!user) {
                     showLogin({ trigger: AuthTriggers.GiveAward });
@@ -320,6 +330,7 @@ function PostActionsV1({
               id: 'bookmark-post-btn',
               pressed: post.bookmarked,
               onClick: onToggleBookmark,
+              size: buttonSize,
               className: 'btn-tertiary-bun',
             }}
           >
@@ -329,6 +340,7 @@ function PostActionsV1({
             <QuaternaryButton
               id="copy-post-btn-post"
               onClick={() => onCopyLinkClick?.(post)}
+              size={buttonSize}
               icon={<LinkIcon />}
               variant={ButtonVariant.Tertiary}
               className={classNames(
diff --git a/packages/shared/src/components/post/PostActions.v2.tsx b/packages/shared/src/components/post/PostActions.v2.tsx
index 09112479b2a..cc803e4fc70 100644
--- a/packages/shared/src/components/post/PostActions.v2.tsx
+++ b/packages/shared/src/components/post/PostActions.v2.tsx
@@ -43,10 +43,12 @@ interface PostActionsProps {
   origin?: PostOrigin;
   onCopyLinkClick?: (post?: Post) => void;
   borderless?: boolean;
+  compact?: boolean;
 }
 
 export function PostActions({
   borderless = false,
+  compact = false,
   onCopyLinkClick,
   post,
   onComment,
@@ -62,6 +64,7 @@ export function PostActions({
     receivingUser: post.author as LoggedUser | undefined,
   });
   const { getUpvoteAnimation } = useBrandSponsorship();
+  const actionDensity = compact ? ('compact' as const) : undefined;
 
   const { toggleUpvote, toggleDownvote } = useVotePost();
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
@@ -207,7 +210,7 @@ export function PostActions({
         <CardActionBar
           ref={actionsRef}
           layout="between"
-          className="overflow-hidden p-2"
+          className={classNames('overflow-hidden', compact ? 'p-1' : 'p-2')}
         >
           <Tooltip
             content={isUpvoteActive ? 'Remove upvote' : 'More like this'}
@@ -216,6 +219,7 @@ export function PostActions({
               id="upvote-post-btn"
               pressed={isUpvoteActive}
               onClick={onToggleUpvote}
+              density={actionDensity}
               icon={<UpvoteButtonIcon brandAnimation={brandAnimation} />}
               iconPressed={
                 <UpvoteButtonIcon secondary brandAnimation={brandAnimation} />
@@ -231,6 +235,7 @@ export function PostActions({
               id="downvote-post-btn"
               pressed={isDownvoteActive}
               onClick={onToggleDownvote}
+              density={actionDensity}
               icon={<DownvoteIcon />}
               iconPressed={<DownvoteIcon secondary />}
               label="Downvote"
@@ -241,6 +246,7 @@ export function PostActions({
             id="comment-post-btn"
             pressed={post.commented}
             onClick={onComment}
+            density={actionDensity}
             icon={<CommentIcon />}
             iconPressed={<CommentIcon secondary />}
             label="Comment"
@@ -261,6 +267,7 @@ export function PostActions({
               <CardAction
                 id="award-post-btn"
                 pressed={isAwarded}
+                density={actionDensity}
                 onClick={() => {
                   if (!user) {
                     showLogin({ trigger: AuthTriggers.GiveAward });
@@ -298,12 +305,14 @@ export function PostActions({
             id="bookmark-post-btn"
             pressed={post.bookmarked}
             onClick={onToggleBookmark}
+            density={actionDensity}
             label="Bookmark"
             labelVisible
           />
           <CardAction
             id="copy-post-btn-post"
             onClick={() => onCopyLinkClick?.(post)}
+            density={actionDensity}
             icon={<LinkIcon />}
             label="Copy"
             labelVisible
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
index 621c82f7e14..bcd4d9a3816 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -3,6 +3,7 @@ import React, { useContext, useMemo } from 'react';
 import type { Post } from '../../../graphql/posts';
 import Feed from '../../Feed';
 import SettingsContext from '../../../contexts/SettingsContext';
+import { FeedLayoutProvider } from '../../../contexts/FeedContext';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import { ActiveFeedNameContext } from '../../../contexts';
 import {
@@ -62,7 +63,7 @@ const DiscoveryFeedGridScope = ({
   return (
     <ActiveFeedNameContext.Provider value={{ feedName }}>
       <SettingsContext.Provider value={settingsContextValue}>
-        {children}
+        <FeedLayoutProvider>{children}</FeedLayoutProvider>
       </SettingsContext.Provider>
     </ActiveFeedNameContext.Provider>
   );
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index d78560c6c7f..3980e221ac5 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -11,12 +11,7 @@ import { PostComments } from '../PostComments';
 import type { NewCommentRef } from '../NewComment';
 import { NewComment } from '../NewComment';
 import { useSettingsContext } from '../../../contexts/SettingsContext';
-import {
-  Button,
-  ButtonIconPosition,
-  ButtonSize,
-  ButtonVariant,
-} from '../../buttons/Button';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { TimeSortIcon } from '../../icons/Sort/Time';
 import { AnalyticsIcon } from '../../icons';
 import { SortCommentsBy } from '../../../graphql/comments';
@@ -111,7 +106,7 @@ export const PostDiscussionPanel = ({
     >
       <div className="flex shrink-0 flex-col gap-3">
         {actionBar && (
-          <div className="border-b border-border-subtlest-tertiary pb-3">
+          <div className="border-b border-border-subtlest-tertiary pb-2">
             {actionBar}
           </div>
         )}
@@ -141,39 +136,29 @@ export const PostDiscussionPanel = ({
                 </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>
-          <Button
-            type="button"
-            size={ButtonSize.XSmall}
-            variant={ButtonVariant.Tertiary}
-            iconPosition={ButtonIconPosition.Right}
-            icon={
-              <TimeSortIcon
-                secondary
-                className={isNewestFirst ? undefined : 'rotate-180'}
-              />
-            }
-            onClick={() =>
-              setSortBy(
-                isNewestFirst
-                  ? SortCommentsBy.OldestFirst
-                  : SortCommentsBy.NewestFirst,
-              )
-            }
-            aria-label={sortLabel}
-            className="!text-text-tertiary"
-          >
-            {isNewestFirst ? 'Newest first' : 'Oldest first'}
-          </Button>
         </div>
-        <NewComment
-          post={post}
-          ref={commentRef as LegacyRef<NewCommentRef>}
-          shouldHandleCommentQuery
-          onComposerOpenChange={setIsComposerOpen}
-          size={ProfileImageSize.Medium}
-          CommentInputOrModal={CommentInputOrModal}
-        />
       </div>
       <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1">
         <PostComments
@@ -186,6 +171,16 @@ export const PostDiscussionPanel = ({
           modalParentSelector={resolveModalParent}
         />
       </div>
+      <div className="shrink-0">
+        <NewComment
+          post={post}
+          ref={commentRef as LegacyRef<NewCommentRef>}
+          shouldHandleCommentQuery
+          onComposerOpenChange={setIsComposerOpen}
+          size={ProfileImageSize.Medium}
+          CommentInputOrModal={CommentInputOrModal}
+        />
+      </div>
       <div className="shrink-0 border-t border-border-subtlest-tertiary pt-3">
         <ShareBar post={post} visibleRows={1} />
       </div>
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 4cb0ab0a6d1..5408cd445f5 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -94,16 +94,17 @@ export const PostFocusCard = ({
     >
       <PostContainer className="relative laptop:border-r-0">
         <div className="flex min-w-0 flex-col gap-6 py-6 laptop:py-8">
-          <div className="flex min-w-0 items-start gap-3">
+          <div className="flex min-h-8 min-w-0 items-center gap-2">
             {post.source && (
               <SourceStrip
+                compact
                 className="min-w-0 flex-1"
                 source={post.source as SourceTooltip}
               />
             )}
             <PostHeaderActions
               buttonSize={ButtonSize.Small}
-              className="ml-auto shrink-0"
+              className="ml-auto h-8 shrink-0 items-center"
               contextMenuId="post-discovery-header-actions"
               hideSubscribeAction
               inlineActions
@@ -119,7 +120,8 @@ export const PostFocusCard = ({
             >
               {title}
             </h1>
-            {post.summary && (
+            {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
+            {!isVideoType && post.summary && (
               <p
                 className="select-text break-words text-text-secondary typo-title3"
                 data-testid="tldr-container"
@@ -127,7 +129,6 @@ export const PostFocusCard = ({
                 {post.summary}
               </p>
             )}
-            {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
             <PostTagList post={post} />
             <PostMetadata
               className="!typo-callout"
@@ -155,11 +156,20 @@ export const PostFocusCard = ({
           </div>
 
           {isVideoType ? (
-            <YoutubeVideo
-              className="shadow-1 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3"
-              placeholderProps={{ post, onWatchVideo: onReadArticle }}
-              videoId={post.videoId ?? ''}
-            />
+            <div className="shadow-1 flex min-w-0 flex-col gap-4 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3">
+              <YoutubeVideo
+                placeholderProps={{ post, onWatchVideo: onReadArticle }}
+                videoId={post.videoId ?? ''}
+              />
+              {post.summary && (
+                <p
+                  className="select-text break-words px-1 pb-1 text-text-secondary typo-title3"
+                  data-testid="tldr-container"
+                >
+                  {post.summary}
+                </p>
+              )}
+            </div>
           ) : (
             <a
               className="block overflow-hidden rounded-16 bg-background-subtle"
@@ -202,6 +212,7 @@ export const PostFocusCard = ({
             actionBar={
               <PostActions
                 borderless
+                compact
                 post={post}
                 postQueryKey={['post', post.id]}
                 onComment={() => focusCommentRef.current()}
diff --git a/packages/shared/src/components/post/reader/SourceStrip.tsx b/packages/shared/src/components/post/reader/SourceStrip.tsx
index 702138bc853..21e314d45e1 100644
--- a/packages/shared/src/components/post/reader/SourceStrip.tsx
+++ b/packages/shared/src/components/post/reader/SourceStrip.tsx
@@ -20,11 +20,13 @@ import SourceEntityCard from '../../cards/entity/SourceEntityCard';
 type SourceStripProps = {
   source: SourceTooltip;
   className?: string;
+  compact?: boolean;
 };
 
 export function SourceStrip({
   source,
   className,
+  compact = false,
 }: SourceStripProps): ReactElement | null {
   const sourceId = source?.id ?? '';
   const sourceName = source?.name ?? '';
@@ -43,14 +45,25 @@ export function SourceStrip({
   const sourceHandle = source.handle ? `@${source.handle}` : null;
 
   return (
-    <div className={classNames('flex min-w-0 items-center gap-2', className)}>
+    <div
+      className={classNames(
+        'flex min-w-0 items-center',
+        compact ? 'gap-1.5' : 'gap-2',
+        className,
+      )}
+    >
       <HoverCard
         appendTo={globalThis?.document?.body}
         side="top"
         align="start"
         sideOffset={10}
         trigger={
-          <div className="group flex min-w-0 flex-1 items-center gap-3 rounded-10 px-1 py-0.5">
+          <div
+            className={classNames(
+              'group flex min-w-0 flex-1 items-center rounded-10',
+              compact ? 'gap-2 px-0 py-0' : 'gap-3 px-1 py-0.5',
+            )}
+          >
             <Link passHref href={source.permalink} prefetch={false}>
               <a
                 className="shrink-0"
@@ -60,7 +73,10 @@ export function SourceStrip({
                 <img
                   src={source.image}
                   alt=""
-                  className="size-8 rounded-full"
+                  className={classNames(
+                    'rounded-full',
+                    compact ? 'size-7' : 'size-8',
+                  )}
                   loading="lazy"
                   aria-hidden
                 />
@@ -70,7 +86,9 @@ export function SourceStrip({
               <Link passHref href={source.permalink} prefetch={false}>
                 <Typography
                   tag={TypographyTag.Link}
-                  type={TypographyType.Subhead}
+                  type={
+                    compact ? TypographyType.Footnote : TypographyType.Subhead
+                  }
                   color={TypographyColor.Primary}
                   className="truncate group-hover:underline group-focus-visible:underline"
                   title={source.name}
@@ -82,7 +100,9 @@ export function SourceStrip({
               {sourceHandle && (
                 <Typography
                   tag={TypographyTag.Span}
-                  type={TypographyType.Caption1}
+                  type={
+                    compact ? TypographyType.Caption2 : TypographyType.Caption1
+                  }
                   color={TypographyColor.Tertiary}
                   className="truncate"
                 >
@@ -103,7 +123,7 @@ export function SourceStrip({
           variant={ButtonVariant.Secondary}
           status={contentPreference?.status}
           showSubscribe={false}
-          buttonClassName="!h-8"
+          buttonClassName={compact ? '!h-7 !px-2' : '!h-8'}
         />
       )}
     </div>

From 6e5a6f1f9e43c08e00e17300854e32a75d717001 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 15:43:16 +0300
Subject: [PATCH 026/111] fix: refine discovery left column and discussion
 composer

- match production title (typo-large-title) and TLDR (typo-markdown)
- move full action bar back to the left content column
- drop now-unused borderless/compact PostActions props
- chat-style comment composer with separating borders
- relocate stats/sort bar beneath the composer

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/PostActions.tsx       |  25 +---
 .../src/components/post/PostActions.v2.tsx    |  20 +--
 .../post/discovery/PostDiscussionPanel.tsx    | 116 ++++++++++++------
 .../post/discovery/PostFocusCard.tsx          |  25 ++--
 4 files changed, 96 insertions(+), 90 deletions(-)

diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx
index 9be0a0efa32..5b0acf6a5dd 100644
--- a/packages/shared/src/components/post/PostActions.tsx
+++ b/packages/shared/src/components/post/PostActions.tsx
@@ -17,7 +17,7 @@ import { Origin } from '../../lib/log';
 import { PostTagsPanel } from './block/PostTagsPanel';
 import { useBlockPostPanel } from '../../hooks/post/useBlockPostPanel';
 import { useBookmarkPost } from '../../hooks/useBookmarkPost';
-import { ButtonColor, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { ButtonColor, ButtonVariant } from '../buttons/Button';
 import { BookmarkButton } from '../buttons';
 import { AuthTriggers } from '../../lib/auth';
 import { LazyModal } from '../modals/common/types';
@@ -42,13 +42,9 @@ interface PostActionsProps {
   onComment?: () => unknown;
   origin?: PostOrigin;
   onCopyLinkClick?: (post?: Post) => void;
-  borderless?: boolean;
-  compact?: boolean;
 }
 
 function PostActionsV1({
-  borderless = false,
-  compact = false,
   onCopyLinkClick,
   post,
   onComment,
@@ -64,7 +60,6 @@ function PostActionsV1({
     receivingUser: post.author as LoggedUser | undefined,
   });
   const { getUpvoteAnimation } = useBrandSponsorship();
-  const buttonSize = compact ? ButtonSize.Small : undefined;
 
   const { toggleUpvote, toggleDownvote } = useVotePost();
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
@@ -219,17 +214,9 @@ function PostActionsV1({
 
   return (
     <div className="flex flex-col gap-4">
-      <div
-        className={classNames(
-          'flex items-center rounded-16',
-          !borderless && 'border border-border-subtlest-tertiary',
-        )}
-      >
+      <div className="flex items-center rounded-16 border border-border-subtlest-tertiary">
         <div
-          className={classNames(
-            'flex flex-1 items-center justify-between gap-x-1 overflow-hidden',
-            compact ? 'px-2 py-0' : 'py-2 pl-4 pr-6',
-          )}
+          className="flex flex-1 items-center justify-between gap-x-1 overflow-hidden py-2 pl-4 pr-6"
           ref={actionsRef}
         >
           <Tooltip
@@ -239,7 +226,6 @@ function PostActionsV1({
               id="upvote-post-btn"
               pressed={isUpvoteActive}
               onClick={onToggleUpvote}
-              size={buttonSize}
               icon={
                 <UpvoteButtonIcon
                   secondary={isUpvoteActive}
@@ -258,7 +244,6 @@ function PostActionsV1({
               id="downvote-post-btn"
               pressed={isDownvoteActive}
               onClick={onToggleDownvote}
-              size={buttonSize}
               icon={<DownvoteIcon secondary={isDownvoteActive} />}
               aria-label="Downvote"
               variant={ButtonVariant.Tertiary}
@@ -269,7 +254,6 @@ function PostActionsV1({
             id="comment-post-btn"
             pressed={post.commented}
             onClick={onComment}
-            size={buttonSize}
             icon={<CommentIcon secondary={post.commented} />}
             aria-label="Comment"
             className="btn-tertiary-blueCheese"
@@ -290,7 +274,6 @@ function PostActionsV1({
               <QuaternaryButton
                 id="award-post-btn"
                 pressed={post?.userState?.awarded}
-                size={buttonSize}
                 onClick={() => {
                   if (!user) {
                     showLogin({ trigger: AuthTriggers.GiveAward });
@@ -330,7 +313,6 @@ function PostActionsV1({
               id: 'bookmark-post-btn',
               pressed: post.bookmarked,
               onClick: onToggleBookmark,
-              size: buttonSize,
               className: 'btn-tertiary-bun',
             }}
           >
@@ -340,7 +322,6 @@ function PostActionsV1({
             <QuaternaryButton
               id="copy-post-btn-post"
               onClick={() => onCopyLinkClick?.(post)}
-              size={buttonSize}
               icon={<LinkIcon />}
               variant={ButtonVariant.Tertiary}
               className={classNames(
diff --git a/packages/shared/src/components/post/PostActions.v2.tsx b/packages/shared/src/components/post/PostActions.v2.tsx
index cc803e4fc70..61bd1280856 100644
--- a/packages/shared/src/components/post/PostActions.v2.tsx
+++ b/packages/shared/src/components/post/PostActions.v2.tsx
@@ -42,13 +42,9 @@ interface PostActionsProps {
   onComment?: () => unknown;
   origin?: PostOrigin;
   onCopyLinkClick?: (post?: Post) => void;
-  borderless?: boolean;
-  compact?: boolean;
 }
 
 export function PostActions({
-  borderless = false,
-  compact = false,
   onCopyLinkClick,
   post,
   onComment,
@@ -64,7 +60,6 @@ export function PostActions({
     receivingUser: post.author as LoggedUser | undefined,
   });
   const { getUpvoteAnimation } = useBrandSponsorship();
-  const actionDensity = compact ? ('compact' as const) : undefined;
 
   const { toggleUpvote, toggleDownvote } = useVotePost();
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
@@ -201,16 +196,11 @@ export function PostActions({
 
   return (
     <div className="flex flex-col gap-4">
-      <div
-        className={classNames(
-          'flex items-center rounded-16',
-          !borderless && 'border border-border-subtlest-tertiary',
-        )}
-      >
+      <div className="flex items-center rounded-16 border border-border-subtlest-tertiary">
         <CardActionBar
           ref={actionsRef}
           layout="between"
-          className={classNames('overflow-hidden', compact ? 'p-1' : 'p-2')}
+          className="overflow-hidden p-2"
         >
           <Tooltip
             content={isUpvoteActive ? 'Remove upvote' : 'More like this'}
@@ -219,7 +209,6 @@ export function PostActions({
               id="upvote-post-btn"
               pressed={isUpvoteActive}
               onClick={onToggleUpvote}
-              density={actionDensity}
               icon={<UpvoteButtonIcon brandAnimation={brandAnimation} />}
               iconPressed={
                 <UpvoteButtonIcon secondary brandAnimation={brandAnimation} />
@@ -235,7 +224,6 @@ export function PostActions({
               id="downvote-post-btn"
               pressed={isDownvoteActive}
               onClick={onToggleDownvote}
-              density={actionDensity}
               icon={<DownvoteIcon />}
               iconPressed={<DownvoteIcon secondary />}
               label="Downvote"
@@ -246,7 +234,6 @@ export function PostActions({
             id="comment-post-btn"
             pressed={post.commented}
             onClick={onComment}
-            density={actionDensity}
             icon={<CommentIcon />}
             iconPressed={<CommentIcon secondary />}
             label="Comment"
@@ -267,7 +254,6 @@ export function PostActions({
               <CardAction
                 id="award-post-btn"
                 pressed={isAwarded}
-                density={actionDensity}
                 onClick={() => {
                   if (!user) {
                     showLogin({ trigger: AuthTriggers.GiveAward });
@@ -305,14 +291,12 @@ export function PostActions({
             id="bookmark-post-btn"
             pressed={post.bookmarked}
             onClick={onToggleBookmark}
-            density={actionDensity}
             label="Bookmark"
             labelVisible
           />
           <CardAction
             id="copy-post-btn-post"
             onClick={() => onCopyLinkClick?.(post)}
-            density={actionDensity}
             icon={<LinkIcon />}
             label="Copy"
             labelVisible
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index 3980e221ac5..76b087c2333 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic';
-import type { LegacyRef, ReactElement, ReactNode } from 'react';
+import type { LegacyRef, ReactElement } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useAuthContext } from '../../../contexts/AuthContext';
@@ -8,19 +8,29 @@ import { useShareComment } from '../../../hooks/useShareComment';
 import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import { Origin } from '../../../lib/log';
 import { PostComments } from '../PostComments';
-import type { NewCommentRef } from '../NewComment';
+import type {
+  NewCommentRef,
+  NewCommentTriggerRenderProps,
+} from '../NewComment';
 import { NewComment } from '../NewComment';
 import { useSettingsContext } from '../../../contexts/SettingsContext';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { TimeSortIcon } from '../../icons/Sort/Time';
-import { AnalyticsIcon } from '../../icons';
+import { AnalyticsIcon, SendAirplaneIcon } from '../../icons';
+import { IconSize } from '../../Icon';
 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';
-import { ProfileImageSize } from '../../ProfilePicture';
+import {
+  getProfilePictureClasses,
+  ProfileImageSize,
+  ProfilePicture,
+} from '../../ProfilePicture';
+import { Image } from '../../image/Image';
+import { fallbackImages } from '../../../lib/config';
 import ShareBar from '../../ShareBar';
 
 const CommentInputOrModal = dynamic(
@@ -34,7 +44,6 @@ export interface PostDiscussionPanelProps {
   post: Post;
   origin?: Origin;
   className?: string;
-  actionBar?: ReactNode;
   /**
    * Lets a parent (e.g. a floating "comment" action) focus the composer.
    */
@@ -57,7 +66,6 @@ export const PostDiscussionPanel = ({
   post,
   origin = Origin.ArticlePage,
   className,
-  actionBar,
   onRegisterFocusComment,
   modalParentSelector,
 }: PostDiscussionPanelProps): ReactElement => {
@@ -98,18 +106,75 @@ export const PostDiscussionPanel = ({
     return rootRef.current ?? document.body;
   };
 
+  const renderComposerTrigger = ({
+    user: triggerUser,
+    onCommentClick,
+  }: NewCommentTriggerRenderProps): ReactElement => (
+    <button
+      type="button"
+      aria-label="Add a comment"
+      onClick={() => onCommentClick(Origin.StartDiscussion)}
+      className="group flex w-full items-center gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-2 pl-3 text-left transition-colors hover:border-border-subtlest-primary hover:bg-surface-hover"
+    >
+      {triggerUser ? (
+        <ProfilePicture
+          className="shrink-0"
+          nativeLazyLoading
+          size={ProfileImageSize.Medium}
+          user={triggerUser}
+        />
+      ) : (
+        <Image
+          alt="Placeholder image for anonymous user"
+          aria-hidden
+          className={classNames(
+            'shrink-0',
+            getProfilePictureClasses(ProfileImageSize.Medium),
+          )}
+          fetchPriority="low"
+          height={32}
+          loading="lazy"
+          role="presentation"
+          src={fallbackImages.avatar}
+          width={32}
+        />
+      )}
+      <span className="min-w-0 flex-1 truncate text-text-tertiary typo-callout">
+        Add a comment…
+      </span>
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-12 bg-background-default text-text-secondary transition-colors group-hover:text-text-primary">
+        <SendAirplaneIcon size={IconSize.Small} />
+      </span>
+    </button>
+  );
+
   return (
     <section
       ref={rootRef}
       aria-label="Discussion"
       className={classNames('flex min-h-0 min-w-0 flex-col gap-3', className)}
     >
-      <div className="flex shrink-0 flex-col gap-3">
-        {actionBar && (
-          <div className="border-b border-border-subtlest-tertiary pb-2">
-            {actionBar}
-          </div>
-        )}
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1">
+        <PostComments
+          post={post}
+          sortBy={sortBy}
+          origin={origin}
+          isComposerOpen={isComposerOpen}
+          onShare={(comment) => openShareComment(comment, post)}
+          onClickUpvote={(id, count) => onShowUpvoted(id, count, 'comment')}
+          modalParentSelector={resolveModalParent}
+        />
+      </div>
+      <div className="flex shrink-0 flex-col gap-3 border-t border-border-subtlest-tertiary pt-3">
+        <NewComment
+          post={post}
+          ref={commentRef as LegacyRef<NewCommentRef>}
+          shouldHandleCommentQuery
+          onComposerOpenChange={setIsComposerOpen}
+          size={ProfileImageSize.Medium}
+          CommentInputOrModal={CommentInputOrModal}
+          renderTrigger={renderComposerTrigger}
+        />
         <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 text-text-tertiary typo-callout">
           <div className="flex min-w-0 flex-wrap items-center gap-x-4">
             {upvotes > 0 && (
@@ -159,30 +224,9 @@ export const PostDiscussionPanel = ({
             />
           </div>
         </div>
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1">
-        <PostComments
-          post={post}
-          sortBy={sortBy}
-          origin={origin}
-          isComposerOpen={isComposerOpen}
-          onShare={(comment) => openShareComment(comment, post)}
-          onClickUpvote={(id, count) => onShowUpvoted(id, count, 'comment')}
-          modalParentSelector={resolveModalParent}
-        />
-      </div>
-      <div className="shrink-0">
-        <NewComment
-          post={post}
-          ref={commentRef as LegacyRef<NewCommentRef>}
-          shouldHandleCommentQuery
-          onComposerOpenChange={setIsComposerOpen}
-          size={ProfileImageSize.Medium}
-          CommentInputOrModal={CommentInputOrModal}
-        />
-      </div>
-      <div className="shrink-0 border-t border-border-subtlest-tertiary pt-3">
-        <ShareBar post={post} visibleRows={1} />
+        <div className="border-t border-border-subtlest-tertiary pt-3">
+          <ShareBar post={post} visibleRows={1} />
+        </div>
       </div>
     </section>
   );
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 5408cd445f5..f3558473c1c 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -115,7 +115,7 @@ export const PostFocusCard = ({
 
           <div className="flex min-w-0 flex-col gap-4">
             <h1
-              className="break-words font-bold text-text-primary typo-large-title laptop:typo-mega2"
+              className="break-words font-bold text-text-primary typo-large-title"
               data-testid="post-modal-title"
             >
               {title}
@@ -123,7 +123,7 @@ export const PostFocusCard = ({
             {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
             {!isVideoType && post.summary && (
               <p
-                className="select-text break-words text-text-secondary typo-title3"
+                className="select-text break-words text-text-secondary typo-markdown"
                 data-testid="tldr-container"
               >
                 {post.summary}
@@ -163,7 +163,7 @@ export const PostFocusCard = ({
               />
               {post.summary && (
                 <p
-                  className="select-text break-words px-1 pb-1 text-text-secondary typo-title3"
+                  className="select-text break-words px-1 pb-1 text-text-secondary typo-markdown"
                   data-testid="tldr-container"
                 >
                   {post.summary}
@@ -203,23 +203,20 @@ export const PostFocusCard = ({
               <PostCodeSnippets post={post} />
             </div>
           )}
+
+          <PostActions
+            post={post}
+            postQueryKey={['post', post.id]}
+            onComment={() => focusCommentRef.current()}
+            onCopyLinkClick={onCopyPostLink}
+            origin={origin}
+          />
         </div>
       </PostContainer>
 
       <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle laptop:sticky laptop:top-16 laptop:h-[calc(100vh-4rem)] laptop:max-h-[calc(100vh-4rem)] laptop:w-[26rem] laptop:border-t-0 laptop:bg-background-default">
         <div className="flex min-h-0 w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2 laptop:h-full">
           <PostDiscussionPanel
-            actionBar={
-              <PostActions
-                borderless
-                compact
-                post={post}
-                postQueryKey={['post', post.id]}
-                onComment={() => focusCommentRef.current()}
-                onCopyLinkClick={onCopyPostLink}
-                origin={origin}
-              />
-            }
             className="h-full p-4"
             onRegisterFocusComment={(fn) => {
               focusCommentRef.current = fn;

From 82f9df68961354dabde57fbc1f776357d4b7fa27 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 15:46:19 +0300
Subject: [PATCH 027/111] fix: set discovery columns to 768px content and 340px
 discussion

Left content column gets a 768px basis (shrinks on narrow laptops) and
the comments sidebar is fixed at 340px, with the pair centered.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../shared/src/components/post/discovery/PostFocusCard.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index f3558473c1c..14a71fcc41a 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -89,10 +89,10 @@ export const PostFocusCard = ({
 
   return (
     <article
-      className="flex w-full flex-col overflow-hidden rounded-24 bg-background-default laptop:flex-row"
+      className="flex w-full flex-col overflow-hidden rounded-24 bg-background-default laptop:flex-row laptop:justify-center"
       data-testid="post-focus-card"
     >
-      <PostContainer className="relative laptop:border-r-0">
+      <PostContainer className="relative laptop:shrink laptop:grow-0 laptop:basis-[768px] laptop:border-r-0">
         <div className="flex min-w-0 flex-col gap-6 py-6 laptop:py-8">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
             {post.source && (
@@ -214,7 +214,7 @@ export const PostFocusCard = ({
         </div>
       </PostContainer>
 
-      <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle laptop:sticky laptop:top-16 laptop:h-[calc(100vh-4rem)] laptop:max-h-[calc(100vh-4rem)] laptop:w-[26rem] laptop:border-t-0 laptop:bg-background-default">
+      <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle laptop:sticky laptop:top-16 laptop:h-[calc(100vh-4rem)] laptop:max-h-[calc(100vh-4rem)] laptop:w-[340px] laptop:border-t-0 laptop:bg-background-default">
         <div className="flex min-h-0 w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2 laptop:h-full">
           <PostDiscussionPanel
             className="h-full p-4"

From 59b4482053180c2c2ec592061c41794804766a52 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 16:32:03 +0300
Subject: [PATCH 028/111] feat: move discovery stats strip to left column above
 action bar

- extract DiscussionMetaBar (counts + analytics + comment sort)
- render it on the left above the action bar, production-style
- reuse it in PostDiscussionPanel via showMetaBar (reader keeps it)
- widen comments sidebar to 400px and the card container to fit 768+400
- tighten gaps across the discovery columns and panel

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/DiscussionMetaBar.tsx      | 98 +++++++++++++++++++
 .../post/discovery/PostDiscoveryLayout.tsx    |  4 +-
 .../post/discovery/PostDiscussionPanel.tsx    | 87 +++-------------
 .../post/discovery/PostFocusCard.tsx          |  7 +-
 4 files changed, 120 insertions(+), 76 deletions(-)
 create mode 100644 packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx

diff --git a/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx b/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx
new file mode 100644
index 00000000000..ca4ecebbeb0
--- /dev/null
+++ b/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx
@@ -0,0 +1,98 @@
+import type { ReactElement } 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;
+}
+
+/**
+ * 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,
+}: 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>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index e443919b9b9..b7fbd6724ad 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -73,8 +73,8 @@ export const PostDiscoveryLayout = ({
 
   return (
     <div className="flex w-full flex-col bg-background-default">
-      <div className="mx-auto flex w-full max-w-[75rem] flex-col gap-10 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
-        <div className="mx-auto w-full max-w-[75rem]">
+      <div className="mx-auto flex w-full max-w-[78rem] flex-col gap-8 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
+        <div className="mx-auto w-full max-w-[78rem]">
           <PostFocusCard
             leftVariant={leftVariant}
             origin={origin}
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index 76b087c2333..dc3a615397d 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -2,7 +2,6 @@ import dynamic from 'next/dynamic';
 import type { LegacyRef, ReactElement } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { useAuthContext } from '../../../contexts/AuthContext';
 import type { Post } from '../../../graphql/posts';
 import { useShareComment } from '../../../hooks/useShareComment';
 import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
@@ -14,16 +13,8 @@ import type {
 } from '../NewComment';
 import { NewComment } from '../NewComment';
 import { useSettingsContext } from '../../../contexts/SettingsContext';
-import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
-import { TimeSortIcon } from '../../icons/Sort/Time';
-import { AnalyticsIcon, SendAirplaneIcon } from '../../icons';
+import { SendAirplaneIcon } from '../../icons';
 import { IconSize } from '../../Icon';
-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';
 import {
   getProfilePictureClasses,
   ProfileImageSize,
@@ -32,6 +23,7 @@ import {
 import { Image } from '../../image/Image';
 import { fallbackImages } from '../../../lib/config';
 import ShareBar from '../../ShareBar';
+import { DiscussionMetaBar } from './DiscussionMetaBar';
 
 const CommentInputOrModal = dynamic(
   () =>
@@ -44,6 +36,11 @@ export interface PostDiscussionPanelProps {
   post: Post;
   origin?: Origin;
   className?: string;
+  /**
+   * Renders the post stats + comment sort strip inside the panel. Disable it
+   * when a parent (e.g. the discovery focus card) surfaces the strip elsewhere.
+   */
+  showMetaBar?: boolean;
   /**
    * Lets a parent (e.g. a floating "comment" action) focus the composer.
    */
@@ -58,30 +55,24 @@ export interface PostDiscussionPanelProps {
 const noopFocus = (): void => {};
 
 /**
- * The discussion surface (counts, sort, composer, comments, share) shared by
- * the reader's EngagementRail and the post discovery focus card. Extracted so
- * both surfaces stay in sync instead of duplicating the comment stack.
+ * The discussion surface (comments, composer, share) shared by the reader's
+ * EngagementRail and the post discovery focus card. Extracted so both surfaces
+ * stay in sync instead of duplicating the comment stack.
  */
 export const PostDiscussionPanel = ({
   post,
   origin = Origin.ArticlePage,
   className,
+  showMetaBar = true,
   onRegisterFocusComment,
   modalParentSelector,
 }: PostDiscussionPanelProps): ReactElement => {
-  const { user } = useAuthContext();
-  const { sortCommentsBy: sortBy, updateSortCommentsBy: setSortBy } =
-    useSettingsContext();
+  const { sortCommentsBy: sortBy } = useSettingsContext();
   const commentRef = useRef<NewCommentRef | null>(null);
   const rootRef = useRef<HTMLElement | null>(null);
   const [isComposerOpen, setIsComposerOpen] = useState(false);
   const { onShowUpvoted } = useUpvoteQuery();
   const { openShareComment } = useShareComment(origin);
-  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';
 
   useEffect(() => {
     if (!onRegisterFocusComment) {
@@ -152,7 +143,7 @@ export const PostDiscussionPanel = ({
     <section
       ref={rootRef}
       aria-label="Discussion"
-      className={classNames('flex min-h-0 min-w-0 flex-col gap-3', className)}
+      className={classNames('flex min-h-0 min-w-0 flex-col gap-2', className)}
     >
       <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1">
         <PostComments
@@ -165,7 +156,7 @@ export const PostDiscussionPanel = ({
           modalParentSelector={resolveModalParent}
         />
       </div>
-      <div className="flex shrink-0 flex-col gap-3 border-t border-border-subtlest-tertiary pt-3">
+      <div className="flex shrink-0 flex-col gap-2 border-t border-border-subtlest-tertiary pt-3">
         <NewComment
           post={post}
           ref={commentRef as LegacyRef<NewCommentRef>}
@@ -175,55 +166,7 @@ export const PostDiscussionPanel = ({
           CommentInputOrModal={CommentInputOrModal}
           renderTrigger={renderComposerTrigger}
         />
-        <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 text-text-tertiary typo-callout">
-          <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>
-        </div>
+        {showMetaBar && <DiscussionMetaBar post={post} />}
         <div className="border-t border-border-subtlest-tertiary pt-3">
           <ShareBar post={post} visibleRows={1} />
         </div>
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 14a71fcc41a..b6bd2dc8931 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -24,6 +24,7 @@ import { combinedClicks } from '../../../lib/click';
 import { useFeature } from '../../GrowthBookProvider';
 import { feature } from '../../../lib/featureManagement';
 import { SourceStrip } from '../reader/SourceStrip';
+import { DiscussionMetaBar } from './DiscussionMetaBar';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
 
 const PostCodeSnippets = dynamic(() =>
@@ -93,7 +94,7 @@ export const PostFocusCard = ({
       data-testid="post-focus-card"
     >
       <PostContainer className="relative laptop:shrink laptop:grow-0 laptop:basis-[768px] laptop:border-r-0">
-        <div className="flex min-w-0 flex-col gap-6 py-6 laptop:py-8">
+        <div className="flex min-w-0 flex-col gap-4 py-6 laptop:py-6">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
             {post.source && (
               <SourceStrip
@@ -204,6 +205,7 @@ export const PostFocusCard = ({
             </div>
           )}
 
+          <DiscussionMetaBar post={post} />
           <PostActions
             post={post}
             postQueryKey={['post', post.id]}
@@ -214,10 +216,11 @@ export const PostFocusCard = ({
         </div>
       </PostContainer>
 
-      <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle laptop:sticky laptop:top-16 laptop:h-[calc(100vh-4rem)] laptop:max-h-[calc(100vh-4rem)] laptop:w-[340px] laptop:border-t-0 laptop:bg-background-default">
+      <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle laptop:sticky laptop:top-16 laptop:h-[calc(100vh-4rem)] laptop:max-h-[calc(100vh-4rem)] laptop:w-[400px] laptop:border-t-0 laptop:bg-background-default">
         <div className="flex min-h-0 w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2 laptop:h-full">
           <PostDiscussionPanel
             className="h-full p-4"
+            showMetaBar={false}
             onRegisterFocusComment={(fn) => {
               focusCommentRef.current = fn;
             }}

From 2393af8747610903f342eda181c3067ea15b3c57 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 22:46:47 +0300
Subject: [PATCH 029/111] fix: make discovery left content 768px inside column
 padding

Bump the content column basis to 832px (768 content + 64 padding) and cap
the inner content at 768px, widening the card container to fit.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/discovery/PostDiscoveryLayout.tsx     | 4 ++--
 .../shared/src/components/post/discovery/PostFocusCard.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index b7fbd6724ad..16a80df0ad4 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -73,8 +73,8 @@ export const PostDiscoveryLayout = ({
 
   return (
     <div className="flex w-full flex-col bg-background-default">
-      <div className="mx-auto flex w-full max-w-[78rem] flex-col gap-8 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
-        <div className="mx-auto w-full max-w-[78rem]">
+      <div className="mx-auto flex w-full max-w-[82rem] flex-col gap-8 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
+        <div className="mx-auto w-full max-w-[82rem]">
           <PostFocusCard
             leftVariant={leftVariant}
             origin={origin}
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index b6bd2dc8931..6a1d0380860 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -93,8 +93,8 @@ export const PostFocusCard = ({
       className="flex w-full flex-col overflow-hidden rounded-24 bg-background-default laptop:flex-row laptop:justify-center"
       data-testid="post-focus-card"
     >
-      <PostContainer className="relative laptop:shrink laptop:grow-0 laptop:basis-[768px] laptop:border-r-0">
-        <div className="flex min-w-0 flex-col gap-4 py-6 laptop:py-6">
+      <PostContainer className="relative laptop:shrink laptop:grow-0 laptop:basis-[832px] laptop:border-r-0">
+        <div className="flex min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px] laptop:py-6">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
             {post.source && (
               <SourceStrip

From 1bb35a9e7ba8aa8890c0517016768cf14d06bee0 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 22:53:03 +0300
Subject: [PATCH 030/111] feat: redesign discovery composer and share section

- composer trigger now reads as a roomy text-area box (top-aligned
  avatar, inviting prompt, markdown hint, Comment send affordance) to
  encourage longer, informative comments
- replace the bulky share grid with a compact one-line share row
  (copy + X + WhatsApp inline, rest behind the Share modal), following
  end-of-content + copy-first + dialog-for-overflow best practices

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/DiscussionShareRow.tsx     | 127 ++++++++++++++++++
 .../post/discovery/PostDiscussionPanel.tsx    |  77 ++++++-----
 2 files changed, 170 insertions(+), 34 deletions(-)
 create mode 100644 packages/shared/src/components/post/discovery/DiscussionShareRow.tsx

diff --git a/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx b/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
new file mode 100644
index 00000000000..38cb39173fd
--- /dev/null
+++ b/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
@@ -0,0 +1,127 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { Post } from '../../../graphql/posts';
+import { Button } from '../../buttons/Button';
+import { ButtonSize, ButtonVariant } from '../../buttons/common';
+import { Tooltip } from '../../tooltip/Tooltip';
+import { CopyIcon, ShareIcon, TwitterIcon, WhatsappIcon } from '../../icons';
+import { useCopyPostLink } from '../../../hooks/useCopyPostLink';
+import { useGetShortUrl } from '../../../hooks';
+import { getShareLink, ShareProvider } from '../../../lib/share';
+import { useLogContext } from '../../../contexts/LogContext';
+import { postLogEvent } from '../../../lib/feed';
+import { LogEvent, Origin } from '../../../lib/log';
+import { useLazyModal } from '../../../hooks/useLazyModal';
+import { LazyModal } from '../../modals/common/types';
+import { ReferralCampaignKey } from '../../../lib';
+
+interface DiscussionShareRowProps {
+  post: Post;
+  className?: string;
+}
+
+/**
+ * Compact share row for the discussion panel. Surfaces the most-used quick
+ * actions (copy, X, WhatsApp) inline and defers the long tail (Facebook,
+ * squads, native share) to the full Share modal behind a single "more" action.
+ */
+export const DiscussionShareRow = ({
+  post,
+  className,
+}: DiscussionShareRowProps): ReactElement => {
+  const href = post.commentsPermalink;
+  const cid = ReferralCampaignKey.SharePost;
+  const { getShortUrl } = useGetShortUrl();
+  const [copying, copyLink] = useCopyPostLink();
+  const { logEvent } = useLogContext();
+  const { openModal } = useLazyModal();
+
+  const logShareEvent = (provider: ShareProvider) =>
+    logEvent(
+      postLogEvent(LogEvent.SharePost, post, {
+        extra: { provider, origin: Origin.ShareBar },
+      }),
+    );
+
+  const onShare = async (provider: ShareProvider) => {
+    logShareEvent(provider);
+    const shortLink = await getShortUrl(href, cid);
+    const shareLink = getShareLink({
+      provider,
+      link: shortLink,
+      text: post?.title,
+    });
+    globalThis.window?.open(shareLink, '_blank');
+  };
+
+  const onCopy = async () => {
+    const shortLink = await getShortUrl(href, cid);
+    copyLink({ link: shortLink });
+    logShareEvent(ShareProvider.CopyLink);
+  };
+
+  const onMore = () =>
+    openModal({
+      type: LazyModal.Share,
+      props: { post, origin: Origin.ShareBar },
+    });
+
+  return (
+    <div
+      className={classNames(
+        'flex items-center justify-between gap-2',
+        className,
+      )}
+    >
+      <span className="text-text-tertiary typo-footnote">Share this post</span>
+      <div className="flex items-center gap-1">
+        <Tooltip content={copying ? 'Copied!' : 'Copy link'}>
+          <Button
+            aria-label="Copy link"
+            icon={
+              <CopyIcon
+                className={copying ? 'text-accent-avocado-default' : undefined}
+                secondary={copying}
+              />
+            }
+            onClick={onCopy}
+            size={ButtonSize.Small}
+            type="button"
+            variant={ButtonVariant.Float}
+          />
+        </Tooltip>
+        <Tooltip content="Share on X">
+          <Button
+            aria-label="Share on X"
+            icon={<TwitterIcon />}
+            onClick={() => onShare(ShareProvider.Twitter)}
+            size={ButtonSize.Small}
+            type="button"
+            variant={ButtonVariant.Float}
+          />
+        </Tooltip>
+        <Tooltip content="Share on WhatsApp">
+          <Button
+            aria-label="Share on WhatsApp"
+            icon={<WhatsappIcon secondary />}
+            onClick={() => onShare(ShareProvider.WhatsApp)}
+            size={ButtonSize.Small}
+            type="button"
+            variant={ButtonVariant.Float}
+          />
+        </Tooltip>
+        <Tooltip content="More sharing options">
+          <Button
+            aria-label="More sharing options"
+            icon={<ShareIcon />}
+            onClick={onMore}
+            size={ButtonSize.Small}
+            type="button"
+            variant={ButtonVariant.Float}
+          />
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index dc3a615397d..58eddaf65ba 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -22,8 +22,8 @@ import {
 } from '../../ProfilePicture';
 import { Image } from '../../image/Image';
 import { fallbackImages } from '../../../lib/config';
-import ShareBar from '../../ShareBar';
 import { DiscussionMetaBar } from './DiscussionMetaBar';
+import { DiscussionShareRow } from './DiscussionShareRow';
 
 const CommentInputOrModal = dynamic(
   () =>
@@ -105,37 +105,45 @@ export const PostDiscussionPanel = ({
       type="button"
       aria-label="Add a comment"
       onClick={() => onCommentClick(Origin.StartDiscussion)}
-      className="group flex w-full items-center gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-2 pl-3 text-left transition-colors hover:border-border-subtlest-primary hover:bg-surface-hover"
+      className="group flex min-h-24 w-full flex-col justify-between gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-3 text-left transition-colors hover:border-border-subtlest-primary hover:bg-surface-hover"
     >
-      {triggerUser ? (
-        <ProfilePicture
-          className="shrink-0"
-          nativeLazyLoading
-          size={ProfileImageSize.Medium}
-          user={triggerUser}
-        />
-      ) : (
-        <Image
-          alt="Placeholder image for anonymous user"
-          aria-hidden
-          className={classNames(
-            'shrink-0',
-            getProfilePictureClasses(ProfileImageSize.Medium),
-          )}
-          fetchPriority="low"
-          height={32}
-          loading="lazy"
-          role="presentation"
-          src={fallbackImages.avatar}
-          width={32}
-        />
-      )}
-      <span className="min-w-0 flex-1 truncate text-text-tertiary typo-callout">
-        Add a comment…
-      </span>
-      <span className="flex size-8 shrink-0 items-center justify-center rounded-12 bg-background-default text-text-secondary transition-colors group-hover:text-text-primary">
-        <SendAirplaneIcon size={IconSize.Small} />
-      </span>
+      <div className="flex min-w-0 items-start gap-3">
+        {triggerUser ? (
+          <ProfilePicture
+            className="shrink-0"
+            nativeLazyLoading
+            size={ProfileImageSize.Medium}
+            user={triggerUser}
+          />
+        ) : (
+          <Image
+            alt="Placeholder image for anonymous user"
+            aria-hidden
+            className={classNames(
+              'shrink-0',
+              getProfilePictureClasses(ProfileImageSize.Medium),
+            )}
+            fetchPriority="low"
+            height={32}
+            loading="lazy"
+            role="presentation"
+            src={fallbackImages.avatar}
+            width={32}
+          />
+        )}
+        <span className="min-w-0 flex-1 text-text-tertiary typo-callout">
+          Share your thoughts — what stood out, or what would you add?
+        </span>
+      </div>
+      <div className="flex items-center justify-between pl-11">
+        <span className="text-text-tertiary typo-caption1">
+          Markdown supported
+        </span>
+        <span className="flex items-center gap-1.5 rounded-10 bg-background-default px-3 py-1.5 text-text-secondary transition-colors typo-footnote group-hover:text-text-primary">
+          <SendAirplaneIcon size={IconSize.Small} />
+          Comment
+        </span>
+      </div>
     </button>
   );
 
@@ -167,9 +175,10 @@ export const PostDiscussionPanel = ({
           renderTrigger={renderComposerTrigger}
         />
         {showMetaBar && <DiscussionMetaBar post={post} />}
-        <div className="border-t border-border-subtlest-tertiary pt-3">
-          <ShareBar post={post} visibleRows={1} />
-        </div>
+        <DiscussionShareRow
+          post={post}
+          className="border-t border-border-subtlest-tertiary pt-3"
+        />
       </div>
     </section>
   );

From eaafc745b8b5b11ce1da50eb0e3dcbf2ea6decf6 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 22:56:52 +0300
Subject: [PATCH 031/111] feat: medium-style header order for discovery left
 column

Title first, then source + read time + date, then the stats/action bar,
then the rest (TLDR, media, tags, TOC, code).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostFocusCard.tsx          | 78 ++++++++++---------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 6a1d0380860..73e29ed1450 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -95,26 +95,7 @@ export const PostFocusCard = ({
     >
       <PostContainer className="relative laptop:shrink laptop:grow-0 laptop:basis-[832px] laptop:border-r-0">
         <div className="flex min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px] laptop:py-6">
-          <div className="flex min-h-8 min-w-0 items-center gap-2">
-            {post.source && (
-              <SourceStrip
-                compact
-                className="min-w-0 flex-1"
-                source={post.source as SourceTooltip}
-              />
-            )}
-            <PostHeaderActions
-              buttonSize={ButtonSize.Small}
-              className="ml-auto h-8 shrink-0 items-center"
-              contextMenuId="post-discovery-header-actions"
-              hideSubscribeAction
-              inlineActions
-              onReadArticle={onReadArticle}
-              post={post}
-            />
-          </div>
-
-          <div className="flex min-w-0 flex-col gap-4">
+          <div className="flex min-w-0 flex-col gap-3">
             <h1
               className="break-words font-bold text-text-primary typo-large-title"
               data-testid="post-modal-title"
@@ -122,17 +103,18 @@ export const PostFocusCard = ({
               {title}
             </h1>
             {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
-            {!isVideoType && post.summary && (
-              <p
-                className="select-text break-words text-text-secondary typo-markdown"
-                data-testid="tldr-container"
-              >
-                {post.summary}
-              </p>
+          </div>
+
+          <div className="flex min-h-8 min-w-0 items-center gap-3">
+            {post.source && (
+              <SourceStrip
+                compact
+                className="min-w-0 shrink"
+                source={post.source as SourceTooltip}
+              />
             )}
-            <PostTagList post={post} />
             <PostMetadata
-              className="!typo-callout"
+              className="shrink-0 !typo-callout"
               createdAt={post.createdAt}
               domain={
                 !isVideoType &&
@@ -154,8 +136,35 @@ export const PostFocusCard = ({
               isVideoType={isVideoType}
               readTime={post.readTime}
             />
+            <PostHeaderActions
+              buttonSize={ButtonSize.Small}
+              className="ml-auto h-8 shrink-0 items-center"
+              contextMenuId="post-discovery-header-actions"
+              hideSubscribeAction
+              inlineActions
+              onReadArticle={onReadArticle}
+              post={post}
+            />
           </div>
 
+          <DiscussionMetaBar post={post} />
+          <PostActions
+            post={post}
+            postQueryKey={['post', post.id]}
+            onComment={() => focusCommentRef.current()}
+            onCopyLinkClick={onCopyPostLink}
+            origin={origin}
+          />
+
+          {!isVideoType && post.summary && (
+            <p
+              className="select-text break-words text-text-secondary typo-markdown"
+              data-testid="tldr-container"
+            >
+              {post.summary}
+            </p>
+          )}
+
           {isVideoType ? (
             <div className="shadow-1 flex min-w-0 flex-col gap-4 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3">
               <YoutubeVideo
@@ -191,6 +200,8 @@ export const PostFocusCard = ({
             </a>
           )}
 
+          <PostTagList post={post} />
+
           {hasToc && (
             <PostToc
               collapsible
@@ -204,15 +215,6 @@ export const PostFocusCard = ({
               <PostCodeSnippets post={post} />
             </div>
           )}
-
-          <DiscussionMetaBar post={post} />
-          <PostActions
-            post={post}
-            postQueryKey={['post', post.id]}
-            onComment={() => focusCommentRef.current()}
-            onCopyLinkClick={onCopyPostLink}
-            origin={origin}
-          />
         </div>
       </PostContainer>
 

From 66aa313031ed2906e191d2664522c3de1fb37d67 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:03:06 +0300
Subject: [PATCH 032/111] fix: drop separator borders around discovery comment
 composer

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/discovery/PostDiscussionPanel.tsx  | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index 58eddaf65ba..fa83650e19f 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -164,7 +164,7 @@ export const PostDiscussionPanel = ({
           modalParentSelector={resolveModalParent}
         />
       </div>
-      <div className="flex shrink-0 flex-col gap-2 border-t border-border-subtlest-tertiary pt-3">
+      <div className="flex shrink-0 flex-col gap-3 pt-3">
         <NewComment
           post={post}
           ref={commentRef as LegacyRef<NewCommentRef>}
@@ -175,10 +175,7 @@ export const PostDiscussionPanel = ({
           renderTrigger={renderComposerTrigger}
         />
         {showMetaBar && <DiscussionMetaBar post={post} />}
-        <DiscussionShareRow
-          post={post}
-          className="border-t border-border-subtlest-tertiary pt-3"
-        />
+        <DiscussionShareRow post={post} />
       </div>
     </section>
   );

From 572dce6acc7f094193bc77ad7f3af4a4c72fef70 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:03:51 +0300
Subject: [PATCH 033/111] fix: simplify discovery composer footer (drop
 markdown hint + send icon)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/post/discovery/PostDiscussionPanel.tsx  | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index fa83650e19f..401ac059d33 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -13,8 +13,6 @@ import type {
 } from '../NewComment';
 import { NewComment } from '../NewComment';
 import { useSettingsContext } from '../../../contexts/SettingsContext';
-import { SendAirplaneIcon } from '../../icons';
-import { IconSize } from '../../Icon';
 import {
   getProfilePictureClasses,
   ProfileImageSize,
@@ -135,12 +133,8 @@ export const PostDiscussionPanel = ({
           Share your thoughts — what stood out, or what would you add?
         </span>
       </div>
-      <div className="flex items-center justify-between pl-11">
-        <span className="text-text-tertiary typo-caption1">
-          Markdown supported
-        </span>
-        <span className="flex items-center gap-1.5 rounded-10 bg-background-default px-3 py-1.5 text-text-secondary transition-colors typo-footnote group-hover:text-text-primary">
-          <SendAirplaneIcon size={IconSize.Small} />
+      <div className="flex items-center justify-end pl-11">
+        <span className="flex items-center rounded-10 bg-background-default px-3 py-1.5 text-text-secondary transition-colors typo-footnote group-hover:text-text-primary">
           Comment
         </span>
       </div>

From b5cd09557beb56f9474a31e19c5fa93f2e426803 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:06:54 +0300
Subject: [PATCH 034/111] fix: remove top gap above first comment in discovery
 panel

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../shared/src/components/post/PostComments.tsx    | 14 ++++++++++++--
 .../post/discovery/PostDiscussionPanel.tsx         |  1 +
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/post/PostComments.tsx b/packages/shared/src/components/post/PostComments.tsx
index dfa0691187a..0071b6667cb 100644
--- a/packages/shared/src/components/post/PostComments.tsx
+++ b/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}
     >
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index 401ac059d33..bff7ff42341 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -156,6 +156,7 @@ export const PostDiscussionPanel = ({
           onShare={(comment) => openShareComment(comment, post)}
           onClickUpvote={(id, count) => onShowUpvoted(id, count, 'comment')}
           modalParentSelector={resolveModalParent}
+          removeTopSpacing
         />
       </div>
       <div className="flex shrink-0 flex-col gap-3 pt-3">

From ed0137caa3c4c437977933e224031f91e6205693 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:08:37 +0300
Subject: [PATCH 035/111] fix: match share row icons to comment action bar
 style

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/discovery/DiscussionShareRow.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx b/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
index 38cb39173fd..a0be2225838 100644
--- a/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
+++ b/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
@@ -88,7 +88,7 @@ export const DiscussionShareRow = ({
             onClick={onCopy}
             size={ButtonSize.Small}
             type="button"
-            variant={ButtonVariant.Float}
+            variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
         <Tooltip content="Share on X">
@@ -98,7 +98,7 @@ export const DiscussionShareRow = ({
             onClick={() => onShare(ShareProvider.Twitter)}
             size={ButtonSize.Small}
             type="button"
-            variant={ButtonVariant.Float}
+            variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
         <Tooltip content="Share on WhatsApp">
@@ -108,7 +108,7 @@ export const DiscussionShareRow = ({
             onClick={() => onShare(ShareProvider.WhatsApp)}
             size={ButtonSize.Small}
             type="button"
-            variant={ButtonVariant.Float}
+            variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
         <Tooltip content="More sharing options">
@@ -118,7 +118,7 @@ export const DiscussionShareRow = ({
             onClick={onMore}
             size={ButtonSize.Small}
             type="button"
-            variant={ButtonVariant.Float}
+            variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
       </div>

From ba87fbb7c4b03741fb093889d97677fbec6066aa Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:18:00 +0300
Subject: [PATCH 036/111] fix: move source strip above title, metadata below
 media in discovery

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostFocusCard.tsx          | 71 ++++++++++---------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 73e29ed1450..7cf8804eb56 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -95,47 +95,14 @@ export const PostFocusCard = ({
     >
       <PostContainer className="relative laptop:shrink laptop:grow-0 laptop:basis-[832px] laptop:border-r-0">
         <div className="flex min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px] laptop:py-6">
-          <div className="flex min-w-0 flex-col gap-3">
-            <h1
-              className="break-words font-bold text-text-primary typo-large-title"
-              data-testid="post-modal-title"
-            >
-              {title}
-            </h1>
-            {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
-          </div>
-
-          <div className="flex min-h-8 min-w-0 items-center gap-3">
+          <div className="flex min-h-8 min-w-0 items-center gap-2">
             {post.source && (
               <SourceStrip
                 compact
-                className="min-w-0 shrink"
+                className="min-w-0 flex-1"
                 source={post.source as SourceTooltip}
               />
             )}
-            <PostMetadata
-              className="shrink-0 !typo-callout"
-              createdAt={post.createdAt}
-              domain={
-                !isVideoType &&
-                post.domain &&
-                post.domain.length > 0 && (
-                  <TruncateText>
-                    From{' '}
-                    <ArticleLink
-                      className="hover:underline"
-                      href={post.permalink}
-                      onClick={onReadArticle}
-                      title={post.domain}
-                    >
-                      {post.domain}
-                    </ArticleLink>
-                  </TruncateText>
-                )
-              }
-              isVideoType={isVideoType}
-              readTime={post.readTime}
-            />
             <PostHeaderActions
               buttonSize={ButtonSize.Small}
               className="ml-auto h-8 shrink-0 items-center"
@@ -147,6 +114,16 @@ export const PostFocusCard = ({
             />
           </div>
 
+          <div className="flex min-w-0 flex-col gap-3">
+            <h1
+              className="break-words font-bold text-text-primary typo-large-title"
+              data-testid="post-modal-title"
+            >
+              {title}
+            </h1>
+            {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
+          </div>
+
           <DiscussionMetaBar post={post} />
           <PostActions
             post={post}
@@ -200,6 +177,30 @@ export const PostFocusCard = ({
             </a>
           )}
 
+          <PostMetadata
+            className="!typo-callout"
+            createdAt={post.createdAt}
+            domain={
+              !isVideoType &&
+              post.domain &&
+              post.domain.length > 0 && (
+                <TruncateText>
+                  From{' '}
+                  <ArticleLink
+                    className="hover:underline"
+                    href={post.permalink}
+                    onClick={onReadArticle}
+                    title={post.domain}
+                  >
+                    {post.domain}
+                  </ArticleLink>
+                </TruncateText>
+              )
+            }
+            isVideoType={isVideoType}
+            readTime={post.readTime}
+          />
+
           <PostTagList post={post} />
 
           {hasToc && (

From 368f700f69273e2c8e57209b7a5fa850db770598 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:19:44 +0300
Subject: [PATCH 037/111] fix: replace action bar box border with bottom
 separator in discovery

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/post/discovery/PostFocusCard.tsx  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 7cf8804eb56..6485c62b289 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -125,13 +125,15 @@ export const PostFocusCard = ({
           </div>
 
           <DiscussionMetaBar post={post} />
-          <PostActions
-            post={post}
-            postQueryKey={['post', post.id]}
-            onComment={() => focusCommentRef.current()}
-            onCopyLinkClick={onCopyPostLink}
-            origin={origin}
-          />
+          <div className="border-b border-border-subtlest-tertiary pb-2 [&>div>div:first-child]:!rounded-none [&>div>div:first-child]:!border-0">
+            <PostActions
+              post={post}
+              postQueryKey={['post', post.id]}
+              onComment={() => focusCommentRef.current()}
+              onCopyLinkClick={onCopyPostLink}
+              origin={origin}
+            />
+          </div>
 
           {!isVideoType && post.summary && (
             <p

From 477df20441a89d9fb5b0ee60580600667fd113c0 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:28:06 +0300
Subject: [PATCH 038/111] fix: move clickbait shield to right of engagement
 strip in discovery

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/post/discovery/DiscussionMetaBar.tsx    | 10 +++++++++-
 .../src/components/post/discovery/PostFocusCard.tsx    |  8 ++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx b/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx
index ca4ecebbeb0..9cf5b285bbd 100644
--- a/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx
+++ b/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
@@ -18,6 +18,8 @@ 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;
 }
 
 /**
@@ -28,6 +30,7 @@ interface DiscussionMetaBarProps {
 export const DiscussionMetaBar = ({
   post,
   className,
+  rightSlot,
 }: DiscussionMetaBarProps): ReactElement => {
   const { user } = useAuthContext();
   const { onShowUpvoted } = useUpvoteQuery();
@@ -93,6 +96,11 @@ export const DiscussionMetaBar = ({
           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>
   );
 };
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 6485c62b289..da575ce1753 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -121,10 +121,14 @@ export const PostFocusCard = ({
             >
               {title}
             </h1>
-            {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
           </div>
 
-          <DiscussionMetaBar post={post} />
+          <DiscussionMetaBar
+            post={post}
+            rightSlot={
+              post.clickbaitTitleDetected && <PostClickbaitShield post={post} />
+            }
+          />
           <div className="border-b border-border-subtlest-tertiary pb-2 [&>div>div:first-child]:!rounded-none [&>div>div:first-child]:!border-0">
             <PostActions
               post={post}

From 91757fef9df4c78a87cdcce2a2613cd369553fc0 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:31:17 +0300
Subject: [PATCH 039/111] feat: center content column with ghost spacer
 opposite comments rail

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/discovery/PostDiscoveryLayout.tsx  | 4 ++--
 .../shared/src/components/post/discovery/PostFocusCard.tsx | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index 16a80df0ad4..9331d9fe77e 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -73,8 +73,8 @@ export const PostDiscoveryLayout = ({
 
   return (
     <div className="flex w-full flex-col bg-background-default">
-      <div className="mx-auto flex w-full max-w-[82rem] flex-col gap-8 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
-        <div className="mx-auto w-full max-w-[82rem]">
+      <div className="mx-auto flex w-full max-w-[106rem] flex-col gap-8 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
+        <div className="mx-auto w-full max-w-[102rem]">
           <PostFocusCard
             leftVariant={leftVariant}
             origin={origin}
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index da575ce1753..78c2dcafd06 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -93,6 +93,13 @@ export const PostFocusCard = ({
       className="flex w-full flex-col overflow-hidden rounded-24 bg-background-default laptop:flex-row laptop:justify-center"
       data-testid="post-focus-card"
     >
+      {/* Ghost column mirroring the comments rail width so the content column
+          stays optically centered in the page rather than the content+comments
+          pair being centered together. */}
+      <div
+        aria-hidden
+        className="hidden shrink-0 laptop:block laptop:w-[400px]"
+      />
       <PostContainer className="relative laptop:shrink laptop:grow-0 laptop:basis-[832px] laptop:border-r-0">
         <div className="flex min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px] laptop:py-6">
           <div className="flex min-h-8 min-w-0 items-center gap-2">

From d8f9c8381058632abeb95926cfc3022152a0cc91 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:41:00 +0300
Subject: [PATCH 040/111] feat: redesign discovery action bar with counts,
 icon-only utilities, top sort

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscoveryActionBar.tsx | 190 ++++++++++++++++++
 .../post/discovery/PostDiscussionPanel.tsx    |  56 +++++-
 .../post/discovery/PostFocusCard.tsx          |  22 +-
 3 files changed, 251 insertions(+), 17 deletions(-)
 create mode 100644 packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
new file mode 100644
index 00000000000..9441b2a83e7
--- /dev/null
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -0,0 +1,190 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { Post } from '../../../graphql/posts';
+import { UserVote } from '../../../graphql/posts';
+import { useVotePost } from '../../../hooks';
+import { useBookmarkPost } from '../../../hooks/useBookmarkPost';
+import { useBlockPostPanel } from '../../../hooks/post/useBlockPostPanel';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import type { PostOrigin } from '../../../hooks/log/useLogContextData';
+import { Origin } from '../../../lib/log';
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+} from '../../buttons/Button';
+import { QuaternaryButton } from '../../buttons/QuaternaryButton';
+import { BookmarkButton } from '../../buttons/BookmarkButton';
+import { UpvoteButtonIcon } from '../../cards/common/UpvoteButtonIcon';
+import {
+  AnalyticsIcon,
+  DiscussIcon as CommentIcon,
+  DownvoteIcon,
+  LinkIcon,
+} from '../../icons';
+import { Tooltip } from '../../tooltip/Tooltip';
+import Link from '../../utilities/Link';
+import { largeNumberFormat } from '../../../lib';
+import { canViewPostAnalytics } from '../../../lib/user';
+import { webappUrl } from '../../../lib/constants';
+import { PostMenuOptions } from '../PostMenuOptions';
+import { PostClickbaitShield } from '../common/PostClickbaitShield';
+
+interface PostDiscoveryActionBarProps {
+  post: Post;
+  origin?: PostOrigin;
+  onComment?: () => void;
+  onCopyLinkClick?: (post?: Post) => void;
+  className?: string;
+}
+
+/**
+ * Compact, border-framed engagement bar for the discovery focus card. Left side
+ * surfaces the vote/comment actions with their engagement counts; right side
+ * keeps icon-only utilities (bookmark, copy, analytics, menu, clickbait shield).
+ * The comment sort lives in the discussion panel header, not here.
+ */
+export const PostDiscoveryActionBar = ({
+  post,
+  origin = Origin.ArticlePage,
+  onComment,
+  onCopyLinkClick,
+  className,
+}: PostDiscoveryActionBarProps): ReactElement => {
+  const { user } = useAuthContext();
+  const { toggleUpvote, toggleDownvote } = useVotePost();
+  const { toggleBookmark } = useBookmarkPost();
+  const { onShowPanel, onClose } = useBlockPostPanel(post);
+
+  const isUpvoteActive = post?.userState?.vote === UserVote.Up;
+  const isDownvoteActive = post?.userState?.vote === UserVote.Down;
+  const upvotes = post.numUpvotes || 0;
+  const comments = post.numComments || 0;
+  const canSeeAnalytics = canViewPostAnalytics({ user, post });
+
+  const onToggleUpvote = async () => {
+    if (post?.userState?.vote === UserVote.None) {
+      onClose(true);
+    }
+    await toggleUpvote({ payload: post, origin });
+  };
+
+  const onToggleDownvote = async () => {
+    if (post.userState?.vote !== UserVote.Down) {
+      onShowPanel();
+    } else {
+      onClose(true);
+    }
+    await toggleDownvote({ payload: post, origin });
+  };
+
+  const onToggleBookmark = async () => {
+    await toggleBookmark({ post, origin });
+  };
+
+  return (
+    <div
+      className={classNames(
+        'flex items-center justify-between gap-2 border-y border-border-subtlest-tertiary py-1',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-0.5">
+        <Tooltip content={isUpvoteActive ? 'Remove upvote' : 'More like this'}>
+          <QuaternaryButton
+            id="upvote-post-btn"
+            aria-label="Upvote"
+            color={ButtonColor.Avocado}
+            icon={<UpvoteButtonIcon secondary={isUpvoteActive} />}
+            onClick={onToggleUpvote}
+            pressed={isUpvoteActive}
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Tertiary}
+          >
+            {upvotes > 0 ? largeNumberFormat(upvotes) : undefined}
+          </QuaternaryButton>
+        </Tooltip>
+        <Tooltip
+          content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
+        >
+          <QuaternaryButton
+            id="downvote-post-btn"
+            aria-label="Downvote"
+            color={ButtonColor.Ketchup}
+            icon={<DownvoteIcon secondary={isDownvoteActive} />}
+            onClick={onToggleDownvote}
+            pressed={isDownvoteActive}
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Tertiary}
+          />
+        </Tooltip>
+        <Tooltip content="Comment">
+          <QuaternaryButton
+            id="comment-post-btn"
+            aria-label="Comment"
+            color={ButtonColor.BlueCheese}
+            icon={<CommentIcon secondary={post.commented} />}
+            onClick={onComment}
+            pressed={post.commented}
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Tertiary}
+          >
+            {comments > 0 ? largeNumberFormat(comments) : undefined}
+          </QuaternaryButton>
+        </Tooltip>
+      </div>
+
+      <div className="flex items-center gap-0.5">
+        <BookmarkButton
+          post={post}
+          buttonProps={{
+            id: 'bookmark-post-btn',
+            pressed: post.bookmarked,
+            onClick: onToggleBookmark,
+            size: ButtonSize.Small,
+          }}
+        />
+        <Tooltip content="Copy link">
+          <Button
+            aria-label="Copy link"
+            color={ButtonColor.Cabbage}
+            icon={<LinkIcon />}
+            onClick={() => onCopyLinkClick?.(post)}
+            size={ButtonSize.Small}
+            type="button"
+            variant={ButtonVariant.Tertiary}
+          />
+        </Tooltip>
+        {canSeeAnalytics && (
+          <Tooltip content="Analytics">
+            <Link
+              href={`${webappUrl}posts/${post.id}/analytics`}
+              passHref
+              prefetch={false}
+            >
+              <Button
+                aria-label="Analytics"
+                icon={<AnalyticsIcon />}
+                size={ButtonSize.Small}
+                tag="a"
+                variant={ButtonVariant.Tertiary}
+              />
+            </Link>
+          </Tooltip>
+        )}
+        <PostMenuOptions
+          post={post}
+          origin={Origin.ArticleModal}
+          buttonSize={ButtonSize.Small}
+        />
+        {post.clickbaitTitleDetected && (
+          <div className="flex items-center [&_.mr-2]:!mr-0 [&_.mt-4]:!mt-0 [&_.mt-6]:!mt-0">
+            <PostClickbaitShield post={post} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index bff7ff42341..947b61dbd6f 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -20,6 +20,19 @@ import {
 } from '../../ProfilePicture';
 import { Image } from '../../image/Image';
 import { fallbackImages } from '../../../lib/config';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from '../../buttons/Button';
+import { TimeSortIcon } from '../../icons/Sort/Time';
+import { SortCommentsBy } from '../../../graphql/comments';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../typography/Typography';
 import { DiscussionMetaBar } from './DiscussionMetaBar';
 import { DiscussionShareRow } from './DiscussionShareRow';
 
@@ -39,6 +52,12 @@ export interface PostDiscussionPanelProps {
    * when a parent (e.g. the discovery focus card) surfaces the strip elsewhere.
    */
   showMetaBar?: boolean;
+  /**
+   * Renders a small comment-sort toggle ("Newest first"/"Oldest first") at the
+   * top of the comment list. Used by the discovery focus card, which moves the
+   * post stats/actions out of this panel.
+   */
+  showSortHeader?: boolean;
   /**
    * Lets a parent (e.g. a floating "comment" action) focus the composer.
    */
@@ -62,10 +81,13 @@ export const PostDiscussionPanel = ({
   origin = Origin.ArticlePage,
   className,
   showMetaBar = true,
+  showSortHeader = false,
   onRegisterFocusComment,
   modalParentSelector,
 }: PostDiscussionPanelProps): ReactElement => {
-  const { sortCommentsBy: sortBy } = useSettingsContext();
+  const { sortCommentsBy: sortBy, updateSortCommentsBy: setSortBy } =
+    useSettingsContext();
+  const isNewestFirst = sortBy === SortCommentsBy.NewestFirst;
   const commentRef = useRef<NewCommentRef | null>(null);
   const rootRef = useRef<HTMLElement | null>(null);
   const [isComposerOpen, setIsComposerOpen] = useState(false);
@@ -147,6 +169,38 @@ export const PostDiscussionPanel = ({
       aria-label="Discussion"
       className={classNames('flex min-h-0 min-w-0 flex-col gap-2', className)}
     >
+      {showSortHeader && (
+        <span className="flex shrink-0 flex-row items-center px-1">
+          <Typography
+            color={TypographyColor.Tertiary}
+            type={TypographyType.Footnote}
+          >
+            Sort:
+          </Typography>
+          <Button
+            className="ml-1 !px-1 !text-text-tertiary"
+            icon={
+              <TimeSortIcon
+                secondary
+                className={isNewestFirst ? undefined : 'rotate-180'}
+              />
+            }
+            iconPosition={ButtonIconPosition.Right}
+            onClick={() =>
+              setSortBy(
+                isNewestFirst
+                  ? SortCommentsBy.OldestFirst
+                  : SortCommentsBy.NewestFirst,
+              )
+            }
+            size={ButtonSize.XSmall}
+            type="button"
+            variant={ButtonVariant.Tertiary}
+          >
+            {isNewestFirst ? 'Newest first' : 'Oldest first'}
+          </Button>
+        </span>
+      )}
       <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1">
         <PostComments
           post={post}
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 78c2dcafd06..a875bfe00d7 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -13,9 +13,7 @@ import YoutubeVideo from '../../video/YoutubeVideo';
 import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
 import { ButtonSize } from '../../buttons/Button';
-import { PostClickbaitShield } from '../common/PostClickbaitShield';
 import { PostHeaderActions } from '../PostHeaderActions';
-import { PostActions } from '../PostActions';
 import { PostContainer } from '../common';
 import { PostTagList } from '../tags/PostTagList';
 import PostToc from '../../widgets/PostToc';
@@ -24,7 +22,7 @@ import { combinedClicks } from '../../../lib/click';
 import { useFeature } from '../../GrowthBookProvider';
 import { feature } from '../../../lib/featureManagement';
 import { SourceStrip } from '../reader/SourceStrip';
-import { DiscussionMetaBar } from './DiscussionMetaBar';
+import { PostDiscoveryActionBar } from './PostDiscoveryActionBar';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
 
 const PostCodeSnippets = dynamic(() =>
@@ -130,21 +128,12 @@ export const PostFocusCard = ({
             </h1>
           </div>
 
-          <DiscussionMetaBar
+          <PostDiscoveryActionBar
             post={post}
-            rightSlot={
-              post.clickbaitTitleDetected && <PostClickbaitShield post={post} />
-            }
+            origin={origin}
+            onComment={() => focusCommentRef.current()}
+            onCopyLinkClick={onCopyPostLink}
           />
-          <div className="border-b border-border-subtlest-tertiary pb-2 [&>div>div:first-child]:!rounded-none [&>div>div:first-child]:!border-0">
-            <PostActions
-              post={post}
-              postQueryKey={['post', post.id]}
-              onComment={() => focusCommentRef.current()}
-              onCopyLinkClick={onCopyPostLink}
-              origin={origin}
-            />
-          </div>
 
           {!isVideoType && post.summary && (
             <p
@@ -237,6 +226,7 @@ export const PostFocusCard = ({
           <PostDiscussionPanel
             className="h-full p-4"
             showMetaBar={false}
+            showSortHeader
             onRegisterFocusComment={(fn) => {
               focusCommentRef.current = fn;
             }}

From dc8ec925ed78bc674ccf1547a04767c84d1c1030 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:44:07 +0300
Subject: [PATCH 041/111] feat: anchor follow button to source name and show
 full read button in discovery

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/PostHeaderActions.tsx       | 13 ++++++++-----
 packages/shared/src/components/post/common.tsx      |  2 ++
 .../src/components/post/discovery/PostFocusCard.tsx |  4 ++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/shared/src/components/post/PostHeaderActions.tsx b/packages/shared/src/components/post/PostHeaderActions.tsx
index be3feb6f2dd..2bfe9d9694f 100644
--- a/packages/shared/src/components/post/PostHeaderActions.tsx
+++ b/packages/shared/src/components/post/PostHeaderActions.tsx
@@ -38,6 +38,7 @@ export function PostHeaderActions({
   isFixedNavigation,
   buttonSize,
   hideSubscribeAction,
+  hideMenuOptions,
   ...props
 }: PostHeaderActionsProps): ReactElement {
   const { openNewTab } = useContext(SettingsContext);
@@ -133,11 +134,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>
   );
 }
diff --git a/packages/shared/src/components/post/common.tsx b/packages/shared/src/components/post/common.tsx
index e631692ac7b..4a5f34b709e 100644
--- a/packages/shared/src/components/post/common.tsx
+++ b/packages/shared/src/components/post/common.tsx
@@ -69,6 +69,8 @@ export interface PostHeaderActionsProps {
   isFixedNavigation?: boolean;
   buttonSize?: ButtonSize;
   hideSubscribeAction?: boolean;
+  /** Hides the trailing "..." menu (e.g. when it is surfaced elsewhere). */
+  hideMenuOptions?: boolean;
 }
 
 export interface PostContentProps
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index a875bfe00d7..63cbaa0689b 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -104,7 +104,7 @@ export const PostFocusCard = ({
             {post.source && (
               <SourceStrip
                 compact
-                className="min-w-0 flex-1"
+                className="min-w-0 shrink"
                 source={post.source as SourceTooltip}
               />
             )}
@@ -112,8 +112,8 @@ export const PostFocusCard = ({
               buttonSize={ButtonSize.Small}
               className="ml-auto h-8 shrink-0 items-center"
               contextMenuId="post-discovery-header-actions"
+              hideMenuOptions
               hideSubscribeAction
-              inlineActions
               onReadArticle={onReadArticle}
               post={post}
             />

From 49fad9653c7fa8d046b2be34fcebd2c92de07cd9 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:50:53 +0300
Subject: [PATCH 042/111] style: increase spacing and button size in discovery
 action bar

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscoveryActionBar.tsx | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 9441b2a83e7..e51d4918010 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -87,11 +87,11 @@ export const PostDiscoveryActionBar = ({
   return (
     <div
       className={classNames(
-        'flex items-center justify-between gap-2 border-y border-border-subtlest-tertiary py-1',
+        'my-2 flex items-center justify-between gap-4 border-y border-border-subtlest-tertiary px-1 py-3',
         className,
       )}
     >
-      <div className="flex items-center gap-0.5">
+      <div className="flex items-center gap-2">
         <Tooltip content={isUpvoteActive ? 'Remove upvote' : 'More like this'}>
           <QuaternaryButton
             id="upvote-post-btn"
@@ -100,7 +100,7 @@ export const PostDiscoveryActionBar = ({
             icon={<UpvoteButtonIcon secondary={isUpvoteActive} />}
             onClick={onToggleUpvote}
             pressed={isUpvoteActive}
-            size={ButtonSize.Small}
+            size={ButtonSize.Medium}
             variant={ButtonVariant.Tertiary}
           >
             {upvotes > 0 ? largeNumberFormat(upvotes) : undefined}
@@ -116,7 +116,7 @@ export const PostDiscoveryActionBar = ({
             icon={<DownvoteIcon secondary={isDownvoteActive} />}
             onClick={onToggleDownvote}
             pressed={isDownvoteActive}
-            size={ButtonSize.Small}
+            size={ButtonSize.Medium}
             variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
@@ -128,7 +128,7 @@ export const PostDiscoveryActionBar = ({
             icon={<CommentIcon secondary={post.commented} />}
             onClick={onComment}
             pressed={post.commented}
-            size={ButtonSize.Small}
+            size={ButtonSize.Medium}
             variant={ButtonVariant.Tertiary}
           >
             {comments > 0 ? largeNumberFormat(comments) : undefined}
@@ -136,14 +136,14 @@ export const PostDiscoveryActionBar = ({
         </Tooltip>
       </div>
 
-      <div className="flex items-center gap-0.5">
+      <div className="flex items-center gap-2">
         <BookmarkButton
           post={post}
           buttonProps={{
             id: 'bookmark-post-btn',
             pressed: post.bookmarked,
             onClick: onToggleBookmark,
-            size: ButtonSize.Small,
+            size: ButtonSize.Medium,
           }}
         />
         <Tooltip content="Copy link">
@@ -152,7 +152,7 @@ export const PostDiscoveryActionBar = ({
             color={ButtonColor.Cabbage}
             icon={<LinkIcon />}
             onClick={() => onCopyLinkClick?.(post)}
-            size={ButtonSize.Small}
+            size={ButtonSize.Medium}
             type="button"
             variant={ButtonVariant.Tertiary}
           />
@@ -167,7 +167,7 @@ export const PostDiscoveryActionBar = ({
               <Button
                 aria-label="Analytics"
                 icon={<AnalyticsIcon />}
-                size={ButtonSize.Small}
+                size={ButtonSize.Medium}
                 tag="a"
                 variant={ButtonVariant.Tertiary}
               />
@@ -177,7 +177,7 @@ export const PostDiscoveryActionBar = ({
         <PostMenuOptions
           post={post}
           origin={Origin.ArticleModal}
-          buttonSize={ButtonSize.Small}
+          buttonSize={ButtonSize.Medium}
         />
         {post.clickbaitTitleDetected && (
           <div className="flex items-center [&_.mr-2]:!mr-0 [&_.mt-4]:!mt-0 [&_.mt-6]:!mt-0">

From 01d3998a71cbe3a17bd605d1bb1d83efc8b593b6 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:52:36 +0300
Subject: [PATCH 043/111] style: enlarge action bar icons in discovery

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/discovery/PostDiscoveryActionBar.tsx | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index e51d4918010..4f28f25b9d1 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -18,6 +18,7 @@ import {
 import { QuaternaryButton } from '../../buttons/QuaternaryButton';
 import { BookmarkButton } from '../../buttons/BookmarkButton';
 import { UpvoteButtonIcon } from '../../cards/common/UpvoteButtonIcon';
+import { IconSize } from '../../Icon';
 import {
   AnalyticsIcon,
   DiscussIcon as CommentIcon,
@@ -97,7 +98,12 @@ export const PostDiscoveryActionBar = ({
             id="upvote-post-btn"
             aria-label="Upvote"
             color={ButtonColor.Avocado}
-            icon={<UpvoteButtonIcon secondary={isUpvoteActive} />}
+            icon={
+              <UpvoteButtonIcon
+                secondary={isUpvoteActive}
+                size={IconSize.Large}
+              />
+            }
             onClick={onToggleUpvote}
             pressed={isUpvoteActive}
             size={ButtonSize.Medium}
@@ -113,7 +119,12 @@ export const PostDiscoveryActionBar = ({
             id="downvote-post-btn"
             aria-label="Downvote"
             color={ButtonColor.Ketchup}
-            icon={<DownvoteIcon secondary={isDownvoteActive} />}
+            icon={
+              <DownvoteIcon
+                secondary={isDownvoteActive}
+                size={IconSize.Large}
+              />
+            }
             onClick={onToggleDownvote}
             pressed={isDownvoteActive}
             size={ButtonSize.Medium}
@@ -125,7 +136,9 @@ export const PostDiscoveryActionBar = ({
             id="comment-post-btn"
             aria-label="Comment"
             color={ButtonColor.BlueCheese}
-            icon={<CommentIcon secondary={post.commented} />}
+            icon={
+              <CommentIcon secondary={post.commented} size={IconSize.Large} />
+            }
             onClick={onComment}
             pressed={post.commented}
             size={ButtonSize.Medium}
@@ -139,6 +152,7 @@ export const PostDiscoveryActionBar = ({
       <div className="flex items-center gap-2">
         <BookmarkButton
           post={post}
+          iconSize={IconSize.Large}
           buttonProps={{
             id: 'bookmark-post-btn',
             pressed: post.bookmarked,
@@ -150,7 +164,7 @@ export const PostDiscoveryActionBar = ({
           <Button
             aria-label="Copy link"
             color={ButtonColor.Cabbage}
-            icon={<LinkIcon />}
+            icon={<LinkIcon size={IconSize.Large} />}
             onClick={() => onCopyLinkClick?.(post)}
             size={ButtonSize.Medium}
             type="button"
@@ -166,7 +180,7 @@ export const PostDiscoveryActionBar = ({
             >
               <Button
                 aria-label="Analytics"
-                icon={<AnalyticsIcon />}
+                icon={<AnalyticsIcon size={IconSize.Large} />}
                 size={ButtonSize.Medium}
                 tag="a"
                 variant={ButtonVariant.Tertiary}

From 48ad616606cfd4337907394004a53eba7ed07da1 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:54:50 +0300
Subject: [PATCH 044/111] style: subtle follow button and primary read button
 in discovery

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/post/PostHeaderActions.tsx     | 3 ++-
 packages/shared/src/components/post/common.tsx                | 4 +++-
 .../shared/src/components/post/discovery/PostFocusCard.tsx    | 4 +++-
 packages/shared/src/components/post/reader/SourceStrip.tsx    | 4 +++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/post/PostHeaderActions.tsx b/packages/shared/src/components/post/PostHeaderActions.tsx
index 2bfe9d9694f..3a41e57d6d4 100644
--- a/packages/shared/src/components/post/PostHeaderActions.tsx
+++ b/packages/shared/src/components/post/PostHeaderActions.tsx
@@ -39,6 +39,7 @@ export function PostHeaderActions({
   buttonSize,
   hideSubscribeAction,
   hideMenuOptions,
+  readButtonVariant,
   ...props
 }: PostHeaderActionsProps): ReactElement {
   const { openNewTab } = useContext(SettingsContext);
@@ -111,7 +112,7 @@ export function PostHeaderActions({
               variant={
                 isFixedNavigation || isMobile
                   ? ButtonVariant.Tertiary
-                  : ButtonVariant.Secondary
+                  : readButtonVariant ?? ButtonVariant.Secondary
               }
               tag="a"
               href={readHref}
diff --git a/packages/shared/src/components/post/common.tsx b/packages/shared/src/components/post/common.tsx
index 4a5f34b709e..b903d90d8f5 100644
--- a/packages/shared/src/components/post/common.tsx
+++ b/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;
@@ -71,6 +71,8 @@ export interface PostHeaderActionsProps {
   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
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 63cbaa0689b..4569f868007 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -12,7 +12,7 @@ import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
 import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
-import { ButtonSize } from '../../buttons/Button';
+import { ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { PostHeaderActions } from '../PostHeaderActions';
 import { PostContainer } from '../common';
 import { PostTagList } from '../tags/PostTagList';
@@ -105,6 +105,7 @@ export const PostFocusCard = ({
               <SourceStrip
                 compact
                 className="min-w-0 shrink"
+                followButtonVariant={ButtonVariant.Subtle}
                 source={post.source as SourceTooltip}
               />
             )}
@@ -116,6 +117,7 @@ export const PostFocusCard = ({
               hideSubscribeAction
               onReadArticle={onReadArticle}
               post={post}
+              readButtonVariant={ButtonVariant.Primary}
             />
           </div>
 
diff --git a/packages/shared/src/components/post/reader/SourceStrip.tsx b/packages/shared/src/components/post/reader/SourceStrip.tsx
index 21e314d45e1..5a38c66a77b 100644
--- a/packages/shared/src/components/post/reader/SourceStrip.tsx
+++ b/packages/shared/src/components/post/reader/SourceStrip.tsx
@@ -21,12 +21,14 @@ type SourceStripProps = {
   source: SourceTooltip;
   className?: string;
   compact?: boolean;
+  followButtonVariant?: ButtonVariant;
 };
 
 export function SourceStrip({
   source,
   className,
   compact = false,
+  followButtonVariant = ButtonVariant.Secondary,
 }: SourceStripProps): ReactElement | null {
   const sourceId = source?.id ?? '';
   const sourceName = source?.name ?? '';
@@ -120,7 +122,7 @@ export function SourceStrip({
           entityId={sourceId}
           entityName={sourceName}
           type={ContentPreferenceType.Source}
-          variant={ButtonVariant.Secondary}
+          variant={followButtonVariant}
           status={contentPreference?.status}
           showSubscribe={false}
           buttonClassName={compact ? '!h-7 !px-2' : '!h-8'}

From 0de36c0b3a88bd6fcbbce4efc140693a1362e231 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 2 Jun 2026 23:58:55 +0300
Subject: [PATCH 045/111] fix: align discovery feed gutter and gap to home feed
 layout

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/discovery/PostDiscoveryFeed.tsx     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
index bcd4d9a3816..cf870270776 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -36,7 +36,7 @@ const SectionHeader = ({
   title,
   description,
 }: SectionHeaderProps): ReactElement => (
-  <header className="mb-4 flex flex-col gap-1 px-4 tablet:px-6 laptop:px-8">
+  <header className="mb-4 flex flex-col gap-1">
     <p className="text-accent-cabbage-default typo-caption1">{eyebrow}</p>
     <h2 className="font-bold text-text-primary typo-title2">{title}</h2>
     <p className="text-text-tertiary typo-callout">{description}</p>
@@ -87,7 +87,7 @@ export const PostDiscoveryFeed = ({
 
   return (
     <div
-      className="flex w-full flex-col gap-10"
+      className="flex w-full flex-col gap-10 px-4 laptop:px-10"
       id={POST_DISCOVERY_FEED_ANCHOR}
     >
       {hasTags && (
@@ -99,7 +99,6 @@ export const PostDiscoveryFeed = ({
           />
           <DiscoveryFeedGridScope feedName={OtherFeedPage.ExploreTag}>
             <Feed
-              className="mt-8"
               feedName={OtherFeedPage.ExploreTag}
               feedQueryKey={['post-discovery-related', post.id]}
               query={FEED_BY_TAGS_QUERY}
@@ -121,7 +120,6 @@ export const PostDiscoveryFeed = ({
         />
         <DiscoveryFeedGridScope feedName={SharedFeedPage.Popular}>
           <Feed
-            className="mt-8"
             feedName={SharedFeedPage.Popular}
             feedQueryKey={['post-discovery-more', post.id]}
             query={mainQuery}

From ae3f2b33f2a2d3a94e7ac23ef9e45b26efd2f57f Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 3 Jun 2026 00:06:32 +0300
Subject: [PATCH 046/111] feat: icon-only clickbait shield and reordered
 discovery action bar utilities

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../post/common/PostClickbaitShield.tsx       | 81 ++++++++++++++++++-
 .../post/discovery/PostDiscoveryActionBar.tsx |  8 +-
 2 files changed, 83 insertions(+), 6 deletions(-)

diff --git a/packages/shared/src/components/post/common/PostClickbaitShield.tsx b/packages/shared/src/components/post/common/PostClickbaitShield.tsx
index 02b67abb71a..5c61800b041 100644
--- a/packages/shared/src/components/post/common/PostClickbaitShield.tsx
+++ b/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 (
       <>
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 4f28f25b9d1..944c9a0f406 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -171,6 +171,9 @@ export const PostDiscoveryActionBar = ({
             variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
+        {post.clickbaitTitleDetected && (
+          <PostClickbaitShield post={post} iconOnly />
+        )}
         {canSeeAnalytics && (
           <Tooltip content="Analytics">
             <Link
@@ -193,11 +196,6 @@ export const PostDiscoveryActionBar = ({
           origin={Origin.ArticleModal}
           buttonSize={ButtonSize.Medium}
         />
-        {post.clickbaitTitleDetected && (
-          <div className="flex items-center [&_.mr-2]:!mr-0 [&_.mt-4]:!mt-0 [&_.mt-6]:!mt-0">
-            <PostClickbaitShield post={post} />
-          </div>
-        )}
       </div>
     </div>
   );

From 997b2511b136ace0feea1c08993df874b14786a0 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 3 Jun 2026 00:07:08 +0300
Subject: [PATCH 047/111] style: add vertical padding around discovery post
 title

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/shared/src/components/post/discovery/PostFocusCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 4569f868007..0c20678b0fa 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -123,7 +123,7 @@ export const PostFocusCard = ({
 
           <div className="flex min-w-0 flex-col gap-3">
             <h1
-              className="break-words font-bold text-text-primary typo-large-title"
+              className="break-words py-2 font-bold text-text-primary typo-large-title"
               data-testid="post-modal-title"
             >
               {title}

From a9a099da1807a5f614f76863abf556cbf5dc1b1f Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 3 Jun 2026 00:08:51 +0300
Subject: [PATCH 048/111] fix: center post details and comments together in
 discovery feed area

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/post/discovery/PostDiscoveryLayout.tsx  | 4 ++--
 .../shared/src/components/post/discovery/PostFocusCard.tsx | 7 -------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index 9331d9fe77e..16a80df0ad4 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -73,8 +73,8 @@ export const PostDiscoveryLayout = ({
 
   return (
     <div className="flex w-full flex-col bg-background-default">
-      <div className="mx-auto flex w-full max-w-[106rem] flex-col gap-8 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
-        <div className="mx-auto w-full max-w-[102rem]">
+      <div className="mx-auto flex w-full max-w-[82rem] flex-col gap-8 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
+        <div className="mx-auto w-full max-w-[82rem]">
           <PostFocusCard
             leftVariant={leftVariant}
             origin={origin}
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 0c20678b0fa..62a3dc3ab39 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -91,13 +91,6 @@ export const PostFocusCard = ({
       className="flex w-full flex-col overflow-hidden rounded-24 bg-background-default laptop:flex-row laptop:justify-center"
       data-testid="post-focus-card"
     >
-      {/* Ghost column mirroring the comments rail width so the content column
-          stays optically centered in the page rather than the content+comments
-          pair being centered together. */}
-      <div
-        aria-hidden
-        className="hidden shrink-0 laptop:block laptop:w-[400px]"
-      />
       <PostContainer className="relative laptop:shrink laptop:grow-0 laptop:basis-[832px] laptop:border-r-0">
         <div className="flex min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px] laptop:py-6">
           <div className="flex min-h-8 min-w-0 items-center gap-2">

From 922f742524d43d20473bfca12b05a7376506f8c4 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 4 Jun 2026 10:25:23 +0300
Subject: [PATCH 049/111] fix(discovery): shrink cover image, action bar icons,
 stack comments below

- Constrain focus card cover to max-w-sm thumbnail like production
- Reduce action bar icons to Medium while keeping the strip height/borders
- Move the discussion panel into a single vertical column below the TOC

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostDiscoveryActionBar.tsx | 12 +++---
 .../post/discovery/PostFocusCard.tsx          | 38 +++++++++----------
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 944c9a0f406..b94ab084b35 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -101,7 +101,7 @@ export const PostDiscoveryActionBar = ({
             icon={
               <UpvoteButtonIcon
                 secondary={isUpvoteActive}
-                size={IconSize.Large}
+                size={IconSize.Medium}
               />
             }
             onClick={onToggleUpvote}
@@ -122,7 +122,7 @@ export const PostDiscoveryActionBar = ({
             icon={
               <DownvoteIcon
                 secondary={isDownvoteActive}
-                size={IconSize.Large}
+                size={IconSize.Medium}
               />
             }
             onClick={onToggleDownvote}
@@ -137,7 +137,7 @@ export const PostDiscoveryActionBar = ({
             aria-label="Comment"
             color={ButtonColor.BlueCheese}
             icon={
-              <CommentIcon secondary={post.commented} size={IconSize.Large} />
+              <CommentIcon secondary={post.commented} size={IconSize.Medium} />
             }
             onClick={onComment}
             pressed={post.commented}
@@ -152,7 +152,7 @@ export const PostDiscoveryActionBar = ({
       <div className="flex items-center gap-2">
         <BookmarkButton
           post={post}
-          iconSize={IconSize.Large}
+          iconSize={IconSize.Medium}
           buttonProps={{
             id: 'bookmark-post-btn',
             pressed: post.bookmarked,
@@ -164,7 +164,7 @@ export const PostDiscoveryActionBar = ({
           <Button
             aria-label="Copy link"
             color={ButtonColor.Cabbage}
-            icon={<LinkIcon size={IconSize.Large} />}
+            icon={<LinkIcon size={IconSize.Medium} />}
             onClick={() => onCopyLinkClick?.(post)}
             size={ButtonSize.Medium}
             type="button"
@@ -183,7 +183,7 @@ export const PostDiscoveryActionBar = ({
             >
               <Button
                 aria-label="Analytics"
-                icon={<AnalyticsIcon size={IconSize.Large} />}
+                icon={<AnalyticsIcon size={IconSize.Medium} />}
                 size={ButtonSize.Medium}
                 tag="a"
                 variant={ButtonVariant.Tertiary}
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 62a3dc3ab39..8445697f9c4 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -88,11 +88,11 @@ export const PostFocusCard = ({
 
   return (
     <article
-      className="flex w-full flex-col overflow-hidden rounded-24 bg-background-default laptop:flex-row laptop:justify-center"
+      className="flex w-full flex-col overflow-hidden rounded-24 bg-background-default"
       data-testid="post-focus-card"
     >
-      <PostContainer className="relative laptop:shrink laptop:grow-0 laptop:basis-[832px] laptop:border-r-0">
-        <div className="flex min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px] laptop:py-6">
+      <PostContainer className="relative laptop:border-r-0">
+        <div className="mx-auto flex w-full min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px]">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
             {post.source && (
               <SourceStrip
@@ -156,7 +156,7 @@ export const PostFocusCard = ({
             </div>
           ) : (
             <a
-              className="block overflow-hidden rounded-16 bg-background-subtle"
+              className="block h-fit w-full max-w-sm overflow-hidden rounded-16 bg-background-subtle"
               href={readHref}
               onClick={handleImageClick}
               rel="noopener"
@@ -169,7 +169,7 @@ export const PostFocusCard = ({
                 fetchPriority="high"
                 imgAlt="Post cover image"
                 imgSrc={post.image}
-                ratio="48%"
+                ratio="52%"
               />
             </a>
           )}
@@ -213,23 +213,21 @@ export const PostFocusCard = ({
               <PostCodeSnippets post={post} />
             </div>
           )}
-        </div>
-      </PostContainer>
 
-      <aside className="flex min-h-0 min-w-0 shrink-0 flex-col border-t border-border-subtlest-tertiary bg-background-subtle laptop:sticky laptop:top-16 laptop:h-[calc(100vh-4rem)] laptop:max-h-[calc(100vh-4rem)] laptop:w-[400px] laptop:border-t-0 laptop:bg-background-default">
-        <div className="flex min-h-0 w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2 laptop:h-full">
-          <PostDiscussionPanel
-            className="h-full p-4"
-            showMetaBar={false}
-            showSortHeader
-            onRegisterFocusComment={(fn) => {
-              focusCommentRef.current = fn;
-            }}
-            post={post}
-            origin={origin}
-          />
+          <div className="flex w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2">
+            <PostDiscussionPanel
+              className="p-4"
+              showMetaBar={false}
+              showSortHeader
+              onRegisterFocusComment={(fn) => {
+                focusCommentRef.current = fn;
+              }}
+              post={post}
+              origin={origin}
+            />
+          </div>
         </div>
-      </aside>
+      </PostContainer>
     </article>
   );
 };

From 9b56e04715900864b8d68e40d989274c0de02a7c Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 4 Jun 2026 11:06:19 +0300
Subject: [PATCH 050/111] fix(discovery): flatten comments, reorder header,
 smaller action bar, ad card

- Drop the bordered/scrolling comment box for a flat production-style list
- Move tags and the metadata strip above the cover image
- Shrink action bar buttons and icons to Small
- Render the clickbait shield in neutral gray like the other utilities
- Bring back the sidebar ad card below the table of contents

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/common/PostClickbaitShield.tsx       | 22 +-----
 .../post/discovery/PostDiscoveryActionBar.tsx | 26 +++----
 .../post/discovery/PostDiscussionPanel.tsx    |  2 +-
 .../post/discovery/PostFocusCard.tsx          | 77 ++++++++++---------
 4 files changed, 57 insertions(+), 70 deletions(-)

diff --git a/packages/shared/src/components/post/common/PostClickbaitShield.tsx b/packages/shared/src/components/post/common/PostClickbaitShield.tsx
index 5c61800b041..e4e2b6da74d 100644
--- a/packages/shared/src/components/post/common/PostClickbaitShield.tsx
+++ b/packages/shared/src/components/post/common/PostClickbaitShield.tsx
@@ -75,26 +75,12 @@ export const PostClickbaitShield = ({
 
     const renderIcon = () => {
       if (isActive) {
-        return (
-          <ShieldCheckIcon
-            className="text-status-success"
-            size={IconSize.Large}
-          />
-        );
+        return <ShieldCheckIcon size={IconSize.Small} />;
       }
       if (isPlus) {
-        return <ShieldIcon size={IconSize.Large} />;
+        return <ShieldIcon size={IconSize.Small} />;
       }
-      return (
-        <ShieldWarningIcon
-          className={
-            hasUsedFreeTrial
-              ? 'text-accent-ketchup-default'
-              : 'text-accent-cheese-default'
-          }
-          size={IconSize.Large}
-        />
-      );
+      return <ShieldWarningIcon size={IconSize.Small} />;
     };
 
     return (
@@ -104,7 +90,7 @@ export const PostClickbaitShield = ({
           icon={renderIcon()}
           iconSecondaryOnHover
           onClick={handleIconClick}
-          size={ButtonSize.Medium}
+          size={ButtonSize.Small}
           type="button"
           variant={ButtonVariant.Tertiary}
         />
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index b94ab084b35..46204264a77 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -101,12 +101,12 @@ export const PostDiscoveryActionBar = ({
             icon={
               <UpvoteButtonIcon
                 secondary={isUpvoteActive}
-                size={IconSize.Medium}
+                size={IconSize.Small}
               />
             }
             onClick={onToggleUpvote}
             pressed={isUpvoteActive}
-            size={ButtonSize.Medium}
+            size={ButtonSize.Small}
             variant={ButtonVariant.Tertiary}
           >
             {upvotes > 0 ? largeNumberFormat(upvotes) : undefined}
@@ -122,12 +122,12 @@ export const PostDiscoveryActionBar = ({
             icon={
               <DownvoteIcon
                 secondary={isDownvoteActive}
-                size={IconSize.Medium}
+                size={IconSize.Small}
               />
             }
             onClick={onToggleDownvote}
             pressed={isDownvoteActive}
-            size={ButtonSize.Medium}
+            size={ButtonSize.Small}
             variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
@@ -137,11 +137,11 @@ export const PostDiscoveryActionBar = ({
             aria-label="Comment"
             color={ButtonColor.BlueCheese}
             icon={
-              <CommentIcon secondary={post.commented} size={IconSize.Medium} />
+              <CommentIcon secondary={post.commented} size={IconSize.Small} />
             }
             onClick={onComment}
             pressed={post.commented}
-            size={ButtonSize.Medium}
+            size={ButtonSize.Small}
             variant={ButtonVariant.Tertiary}
           >
             {comments > 0 ? largeNumberFormat(comments) : undefined}
@@ -152,21 +152,21 @@ export const PostDiscoveryActionBar = ({
       <div className="flex items-center gap-2">
         <BookmarkButton
           post={post}
-          iconSize={IconSize.Medium}
+          iconSize={IconSize.Small}
           buttonProps={{
             id: 'bookmark-post-btn',
             pressed: post.bookmarked,
             onClick: onToggleBookmark,
-            size: ButtonSize.Medium,
+            size: ButtonSize.Small,
           }}
         />
         <Tooltip content="Copy link">
           <Button
             aria-label="Copy link"
             color={ButtonColor.Cabbage}
-            icon={<LinkIcon size={IconSize.Medium} />}
+            icon={<LinkIcon size={IconSize.Small} />}
             onClick={() => onCopyLinkClick?.(post)}
-            size={ButtonSize.Medium}
+            size={ButtonSize.Small}
             type="button"
             variant={ButtonVariant.Tertiary}
           />
@@ -183,8 +183,8 @@ export const PostDiscoveryActionBar = ({
             >
               <Button
                 aria-label="Analytics"
-                icon={<AnalyticsIcon size={IconSize.Medium} />}
-                size={ButtonSize.Medium}
+                icon={<AnalyticsIcon size={IconSize.Small} />}
+                size={ButtonSize.Small}
                 tag="a"
                 variant={ButtonVariant.Tertiary}
               />
@@ -194,7 +194,7 @@ export const PostDiscoveryActionBar = ({
         <PostMenuOptions
           post={post}
           origin={Origin.ArticleModal}
-          buttonSize={ButtonSize.Medium}
+          buttonSize={ButtonSize.Small}
         />
       </div>
     </div>
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index 947b61dbd6f..af5a5725d6c 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -201,7 +201,7 @@ export const PostDiscussionPanel = ({
           </Button>
         </span>
       )}
-      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1">
+      <div className="min-w-0">
         <PostComments
           post={post}
           sortBy={sortBy}
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 8445697f9c4..1b0991261bc 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -22,6 +22,7 @@ import { combinedClicks } from '../../../lib/click';
 import { useFeature } from '../../GrowthBookProvider';
 import { feature } from '../../../lib/featureManagement';
 import { SourceStrip } from '../reader/SourceStrip';
+import { PostSidebarAdWidget } from '../PostSidebarAdWidget';
 import { PostDiscoveryActionBar } from './PostDiscoveryActionBar';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
 
@@ -139,6 +140,32 @@ export const PostFocusCard = ({
             </p>
           )}
 
+          <PostMetadata
+            className="!typo-callout"
+            createdAt={post.createdAt}
+            domain={
+              !isVideoType &&
+              post.domain &&
+              post.domain.length > 0 && (
+                <TruncateText>
+                  From{' '}
+                  <ArticleLink
+                    className="hover:underline"
+                    href={post.permalink}
+                    onClick={onReadArticle}
+                    title={post.domain}
+                  >
+                    {post.domain}
+                  </ArticleLink>
+                </TruncateText>
+              )
+            }
+            isVideoType={isVideoType}
+            readTime={post.readTime}
+          />
+
+          <PostTagList post={post} />
+
           {isVideoType ? (
             <div className="shadow-1 flex min-w-0 flex-col gap-4 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3">
               <YoutubeVideo
@@ -174,32 +201,6 @@ export const PostFocusCard = ({
             </a>
           )}
 
-          <PostMetadata
-            className="!typo-callout"
-            createdAt={post.createdAt}
-            domain={
-              !isVideoType &&
-              post.domain &&
-              post.domain.length > 0 && (
-                <TruncateText>
-                  From{' '}
-                  <ArticleLink
-                    className="hover:underline"
-                    href={post.permalink}
-                    onClick={onReadArticle}
-                    title={post.domain}
-                  >
-                    {post.domain}
-                  </ArticleLink>
-                </TruncateText>
-              )
-            }
-            isVideoType={isVideoType}
-            readTime={post.readTime}
-          />
-
-          <PostTagList post={post} />
-
           {hasToc && (
             <PostToc
               collapsible
@@ -208,24 +209,24 @@ export const PostFocusCard = ({
             />
           )}
 
+          <PostSidebarAdWidget postId={post.id} />
+
           {showCodeSnippets && (
             <div className={leftVariant === 'lean' ? 'mb-4' : 'mb-6'}>
               <PostCodeSnippets post={post} />
             </div>
           )}
 
-          <div className="flex w-full flex-col overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-default shadow-2">
-            <PostDiscussionPanel
-              className="p-4"
-              showMetaBar={false}
-              showSortHeader
-              onRegisterFocusComment={(fn) => {
-                focusCommentRef.current = fn;
-              }}
-              post={post}
-              origin={origin}
-            />
-          </div>
+          <PostDiscussionPanel
+            className="pt-2"
+            showMetaBar={false}
+            showSortHeader
+            onRegisterFocusComment={(fn) => {
+              focusCommentRef.current = fn;
+            }}
+            post={post}
+            origin={origin}
+          />
         </div>
       </PostContainer>
     </article>

From 31527928628e3778f115342b9ce3bf769aa47564 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 4 Jun 2026 11:09:30 +0300
Subject: [PATCH 051/111] feat(discovery): small image beside title, read
 button below TLDR

Test layout variant: move the article cover into a small thumbnail
next to the title, and relocate the Read post button to sit below the
TLDR summary.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 64 ++++++++++---------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 1b0991261bc..08bf3e3f86f 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -103,25 +103,34 @@ export const PostFocusCard = ({
                 source={post.source as SourceTooltip}
               />
             )}
-            <PostHeaderActions
-              buttonSize={ButtonSize.Small}
-              className="ml-auto h-8 shrink-0 items-center"
-              contextMenuId="post-discovery-header-actions"
-              hideMenuOptions
-              hideSubscribeAction
-              onReadArticle={onReadArticle}
-              post={post}
-              readButtonVariant={ButtonVariant.Primary}
-            />
           </div>
 
-          <div className="flex min-w-0 flex-col gap-3">
+          <div className="flex min-w-0 items-start gap-4">
             <h1
-              className="break-words py-2 font-bold text-text-primary typo-large-title"
+              className="min-w-0 flex-1 break-words py-2 font-bold text-text-primary typo-large-title"
               data-testid="post-modal-title"
             >
               {title}
             </h1>
+            {!isVideoType && post.image && (
+              <a
+                className="block h-fit w-28 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:w-40"
+                href={readHref}
+                onClick={handleImageClick}
+                rel="noopener"
+                target="_blank"
+                title="Go to post"
+              >
+                <LazyImage
+                  eager
+                  fallbackSrc={cloudinaryPostImageCoverPlaceholder}
+                  fetchPriority="high"
+                  imgAlt="Post cover image"
+                  imgSrc={post.image}
+                  ratio="52%"
+                />
+              </a>
+            )}
           </div>
 
           <PostDiscoveryActionBar
@@ -140,6 +149,17 @@ export const PostFocusCard = ({
             </p>
           )}
 
+          <PostHeaderActions
+            buttonSize={ButtonSize.Small}
+            className="items-center"
+            contextMenuId="post-discovery-header-actions"
+            hideMenuOptions
+            hideSubscribeAction
+            onReadArticle={onReadArticle}
+            post={post}
+            readButtonVariant={ButtonVariant.Primary}
+          />
+
           <PostMetadata
             className="!typo-callout"
             createdAt={post.createdAt}
@@ -166,7 +186,7 @@ export const PostFocusCard = ({
 
           <PostTagList post={post} />
 
-          {isVideoType ? (
+          {isVideoType && (
             <div className="shadow-1 flex min-w-0 flex-col gap-4 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3">
               <YoutubeVideo
                 placeholderProps={{ post, onWatchVideo: onReadArticle }}
@@ -181,24 +201,6 @@ export const PostFocusCard = ({
                 </p>
               )}
             </div>
-          ) : (
-            <a
-              className="block h-fit w-full max-w-sm overflow-hidden rounded-16 bg-background-subtle"
-              href={readHref}
-              onClick={handleImageClick}
-              rel="noopener"
-              target="_blank"
-              title="Go to post"
-            >
-              <LazyImage
-                eager
-                fallbackSrc={cloudinaryPostImageCoverPlaceholder}
-                fetchPriority="high"
-                imgAlt="Post cover image"
-                imgSrc={post.image}
-                ratio="52%"
-              />
-            </a>
           )}
 
           {hasToc && (

From 3980d2f6bd80ce5a9f87d454b29d1cf46b7a42b3 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 4 Jun 2026 11:27:43 +0300
Subject: [PATCH 052/111] feat(discovery): read button back to top-right,
 composer above comments

- Restore the Read post button to the top-right header row
- Move the "Share your thoughts" composer above the comment list, so it
  sits below the table of contents and ad card

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostDiscussionPanel.tsx    | 18 ++++++++--------
 .../post/discovery/PostFocusCard.tsx          | 21 +++++++++----------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index af5a5725d6c..ef3a8fef419 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -169,6 +169,15 @@ export const PostDiscussionPanel = ({
       aria-label="Discussion"
       className={classNames('flex min-h-0 min-w-0 flex-col gap-2', className)}
     >
+      <NewComment
+        post={post}
+        ref={commentRef as LegacyRef<NewCommentRef>}
+        shouldHandleCommentQuery
+        onComposerOpenChange={setIsComposerOpen}
+        size={ProfileImageSize.Medium}
+        CommentInputOrModal={CommentInputOrModal}
+        renderTrigger={renderComposerTrigger}
+      />
       {showSortHeader && (
         <span className="flex shrink-0 flex-row items-center px-1">
           <Typography
@@ -214,15 +223,6 @@ export const PostDiscussionPanel = ({
         />
       </div>
       <div className="flex shrink-0 flex-col gap-3 pt-3">
-        <NewComment
-          post={post}
-          ref={commentRef as LegacyRef<NewCommentRef>}
-          shouldHandleCommentQuery
-          onComposerOpenChange={setIsComposerOpen}
-          size={ProfileImageSize.Medium}
-          CommentInputOrModal={CommentInputOrModal}
-          renderTrigger={renderComposerTrigger}
-        />
         {showMetaBar && <DiscussionMetaBar post={post} />}
         <DiscussionShareRow post={post} />
       </div>
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 08bf3e3f86f..d6d5a2a1959 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -103,6 +103,16 @@ export const PostFocusCard = ({
                 source={post.source as SourceTooltip}
               />
             )}
+            <PostHeaderActions
+              buttonSize={ButtonSize.Small}
+              className="ml-auto h-8 shrink-0 items-center"
+              contextMenuId="post-discovery-header-actions"
+              hideMenuOptions
+              hideSubscribeAction
+              onReadArticle={onReadArticle}
+              post={post}
+              readButtonVariant={ButtonVariant.Primary}
+            />
           </div>
 
           <div className="flex min-w-0 items-start gap-4">
@@ -149,17 +159,6 @@ export const PostFocusCard = ({
             </p>
           )}
 
-          <PostHeaderActions
-            buttonSize={ButtonSize.Small}
-            className="items-center"
-            contextMenuId="post-discovery-header-actions"
-            hideMenuOptions
-            hideSubscribeAction
-            onReadArticle={onReadArticle}
-            post={post}
-            readButtonVariant={ButtonVariant.Primary}
-          />
-
           <PostMetadata
             className="!typo-callout"
             createdAt={post.createdAt}

From 6a9ac3c4fc12d27a893ce5b71cef0ab2383f7f72 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 4 Jun 2026 11:29:41 +0300
Subject: [PATCH 053/111] style(discovery): flatten table of contents to a
 bordered strip

Drop the surface-float fill on the TOC so it reads as a flat bordered
strip instead of a filled card.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/post/discovery/PostFocusCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index d6d5a2a1959..a2bd56cfd08 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -205,7 +205,7 @@ export const PostFocusCard = ({
           {hasToc && (
             <PostToc
               collapsible
-              className="rounded-16 border border-border-subtlest-tertiary bg-surface-float"
+              className="rounded-16 border border-border-subtlest-tertiary bg-transparent"
               post={post}
             />
           )}

From fb17f330670d8b3a7f97158c5b26b1cfc6ef2f02 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 4 Jun 2026 11:34:18 +0300
Subject: [PATCH 054/111] feat(discovery): swap signup nudge for
 onboarding-hero design

Replace BuildYourFeedWidget in the discovery layout with a background-
image signup hero modeled on the new-tab OnboardingSignupHero from
the hijacking-strip work (PR #6127): full-bleed onboarding backdrop,
headline + subtext, and a glass AuthOptions card. Scoped to the
discovery surface so other BuildYourFeedWidget usages are untouched.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostDiscoveryLayout.tsx    |   6 +-
 .../discovery/PostDiscoverySignupHero.tsx     | 129 ++++++++++++++++++
 2 files changed, 131 insertions(+), 4 deletions(-)
 create mode 100644 packages/shared/src/components/post/discovery/PostDiscoverySignupHero.tsx

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index 16a80df0ad4..f90b2c322ec 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -7,10 +7,10 @@ import { useLogContext } from '../../../contexts/LogContext';
 import { LogEvent, TargetType } from '../../../lib/log';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { ArrowIcon } from '../../icons';
-import { BuildYourFeedWidget } from '../BuildYourFeedWidget';
 import type { FocusCardLeftVariant } from './PostFocusCard';
 import { PostFocusCard } from './PostFocusCard';
 import { PostDiscoveryFeed } from './PostDiscoveryFeed';
+import { PostDiscoverySignupHero } from './PostDiscoverySignupHero';
 
 interface PostDiscoveryLayoutProps {
   post: Post;
@@ -84,9 +84,7 @@ export const PostDiscoveryLayout = ({
 
         {!user && (
           <div className="mx-auto w-full max-w-[64rem]">
-            <div className="shadow-1 overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-background-subtle p-4 tablet:p-6">
-              <BuildYourFeedWidget />
-            </div>
+            <PostDiscoverySignupHero post={post} />
           </div>
         )}
       </div>
diff --git a/packages/shared/src/components/post/discovery/PostDiscoverySignupHero.tsx b/packages/shared/src/components/post/discovery/PostDiscoverySignupHero.tsx
new file mode 100644
index 00000000000..b7e3b067754
--- /dev/null
+++ b/packages/shared/src/components/post/discovery/PostDiscoverySignupHero.tsx
@@ -0,0 +1,129 @@
+import type { MutableRefObject, ReactElement } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import type { Post } from '../../../graphql/posts';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { useLogContext } from '../../../contexts/LogContext';
+import useLogEventOnce from '../../../hooks/log/useLogEventOnce';
+import { AuthTriggers } from '../../../lib/auth';
+import { LogEvent, Origin, TargetType } from '../../../lib/log';
+import { ButtonSize, ButtonVariant } from '../../buttons/Button';
+import AuthOptions from '../../auth/AuthOptions';
+import { AuthDisplay, type AuthProps } from '../../auth/common';
+import {
+  cloudinaryOnboardingFullBackgroundDesktop,
+  cloudinaryOnboardingFullBackgroundMobile,
+} from '../../../lib/image';
+
+interface PostDiscoverySignupHeroProps {
+  post?: Post;
+}
+
+const surface = 'post_discovery_signup';
+
+export const PostDiscoverySignupHero = ({
+  post,
+}: PostDiscoverySignupHeroProps): ReactElement => {
+  const { showLogin } = useAuthContext();
+  const { logEvent } = useLogContext();
+  const [isClient, setIsClient] = useState(false);
+
+  const extra = useMemo(
+    () =>
+      JSON.stringify({
+        origin: Origin.ArticlePage,
+        post_id: post?.id,
+        surface,
+      }),
+    [post?.id],
+  );
+
+  useLogEventOnce(() => ({
+    event_name: LogEvent.Impression,
+    target_id: surface,
+    target_type: TargetType.ArticleAnonymousCTA,
+    extra,
+  }));
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const onAuthStateUpdate = useCallback(
+    (props: Partial<AuthProps>) => {
+      logEvent({
+        event_name: LogEvent.ClickArticleAnonymousCTA,
+        target_id: surface,
+        target_type: TargetType.ArticleAnonymousCTA,
+        extra,
+      });
+
+      showLogin({
+        trigger: AuthTriggers.PostPage,
+        options: {
+          isLogin: !!props.isLoginFlow,
+          defaultDisplay: props.defaultDisplay,
+          formValues: props.email ? { email: props.email } : undefined,
+        },
+      });
+    },
+    [extra, logEvent, showLogin],
+  );
+
+  return (
+    <section className="relative overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-raw-pepper-90 shadow-2">
+      <picture>
+        <source
+          media="(max-width: 655px)"
+          srcSet={cloudinaryOnboardingFullBackgroundMobile}
+        />
+        <source
+          media="(min-width: 656px)"
+          srcSet={cloudinaryOnboardingFullBackgroundDesktop}
+        />
+        <img
+          alt=""
+          aria-hidden
+          className="opacity-55 pointer-events-none absolute inset-0 size-full object-cover"
+          role="presentation"
+          src={cloudinaryOnboardingFullBackgroundDesktop}
+        />
+      </picture>
+      <div className="bg-raw-pepper-90/55 pointer-events-none absolute inset-0" />
+      <div className="via-raw-pepper-90/80 from-raw-pepper-90/60 pointer-events-none absolute inset-0 bg-gradient-to-b to-raw-pepper-90/40" />
+      <div className="via-raw-pepper-90/70 pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-raw-pepper-90 to-transparent" />
+      <div className="dark relative z-1 mx-auto flex min-h-[20rem] w-full max-w-[48rem] flex-col items-center justify-center gap-5 px-6 py-10 text-center tablet:min-h-[24rem] tablet:px-10 tablet:py-12">
+        <div className="flex flex-col items-center">
+          <h2 className="max-w-[42rem] text-balance font-bold text-white typo-title1 tablet:typo-mega2">
+            Where developers make every tab count.
+          </h2>
+          <p className="text-white/75 mt-3 max-w-[31rem] text-balance typo-callout tablet:typo-title3">
+            Sign in to turn daily.dev into your personalized feed, reputation,
+            saves, and community in every new tab.
+          </p>
+        </div>
+        <div className="w-full max-w-[22rem] rounded-24 border border-border-subtlest-tertiary bg-white/[0.045] p-3 text-center backdrop-blur-md tablet:p-4">
+          {isClient && (
+            <AuthOptions
+              compact
+              className={{
+                container: 'mx-auto !max-w-none !overflow-visible',
+                onboardingSignup: '!gap-3',
+              }}
+              defaultDisplay={AuthDisplay.OnboardingSignup}
+              forceDefaultDisplay
+              formRef={null as unknown as MutableRefObject<HTMLFormElement>}
+              ignoreMessages
+              onAuthStateUpdate={onAuthStateUpdate}
+              onboardingSignupButton={{
+                size: ButtonSize.Large,
+                variant: ButtonVariant.Primary,
+              }}
+              simplified
+              trigger={AuthTriggers.PostPage}
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};

From c3811fd8353beda11e3aa8c21d668cd014c49331 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 4 Jun 2026 13:04:51 +0300
Subject: [PATCH 055/111] feat(discovery): float ad to the right rail, content
 stays centered

Move the sidebar ad into the right gutter at laptopL+ via absolute
positioning anchored to the centered content column, so the post
content stays centered on the page. Strip the ad's background to a
border-only card. Below laptopL the ad stays inline (single render,
no duplicate ad query).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/PostFocusCard.tsx  | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index a2bd56cfd08..134fb8ac3ce 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -93,7 +93,7 @@ export const PostFocusCard = ({
       data-testid="post-focus-card"
     >
       <PostContainer className="relative laptop:border-r-0">
-        <div className="mx-auto flex w-full min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px]">
+        <div className="relative mx-auto flex w-full min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px]">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
             {post.source && (
               <SourceStrip
@@ -210,7 +210,15 @@ export const PostFocusCard = ({
             />
           )}
 
-          <PostSidebarAdWidget postId={post.id} />
+          <aside className="w-full max-w-80 laptopL:absolute laptopL:left-full laptopL:top-6 laptopL:ml-6 laptopL:w-44 laptopL:max-w-none">
+            <PostSidebarAdWidget
+              postId={post.id}
+              className={{
+                container:
+                  '!w-full !border-border-subtlest-tertiary !bg-transparent',
+              }}
+            />
+          </aside>
 
           {showCodeSnippets && (
             <div className={leftVariant === 'lean' ? 'mb-4' : 'mb-6'}>

From 0610439a7c5c04d97c07719b4f82eedc354c35c0 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 4 Jun 2026 13:23:52 +0300
Subject: [PATCH 056/111] feat(discovery): widen right-rail ad, share strip,
 signup box, single feed

- Set the right-rail ad to 320px; gate it at laptopXL and widen the
  focus-card area there so content stays centered with room for the rail
- Add a "Share this post" strip (social + squad buttons) below the
  comment composer, reusing ShareBar with configurable title/visibility
- Signup hero: move the headline inside the auth box, drop the
  paragraph, and make the strip full width
- Discovery feed: drop the "More like this" rail; keep only the centered
  "Discover more" feed without the eyebrow label

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/ShareBar.tsx   | 16 ++++--
 .../post/discovery/PostDiscoveryFeed.tsx      | 49 ++-----------------
 .../post/discovery/PostDiscoveryLayout.tsx    |  6 +--
 .../discovery/PostDiscoverySignupHero.tsx     | 12 ++---
 .../post/discovery/PostDiscussionPanel.tsx    |  2 +
 .../post/discovery/PostFocusCard.tsx          |  2 +-
 6 files changed, 25 insertions(+), 62 deletions(-)

diff --git a/packages/shared/src/components/ShareBar.tsx b/packages/shared/src/components/ShareBar.tsx
index 8a093b5034a..d13a8ff7bbd 100644
--- a/packages/shared/src/components/ShareBar.tsx
+++ b/packages/shared/src/components/ShareBar.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import React, { useContext, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { CopyIcon, FacebookIcon, TwitterIcon, WhatsappIcon } from './icons';
 import type { Post } from '../graphql/posts';
 import { useCopyPostLink } from '../hooks/useCopyPostLink';
@@ -24,6 +25,8 @@ import { useAuthContext } from '../contexts/AuthContext';
 interface ShareBarProps {
   post: Post;
   visibleRows?: number;
+  title?: string;
+  className?: string;
 }
 
 const columns = 4;
@@ -32,6 +35,8 @@ const fixedOptions = 4;
 export default function ShareBar({
   post,
   visibleRows = 2,
+  title = 'Would you recommend this post?',
+  className,
 }: ShareBarProps): ReactElement {
   const [isExpanded, setIsExpanded] = useState(false);
   const maxVisibleOptions = visibleRows * columns;
@@ -98,10 +103,13 @@ export default function ShareBar({
   };
 
   return (
-    <WidgetContainer className="hidden flex-col !border-0 p-3 laptop:flex">
-      <h4 className="mb-4 font-bold text-text-primary typo-callout">
-        Would you recommend this post?
-      </h4>
+    <WidgetContainer
+      className={classNames(
+        'hidden flex-col !border-0 p-3 laptop:flex',
+        className,
+      )}
+    >
+      <h4 className="mb-4 font-bold text-text-primary typo-callout">{title}</h4>
       <div className="grid grid-cols-4 gap-2 gap-y-4">
         <SocialShareButton
           size={ButtonSize.Medium}
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
index cf870270776..6abc7df69de 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryFeed.tsx
@@ -6,18 +6,9 @@ import SettingsContext from '../../../contexts/SettingsContext';
 import { FeedLayoutProvider } from '../../../contexts/FeedContext';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import { ActiveFeedNameContext } from '../../../contexts';
-import {
-  ANONYMOUS_FEED_QUERY,
-  FEED_BY_TAGS_QUERY,
-  FEED_V2_QUERY,
-} from '../../../graphql/feed';
+import { ANONYMOUS_FEED_QUERY, FEED_V2_QUERY } from '../../../graphql/feed';
 import type { AllFeedPages } from '../../../lib/query';
-import { OtherFeedPage } from '../../../lib/query';
 import { SharedFeedPage } from '../../utilities';
-import {
-  getPostTopicLabel,
-  getPostTopicTags,
-} from '../anonymousPostExperience';
 
 export const POST_DISCOVERY_FEED_ANCHOR = 'post-discovery-feed';
 
@@ -26,18 +17,15 @@ interface PostDiscoveryFeedProps {
 }
 
 interface SectionHeaderProps {
-  eyebrow: string;
   title: string;
   description: string;
 }
 
 const SectionHeader = ({
-  eyebrow,
   title,
   description,
 }: SectionHeaderProps): ReactElement => (
-  <header className="mb-4 flex flex-col gap-1">
-    <p className="text-accent-cabbage-default typo-caption1">{eyebrow}</p>
+  <header className="mb-4 flex flex-col items-center gap-1 text-center">
     <h2 className="font-bold text-text-primary typo-title2">{title}</h2>
     <p className="text-text-tertiary typo-callout">{description}</p>
   </header>
@@ -70,19 +58,13 @@ const DiscoveryFeedGridScope = ({
 };
 
 /**
- * The Pinterest-style discovery surface below the focus card: a finite,
- * topic-relevant rail ("more like this") followed by the infinite personalized
- * feed, turning the post page into a continuous exploration loop.
+ * The Pinterest-style discovery surface below the focus card: the infinite
+ * personalized feed, turning the post page into a continuous exploration loop.
  */
 export const PostDiscoveryFeed = ({
   post,
 }: PostDiscoveryFeedProps): ReactElement => {
   const { user } = useAuthContext();
-  const topics = getPostTopicTags(post);
-  const topicLabel = getPostTopicLabel(topics);
-  const tags = (post.tags ?? []).filter((tag): tag is string => !!tag);
-  const hasTags = tags.length > 0;
-
   const mainQuery = user ? FEED_V2_QUERY : ANONYMOUS_FEED_QUERY;
 
   return (
@@ -90,31 +72,8 @@ export const PostDiscoveryFeed = ({
       className="flex w-full flex-col gap-10 px-4 laptop:px-10"
       id={POST_DISCOVERY_FEED_ANCHOR}
     >
-      {hasTags && (
-        <section aria-label="More on this topic">
-          <SectionHeader
-            eyebrow="More like this"
-            title={`More on ${topicLabel}`}
-            description="Hand-picked stories close to what you just read."
-          />
-          <DiscoveryFeedGridScope feedName={OtherFeedPage.ExploreTag}>
-            <Feed
-              feedName={OtherFeedPage.ExploreTag}
-              feedQueryKey={['post-discovery-related', post.id]}
-              query={FEED_BY_TAGS_QUERY}
-              variables={{ tags }}
-              disableAds
-              allowFetchMore={false}
-              pageSize={9}
-              disableListFrame
-            />
-          </DiscoveryFeedGridScope>
-        </section>
-      )}
-
       <section aria-label="Discover more">
         <SectionHeader
-          eyebrow="Keep exploring"
           title="Discover more"
           description="A fresh stream of developer stories, discussions, and tools."
         />
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index f90b2c322ec..7d803700dd9 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -73,8 +73,8 @@ export const PostDiscoveryLayout = ({
 
   return (
     <div className="flex w-full flex-col bg-background-default">
-      <div className="mx-auto flex w-full max-w-[82rem] flex-col gap-8 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8">
-        <div className="mx-auto w-full max-w-[82rem]">
+      <div className="mx-auto flex w-full max-w-[82rem] flex-col gap-8 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8 laptopXL:max-w-[100rem]">
+        <div className="mx-auto w-full max-w-[82rem] laptopXL:max-w-[100rem]">
           <PostFocusCard
             leftVariant={leftVariant}
             origin={origin}
@@ -83,7 +83,7 @@ export const PostDiscoveryLayout = ({
         </div>
 
         {!user && (
-          <div className="mx-auto w-full max-w-[64rem]">
+          <div className="w-full">
             <PostDiscoverySignupHero post={post} />
           </div>
         )}
diff --git a/packages/shared/src/components/post/discovery/PostDiscoverySignupHero.tsx b/packages/shared/src/components/post/discovery/PostDiscoverySignupHero.tsx
index b7e3b067754..828797c767a 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoverySignupHero.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoverySignupHero.tsx
@@ -91,17 +91,11 @@ export const PostDiscoverySignupHero = ({
       <div className="bg-raw-pepper-90/55 pointer-events-none absolute inset-0" />
       <div className="via-raw-pepper-90/80 from-raw-pepper-90/60 pointer-events-none absolute inset-0 bg-gradient-to-b to-raw-pepper-90/40" />
       <div className="via-raw-pepper-90/70 pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-raw-pepper-90 to-transparent" />
-      <div className="dark relative z-1 mx-auto flex min-h-[20rem] w-full max-w-[48rem] flex-col items-center justify-center gap-5 px-6 py-10 text-center tablet:min-h-[24rem] tablet:px-10 tablet:py-12">
-        <div className="flex flex-col items-center">
-          <h2 className="max-w-[42rem] text-balance font-bold text-white typo-title1 tablet:typo-mega2">
+      <div className="dark relative z-1 mx-auto flex min-h-[20rem] w-full max-w-[48rem] flex-col items-center justify-center px-6 py-10 text-center tablet:min-h-[24rem] tablet:px-10 tablet:py-12">
+        <div className="w-full max-w-[24rem] rounded-24 border border-border-subtlest-tertiary bg-white/[0.045] p-4 text-center backdrop-blur-md tablet:p-5">
+          <h2 className="mb-4 text-balance font-bold text-white typo-title3 tablet:typo-title2">
             Where developers make every tab count.
           </h2>
-          <p className="text-white/75 mt-3 max-w-[31rem] text-balance typo-callout tablet:typo-title3">
-            Sign in to turn daily.dev into your personalized feed, reputation,
-            saves, and community in every new tab.
-          </p>
-        </div>
-        <div className="w-full max-w-[22rem] rounded-24 border border-border-subtlest-tertiary bg-white/[0.045] p-3 text-center backdrop-blur-md tablet:p-4">
           {isClient && (
             <AuthOptions
               compact
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index ef3a8fef419..ff457ee5e6e 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -33,6 +33,7 @@ import {
   TypographyColor,
   TypographyType,
 } from '../../typography/Typography';
+import ShareBar from '../../ShareBar';
 import { DiscussionMetaBar } from './DiscussionMetaBar';
 import { DiscussionShareRow } from './DiscussionShareRow';
 
@@ -178,6 +179,7 @@ export const PostDiscussionPanel = ({
         CommentInputOrModal={CommentInputOrModal}
         renderTrigger={renderComposerTrigger}
       />
+      <ShareBar post={post} title="Share this post" className="!flex" />
       {showSortHeader && (
         <span className="flex shrink-0 flex-row items-center px-1">
           <Typography
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 134fb8ac3ce..14d3fa49dc0 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -210,7 +210,7 @@ export const PostFocusCard = ({
             />
           )}
 
-          <aside className="w-full max-w-80 laptopL:absolute laptopL:left-full laptopL:top-6 laptopL:ml-6 laptopL:w-44 laptopL:max-w-none">
+          <aside className="w-full max-w-80 laptopXL:absolute laptopXL:left-full laptopXL:top-6 laptopXL:ml-6 laptopXL:w-80 laptopXL:max-w-none">
             <PostSidebarAdWidget
               postId={post.id}
               className={{

From a326b272dfb675efc8014cd04dc7b3332f9b0803 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 4 Jun 2026 14:08:07 +0300
Subject: [PATCH 057/111] feat(discovery): compact share strip with inline
 squads below composer

Replace the heavy ShareBar grid under the composer with the compact
DiscussionShareRow. Add a withSquads option that surfaces the user's
squads as inline avatar buttons; the trailing share action still opens
the full modal with every squad and option. Revert the now-unused
ShareBar title/className props.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/ShareBar.tsx   | 16 ++----
 .../post/discovery/DiscussionShareRow.tsx     | 50 ++++++++++++++++++-
 .../post/discovery/PostDiscussionPanel.tsx    |  3 +-
 3 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/packages/shared/src/components/ShareBar.tsx b/packages/shared/src/components/ShareBar.tsx
index d13a8ff7bbd..8a093b5034a 100644
--- a/packages/shared/src/components/ShareBar.tsx
+++ b/packages/shared/src/components/ShareBar.tsx
@@ -1,6 +1,5 @@
 import type { ReactElement } from 'react';
 import React, { useContext, useMemo, useState } from 'react';
-import classNames from 'classnames';
 import { CopyIcon, FacebookIcon, TwitterIcon, WhatsappIcon } from './icons';
 import type { Post } from '../graphql/posts';
 import { useCopyPostLink } from '../hooks/useCopyPostLink';
@@ -25,8 +24,6 @@ import { useAuthContext } from '../contexts/AuthContext';
 interface ShareBarProps {
   post: Post;
   visibleRows?: number;
-  title?: string;
-  className?: string;
 }
 
 const columns = 4;
@@ -35,8 +32,6 @@ const fixedOptions = 4;
 export default function ShareBar({
   post,
   visibleRows = 2,
-  title = 'Would you recommend this post?',
-  className,
 }: ShareBarProps): ReactElement {
   const [isExpanded, setIsExpanded] = useState(false);
   const maxVisibleOptions = visibleRows * columns;
@@ -103,13 +98,10 @@ export default function ShareBar({
   };
 
   return (
-    <WidgetContainer
-      className={classNames(
-        'hidden flex-col !border-0 p-3 laptop:flex',
-        className,
-      )}
-    >
-      <h4 className="mb-4 font-bold text-text-primary typo-callout">{title}</h4>
+    <WidgetContainer className="hidden flex-col !border-0 p-3 laptop:flex">
+      <h4 className="mb-4 font-bold text-text-primary typo-callout">
+        Would you recommend this post?
+      </h4>
       <div className="grid grid-cols-4 gap-2 gap-y-4">
         <SocialShareButton
           size={ButtonSize.Medium}
diff --git a/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx b/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
index a0be2225838..5bc8d09707e 100644
--- a/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
+++ b/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
+import type { Squad } from '../../../graphql/sources';
 import { Button } from '../../buttons/Button';
 import { ButtonSize, ButtonVariant } from '../../buttons/common';
 import { Tooltip } from '../../tooltip/Tooltip';
@@ -10,17 +11,29 @@ import { useCopyPostLink } from '../../../hooks/useCopyPostLink';
 import { useGetShortUrl } from '../../../hooks';
 import { getShareLink, ShareProvider } from '../../../lib/share';
 import { useLogContext } from '../../../contexts/LogContext';
+import { useAuthContext } from '../../../contexts/AuthContext';
 import { postLogEvent } from '../../../lib/feed';
 import { LogEvent, Origin } from '../../../lib/log';
 import { useLazyModal } from '../../../hooks/useLazyModal';
 import { LazyModal } from '../../modals/common/types';
 import { ReferralCampaignKey } from '../../../lib';
+import { getShareableSquads } from '../../squads/SquadsToShare';
+import SourceProfilePicture from '../../profile/SourceProfilePicture';
+import { ProfileImageSize } from '../../ProfilePicture';
 
 interface DiscussionShareRowProps {
   post: Post;
   className?: string;
+  /**
+   * Surfaces the user's squads as inline avatar buttons for quick sharing.
+   * The trailing "more" action still opens the full share modal with every
+   * squad and option.
+   */
+  withSquads?: boolean;
 }
 
+const maxInlineSquads = 4;
+
 /**
  * Compact share row for the discussion panel. Surfaces the most-used quick
  * actions (copy, X, WhatsApp) inline and defers the long tail (Facebook,
@@ -29,6 +42,7 @@ interface DiscussionShareRowProps {
 export const DiscussionShareRow = ({
   post,
   className,
+  withSquads = false,
 }: DiscussionShareRowProps): ReactElement => {
   const href = post.commentsPermalink;
   const cid = ReferralCampaignKey.SharePost;
@@ -36,6 +50,23 @@ export const DiscussionShareRow = ({
   const [copying, copyLink] = useCopyPostLink();
   const { logEvent } = useLogContext();
   const { openModal } = useLazyModal();
+  const { squads } = useAuthContext();
+  const inlineSquads = withSquads
+    ? getShareableSquads(squads).slice(0, maxInlineSquads)
+    : [];
+
+  const onShareToSquad = (squad: Squad) => {
+    logEvent(postLogEvent(LogEvent.StartShareToSquad, post));
+    openModal({
+      type: LazyModal.CreateSharedPost,
+      props: {
+        squad,
+        preview: post,
+        onSharedSuccessfully: () =>
+          logEvent(postLogEvent(LogEvent.ShareToSquad, post)),
+      },
+    });
+  };
 
   const logShareEvent = (provider: ShareProvider) =>
     logEvent(
@@ -111,7 +142,24 @@ export const DiscussionShareRow = ({
             variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
-        <Tooltip content="More sharing options">
+        {inlineSquads.map((squad) => (
+          <Tooltip key={squad.id} content={`Share to @${squad.handle}`}>
+            <Button
+              aria-label={`Share to ${squad.name}`}
+              icon={
+                <SourceProfilePicture
+                  source={squad}
+                  size={ProfileImageSize.Small}
+                />
+              }
+              onClick={() => onShareToSquad(squad)}
+              size={ButtonSize.Small}
+              type="button"
+              variant={ButtonVariant.Tertiary}
+            />
+          </Tooltip>
+        ))}
+        <Tooltip content="See all squads and sharing options">
           <Button
             aria-label="More sharing options"
             icon={<ShareIcon />}
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index ff457ee5e6e..88f3225916e 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -33,7 +33,6 @@ import {
   TypographyColor,
   TypographyType,
 } from '../../typography/Typography';
-import ShareBar from '../../ShareBar';
 import { DiscussionMetaBar } from './DiscussionMetaBar';
 import { DiscussionShareRow } from './DiscussionShareRow';
 
@@ -179,7 +178,7 @@ export const PostDiscussionPanel = ({
         CommentInputOrModal={CommentInputOrModal}
         renderTrigger={renderComposerTrigger}
       />
-      <ShareBar post={post} title="Share this post" className="!flex" />
+      <DiscussionShareRow post={post} withSquads />
       {showSortHeader && (
         <span className="flex shrink-0 flex-row items-center px-1">
           <Typography

From d811578957a23eccc6a03aa5ece8d1a655165583 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 4 Jun 2026 14:13:28 +0300
Subject: [PATCH 058/111] feat(discovery): render shared posts as the
 underlying article + label

When the focus card post is a shared post, render the underlying
article (title, source, image, summary, toc, tags, metadata) so it
looks identical to a default post. Engagement (votes, comments, share,
ad) stays on the shared post. Add a small link-style label below the
source: "This post was shared from {source}".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 73 +++++++++++++------
 1 file changed, 49 insertions(+), 24 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 14d3fa49dc0..03ee7bb5171 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -2,7 +2,11 @@ import dynamic from 'next/dynamic';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { useRef } from 'react';
 import type { Post } from '../../../graphql/posts';
-import { getReadArticleHref, isVideoPost } from '../../../graphql/posts';
+import {
+  getReadArticleHref,
+  isShareLikePost,
+  isVideoPost,
+} from '../../../graphql/posts';
 import type { SourceTooltip } from '../../../graphql/sources';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import usePostContent from '../../../hooks/usePostContent';
@@ -22,6 +26,7 @@ import { combinedClicks } from '../../../lib/click';
 import { useFeature } from '../../GrowthBookProvider';
 import { feature } from '../../../lib/featureManagement';
 import { SourceStrip } from '../reader/SourceStrip';
+import Link from '../../utilities/Link';
 import { PostSidebarAdWidget } from '../PostSidebarAdWidget';
 import { PostDiscoveryActionBar } from './PostDiscoveryActionBar';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
@@ -71,15 +76,21 @@ export const PostFocusCard = ({
   origin,
   leftVariant,
 }: PostFocusCardProps): ReactElement => {
-  const isVideoType = isVideoPost(post);
-  const { title } = useSmartTitle(post);
+  // A shared post wraps an underlying article in a squad. Render the article
+  // itself so the card matches a default post, and surface where it was shared
+  // from via a small label below the source.
+  const isShared = isShareLikePost(post) && !!post.sharedPost;
+  const article = (isShared ? post.sharedPost : post) as Post;
+  const sharedFromSource = isShared ? post.source : undefined;
+  const isVideoType = isVideoPost(article);
+  const { title } = useSmartTitle(article);
   const { onCopyPostLink, onReadArticle } = usePostContent({ origin, post });
   const { onReadClick: onReaderInstallGateClick } =
     useReaderInstallPromptGate(post);
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
   const focusCommentRef = useRef<() => void>(() => {});
   const readHref = getReadArticleHref(post);
-  const hasToc = (post.toc?.length ?? 0) > 0;
+  const hasToc = (article.toc?.length ?? 0) > 0;
   const handleImageClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
     if (onReaderInstallGateClick(event)) {
       return;
@@ -95,12 +106,12 @@ export const PostFocusCard = ({
       <PostContainer className="relative laptop:border-r-0">
         <div className="relative mx-auto flex w-full min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px]">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
-            {post.source && (
+            {article.source && (
               <SourceStrip
                 compact
                 className="min-w-0 shrink"
                 followButtonVariant={ButtonVariant.Subtle}
-                source={post.source as SourceTooltip}
+                source={article.source as SourceTooltip}
               />
             )}
             <PostHeaderActions
@@ -115,6 +126,17 @@ export const PostFocusCard = ({
             />
           </div>
 
+          {sharedFromSource && (
+            <p className="-mt-2 text-text-tertiary typo-caption1">
+              This post was shared from{' '}
+              <Link href={sharedFromSource.permalink} passHref prefetch={false}>
+                <a className="font-bold text-text-link hover:underline">
+                  {sharedFromSource.name}
+                </a>
+              </Link>
+            </p>
+          )}
+
           <div className="flex min-w-0 items-start gap-4">
             <h1
               className="min-w-0 flex-1 break-words py-2 font-bold text-text-primary typo-large-title"
@@ -122,7 +144,7 @@ export const PostFocusCard = ({
             >
               {title}
             </h1>
-            {!isVideoType && post.image && (
+            {!isVideoType && article.image && (
               <a
                 className="block h-fit w-28 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:w-40"
                 href={readHref}
@@ -136,7 +158,7 @@ export const PostFocusCard = ({
                   fallbackSrc={cloudinaryPostImageCoverPlaceholder}
                   fetchPriority="high"
                   imgAlt="Post cover image"
-                  imgSrc={post.image}
+                  imgSrc={article.image}
                   ratio="52%"
                 />
               </a>
@@ -150,53 +172,56 @@ export const PostFocusCard = ({
             onCopyLinkClick={onCopyPostLink}
           />
 
-          {!isVideoType && post.summary && (
+          {!isVideoType && article.summary && (
             <p
               className="select-text break-words text-text-secondary typo-markdown"
               data-testid="tldr-container"
             >
-              {post.summary}
+              {article.summary}
             </p>
           )}
 
           <PostMetadata
             className="!typo-callout"
-            createdAt={post.createdAt}
+            createdAt={article.createdAt}
             domain={
               !isVideoType &&
-              post.domain &&
-              post.domain.length > 0 && (
+              article.domain &&
+              article.domain.length > 0 && (
                 <TruncateText>
                   From{' '}
                   <ArticleLink
                     className="hover:underline"
-                    href={post.permalink}
+                    href={article.permalink}
                     onClick={onReadArticle}
-                    title={post.domain}
+                    title={article.domain}
                   >
-                    {post.domain}
+                    {article.domain}
                   </ArticleLink>
                 </TruncateText>
               )
             }
             isVideoType={isVideoType}
-            readTime={post.readTime}
+            readTime={article.readTime}
           />
 
-          <PostTagList post={post} />
+          <PostTagList post={article} />
 
           {isVideoType && (
             <div className="shadow-1 flex min-w-0 flex-col gap-4 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3">
               <YoutubeVideo
-                placeholderProps={{ post, onWatchVideo: onReadArticle }}
-                videoId={post.videoId ?? ''}
+                placeholderProps={{
+                  post: article,
+                  onWatchVideo: onReadArticle,
+                }}
+                videoId={article.videoId ?? ''}
               />
-              {post.summary && (
+              {article.summary && (
                 <p
                   className="select-text break-words px-1 pb-1 text-text-secondary typo-markdown"
                   data-testid="tldr-container"
                 >
-                  {post.summary}
+                  {article.summary}
                 </p>
               )}
             </div>
@@ -206,7 +231,7 @@ export const PostFocusCard = ({
             <PostToc
               collapsible
               className="rounded-16 border border-border-subtlest-tertiary bg-transparent"
-              post={post}
+              post={article}
             />
           )}
 
@@ -222,7 +247,7 @@ export const PostFocusCard = ({
 
           {showCodeSnippets && (
             <div className={leftVariant === 'lean' ? 'mb-4' : 'mb-6'}>
-              <PostCodeSnippets post={post} />
+              <PostCodeSnippets post={article} />
             </div>
           )}
 

From b9a0e51bf05a34dd9a0efb8d0a697f0b59487c03 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Mon, 8 Jun 2026 13:00:43 +0300
Subject: [PATCH 059/111] feat(discovery): consistent focus card across post
 types

- Render the underlying post for shared posts so every type uses one card
- Move the origin/type hint to an eyebrow above the title: "Shared via
  {squad}" for shares, "Collection" for collections
- Show video posts with a prominent full-width player right under the
  action bar (no tiny thumbnail), with the TLDR below it
- Keep the small cover thumbnail beside the title for article/share/
  collection types

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 89 ++++++++++---------
 1 file changed, 47 insertions(+), 42 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 03ee7bb5171..f10a6fc404d 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -6,6 +6,7 @@ import {
   getReadArticleHref,
   isShareLikePost,
   isVideoPost,
+  PostType,
 } from '../../../graphql/posts';
 import type { SourceTooltip } from '../../../graphql/sources';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
@@ -76,12 +77,13 @@ export const PostFocusCard = ({
   origin,
   leftVariant,
 }: PostFocusCardProps): ReactElement => {
-  // A shared post wraps an underlying article in a squad. Render the article
-  // itself so the card matches a default post, and surface where it was shared
-  // from via a small label below the source.
+  // A shared post wraps an underlying post (article, video, collection…) in a
+  // squad. Render that underlying post so every type uses the same card, and
+  // surface the type/origin via a small eyebrow label above the title.
   const isShared = isShareLikePost(post) && !!post.sharedPost;
   const article = (isShared ? post.sharedPost : post) as Post;
-  const sharedFromSource = isShared ? post.source : undefined;
+  const sharedVia = isShared ? post.source : undefined;
+  const isCollection = article.type === PostType.Collection;
   const isVideoType = isVideoPost(article);
   const { title } = useSmartTitle(article);
   const { onCopyPostLink, onReadArticle } = usePostContent({ origin, post });
@@ -126,24 +128,35 @@ export const PostFocusCard = ({
             />
           </div>
 
-          {sharedFromSource && (
-            <p className="-mt-2 text-text-tertiary typo-caption1">
-              This post was shared from{' '}
-              <Link href={sharedFromSource.permalink} passHref prefetch={false}>
-                <a className="font-bold text-text-link hover:underline">
-                  {sharedFromSource.name}
-                </a>
-              </Link>
-            </p>
-          )}
-
           <div className="flex min-w-0 items-start gap-4">
-            <h1
-              className="min-w-0 flex-1 break-words py-2 font-bold text-text-primary typo-large-title"
-              data-testid="post-modal-title"
-            >
-              {title}
-            </h1>
+            <div className="flex min-w-0 flex-1 flex-col gap-1">
+              {(sharedVia || isCollection) && (
+                <p className="text-text-tertiary typo-footnote">
+                  {sharedVia ? (
+                    <>
+                      Shared via{' '}
+                      <Link
+                        href={sharedVia.permalink}
+                        passHref
+                        prefetch={false}
+                      >
+                        <a className="font-bold text-text-link hover:underline">
+                          {sharedVia.name}
+                        </a>
+                      </Link>
+                    </>
+                  ) : (
+                    'Collection'
+                  )}
+                </p>
+              )}
+              <h1
+                className="min-w-0 break-words py-1 font-bold text-text-primary typo-large-title"
+                data-testid="post-modal-title"
+              >
+                {title}
+              </h1>
+            </div>
             {!isVideoType && article.image && (
               <a
                 className="block h-fit w-28 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:w-40"
@@ -172,7 +185,19 @@ export const PostFocusCard = ({
             onCopyLinkClick={onCopyPostLink}
           />
 
-          {!isVideoType && article.summary && (
+          {isVideoType && (
+            <div className="shadow-1 flex min-w-0 flex-col gap-4 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3">
+              <YoutubeVideo
+                placeholderProps={{
+                  post: article,
+                  onWatchVideo: onReadArticle,
+                }}
+                videoId={article.videoId ?? ''}
+              />
+            </div>
+          )}
+
+          {article.summary && (
             <p
               className="select-text break-words text-text-secondary typo-markdown"
               data-testid="tldr-container"
@@ -207,26 +232,6 @@ export const PostFocusCard = ({
 
           <PostTagList post={article} />
 
-          {isVideoType && (
-            <div className="shadow-1 flex min-w-0 flex-col gap-4 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3">
-              <YoutubeVideo
-                placeholderProps={{
-                  post: article,
-                  onWatchVideo: onReadArticle,
-                }}
-                videoId={article.videoId ?? ''}
-              />
-              {article.summary && (
-                <p
-                  className="select-text break-words px-1 pb-1 text-text-secondary typo-markdown"
-                  data-testid="tldr-container"
-                >
-                  {article.summary}
-                </p>
-              )}
-            </div>
-          )}
-
           {hasToc && (
             <PostToc
               collapsible

From 9e4b1672f75d7aeeec32d6933a6311b114e564a2 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Mon, 8 Jun 2026 14:14:46 +0300
Subject: [PATCH 060/111] feat(discovery): remove table of contents from the
 focus card

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/PostFocusCard.tsx    | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index f10a6fc404d..afb462d6143 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -21,7 +21,6 @@ import { ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { PostHeaderActions } from '../PostHeaderActions';
 import { PostContainer } from '../common';
 import { PostTagList } from '../tags/PostTagList';
-import PostToc from '../../widgets/PostToc';
 import { TruncateText } from '../../utilities';
 import { combinedClicks } from '../../../lib/click';
 import { useFeature } from '../../GrowthBookProvider';
@@ -92,7 +91,6 @@ export const PostFocusCard = ({
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
   const focusCommentRef = useRef<() => void>(() => {});
   const readHref = getReadArticleHref(post);
-  const hasToc = (article.toc?.length ?? 0) > 0;
   const handleImageClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
     if (onReaderInstallGateClick(event)) {
       return;
@@ -232,14 +230,6 @@ export const PostFocusCard = ({
 
           <PostTagList post={article} />
 
-          {hasToc && (
-            <PostToc
-              collapsible
-              className="rounded-16 border border-border-subtlest-tertiary bg-transparent"
-              post={article}
-            />
-          )}
-
           <aside className="w-full max-w-80 laptopXL:absolute laptopXL:left-full laptopXL:top-6 laptopXL:ml-6 laptopXL:w-80 laptopXL:max-w-none">
             <PostSidebarAdWidget
               postId={post.id}

From d1a21bf7ceb36e3dc957f8015ee75bca29a8bdb9 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Mon, 8 Jun 2026 14:27:30 +0300
Subject: [PATCH 061/111] feat(discovery): extend discovery layout to
 shares/collections + modals

- Add a shared usePostDiscoveryExperience hook (eligibility + flag) so
  the post page and post modal stay in sync
- Make Share and Collection posts discovery-eligible so squad/shared
  posts render with the focus card instead of the old experience
- Render PostFocusCard inside the article/share/collection modals when
  the discovery experience is on, so the modal matches the page

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/modals/ArticlePostModal.tsx    | 43 ++++++++------
 .../components/modals/CollectionPostModal.tsx | 43 ++++++++------
 .../src/components/modals/SharePostModal.tsx  | 58 +++++++++++--------
 .../hooks/post/usePostDiscoveryExperience.ts  | 38 ++++++++++++
 packages/webapp/pages/posts/[id]/index.tsx    |  6 +-
 5 files changed, 125 insertions(+), 63 deletions(-)
 create mode 100644 packages/shared/src/hooks/post/usePostDiscoveryExperience.ts

diff --git a/packages/shared/src/components/modals/ArticlePostModal.tsx b/packages/shared/src/components/modals/ArticlePostModal.tsx
index 5d02b93cf38..71ea092cd7a 100644
--- a/packages/shared/src/components/modals/ArticlePostModal.tsx
+++ b/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,6 +31,7 @@ export default function ArticlePostModal({
     isDisplayed: props.isOpen,
     offset: 0,
   });
+  const { showDiscovery } = usePostDiscoveryExperience(post);
 
   return (
     <BasePostModal
@@ -43,24 +46,28 @@ 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} />
+      ) : (
+        <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>
   );
 }
diff --git a/packages/shared/src/components/modals/CollectionPostModal.tsx b/packages/shared/src/components/modals/CollectionPostModal.tsx
index 4407085abc6..ebfe10b677d 100644
--- a/packages/shared/src/components/modals/CollectionPostModal.tsx
+++ b/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,6 +33,7 @@ export default function CollectionPostModal({
     isDisplayed: props.isOpen,
     offset: 0,
   });
+  const { showDiscovery } = usePostDiscoveryExperience(post);
 
   return (
     <BasePostModal
@@ -45,24 +48,28 @@ 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} />
+      ) : (
+        <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>
   );
 }
diff --git a/packages/shared/src/components/modals/SharePostModal.tsx b/packages/shared/src/components/modals/SharePostModal.tsx
index 96d4a6a1547..09ff6ff8ef6 100644
--- a/packages/shared/src/components/modals/SharePostModal.tsx
+++ b/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,6 +33,7 @@ export default function PostModal({
     isDisplayed: props.isOpen,
     offset: 0,
   });
+  const { showDiscovery } = usePostDiscoveryExperience(post);
 
   return (
     <BasePostModal
@@ -46,29 +49,38 @@ 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} />
+      ) : (
+        <>
+          <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>
   );
 }
diff --git a/packages/shared/src/hooks/post/usePostDiscoveryExperience.ts b/packages/shared/src/hooks/post/usePostDiscoveryExperience.ts
new file mode 100644
index 00000000000..7084d896af8
--- /dev/null
+++ b/packages/shared/src/hooks/post/usePostDiscoveryExperience.ts
@@ -0,0 +1,38 @@
+import type { Post } from '../../graphql/posts';
+import { PostType } from '../../graphql/posts';
+import { useConditionalFeature } from '../useConditionalFeature';
+import { featurePostDiscoveryExperience } from '../../lib/featureManagement';
+
+// Post types the Pinterest-style discovery layout knows how to render. Shares
+// and collections are surfaced via the underlying post in PostFocusCard.
+export const postDiscoveryEligibleTypes: PostType[] = [
+  PostType.Article,
+  PostType.VideoYouTube,
+  PostType.Share,
+  PostType.Collection,
+];
+
+export const isPostDiscoveryEligible = (
+  post?: Pick<Post, 'type'> | null,
+): boolean => !!post && postDiscoveryEligibleTypes.includes(post.type);
+
+interface UsePostDiscoveryExperience {
+  isEligible: boolean;
+  showDiscovery: boolean;
+}
+
+/**
+ * Single source of truth for whether a post should render with the discovery
+ * layout, so the post page and the post modal stay in sync.
+ */
+export const usePostDiscoveryExperience = (
+  post?: Post,
+): UsePostDiscoveryExperience => {
+  const isEligible = isPostDiscoveryEligible(post);
+  const { value: isFlagOn } = useConditionalFeature({
+    feature: featurePostDiscoveryExperience,
+    shouldEvaluate: isEligible,
+  });
+
+  return { isEligible, showDiscovery: isEligible && isFlagOn };
+};
diff --git a/packages/webapp/pages/posts/[id]/index.tsx b/packages/webapp/pages/posts/[id]/index.tsx
index 5caeba24ade..5d205e79b5d 100644
--- a/packages/webapp/pages/posts/[id]/index.tsx
+++ b/packages/webapp/pages/posts/[id]/index.tsx
@@ -33,6 +33,7 @@ import {
   useViewSize,
   ViewSize,
 } from '@dailydotdev/shared/src/hooks';
+import { isPostDiscoveryEligible } from '@dailydotdev/shared/src/hooks/post/usePostDiscoveryExperience';
 import { featurePostDiscoveryExperience } from '@dailydotdev/shared/src/lib/featureManagement';
 import { PostDiscoveryLayout } from '@dailydotdev/shared/src/components/post/discovery/PostDiscoveryLayout';
 import { usePrivateSourceJoin } from '@dailydotdev/shared/src/hooks/source/usePrivateSourceJoin';
@@ -206,10 +207,7 @@ export const PostPage = ({
     },
   });
   const featureTheme = useFeatureTheme();
-  const isDiscoveryEligible = [
-    PostType.Article,
-    PostType.VideoYouTube,
-  ].includes(post?.type);
+  const isDiscoveryEligible = isPostDiscoveryEligible(post);
   const { value: isDiscoveryFlagOn } = useConditionalFeature({
     feature: featurePostDiscoveryExperience,
     shouldEvaluate: isDiscoveryEligible,

From 389d91363f85af2f790acd63771ce5e0e3d9c109 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Mon, 8 Jun 2026 15:28:39 +0300
Subject: [PATCH 062/111] feat(discovery): render full post body per type, not
 just a TLDR

- Render the full markdown body (contentHtml + content embeds) for
  collections and squad posts, matching production, instead of a TLDR
- Keep the TLDR summary only for articles/videos which have no body
- Add Freeform and Welcome to discovery eligibility now that their full
  content renders correctly

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 23 +++++++++++++------
 .../hooks/post/usePostDiscoveryExperience.ts  |  8 +++++--
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index afb462d6143..f7f77fa1900 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -15,6 +15,8 @@ import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
 import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromptGate';
 import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
+import Markdown from '../../Markdown';
+import { ContentEmbeds } from '../../contentEmbeds/ContentEmbeds';
 import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
 import { ButtonSize, ButtonVariant } from '../../buttons/Button';
@@ -195,13 +197,20 @@ export const PostFocusCard = ({
             </div>
           )}
 
-          {article.summary && (
-            <p
-              className="select-text break-words text-text-secondary typo-markdown"
-              data-testid="tldr-container"
-            >
-              {article.summary}
-            </p>
+          {article.contentHtml ? (
+            <>
+              <Markdown content={article.contentHtml} className="break-words" />
+              <ContentEmbeds embeds={article.contentEmbeds} variant="post" />
+            </>
+          ) : (
+            article.summary && (
+              <p
+                className="select-text break-words text-text-secondary typo-markdown"
+                data-testid="tldr-container"
+              >
+                {article.summary}
+              </p>
+            )
           )}
 
           <PostMetadata
diff --git a/packages/shared/src/hooks/post/usePostDiscoveryExperience.ts b/packages/shared/src/hooks/post/usePostDiscoveryExperience.ts
index 7084d896af8..0c8cbb382c7 100644
--- a/packages/shared/src/hooks/post/usePostDiscoveryExperience.ts
+++ b/packages/shared/src/hooks/post/usePostDiscoveryExperience.ts
@@ -3,13 +3,17 @@ import { PostType } from '../../graphql/posts';
 import { useConditionalFeature } from '../useConditionalFeature';
 import { featurePostDiscoveryExperience } from '../../lib/featureManagement';
 
-// Post types the Pinterest-style discovery layout knows how to render. Shares
-// and collections are surfaced via the underlying post in PostFocusCard.
+// Post types the Pinterest-style discovery layout knows how to render. Each is
+// rendered fully in PostFocusCard: articles/videos show the TLDR, while
+// collections and squad posts render their full markdown body. Specialized
+// types (poll, brief, social, digest) keep their dedicated layouts.
 export const postDiscoveryEligibleTypes: PostType[] = [
   PostType.Article,
   PostType.VideoYouTube,
   PostType.Share,
   PostType.Collection,
+  PostType.Freeform,
+  PostType.Welcome,
 ];
 
 export const isPostDiscoveryEligible = (

From c618c7991463f50d4db7d59df215c4a736c16d59 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Mon, 8 Jun 2026 15:48:20 +0300
Subject: [PATCH 063/111] feat(discovery): source hover card on shared-via link
 + modal width

- Wrap the "Shared via {source}" link in the same HoverCard +
  SourceEntityCard used across squads/sources, so hovering shows the
  entity tooltip
- Size the discovery post modal to Large (~content width) instead of
  XLarge, so the modal matches the focus card content / article page

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/modals/ArticlePostModal.tsx    |  1 +
 .../components/modals/CollectionPostModal.tsx |  1 +
 .../src/components/modals/SharePostModal.tsx  |  2 +-
 .../post/discovery/PostFocusCard.tsx          | 45 ++++++++++++-------
 4 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/packages/shared/src/components/modals/ArticlePostModal.tsx b/packages/shared/src/components/modals/ArticlePostModal.tsx
index 71ea092cd7a..689b6d19357 100644
--- a/packages/shared/src/components/modals/ArticlePostModal.tsx
+++ b/packages/shared/src/components/modals/ArticlePostModal.tsx
@@ -38,6 +38,7 @@ export default function ArticlePostModal({
       {...props}
       post={post}
       onAfterOpen={onLoad}
+      size={showDiscovery ? Modal.Size.Large : Modal.Size.XLarge}
       onRequestClose={onRequestClose}
       postType={PostType.Article}
       source={post.source}
diff --git a/packages/shared/src/components/modals/CollectionPostModal.tsx b/packages/shared/src/components/modals/CollectionPostModal.tsx
index ebfe10b677d..f601174c881 100644
--- a/packages/shared/src/components/modals/CollectionPostModal.tsx
+++ b/packages/shared/src/components/modals/CollectionPostModal.tsx
@@ -40,6 +40,7 @@ export default function CollectionPostModal({
       {...props}
       post={post}
       onAfterOpen={onLoad}
+      size={showDiscovery ? Modal.Size.Large : Modal.Size.XLarge}
       onRequestClose={onRequestClose}
       postType={PostType.Collection}
       source={post.source}
diff --git a/packages/shared/src/components/modals/SharePostModal.tsx b/packages/shared/src/components/modals/SharePostModal.tsx
index 09ff6ff8ef6..6aa2ad26b72 100644
--- a/packages/shared/src/components/modals/SharePostModal.tsx
+++ b/packages/shared/src/components/modals/SharePostModal.tsx
@@ -40,7 +40,7 @@ export default function PostModal({
       {...props}
       post={post}
       onAfterOpen={onLoad}
-      size={Modal.Size.XLarge}
+      size={showDiscovery ? Modal.Size.Large : Modal.Size.XLarge}
       onRequestClose={onRequestClose}
       postType={PostType.Share}
       source={post.source}
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index f7f77fa1900..ea84012f442 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -29,6 +29,8 @@ import { useFeature } from '../../GrowthBookProvider';
 import { feature } from '../../../lib/featureManagement';
 import { SourceStrip } from '../reader/SourceStrip';
 import Link from '../../utilities/Link';
+import HoverCard from '../../cards/common/HoverCard';
+import SourceEntityCard from '../../cards/entity/SourceEntityCard';
 import { PostSidebarAdWidget } from '../PostSidebarAdWidget';
 import { PostDiscoveryActionBar } from './PostDiscoveryActionBar';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
@@ -130,26 +132,35 @@ export const PostFocusCard = ({
 
           <div className="flex min-w-0 items-start gap-4">
             <div className="flex min-w-0 flex-1 flex-col gap-1">
-              {(sharedVia || isCollection) && (
+              {sharedVia && (
                 <p className="text-text-tertiary typo-footnote">
-                  {sharedVia ? (
-                    <>
-                      Shared via{' '}
-                      <Link
-                        href={sharedVia.permalink}
-                        passHref
-                        prefetch={false}
-                      >
-                        <a className="font-bold text-text-link hover:underline">
-                          {sharedVia.name}
-                        </a>
-                      </Link>
-                    </>
-                  ) : (
-                    'Collection'
-                  )}
+                  Shared via{' '}
+                  <HoverCard
+                    appendTo={globalThis?.document?.body}
+                    side="top"
+                    align="start"
+                    sideOffset={8}
+                    trigger={
+                      <span>
+                        <Link
+                          href={sharedVia.permalink}
+                          passHref
+                          prefetch={false}
+                        >
+                          <a className="font-bold text-text-link hover:underline">
+                            {sharedVia.name}
+                          </a>
+                        </Link>
+                      </span>
+                    }
+                  >
+                    <SourceEntityCard source={sharedVia as SourceTooltip} />
+                  </HoverCard>
                 </p>
               )}
+              {!sharedVia && isCollection && (
+                <p className="text-text-tertiary typo-footnote">Collection</p>
+              )}
               <h1
                 className="min-w-0 break-words py-1 font-bold text-text-primary typo-large-title"
                 data-testid="post-modal-title"

From 68b2ed11db720a7daf1e29b9c62f647758f658ed Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Mon, 8 Jun 2026 17:34:30 +0300
Subject: [PATCH 064/111] feat(discovery): match bottom share strip to top,
 hide it with no comments

- Give the bottom "Share this post" strip the same withSquads treatment
  as the one below the composer
- Hide the bottom strip when the post has no comments (keep the meta bar
  for the reader rail), avoiding a redundant strip on empty discussions

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/post/discovery/PostDiscussionPanel.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index 88f3225916e..9fc0cdcbcf4 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -88,6 +88,7 @@ export const PostDiscussionPanel = ({
   const { sortCommentsBy: sortBy, updateSortCommentsBy: setSortBy } =
     useSettingsContext();
   const isNewestFirst = sortBy === SortCommentsBy.NewestFirst;
+  const hasComments = (post.numComments ?? 0) > 0;
   const commentRef = useRef<NewCommentRef | null>(null);
   const rootRef = useRef<HTMLElement | null>(null);
   const [isComposerOpen, setIsComposerOpen] = useState(false);
@@ -223,10 +224,12 @@ export const PostDiscussionPanel = ({
           removeTopSpacing
         />
       </div>
-      <div className="flex shrink-0 flex-col gap-3 pt-3">
-        {showMetaBar && <DiscussionMetaBar post={post} />}
-        <DiscussionShareRow post={post} />
-      </div>
+      {(showMetaBar || hasComments) && (
+        <div className="flex shrink-0 flex-col gap-3 pt-3">
+          {showMetaBar && <DiscussionMetaBar post={post} />}
+          {hasComments && <DiscussionShareRow post={post} withSquads />}
+        </div>
+      )}
     </section>
   );
 };

From dc7fca632170b52f52fabe1114fc450c116507c9 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Mon, 8 Jun 2026 17:36:12 +0300
Subject: [PATCH 065/111] style(discovery): widen gap before the source follow
 button

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/post/reader/SourceStrip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/reader/SourceStrip.tsx b/packages/shared/src/components/post/reader/SourceStrip.tsx
index 5a38c66a77b..9acf802c094 100644
--- a/packages/shared/src/components/post/reader/SourceStrip.tsx
+++ b/packages/shared/src/components/post/reader/SourceStrip.tsx
@@ -50,7 +50,7 @@ export function SourceStrip({
     <div
       className={classNames(
         'flex min-w-0 items-center',
-        compact ? 'gap-1.5' : 'gap-2',
+        compact ? 'gap-3' : 'gap-2',
         className,
       )}
     >

From 80aacfa925fbced077eb4174c9172c6b1ca56ac4 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Mon, 8 Jun 2026 23:54:30 +0300
Subject: [PATCH 066/111] fix(discovery): let the focus card scroll inside the
 post modal

The focus card wrapped its content in PostContainer (flex-1 +
overflow-hidden) and an overflow-hidden article. Inside the modal's
fixed-height flex column that clipped long content (e.g. collections)
instead of letting the modal overlay scroll. Drop the overflow-hidden
and the flex-1 wrapper so the card grows naturally, matching the
regular PostContentContainer.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../shared/src/components/post/discovery/PostFocusCard.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index ea84012f442..b327aeb52ad 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -21,7 +21,6 @@ import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
 import { ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { PostHeaderActions } from '../PostHeaderActions';
-import { PostContainer } from '../common';
 import { PostTagList } from '../tags/PostTagList';
 import { TruncateText } from '../../utilities';
 import { combinedClicks } from '../../../lib/click';
@@ -104,10 +103,10 @@ export const PostFocusCard = ({
 
   return (
     <article
-      className="flex w-full flex-col overflow-hidden rounded-24 bg-background-default"
+      className="flex w-full flex-col rounded-24 bg-background-default"
       data-testid="post-focus-card"
     >
-      <PostContainer className="relative laptop:border-r-0">
+      <div className="flex flex-col px-4 tablet:px-6 laptop:px-8">
         <div className="relative mx-auto flex w-full min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px]">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
             {article.source && (
@@ -277,7 +276,7 @@ export const PostFocusCard = ({
             origin={origin}
           />
         </div>
-      </PostContainer>
+      </div>
     </article>
   );
 };

From c4be4dd40a3912ecc1ae5e56898bad860d6a5b4a Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 00:01:08 +0300
Subject: [PATCH 067/111] feat(discovery): show sharer as author, refine
 shared-via + title row

- Shared posts now lead with the person who shared (UserShortInfo with
  profile tooltip) instead of the underlying article's source
- Add the source avatar next to the "Shared via" link
- Move the eyebrow above the title row so the cover thumbnail top-aligns
  with the title, and widen the eyebrow-to-title gap

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 140 +++++++++++-------
 1 file changed, 83 insertions(+), 57 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index b327aeb52ad..06b22faa019 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -30,6 +30,9 @@ import { SourceStrip } from '../reader/SourceStrip';
 import Link from '../../utilities/Link';
 import HoverCard from '../../cards/common/HoverCard';
 import SourceEntityCard from '../../cards/entity/SourceEntityCard';
+import { UserShortInfo } from '../../profile/UserShortInfo';
+import { ProfileImageSize } from '../../ProfilePicture';
+import type { UserShortProfile } from '../../../lib/user';
 import { PostSidebarAdWidget } from '../PostSidebarAdWidget';
 import { PostDiscoveryActionBar } from './PostDiscoveryActionBar';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
@@ -86,6 +89,9 @@ export const PostFocusCard = ({
   const article = (isShared ? post.sharedPost : post) as Post;
   const sharedVia = isShared ? post.source : undefined;
   const isCollection = article.type === PostType.Collection;
+  // Shared posts lead with the person who shared it; the squad/source is
+  // surfaced via the "Shared via" eyebrow below the author.
+  const sharedByAuthor = isShared ? post.author : undefined;
   const isVideoType = isVideoPost(article);
   const { title } = useSmartTitle(article);
   const { onCopyPostLink, onReadArticle } = usePostContent({ origin, post });
@@ -109,13 +115,24 @@ export const PostFocusCard = ({
       <div className="flex flex-col px-4 tablet:px-6 laptop:px-8">
         <div className="relative mx-auto flex w-full min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px]">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
-            {article.source && (
-              <SourceStrip
-                compact
-                className="min-w-0 shrink"
-                followButtonVariant={ButtonVariant.Subtle}
-                source={article.source as SourceTooltip}
+            {sharedByAuthor ? (
+              <UserShortInfo
+                user={sharedByAuthor as unknown as UserShortProfile}
+                imageSize={ProfileImageSize.Medium}
+                className={{
+                  container: 'min-w-0 !p-0 hover:bg-transparent',
+                  textWrapper: 'min-w-0',
+                }}
               />
+            ) : (
+              article.source && (
+                <SourceStrip
+                  compact
+                  className="min-w-0 shrink"
+                  followButtonVariant={ButtonVariant.Subtle}
+                  source={article.source as SourceTooltip}
+                />
+              )
             )}
             <PostHeaderActions
               buttonSize={ButtonSize.Small}
@@ -129,63 +146,72 @@ export const PostFocusCard = ({
             />
           </div>
 
-          <div className="flex min-w-0 items-start gap-4">
-            <div className="flex min-w-0 flex-1 flex-col gap-1">
-              {sharedVia && (
-                <p className="text-text-tertiary typo-footnote">
-                  Shared via{' '}
-                  <HoverCard
-                    appendTo={globalThis?.document?.body}
-                    side="top"
-                    align="start"
-                    sideOffset={8}
-                    trigger={
-                      <span>
-                        <Link
-                          href={sharedVia.permalink}
-                          passHref
-                          prefetch={false}
-                        >
-                          <a className="font-bold text-text-link hover:underline">
-                            {sharedVia.name}
-                          </a>
-                        </Link>
-                      </span>
-                    }
-                  >
-                    <SourceEntityCard source={sharedVia as SourceTooltip} />
-                  </HoverCard>
-                </p>
-              )}
-              {!sharedVia && isCollection && (
-                <p className="text-text-tertiary typo-footnote">Collection</p>
-              )}
+          <div className="flex min-w-0 flex-col gap-3">
+            {sharedVia && (
+              <p className="text-text-tertiary typo-footnote">
+                Shared via{' '}
+                <HoverCard
+                  appendTo={globalThis?.document?.body}
+                  side="top"
+                  align="start"
+                  sideOffset={8}
+                  trigger={
+                    <span>
+                      <Link
+                        href={sharedVia.permalink}
+                        passHref
+                        prefetch={false}
+                      >
+                        <a className="inline-flex items-center gap-1 font-bold text-text-link hover:underline">
+                          {sharedVia.image && (
+                            <img
+                              src={sharedVia.image}
+                              alt=""
+                              aria-hidden
+                              className="size-4 rounded-full object-cover"
+                              loading="lazy"
+                            />
+                          )}
+                          {sharedVia.name}
+                        </a>
+                      </Link>
+                    </span>
+                  }
+                >
+                  <SourceEntityCard source={sharedVia as SourceTooltip} />
+                </HoverCard>
+              </p>
+            )}
+            {!sharedVia && isCollection && (
+              <p className="text-text-tertiary typo-footnote">Collection</p>
+            )}
+            <div className="flex min-w-0 items-start gap-4">
               <h1
-                className="min-w-0 break-words py-1 font-bold text-text-primary typo-large-title"
+                className="min-w-0 flex-1 break-words font-bold text-text-primary typo-large-title"
                 data-testid="post-modal-title"
               >
                 {title}
               </h1>
+              {!isVideoType && article.image && (
+                <a
+                  className="block h-fit w-28 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:w-40"
+                  href={readHref}
+                  onClick={handleImageClick}
+                  rel="noopener"
+                  target="_blank"
+                  title="Go to post"
+                >
+                  <LazyImage
+                    eager
+                    fallbackSrc={cloudinaryPostImageCoverPlaceholder}
+                    fetchPriority="high"
+                    imgAlt="Post cover image"
+                    imgSrc={article.image}
+                    ratio="52%"
+                  />
+                </a>
+              )}
             </div>
-            {!isVideoType && article.image && (
-              <a
-                className="block h-fit w-28 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:w-40"
-                href={readHref}
-                onClick={handleImageClick}
-                rel="noopener"
-                target="_blank"
-                title="Go to post"
-              >
-                <LazyImage
-                  eager
-                  fallbackSrc={cloudinaryPostImageCoverPlaceholder}
-                  fetchPriority="high"
-                  imgAlt="Post cover image"
-                  imgSrc={article.image}
-                  ratio="52%"
-                />
-              </a>
-            )}
           </div>
 
           <PostDiscoveryActionBar

From 0952db7ede9eabf6c732bc3993d03e6f4368fdd9 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 00:12:04 +0300
Subject: [PATCH 068/111] fix(discovery): center shared-via row, trim author to
 two lines

- Make the "Shared via" eyebrow a vertically-centered flex row so the
  source avatar and text align, instead of sitting on the baseline
- Hide the author bio so the sharer shows name + handle only, matching
  the comment-section display

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../shared/src/components/post/discovery/PostFocusCard.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 06b22faa019..2984e86e5dd 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -119,6 +119,7 @@ export const PostFocusCard = ({
               <UserShortInfo
                 user={sharedByAuthor as unknown as UserShortProfile}
                 imageSize={ProfileImageSize.Medium}
+                showDescription={false}
                 className={{
                   container: 'min-w-0 !p-0 hover:bg-transparent',
                   textWrapper: 'min-w-0',
@@ -148,15 +149,15 @@ export const PostFocusCard = ({
 
           <div className="flex min-w-0 flex-col gap-3">
             {sharedVia && (
-              <p className="text-text-tertiary typo-footnote">
-                Shared via{' '}
+              <p className="flex items-center gap-1 text-text-tertiary typo-footnote">
+                <span>Shared via</span>
                 <HoverCard
                   appendTo={globalThis?.document?.body}
                   side="top"
                   align="start"
                   sideOffset={8}
                   trigger={
-                    <span>
+                    <span className="inline-flex items-center">
                       <Link
                         href={sharedVia.permalink}
                         passHref

From ae49f21bedc9cfc83f0ed850608c838cca681b6e Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 00:14:23 +0300
Subject: [PATCH 069/111] fix(discovery): show follow button on the shared post
 author

Enable the follow action on the author shown at the top of shared posts
so it appears for authors the viewer doesn't follow, restoring parity
with the source follow button.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/post/discovery/PostFocusCard.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 2984e86e5dd..e293e289a55 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -120,6 +120,8 @@ export const PostFocusCard = ({
                 user={sharedByAuthor as unknown as UserShortProfile}
                 imageSize={ProfileImageSize.Medium}
                 showDescription={false}
+                showFollow
+                showSubscribe={false}
                 className={{
                   container: 'min-w-0 !p-0 hover:bg-transparent',
                   textWrapper: 'min-w-0',

From d0c0d8d13ab3693b3bcb6358b82d1678da613ba8 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 00:24:26 +0300
Subject: [PATCH 070/111] feat(discovery): bring back collection sources as an
 inline carousel

Collections lost their reference sources when the right rail went away.
Reintroduce them in the main reading flow as a horizontal "N sources"
carousel of source cards (avatar + source + title), reusing
useRelatedPosts, placed right after the collection body.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/CollectionSources.tsx      | 85 +++++++++++++++++++
 .../post/discovery/PostFocusCard.tsx          |  3 +
 2 files changed, 88 insertions(+)
 create mode 100644 packages/shared/src/components/post/discovery/CollectionSources.tsx

diff --git a/packages/shared/src/components/post/discovery/CollectionSources.tsx b/packages/shared/src/components/post/discovery/CollectionSources.tsx
new file mode 100644
index 00000000000..1250d036ab1
--- /dev/null
+++ b/packages/shared/src/components/post/discovery/CollectionSources.tsx
@@ -0,0 +1,85 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { Post } from '../../../graphql/posts';
+import { PostRelationType } from '../../../graphql/posts';
+import { useRelatedPosts } from '../../../hooks/post/useRelatedPosts';
+import { SourceAvatar } from '../../profile/source';
+import { ProfileImageSize } from '../../ProfilePicture';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../typography/Typography';
+import { pluralize } from '../../../lib/strings';
+
+interface CollectionSourcesProps {
+  post: Post;
+}
+
+/**
+ * The collection's reference sources, integrated into the main reading flow as
+ * a horizontal carousel of source cards instead of the classic right-rail list.
+ */
+export const CollectionSources = ({
+  post,
+}: CollectionSourcesProps): ReactElement | null => {
+  const { relatedPosts, isLoading } = useRelatedPosts({
+    postId: post.id,
+    relationType: PostRelationType.Collection,
+    perPage: 20,
+  });
+  const edges = relatedPosts?.pages.flatMap((page) => page.edges) ?? [];
+
+  if (!isLoading && edges.length === 0) {
+    return null;
+  }
+
+  const count = post.numCollectionSources ?? edges.length;
+
+  return (
+    <section className="flex flex-col gap-3">
+      <Typography
+        tag={TypographyTag.H2}
+        type={TypographyType.Body}
+        color={TypographyColor.Primary}
+        bold
+      >
+        {count} {pluralize('source', count)}
+      </Typography>
+      <div className="flex gap-3 overflow-x-auto pb-1">
+        {edges.map(({ node }) => (
+          <a
+            key={node.id}
+            href={node.commentsPermalink}
+            rel="noopener"
+            target="_blank"
+            title={node.title}
+            className="flex w-64 shrink-0 flex-col gap-2 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-3 transition-colors hover:border-border-subtlest-primary hover:bg-surface-hover"
+          >
+            <div className="flex min-w-0 items-center gap-2">
+              <SourceAvatar
+                source={node.source}
+                size={ProfileImageSize.Small}
+              />
+              <Typography
+                type={TypographyType.Footnote}
+                color={TypographyColor.Tertiary}
+                className="truncate"
+              >
+                {node.source.name}
+              </Typography>
+            </div>
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Primary}
+              className="line-clamp-3"
+            >
+              {node.title}
+            </Typography>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+};
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index e293e289a55..1ee525f18a7 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -36,6 +36,7 @@ import type { UserShortProfile } from '../../../lib/user';
 import { PostSidebarAdWidget } from '../PostSidebarAdWidget';
 import { PostDiscoveryActionBar } from './PostDiscoveryActionBar';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
+import { CollectionSources } from './CollectionSources';
 
 const PostCodeSnippets = dynamic(() =>
   import(/* webpackChunkName: "postCodeSnippets" */ '../PostCodeSnippets').then(
@@ -278,6 +279,8 @@ export const PostFocusCard = ({
 
           <PostTagList post={article} />
 
+          {isCollection && <CollectionSources post={article} />}
+
           <aside className="w-full max-w-80 laptopXL:absolute laptopXL:left-full laptopXL:top-6 laptopXL:ml-6 laptopXL:w-80 laptopXL:max-w-none">
             <PostSidebarAdWidget
               postId={post.id}

From 2dd2ad04af53cafaef97b6a730c728ccf1f0ccc7 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 00:28:37 +0300
Subject: [PATCH 071/111] fix(discovery): subtle, smaller follow button beside
 the author

Replace UserShortInfo's primary built-in follow with a dedicated
FollowButton: Subtle variant, compact (!h-7 !px-2), and a gap-3 to its
left, matching the source strip's follow treatment.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 1ee525f18a7..2837da78779 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -33,6 +33,8 @@ import SourceEntityCard from '../../cards/entity/SourceEntityCard';
 import { UserShortInfo } from '../../profile/UserShortInfo';
 import { ProfileImageSize } from '../../ProfilePicture';
 import type { UserShortProfile } from '../../../lib/user';
+import { FollowButton } from '../../contentPreference/FollowButton';
+import { ContentPreferenceType } from '../../../graphql/contentPreference';
 import { PostSidebarAdWidget } from '../PostSidebarAdWidget';
 import { PostDiscoveryActionBar } from './PostDiscoveryActionBar';
 import { PostDiscussionPanel } from './PostDiscussionPanel';
@@ -117,17 +119,27 @@ export const PostFocusCard = ({
         <div className="relative mx-auto flex w-full min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px]">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
             {sharedByAuthor ? (
-              <UserShortInfo
-                user={sharedByAuthor as unknown as UserShortProfile}
-                imageSize={ProfileImageSize.Medium}
-                showDescription={false}
-                showFollow
-                showSubscribe={false}
-                className={{
-                  container: 'min-w-0 !p-0 hover:bg-transparent',
-                  textWrapper: 'min-w-0',
-                }}
-              />
+              <div className="flex min-w-0 items-center gap-3">
+                <UserShortInfo
+                  user={sharedByAuthor as unknown as UserShortProfile}
+                  imageSize={ProfileImageSize.Medium}
+                  showDescription={false}
+                  className={{
+                    container: 'min-w-0 !p-0 hover:bg-transparent',
+                    textWrapper: 'min-w-0',
+                  }}
+                />
+                <FollowButton
+                  className="shrink-0"
+                  entityId={sharedByAuthor.id}
+                  entityName={`@${sharedByAuthor.username}`}
+                  type={ContentPreferenceType.User}
+                  status={sharedByAuthor.contentPreference?.status}
+                  variant={ButtonVariant.Subtle}
+                  showSubscribe={false}
+                  buttonClassName="!h-7 !px-2"
+                />
+              </div>
             ) : (
               article.source && (
                 <SourceStrip

From 670cd83ebe0522b98d93ac54c7dcc2aad37855e0 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 00:31:24 +0300
Subject: [PATCH 072/111] style(discovery): match post stats text color to the
 icons (secondary)

Recolor the DiscussionMetaBar stats (upvotes/comments/analytics/sort)
from text-tertiary to text-secondary so the numbers match the icon color.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/DiscussionMetaBar.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx b/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx
index 9cf5b285bbd..d2e0c7e678d 100644
--- a/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx
+++ b/packages/shared/src/components/post/discovery/DiscussionMetaBar.tsx
@@ -45,7 +45,7 @@ export const DiscussionMetaBar = ({
   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',
+        'flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 text-text-secondary typo-callout',
         className,
       )}
     >
@@ -67,7 +67,7 @@ export const DiscussionMetaBar = ({
             <ClickableText
               tag="a"
               className="gap-1"
-              textClassName="text-text-tertiary"
+              textClassName="text-text-secondary"
             >
               <AnalyticsIcon />
               Analytics
@@ -93,7 +93,7 @@ export const DiscussionMetaBar = ({
           }
           aria-label={sortLabel}
           title={sortLabel}
-          className="!text-text-tertiary"
+          className="!text-text-secondary"
         />
       </div>
       {rightSlot && (

From 0e7ad5b0cbb5090ef3308c95c62c291a824abffe Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 00:35:51 +0300
Subject: [PATCH 073/111] feat(discovery): clickable stats row with reposts and
 awards

Add PostUpvotesCommentsCount above the action bar so upvotes, comments,
reposts, and awards each show as clickable text that opens its dedicated
popup (Upvoted by / Reposts / Awards). Make the action-bar vote/comment
buttons icon-only so stats are separate from the action buttons.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostDiscoveryActionBar.tsx         | 11 ++---------
 .../src/components/post/discovery/PostFocusCard.tsx   |  8 ++++++++
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 46204264a77..1386f45c4bf 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -27,7 +27,6 @@ import {
 } from '../../icons';
 import { Tooltip } from '../../tooltip/Tooltip';
 import Link from '../../utilities/Link';
-import { largeNumberFormat } from '../../../lib';
 import { canViewPostAnalytics } from '../../../lib/user';
 import { webappUrl } from '../../../lib/constants';
 import { PostMenuOptions } from '../PostMenuOptions';
@@ -61,8 +60,6 @@ export const PostDiscoveryActionBar = ({
 
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
   const isDownvoteActive = post?.userState?.vote === UserVote.Down;
-  const upvotes = post.numUpvotes || 0;
-  const comments = post.numComments || 0;
   const canSeeAnalytics = canViewPostAnalytics({ user, post });
 
   const onToggleUpvote = async () => {
@@ -108,9 +105,7 @@ export const PostDiscoveryActionBar = ({
             pressed={isUpvoteActive}
             size={ButtonSize.Small}
             variant={ButtonVariant.Tertiary}
-          >
-            {upvotes > 0 ? largeNumberFormat(upvotes) : undefined}
-          </QuaternaryButton>
+          />
         </Tooltip>
         <Tooltip
           content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
@@ -143,9 +138,7 @@ export const PostDiscoveryActionBar = ({
             pressed={post.commented}
             size={ButtonSize.Small}
             variant={ButtonVariant.Tertiary}
-          >
-            {comments > 0 ? largeNumberFormat(comments) : undefined}
-          </QuaternaryButton>
+          />
         </Tooltip>
       </div>
 
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 2837da78779..3ec71b0cad0 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -12,6 +12,7 @@ import type { SourceTooltip } from '../../../graphql/sources';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import usePostContent from '../../../hooks/usePostContent';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
+import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromptGate';
 import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
@@ -21,6 +22,7 @@ import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
 import { ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { PostHeaderActions } from '../PostHeaderActions';
+import { PostUpvotesCommentsCount } from '../PostUpvotesCommentsCount';
 import { PostTagList } from '../tags/PostTagList';
 import { TruncateText } from '../../utilities';
 import { combinedClicks } from '../../../lib/click';
@@ -98,6 +100,7 @@ export const PostFocusCard = ({
   const isVideoType = isVideoPost(article);
   const { title } = useSmartTitle(article);
   const { onCopyPostLink, onReadArticle } = usePostContent({ origin, post });
+  const { onShowUpvoted } = useUpvoteQuery();
   const { onReadClick: onReaderInstallGateClick } =
     useReaderInstallPromptGate(post);
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
@@ -230,6 +233,11 @@ export const PostFocusCard = ({
             </div>
           </div>
 
+          <PostUpvotesCommentsCount
+            post={post}
+            onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
+          />
+
           <PostDiscoveryActionBar
             post={post}
             origin={origin}

From 4ac385baf98caa4833c9ec4fc5ef16ea8a294db1 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 00:37:24 +0300
Subject: [PATCH 074/111] style(discovery): move date/read-time metadata above
 the content

Place PostMetadata (date, source domain, read time) immediately after
the action bar and above the post content, instead of below it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 3ec71b0cad0..a5eb27369f2 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -245,6 +245,30 @@ export const PostFocusCard = ({
             onCopyLinkClick={onCopyPostLink}
           />
 
+          <PostMetadata
+            className="!typo-callout"
+            createdAt={article.createdAt}
+            domain={
+              !isVideoType &&
+              article.domain &&
+              article.domain.length > 0 && (
+                <TruncateText>
+                  From{' '}
+                  <ArticleLink
+                    className="hover:underline"
+                    href={article.permalink}
+                    onClick={onReadArticle}
+                    title={article.domain}
+                  >
+                    {article.domain}
+                  </ArticleLink>
+                </TruncateText>
+              )
+            }
+            isVideoType={isVideoType}
+            readTime={article.readTime}
+          />
+
           {isVideoType && (
             <div className="shadow-1 flex min-w-0 flex-col gap-4 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3">
               <YoutubeVideo
@@ -273,30 +297,6 @@ export const PostFocusCard = ({
             )
           )}
 
-          <PostMetadata
-            className="!typo-callout"
-            createdAt={article.createdAt}
-            domain={
-              !isVideoType &&
-              article.domain &&
-              article.domain.length > 0 && (
-                <TruncateText>
-                  From{' '}
-                  <ArticleLink
-                    className="hover:underline"
-                    href={article.permalink}
-                    onClick={onReadArticle}
-                    title={article.domain}
-                  >
-                    {article.domain}
-                  </ArticleLink>
-                </TruncateText>
-              )
-            }
-            isVideoType={isVideoType}
-            readTime={article.readTime}
-          />
-
           <PostTagList post={article} />
 
           {isCollection && <CollectionSources post={article} />}

From b24a7d274d94e240de29706f97aa2b8c76e18d38 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 08:21:25 +0300
Subject: [PATCH 075/111] feat(discovery): inline clickable counts, award
 button, reposts in action bar

Revert the separate stats strip. Each action keeps its count inline next
to the icon, and the number is separately clickable to open its popup:
- Upvote count -> "Upvoted by"
- Award icon (give award when allowed) + count -> awards list
- Repost count (with icon) -> reposts popup
Comment count stays inline. Right-side utilities unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostDiscoveryActionBar.tsx | 165 ++++++++++++++++--
 .../post/discovery/PostFocusCard.tsx          |   8 -
 2 files changed, 154 insertions(+), 19 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 1386f45c4bf..b366eb4bae6 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -2,31 +2,41 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
-import { UserVote } from '../../../graphql/posts';
+import { POST_REPOSTS_BY_ID_QUERY, UserVote } from '../../../graphql/posts';
 import { useVotePost } from '../../../hooks';
 import { useBookmarkPost } from '../../../hooks/useBookmarkPost';
 import { useBlockPostPanel } from '../../../hooks/post/useBlockPostPanel';
+import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
+import { useCanAwardUser } from '../../../hooks/useCoresFeature';
+import { useLazyModal } from '../../../hooks/useLazyModal';
+import { LazyModal } from '../../modals/common/types';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import { Origin } from '../../../lib/log';
+import { AuthTriggers } from '../../../lib/auth';
 import {
   Button,
   ButtonColor,
   ButtonSize,
   ButtonVariant,
 } from '../../buttons/Button';
-import { QuaternaryButton } from '../../buttons/QuaternaryButton';
+import { ClickableText } from '../../buttons/ClickableText';
 import { BookmarkButton } from '../../buttons/BookmarkButton';
 import { UpvoteButtonIcon } from '../../cards/common/UpvoteButtonIcon';
+import { Image } from '../../image/Image';
 import { IconSize } from '../../Icon';
 import {
   AnalyticsIcon,
   DiscussIcon as CommentIcon,
   DownvoteIcon,
   LinkIcon,
+  MedalBadgeIcon,
+  UserShareIcon,
 } from '../../icons';
 import { Tooltip } from '../../tooltip/Tooltip';
 import Link from '../../utilities/Link';
+import { largeNumberFormat } from '../../../lib';
+import type { LoggedUser } from '../../../lib/user';
 import { canViewPostAnalytics } from '../../../lib/user';
 import { webappUrl } from '../../../lib/constants';
 import { PostMenuOptions } from '../PostMenuOptions';
@@ -40,11 +50,13 @@ interface PostDiscoveryActionBarProps {
   className?: string;
 }
 
+const countClassName = '!text-text-secondary typo-footnote';
+
 /**
- * Compact, border-framed engagement bar for the discovery focus card. Left side
- * surfaces the vote/comment actions with their engagement counts; right side
- * keeps icon-only utilities (bookmark, copy, analytics, menu, clickbait shield).
- * The comment sort lives in the discussion panel header, not here.
+ * Compact, border-framed engagement bar for the discovery focus card. Each
+ * action keeps its count inline: the icon performs the action (vote, comment,
+ * give award) while the number is separately clickable to open the matching
+ * popup (who upvoted, awards, reposts). Right side keeps icon-only utilities.
  */
 export const PostDiscoveryActionBar = ({
   post,
@@ -53,14 +65,26 @@ export const PostDiscoveryActionBar = ({
   onCopyLinkClick,
   className,
 }: PostDiscoveryActionBarProps): ReactElement => {
-  const { user } = useAuthContext();
+  const { user, showLogin } = useAuthContext();
   const { toggleUpvote, toggleDownvote } = useVotePost();
   const { toggleBookmark } = useBookmarkPost();
   const { onShowPanel, onClose } = useBlockPostPanel(post);
+  const { onShowUpvoted } = useUpvoteQuery();
+  const { openModal } = useLazyModal();
+  const canAward = useCanAwardUser({
+    sendingUser: user,
+    receivingUser: post.author as LoggedUser | undefined,
+  });
 
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
   const isDownvoteActive = post?.userState?.vote === UserVote.Down;
+  const isAwarded = !!post?.userState?.awarded;
+  const upvotes = post.numUpvotes || 0;
+  const comments = post.numComments || 0;
+  const awards = post.numAwards || 0;
+  const reposts = post.numReposts || 0;
   const canSeeAnalytics = canViewPostAnalytics({ user, post });
+  const showAward = canAward || awards > 0;
 
   const onToggleUpvote = async () => {
     if (post?.userState?.vote === UserVote.None) {
@@ -82,6 +106,52 @@ export const PostDiscoveryActionBar = ({
     await toggleBookmark({ post, origin });
   };
 
+  const onShowAwards = () =>
+    openModal({
+      type: LazyModal.ListAwards,
+      props: { queryProps: { id: post.id, type: 'POST' } },
+    });
+
+  const onAwardIconClick = () => {
+    if (canAward && !isAwarded) {
+      if (!user) {
+        showLogin({ trigger: AuthTriggers.GiveAward });
+        return;
+      }
+      if (!post.author) {
+        return;
+      }
+      openModal({
+        type: LazyModal.GiveAward,
+        props: {
+          type: 'POST',
+          entity: {
+            id: post.id,
+            receiver: post.author,
+            numAwards: post.numAwards,
+          },
+          post,
+        },
+      });
+      return;
+    }
+    if (awards > 0) {
+      onShowAwards();
+    }
+  };
+
+  const onShowReposts = () =>
+    openModal({
+      type: LazyModal.RepostsPopup,
+      props: {
+        requestQuery: {
+          queryKey: ['postReposts', post.id],
+          query: POST_REPOSTS_BY_ID_QUERY,
+          params: { id: post.id, first: 20, supportedTypes: ['share'] },
+        },
+      },
+    });
+
   return (
     <div
       className={classNames(
@@ -89,9 +159,9 @@ export const PostDiscoveryActionBar = ({
         className,
       )}
     >
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-1">
         <Tooltip content={isUpvoteActive ? 'Remove upvote' : 'More like this'}>
-          <QuaternaryButton
+          <Button
             id="upvote-post-btn"
             aria-label="Upvote"
             color={ButtonColor.Avocado}
@@ -104,13 +174,24 @@ export const PostDiscoveryActionBar = ({
             onClick={onToggleUpvote}
             pressed={isUpvoteActive}
             size={ButtonSize.Small}
+            type="button"
             variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
+        {upvotes > 0 && (
+          <Tooltip content="See who upvoted">
+            <ClickableText
+              className={classNames('mr-1', countClassName)}
+              onClick={() => onShowUpvoted(post.id, upvotes)}
+            >
+              {largeNumberFormat(upvotes)}
+            </ClickableText>
+          </Tooltip>
+        )}
         <Tooltip
           content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
         >
-          <QuaternaryButton
+          <Button
             id="downvote-post-btn"
             aria-label="Downvote"
             color={ButtonColor.Ketchup}
@@ -123,11 +204,12 @@ export const PostDiscoveryActionBar = ({
             onClick={onToggleDownvote}
             pressed={isDownvoteActive}
             size={ButtonSize.Small}
+            type="button"
             variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
         <Tooltip content="Comment">
-          <QuaternaryButton
+          <Button
             id="comment-post-btn"
             aria-label="Comment"
             color={ButtonColor.BlueCheese}
@@ -137,9 +219,70 @@ export const PostDiscoveryActionBar = ({
             onClick={onComment}
             pressed={post.commented}
             size={ButtonSize.Small}
+            type="button"
             variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
+        {comments > 0 && (
+          <span className={classNames('mr-1', countClassName)}>
+            {largeNumberFormat(comments)}
+          </span>
+        )}
+        {showAward && (
+          <>
+            <Tooltip
+              content={isAwarded ? 'You already awarded this post!' : 'Award'}
+            >
+              <Button
+                id="award-post-btn"
+                aria-label="Award"
+                color={ButtonColor.Cabbage}
+                icon={
+                  <MedalBadgeIcon secondary={isAwarded} size={IconSize.Small} />
+                }
+                onClick={onAwardIconClick}
+                pressed={isAwarded}
+                size={ButtonSize.Small}
+                type="button"
+                variant={ButtonVariant.Tertiary}
+              />
+            </Tooltip>
+            {awards > 0 && (
+              <Tooltip content="See awards">
+                <ClickableText
+                  className={classNames(
+                    'mr-1 flex items-center gap-1',
+                    countClassName,
+                  )}
+                  onClick={onShowAwards}
+                >
+                  {post.featuredAward?.award?.image && (
+                    <Image
+                      src={post.featuredAward.award.image}
+                      alt={post.featuredAward.award.name ?? 'Award'}
+                      className="size-4"
+                    />
+                  )}
+                  {largeNumberFormat(awards)}
+                </ClickableText>
+              </Tooltip>
+            )}
+          </>
+        )}
+        {reposts > 0 && (
+          <Tooltip content="See who reposted">
+            <ClickableText
+              className={classNames(
+                'ml-1 flex items-center gap-1',
+                countClassName,
+              )}
+              onClick={onShowReposts}
+            >
+              <UserShareIcon size={IconSize.Small} />
+              {largeNumberFormat(reposts)}
+            </ClickableText>
+          </Tooltip>
+        )}
       </div>
 
       <div className="flex items-center gap-2">
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index a5eb27369f2..65b0a0f2cf3 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -12,7 +12,6 @@ import type { SourceTooltip } from '../../../graphql/sources';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import usePostContent from '../../../hooks/usePostContent';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
-import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromptGate';
 import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
@@ -22,7 +21,6 @@ import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
 import { ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { PostHeaderActions } from '../PostHeaderActions';
-import { PostUpvotesCommentsCount } from '../PostUpvotesCommentsCount';
 import { PostTagList } from '../tags/PostTagList';
 import { TruncateText } from '../../utilities';
 import { combinedClicks } from '../../../lib/click';
@@ -100,7 +98,6 @@ export const PostFocusCard = ({
   const isVideoType = isVideoPost(article);
   const { title } = useSmartTitle(article);
   const { onCopyPostLink, onReadArticle } = usePostContent({ origin, post });
-  const { onShowUpvoted } = useUpvoteQuery();
   const { onReadClick: onReaderInstallGateClick } =
     useReaderInstallPromptGate(post);
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
@@ -233,11 +230,6 @@ export const PostFocusCard = ({
             </div>
           </div>
 
-          <PostUpvotesCommentsCount
-            post={post}
-            onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
-          />
-
           <PostDiscoveryActionBar
             post={post}
             origin={origin}

From b38184eb80626635ec782cd7ee376842f1b9da50 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 08:34:05 +0300
Subject: [PATCH 076/111] fix(discovery): show "Shared via" only for true
 Share-type posts

Gate the shared-via eyebrow (and the author-led header) on
PostType.Share with a wrapped post, so reposts to a squad/profile show
it while auto-written articles/freeform posts render their own source.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/PostFocusCard.tsx      | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 65b0a0f2cf3..06524b1afe8 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -4,7 +4,6 @@ import React, { useRef } from 'react';
 import type { Post } from '../../../graphql/posts';
 import {
   getReadArticleHref,
-  isShareLikePost,
   isVideoPost,
   PostType,
 } from '../../../graphql/posts';
@@ -85,10 +84,10 @@ export const PostFocusCard = ({
   origin,
   leftVariant,
 }: PostFocusCardProps): ReactElement => {
-  // A shared post wraps an underlying post (article, video, collection…) in a
-  // squad. Render that underlying post so every type uses the same card, and
-  // surface the type/origin via a small eyebrow label above the title.
-  const isShared = isShareLikePost(post) && !!post.sharedPost;
+  // A shared post (someone reposting a post into a squad or onto their profile)
+  // wraps an underlying post. Only true Share-type posts get the "Shared via"
+  // treatment — auto-written articles/freeform posts render their own source.
+  const isShared = post.type === PostType.Share && !!post.sharedPost;
   const article = (isShared ? post.sharedPost : post) as Post;
   const sharedVia = isShared ? post.source : undefined;
   const isCollection = article.type === PostType.Collection;

From 50b1e25bcc3a02ae76f0b53bc98f9aefe1df6228 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 08:39:52 +0300
Subject: [PATCH 077/111] fix(discovery): outline award icon when not awarded

Flip MedalBadgeIcon to secondary={!isAwarded} so the medal is an outline
when the post hasn't been awarded and filled once awarded, matching the
reader action bar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/PostDiscoveryActionBar.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index b366eb4bae6..2db6910d95e 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -238,7 +238,10 @@ export const PostDiscoveryActionBar = ({
                 aria-label="Award"
                 color={ButtonColor.Cabbage}
                 icon={
-                  <MedalBadgeIcon secondary={isAwarded} size={IconSize.Small} />
+                  <MedalBadgeIcon
+                    secondary={!isAwarded}
+                    size={IconSize.Small}
+                  />
                 }
                 onClick={onAwardIconClick}
                 pressed={isAwarded}

From 929820ce73a526abbeafcf21e7233837a19958c5 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 09:30:50 +0300
Subject: [PATCH 078/111] feat(discovery): action-bar counts, stats strip,
 sticky bar, share/ad tweaks

- Action bar: counts live inside the button again (click = action, no
  popup); award button shows count; reposts removed from the bar
- Add the production stats strip (PostUpvotesCommentsCount) below the
  tags, with clickable upvotes/reposts/awards popups + analytics
- "Shared via {squad}" only for squad shares; profile shares show
  "Shared post" without repeating the author
- Remove the bottom "Share this post" strip below the comments
- Make the action bar sticky to the top on scroll; on the modal it also
  renders an X close button next to the menu
- Move the ad card above the "Share your thoughts" composer
- Collection sources: flat cards (no background), clean horizontal scroll

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/modals/ArticlePostModal.tsx    |   6 +-
 .../components/modals/CollectionPostModal.tsx |   6 +-
 .../src/components/modals/SharePostModal.tsx  |   6 +-
 .../post/discovery/CollectionSources.tsx      |   4 +-
 .../post/discovery/PostDiscoveryActionBar.tsx | 189 ++++++------------
 .../post/discovery/PostDiscussionPanel.tsx    |   6 +-
 .../post/discovery/PostFocusCard.tsx          |  42 ++--
 7 files changed, 105 insertions(+), 154 deletions(-)

diff --git a/packages/shared/src/components/modals/ArticlePostModal.tsx b/packages/shared/src/components/modals/ArticlePostModal.tsx
index 689b6d19357..9413ea7f913 100644
--- a/packages/shared/src/components/modals/ArticlePostModal.tsx
+++ b/packages/shared/src/components/modals/ArticlePostModal.tsx
@@ -48,7 +48,11 @@ export default function ArticlePostModal({
       onNextPost={onNextPost}
     >
       {showDiscovery ? (
-        <PostFocusCard post={post} origin={Origin.ArticleModal} />
+        <PostFocusCard
+          post={post}
+          origin={Origin.ArticleModal}
+          onClose={() => onRequestClose?.(undefined as never)}
+        />
       ) : (
         <PostContent
           position={position}
diff --git a/packages/shared/src/components/modals/CollectionPostModal.tsx b/packages/shared/src/components/modals/CollectionPostModal.tsx
index f601174c881..62076cd0a7c 100644
--- a/packages/shared/src/components/modals/CollectionPostModal.tsx
+++ b/packages/shared/src/components/modals/CollectionPostModal.tsx
@@ -50,7 +50,11 @@ export default function CollectionPostModal({
       onNextPost={onNextPost}
     >
       {showDiscovery ? (
-        <PostFocusCard post={post} origin={Origin.CollectionModal} />
+        <PostFocusCard
+          post={post}
+          origin={Origin.CollectionModal}
+          onClose={() => onRequestClose?.(undefined as never)}
+        />
       ) : (
         <CollectionPostContent
           position={position}
diff --git a/packages/shared/src/components/modals/SharePostModal.tsx b/packages/shared/src/components/modals/SharePostModal.tsx
index 6aa2ad26b72..11a4359b58d 100644
--- a/packages/shared/src/components/modals/SharePostModal.tsx
+++ b/packages/shared/src/components/modals/SharePostModal.tsx
@@ -50,7 +50,11 @@ export default function PostModal({
       onNextPost={onNextPost}
     >
       {showDiscovery ? (
-        <PostFocusCard post={post} origin={Origin.ArticleModal} />
+        <PostFocusCard
+          post={post}
+          origin={Origin.ArticleModal}
+          onClose={() => onRequestClose?.(undefined as never)}
+        />
       ) : (
         <>
           <EnableNotification
diff --git a/packages/shared/src/components/post/discovery/CollectionSources.tsx b/packages/shared/src/components/post/discovery/CollectionSources.tsx
index 1250d036ab1..95122320f06 100644
--- a/packages/shared/src/components/post/discovery/CollectionSources.tsx
+++ b/packages/shared/src/components/post/discovery/CollectionSources.tsx
@@ -47,7 +47,7 @@ export const CollectionSources = ({
       >
         {count} {pluralize('source', count)}
       </Typography>
-      <div className="flex gap-3 overflow-x-auto pb-1">
+      <div className="-mx-1 flex gap-3 overflow-x-auto px-1 pb-2">
         {edges.map(({ node }) => (
           <a
             key={node.id}
@@ -55,7 +55,7 @@ export const CollectionSources = ({
             rel="noopener"
             target="_blank"
             title={node.title}
-            className="flex w-64 shrink-0 flex-col gap-2 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-3 transition-colors hover:border-border-subtlest-primary hover:bg-surface-hover"
+            className="flex w-64 shrink-0 flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-3 transition-colors hover:border-border-subtlest-primary"
           >
             <div className="flex min-w-0 items-center gap-2">
               <SourceAvatar
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 2db6910d95e..0d1fd5fc61a 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -2,11 +2,10 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
-import { POST_REPOSTS_BY_ID_QUERY, UserVote } from '../../../graphql/posts';
+import { UserVote } from '../../../graphql/posts';
 import { useVotePost } from '../../../hooks';
 import { useBookmarkPost } from '../../../hooks/useBookmarkPost';
 import { useBlockPostPanel } from '../../../hooks/post/useBlockPostPanel';
-import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import { useCanAwardUser } from '../../../hooks/useCoresFeature';
 import { useLazyModal } from '../../../hooks/useLazyModal';
 import { LazyModal } from '../../modals/common/types';
@@ -20,10 +19,10 @@ import {
   ButtonSize,
   ButtonVariant,
 } from '../../buttons/Button';
-import { ClickableText } from '../../buttons/ClickableText';
+import { QuaternaryButton } from '../../buttons/QuaternaryButton';
 import { BookmarkButton } from '../../buttons/BookmarkButton';
+import CloseButton from '../../CloseButton';
 import { UpvoteButtonIcon } from '../../cards/common/UpvoteButtonIcon';
-import { Image } from '../../image/Image';
 import { IconSize } from '../../Icon';
 import {
   AnalyticsIcon,
@@ -31,7 +30,6 @@ import {
   DownvoteIcon,
   LinkIcon,
   MedalBadgeIcon,
-  UserShareIcon,
 } from '../../icons';
 import { Tooltip } from '../../tooltip/Tooltip';
 import Link from '../../utilities/Link';
@@ -47,29 +45,29 @@ interface PostDiscoveryActionBarProps {
   origin?: PostOrigin;
   onComment?: () => void;
   onCopyLinkClick?: (post?: Post) => void;
+  /** When provided (post modal), renders an X close button next to the menu. */
+  onClose?: () => void;
   className?: string;
 }
 
-const countClassName = '!text-text-secondary typo-footnote';
-
 /**
  * Compact, border-framed engagement bar for the discovery focus card. Each
- * action keeps its count inline: the icon performs the action (vote, comment,
- * give award) while the number is separately clickable to open the matching
- * popup (who upvoted, awards, reposts). Right side keeps icon-only utilities.
+ * action keeps its count inline in the same button, so clicking the icon or
+ * the number performs the action (vote/comment/award) — the dedicated popups
+ * live in the stats strip below the tags. Sticks to the top while scrolling.
  */
 export const PostDiscoveryActionBar = ({
   post,
   origin = Origin.ArticlePage,
   onComment,
   onCopyLinkClick,
+  onClose,
   className,
 }: PostDiscoveryActionBarProps): ReactElement => {
   const { user, showLogin } = useAuthContext();
   const { toggleUpvote, toggleDownvote } = useVotePost();
   const { toggleBookmark } = useBookmarkPost();
-  const { onShowPanel, onClose } = useBlockPostPanel(post);
-  const { onShowUpvoted } = useUpvoteQuery();
+  const { onShowPanel, onClose: onCloseBlockPanel } = useBlockPostPanel(post);
   const { openModal } = useLazyModal();
   const canAward = useCanAwardUser({
     sendingUser: user,
@@ -82,13 +80,11 @@ export const PostDiscoveryActionBar = ({
   const upvotes = post.numUpvotes || 0;
   const comments = post.numComments || 0;
   const awards = post.numAwards || 0;
-  const reposts = post.numReposts || 0;
   const canSeeAnalytics = canViewPostAnalytics({ user, post });
-  const showAward = canAward || awards > 0;
 
   const onToggleUpvote = async () => {
     if (post?.userState?.vote === UserVote.None) {
-      onClose(true);
+      onCloseBlockPanel(true);
     }
     await toggleUpvote({ payload: post, origin });
   };
@@ -97,7 +93,7 @@ export const PostDiscoveryActionBar = ({
     if (post.userState?.vote !== UserVote.Down) {
       onShowPanel();
     } else {
-      onClose(true);
+      onCloseBlockPanel(true);
     }
     await toggleDownvote({ payload: post, origin });
   };
@@ -106,62 +102,38 @@ export const PostDiscoveryActionBar = ({
     await toggleBookmark({ post, origin });
   };
 
-  const onShowAwards = () =>
-    openModal({
-      type: LazyModal.ListAwards,
-      props: { queryProps: { id: post.id, type: 'POST' } },
-    });
-
-  const onAwardIconClick = () => {
-    if (canAward && !isAwarded) {
-      if (!user) {
-        showLogin({ trigger: AuthTriggers.GiveAward });
-        return;
-      }
-      if (!post.author) {
-        return;
-      }
-      openModal({
-        type: LazyModal.GiveAward,
-        props: {
-          type: 'POST',
-          entity: {
-            id: post.id,
-            receiver: post.author,
-            numAwards: post.numAwards,
-          },
-          post,
-        },
-      });
+  const onGiveAward = () => {
+    if (!user) {
+      showLogin({ trigger: AuthTriggers.GiveAward });
       return;
     }
-    if (awards > 0) {
-      onShowAwards();
+    if (!post.author || isAwarded) {
+      return;
     }
-  };
-
-  const onShowReposts = () =>
     openModal({
-      type: LazyModal.RepostsPopup,
+      type: LazyModal.GiveAward,
       props: {
-        requestQuery: {
-          queryKey: ['postReposts', post.id],
-          query: POST_REPOSTS_BY_ID_QUERY,
-          params: { id: post.id, first: 20, supportedTypes: ['share'] },
+        type: 'POST',
+        entity: {
+          id: post.id,
+          receiver: post.author,
+          numAwards: post.numAwards,
         },
+        post,
       },
     });
+  };
 
   return (
     <div
       className={classNames(
-        'my-2 flex items-center justify-between gap-4 border-y border-border-subtlest-tertiary px-1 py-3',
+        'sticky top-0 z-3 my-2 flex items-center justify-between gap-4 border-y border-border-subtlest-tertiary bg-background-default px-1 py-3',
         className,
       )}
     >
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-2">
         <Tooltip content={isUpvoteActive ? 'Remove upvote' : 'More like this'}>
-          <Button
+          <QuaternaryButton
             id="upvote-post-btn"
             aria-label="Upvote"
             color={ButtonColor.Avocado}
@@ -174,24 +146,15 @@ export const PostDiscoveryActionBar = ({
             onClick={onToggleUpvote}
             pressed={isUpvoteActive}
             size={ButtonSize.Small}
-            type="button"
             variant={ButtonVariant.Tertiary}
-          />
+          >
+            {upvotes > 0 ? largeNumberFormat(upvotes) : undefined}
+          </QuaternaryButton>
         </Tooltip>
-        {upvotes > 0 && (
-          <Tooltip content="See who upvoted">
-            <ClickableText
-              className={classNames('mr-1', countClassName)}
-              onClick={() => onShowUpvoted(post.id, upvotes)}
-            >
-              {largeNumberFormat(upvotes)}
-            </ClickableText>
-          </Tooltip>
-        )}
         <Tooltip
           content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
         >
-          <Button
+          <QuaternaryButton
             id="downvote-post-btn"
             aria-label="Downvote"
             color={ButtonColor.Ketchup}
@@ -204,12 +167,11 @@ export const PostDiscoveryActionBar = ({
             onClick={onToggleDownvote}
             pressed={isDownvoteActive}
             size={ButtonSize.Small}
-            type="button"
             variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
         <Tooltip content="Comment">
-          <Button
+          <QuaternaryButton
             id="comment-post-btn"
             aria-label="Comment"
             color={ButtonColor.BlueCheese}
@@ -219,71 +181,29 @@ export const PostDiscoveryActionBar = ({
             onClick={onComment}
             pressed={post.commented}
             size={ButtonSize.Small}
-            type="button"
             variant={ButtonVariant.Tertiary}
-          />
+          >
+            {comments > 0 ? largeNumberFormat(comments) : undefined}
+          </QuaternaryButton>
         </Tooltip>
-        {comments > 0 && (
-          <span className={classNames('mr-1', countClassName)}>
-            {largeNumberFormat(comments)}
-          </span>
-        )}
-        {showAward && (
-          <>
-            <Tooltip
-              content={isAwarded ? 'You already awarded this post!' : 'Award'}
+        {canAward && (
+          <Tooltip
+            content={isAwarded ? 'You already awarded this post!' : 'Award'}
+          >
+            <QuaternaryButton
+              id="award-post-btn"
+              aria-label="Award"
+              color={ButtonColor.Cabbage}
+              icon={
+                <MedalBadgeIcon secondary={!isAwarded} size={IconSize.Small} />
+              }
+              onClick={onGiveAward}
+              pressed={isAwarded}
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Tertiary}
             >
-              <Button
-                id="award-post-btn"
-                aria-label="Award"
-                color={ButtonColor.Cabbage}
-                icon={
-                  <MedalBadgeIcon
-                    secondary={!isAwarded}
-                    size={IconSize.Small}
-                  />
-                }
-                onClick={onAwardIconClick}
-                pressed={isAwarded}
-                size={ButtonSize.Small}
-                type="button"
-                variant={ButtonVariant.Tertiary}
-              />
-            </Tooltip>
-            {awards > 0 && (
-              <Tooltip content="See awards">
-                <ClickableText
-                  className={classNames(
-                    'mr-1 flex items-center gap-1',
-                    countClassName,
-                  )}
-                  onClick={onShowAwards}
-                >
-                  {post.featuredAward?.award?.image && (
-                    <Image
-                      src={post.featuredAward.award.image}
-                      alt={post.featuredAward.award.name ?? 'Award'}
-                      className="size-4"
-                    />
-                  )}
-                  {largeNumberFormat(awards)}
-                </ClickableText>
-              </Tooltip>
-            )}
-          </>
-        )}
-        {reposts > 0 && (
-          <Tooltip content="See who reposted">
-            <ClickableText
-              className={classNames(
-                'ml-1 flex items-center gap-1',
-                countClassName,
-              )}
-              onClick={onShowReposts}
-            >
-              <UserShareIcon size={IconSize.Small} />
-              {largeNumberFormat(reposts)}
-            </ClickableText>
+              {awards > 0 ? largeNumberFormat(awards) : undefined}
+            </QuaternaryButton>
           </Tooltip>
         )}
       </div>
@@ -335,6 +255,9 @@ export const PostDiscoveryActionBar = ({
           origin={Origin.ArticleModal}
           buttonSize={ButtonSize.Small}
         />
+        {onClose && (
+          <CloseButton size={ButtonSize.Small} onClick={() => onClose()} />
+        )}
       </div>
     </div>
   );
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index 9fc0cdcbcf4..0b36e3c5c31 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -88,7 +88,6 @@ export const PostDiscussionPanel = ({
   const { sortCommentsBy: sortBy, updateSortCommentsBy: setSortBy } =
     useSettingsContext();
   const isNewestFirst = sortBy === SortCommentsBy.NewestFirst;
-  const hasComments = (post.numComments ?? 0) > 0;
   const commentRef = useRef<NewCommentRef | null>(null);
   const rootRef = useRef<HTMLElement | null>(null);
   const [isComposerOpen, setIsComposerOpen] = useState(false);
@@ -224,10 +223,9 @@ export const PostDiscussionPanel = ({
           removeTopSpacing
         />
       </div>
-      {(showMetaBar || hasComments) && (
+      {showMetaBar && (
         <div className="flex shrink-0 flex-col gap-3 pt-3">
-          {showMetaBar && <DiscussionMetaBar post={post} />}
-          {hasComments && <DiscussionShareRow post={post} withSquads />}
+          <DiscussionMetaBar post={post} />
         </div>
       )}
     </section>
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 06524b1afe8..162c79d5e94 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -8,9 +8,11 @@ import {
   PostType,
 } from '../../../graphql/posts';
 import type { SourceTooltip } from '../../../graphql/sources';
+import { SourceType } from '../../../graphql/sources';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import usePostContent from '../../../hooks/usePostContent';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
+import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromptGate';
 import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
@@ -20,6 +22,7 @@ import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
 import { ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { PostHeaderActions } from '../PostHeaderActions';
+import { PostUpvotesCommentsCount } from '../PostUpvotesCommentsCount';
 import { PostTagList } from '../tags/PostTagList';
 import { TruncateText } from '../../utilities';
 import { combinedClicks } from '../../../lib/click';
@@ -51,6 +54,8 @@ interface PostFocusCardProps {
   post: Post;
   origin: PostOrigin;
   leftVariant?: FocusCardLeftVariant;
+  /** When opened in the post modal, lets the sticky action bar close it. */
+  onClose?: () => void;
 }
 
 const ArticleLink = ({
@@ -83,13 +88,19 @@ export const PostFocusCard = ({
   post,
   origin,
   leftVariant,
+  onClose,
 }: PostFocusCardProps): ReactElement => {
   // A shared post (someone reposting a post into a squad or onto their profile)
   // wraps an underlying post. Only true Share-type posts get the "Shared via"
   // treatment — auto-written articles/freeform posts render their own source.
   const isShared = post.type === PostType.Share && !!post.sharedPost;
   const article = (isShared ? post.sharedPost : post) as Post;
-  const sharedVia = isShared ? post.source : undefined;
+  // Shared into a squad → "Shared via {squad}"; shared to a profile → just
+  // "Shared post" (we don't repeat the author's name).
+  const sharedVia =
+    isShared && post.source?.type === SourceType.Squad
+      ? post.source
+      : undefined;
   const isCollection = article.type === PostType.Collection;
   // Shared posts lead with the person who shared it; the squad/source is
   // surfaced via the "Shared via" eyebrow below the author.
@@ -97,6 +108,7 @@ export const PostFocusCard = ({
   const isVideoType = isVideoPost(article);
   const { title } = useSmartTitle(article);
   const { onCopyPostLink, onReadArticle } = usePostContent({ origin, post });
+  const { onShowUpvoted } = useUpvoteQuery();
   const { onReadClick: onReaderInstallGateClick } =
     useReaderInstallPromptGate(post);
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
@@ -197,7 +209,10 @@ export const PostFocusCard = ({
                 </HoverCard>
               </p>
             )}
-            {!sharedVia && isCollection && (
+            {isShared && !sharedVia && (
+              <p className="text-text-tertiary typo-footnote">Shared post</p>
+            )}
+            {!isShared && isCollection && (
               <p className="text-text-tertiary typo-footnote">Collection</p>
             )}
             <div className="flex min-w-0 items-start gap-4">
@@ -234,6 +249,7 @@ export const PostFocusCard = ({
             origin={origin}
             onComment={() => focusCommentRef.current()}
             onCopyLinkClick={onCopyPostLink}
+            onClose={onClose}
           />
 
           <PostMetadata
@@ -290,17 +306,12 @@ export const PostFocusCard = ({
 
           <PostTagList post={article} />
 
-          {isCollection && <CollectionSources post={article} />}
+          <PostUpvotesCommentsCount
+            post={post}
+            onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
+          />
 
-          <aside className="w-full max-w-80 laptopXL:absolute laptopXL:left-full laptopXL:top-6 laptopXL:ml-6 laptopXL:w-80 laptopXL:max-w-none">
-            <PostSidebarAdWidget
-              postId={post.id}
-              className={{
-                container:
-                  '!w-full !border-border-subtlest-tertiary !bg-transparent',
-              }}
-            />
-          </aside>
+          {isCollection && <CollectionSources post={article} />}
 
           {showCodeSnippets && (
             <div className={leftVariant === 'lean' ? 'mb-4' : 'mb-6'}>
@@ -308,6 +319,13 @@ export const PostFocusCard = ({
             </div>
           )}
 
+          <PostSidebarAdWidget
+            postId={post.id}
+            className={{
+              container: '!w-full !border-border-subtlest-tertiary',
+            }}
+          />
+
           <PostDiscussionPanel
             className="pt-2"
             showMetaBar={false}

From 97ad48aa5c2ab874cc481daca2dea1ce6f87fa43 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 09:34:17 +0300
Subject: [PATCH 079/111] fix(discovery): match production award icon fill
 state

MedalBadgeIcon has inverted variants (primary=filled, secondary=outline).
Use secondary={isAwarded} so the award medal matches the production
action bar: filled when not yet awarded, outline once awarded.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/PostDiscoveryActionBar.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 0d1fd5fc61a..24f55c75f01 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -195,7 +195,7 @@ export const PostDiscoveryActionBar = ({
               aria-label="Award"
               color={ButtonColor.Cabbage}
               icon={
-                <MedalBadgeIcon secondary={!isAwarded} size={IconSize.Small} />
+                <MedalBadgeIcon secondary={isAwarded} size={IconSize.Small} />
               }
               onClick={onGiveAward}
               pressed={isAwarded}

From cd44385a21581e90858d0a01da2cc4db90d41f37 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 09:42:14 +0300
Subject: [PATCH 080/111] feat(discovery): flat inline ad layout above the
 composer

Add an `inline` variant to PostSidebarAdWidget: flat (no background),
company name on the favicon line with the Visit button, and a "Promoted"
+ advertise-here strip below the title. Use it for the discovery ad.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/post/PostSidebarAdWidget.tsx   | 78 +++++++++++++++++++
 .../post/discovery/PostFocusCard.tsx          |  7 +-
 2 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/packages/shared/src/components/post/PostSidebarAdWidget.tsx b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
index 5e442100b06..9aa3dc70472 100644
--- a/packages/shared/src/components/post/PostSidebarAdWidget.tsx
+++ b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
@@ -26,9 +26,16 @@ import {
   TypographyType,
 } from '../typography/Typography';
 import { AdvertiseLink } from '../cards/ad/common/AdvertiseLink';
+import { Image } from '../image/Image';
 
 interface PostSidebarAdWidgetProps {
   postId: string;
+  /**
+   * `card` (default) is the boxed sidebar widget. `inline` is a flat,
+   * borderless-background layout for in-content placements: the company name
+   * sits on the favicon line, with "Promoted" + the advertise link below it.
+   */
+  variant?: 'card' | 'inline';
   className?: {
     container?: string;
   };
@@ -36,6 +43,7 @@ interface PostSidebarAdWidgetProps {
 
 export function PostSidebarAdWidget({
   postId,
+  variant = 'card',
   className,
 }: PostSidebarAdWidgetProps): ReactElement | null {
   const { user } = useAuthContext();
@@ -94,6 +102,76 @@ export function PostSidebarAdWidget({
     size: 24,
   });
 
+  if (variant === 'inline') {
+    return (
+      <div
+        className={classNames(
+          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-4',
+          className?.container,
+        )}
+      >
+        <a
+          href={ad.link}
+          target="_blank"
+          rel="noopener"
+          title={ad.description}
+          className="absolute inset-0 z-0"
+          {...combinedClicks(() => onAdAction(AdActions.Click))}
+        />
+        <div className="flex w-full items-center gap-3">
+          <Image
+            src={imageLink}
+            alt={ad.source}
+            className="size-10 shrink-0 rounded-full object-cover"
+          />
+          {company && (
+            <Typography
+              tag={TypographyTag.P}
+              type={TypographyType.Body}
+              color={TypographyColor.Primary}
+              className="min-w-0 flex-1 truncate"
+              bold
+            >
+              {company}
+            </Typography>
+          )}
+          <Button
+            tag="a"
+            href={ad.link}
+            target="_blank"
+            rel="noopener"
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Small}
+            className="relative z-1 ml-auto shrink-0"
+            onClick={() => onAdAction(AdActions.Click)}
+          >
+            Visit
+          </Button>
+        </div>
+        <div className="flex items-center justify-between gap-2">
+          <AdAttribution ad={ad} className={{ main: 'relative z-1' }} />
+          <AdvertiseLink
+            targetId={TargetId.AdSidebar}
+            className="relative z-1 whitespace-nowrap hover:underline"
+          />
+        </div>
+        {hasDescription && (
+          <Typography
+            tag={TypographyTag.P}
+            type={TypographyType.Callout}
+            color={TypographyColor.Primary}
+            className="relative z-1 whitespace-pre-line"
+          >
+            {ad.tagLine && <strong>{ad.tagLine}</strong>}
+            {ad.tagLine && ad.description ? ' ' : ''}
+            {ad.description}
+          </Typography>
+        )}
+        <AdPixel pixel={ad.pixel} />
+      </div>
+    );
+  }
+
   return (
     <EntityCard
       image={imageLink}
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 162c79d5e94..9387f06d31c 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -319,12 +319,7 @@ export const PostFocusCard = ({
             </div>
           )}
 
-          <PostSidebarAdWidget
-            postId={post.id}
-            className={{
-              container: '!w-full !border-border-subtlest-tertiary',
-            }}
-          />
+          <PostSidebarAdWidget postId={post.id} variant="inline" />
 
           <PostDiscussionPanel
             className="pt-2"

From 7f7dba9f8363b47ea0255b020bdd61d1e6795d43 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 09:53:04 +0300
Subject: [PATCH 081/111] feat(discovery): scroll-to-comments + working sticky
 bar with stuck X

- Comment action (action bar) and the stats-bar comment count now scroll
  to the discussion and focus the composer (added onCommentsClick to
  PostUpvotesCommentsCount)
- Action bar: detect the stuck state via an IntersectionObserver sentinel;
  the X close button now only appears once the bar is pinned to the top
- Enable CSS sticky inside the post modal by overriding the modal's
  laptop overflow-hidden (which previously broke position: sticky)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/modals/ArticlePostModal.tsx    |   1 +
 .../components/modals/CollectionPostModal.tsx |   1 +
 .../src/components/modals/SharePostModal.tsx  |   1 +
 .../post/PostUpvotesCommentsCount.tsx         |  17 +-
 .../post/discovery/PostDiscoveryActionBar.tsx | 262 ++++++++++--------
 .../post/discovery/PostFocusCard.tsx          |  35 ++-
 6 files changed, 180 insertions(+), 137 deletions(-)

diff --git a/packages/shared/src/components/modals/ArticlePostModal.tsx b/packages/shared/src/components/modals/ArticlePostModal.tsx
index 9413ea7f913..6c892d28c2f 100644
--- a/packages/shared/src/components/modals/ArticlePostModal.tsx
+++ b/packages/shared/src/components/modals/ArticlePostModal.tsx
@@ -39,6 +39,7 @@ export default function ArticlePostModal({
       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}
diff --git a/packages/shared/src/components/modals/CollectionPostModal.tsx b/packages/shared/src/components/modals/CollectionPostModal.tsx
index 62076cd0a7c..544628ec33c 100644
--- a/packages/shared/src/components/modals/CollectionPostModal.tsx
+++ b/packages/shared/src/components/modals/CollectionPostModal.tsx
@@ -41,6 +41,7 @@ export default function CollectionPostModal({
       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}
diff --git a/packages/shared/src/components/modals/SharePostModal.tsx b/packages/shared/src/components/modals/SharePostModal.tsx
index 11a4359b58d..a05dc22d650 100644
--- a/packages/shared/src/components/modals/SharePostModal.tsx
+++ b/packages/shared/src/components/modals/SharePostModal.tsx
@@ -41,6 +41,7 @@ export default function PostModal({
       post={post}
       onAfterOpen={onLoad}
       size={showDiscovery ? Modal.Size.Large : Modal.Size.XLarge}
+      className={showDiscovery ? 'laptop:!overflow-visible' : undefined}
       onRequestClose={onRequestClose}
       postType={PostType.Share}
       source={post.source}
diff --git a/packages/shared/src/components/post/PostUpvotesCommentsCount.tsx b/packages/shared/src/components/post/PostUpvotesCommentsCount.tsx
index 7581aaa9aa5..7e0ca893eb6 100644
--- a/packages/shared/src/components/post/PostUpvotesCommentsCount.tsx
+++ b/packages/shared/src/components/post/PostUpvotesCommentsCount.tsx
@@ -34,6 +34,7 @@ type PostUpvotesCommentsCountPost = Pick<
 interface PostUpvotesCommentsCountProps {
   post: PostUpvotesCommentsCountPost;
   onUpvotesClick?: (upvotes: number) => unknown;
+  onCommentsClick?: () => unknown;
   className?: string;
   compact?: boolean;
   passive?: boolean;
@@ -48,6 +49,7 @@ type PostUpvotesCommentsCountContentProps = PostUpvotesCommentsCountProps & {
 const PostUpvotesCommentsCountContent = ({
   post,
   onUpvotesClick,
+  onCommentsClick,
   onRepostsClick,
   onAwardsClick,
   showPostAnalytics = false,
@@ -104,12 +106,12 @@ const PostUpvotesCommentsCountContent = ({
           onClick: () => onUpvotesClick?.(upvotes),
           children: getText({ count: upvotes, label: 'Upvote' }),
         })}
-      {comments > 0 && (
-        <span>
-          {largeNumberFormat(comments)}
-          {` Comment${comments === 1 ? '' : 's'}`}
-        </span>
-      )}
+      {comments > 0 &&
+        renderText({
+          key: 'comments',
+          onClick: onCommentsClick,
+          children: getText({ count: comments, label: 'Comment' }),
+        })}
       {reposts > 0 &&
         renderText({
           key: 'reposts',
@@ -153,6 +155,7 @@ const PostUpvotesCommentsCountContent = ({
 const InteractivePostUpvotesCommentsCount = ({
   post,
   onUpvotesClick,
+  onCommentsClick,
   className,
   compact,
 }: PostUpvotesCommentsCountProps): ReactElement => {
@@ -165,6 +168,7 @@ const InteractivePostUpvotesCommentsCount = ({
       <PostUpvotesCommentsCountContent
         post={post}
         onUpvotesClick={onUpvotesClick}
+        onCommentsClick={onCommentsClick}
         className={className}
         compact={compact}
       />
@@ -192,6 +196,7 @@ const InteractivePostUpvotesCommentsCount = ({
     <PostUpvotesCommentsCountContent
       post={post}
       onUpvotesClick={onUpvotesClick}
+      onCommentsClick={onCommentsClick}
       onRepostsClick={onRepostsClick}
       onAwardsClick={
         hasAccessToCores && awards > 0
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 24f55c75f01..185ff9fcaa1 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
 import { UserVote } from '../../../graphql/posts';
@@ -74,6 +74,23 @@ export const PostDiscoveryActionBar = ({
     receivingUser: post.author as LoggedUser | undefined,
   });
 
+  // Detect when the sticky bar is pinned to the top so the X close button
+  // (modal only) appears just for the stuck state.
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const [isStuck, setIsStuck] = useState(false);
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el || typeof IntersectionObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsStuck(!entry.isIntersecting),
+      { threshold: 0 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
   const isUpvoteActive = post?.userState?.vote === UserVote.Up;
   const isDownvoteActive = post?.userState?.vote === UserVote.Down;
   const isAwarded = !!post?.userState?.awarded;
@@ -125,140 +142,145 @@ export const PostDiscoveryActionBar = ({
   };
 
   return (
-    <div
-      className={classNames(
-        'sticky top-0 z-3 my-2 flex items-center justify-between gap-4 border-y border-border-subtlest-tertiary bg-background-default px-1 py-3',
-        className,
-      )}
-    >
-      <div className="flex items-center gap-2">
-        <Tooltip content={isUpvoteActive ? 'Remove upvote' : 'More like this'}>
-          <QuaternaryButton
-            id="upvote-post-btn"
-            aria-label="Upvote"
-            color={ButtonColor.Avocado}
-            icon={
-              <UpvoteButtonIcon
-                secondary={isUpvoteActive}
-                size={IconSize.Small}
-              />
-            }
-            onClick={onToggleUpvote}
-            pressed={isUpvoteActive}
-            size={ButtonSize.Small}
-            variant={ButtonVariant.Tertiary}
-          >
-            {upvotes > 0 ? largeNumberFormat(upvotes) : undefined}
-          </QuaternaryButton>
-        </Tooltip>
-        <Tooltip
-          content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
-        >
-          <QuaternaryButton
-            id="downvote-post-btn"
-            aria-label="Downvote"
-            color={ButtonColor.Ketchup}
-            icon={
-              <DownvoteIcon
-                secondary={isDownvoteActive}
-                size={IconSize.Small}
-              />
-            }
-            onClick={onToggleDownvote}
-            pressed={isDownvoteActive}
-            size={ButtonSize.Small}
-            variant={ButtonVariant.Tertiary}
-          />
-        </Tooltip>
-        <Tooltip content="Comment">
-          <QuaternaryButton
-            id="comment-post-btn"
-            aria-label="Comment"
-            color={ButtonColor.BlueCheese}
-            icon={
-              <CommentIcon secondary={post.commented} size={IconSize.Small} />
-            }
-            onClick={onComment}
-            pressed={post.commented}
-            size={ButtonSize.Small}
-            variant={ButtonVariant.Tertiary}
+    <>
+      <div ref={sentinelRef} aria-hidden className="pointer-events-none h-0" />
+      <div
+        className={classNames(
+          'sticky top-0 z-3 my-2 flex items-center justify-between gap-4 border-y border-border-subtlest-tertiary bg-background-default px-1 py-3',
+          className,
+        )}
+      >
+        <div className="flex items-center gap-2">
+          <Tooltip
+            content={isUpvoteActive ? 'Remove upvote' : 'More like this'}
           >
-            {comments > 0 ? largeNumberFormat(comments) : undefined}
-          </QuaternaryButton>
-        </Tooltip>
-        {canAward && (
+            <QuaternaryButton
+              id="upvote-post-btn"
+              aria-label="Upvote"
+              color={ButtonColor.Avocado}
+              icon={
+                <UpvoteButtonIcon
+                  secondary={isUpvoteActive}
+                  size={IconSize.Small}
+                />
+              }
+              onClick={onToggleUpvote}
+              pressed={isUpvoteActive}
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Tertiary}
+            >
+              {upvotes > 0 ? largeNumberFormat(upvotes) : undefined}
+            </QuaternaryButton>
+          </Tooltip>
           <Tooltip
-            content={isAwarded ? 'You already awarded this post!' : 'Award'}
+            content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
           >
             <QuaternaryButton
-              id="award-post-btn"
-              aria-label="Award"
-              color={ButtonColor.Cabbage}
+              id="downvote-post-btn"
+              aria-label="Downvote"
+              color={ButtonColor.Ketchup}
+              icon={
+                <DownvoteIcon
+                  secondary={isDownvoteActive}
+                  size={IconSize.Small}
+                />
+              }
+              onClick={onToggleDownvote}
+              pressed={isDownvoteActive}
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Tertiary}
+            />
+          </Tooltip>
+          <Tooltip content="Comment">
+            <QuaternaryButton
+              id="comment-post-btn"
+              aria-label="Comment"
+              color={ButtonColor.BlueCheese}
               icon={
-                <MedalBadgeIcon secondary={isAwarded} size={IconSize.Small} />
+                <CommentIcon secondary={post.commented} size={IconSize.Small} />
               }
-              onClick={onGiveAward}
-              pressed={isAwarded}
+              onClick={onComment}
+              pressed={post.commented}
               size={ButtonSize.Small}
               variant={ButtonVariant.Tertiary}
             >
-              {awards > 0 ? largeNumberFormat(awards) : undefined}
+              {comments > 0 ? largeNumberFormat(comments) : undefined}
             </QuaternaryButton>
           </Tooltip>
-        )}
-      </div>
-
-      <div className="flex items-center gap-2">
-        <BookmarkButton
-          post={post}
-          iconSize={IconSize.Small}
-          buttonProps={{
-            id: 'bookmark-post-btn',
-            pressed: post.bookmarked,
-            onClick: onToggleBookmark,
-            size: ButtonSize.Small,
-          }}
-        />
-        <Tooltip content="Copy link">
-          <Button
-            aria-label="Copy link"
-            color={ButtonColor.Cabbage}
-            icon={<LinkIcon size={IconSize.Small} />}
-            onClick={() => onCopyLinkClick?.(post)}
-            size={ButtonSize.Small}
-            type="button"
-            variant={ButtonVariant.Tertiary}
-          />
-        </Tooltip>
-        {post.clickbaitTitleDetected && (
-          <PostClickbaitShield post={post} iconOnly />
-        )}
-        {canSeeAnalytics && (
-          <Tooltip content="Analytics">
-            <Link
-              href={`${webappUrl}posts/${post.id}/analytics`}
-              passHref
-              prefetch={false}
+          {canAward && (
+            <Tooltip
+              content={isAwarded ? 'You already awarded this post!' : 'Award'}
             >
-              <Button
-                aria-label="Analytics"
-                icon={<AnalyticsIcon size={IconSize.Small} />}
+              <QuaternaryButton
+                id="award-post-btn"
+                aria-label="Award"
+                color={ButtonColor.Cabbage}
+                icon={
+                  <MedalBadgeIcon secondary={isAwarded} size={IconSize.Small} />
+                }
+                onClick={onGiveAward}
+                pressed={isAwarded}
                 size={ButtonSize.Small}
-                tag="a"
                 variant={ButtonVariant.Tertiary}
-              />
-            </Link>
+              >
+                {awards > 0 ? largeNumberFormat(awards) : undefined}
+              </QuaternaryButton>
+            </Tooltip>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <BookmarkButton
+            post={post}
+            iconSize={IconSize.Small}
+            buttonProps={{
+              id: 'bookmark-post-btn',
+              pressed: post.bookmarked,
+              onClick: onToggleBookmark,
+              size: ButtonSize.Small,
+            }}
+          />
+          <Tooltip content="Copy link">
+            <Button
+              aria-label="Copy link"
+              color={ButtonColor.Cabbage}
+              icon={<LinkIcon size={IconSize.Small} />}
+              onClick={() => onCopyLinkClick?.(post)}
+              size={ButtonSize.Small}
+              type="button"
+              variant={ButtonVariant.Tertiary}
+            />
           </Tooltip>
-        )}
-        <PostMenuOptions
-          post={post}
-          origin={Origin.ArticleModal}
-          buttonSize={ButtonSize.Small}
-        />
-        {onClose && (
-          <CloseButton size={ButtonSize.Small} onClick={() => onClose()} />
-        )}
+          {post.clickbaitTitleDetected && (
+            <PostClickbaitShield post={post} iconOnly />
+          )}
+          {canSeeAnalytics && (
+            <Tooltip content="Analytics">
+              <Link
+                href={`${webappUrl}posts/${post.id}/analytics`}
+                passHref
+                prefetch={false}
+              >
+                <Button
+                  aria-label="Analytics"
+                  icon={<AnalyticsIcon size={IconSize.Small} />}
+                  size={ButtonSize.Small}
+                  tag="a"
+                  variant={ButtonVariant.Tertiary}
+                />
+              </Link>
+            </Tooltip>
+          )}
+          <PostMenuOptions
+            post={post}
+            origin={Origin.ArticleModal}
+            buttonSize={ButtonSize.Small}
+          />
+          {isStuck && onClose && (
+            <CloseButton size={ButtonSize.Small} onClick={() => onClose()} />
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 9387f06d31c..7acd69742e7 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -113,6 +113,7 @@ export const PostFocusCard = ({
     useReaderInstallPromptGate(post);
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
   const focusCommentRef = useRef<() => void>(() => {});
+  const discussionRef = useRef<HTMLDivElement>(null);
   const readHref = getReadArticleHref(post);
   const handleImageClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
     if (onReaderInstallGateClick(event)) {
@@ -120,6 +121,15 @@ export const PostFocusCard = ({
     }
     onReadArticle();
   };
+  const scrollToDiscussion = () =>
+    discussionRef.current?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+  const scrollToComment = () => {
+    scrollToDiscussion();
+    focusCommentRef.current();
+  };
 
   return (
     <article
@@ -247,7 +257,7 @@ export const PostFocusCard = ({
           <PostDiscoveryActionBar
             post={post}
             origin={origin}
-            onComment={() => focusCommentRef.current()}
+            onComment={scrollToComment}
             onCopyLinkClick={onCopyPostLink}
             onClose={onClose}
           />
@@ -309,6 +319,7 @@ export const PostFocusCard = ({
           <PostUpvotesCommentsCount
             post={post}
             onUpvotesClick={(upvotes) => onShowUpvoted(post.id, upvotes)}
+            onCommentsClick={scrollToComment}
           />
 
           {isCollection && <CollectionSources post={article} />}
@@ -321,16 +332,18 @@ export const PostFocusCard = ({
 
           <PostSidebarAdWidget postId={post.id} variant="inline" />
 
-          <PostDiscussionPanel
-            className="pt-2"
-            showMetaBar={false}
-            showSortHeader
-            onRegisterFocusComment={(fn) => {
-              focusCommentRef.current = fn;
-            }}
-            post={post}
-            origin={origin}
-          />
+          <div ref={discussionRef} className="scroll-mt-16">
+            <PostDiscussionPanel
+              className="pt-2"
+              showMetaBar={false}
+              showSortHeader
+              onRegisterFocusComment={(fn) => {
+                focusCommentRef.current = fn;
+              }}
+              post={post}
+              origin={origin}
+            />
+          </div>
         </div>
       </div>
     </article>

From 52f4dec005394d718dbaaf2c075de21cc03a42aa Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 10:01:02 +0300
Subject: [PATCH 082/111] fix(discovery): always show an ad title on the icon
 line

Fall back to the ad's tagline when there's no company name, so the
inline ad always shows a title beside the favicon (above the promoted
strip). Avoid repeating the tagline in the body when it becomes the title.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/post/PostSidebarAdWidget.tsx    | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/shared/src/components/post/PostSidebarAdWidget.tsx b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
index 9aa3dc70472..81ea903d90c 100644
--- a/packages/shared/src/components/post/PostSidebarAdWidget.tsx
+++ b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
@@ -103,6 +103,14 @@ export function PostSidebarAdWidget({
   });
 
   if (variant === 'inline') {
+    const tagLine = ad.tagLine?.trim();
+    // Always surface a title on the icon line: the company if present,
+    // otherwise the ad's tagline. The tagline only repeats in the body when
+    // the company is the title.
+    const inlineTitle = company || tagLine;
+    const inlineBodyTagLine = company ? tagLine : undefined;
+    const inlineHasBody = !!ad.description || !!inlineBodyTagLine;
+
     return (
       <div
         className={classNames(
@@ -124,7 +132,7 @@ export function PostSidebarAdWidget({
             alt={ad.source}
             className="size-10 shrink-0 rounded-full object-cover"
           />
-          {company && (
+          {inlineTitle && (
             <Typography
               tag={TypographyTag.P}
               type={TypographyType.Body}
@@ -132,7 +140,7 @@ export function PostSidebarAdWidget({
               className="min-w-0 flex-1 truncate"
               bold
             >
-              {company}
+              {inlineTitle}
             </Typography>
           )}
           <Button
@@ -155,15 +163,15 @@ export function PostSidebarAdWidget({
             className="relative z-1 whitespace-nowrap hover:underline"
           />
         </div>
-        {hasDescription && (
+        {inlineHasBody && (
           <Typography
             tag={TypographyTag.P}
             type={TypographyType.Callout}
             color={TypographyColor.Primary}
             className="relative z-1 whitespace-pre-line"
           >
-            {ad.tagLine && <strong>{ad.tagLine}</strong>}
-            {ad.tagLine && ad.description ? ' ' : ''}
+            {inlineBodyTagLine && <strong>{inlineBodyTagLine}</strong>}
+            {inlineBodyTagLine && ad.description ? ' ' : ''}
             {ad.description}
           </Typography>
         )}

From f99fbd34f5d20ebd5d06d6f76cda2e5e4df8a6de Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 10:06:56 +0300
Subject: [PATCH 083/111] fix(discovery): consistent comment-style author
 header for authored posts

Show the user author (shared, freeform, welcome) with the same
UserShortInfo layout and avatar size (Large) as comment/reply authors,
instead of falling back to the source strip for some types.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 7acd69742e7..80e71024539 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -102,9 +102,15 @@ export const PostFocusCard = ({
       ? post.source
       : undefined;
   const isCollection = article.type === PostType.Collection;
-  // Shared posts lead with the person who shared it; the squad/source is
-  // surfaced via the "Shared via" eyebrow below the author.
-  const sharedByAuthor = isShared ? post.author : undefined;
+  // Posts authored by a user (shared, freeform, welcome) lead with that
+  // user, shown exactly like a comment author. Publication-sourced posts
+  // (article/video/collection) keep their source strip.
+  const author =
+    post.type === PostType.Share ||
+    post.type === PostType.Freeform ||
+    post.type === PostType.Welcome
+      ? post.author
+      : undefined;
   const isVideoType = isVideoPost(article);
   const { title } = useSmartTitle(article);
   const { onCopyPostLink, onReadArticle } = usePostContent({ origin, post });
@@ -139,11 +145,11 @@ export const PostFocusCard = ({
       <div className="flex flex-col px-4 tablet:px-6 laptop:px-8">
         <div className="relative mx-auto flex w-full min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px]">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
-            {sharedByAuthor ? (
+            {author ? (
               <div className="flex min-w-0 items-center gap-3">
                 <UserShortInfo
-                  user={sharedByAuthor as unknown as UserShortProfile}
-                  imageSize={ProfileImageSize.Medium}
+                  user={author as unknown as UserShortProfile}
+                  imageSize={ProfileImageSize.Large}
                   showDescription={false}
                   className={{
                     container: 'min-w-0 !p-0 hover:bg-transparent',
@@ -152,10 +158,10 @@ export const PostFocusCard = ({
                 />
                 <FollowButton
                   className="shrink-0"
-                  entityId={sharedByAuthor.id}
-                  entityName={`@${sharedByAuthor.username}`}
+                  entityId={author.id}
+                  entityName={`@${author.username}`}
                   type={ContentPreferenceType.User}
-                  status={sharedByAuthor.contentPreference?.status}
+                  status={author.contentPreference?.status}
                   variant={ButtonVariant.Subtle}
                   showSubscribe={false}
                   buttonClassName="!h-7 !px-2"

From 33949da210e9bdc5142a72e2f4e23dbf308da1a9 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 10:10:50 +0300
Subject: [PATCH 084/111] feat(discovery): rebuild action bar on CardAction
 guideline (PR #6064)

Migrate the discovery engagement bar from the legacy QuaternaryButton to
the CardAction primitives: the count lives inside the click target, the
award icon uses icon/iconPressed (filled until awarded), and copy/
analytics are CardActions too. Sticky + stuck X behavior preserved.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostDiscoveryActionBar.tsx | 130 +++++++-----------
 1 file changed, 46 insertions(+), 84 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 185ff9fcaa1..faf986b5438 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -13,13 +13,9 @@ import { useAuthContext } from '../../../contexts/AuthContext';
 import type { PostOrigin } from '../../../hooks/log/useLogContextData';
 import { Origin } from '../../../lib/log';
 import { AuthTriggers } from '../../../lib/auth';
-import {
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonVariant,
-} from '../../buttons/Button';
-import { QuaternaryButton } from '../../buttons/QuaternaryButton';
+import { ButtonSize } from '../../buttons/Button';
+import { ButtonColor } from '../../buttons/ButtonV2';
+import { CardAction } from '../../buttons/CardAction';
 import { BookmarkButton } from '../../buttons/BookmarkButton';
 import CloseButton from '../../CloseButton';
 import { UpvoteButtonIcon } from '../../cards/common/UpvoteButtonIcon';
@@ -32,8 +28,6 @@ import {
   MedalBadgeIcon,
 } from '../../icons';
 import { Tooltip } from '../../tooltip/Tooltip';
-import Link from '../../utilities/Link';
-import { largeNumberFormat } from '../../../lib';
 import type { LoggedUser } from '../../../lib/user';
 import { canViewPostAnalytics } from '../../../lib/user';
 import { webappUrl } from '../../../lib/constants';
@@ -51,10 +45,10 @@ interface PostDiscoveryActionBarProps {
 }
 
 /**
- * Compact, border-framed engagement bar for the discovery focus card. Each
- * action keeps its count inline in the same button, so clicking the icon or
- * the number performs the action (vote/comment/award) — the dedicated popups
- * live in the stats strip below the tags. Sticks to the top while scrolling.
+ * Engagement bar for the discovery focus card, built on the CardAction
+ * primitives (PR #6064 guideline): each action's count lives inside the click
+ * target so the icon or number performs the action. Sticks to the top while
+ * scrolling; the modal X appears only once the bar is pinned.
  */
 export const PostDiscoveryActionBar = ({
   post,
@@ -146,90 +140,69 @@ export const PostDiscoveryActionBar = ({
       <div ref={sentinelRef} aria-hidden className="pointer-events-none h-0" />
       <div
         className={classNames(
-          'sticky top-0 z-3 my-2 flex items-center justify-between gap-4 border-y border-border-subtlest-tertiary bg-background-default px-1 py-3',
+          'sticky top-0 z-3 my-2 flex items-center justify-between gap-4 border-y border-border-subtlest-tertiary bg-background-default px-1 py-2',
           className,
         )}
       >
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1">
           <Tooltip
             content={isUpvoteActive ? 'Remove upvote' : 'More like this'}
           >
-            <QuaternaryButton
+            <CardAction
               id="upvote-post-btn"
-              aria-label="Upvote"
+              label="Upvote"
               color={ButtonColor.Avocado}
-              icon={
-                <UpvoteButtonIcon
-                  secondary={isUpvoteActive}
-                  size={IconSize.Small}
-                />
-              }
-              onClick={onToggleUpvote}
+              icon={<UpvoteButtonIcon />}
+              iconPressed={<UpvoteButtonIcon secondary />}
+              count={upvotes}
               pressed={isUpvoteActive}
-              size={ButtonSize.Small}
-              variant={ButtonVariant.Tertiary}
-            >
-              {upvotes > 0 ? largeNumberFormat(upvotes) : undefined}
-            </QuaternaryButton>
+              onClick={onToggleUpvote}
+            />
           </Tooltip>
           <Tooltip
             content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
           >
-            <QuaternaryButton
+            <CardAction
               id="downvote-post-btn"
-              aria-label="Downvote"
+              label="Downvote"
               color={ButtonColor.Ketchup}
-              icon={
-                <DownvoteIcon
-                  secondary={isDownvoteActive}
-                  size={IconSize.Small}
-                />
-              }
-              onClick={onToggleDownvote}
+              icon={<DownvoteIcon />}
+              iconPressed={<DownvoteIcon secondary />}
               pressed={isDownvoteActive}
-              size={ButtonSize.Small}
-              variant={ButtonVariant.Tertiary}
+              onClick={onToggleDownvote}
             />
           </Tooltip>
           <Tooltip content="Comment">
-            <QuaternaryButton
+            <CardAction
               id="comment-post-btn"
-              aria-label="Comment"
+              label="Comment"
               color={ButtonColor.BlueCheese}
-              icon={
-                <CommentIcon secondary={post.commented} size={IconSize.Small} />
-              }
-              onClick={onComment}
+              icon={<CommentIcon />}
+              iconPressed={<CommentIcon secondary />}
+              count={comments}
               pressed={post.commented}
-              size={ButtonSize.Small}
-              variant={ButtonVariant.Tertiary}
-            >
-              {comments > 0 ? largeNumberFormat(comments) : undefined}
-            </QuaternaryButton>
+              onClick={onComment}
+            />
           </Tooltip>
           {canAward && (
             <Tooltip
               content={isAwarded ? 'You already awarded this post!' : 'Award'}
             >
-              <QuaternaryButton
+              <CardAction
                 id="award-post-btn"
-                aria-label="Award"
+                label="Award"
                 color={ButtonColor.Cabbage}
-                icon={
-                  <MedalBadgeIcon secondary={isAwarded} size={IconSize.Small} />
-                }
-                onClick={onGiveAward}
+                icon={<MedalBadgeIcon />}
+                iconPressed={<MedalBadgeIcon secondary />}
+                count={awards}
                 pressed={isAwarded}
-                size={ButtonSize.Small}
-                variant={ButtonVariant.Tertiary}
-              >
-                {awards > 0 ? largeNumberFormat(awards) : undefined}
-              </QuaternaryButton>
+                onClick={onGiveAward}
+              />
             </Tooltip>
           )}
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1">
           <BookmarkButton
             post={post}
             iconSize={IconSize.Small}
@@ -237,18 +210,15 @@ export const PostDiscoveryActionBar = ({
               id: 'bookmark-post-btn',
               pressed: post.bookmarked,
               onClick: onToggleBookmark,
-              size: ButtonSize.Small,
+              size: ButtonSize.Medium,
             }}
           />
           <Tooltip content="Copy link">
-            <Button
-              aria-label="Copy link"
+            <CardAction
+              label="Copy link"
               color={ButtonColor.Cabbage}
-              icon={<LinkIcon size={IconSize.Small} />}
+              icon={<LinkIcon />}
               onClick={() => onCopyLinkClick?.(post)}
-              size={ButtonSize.Small}
-              type="button"
-              variant={ButtonVariant.Tertiary}
             />
           </Tooltip>
           {post.clickbaitTitleDetected && (
@@ -256,28 +226,20 @@ export const PostDiscoveryActionBar = ({
           )}
           {canSeeAnalytics && (
             <Tooltip content="Analytics">
-              <Link
+              <CardAction
+                label="Analytics"
+                icon={<AnalyticsIcon />}
                 href={`${webappUrl}posts/${post.id}/analytics`}
-                passHref
-                prefetch={false}
-              >
-                <Button
-                  aria-label="Analytics"
-                  icon={<AnalyticsIcon size={IconSize.Small} />}
-                  size={ButtonSize.Small}
-                  tag="a"
-                  variant={ButtonVariant.Tertiary}
-                />
-              </Link>
+              />
             </Tooltip>
           )}
           <PostMenuOptions
             post={post}
             origin={Origin.ArticleModal}
-            buttonSize={ButtonSize.Small}
+            buttonSize={ButtonSize.Medium}
           />
           {isStuck && onClose && (
-            <CloseButton size={ButtonSize.Small} onClick={() => onClose()} />
+            <CloseButton size={ButtonSize.Medium} onClick={() => onClose()} />
           )}
         </div>
       </div>

From 4e59a4577e712f3654d47746d430fcd358622792 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 10:24:29 +0300
Subject: [PATCH 085/111] fix(discovery): sticky action bar on the post page
 below the header

Offset the sticky top by the fixed laptop header height on the post
page (top-0 laptop:top-16) so the bar pins below the header instead of
behind it. The modal keeps top-0 and remains the only surface with the
X close button.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/post/discovery/PostDiscoveryActionBar.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index faf986b5438..160887fc82b 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -92,6 +92,10 @@ export const PostDiscoveryActionBar = ({
   const comments = post.numComments || 0;
   const awards = post.numAwards || 0;
   const canSeeAnalytics = canViewPostAnalytics({ user, post });
+  // In the modal there is no app header, so pin to the very top; on the post
+  // page the bar must sit below the fixed laptop header (4rem). `onClose` is
+  // only provided by the post modal, so it doubles as the surface flag.
+  const stickyTopClassName = onClose ? 'top-0' : 'top-0 laptop:top-16';
 
   const onToggleUpvote = async () => {
     if (post?.userState?.vote === UserVote.None) {
@@ -140,7 +144,8 @@ export const PostDiscoveryActionBar = ({
       <div ref={sentinelRef} aria-hidden className="pointer-events-none h-0" />
       <div
         className={classNames(
-          'sticky top-0 z-3 my-2 flex items-center justify-between gap-4 border-y border-border-subtlest-tertiary bg-background-default px-1 py-2',
+          'sticky z-3 my-2 flex items-center justify-between gap-4 border-y border-border-subtlest-tertiary bg-background-default px-1 py-2',
+          stickyTopClassName,
           className,
         )}
       >

From eccf62cbd7ac106194cbb2d47bec5d6806eb19f5 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 10:27:45 +0300
Subject: [PATCH 086/111] feat(discovery): show Read post button for shared
 posts

The header hides its built-in read button for Share-type posts, and the
shared card now reads like a regular post, so add a top-right "Read post"
button (linking to the actual article via getReadArticleHref) for shared
posts to navigate to the original.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 40 ++++++++++++++-----
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 80e71024539..6d77a2d40bc 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -4,6 +4,7 @@ import React, { useRef } from 'react';
 import type { Post } from '../../../graphql/posts';
 import {
   getReadArticleHref,
+  getReadPostButtonText,
   isVideoPost,
   PostType,
 } from '../../../graphql/posts';
@@ -20,7 +21,7 @@ import Markdown from '../../Markdown';
 import { ContentEmbeds } from '../../contentEmbeds/ContentEmbeds';
 import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
-import { ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { PostHeaderActions } from '../PostHeaderActions';
 import { PostUpvotesCommentsCount } from '../PostUpvotesCommentsCount';
 import { PostTagList } from '../tags/PostTagList';
@@ -177,16 +178,33 @@ export const PostFocusCard = ({
                 />
               )
             )}
-            <PostHeaderActions
-              buttonSize={ButtonSize.Small}
-              className="ml-auto h-8 shrink-0 items-center"
-              contextMenuId="post-discovery-header-actions"
-              hideMenuOptions
-              hideSubscribeAction
-              onReadArticle={onReadArticle}
-              post={post}
-              readButtonVariant={ButtonVariant.Primary}
-            />
+            {isShared ? (
+              readHref && (
+                <Button
+                  tag="a"
+                  href={readHref}
+                  target="_blank"
+                  rel="noopener"
+                  onClick={onReadArticle}
+                  variant={ButtonVariant.Primary}
+                  size={ButtonSize.Small}
+                  className="ml-auto shrink-0"
+                >
+                  {getReadPostButtonText(post)}
+                </Button>
+              )
+            ) : (
+              <PostHeaderActions
+                buttonSize={ButtonSize.Small}
+                className="ml-auto h-8 shrink-0 items-center"
+                contextMenuId="post-discovery-header-actions"
+                hideMenuOptions
+                hideSubscribeAction
+                onReadArticle={onReadArticle}
+                post={post}
+                readButtonVariant={ButtonVariant.Primary}
+              />
+            )}
           </div>
 
           <div className="flex min-w-0 flex-col gap-3">

From a846b5d866f4d0f5889c5b59e9bcdffa5495bd7b Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 10:31:11 +0300
Subject: [PATCH 087/111] style(discovery): match comment-section header, drop
 the handle

Remove the @handle from the author header (transformUsername) so it
mirrors the comment author: avatar + name + reputation. Also drop the
handle from the compact source strip for the same guideline.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../shared/src/components/post/discovery/PostFocusCard.tsx  | 1 +
 packages/shared/src/components/post/reader/SourceStrip.tsx  | 6 ++----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 6d77a2d40bc..7f6c7f6bdd5 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -152,6 +152,7 @@ export const PostFocusCard = ({
                   user={author as unknown as UserShortProfile}
                   imageSize={ProfileImageSize.Large}
                   showDescription={false}
+                  transformUsername={() => null}
                   className={{
                     container: 'min-w-0 !p-0 hover:bg-transparent',
                     textWrapper: 'min-w-0',
diff --git a/packages/shared/src/components/post/reader/SourceStrip.tsx b/packages/shared/src/components/post/reader/SourceStrip.tsx
index 9acf802c094..36f4fc45440 100644
--- a/packages/shared/src/components/post/reader/SourceStrip.tsx
+++ b/packages/shared/src/components/post/reader/SourceStrip.tsx
@@ -99,12 +99,10 @@ export function SourceStrip({
                   {source.name}
                 </Typography>
               </Link>
-              {sourceHandle && (
+              {!compact && sourceHandle && (
                 <Typography
                   tag={TypographyTag.Span}
-                  type={
-                    compact ? TypographyType.Caption2 : TypographyType.Caption1
-                  }
+                  type={TypographyType.Caption1}
                   color={TypographyColor.Tertiary}
                   className="truncate"
                 >

From 4a6b3ebff37bed075ebf07a844722b7b56e556ed Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 10:36:15 +0300
Subject: [PATCH 088/111] fix(discovery): smoother composer trigger + tighter
 top gap

Make the comment composer trigger a compact single row (avatar +
placeholder + Comment) instead of a tall two-row box, so swapping to the
real input is a much smaller jump. Drop the extra pt-2 above the
discussion panel so the gap matches the rest of the card.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostDiscussionPanel.tsx    | 64 +++++++++----------
 .../post/discovery/PostFocusCard.tsx          |  1 -
 2 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index 0b36e3c5c31..b84e507e68f 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -125,41 +125,37 @@ export const PostDiscussionPanel = ({
       type="button"
       aria-label="Add a comment"
       onClick={() => onCommentClick(Origin.StartDiscussion)}
-      className="group flex min-h-24 w-full flex-col justify-between gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-3 text-left transition-colors hover:border-border-subtlest-primary hover:bg-surface-hover"
+      className="group flex w-full items-center gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-3 text-left transition-colors hover:border-border-subtlest-primary hover:bg-surface-hover"
     >
-      <div className="flex min-w-0 items-start gap-3">
-        {triggerUser ? (
-          <ProfilePicture
-            className="shrink-0"
-            nativeLazyLoading
-            size={ProfileImageSize.Medium}
-            user={triggerUser}
-          />
-        ) : (
-          <Image
-            alt="Placeholder image for anonymous user"
-            aria-hidden
-            className={classNames(
-              'shrink-0',
-              getProfilePictureClasses(ProfileImageSize.Medium),
-            )}
-            fetchPriority="low"
-            height={32}
-            loading="lazy"
-            role="presentation"
-            src={fallbackImages.avatar}
-            width={32}
-          />
-        )}
-        <span className="min-w-0 flex-1 text-text-tertiary typo-callout">
-          Share your thoughts — what stood out, or what would you add?
-        </span>
-      </div>
-      <div className="flex items-center justify-end pl-11">
-        <span className="flex items-center rounded-10 bg-background-default px-3 py-1.5 text-text-secondary transition-colors typo-footnote group-hover:text-text-primary">
-          Comment
-        </span>
-      </div>
+      {triggerUser ? (
+        <ProfilePicture
+          className="shrink-0"
+          nativeLazyLoading
+          size={ProfileImageSize.Medium}
+          user={triggerUser}
+        />
+      ) : (
+        <Image
+          alt="Placeholder image for anonymous user"
+          aria-hidden
+          className={classNames(
+            'shrink-0',
+            getProfilePictureClasses(ProfileImageSize.Medium),
+          )}
+          fetchPriority="low"
+          height={32}
+          loading="lazy"
+          role="presentation"
+          src={fallbackImages.avatar}
+          width={32}
+        />
+      )}
+      <span className="min-w-0 flex-1 truncate text-text-tertiary typo-callout">
+        Share your thoughts…
+      </span>
+      <span className="shrink-0 rounded-10 bg-background-default px-3 py-1.5 text-text-secondary transition-colors typo-footnote group-hover:text-text-primary">
+        Comment
+      </span>
     </button>
   );
 
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 7f6c7f6bdd5..f64078f99c7 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -359,7 +359,6 @@ export const PostFocusCard = ({
 
           <div ref={discussionRef} className="scroll-mt-16">
             <PostDiscussionPanel
-              className="pt-2"
               showMetaBar={false}
               showSortHeader
               onRegisterFocusComment={(fn) => {

From c41bc5db22caec71e91049d5c383802abc0328bc Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 10:37:38 +0300
Subject: [PATCH 089/111] fix(discovery): drop action bar top border when stuck

Avoid the double-border look against the header by keeping only the
bottom border once the sticky action bar is pinned; the top border
shows only while it's in flow.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/PostDiscoveryActionBar.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 160887fc82b..0166e39d47e 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -144,7 +144,10 @@ export const PostDiscoveryActionBar = ({
       <div ref={sentinelRef} aria-hidden className="pointer-events-none h-0" />
       <div
         className={classNames(
-          'sticky z-3 my-2 flex items-center justify-between gap-4 border-y border-border-subtlest-tertiary bg-background-default px-1 py-2',
+          'sticky z-3 my-2 flex items-center justify-between gap-4 border-b border-border-subtlest-tertiary bg-background-default px-1 py-2',
+          // Drop the top border once pinned so it doesn't double up with the
+          // header border above it.
+          !isStuck && 'border-t',
           stickyTopClassName,
           className,
         )}

From 65bdfc05d7d13dfdb8d95eb18d12424415367964 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 11:34:22 +0300
Subject: [PATCH 090/111] style(discovery): match source strip avatar/name size
 to comments

The compact source strip used a 28px avatar + footnote name; bump it to
a 40px avatar + callout name (gap-3) so the source header matches the
comment author and the post author header.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/post/reader/SourceStrip.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/reader/SourceStrip.tsx b/packages/shared/src/components/post/reader/SourceStrip.tsx
index 36f4fc45440..cbc4ceb57f3 100644
--- a/packages/shared/src/components/post/reader/SourceStrip.tsx
+++ b/packages/shared/src/components/post/reader/SourceStrip.tsx
@@ -63,7 +63,7 @@ export function SourceStrip({
           <div
             className={classNames(
               'group flex min-w-0 flex-1 items-center rounded-10',
-              compact ? 'gap-2 px-0 py-0' : 'gap-3 px-1 py-0.5',
+              compact ? 'gap-3 px-0 py-0' : 'gap-3 px-1 py-0.5',
             )}
           >
             <Link passHref href={source.permalink} prefetch={false}>
@@ -77,7 +77,7 @@ export function SourceStrip({
                   alt=""
                   className={classNames(
                     'rounded-full',
-                    compact ? 'size-7' : 'size-8',
+                    compact ? 'size-10' : 'size-8',
                   )}
                   loading="lazy"
                   aria-hidden
@@ -89,7 +89,7 @@ export function SourceStrip({
                 <Typography
                   tag={TypographyTag.Link}
                   type={
-                    compact ? TypographyType.Footnote : TypographyType.Subhead
+                    compact ? TypographyType.Callout : TypographyType.Subhead
                   }
                   color={TypographyColor.Primary}
                   className="truncate group-hover:underline group-focus-visible:underline"

From 0f53fe6102586d00f421f85cf8e7fe1600b0cd74 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 12:21:12 +0300
Subject: [PATCH 091/111] feat(discovery): fade/slide the composer in when it
 opens

Add a composer-in animation (reusing the fade-slide-up keyframe, no
delay) and apply it when the comment composer swaps from the trigger to
the typeable input, so the change reads as a smooth fade + slide instead
of an instant pop.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostDiscussionPanel.tsx    | 20 ++++++++++---------
 packages/shared/tailwind.config.ts            |  1 +
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index b84e507e68f..0d190261456 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -165,15 +165,17 @@ export const PostDiscussionPanel = ({
       aria-label="Discussion"
       className={classNames('flex min-h-0 min-w-0 flex-col gap-2', className)}
     >
-      <NewComment
-        post={post}
-        ref={commentRef as LegacyRef<NewCommentRef>}
-        shouldHandleCommentQuery
-        onComposerOpenChange={setIsComposerOpen}
-        size={ProfileImageSize.Medium}
-        CommentInputOrModal={CommentInputOrModal}
-        renderTrigger={renderComposerTrigger}
-      />
+      <div className={classNames(isComposerOpen && 'animate-composer-in')}>
+        <NewComment
+          post={post}
+          ref={commentRef as LegacyRef<NewCommentRef>}
+          shouldHandleCommentQuery
+          onComposerOpenChange={setIsComposerOpen}
+          size={ProfileImageSize.Medium}
+          CommentInputOrModal={CommentInputOrModal}
+          renderTrigger={renderComposerTrigger}
+        />
+      </div>
       <DiscussionShareRow post={post} withSquads />
       {showSortHeader && (
         <span className="flex shrink-0 flex-row items-center px-1">
diff --git a/packages/shared/tailwind.config.ts b/packages/shared/tailwind.config.ts
index 73d83ce3ae6..bc346985b3e 100644
--- a/packages/shared/tailwind.config.ts
+++ b/packages/shared/tailwind.config.ts
@@ -302,6 +302,7 @@ export default {
         'scale-down-pulse':
           'scale-down-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
         'fade-slide-up': 'fade-slide-up 0.5s ease-out 1s both',
+        'composer-in': 'fade-slide-up 0.2s ease-out both',
         'highlight-fade': 'highlight-fade 2.5s ease-out forwards',
         'reaction-burst':
           'reaction-burst 720ms cubic-bezier(0.2, 0.7, 0.4, 1) forwards',

From 7458e23565c46abd646645904afedc3ef88b4216 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 12:23:34 +0300
Subject: [PATCH 092/111] fix(discovery): left-align sort strip, outline award
 icon by default

- Drop the px-1 indent on the Sort strip so it aligns flush-left with the
  rest of the content
- Swap the award icon variants so the default (not-awarded) state is the
  outline medal and the awarded state is filled

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/PostDiscoveryActionBar.tsx  | 4 ++--
 .../src/components/post/discovery/PostDiscussionPanel.tsx     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 0166e39d47e..f333e412d5e 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -200,8 +200,8 @@ export const PostDiscoveryActionBar = ({
                 id="award-post-btn"
                 label="Award"
                 color={ButtonColor.Cabbage}
-                icon={<MedalBadgeIcon />}
-                iconPressed={<MedalBadgeIcon secondary />}
+                icon={<MedalBadgeIcon secondary />}
+                iconPressed={<MedalBadgeIcon />}
                 count={awards}
                 pressed={isAwarded}
                 onClick={onGiveAward}
diff --git a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
index 0d190261456..88f568f6602 100644
--- a/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscussionPanel.tsx
@@ -178,7 +178,7 @@ export const PostDiscussionPanel = ({
       </div>
       <DiscussionShareRow post={post} withSquads />
       {showSortHeader && (
-        <span className="flex shrink-0 flex-row items-center px-1">
+        <span className="flex shrink-0 flex-row items-center">
           <Typography
             color={TypographyColor.Tertiary}
             type={TypographyType.Footnote}

From ec56d2d798cdca8bc1f0fd0f970abbbf8569e368 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 12:27:17 +0300
Subject: [PATCH 093/111] fix(discovery): remove double gap around the action
 bar

Drop the action bar's my-2; the content column already spaces siblings
with gap-4, so the extra margin stacked into a double gap between the
title and the bar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/PostDiscoveryActionBar.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index f333e412d5e..930d8017f8f 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -144,7 +144,7 @@ export const PostDiscoveryActionBar = ({
       <div ref={sentinelRef} aria-hidden className="pointer-events-none h-0" />
       <div
         className={classNames(
-          'sticky z-3 my-2 flex items-center justify-between gap-4 border-b border-border-subtlest-tertiary bg-background-default px-1 py-2',
+          'sticky z-3 flex items-center justify-between gap-4 border-b border-border-subtlest-tertiary bg-background-default px-1 py-2',
           // Drop the top border once pinned so it doesn't double up with the
           // header border above it.
           !isStuck && 'border-t',

From 12544c707d3846328b4243e2a1186f8f3a2333d8 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 12:47:39 +0300
Subject: [PATCH 094/111] fix(discovery): put ad title on the logo row, shrink
 height

Fall back the inline ad title to the description so a description-only ad
(no company/tagline) shows its text on the logo row instead of a third
body row. Drop the now-empty body, clamp the title to two lines, and
tighten padding (p-4 -> p-3) to reduce the component height.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/post/PostSidebarAdWidget.tsx   | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/shared/src/components/post/PostSidebarAdWidget.tsx b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
index 81ea903d90c..20501eda7ce 100644
--- a/packages/shared/src/components/post/PostSidebarAdWidget.tsx
+++ b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
@@ -104,17 +104,19 @@ export function PostSidebarAdWidget({
 
   if (variant === 'inline') {
     const tagLine = ad.tagLine?.trim();
-    // Always surface a title on the icon line: the company if present,
-    // otherwise the ad's tagline. The tagline only repeats in the body when
-    // the company is the title.
-    const inlineTitle = company || tagLine;
+    const description = ad.description?.trim();
+    // Always surface a title on the icon line: the company, else the
+    // tagline, else the description. Whatever is left over renders in the
+    // body — so a description-only ad has no extra body row.
+    const inlineTitle = company || tagLine || description;
     const inlineBodyTagLine = company ? tagLine : undefined;
-    const inlineHasBody = !!ad.description || !!inlineBodyTagLine;
+    const inlineBodyDescription = company || tagLine ? description : undefined;
+    const inlineHasBody = !!inlineBodyTagLine || !!inlineBodyDescription;
 
     return (
       <div
         className={classNames(
-          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-4',
+          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-3',
           className?.container,
         )}
       >
@@ -137,7 +139,7 @@ export function PostSidebarAdWidget({
               tag={TypographyTag.P}
               type={TypographyType.Body}
               color={TypographyColor.Primary}
-              className="min-w-0 flex-1 truncate"
+              className="line-clamp-2 min-w-0 flex-1"
               bold
             >
               {inlineTitle}
@@ -171,8 +173,8 @@ export function PostSidebarAdWidget({
             className="relative z-1 whitespace-pre-line"
           >
             {inlineBodyTagLine && <strong>{inlineBodyTagLine}</strong>}
-            {inlineBodyTagLine && ad.description ? ' ' : ''}
-            {ad.description}
+            {inlineBodyTagLine && inlineBodyDescription ? ' ' : ''}
+            {inlineBodyDescription}
           </Typography>
         )}
         <AdPixel pixel={ad.pixel} />

From b0b202af92677e779c646d138dbae0549f36c439 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 12:57:00 +0300
Subject: [PATCH 095/111] style(discovery): smaller, medium-weight inline ad
 title

Drop the ad title from body+bold to callout + font-medium for a lighter,
slightly smaller headline.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/post/PostSidebarAdWidget.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/PostSidebarAdWidget.tsx b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
index 20501eda7ce..dc28be7d7a7 100644
--- a/packages/shared/src/components/post/PostSidebarAdWidget.tsx
+++ b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
@@ -137,10 +137,9 @@ export function PostSidebarAdWidget({
           {inlineTitle && (
             <Typography
               tag={TypographyTag.P}
-              type={TypographyType.Body}
+              type={TypographyType.Callout}
               color={TypographyColor.Primary}
-              className="line-clamp-2 min-w-0 flex-1"
-              bold
+              className="line-clamp-2 min-w-0 flex-1 font-medium"
             >
               {inlineTitle}
             </Typography>

From 273f1a6bfc32ad8c55cb999a482fdbec4fa9801d Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 13:02:27 +0300
Subject: [PATCH 096/111] feat(discovery): 70% video preview that expands to
 full width on play

Show a click-to-play thumbnail at 70% width by default; on click it
animates (max-width transition) to the full content width and loads the
autoplaying YouTube embed. Add an optional autoplay prop to YoutubeVideo.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 50 +++++++++++++++----
 .../src/components/video/YoutubeVideo.tsx     |  7 ++-
 2 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index f64078f99c7..ee1142c6a1a 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -1,6 +1,7 @@
 import dynamic from 'next/dynamic';
 import type { ComponentProps, ReactElement } from 'react';
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
+import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
 import {
   getReadArticleHref,
@@ -17,6 +18,8 @@ import { useUpvoteQuery } from '../../../hooks/useUpvoteQuery';
 import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromptGate';
 import PostMetadata from '../../cards/common/PostMetadata';
 import YoutubeVideo from '../../video/YoutubeVideo';
+import { PlayIcon } from '../../icons';
+import { IconSize } from '../../Icon';
 import Markdown from '../../Markdown';
 import { ContentEmbeds } from '../../contentEmbeds/ContentEmbeds';
 import { LazyImage } from '../../LazyImage';
@@ -121,6 +124,7 @@ export const PostFocusCard = ({
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
   const focusCommentRef = useRef<() => void>(() => {});
   const discussionRef = useRef<HTMLDivElement>(null);
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
   const readHref = getReadArticleHref(post);
   const handleImageClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
     if (onReaderInstallGateClick(event)) {
@@ -312,14 +316,42 @@ export const PostFocusCard = ({
           />
 
           {isVideoType && (
-            <div className="shadow-1 flex min-w-0 flex-col gap-4 rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3">
-              <YoutubeVideo
-                placeholderProps={{
-                  post: article,
-                  onWatchVideo: onReadArticle,
-                }}
-                videoId={article.videoId ?? ''}
-              />
+            <div
+              className={classNames(
+                'shadow-1 w-full overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-surface-float p-3 transition-[max-width] duration-300 ease-out',
+                isVideoPlaying ? 'max-w-full' : 'max-w-[70%]',
+              )}
+            >
+              {isVideoPlaying ? (
+                <YoutubeVideo
+                  autoplay
+                  placeholderProps={{
+                    post: article,
+                    onWatchVideo: onReadArticle,
+                  }}
+                  videoId={article.videoId ?? ''}
+                />
+              ) : (
+                <button
+                  type="button"
+                  aria-label="Play video"
+                  onClick={() => setIsVideoPlaying(true)}
+                  className="group relative block w-full overflow-hidden rounded-16"
+                >
+                  <LazyImage
+                    eager
+                    fallbackSrc={cloudinaryPostImageCoverPlaceholder}
+                    imgAlt="Video thumbnail"
+                    imgSrc={article.image}
+                    ratio="56.25%"
+                  />
+                  <span className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                    <span className="flex size-14 items-center justify-center rounded-full bg-background-default text-text-primary shadow-2 transition-transform group-hover:scale-110">
+                      <PlayIcon secondary size={IconSize.XLarge} />
+                    </span>
+                  </span>
+                </button>
+              )}
             </div>
           )}
 
diff --git a/packages/shared/src/components/video/YoutubeVideo.tsx b/packages/shared/src/components/video/YoutubeVideo.tsx
index b8ddb8e312c..98a992b7645 100644
--- a/packages/shared/src/components/video/YoutubeVideo.tsx
+++ b/packages/shared/src/components/video/YoutubeVideo.tsx
@@ -12,6 +12,7 @@ import { webappUrl } from '../../lib/constants';
 interface YoutubeVideoProps extends HTMLAttributes<HTMLIFrameElement> {
   videoId: string;
   className?: string;
+  autoplay?: boolean;
   placeholderProps: Pick<
     YoutubeVideoWithoutConsentProps,
     'post' | 'onWatchVideo'
@@ -21,6 +22,7 @@ interface YoutubeVideoProps extends HTMLAttributes<HTMLIFrameElement> {
 const YoutubeVideo = ({
   videoId,
   className,
+  autoplay = false,
   placeholderProps,
   ...props
 }: YoutubeVideoProps): ReactElement => {
@@ -47,11 +49,12 @@ const YoutubeVideo = ({
     );
   }
 
+  const autoplayParam = autoplay ? '?autoplay=1' : '';
   // Extension pages don't send Referer header, causing YouTube Error 153
   // Use webapp as intermediate page which sends proper Referer
   const embedSrc = isExtension
-    ? `${webappUrl}embed/youtube/${videoId}`
-    : `https://www.youtube-nocookie.com/embed/${videoId}`;
+    ? `${webappUrl}embed/youtube/${videoId}${autoplayParam}`
+    : `https://www.youtube-nocookie.com/embed/${videoId}${autoplayParam}`;
 
   return (
     <YoutubeVideoContainer className={className}>

From 2720713c3eb4cf2a2a1f8fa6cd83ff0b82da9904 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 14:26:11 +0300
Subject: [PATCH 097/111] style(discovery): reduce top padding on the post page

Trim the page wrapper's top padding (the focus card already adds its own
internal top spacing), keeping the bottom padding intact.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/PostDiscoveryLayout.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index 7d803700dd9..1118b98eec2 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -73,7 +73,7 @@ export const PostDiscoveryLayout = ({
 
   return (
     <div className="flex w-full flex-col bg-background-default">
-      <div className="mx-auto flex w-full max-w-[82rem] flex-col gap-8 px-4 py-6 tablet:px-6 laptop:px-8 laptop:py-8 laptopXL:max-w-[100rem]">
+      <div className="mx-auto flex w-full max-w-[82rem] flex-col gap-8 px-4 pb-6 pt-2 tablet:px-6 laptop:px-8 laptop:pb-8 laptopXL:max-w-[100rem]">
         <div className="mx-auto w-full max-w-[82rem] laptopXL:max-w-[100rem]">
           <PostFocusCard
             leftVariant={leftVariant}

From 66e275dd32e0844820c202b262f6bfba453b6aae Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 14:35:45 +0300
Subject: [PATCH 098/111] fix(discovery): muted autoplay on click + align
 inline ad attribution

- Play the YouTube video on the first click: cross-origin iframes block
  unmuted autoplay even with a parent gesture, so add mute=1 (YouTube
  shows its native unmute) to avoid a second press on a still frame.
- Inline ad: align the "Promoted by" / "Advertise here" row with the
  title, left-align both with a dot separator, and trim bottom padding.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../shared/src/components/post/PostSidebarAdWidget.tsx     | 7 +++++--
 packages/shared/src/components/video/YoutubeVideo.tsx      | 5 ++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/PostSidebarAdWidget.tsx b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
index dc28be7d7a7..c1b6cbcf589 100644
--- a/packages/shared/src/components/post/PostSidebarAdWidget.tsx
+++ b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
@@ -116,7 +116,7 @@ export function PostSidebarAdWidget({
     return (
       <div
         className={classNames(
-          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-3',
+          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary px-3 pb-2 pt-3',
           className?.container,
         )}
       >
@@ -157,8 +157,11 @@ export function PostSidebarAdWidget({
             Visit
           </Button>
         </div>
-        <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-1.5 pl-[3.25rem]">
           <AdAttribution ad={ad} className={{ main: 'relative z-1' }} />
+          <span aria-hidden className="text-text-quaternary typo-footnote">
+            ·
+          </span>
           <AdvertiseLink
             targetId={TargetId.AdSidebar}
             className="relative z-1 whitespace-nowrap hover:underline"
diff --git a/packages/shared/src/components/video/YoutubeVideo.tsx b/packages/shared/src/components/video/YoutubeVideo.tsx
index 98a992b7645..e08708c6d2a 100644
--- a/packages/shared/src/components/video/YoutubeVideo.tsx
+++ b/packages/shared/src/components/video/YoutubeVideo.tsx
@@ -49,7 +49,10 @@ const YoutubeVideo = ({
     );
   }
 
-  const autoplayParam = autoplay ? '?autoplay=1' : '';
+  // Cross-origin iframes block UNMUTED autoplay even with a parent click
+  // gesture, so YouTube would fall back to its play button (a second press).
+  // Muted autoplay is reliably permitted; YouTube shows its native unmute.
+  const autoplayParam = autoplay ? '?autoplay=1&mute=1' : '';
   // Extension pages don't send Referer header, causing YouTube Error 153
   // Use webapp as intermediate page which sends proper Referer
   const embedSrc = isExtension

From d35dcd31d69e7e2b934d84ea8397353f347e0f8f Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 14:42:31 +0300
Subject: [PATCH 099/111] feat(discovery): cap video TL;DR to four lines with
 inline Show more

For video posts, clamp the TL;DR summary to four lines. When it overflows,
a blue "Show more" link sits at the end of the last visible line (with a
fade into the clamped text) and expands the summary to full length on click.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 65 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index ee1142c6a1a..7be26d6f07e 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic';
 import type { ComponentProps, ReactElement } from 'react';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
 import {
@@ -25,6 +25,7 @@ import { ContentEmbeds } from '../../contentEmbeds/ContentEmbeds';
 import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { ClickableText } from '../../buttons/ClickableText';
 import { PostHeaderActions } from '../PostHeaderActions';
 import { PostUpvotesCommentsCount } from '../PostUpvotesCommentsCount';
 import { PostTagList } from '../tags/PostTagList';
@@ -88,6 +89,61 @@ const ArticleLink = ({
   );
 };
 
+/**
+ * Video TL;DR capped to four lines. When the text overflows, a blue "Show
+ * more" link sits at the end of the last visible line (with a fade so it
+ * blends into the clamped text) and expands the summary to full length.
+ */
+const VideoSummary = ({ summary }: { summary: string }): ReactElement => {
+  const ref = useRef<HTMLParagraphElement>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isClamped, setIsClamped] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return undefined;
+    }
+    const measure = () => setIsClamped(el.scrollHeight - el.clientHeight > 1);
+    measure();
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [summary]);
+
+  return (
+    <div className="relative">
+      <p
+        ref={ref}
+        className={classNames(
+          'select-text break-words text-text-secondary typo-markdown',
+          !isExpanded && 'line-clamp-4',
+        )}
+        data-testid="tldr-container"
+      >
+        {summary}
+      </p>
+      {isClamped && !isExpanded && (
+        <span className="absolute bottom-0 right-0 flex items-center bg-background-default pl-1">
+          <span
+            aria-hidden
+            className="pointer-events-none absolute right-full top-0 h-full w-8 bg-gradient-to-l from-background-default to-transparent"
+          />
+          <ClickableText
+            className="!text-text-link"
+            onClick={() => setIsExpanded(true)}
+          >
+            Show more
+          </ClickableText>
+        </span>
+      )}
+    </div>
+  );
+};
+
 export const PostFocusCard = ({
   post,
   origin,
@@ -361,14 +417,17 @@ export const PostFocusCard = ({
               <ContentEmbeds embeds={article.contentEmbeds} variant="post" />
             </>
           ) : (
-            article.summary && (
+            article.summary &&
+            (isVideoType ? (
+              <VideoSummary summary={article.summary} />
+            ) : (
               <p
                 className="select-text break-words text-text-secondary typo-markdown"
                 data-testid="tldr-container"
               >
                 {article.summary}
               </p>
-            )
+            ))
           )}
 
           <PostTagList post={article} />

From 0275ec6f8effb9a18ea18e07db90bc2b77c3e6b5 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Tue, 9 Jun 2026 21:00:35 +0300
Subject: [PATCH 100/111] style(ad): vertically center inline ad strip, tighten
 title spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Group the title and the "Promoted by · Advertise here" line into a column
beside the favicon so the icon and Visit button center against the text
block, and reduce the gap between the title and the line below it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/post/PostSidebarAdWidget.tsx   | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/shared/src/components/post/PostSidebarAdWidget.tsx b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
index c1b6cbcf589..0f563e85b49 100644
--- a/packages/shared/src/components/post/PostSidebarAdWidget.tsx
+++ b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
@@ -134,16 +134,28 @@ export function PostSidebarAdWidget({
             alt={ad.source}
             className="size-10 shrink-0 rounded-full object-cover"
           />
-          {inlineTitle && (
-            <Typography
-              tag={TypographyTag.P}
-              type={TypographyType.Callout}
-              color={TypographyColor.Primary}
-              className="line-clamp-2 min-w-0 flex-1 font-medium"
-            >
-              {inlineTitle}
-            </Typography>
-          )}
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+            {inlineTitle && (
+              <Typography
+                tag={TypographyTag.P}
+                type={TypographyType.Callout}
+                color={TypographyColor.Primary}
+                className="line-clamp-2 font-medium"
+              >
+                {inlineTitle}
+              </Typography>
+            )}
+            <div className="flex items-center gap-1.5">
+              <AdAttribution ad={ad} className={{ main: 'relative z-1' }} />
+              <span aria-hidden className="text-text-quaternary typo-footnote">
+                ·
+              </span>
+              <AdvertiseLink
+                targetId={TargetId.AdSidebar}
+                className="relative z-1 whitespace-nowrap hover:underline"
+              />
+            </div>
+          </div>
           <Button
             tag="a"
             href={ad.link}
@@ -157,16 +169,6 @@ export function PostSidebarAdWidget({
             Visit
           </Button>
         </div>
-        <div className="flex items-center gap-1.5 pl-[3.25rem]">
-          <AdAttribution ad={ad} className={{ main: 'relative z-1' }} />
-          <span aria-hidden className="text-text-quaternary typo-footnote">
-            ·
-          </span>
-          <AdvertiseLink
-            targetId={TargetId.AdSidebar}
-            className="relative z-1 whitespace-nowrap hover:underline"
-          />
-        </div>
         {inlineHasBody && (
           <Typography
             tag={TypographyTag.P}

From cf2c586721f891cdddad374afd05da6a39fc5194 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 09:44:26 +0300
Subject: [PATCH 101/111] fix(ad): balance inline ad padding by removing
 AdPixel flex gap

The trailing zero-size AdPixel was a flex child, so gap-2 reserved extra
space below the content row, making the bottom padding look larger. Pull
it out of flex flow (absolute) and use equal padding on all sides.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/post/PostSidebarAdWidget.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/post/PostSidebarAdWidget.tsx b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
index 0f563e85b49..106434e382d 100644
--- a/packages/shared/src/components/post/PostSidebarAdWidget.tsx
+++ b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
@@ -116,7 +116,7 @@ export function PostSidebarAdWidget({
     return (
       <div
         className={classNames(
-          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary px-3 pb-2 pt-3',
+          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-3',
           className?.container,
         )}
       >
@@ -181,7 +181,9 @@ export function PostSidebarAdWidget({
             {inlineBodyDescription}
           </Typography>
         )}
-        <AdPixel pixel={ad.pixel} />
+        <span className="absolute bottom-0 left-0">
+          <AdPixel pixel={ad.pixel} />
+        </span>
       </div>
     );
   }

From 173d2fa4813ab7d682577fb8f70a0bcca12d3cfd Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 09:48:17 +0300
Subject: [PATCH 102/111] style(ad): add hover state to inline ad card

Highlight the inline ad on hover (border + surface) to signal it is
clickable, matching the discussion composer trigger pattern.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/post/PostSidebarAdWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/PostSidebarAdWidget.tsx b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
index 106434e382d..6cfc41f7ff1 100644
--- a/packages/shared/src/components/post/PostSidebarAdWidget.tsx
+++ b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
@@ -116,7 +116,7 @@ export function PostSidebarAdWidget({
     return (
       <div
         className={classNames(
-          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-3',
+          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-3 transition-colors hover:border-border-subtlest-primary hover:bg-surface-hover',
           className?.container,
         )}
       >

From 1643fc3bc4b019624d794321ddb18a1035da75fa Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 09:53:42 +0300
Subject: [PATCH 103/111] fix(discovery): remove doubled page padding, tighten
 action bar gap

On the post page the layout wrapper added the same horizontal padding the
focus card already applies, doubling it (huge side padding on mobile and
squeezing the content into overflow). Drop the wrapper padding (the focus
card owns it, matching the modal) and give the signup hero its own. Also
reduce the action bar's inter-group gap so its buttons fit on narrow widths.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/post/discovery/PostDiscoveryActionBar.tsx    | 2 +-
 .../src/components/post/discovery/PostDiscoveryLayout.tsx   | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 930d8017f8f..34543dd2f11 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -144,7 +144,7 @@ export const PostDiscoveryActionBar = ({
       <div ref={sentinelRef} aria-hidden className="pointer-events-none h-0" />
       <div
         className={classNames(
-          'sticky z-3 flex items-center justify-between gap-4 border-b border-border-subtlest-tertiary bg-background-default px-1 py-2',
+          'sticky z-3 flex items-center justify-between gap-2 border-b border-border-subtlest-tertiary bg-background-default px-1 py-2',
           // Drop the top border once pinned so it doesn't double up with the
           // header border above it.
           !isStuck && 'border-t',
diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
index 1118b98eec2..4e4bb97ae8c 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryLayout.tsx
@@ -73,7 +73,9 @@ export const PostDiscoveryLayout = ({
 
   return (
     <div className="flex w-full flex-col bg-background-default">
-      <div className="mx-auto flex w-full max-w-[82rem] flex-col gap-8 px-4 pb-6 pt-2 tablet:px-6 laptop:px-8 laptop:pb-8 laptopXL:max-w-[100rem]">
+      <div className="mx-auto flex w-full max-w-[82rem] flex-col gap-8 pb-6 pt-2 laptop:pb-8 laptopXL:max-w-[100rem]">
+        {/* The focus card owns its own horizontal padding (shared with the
+            post modal), so this wrapper must not add more or it doubles up. */}
         <div className="mx-auto w-full max-w-[82rem] laptopXL:max-w-[100rem]">
           <PostFocusCard
             leftVariant={leftVariant}
@@ -83,7 +85,7 @@ export const PostDiscoveryLayout = ({
         </div>
 
         {!user && (
-          <div className="w-full">
+          <div className="w-full px-4 tablet:px-6 laptop:px-8">
             <PostDiscoverySignupHero post={post} />
           </div>
         )}

From 8688f5cfda27ba6e11ec7bc688f1a38ac6162d64 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 10:01:33 +0300
Subject: [PATCH 104/111] fix(discovery): match production mobile side padding
 on focus card

The focus card used px-4 (16px) on mobile vs production post content's
px-2 (8px). Halve the small-resolution horizontal padding to px-2 so the
page/modal align with the rest of the app; keep the larger breakpoints.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/post/discovery/PostFocusCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 7be26d6f07e..2d1726bdb12 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -203,7 +203,7 @@ export const PostFocusCard = ({
       className="flex w-full flex-col rounded-24 bg-background-default"
       data-testid="post-focus-card"
     >
-      <div className="flex flex-col px-4 tablet:px-6 laptop:px-8">
+      <div className="flex flex-col px-2 tablet:px-6 laptop:px-8">
         <div className="relative mx-auto flex w-full min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px]">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
             {author ? (

From 83c4bcfc4cd4f677ca6fda434670084b38f62f08 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 10:50:35 +0300
Subject: [PATCH 105/111] fix(discovery): match production reader side padding
 (px-4) on mobile

Restore px-4 mobile padding to align with the production post-page reader
(PostExperienceLayout/EngagementRail/ReaderFallback all use
px-4 tablet:px-6 laptop:px-8). The earlier "huge padding" was the layout
doubling the card padding, already removed; px-2 overcorrected.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/post/discovery/PostFocusCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 2d1726bdb12..7be26d6f07e 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -203,7 +203,7 @@ export const PostFocusCard = ({
       className="flex w-full flex-col rounded-24 bg-background-default"
       data-testid="post-focus-card"
     >
-      <div className="flex flex-col px-2 tablet:px-6 laptop:px-8">
+      <div className="flex flex-col px-4 tablet:px-6 laptop:px-8">
         <div className="relative mx-auto flex w-full min-w-0 flex-col gap-4 py-6 laptop:max-w-[768px]">
           <div className="flex min-h-8 min-w-0 items-center gap-2">
             {author ? (

From 68b1d0e5ebab26bd276b16a72a0b01ff6ba2f983 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 10:53:33 +0300
Subject: [PATCH 106/111] style(ad): soften inline ad hover state

Drop the border-brightening on hover so the border stays subtle; keep a
gentle background fill as the hover affordance instead.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/shared/src/components/post/PostSidebarAdWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/components/post/PostSidebarAdWidget.tsx b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
index 6cfc41f7ff1..a0aa46bb294 100644
--- a/packages/shared/src/components/post/PostSidebarAdWidget.tsx
+++ b/packages/shared/src/components/post/PostSidebarAdWidget.tsx
@@ -116,7 +116,7 @@ export function PostSidebarAdWidget({
     return (
       <div
         className={classNames(
-          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-3 transition-colors hover:border-border-subtlest-primary hover:bg-surface-hover',
+          'relative flex w-full flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-3 transition-colors hover:bg-surface-hover',
           className?.container,
         )}
       >

From 1a8bc219e8cc590422ce31f64f16f0bea3f44cb8 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 11:08:14 +0300
Subject: [PATCH 107/111] fix(discovery): unify Read post button + fix mobile
 title/image layout

- Use one Read post button for every post type: icon + label via the
  shared helpers, Primary variant on all resolutions (keeps the
  background on mobile). Previously shared posts used an icon-less button
  while other types went through PostHeaderActions, which dropped the
  background to Tertiary on mobile.
- Stop the title being squeezed on mobile: smaller title font
  (typo-title2 -> typo-large-title from tablet) and a smaller cover
  thumbnail (w-20 -> w-40 from tablet).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostFocusCard.tsx          | 47 +++++++------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 7be26d6f07e..e2c566c1f66 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -6,6 +6,7 @@ import type { Post } from '../../../graphql/posts';
 import {
   getReadArticleHref,
   getReadPostButtonText,
+  isInternalReadType,
   isVideoPost,
   PostType,
 } from '../../../graphql/posts';
@@ -26,7 +27,7 @@ import { LazyImage } from '../../LazyImage';
 import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { ClickableText } from '../../buttons/ClickableText';
-import { PostHeaderActions } from '../PostHeaderActions';
+import { getReadPostButtonIcon } from '../../cards/common/ReadArticleButton';
 import { PostUpvotesCommentsCount } from '../PostUpvotesCommentsCount';
 import { PostTagList } from '../tags/PostTagList';
 import { TruncateText } from '../../utilities';
@@ -239,32 +240,20 @@ export const PostFocusCard = ({
                 />
               )
             )}
-            {isShared ? (
-              readHref && (
-                <Button
-                  tag="a"
-                  href={readHref}
-                  target="_blank"
-                  rel="noopener"
-                  onClick={onReadArticle}
-                  variant={ButtonVariant.Primary}
-                  size={ButtonSize.Small}
-                  className="ml-auto shrink-0"
-                >
-                  {getReadPostButtonText(post)}
-                </Button>
-              )
-            ) : (
-              <PostHeaderActions
-                buttonSize={ButtonSize.Small}
-                className="ml-auto h-8 shrink-0 items-center"
-                contextMenuId="post-discovery-header-actions"
-                hideMenuOptions
-                hideSubscribeAction
-                onReadArticle={onReadArticle}
-                post={post}
-                readButtonVariant={ButtonVariant.Primary}
-              />
+            {readHref && !isInternalReadType(post) && (
+              <Button
+                tag="a"
+                href={readHref}
+                target="_blank"
+                rel="noopener"
+                icon={getReadPostButtonIcon(post)}
+                onClick={onReadArticle}
+                variant={ButtonVariant.Primary}
+                size={ButtonSize.Small}
+                className="ml-auto shrink-0"
+              >
+                {getReadPostButtonText(post)}
+              </Button>
             )}
           </div>
 
@@ -312,14 +301,14 @@ export const PostFocusCard = ({
             )}
             <div className="flex min-w-0 items-start gap-4">
               <h1
-                className="min-w-0 flex-1 break-words font-bold text-text-primary typo-large-title"
+                className="min-w-0 flex-1 break-words font-bold text-text-primary typo-title2 tablet:typo-large-title"
                 data-testid="post-modal-title"
               >
                 {title}
               </h1>
               {!isVideoType && article.image && (
                 <a
-                  className="block h-fit w-28 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:w-40"
+                  className="block h-fit w-20 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:w-40"
                   href={readHref}
                   onClick={handleImageClick}
                   rel="noopener"

From 7b15877c0dde7331cd4590109a72b8b37dd68499 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 11:20:24 +0300
Subject: [PATCH 108/111] style(discovery): square cover image, stacked below
 title on mobile

Replace the small wide thumbnail with a square cover (ratio 1:1). On
mobile the title spans full width with the square image stacked below
(size-32); on tablet+ the square sits beside the title (size-40). Fixes
the cramped title and gives the image real presence on both layouts.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/post/discovery/PostFocusCard.tsx       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index e2c566c1f66..fb1974da754 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -299,16 +299,16 @@ export const PostFocusCard = ({
             {!isShared && isCollection && (
               <p className="text-text-tertiary typo-footnote">Collection</p>
             )}
-            <div className="flex min-w-0 items-start gap-4">
+            <div className="flex min-w-0 flex-col gap-4 tablet:flex-row tablet:items-start">
               <h1
-                className="min-w-0 flex-1 break-words font-bold text-text-primary typo-title2 tablet:typo-large-title"
+                className="min-w-0 break-words font-bold text-text-primary typo-title2 tablet:flex-1 tablet:typo-large-title"
                 data-testid="post-modal-title"
               >
                 {title}
               </h1>
               {!isVideoType && article.image && (
                 <a
-                  className="block h-fit w-20 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:w-40"
+                  className="block size-32 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:size-40"
                   href={readHref}
                   onClick={handleImageClick}
                   rel="noopener"
@@ -321,7 +321,7 @@ export const PostFocusCard = ({
                     fetchPriority="high"
                     imgAlt="Post cover image"
                     imgSrc={article.image}
-                    ratio="52%"
+                    ratio="100%"
                   />
                 </a>
               )}

From d711237da5e19fb74dc9fe6ebb49a41bd85ce981 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 12:24:24 +0300
Subject: [PATCH 109/111] style(discovery): square cover only below laptop,
 wide ratio on desktop

Scope the square crop to mobile/tablet via responsive aspect classes
(aspect-square -> laptop:aspect-[25/13], the original 52% ratio), since
LazyImage's ratio prop is inline padding and can't respond to breakpoints.
Desktop keeps the previous wide thumbnail beside the title.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../shared/src/components/post/discovery/PostFocusCard.tsx  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index fb1974da754..8c27a2858d4 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -308,7 +308,7 @@ export const PostFocusCard = ({
               </h1>
               {!isVideoType && article.image && (
                 <a
-                  className="block size-32 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:size-40"
+                  className="block h-fit w-32 shrink-0 overflow-hidden rounded-16 bg-background-subtle tablet:w-40"
                   href={readHref}
                   onClick={handleImageClick}
                   rel="noopener"
@@ -317,11 +317,13 @@ export const PostFocusCard = ({
                 >
                   <LazyImage
                     eager
+                    // Square crop on mobile/tablet; laptop+ keeps the
+                    // original wide cover ratio (52% => 25/13).
+                    className="aspect-square w-full laptop:aspect-[25/13]"
                     fallbackSrc={cloudinaryPostImageCoverPlaceholder}
                     fetchPriority="high"
                     imgAlt="Post cover image"
                     imgSrc={article.image}
-                    ratio="100%"
                   />
                 </a>
               )}

From 25a1a81ff175d02452b6865d5b35bd5885580997 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 13:18:25 +0300
Subject: [PATCH 110/111] feat(discovery): morphing engagement bar (Liquid
 Glass-style)

Redesign the focus-card action bar to concentrate-then-expand, inspired by
the iOS 26 Liquid Glass toolbar:

- Default (collapsed): show only the upvote (always, so the bar reads as
  actionable) plus any action that has a metric (comment/award when their
  count > 0). Everything else is hidden.
- On hover/focus of the bar it morphs open to the full action set; the
  upvote stays anchored while siblings grow in around it. Touch devices,
  which have no hover, show everything by default.
- The reveal is CSS-driven (grid 0fr->1fr width + opacity morph, the same
  trick as Section.tsx) so there is no hover re-render and no flicker.
- Frosted glass surface (translucent bg + backdrop blur).
- Fix the pin-time layout shift: keep the top border always present and
  toggle its color instead of its presence, so height never changes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/PostDiscoveryActionBar.tsx | 234 +++++++++++-------
 1 file changed, 147 insertions(+), 87 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
index 34543dd2f11..51310d95fd9 100644
--- a/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
+++ b/packages/shared/src/components/post/discovery/PostDiscoveryActionBar.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
@@ -44,11 +44,48 @@ interface PostDiscoveryActionBarProps {
   className?: string;
 }
 
+/**
+ * One control in the morphing engagement bar. `pinned` slots are always
+ * visible; the rest collapse to zero width on pointer devices and morph open
+ * (width + opacity) when the bar is hovered or focused. Touch devices, which
+ * have no hover, reveal everything by default.
+ *
+ * The width morph uses the grid `0fr -> 1fr` track trick (the inner element is
+ * `min-w-0 overflow-hidden`) so each control animates to its natural content
+ * width — the Liquid Glass "concentrate, then expand on intent" behavior from
+ * the iOS 26 toolbar, where the source control stays anchored as siblings grow
+ * in around it.
+ */
+const MorphSlot = ({
+  pinned = false,
+  children,
+}: {
+  pinned?: boolean;
+  children: ReactNode;
+}): ReactElement => (
+  <div
+    className={classNames(
+      'grid transition-[grid-template-columns,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+      pinned
+        ? 'grid-cols-[1fr] opacity-100'
+        : 'grid-cols-[1fr] opacity-100 mouse:grid-cols-[0fr] mouse:opacity-0 mouse:group-focus-within/bar:grid-cols-[1fr] mouse:group-focus-within/bar:opacity-100 mouse:group-hover/bar:grid-cols-[1fr] mouse:group-hover/bar:opacity-100',
+    )}
+  >
+    <div className={classNames('min-w-0', pinned ? '' : 'overflow-hidden')}>
+      {children}
+    </div>
+  </div>
+);
+
 /**
  * Engagement bar for the discovery focus card, built on the CardAction
  * primitives (PR #6064 guideline): each action's count lives inside the click
  * target so the icon or number performs the action. Sticks to the top while
  * scrolling; the modal X appears only once the bar is pinned.
+ *
+ * Concentrated by default to the upvote (always) plus any action that has a
+ * metric, it morphs open to the full action set on hover/focus — see
+ * {@link MorphSlot}.
  */
 export const PostDiscoveryActionBar = ({
   post,
@@ -144,110 +181,133 @@ export const PostDiscoveryActionBar = ({
       <div ref={sentinelRef} aria-hidden className="pointer-events-none h-0" />
       <div
         className={classNames(
-          'sticky z-3 flex items-center justify-between gap-2 border-b border-border-subtlest-tertiary bg-background-default px-1 py-2',
-          // Drop the top border once pinned so it doesn't double up with the
-          // header border above it.
-          !isStuck && 'border-t',
+          'group/bar bg-background-default/80 sticky z-3 flex items-center justify-between border-b border-t border-b-border-subtlest-tertiary border-t-transparent px-1 py-2 backdrop-blur-xl transition-colors duration-300',
+          // Keep the top border present always and toggle its color (visible
+          // only before the bar pins) so the bar height — and the content
+          // below it — never shifts when it sticks.
+          !isStuck && '!border-t-border-subtlest-tertiary',
           stickyTopClassName,
           className,
         )}
       >
-        <div className="flex items-center gap-1">
-          <Tooltip
-            content={isUpvoteActive ? 'Remove upvote' : 'More like this'}
-          >
-            <CardAction
-              id="upvote-post-btn"
-              label="Upvote"
-              color={ButtonColor.Avocado}
-              icon={<UpvoteButtonIcon />}
-              iconPressed={<UpvoteButtonIcon secondary />}
-              count={upvotes}
-              pressed={isUpvoteActive}
-              onClick={onToggleUpvote}
-            />
-          </Tooltip>
-          <Tooltip
-            content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
-          >
-            <CardAction
-              id="downvote-post-btn"
-              label="Downvote"
-              color={ButtonColor.Ketchup}
-              icon={<DownvoteIcon />}
-              iconPressed={<DownvoteIcon secondary />}
-              pressed={isDownvoteActive}
-              onClick={onToggleDownvote}
-            />
-          </Tooltip>
-          <Tooltip content="Comment">
-            <CardAction
-              id="comment-post-btn"
-              label="Comment"
-              color={ButtonColor.BlueCheese}
-              icon={<CommentIcon />}
-              iconPressed={<CommentIcon secondary />}
-              count={comments}
-              pressed={post.commented}
-              onClick={onComment}
-            />
-          </Tooltip>
-          {canAward && (
+        <div className="flex min-w-0 items-center">
+          <MorphSlot pinned>
             <Tooltip
-              content={isAwarded ? 'You already awarded this post!' : 'Award'}
+              content={isUpvoteActive ? 'Remove upvote' : 'More like this'}
             >
               <CardAction
-                id="award-post-btn"
-                label="Award"
-                color={ButtonColor.Cabbage}
-                icon={<MedalBadgeIcon secondary />}
-                iconPressed={<MedalBadgeIcon />}
-                count={awards}
-                pressed={isAwarded}
-                onClick={onGiveAward}
+                id="upvote-post-btn"
+                label="Upvote"
+                color={ButtonColor.Avocado}
+                icon={<UpvoteButtonIcon />}
+                iconPressed={<UpvoteButtonIcon secondary />}
+                count={upvotes}
+                pressed={isUpvoteActive}
+                onClick={onToggleUpvote}
+              />
+            </Tooltip>
+          </MorphSlot>
+          <MorphSlot>
+            <Tooltip
+              content={isDownvoteActive ? 'Remove downvote' : 'Less like this'}
+            >
+              <CardAction
+                id="downvote-post-btn"
+                label="Downvote"
+                color={ButtonColor.Ketchup}
+                icon={<DownvoteIcon />}
+                iconPressed={<DownvoteIcon secondary />}
+                pressed={isDownvoteActive}
+                onClick={onToggleDownvote}
               />
             </Tooltip>
+          </MorphSlot>
+          <MorphSlot pinned={comments > 0}>
+            <Tooltip content="Comment">
+              <CardAction
+                id="comment-post-btn"
+                label="Comment"
+                color={ButtonColor.BlueCheese}
+                icon={<CommentIcon />}
+                iconPressed={<CommentIcon secondary />}
+                count={comments}
+                pressed={post.commented}
+                onClick={onComment}
+              />
+            </Tooltip>
+          </MorphSlot>
+          {canAward && (
+            <MorphSlot pinned={awards > 0}>
+              <Tooltip
+                content={isAwarded ? 'You already awarded this post!' : 'Award'}
+              >
+                <CardAction
+                  id="award-post-btn"
+                  label="Award"
+                  color={ButtonColor.Cabbage}
+                  icon={<MedalBadgeIcon secondary />}
+                  iconPressed={<MedalBadgeIcon />}
+                  count={awards}
+                  pressed={isAwarded}
+                  onClick={onGiveAward}
+                />
+              </Tooltip>
+            </MorphSlot>
           )}
         </div>
 
-        <div className="flex items-center gap-1">
-          <BookmarkButton
-            post={post}
-            iconSize={IconSize.Small}
-            buttonProps={{
-              id: 'bookmark-post-btn',
-              pressed: post.bookmarked,
-              onClick: onToggleBookmark,
-              size: ButtonSize.Medium,
-            }}
-          />
-          <Tooltip content="Copy link">
-            <CardAction
-              label="Copy link"
-              color={ButtonColor.Cabbage}
-              icon={<LinkIcon />}
-              onClick={() => onCopyLinkClick?.(post)}
+        <div className="flex items-center">
+          <MorphSlot>
+            <BookmarkButton
+              post={post}
+              iconSize={IconSize.Small}
+              buttonProps={{
+                id: 'bookmark-post-btn',
+                pressed: post.bookmarked,
+                onClick: onToggleBookmark,
+                size: ButtonSize.Medium,
+              }}
             />
-          </Tooltip>
-          {post.clickbaitTitleDetected && (
-            <PostClickbaitShield post={post} iconOnly />
-          )}
-          {canSeeAnalytics && (
-            <Tooltip content="Analytics">
+          </MorphSlot>
+          <MorphSlot>
+            <Tooltip content="Copy link">
               <CardAction
-                label="Analytics"
-                icon={<AnalyticsIcon />}
-                href={`${webappUrl}posts/${post.id}/analytics`}
+                label="Copy link"
+                color={ButtonColor.Cabbage}
+                icon={<LinkIcon />}
+                onClick={() => onCopyLinkClick?.(post)}
               />
             </Tooltip>
+          </MorphSlot>
+          {post.clickbaitTitleDetected && (
+            <MorphSlot>
+              <PostClickbaitShield post={post} iconOnly />
+            </MorphSlot>
+          )}
+          {canSeeAnalytics && (
+            <MorphSlot>
+              <Tooltip content="Analytics">
+                <CardAction
+                  label="Analytics"
+                  icon={<AnalyticsIcon />}
+                  href={`${webappUrl}posts/${post.id}/analytics`}
+                />
+              </Tooltip>
+            </MorphSlot>
           )}
-          <PostMenuOptions
-            post={post}
-            origin={Origin.ArticleModal}
-            buttonSize={ButtonSize.Medium}
-          />
+          <MorphSlot>
+            <PostMenuOptions
+              post={post}
+              origin={Origin.ArticleModal}
+              buttonSize={ButtonSize.Medium}
+            />
+          </MorphSlot>
           {isStuck && onClose && (
-            <CloseButton size={ButtonSize.Medium} onClick={() => onClose()} />
+            <CloseButton
+              className="ml-0.5"
+              size={ButtonSize.Medium}
+              onClick={() => onClose()}
+            />
           )}
         </div>
       </div>

From e9a54d2d0b04ccc330c0ae927f4a60a06829542e Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Wed, 10 Jun 2026 13:28:51 +0300
Subject: [PATCH 111/111] =?UTF-8?q?fix(discovery):=20mobile=20header=20?=
 =?UTF-8?q?=E2=80=94=20read=20button=20below=20title,=20fewer=20squads?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move the Read post / Watch video button below the title on mobile (the
  header row was too tight beside the author + Follow); keep it inline next
  to Follow from tablet up. Follow button stays in the header on all sizes.
- Share row shows only two squads on mobile (four from tablet up) so it
  doesn't overflow the row on small screens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../post/discovery/DiscussionShareRow.tsx     |  8 ++++-
 .../post/discovery/PostFocusCard.tsx          | 36 +++++++++++--------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx b/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
index 5bc8d09707e..51058cae65e 100644
--- a/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
+++ b/packages/shared/src/components/post/discovery/DiscussionShareRow.tsx
@@ -33,6 +33,7 @@ interface DiscussionShareRowProps {
 }
 
 const maxInlineSquads = 4;
+const mobileInlineSquads = 2;
 
 /**
  * Compact share row for the discussion panel. Surfaces the most-used quick
@@ -142,10 +143,15 @@ export const DiscussionShareRow = ({
             variant={ButtonVariant.Tertiary}
           />
         </Tooltip>
-        {inlineSquads.map((squad) => (
+        {inlineSquads.map((squad, index) => (
           <Tooltip key={squad.id} content={`Share to @${squad.handle}`}>
             <Button
               aria-label={`Share to ${squad.name}`}
+              // Keep the row compact on mobile: only the first two squads
+              // show; the rest appear from tablet up.
+              className={
+                index >= mobileInlineSquads ? 'hidden tablet:flex' : undefined
+              }
               icon={
                 <SourceProfilePicture
                   source={squad}
diff --git a/packages/shared/src/components/post/discovery/PostFocusCard.tsx b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
index 8c27a2858d4..dc6630a717f 100644
--- a/packages/shared/src/components/post/discovery/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/discovery/PostFocusCard.tsx
@@ -199,6 +199,25 @@ export const PostFocusCard = ({
     focusCommentRef.current();
   };
 
+  // Rendered in the header on tablet+ (next to Follow) but moved below the
+  // title on mobile, where the header row is too tight to hold both.
+  const renderReadButton = (className: string): ReactElement | null =>
+    readHref && !isInternalReadType(post) ? (
+      <Button
+        tag="a"
+        href={readHref}
+        target="_blank"
+        rel="noopener"
+        icon={getReadPostButtonIcon(post)}
+        onClick={onReadArticle}
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Small}
+        className={className}
+      >
+        {getReadPostButtonText(post)}
+      </Button>
+    ) : null;
+
   return (
     <article
       className="flex w-full flex-col rounded-24 bg-background-default"
@@ -240,21 +259,7 @@ export const PostFocusCard = ({
                 />
               )
             )}
-            {readHref && !isInternalReadType(post) && (
-              <Button
-                tag="a"
-                href={readHref}
-                target="_blank"
-                rel="noopener"
-                icon={getReadPostButtonIcon(post)}
-                onClick={onReadArticle}
-                variant={ButtonVariant.Primary}
-                size={ButtonSize.Small}
-                className="ml-auto shrink-0"
-              >
-                {getReadPostButtonText(post)}
-              </Button>
-            )}
+            {renderReadButton('ml-auto hidden shrink-0 tablet:flex')}
           </div>
 
           <div className="flex min-w-0 flex-col gap-3">
@@ -328,6 +333,7 @@ export const PostFocusCard = ({
                 </a>
               )}
             </div>
+            {renderReadButton('w-fit tablet:hidden')}
           </div>
 
           <PostDiscoveryActionBar