feat(shared): inline post-hide feedback panel

packages/shared/src/components/Feed.spec.tsx

@@ -20,6 +20,7 @@ import {
   POST_BY_ID_QUERY,
   REPORT_POST_MUTATION,
   PostType,
+  UNHIDE_POST_MUTATION,
   UserVote,
   REMOVE_BOOKMARK_MUTATION,
 } from '../graphql/posts';
@@ -809,8 +810,8 @@ describe('Feed logged in', () => {
     );
   });
 
-  it('should hide post', async () => {
-    let mutationCalled = false;
+  it('should hide post and replace card with the hidden feedback panel', async () => {
+    let hideCalled = false;
     renderComponent([
       createFeedMock({
         pageInfo: defaultFeedPage.pageInfo,
@@ -822,7 +823,7 @@ describe('Feed logged in', () => {
           variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf' },
         },
         result: () => {
-          mutationCalled = true;
+          hideCalled = true;
           return { data: { _: true } };
         },
       },
@@ -833,12 +834,90 @@ describe('Feed logged in', () => {
     });
     const contextBtn = await screen.findByText('Hide');
     contextBtn.click();
-    await waitFor(() => expect(mutationCalled).toBeTruthy());
+    await waitFor(() => expect(hideCalled).toBeTruthy());
+    expect(
+      await screen.findByText("Got it. You'll see less like this."),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should restore the post when clicking Undo on the hidden feedback panel', async () => {
+    let unhideCalled = false;
+    renderComponent([
+      createFeedMock({
+        pageInfo: defaultFeedPage.pageInfo,
+        edges: [defaultFeedPage.edges[0]],
+      }),
+      {
+        request: {
+          query: HIDE_POST_MUTATION,
+          variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf' },
+        },
+        result: () => ({ data: { _: true } }),
+      },
+      {
+        request: {
+          query: UNHIDE_POST_MUTATION,
+          variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf' },
+        },
+        result: () => {
+          unhideCalled = true;
+          return { data: { _: true } };
+        },
+      },
+    ]);
+
+    const [menuBtn] = await screen.findAllByLabelText('Options');
+    fireEvent.keyDown(menuBtn, { key: ' ' });
+    (await screen.findByText('Hide')).click();
+    const undoBtn = await screen.findByRole('button', { name: 'Undo' });
+    fireEvent.click(undoBtn);
+
+    await waitFor(() => expect(unhideCalled).toBeTruthy());
     await waitFor(() =>
       expect(
-        screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
+        screen.queryByText("Got it. You'll see less like this."),
       ).not.toBeInTheDocument(),
     );
+    expect(
+      await screen.findByTitle(
+        'Eminem Quotes Generator - Simple PHP RESTful API',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should remove the post from the feed when dismissing the hidden feedback panel', async () => {
+    renderComponent([
+      createFeedMock({
+        pageInfo: defaultFeedPage.pageInfo,
+        edges: [defaultFeedPage.edges[0]],
+      }),
+      {
+        request: {
+          query: HIDE_POST_MUTATION,
+          variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf' },
+        },
+        result: () => ({ data: { _: true } }),
+      },
+    ]);
+
+    const [menuBtn] = await screen.findAllByLabelText('Options');
+    fireEvent.keyDown(menuBtn, { key: ' ' });
+    (await screen.findByText('Hide')).click();
+
+    const closeBtn = await screen.findByTestId('postHiddenPanelClose');
+    fireEvent.click(closeBtn);
+
+    await waitFor(() =>
+      expect(
+        screen.queryByText("Got it. You'll see less like this."),
+      ).not.toBeInTheDocument(),
+    );
+    expect(
+      screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
+    ).not.toBeInTheDocument();
   });
 
   it('should block a source', async () => {

packages/shared/src/components/cards/Freeform/FreeformGrid.tsx

@@ -18,6 +18,7 @@ import { WelcomePostCardFooter } from '../common/WelcomePostCardFooter';
 import ActionButtons from '../common/ActionButtons';
 import { ClickbaitShield } from '../common/ClickbaitShield';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
+import { useHiddenFeedbackPanel } from '../../../hooks/post/useHiddenFeedbackPanel';
 
 export const FreeformGrid = forwardRef(function SharePostCard(
   {
@@ -41,6 +42,11 @@ export const FreeformGrid = forwardRef(function SharePostCard(
   const containerRef = useRef<HTMLDivElement>();
   const image = usePostImage(post);
   const { title } = useSmartTitle(post);
+  const hiddenPanel = useHiddenFeedbackPanel(post);
+
+  if (hiddenPanel) {
+    return hiddenPanel;
+  }
 
   return (
     <FeedItemContainer

packages/shared/src/components/cards/Freeform/FreeformList.tsx

@@ -26,6 +26,7 @@ import { usePostActions } from '../../../hooks/post/usePostActions';
 import { PostType } from '../../../graphql/posts';
 import { sanitizeMessage } from '../../../features/onboarding/shared';
 import { isSourceUserSource } from '../../../graphql/sources';
+import { useHiddenFeedbackPanel } from '../../../hooks/post/useHiddenFeedbackPanel';
 
 export const FreeformList = forwardRef(function SharePostCard(
   {
@@ -60,6 +61,7 @@ export const FreeformList = forwardRef(function SharePostCard(
   const socialShare = interaction === 'copy' && post.type === PostType.Freeform;
   const { title: truncatedTitle } = useTruncatedSummary(title, content);
   const isUserSource = isSourceUserSource(post.source);
+  const hiddenPanel = useHiddenFeedbackPanel(post);
 
   const actionButtons = (
     <Container ref={containerRef} className="pointer-events-none">
@@ -105,6 +107,10 @@ export const FreeformList = forwardRef(function SharePostCard(
     post?.source?.name,
   ]);
 
+  if (hiddenPanel) {
+    return hiddenPanel;
+  }
+
   return (
     <FeedItemContainer
       domProps={{

packages/shared/src/components/cards/article/ArticleGrid.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import type { PostCardProps } from '../common/common';
 import { Container } from '../common/common';
 import { useBlockPostPanel } from '../../../hooks/post/useBlockPostPanel';
+import { useHiddenFeedbackPanel } from '../../../hooks/post/useHiddenFeedbackPanel';
 import { usePostFeedback } from '../../../hooks';
 import { isVideoPost } from '../../../graphql/posts';
 import { PostTagsPanel } from '../../post/block/PostTagsPanel';
@@ -46,6 +47,7 @@ export const ArticleGrid = forwardRef(function ArticleGrid(
   ref: Ref<HTMLElement>,
 ): ReactElement {
   const { className, style } = domProps;
+  const hiddenPanel = useHiddenFeedbackPanel(post);
   const { data } = useBlockPostPanel(post);
   const onPostCardClick = () => onPostClick(post);
   const onPostCardAuxClick = () => onPostAuxClick(post);
@@ -54,6 +56,10 @@ export const ArticleGrid = forwardRef(function ArticleGrid(
   const { title } = useSmartTitle(post);
   const isVideoType = isVideoPost(post);
 
+  if (hiddenPanel) {
+    return hiddenPanel;
+  }
+
   if (data?.showTagsPanel && post.tags.length > 0) {
     return (
       <PostTagsPanel

packages/shared/src/components/cards/article/ArticleList.tsx

@@ -28,6 +28,7 @@ import { HIGH_PRIORITY_IMAGE_PROPS } from '../../image/Image';
 import { ClickbaitShield } from '../common/ClickbaitShield';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
 import { isSourceUserSource } from '../../../graphql/sources';
+import { useHiddenFeedbackPanel } from '../../../hooks/post/useHiddenFeedbackPanel';
 
 export const ArticleList = forwardRef(function ArticleList(
   {
@@ -55,6 +56,7 @@ export const ArticleList = forwardRef(function ArticleList(
     onPostClick?.(post, event);
   const isMobile = useViewSize(ViewSize.MobileL);
   const { showFeedback } = usePostFeedback({ post });
+  const hiddenPanel = useHiddenFeedbackPanel(post);
   const isFeedPreview = useFeedPreviewMode();
   const { title } = useSmartTitle(post);
   const { title: truncatedTitle } = useTruncatedSummary(title);
@@ -100,6 +102,10 @@ export const ArticleList = forwardRef(function ArticleList(
     };
   }, [isUserSource, post]);
 
+  if (hiddenPanel) {
+    return hiddenPanel;
+  }
+
   return (
     <FeedItemContainer
       domProps={{

packages/shared/src/components/cards/collection/CollectionGrid.tsx

@@ -18,6 +18,7 @@ import CardOverlay from '../common/CardOverlay';
 import PostTags from '../common/PostTags';
 import { isPostUpdated } from '../../../graphql/posts';
 import { TimeFormatType } from '../../../lib/dateFormat';
+import { useHiddenFeedbackPanel } from '../../../hooks/post/useHiddenFeedbackPanel';
 
 export const CollectionGrid = forwardRef(function CollectionCard(
   {
@@ -40,6 +41,11 @@ export const CollectionGrid = forwardRef(function CollectionCard(
   const wasUpdated = isPostUpdated(post);
   const onPostCardClick = () => onPostClick?.(post);
   const onPostCardAuxClick = () => onPostAuxClick?.(post);
+  const hiddenPanel = useHiddenFeedbackPanel(post);
+
+  if (hiddenPanel) {
+    return hiddenPanel;
+  }
 
   return (
     <FeedItemContainer

packages/shared/src/components/cards/collection/CollectionList.tsx

@@ -20,6 +20,7 @@ import { CardCoverList } from '../common/list/CardCover';
 import { HIGH_PRIORITY_IMAGE_PROPS } from '../../image/Image';
 import { isPostUpdated } from '../../../graphql/posts';
 import { TimeFormatType } from '../../../lib/dateFormat';
+import { useHiddenFeedbackPanel } from '../../../hooks/post/useHiddenFeedbackPanel';
 
 export const CollectionList = forwardRef(function CollectionCard(
   {
@@ -41,6 +42,8 @@ export const CollectionList = forwardRef(function CollectionCard(
   const image = usePostImage(post);
   const { title } = useTruncatedSummary(post?.title ?? '');
   const wasUpdated = isPostUpdated(post);
+  const hiddenPanel = useHiddenFeedbackPanel(post);
+
   const actionButtons = (
     <Container className="pointer-events-none mt-2">
       <ActionButtons
@@ -56,6 +59,10 @@ export const CollectionList = forwardRef(function CollectionCard(
     </Container>
   );
 
+  if (hiddenPanel) {
+    return hiddenPanel;
+  }
+
   return (
     <FeedItemContainer
       domProps={{

packages/shared/src/components/cards/share/ShareGrid.tsx

@@ -28,6 +28,7 @@ import { IconSize } from '../../Icon';
 import { useFeature } from '../../GrowthBookProvider';
 import { sharedPostPreviewFeature } from '../../../lib/featureManagement';
 import { SharedPostPreview } from './SharedPostPreview';
+import { useHiddenFeedbackPanel } from '../../../hooks/post/useHiddenFeedbackPanel';
 
 const EmptyStateContainer = classed(
   'div',
@@ -65,6 +66,7 @@ export const ShareGrid = forwardRef(function ShareGrid(
   const isVideoType = isVideoPost(post);
   const isSharedPostPreviewEnabled = useFeature(sharedPostPreviewFeature);
   const isSharedTweet = isSocialTwitterPost(sharedPost);
+  const hiddenPanel = useHiddenFeedbackPanel(post);
 
   const footer = useMemo(() => {
     if (isDeleted) {
@@ -140,6 +142,10 @@ export const ShareGrid = forwardRef(function ShareGrid(
     sharedPost,
   ]);
 
+  if (hiddenPanel) {
+    return hiddenPanel;
+  }
+
   return (
     <FeedItemContainer
       domProps={{

packages/shared/src/components/cards/share/ShareList.tsx

@@ -27,6 +27,7 @@ import { isSourceUserSource } from '../../../graphql/sources';
 import { useFeature } from '../../GrowthBookProvider';
 import { sharedPostPreviewFeature } from '../../../lib/featureManagement';
 import { SharedPostPreview } from './SharedPostPreview';
+import { useHiddenFeedbackPanel } from '../../../hooks/post/useHiddenFeedbackPanel';
 
 export const ShareList = forwardRef(function ShareList(
   {
@@ -60,6 +61,7 @@ export const ShareList = forwardRef(function ShareList(
   const { title } = useSmartTitle(post);
   const { title: truncatedTitle } = useTruncatedSummary(title);
   const isUserSource = isSourceUserSource(post.source);
+  const hiddenPanel = useHiddenFeedbackPanel(post);
 
   const actionButtons = (
     <Container ref={containerRef} className="pointer-events-none flex-[unset]">
@@ -112,6 +114,10 @@ export const ShareList = forwardRef(function ShareList(
     sharedPost?.source?.handle,
   ]);
 
+  if (hiddenPanel) {
+    return hiddenPanel;
+  }
+
   return (
     <FeedItemContainer
       domProps={{