feat: add hidden comments

apps/web/src/components/Comment/Feed.tsx

@@ -1,13 +1,15 @@
 import type { Comment, PublicationsRequest } from '@hey/lens';
 import type { FC } from 'react';
 
+import { useHiddenCommentFeedStore } from '@components/Publication';
 import QueuedPublication from '@components/Publication/QueuedPublication';
 import SinglePublication from '@components/Publication/SinglePublication';
 import PublicationsShimmer from '@components/Shared/Shimmer/PublicationsShimmer';
 import { ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline';
 import {
   CommentRankingFilterType,
   CustomFiltersType,
+  HiddenCommentsType,
   LimitType,
   usePublicationsQuery
 } from '@hey/lens';
@@ -24,6 +26,9 @@ interface FeedProps {
 
 const Feed: FC<FeedProps> = ({ isHidden, publicationId }) => {
   const txnQueue = useTransactionStore((state) => state.txnQueue);
+  const showHiddenComments = useHiddenCommentFeedStore(
+    (state) => state.showHiddenComments
+  );
   const fetchAndStoreViews = useImpressionsStore(
     (state) => state.fetchAndStoreViews
   );
@@ -33,6 +38,9 @@ const Feed: FC<FeedProps> = ({ isHidden, publicationId }) => {
     limit: LimitType.TwentyFive,
     where: {
       commentOn: {
+        hiddenComments: showHiddenComments
+          ? HiddenCommentsType.HiddenOnly
+          : HiddenCommentsType.Hide,
         id: publicationId,
         ranking: { filter: CommentRankingFilterType.Relevant }
       },

apps/web/src/components/Comment/NoneRelevantFeed.tsx

@@ -1,10 +1,12 @@
 import type { Comment, PublicationsRequest } from '@hey/lens';
 import type { FC } from 'react';
 
+import { useHiddenCommentFeedStore } from '@components/Publication';
 import SinglePublication from '@components/Publication/SinglePublication';
 import {
   CommentRankingFilterType,
   CustomFiltersType,
+  HiddenCommentsType,
   LimitType,
   usePublicationsQuery
 } from '@hey/lens';
@@ -17,13 +19,19 @@ interface NoneRelevantFeedProps {
 }
 
 const NoneRelevantFeed: FC<NoneRelevantFeedProps> = ({ publicationId }) => {
+  const showHiddenComments = useHiddenCommentFeedStore(
+    (state) => state.showHiddenComments
+  );
   const [showMore, setShowMore] = useState(false);
 
   // Variables
   const request: PublicationsRequest = {
     limit: LimitType.TwentyFive,
     where: {
       commentOn: {
+        hiddenComments: showHiddenComments
+          ? HiddenCommentsType.HiddenOnly
+          : HiddenCommentsType.Hide,
         id: publicationId,
         ranking: { filter: CommentRankingFilterType.NoneRelevant }
       },

apps/web/src/components/Publication/Actions/Menu/HideComment.tsx

@@ -0,0 +1,118 @@
+import type {
+  AnyPublication,
+  HideCommentRequest,
+  UnhideCommentRequest
+} from '@hey/lens';
+import type { ApolloCache } from '@hey/lens/apollo';
+import type { FC } from 'react';
+
+import { useHiddenCommentFeedStore } from '@components/Publication';
+import { Menu } from '@headlessui/react';
+import { CheckCircleIcon, NoSymbolIcon } from '@heroicons/react/24/outline';
+import { PUBLICATION } from '@hey/data/tracking';
+import { useHideCommentMutation, useUnhideCommentMutation } from '@hey/lens';
+import { isMirrorPublication } from '@hey/lib/publicationHelpers';
+import stopEventPropagation from '@hey/lib/stopEventPropagation';
+import cn from '@hey/ui/cn';
+import errorToast from '@lib/errorToast';
+import { Leafwatch } from '@lib/leafwatch';
+import { toast } from 'react-hot-toast';
+import useProfileStore from 'src/store/persisted/useProfileStore';
+
+interface HideCommentProps {
+  publication: AnyPublication;
+}
+
+const HideComment: FC<HideCommentProps> = ({ publication }) => {
+  const currentProfile = useProfileStore((state) => state.currentProfile);
+  const targetPublication = isMirrorPublication(publication)
+    ? publication?.mirrorOn
+    : publication;
+  const showHiddenComments = useHiddenCommentFeedStore(
+    (state) => state.showHiddenComments
+  );
+
+  const request: HideCommentRequest | UnhideCommentRequest = {
+    for: publication.id
+  };
+
+  const updateCache = (cache: ApolloCache<any>) => {
+    cache.evict({ id: cache.identify(publication) });
+  };
+
+  const onError = (error: any) => {
+    errorToast(error);
+  };
+
+  const [hideComment] = useHideCommentMutation({
+    onCompleted: () => {
+      toast.success('Comment hidden');
+      Leafwatch.track(PUBLICATION.TOGGLE_HIDE_COMMENT, {
+        hidden: true,
+        publication_id: publication.id
+      });
+    },
+    onError,
+    update: updateCache,
+    variables: { request }
+  });
+
+  const [unhideComment] = useUnhideCommentMutation({
+    onCompleted: () => {
+      toast.success('Comment unhidden');
+      Leafwatch.track(PUBLICATION.TOGGLE_HIDE_COMMENT, {
+        hidden: false,
+        publication_id: publication.id
+      });
+    },
+    onError,
+    update: updateCache,
+    variables: { request }
+  });
+
+  const canHideComment = currentProfile?.id !== targetPublication?.by?.id;
+
+  if (!canHideComment) {
+    return null;
+  }
+
+  const toggleHideComment = async () => {
+    if (showHiddenComments) {
+      return await unhideComment();
+    }
+
+    return await hideComment();
+  };
+
+  return (
+    <Menu.Item
+      as="div"
+      className={({ active }) =>
+        cn(
+          { 'dropdown-active': active },
+          'm-2 block cursor-pointer rounded-lg px-2 py-1.5 text-sm'
+        )
+      }
+      onClick={(event) => {
+        stopEventPropagation(event);
+        toggleHideComment();
+      }}
+    >
+      <div className="flex items-center space-x-2">
+        {showHiddenComments ? (
+          <>
+            <CheckCircleIcon className="size-4" />
+            <div>Unhide comment</div>
+          </>
+        ) : (
+          <>
+            <NoSymbolIcon className="size-4" />
+            <div>Hide comment</div>
+          </>
+        )}
+      </div>
+    </Menu.Item>
+  );
+};
+
+export default HideComment;

apps/web/src/components/Publication/Actions/Menu/index.tsx

@@ -12,6 +12,7 @@ import useProfileStore from 'src/store/persisted/useProfileStore';
 import Bookmark from './Bookmark';
 import CopyPostText from './CopyPostText';
 import Delete from './Delete';
+import HideComment from './HideComment';
 import NotInterested from './NotInterested';
 import Report from './Report';
 import Share from './Share';
@@ -52,6 +53,7 @@ const PublicationMenu: FC<PublicationMenuProps> = ({ publication }) => {
                 <Report publication={publication} />
               )}
               <NotInterested publication={publication} />
+              <HideComment publication={publication} />
               <Bookmark publication={publication} />
             </>
           ) : null}

apps/web/src/components/Publication/FullPublication.tsx

@@ -1,12 +1,17 @@
 import type { AnyPublication } from '@hey/lens';
 import type { FC } from 'react';
 
+import { QueueListIcon } from '@heroicons/react/24/outline';
 import formatDate from '@hey/lib/datetime/formatDate';
 import getAppName from '@hey/lib/getAppName';
 import { isMirrorPublication } from '@hey/lib/publicationHelpers';
+import { Tooltip } from '@hey/ui';
+import cn from '@hey/ui/cn';
 import pushToImpressions from '@lib/pushToImpressions';
+import { motion } from 'framer-motion';
 import { useEffectOnce } from 'usehooks-ts';
 
+import { useHiddenCommentFeedStore } from '.';
 import PublicationActions from './Actions';
 import FeaturedGroup from './FeaturedGroup';
 import HiddenPublication from './HiddenPublication';
@@ -17,10 +22,21 @@ import PublicationStats from './PublicationStats';
 import PublicationType from './Type';
 
 interface FullPublicationProps {
+  hasHiddenComments: boolean;
   publication: AnyPublication;
 }
 
-const FullPublication: FC<FullPublicationProps> = ({ publication }) => {
+const FullPublication: FC<FullPublicationProps> = ({
+  hasHiddenComments,
+  publication
+}) => {
+  const showHiddenComments = useHiddenCommentFeedStore(
+    (state) => state.showHiddenComments
+  );
+  const setShowHiddenComments = useHiddenCommentFeedStore(
+    (state) => state.setShowHiddenComments
+  );
+
   const targetPublication = isMirrorPublication(publication)
     ? publication?.mirrorOn
     : publication;
@@ -60,7 +76,36 @@ const FullPublication: FC<FullPublicationProps> = ({ publication }) => {
                 publicationStats={targetPublication.stats}
               />
               <div className="divider" />
-              <PublicationActions publication={targetPublication} showCount />
+              <div className="flex items-center justify-between">
+                <PublicationActions publication={targetPublication} showCount />
+                {hasHiddenComments ? (
+                  <div className="mt-2">
+                    <motion.button
+                      aria-label="Like"
+                      className={cn(
+                        showHiddenComments
+                          ? 'text-green-500 outline-green-500 hover:bg-green-300/20'
+                          : 'ld-text-gray-500 outline-gray-400 hover:bg-gray-300/20',
+                        'rounded-full p-1.5 outline-offset-2'
+                      )}
+                      onClick={() => setShowHiddenComments(!showHiddenComments)}
+                      whileTap={{ scale: 0.9 }}
+                    >
+                      <Tooltip
+                        content={
+                          showHiddenComments
+                            ? 'Hide hidden comments'
+                            : 'Show hidden comments'
+                        }
+                        placement="top"
+                        withDelay
+                      >
+                        <QueueListIcon className="size-5" />
+                      </Tooltip>
+                    </motion.button>
+                  </div>
+                ) : null}
+              </div>
             </>
           )}
         </div>

apps/web/src/components/Publication/index.tsx

@@ -11,7 +11,13 @@ import UserProfile from '@components/Shared/UserProfile';
 import PublicationStaffTool from '@components/StaffTools/Panels/Publication';
 import { APP_NAME } from '@hey/data/constants';
 import { PAGEVIEW } from '@hey/data/tracking';
-import { TriStateValue, usePublicationQuery } from '@hey/lens';
+import {
+  HiddenCommentsType,
+  LimitType,
+  TriStateValue,
+  usePublicationQuery,
+  usePublicationsQuery
+} from '@hey/lens';
 import getProfile from '@hey/lib/getProfile';
 import { isMirrorPublication } from '@hey/lib/publicationHelpers';
 import { Card, GridItemEight, GridItemFour, GridLayout } from '@hey/ui';
@@ -24,12 +30,25 @@ import { useProfileRestriction } from 'src/store/non-persisted/useProfileRestric
 import { useFeatureFlagsStore } from 'src/store/persisted/useFeatureFlagsStore';
 import useProfileStore from 'src/store/persisted/useProfileStore';
 import { useEffectOnce } from 'usehooks-ts';
+import { create } from 'zustand';
 
 import FullPublication from './FullPublication';
 import OnchainMeta from './OnchainMeta';
 import RelevantPeople from './RelevantPeople';
 import PublicationPageShimmer from './Shimmer';
 
+interface HiddenCommentFeedState {
+  setShowHiddenComments: (show: boolean) => void;
+  showHiddenComments: boolean;
+}
+
+export const useHiddenCommentFeedStore = create<HiddenCommentFeedState>(
+  (set) => ({
+    setShowHiddenComments: (show) => set({ showHiddenComments: show }),
+    showHiddenComments: false
+  })
+);
+
 const ViewPublication: NextPage = () => {
   const currentProfile = useProfileStore((state) => state.currentProfile);
   const { isSuspended } = useProfileRestriction();
@@ -52,6 +71,23 @@ const ViewPublication: NextPage = () => {
     variables: { request: { forId: id } }
   });
 
+  const { data: comments } = usePublicationsQuery({
+    skip: !id,
+    variables: {
+      request: {
+        limit: LimitType.Ten,
+        where: {
+          commentOn: {
+            hiddenComments: HiddenCommentsType.HiddenOnly,
+            id
+          }
+        }
+      }
+    }
+  });
+
+  const hasHiddenComments = (comments?.publications.items.length || 0) > 0;
+
   if (!isReady || loading) {
     return <PublicationPageShimmer />;
   }
@@ -80,7 +116,11 @@ const ViewPublication: NextPage = () => {
       />
       <GridItemEight className="space-y-5">
         <Card>
-          <FullPublication key={publication?.id} publication={publication} />
+          <FullPublication
+            hasHiddenComments={hasHiddenComments}
+            key={publication?.id}
+            publication={publication}
+          />
         </Card>
         {currentProfile &&
         !publication.isHidden &&

packages/data/tracking.ts

@@ -79,6 +79,7 @@ export const PUBLICATION = {
   REPORT: 'Report publication',
   SHARE: 'Share publication',
   TOGGLE_BOOKMARK: 'Toggle publication bookmark',
+  TOGGLE_HIDE_COMMENT: 'Toggle publication hide comment',
   TOGGLE_NOT_INTERESTED: 'Toggle publication not interested',
   TRANSLATE: 'Translate publication',
   UNDO_MIRROR: 'Undo mirror publication',

packages/lens/documents/mutations/publication/HideComment.graphql

@@ -0,0 +1,3 @@
+mutation HideComment($request: HideCommentRequest!) {
+  hideComment(request: $request)
+}

packages/lens/documents/mutations/publication/UnhideComment.graphql

@@ -0,0 +1,3 @@
+mutation UnhideComment($request: UnhideCommentRequest!) {
+  unhideComment(request: $request)
+}