feat(post): redesigned post page & modal reader (PostFocusCard)

packages/shared/src/components/MainLayout.tsx

@@ -335,7 +335,11 @@ function MainLayoutComponent({
             <div
               className={classNames(
                 'relative flex min-h-0 flex-1 flex-col',
-                'laptop:overflow-hidden laptop:rounded-24 laptop:border laptop:border-border-subtlest-quaternary laptop:bg-background-default laptop:p-0.5 laptop:shadow-2',
+                // `overflow-clip` (not `hidden`) clips content to the rounded
+                // card without establishing a scroll container, so descendant
+                // `position: sticky` elements (e.g. the post action bar) stick
+                // to the viewport instead of being inert.
+                'laptop:overflow-clip laptop:rounded-24 laptop:border laptop:border-border-subtlest-quaternary laptop:bg-background-default laptop:p-0.5 laptop:shadow-2',
                 !hasTopBanners &&
                   !topBanner &&
                   'laptop:min-h-[calc(100vh-1.5rem)]',

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 { usePostRedesign } from '../../hooks/post/usePostRedesign';
+import { PostFocusCard } from '../post/focus/PostFocusCard';
 
 interface ArticlePostModalProps extends ModalProps, PassedPostNavigationProps {
   id: string;
@@ -29,12 +31,15 @@ export default function ArticlePostModal({
     isDisplayed: props.isOpen,
     offset: 0,
   });
+  const { showRedesign } = usePostRedesign(post);
 
   return (
     <BasePostModal
       {...props}
       post={post}
       onAfterOpen={onLoad}
+      size={showRedesign ? Modal.Size.Large : Modal.Size.XLarge}
+      className={showRedesign ? 'laptop:!overflow-clip' : undefined}
       onRequestClose={onRequestClose}
       postType={PostType.Article}
       source={post.source}
@@ -43,24 +48,32 @@ 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}
-      />
+      {showRedesign ? (
+        <PostFocusCard
+          post={post}
+          origin={Origin.ArticleModal}
+          onClose={() => onRequestClose?.(undefined as never)}
+        />
+      ) : (
+        <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>
   );
 }

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 { usePostRedesign } from '../../hooks/post/usePostRedesign';
+import { PostFocusCard } from '../post/focus/PostFocusCard';
 
 interface CollectionPostModalProps
   extends ModalProps,
@@ -31,12 +33,15 @@ export default function CollectionPostModal({
     isDisplayed: props.isOpen,
     offset: 0,
   });
+  const { showRedesign } = usePostRedesign(post);
 
   return (
     <BasePostModal
       {...props}
       post={post}
       onAfterOpen={onLoad}
+      size={showRedesign ? Modal.Size.Large : Modal.Size.XLarge}
+      className={showRedesign ? 'laptop:!overflow-clip' : undefined}
       onRequestClose={onRequestClose}
       postType={PostType.Collection}
       source={post.source}
@@ -45,24 +50,32 @@ 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}
-      />
+      {showRedesign ? (
+        <PostFocusCard
+          post={post}
+          origin={Origin.CollectionModal}
+          onClose={() => onRequestClose?.(undefined as never)}
+        />
+      ) : (
+        <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>
   );
 }

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 { usePostRedesign } from '../../hooks/post/usePostRedesign';
+import { PostFocusCard } from '../post/focus/PostFocusCard';
 
 interface PostModalProps extends ModalProps, PassedPostNavigationProps {
   id: string;
@@ -31,13 +33,15 @@ export default function PostModal({
     isDisplayed: props.isOpen,
     offset: 0,
   });
+  const { showRedesign } = usePostRedesign(post);
 
   return (
     <BasePostModal
       {...props}
       post={post}
       onAfterOpen={onLoad}
-      size={Modal.Size.XLarge}
+      size={showRedesign ? Modal.Size.Large : Modal.Size.XLarge}
+      className={showRedesign ? 'laptop:!overflow-clip' : undefined}
       onRequestClose={onRequestClose}
       postType={PostType.Share}
       source={post.source}
@@ -46,6 +50,8 @@ export default function PostModal({
       onPreviousPost={onPreviousPost}
       onNextPost={onNextPost}
     >
+      {/* The squad notification prompt is shown for share posts regardless of
+          which layout renders below it. */}
       <EnableNotification
         source={NotificationPromptSource.SquadPostModal}
         label={
@@ -54,21 +60,32 @@ export default function PostModal({
             : 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',
-        }}
-      />
+      {showRedesign ? (
+        <PostFocusCard
+          post={post}
+          origin={Origin.ArticleModal}
+          onClose={() => onRequestClose?.(undefined as never)}
+        />
+      ) : (
+        <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>
   );
 }

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 redesign 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}
     >