feat: brief

packages/shared/src/components/Feed.tsx

@@ -28,7 +28,7 @@ import LogContext from '../contexts/LogContext';
 import { adLogEvent, feedLogExtra, postLogEvent } from '../lib/feed';
 import { usePostModalNavigation } from '../hooks/usePostModalNavigation';
 import { useSharePost } from '../hooks/useSharePost';
-import { Origin } from '../lib/log';
+import { Origin, TargetId } from '../lib/log';
 import { SharedFeedPage } from './utilities';
 import type { FeedContainerProps } from './feeds/FeedContainer';
 import { FeedContainer } from './feeds/FeedContainer';
@@ -96,18 +96,31 @@ const CollectionPostModal = dynamic(
     ),
 );
 
+const BriefPostModal = dynamic(
+  () =>
+    import(/* webpackChunkName: "briefPostModal" */ './modals/BriefPostModal'),
+);
+
+const BriefCardFeed = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "briefCardFeed" */ './cards/brief/BriefCard/BriefCardFeed'
+    ),
+);
+
 const calculateRow = (index: number, numCards: number): number =>
   Math.floor(index / numCards);
 const calculateColumn = (index: number, numCards: number): number =>
   index % numCards;
 
-const PostModalMap: Record<PostType, typeof ArticlePostModal> = {
+export const PostModalMap: Record<PostType, typeof ArticlePostModal> = {
   [PostType.Article]: ArticlePostModal,
   [PostType.Share]: SharePostModal,
   [PostType.Welcome]: SharePostModal,
   [PostType.Freeform]: SharePostModal,
   [PostType.VideoYouTube]: ArticlePostModal,
   [PostType.Collection]: CollectionPostModal,
+  [PostType.Brief]: BriefPostModal,
 };
 
 export default function Feed<T>({
@@ -431,6 +444,9 @@ export default function Feed<T>({
           <>{emptyScreen}</>
         ) : (
           <>
+            {feedName === SharedFeedPage.MyFeed && (
+              <BriefCardFeed targetId={TargetId.Feed} />
+            )}
             {items.map((item, index) => (
               <FeedItemComponent
                 item={item}

packages/shared/src/components/FeedItemComponent.tsx

@@ -32,6 +32,7 @@ import { CollectionGrid } from './cards/collection';
 import type { UseBookmarkPost } from '../hooks/useBookmarkPost';
 import { AdActions } from '../lib/ads';
 import PlusGrid from './cards/plus/PlusGrid';
+import { BriefCard } from './cards/brief/BriefCard/BriefCard';
 
 const CommentPopup = dynamic(
   () =>
@@ -110,6 +111,7 @@ const PostTypeToTagCard: Record<PostType, FunctionComponent> = {
   [PostType.Freeform]: FreeformGrid,
   [PostType.VideoYouTube]: ArticleGrid,
   [PostType.Collection]: CollectionGrid,
+  [PostType.Brief]: BriefCard,
 };
 
 const PostTypeToTagList: Record<PostType, FunctionComponent> = {
@@ -119,6 +121,7 @@ const PostTypeToTagList: Record<PostType, FunctionComponent> = {
   [PostType.Freeform]: FreeformList,
   [PostType.VideoYouTube]: ArticleList,
   [PostType.Collection]: CollectionList,
+  [PostType.Brief]: BriefCard,
 };
 
 type GetTagsProps = {

packages/shared/src/components/LottieAnimation.tsx

@@ -2,9 +2,10 @@ import React, { lazy, Suspense } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import type { LottieComponentProps } from 'lottie-react';
 import type { ReactElement } from 'react';
-import { RequestKey } from '../lib/query';
-import { disabledRefetch } from '../lib/func';
-import { fromCDN } from '../lib';
+import {
+  lottieAnimationQueryOptions,
+  lottieAssetsBasePath,
+} from '../lib/lottie';
 
 export type LottieAnimationProps = {
   className?: string;
@@ -19,35 +20,14 @@ const Lottie = lazy(
 export const LottieAnimation = ({
   className,
   src,
-  basePath = '/assets/lottie',
+  basePath = lottieAssetsBasePath,
   loop = true,
   autoplay = true,
   ...lottieProps
 }: LottieAnimationProps): ReactElement => {
-  const { data: animationData } = useQuery({
-    queryKey: [RequestKey.LottieAnimations, basePath, src],
-    queryFn: async () => {
-      const animationPath = `${basePath}${src}`;
-
-      const headers = new Headers();
-      headers.set('Accept', 'application/json');
-
-      const response = await fetch(fromCDN(animationPath), {
-        headers,
-      });
-
-      if (!response.ok) {
-        throw new Error(`Failed to load animation from ${animationPath}`);
-      }
-
-      const result = await response.json();
-
-      return result;
-    },
-    ...disabledRefetch,
-    staleTime: Infinity,
-    gcTime: Infinity,
-  });
+  const { data: animationData } = useQuery(
+    lottieAnimationQueryOptions({ src, basePath }),
+  );
 
   return (
     <Suspense fallback={<div className={className} />}>

packages/shared/src/components/Pill.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -12,13 +12,13 @@ const pillSizeToClassName: Record<PillSize, string> = {
   [PillSize.Medium]: 'font-bold typo-caption1 rounded-10 p-2',
 };
 
-interface Props {
-  label: string;
+export type PillProps = {
+  label: ReactNode;
   tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'>;
   size?: PillSize;
   className?: string;
   alignment?: string;
-}
+};
 
 export const Pill = ({
   label,
@@ -27,7 +27,7 @@ export const Pill = ({
   alignment = 'self-start',
   className,
   ...props
-}: Props): ReactElement => {
+}: PillProps): ReactElement => {
   return (
     <Tag
       {...props}

packages/shared/src/components/brief/BriefListHeading.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+
+export type BriefListHeadingProps = {
+  className?: string;
+  title: ReactNode;
+};
+
+export const BriefListHeading = ({
+  className,
+  title,
+}: BriefListHeadingProps): ReactElement => {
+  return (
+    <article
+      className={classNames(
+        'flex w-full items-center gap-4 px-4 pb-2 pt-6',
+        className,
+      )}
+    >
+      <Typography
+        type={TypographyType.Title3}
+        bold
+        color={TypographyColor.Quaternary}
+      >
+        {title}
+      </Typography>
+    </article>
+  );
+};

packages/shared/src/components/brief/BriefListItem.tsx

@@ -0,0 +1,157 @@
+import React, { Fragment } from 'react';
+import type { MouseEvent, ReactElement, ReactNode } from 'react';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../typography/Typography';
+import type { PillProps } from '../Pill';
+import { Pill } from '../Pill';
+import { IconSize } from '../Icon';
+import { BriefGradientIcon, LockIcon } from '../icons';
+import type { Origin, TargetId } from '../../lib/log';
+import { LogEvent } from '../../lib/log';
+import useOnPostClick from '../../hooks/useOnPostClick';
+import type { Post } from '../../graphql/posts';
+import { isNullOrUndefined } from '../../lib/func';
+import CardOverlay from '../cards/common/CardOverlay';
+import { CardLink } from '../cards/common/Card';
+import { webappUrl } from '../../lib/constants';
+import { anchorDefaultRel } from '../../lib/strings';
+import { combinedClicks } from '../../lib/click';
+import Link from '../utilities/Link';
+import { useLogContext } from '../../contexts/LogContext';
+import { usePlusSubscription } from '../../hooks/usePlusSubscription';
+
+export type BriefListItemProps = {
+  className?: string;
+  title: ReactNode;
+  pill?: Omit<PillProps, 'className'>;
+  readTime?: number;
+  postsCount?: number;
+  sourcesCount?: number;
+  isRead?: boolean;
+  isLocked?: boolean;
+  onClick?: (post: Post, event: MouseEvent<HTMLAnchorElement>) => void;
+  origin: Origin;
+  post: Post;
+  targetId: TargetId;
+};
+
+export const BriefListItem = ({
+  className,
+  title,
+  pill,
+  readTime,
+  postsCount,
+  sourcesCount,
+  isRead,
+  isLocked,
+  onClick,
+  origin,
+  post,
+  targetId,
+}: BriefListItemProps): ReactElement => {
+  const { isPlus } = usePlusSubscription();
+  const { logEvent } = useLogContext();
+  const onPostClick = useOnPostClick({ origin });
+
+  const onCombinedClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    if (typeof onClick === 'function') {
+      onClick(post, event);
+    }
+
+    onPostClick({ post });
+
+    logEvent({
+      event_name: LogEvent.ClickBrief,
+      target_id: targetId,
+      extra: JSON.stringify({
+        is_demo: !isPlus,
+        brief_date: post.createdAt,
+      }),
+    });
+  };
+
+  return (
+    <article
+      className={classNames(
+        'relative flex w-full items-center gap-4 rounded-16 border border-border-subtlest-tertiary p-3',
+        className,
+      )}
+    >
+      <CardOverlay
+        post={post}
+        onPostCardClick={onCombinedClick}
+        onPostCardAuxClick={onCombinedClick}
+      />
+      <Link href={`${webappUrl}posts/${post.slug ?? post.id}`} passHref>
+        <CardLink
+          title={post.title}
+          rel={anchorDefaultRel}
+          {...combinedClicks(onCombinedClick)}
+        />
+      </Link>
+      <div className="hidden items-center mobileXL:flex">
+        <BriefGradientIcon secondary={!isRead} size={IconSize.Size48} />
+      </div>
+      <div className="flex w-full flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Typography
+            type={TypographyType.Title3}
+            bold
+            color={
+              isRead ? TypographyColor.Quaternary : TypographyColor.Primary
+            }
+          >
+            {title}
+          </Typography>
+          {!!pill && (
+            <Pill
+              {...pill}
+              className="invert !self-auto bg-accent-bacon-default py-0.5 text-text-primary"
+            />
+          )}
+          {isLocked && (
+            <LockIcon className="text-text-quaternary" size={IconSize.Small} />
+          )}
+        </div>
+        <div className="flex">
+          <Typography
+            className="gap-1"
+            type={TypographyType.Subhead}
+            color={TypographyColor.Tertiary}
+            truncate
+          >
+            {[
+              !isNullOrUndefined(readTime) && (
+                <Typography
+                  tag={TypographyTag.Span}
+                  key="read-time"
+                  color={TypographyColor.Primary}
+                >
+                  {readTime}m read time
+                </Typography>
+              ),
+              `Based on ${postsCount ?? 0} posts from ${
+                sourcesCount ?? 0
+              } sources`,
+            ]
+              .filter(Boolean)
+              .map((item, index) => {
+                return (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <Fragment key={index}>
+                    {index > 0 ? ' • ' : undefined}
+                    {item}
+                  </Fragment>
+                );
+              })}
+          </Typography>
+        </div>
+      </div>
+    </article>
+  );
+};

packages/shared/src/components/brief/BriefListSection.tsx

@@ -0,0 +1,6 @@
+import classed from '../../lib/classed';
+
+export const BriefListSection = classed(
+  'section',
+  'flex w-full flex-col gap-4',
+);