From 914b3504318c3621e2245c66951ddf973a57058d Mon Sep 17 00:00:00 2001
From: Patrick O'Sullivan <patrick@osullivan.io>
Date: Wed, 15 Nov 2023 06:20:02 -0600
Subject: [PATCH] replies: add hide/show to replies, fixes LAND-1194

---
 ui/src/replies/ReplyMessage.tsx        | 37 +++++++++++++++++--
 ui/src/replies/ReplyMessageOptions.tsx | 50 +++++++++++++++++++++++++-
 2 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/ui/src/replies/ReplyMessage.tsx b/ui/src/replies/ReplyMessage.tsx
index 23b42e036a..e1951acc84 100644
--- a/ui/src/replies/ReplyMessage.tsx
+++ b/ui/src/replies/ReplyMessage.tsx
@@ -1,5 +1,11 @@
 /* eslint-disable react/no-unused-prop-types */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import cn from 'classnames';
 import debounce from 'lodash/debounce';
 import { BigInteger } from 'big-integer';
@@ -14,6 +20,7 @@ import ChatContent from '@/chat/ChatContent/ChatContent';
 import DateDivider from '@/chat/ChatMessage/DateDivider';
 import {
   useChatState,
+  useMessageToggler,
   useTrackedMessageStatus,
   // useIsMessageDelivered,
   // useIsMessagePosted,
@@ -24,9 +31,10 @@ import { useIsMobile } from '@/logic/useMedia';
 import useLongPress from '@/logic/useLongPress';
 import {
   useMarkReadMutation,
+  usePostToggler,
   useTrackedPostStatus,
 } from '@/state/channel/channel';
-import { emptyReply, Reply } from '@/types/channel';
+import { emptyReply, Reply, Story } from '@/types/channel';
 import { useIsDmOrMultiDm } from '@/logic/utils';
 import {
   useChatDialog,
@@ -68,6 +76,17 @@ const mergeRefs =
     });
   };
 
+const hiddenMessage: Story = [
+  {
+    inline: [
+      {
+        italics: [
+          'You have hidden this message. You can unhide it from the options menu.',
+        ],
+      },
+    ],
+  },
+];
 const ReplyMessage = React.memo<
   ReplyMessageProps & React.RefAttributes<HTMLDivElement>
 >(
@@ -99,6 +118,12 @@ const ReplyMessage = React.memo<
       const { open: pickerOpen } = useChatDialog(whom, seal.id, 'picker');
       const isDMOrMultiDM = useIsDmOrMultiDm(whom);
       const { mutate: markChatRead } = useMarkReadMutation();
+      const { isHidden: isMessageHidden } = useMessageToggler(seal.id);
+      const { isHidden: isPostHidden } = usePostToggler(seal.id);
+      const isHidden = useMemo(
+        () => isMessageHidden || isPostHidden,
+        [isMessageHidden, isPostHidden]
+      );
       const { ref: viewRef } = useInView({
         threshold: 1,
         onChange: useCallback(
@@ -282,7 +307,13 @@ const ReplyMessage = React.memo<
                   isLinked && 'bg-blue-softer'
                 )}
               >
-                {memo.content ? (
+                {isHidden ? (
+                  <ChatContent
+                    story={hiddenMessage}
+                    isScrolling={isScrolling}
+                    writId={seal.id}
+                  />
+                ) : memo.content ? (
                   <ChatContent
                     story={memo.content}
                     isScrolling={isScrolling}
diff --git a/ui/src/replies/ReplyMessageOptions.tsx b/ui/src/replies/ReplyMessageOptions.tsx
index 7d8e832631..8a8d5f8167 100644
--- a/ui/src/replies/ReplyMessageOptions.tsx
+++ b/ui/src/replies/ReplyMessageOptions.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router';
 import { useSearchParams } from 'react-router-dom';
 import { decToUd } from '@urbit/api';
@@ -8,6 +8,7 @@ import { useAmAdmin, useGroup, useRouteGroup, useVessel } from '@/state/groups';
 import {
   useAddDMReplyReactMutation,
   useDeleteDMReplyMutation,
+  useMessageToggler,
 } from '@/state/chat';
 import IconButton from '@/components/IconButton';
 import useEmoji from '@/state/emoji';
@@ -31,8 +32,11 @@ import {
   useDeletePostMutation,
   useDeleteReplyMutation,
   usePerms,
+  usePostToggler,
 } from '@/state/channel/channel';
 import { emptyReply, Reply } from '@/types/channel';
+import VisibleIcon from '@/components/icons/VisibleIcon';
+import HiddenIcon from '@/components/icons/HiddenIcon';
 
 export default function ReplyMessageOptions(props: {
   open: boolean;
@@ -85,6 +89,20 @@ export default function ReplyMessageOptions(props: {
   const { mutate: addFeelToChat } = useAddPostReactMutation();
   const { mutate: addFeelToReply } = useAddReplyReactMutation();
   const { mutate: addDMReplyFeel } = useAddDMReplyReactMutation();
+  const {
+    show: showPost,
+    hide: hidePost,
+    isHidden: isPostHidden,
+  } = usePostToggler(seal.id);
+  const {
+    show: showChatMessage,
+    hide: hideChatMessage,
+    isHidden: isMessageHidden,
+  } = useMessageToggler(seal.id);
+  const isHidden = useMemo(
+    () => isMessageHidden || isPostHidden,
+    [isMessageHidden, isPostHidden]
+  );
 
   const onDelete = async () => {
     if (isMobile) {
@@ -188,6 +206,16 @@ export default function ReplyMessageOptions(props: {
     }
   }, [isMobile, loadEmoji]);
 
+  const toggleMsg = useCallback(
+    () => (isMessageHidden ? showChatMessage() : hideChatMessage()),
+    [isMessageHidden, showChatMessage, hideChatMessage]
+  );
+
+  const togglePost = useCallback(
+    () => (isPostHidden ? showPost() : hidePost()),
+    [isPostHidden, showPost, hidePost]
+  );
+
   const showReactAction = canWrite;
   // TODO handle reply replies
   const showCopyAction = !!groupFlag;
@@ -258,6 +286,26 @@ export default function ReplyMessageOptions(props: {
     });
   }
 
+  actions.push({
+    key: 'hide',
+    onClick: isDMorMultiDM ? toggleMsg : togglePost,
+    content: (
+      <div className="flex items-center">
+        {isHidden ? (
+          <>
+            <VisibleIcon className="mr-2 h-6 w-6" />
+            Show Message
+          </>
+        ) : (
+          <>
+            <HiddenIcon className="mr-2 h-6 w-6" />
+            Hide Message
+          </>
+        )}
+      </div>
+    ),
+  });
+
   if (showDeleteAction) {
     actions.push({
       key: 'delete',