feat: collection card enhancements (#5894)

nimrodkra · web-flow · commit c71ed7c64b6b · 2026-04-21T05:44:20.000Z
diff --git a/packages/shared/src/components/cards/collection/CollectionGrid.tsx b/packages/shared/src/components/cards/collection/CollectionGrid.tsx
@@ -16,6 +16,8 @@ import PostMetadata from '../common/PostMetadata';
 import { usePostImage } from '../../../hooks/post/usePostImage';
 import CardOverlay from '../common/CardOverlay';
 import PostTags from '../common/PostTags';
+import { isPostUpdated } from '../../../graphql/posts';
+import { TimeFormatType } from '../../../lib/dateFormat';
 
 export const CollectionGrid = forwardRef(function CollectionCard(
   {
@@ -35,14 +37,19 @@ export const CollectionGrid = forwardRef(function CollectionCard(
 ) {
   const { pinnedAt, trending } = post;
   const image = usePostImage(post);
-  const onPostCardClick = () => onPostClick(post);
-  const onPostCardAuxClick = () => onPostAuxClick(post);
+  const wasUpdated = isPostUpdated(post);
+  const onPostCardClick = () => onPostClick?.(post);
+  const onPostCardAuxClick = () => onPostAuxClick?.(post);
 
   return (
     <FeedItemContainer
       domProps={{
         ...domProps,
-        className: getPostClassNames(post, domProps.className, 'min-h-card'),
+        className: getPostClassNames(
+          post,
+          domProps.className ?? '',
+          'min-h-card',
+        ),
       }}
       ref={ref}
       flagProps={{ pinnedAt, trending }}
@@ -70,8 +77,11 @@ export const CollectionGrid = forwardRef(function CollectionCard(
         <PostTags post={post} className="!items-end" />
       </CardTextContainer>
       <PostMetadata
-        createdAt={post.createdAt}
+        createdAt={wasUpdated ? post.updatedAt : post.createdAt}
+        dateLabel={wasUpdated ? 'Updated' : undefined}
+        dateType={wasUpdated ? TimeFormatType.PostUpdated : TimeFormatType.Post}
         readTime={post.readTime}
+        numSources={post.numCollectionSources}
         className={classNames('mx-4', post.image ? 'my-0' : 'mb-4 mt-2')}
       />
       <Container>
diff --git a/packages/shared/src/components/cards/collection/CollectionList.tsx b/packages/shared/src/components/cards/collection/CollectionList.tsx
@@ -18,6 +18,8 @@ import { useTruncatedSummary, useViewSize, ViewSize } from '../../../hooks';
 import PostTags from '../common/PostTags';
 import { CardCoverList } from '../common/list/CardCover';
 import { HIGH_PRIORITY_IMAGE_PROPS } from '../../image/Image';
+import { isPostUpdated } from '../../../graphql/posts';
+import { TimeFormatType } from '../../../lib/dateFormat';
 
 export const CollectionList = forwardRef(function CollectionCard(
   {
@@ -37,7 +39,8 @@ export const CollectionList = forwardRef(function CollectionCard(
 ) {
   const isMobile = useViewSize(ViewSize.MobileL);
   const image = usePostImage(post);
-  const { title } = useTruncatedSummary(post?.title);
+  const { title } = useTruncatedSummary(post?.title ?? '');
+  const wasUpdated = isPostUpdated(post);
   const actionButtons = (
     <Container className="pointer-events-none mt-2">
       <ActionButtons
@@ -60,23 +63,37 @@ export const CollectionList = forwardRef(function CollectionCard(
         className: domProps.className,
       }}
       ref={ref}
-      flagProps={{ pinnedAt: post.pinnedAt, type: post.type }}
+      flagProps={{
+        pinnedAt: post.pinnedAt,
+        type: post.type,
+        trending: post.trending,
+      }}
       linkProps={{
         title: post.title,
-        onClick: () => onPostClick(post),
+        onClick: () => onPostClick?.(post),
         href: post.commentsPermalink,
       }}
       bookmarked={post.bookmarked}
     >
       <CardContainer>
-        <PostCardHeader post={post}>
+        <PostCardHeader
+          post={post}
+          metadata={{
+            createdAt: wasUpdated ? post.updatedAt : post.createdAt,
+            dateLabel: wasUpdated ? 'Updated' : undefined,
+            dateType: wasUpdated
+              ? TimeFormatType.PostUpdated
+              : TimeFormatType.Post,
+            numSources: post.numCollectionSources,
+          }}
+        >
           <CollectionPillSources
             className={{
               main: classNames(!!post.collectionSources?.length && '-my-0.5'),
               avatar: 'group-hover:border-background-subtle',
             }}
-            sources={post.collectionSources}
-            totalSources={post.numCollectionSources}
+            sources={post.collectionSources ?? []}
+            totalSources={post.numCollectionSources ?? 0}
             alwaysShowSources
           />
         </PostCardHeader>
diff --git a/packages/shared/src/components/cards/common/PostMetadata.tsx b/packages/shared/src/components/cards/common/PostMetadata.tsx
@@ -6,6 +6,7 @@ import { Separator } from './common';
 import type { Post } from '../../../graphql/posts';
 import { formatReadTime, DateFormat } from '../../utilities';
 import { largeNumberFormat } from '../../../lib';
+import { pluralize } from '../../../lib/strings';
 import { useFeedCardContext } from '../../../features/posts/FeedCardContext';
 import { Tooltip } from '../../tooltip/Tooltip';
 import type { PollMetadataProps } from './PollMetadata';
@@ -20,6 +21,9 @@ interface PostMetadataProps
   isVideoType?: boolean;
   domain?: ReactNode;
   pollMetadata?: PollMetadataProps;
+  numSources?: number;
+  dateLabel?: string;
+  dateType?: TimeFormatType;
 }
 
 export default function PostMetadata({
@@ -32,6 +36,9 @@ export default function PostMetadata({
   isVideoType,
   domain,
   pollMetadata,
+  numSources,
+  dateLabel,
+  dateType = TimeFormatType.Post,
 }: PostMetadataProps): ReactElement {
   const hasUpvoteCount = typeof numUpvotes === 'number';
   const upvoteCount = numUpvotes ?? 0;
@@ -62,7 +69,13 @@ export default function PostMetadata({
     !!createdAt &&
       !boostedBy && {
         key: 'date',
-        node: <DateFormat date={createdAt} type={TimeFormatType.Post} />,
+        node: (
+          <DateFormat
+            date={createdAt}
+            type={dateType}
+            prefix={dateLabel ? `${dateLabel} ` : undefined}
+          />
+        ),
       },
     showReadTime && {
       key: 'readTime',
@@ -72,6 +85,15 @@ export default function PostMetadata({
         </span>
       ),
     },
+    !!numSources &&
+      numSources > 0 && {
+        key: 'sources',
+        node: (
+          <span data-testid="numSources">
+            {numSources} {pluralize('source', numSources)}
+          </span>
+        ),
+      },
     !!showReadTime && domain && { key: 'domain', node: domain },
     hasUpvoteCount &&
       upvoteCount > 0 && {
@@ -87,7 +109,7 @@ export default function PostMetadata({
   return (
     <div
       className={classNames(
-        'flex items-center text-text-tertiary typo-footnote',
+        'flex min-w-0 items-center overflow-hidden text-text-tertiary typo-footnote',
         className,
       )}
     >
diff --git a/packages/shared/src/components/cards/common/RaisedLabel.tsx b/packages/shared/src/components/cards/common/RaisedLabel.tsx
@@ -56,7 +56,7 @@ export function RaisedLabel({
         )}
       >
         <ConditionalWrapper
-          condition={description?.length > 0}
+          condition={!!description?.length}
           wrapper={(children) => (
             <Tooltip content={description}>{children}</Tooltip>
           )}
@@ -84,7 +84,7 @@ export function RaisedLabel({
       )}
     >
       <ConditionalWrapper
-        condition={description?.length > 0}
+        condition={!!description?.length}
         wrapper={(children) => (
           <Tooltip content={description}>{children}</Tooltip>
         )}
diff --git a/packages/shared/src/components/cards/common/list/FeedItemContainer.tsx b/packages/shared/src/components/cards/common/list/FeedItemContainer.tsx
@@ -47,12 +47,13 @@ function FeedItemContainer(
     ? RaisedLabelType.Pinned
     : RaisedLabelType.Hot;
   const description =
-    [RaisedLabelType.Hot].includes(raisedLabelType) && trending > 0
+    raisedLabelType === RaisedLabelType.Hot && trending && trending > 0
       ? `${trending} devs read it last hour`
       : undefined;
   const isFeedPreview = useFeedPreviewMode();
   const showFlag = (!!pinnedAt || !!trending) && !isFeedPreview;
-  const showTypeLabel = !!adAttribution || !!type;
+  const typeLabelValue = adAttribution ?? type;
+  const showTypeLabel = !!typeLabelValue;
   const [focus, setFocus] = useState(false);
 
   return (
@@ -70,7 +71,7 @@ function FeedItemContainer(
         ...(highlightBookmarkedPost && { background: bookmarkProviderListBg }),
       }}
     >
-      {linkProps && (
+      {linkProps?.href && (
         <Link href={linkProps.href}>
           <CardLink
             {...linkProps}
@@ -81,10 +82,10 @@ function FeedItemContainer(
       )}
       {(showTypeLabel || showFlag) && (
         <fieldset>
-          {showTypeLabel && (
+          {typeLabelValue && (
             <TypeLabel
               focus={focus}
-              type={adAttribution ?? type}
+              type={typeLabelValue}
               className="absolute left-3"
             />
           )}
diff --git a/packages/shared/src/components/cards/common/list/PostCardHeader.tsx b/packages/shared/src/components/cards/common/list/PostCardHeader.tsx
@@ -42,6 +42,10 @@ interface CardHeaderProps {
     topLabel?: PostMetadataProps['topLabel'];
     bottomLabel?: PostMetadataProps['bottomLabel'];
     dateFirst?: PostMetadataProps['dateFirst'];
+    createdAt?: PostMetadataProps['createdAt'];
+    dateLabel?: PostMetadataProps['dateLabel'];
+    numSources?: PostMetadataProps['numSources'];
+    dateType?: PostMetadataProps['dateType'];
   };
 }
 
@@ -113,11 +117,11 @@ export const PostCardHeader = ({
             <>
               {showCTA && (
                 <ReadArticleButton
-                  content={readButtonContent ?? postButtonText}
+                  content={readButtonContent ?? postButtonText ?? ''}
                   className="mr-2"
                   variant={ButtonVariant.Tertiary}
                   icon={readButtonIcon ?? <OpenLinkIcon />}
-                  href={postLink}
+                  href={postLink ?? ''}
                   onClick={onReadArticleClick}
                   openNewTab={openNewTab}
                 />
diff --git a/packages/shared/src/components/cards/common/list/PostMetadata.tsx b/packages/shared/src/components/cards/common/list/PostMetadata.tsx
@@ -12,13 +12,17 @@ import {
   TypographyColor,
 } from '../../../typography/Typography';
 import { useScrambler } from '../../../../hooks/useScrambler';
+import { pluralize } from '../../../../lib/strings';
 
 export interface PostMetadataProps {
   className?: string;
   topLabel?: ReactElement | string;
   bottomLabel?: ReactElement | string;
   createdAt?: string;
   dateFirst?: boolean;
+  dateLabel?: string;
+  numSources?: number;
+  dateType?: TimeFormatType;
 }
 
 export default function PostMetadata({
@@ -27,11 +31,27 @@ export default function PostMetadata({
   topLabel,
   bottomLabel,
   dateFirst,
+  dateLabel,
+  numSources,
+  dateType = TimeFormatType.Post,
 }: PostMetadataProps): ReactElement {
   const { boostedBy } = useFeedCardContext();
   const promotedText = useScrambler(
     boostedBy ? `Promoted by @${boostedBy.username}` : undefined,
   );
+  const hasSources = !!numSources && numSources > 0;
+  const dateNode = !!createdAt && (
+    <DateFormat
+      date={createdAt}
+      type={dateType}
+      prefix={dateLabel ? `${dateLabel} ` : undefined}
+    />
+  );
+  const sourcesNode = hasSources && (
+    <span data-testid="numSources">
+      {numSources} {pluralize('source', numSources)}
+    </span>
+  );
 
   return (
     <div className={classNames('grid items-center', className)}>
@@ -51,21 +71,21 @@ export default function PostMetadata({
         {!!boostedBy && !!bottomLabel && <Separator />}
         {dateFirst ? (
           <>
-            {!!createdAt && (
-              <DateFormat date={createdAt} type={TimeFormatType.Post} />
-            )}
+            {dateNode}
             {!!createdAt && !!bottomLabel && <Separator />}
             {bottomLabel}
           </>
         ) : (
           <>
             {bottomLabel}
             {(!!bottomLabel || !!boostedBy) && !!createdAt && <Separator />}
-            {!!createdAt && (
-              <DateFormat date={createdAt} type={TimeFormatType.Post} />
-            )}
+            {dateNode}
           </>
         )}
+        {(!!createdAt || !!bottomLabel || !!boostedBy) && sourcesNode && (
+          <Separator />
+        )}
+        {sourcesNode}
       </div>
     </div>
   );
diff --git a/packages/shared/src/components/post/collection/CollectionPostContent.tsx b/packages/shared/src/components/post/collection/CollectionPostContent.tsx
@@ -23,7 +23,8 @@ import { DateFormat } from '../../utilities';
 import { withPostById } from '../withPostById';
 import { PostTagList } from '../tags/PostTagList';
 import { CollectionPostHeaderActions } from './CollectionPostHeaderActions';
-import type { Post } from '../../../graphql/posts';
+import { isPostUpdated, type Post } from '../../../graphql/posts';
+import { pluralize } from '../../../lib/strings';
 
 type CollectionPostContentRawProps = Omit<PostContentProps, 'post'> & {
   post: Post;
@@ -53,7 +54,11 @@ const CollectionPostContentRaw = ({
     origin,
     post,
   });
-  const { updatedAt, contentHtml, image } = post;
+  const { createdAt, updatedAt, contentHtml, image, numCollectionSources } =
+    post;
+  const wasUpdated = isPostUpdated(post);
+  const dateToShow = wasUpdated ? updatedAt : createdAt;
+  const hasSources = !!numCollectionSources && numCollectionSources > 0;
   const { onCopyPostLink, onReadArticle } = engagementActions;
 
   const hasNavigation = !!onPreviousPost || !!onNextPost;
@@ -130,7 +135,7 @@ const CollectionPostContentRaw = ({
         >
           <div className="mb-6 flex flex-col gap-6">
             <CollectionsIntro className="mt-6 laptop:hidden" />
-            <div className="flex flex-row items-center pt-6">
+            <div className="flex flex-row items-center gap-2 pt-6">
               <Link href={`${webappUrl}sources/collections`} passHref>
                 <Pill
                   tag="a"
@@ -153,10 +158,26 @@ const CollectionPostContentRaw = ({
               {post.title}
             </h1>
             <PostTagList post={post} />
-            {!!updatedAt && (
-              <div className="flex items-center text-text-tertiary typo-footnote">
-                <span>Last updated</span> <Separator />
-                <DateFormat date={updatedAt} type={TimeFormatType.Post} />
+            {!!dateToShow && (
+              <div className="flex min-w-0 items-center overflow-hidden text-text-tertiary typo-footnote">
+                <DateFormat
+                  date={dateToShow}
+                  type={
+                    wasUpdated
+                      ? TimeFormatType.PostUpdated
+                      : TimeFormatType.Post
+                  }
+                  prefix={wasUpdated ? 'Last updated ' : undefined}
+                />
+                {hasSources && (
+                  <>
+                    <Separator />
+                    <span>
+                      {numCollectionSources}{' '}
+                      {pluralize('source', numCollectionSources)}
+                    </span>
+                  </>
+                )}
               </div>
             )}
             {image && (
diff --git a/packages/shared/src/graphql/posts.ts b/packages/shared/src/graphql/posts.ts
diff --git a/packages/shared/src/lib/dateFormat.ts b/packages/shared/src/lib/dateFormat.ts
