feat: post highlight new cards (#6101)

Author: capJavert

packages/shared/src/components/Feed.tsx

@@ -24,6 +24,8 @@ import useFeedInfiniteScroll, {
   InfiniteScrollScreenOffset,
 } from '../hooks/feed/useFeedInfiniteScroll';
 import FeedItemComponent, { getFeedItemKey } from './FeedItemComponent';
+import { computeColSpans } from '../lib/feedHighlightColSpan';
+import type { FeaturedWideColSpan } from './cards/article/ArticleFeaturedWideGridCard';
 import { useLogContext } from '../contexts/LogContext';
 import { feedLogExtra, postLogEvent } from '../lib/feed';
 import { usePostModalNavigation } from '../hooks/usePostModalNavigation';
@@ -67,6 +69,7 @@ import {
   briefCardFeedFeature,
   briefFeedEntrypointPage,
   featureFeedAdTemplate,
+  featurePostHighlightCards,
 } from '../lib/featureManagement';
 import { useNewD1ExperienceFeature } from '../hooks/useNewD1ExperienceFeature';
 import type { AwardProps } from '../graphql/njord';
@@ -372,6 +375,59 @@ export default function Feed<T>({
     firstSlotOffset: Number(showProfileCompletionCard || showBriefCard),
   });
 
+  const isMobileViewport = !isTabletViewport;
+  const isListContext = useList || shouldUseListFeedLayout;
+  const canRenderHighlightCards =
+    !isMobileViewport && !isListContext && virtualizedNumCards > 1;
+  const { value: isPostHighlightCardsEnabled } = useConditionalFeature({
+    feature: featurePostHighlightCards,
+    shouldEvaluate: canRenderHighlightCards,
+  });
+  const isHighlightCardLayoutEnabled =
+    canRenderHighlightCards && isPostHighlightCardsEnabled;
+  const currentPageSize = pageSize ?? currentSettings.pageSize;
+  const showPromoBanner = !!briefBannerPage;
+  const columnsDiffWithPage = currentPageSize % virtualizedNumCards;
+  const indexWhenShowingPromoBanner =
+    currentPageSize * Number(briefBannerPage) - // number of items at that page
+    columnsDiffWithPage * Number(briefBannerPage) - // cards let out of rows * page number
+    Number(showFirstSlotCard);
+
+  const fullRowInsertionBeforeIndex = useMemo(() => {
+    const set = new Set<number>();
+    if (showPromoBanner) {
+      set.add(indexWhenShowingPromoBanner);
+    }
+    if (shouldShowInFeedHero) {
+      set.add(adjustedHeroInsertIndex);
+    }
+    return set;
+  }, [
+    showPromoBanner,
+    indexWhenShowingPromoBanner,
+    shouldShowInFeedHero,
+    adjustedHeroInsertIndex,
+  ]);
+
+  const itemColSpans = useMemo(
+    () =>
+      computeColSpans(items, {
+        numCards: virtualizedNumCards,
+        isMobile: isMobileViewport,
+        isList: isListContext,
+        isEnabled: isHighlightCardLayoutEnabled,
+        fullRowInsertionBeforeIndex,
+      }),
+    [
+      items,
+      virtualizedNumCards,
+      isMobileViewport,
+      isListContext,
+      isHighlightCardLayoutEnabled,
+      fullRowInsertionBeforeIndex,
+    ],
+  );
+
   useMutationSubscription({
     matcher: ({ mutation }) => {
       const [requestKey] = Array.isArray(mutation.options.mutationKey)
@@ -638,14 +694,6 @@ export default function Feed<T>({
     feedName as SharedFeedPage,
   );
 
-  const currentPageSize = pageSize ?? currentSettings.pageSize;
-  const showPromoBanner = !!briefBannerPage;
-  const columnsDiffWithPage = currentPageSize % virtualizedNumCards;
-  const indexWhenShowingPromoBanner =
-    currentPageSize * Number(briefBannerPage) - // number of items at that page
-    columnsDiffWithPage * Number(briefBannerPage) - // cards let out of rows * page number
-    Number(showFirstSlotCard);
-
   const FeedWrapperComponent = isSearchPageLaptop
     ? SearchResultsLayout
     : FeedContainer;
@@ -697,45 +745,14 @@ export default function Feed<T>({
                 }}
               />
             )}
-            {items.map((item, index) => (
-              <FeedCardContext.Provider
-                key={getFeedItemKey(item, index)}
-                value={{
-                  boostedBy: isBoostedPostAd(item)
-                    ? item.ad.data?.post?.author || item.ad.data?.post?.scout
-                    : undefined,
-                }}
-              >
-                {showPromoBanner && index === indexWhenShowingPromoBanner && (
-                  <BriefBannerFeed
-                    style={{
-                      gridColumn: !shouldUseListFeedLayout
-                        ? `span ${virtualizedNumCards}`
-                        : undefined,
-                    }}
-                  />
-                )}
-                {shouldShowInFeedHero && index === adjustedHeroInsertIndex && (
-                  <div
-                    style={{
-                      gridColumn: !shouldUseListFeedLayout
-                        ? `span ${virtualizedNumCards}`
-                        : undefined,
-                    }}
-                  >
-                    <TopHero
-                      className="pt-0"
-                      title={readingReminderTitle}
-                      subtitle={readingReminderSubtitle}
-                      onCtaClick={() =>
-                        onEnableHero(NotificationCtaPlacement.InFeedHero)
-                      }
-                      onClose={() =>
-                        onDismissHero(NotificationCtaPlacement.InFeedHero)
-                      }
-                    />
-                  </div>
-                )}
+            {items.map((item, index) => {
+              const colSpan = itemColSpans[index] ?? 1;
+              const isWidened = colSpan > 1;
+              const wideColSpan =
+                isWidened && (colSpan === 2 || colSpan === 3 || colSpan === 4)
+                  ? (colSpan as FeaturedWideColSpan)
+                  : undefined;
+              const itemNode = (
                 <FeedItemComponent
                   item={item}
                   index={index}
@@ -758,9 +775,64 @@ export default function Feed<T>({
                   onReadArticleClick={onReadArticleClick}
                   virtualizedNumCards={virtualizedNumCards}
                   disableAdRefresh={disableAdRefresh}
+                  wideColSpan={wideColSpan}
                 />
-              </FeedCardContext.Provider>
-            ))}
+              );
+
+              return (
+                <FeedCardContext.Provider
+                  key={getFeedItemKey(item, index)}
+                  value={{
+                    boostedBy: isBoostedPostAd(item)
+                      ? item.ad.data?.post?.author || item.ad.data?.post?.scout
+                      : undefined,
+                  }}
+                >
+                  {showPromoBanner && index === indexWhenShowingPromoBanner && (
+                    <BriefBannerFeed
+                      style={{
+                        gridColumn: !shouldUseListFeedLayout
+                          ? `span ${virtualizedNumCards}`
+                          : undefined,
+                      }}
+                    />
+                  )}
+                  {shouldShowInFeedHero &&
+                    index === adjustedHeroInsertIndex && (
+                      <div
+                        style={{
+                          gridColumn: !shouldUseListFeedLayout
+                            ? `span ${virtualizedNumCards}`
+                            : undefined,
+                        }}
+                      >
+                        <TopHero
+                          className="pt-0"
+                          title={readingReminderTitle}
+                          subtitle={readingReminderSubtitle}
+                          onCtaClick={() =>
+                            onEnableHero(NotificationCtaPlacement.InFeedHero)
+                          }
+                          onClose={() =>
+                            onDismissHero(NotificationCtaPlacement.InFeedHero)
+                          }
+                        />
+                      </div>
+                    )}
+                  {isWidened ? (
+                    <div
+                      className="flex h-full w-full [&>*]:h-full [&>*]:w-full"
+                      style={{ gridColumn: `span ${colSpan}` }}
+                      data-testid="feedItemColSpanWrapper"
+                    >
+                      {itemNode}
+                    </div>
+                  ) : (
+                    itemNode
+                  )}
+                </FeedCardContext.Provider>
+              );
+            })}
             {!isFetching && !isInitialLoading && !isHorizontal && (
               <InfiniteScrollScreenOffset ref={infiniteScrollRef} />
             )}

packages/shared/src/components/FeedItemComponent.tsx

@@ -28,6 +28,8 @@ import { FreeformList } from './cards/Freeform/FreeformList';
 import type { PostClick } from '../lib/click';
 import { ArticleList } from './cards/article/ArticleList';
 import { ArticleGrid } from './cards/article/ArticleGrid';
+import { ArticleFeaturedWideGridCard } from './cards/article/ArticleFeaturedWideGridCard';
+import type { FeaturedWideColSpan } from './cards/article/ArticleFeaturedWideGridCard';
 import { ShareGrid } from './cards/share/ShareGrid';
 import { ShareList } from './cards/share/ShareList';
 import { CollectionGrid } from './cards/collection';
@@ -98,6 +100,12 @@ export type FeedItemComponentProps = {
   ) => unknown;
   virtualizedNumCards: number;
   disableAdRefresh?: boolean;
+  /**
+   * When set, render the post as a wide featured highlight card spanning
+   * the given number of grid columns. Only used for article-like post
+   * types with an active `postHighlight`.
+   */
+  wideColSpan?: FeaturedWideColSpan;
 } & Pick<UseVotePost, 'toggleUpvote' | 'toggleDownvote'> &
   Pick<UseBookmarkPost, 'toggleBookmark'>;
 
@@ -280,6 +288,7 @@ function FeedItemComponent({
   onCommentClick,
   onReadArticleClick,
   virtualizedNumCards,
+  wideColSpan,
 }: FeedItemComponentProps): ReactElement | null {
   const { logEvent } = useLogContext();
   const inViewRef = useLogImpression(
@@ -290,6 +299,7 @@ function FeedItemComponent({
     row,
     feedName,
     ranking,
+    wideColSpan,
   );
 
   const { shouldUseListFeedLayout, shouldUseListMode } = useFeedLayout();
@@ -395,74 +405,67 @@ function FeedItemComponent({
       return null;
     }
 
+    const postCardProps = {
+      enableSourceHeader:
+        feedName !== 'squad' && isSourceSquadOrMachine(itemPost.source),
+      ref: inViewRef,
+      post: { ...itemPost },
+      'data-testid': 'postItem',
+      onUpvoteClick: (post: Post, origin = Origin.Feed) => {
+        toggleUpvote({
+          payload: post,
+          origin,
+          opts: { columns, column, row },
+        });
+      },
+      onDownvoteClick: (post: Post, origin = Origin.Feed) => {
+        toggleDownvote({
+          payload: post,
+          origin,
+          opts: { columns, column, row },
+        });
+      },
+      onPostClick: (post: Post, event?: React.MouseEvent) =>
+        onPostClick(post, index, row, column, false, event),
+      onPostAuxClick: (post: Post) =>
+        onPostClick(post, index, row, column, true),
+      onReadArticleClick: () =>
+        onReadArticleClick(itemPost, index, row, column),
+      onShare: (post: Post) => onShare(post, row, column),
+      onBookmarkClick: (post: Post, origin = Origin.Feed) => {
+        toggleBookmark({
+          post,
+          origin,
+          opts: { columns, column, row },
+        });
+      },
+      openNewTab,
+      enableMenu: !!user,
+      onMenuClick: (event: React.MouseEvent) =>
+        onMenuClick(event, index, row, column),
+      onCopyLinkClick: (event: React.MouseEvent, post: Post) =>
+        onCopyLinkClick(event, post, index, row, column),
+      menuOpened: postMenuIndex === index,
+      onCommentClick: (post: Post) =>
+        onCommentClick(post, index, row, column, !!boostedBy),
+      eagerLoadImage: row === 0 && column === 0,
+    };
+
+    const isWidenedFeaturedPost =
+      item.type === FeedItemType.Post && !!wideColSpan && wideColSpan > 1;
+
     return (
       <ActivePostContextProvider post={itemPost}>
-        <PostTag
-          enableSourceHeader={
-            feedName !== 'squad' && isSourceSquadOrMachine(itemPost.source)
-          }
-          ref={inViewRef}
-          post={{ ...itemPost }}
-          data-testid="postItem"
-          onUpvoteClick={(post: Post, origin = Origin.Feed) => {
-            toggleUpvote({
-              payload: post,
-              origin,
-              opts: {
-                columns,
-                column,
-                row,
-              },
-            });
-          }}
-          onDownvoteClick={(post: Post, origin = Origin.Feed) => {
-            toggleDownvote({
-              payload: post,
-              origin,
-              opts: {
-                columns,
-                column,
-                row,
-              },
-            });
-          }}
-          onPostClick={(post: Post, event) =>
-            onPostClick(post, index, row, column, false, event)
-          }
-          onPostAuxClick={(post: Post) =>
-            onPostClick(post, index, row, column, true)
-          }
-          onReadArticleClick={() =>
-            onReadArticleClick(itemPost, index, row, column)
-          }
-          onShare={(post: Post) => onShare(post, row, column)}
-          onBookmarkClick={(post: Post, origin = Origin.Feed) => {
-            toggleBookmark({
-              post,
-              origin,
-              opts: {
-                columns,
-                column,
-                row,
-              },
-            });
-          }}
-          openNewTab={openNewTab}
-          enableMenu={!!user}
-          onMenuClick={(event: React.MouseEvent) =>
-            onMenuClick(event, index, row, column)
-          }
-          onCopyLinkClick={(event: React.MouseEvent, post: Post) =>
-            onCopyLinkClick(event, post, index, row, column)
-          }
-          menuOpened={postMenuIndex === index}
-          onCommentClick={(post: Post) =>
-            onCommentClick(post, index, row, column, !!boostedBy)
-          }
-          eagerLoadImage={row === 0 && column === 0}
-        >
-          {item.type === FeedItemType.Ad && <AdPixel pixel={item.ad.pixel} />}
-        </PostTag>
+        {isWidenedFeaturedPost ? (
+          <ArticleFeaturedWideGridCard
+            {...postCardProps}
+            wideColSpan={wideColSpan}
+          />
+        ) : (
+          <PostTag {...postCardProps}>
+            {item.type === FeedItemType.Ad && <AdPixel pixel={item.ad.pixel} />}
+          </PostTag>
+        )}
       </ActivePostContextProvider>
     );
   }