feat(post-menu): add Report/Delete, reorder buttons, edit-only-for-mods, copy link 5chan.app (#1089)

* Update crypto address UI for .bso accounts

* feat(post-menu): add Report/Delete, reorder buttons, edit-only-for-mods, copy link 5chan.app

- Remove redundant reason field from edit menu (purged posts unreachable)
- Add Report post (placeholder alert) and Delete post (mobile) to post menus
- Reorder: Report, Hide, Delete, Copy x3, Image search
- Mobile edit checkbox only for mods; authors use Delete in post menu
- Copy direct link always uses 5chan.app domain
- 10px margin-top on mod menu save button

* fix(post-menu): add confirmation before delete post (Bugbot)

src/components/edit-menu/__tests__/edit-menu.test.tsx

@@ -128,7 +128,6 @@ const basePost = {
   parentCid: undefined as string | undefined,
   pinned: false,
   postCid: 'post-1',
-  reason: '',
   removed: false,
   spoiler: false,
   communityAddress: 'music-posting.eth',
@@ -228,7 +227,7 @@ describe('EditMenu', () => {
     expect(alertSpy).toHaveBeenLastCalledWith('cannot_edit_reply');
   });
 
-  it('lets comment authors update content, deletion, and reason', async () => {
+  it('lets comment authors update content and deletion', async () => {
     testState.privileges = {
       isAccountCommentAuthor: true,
       isAccountMod: false,
@@ -242,12 +241,9 @@ describe('EditMenu', () => {
     await click(getLabelCheckbox('Edit?'));
 
     const textarea = container.querySelector('textarea');
-    const reasonInput = container.querySelector<HTMLInputElement>('input[type="text"]');
     expect(textarea).not.toBeNull();
-    expect(reasonInput).not.toBeNull();
 
     await dispatchInput(textarea as HTMLTextAreaElement, 'Updated body');
-    await dispatchInput(reasonInput as HTMLInputElement, 'cleanup');
     await clickButton('save');
 
     expect(testState.publishAuthorEditMock).toHaveBeenCalledOnce();
@@ -260,7 +256,6 @@ describe('EditMenu', () => {
       commentCid: 'comment-1',
       content: 'Updated body',
       deleted: true,
-      reason: 'cleanup',
       spoiler: false,
       communityAddress: 'music-posting.eth',
     });
@@ -343,12 +338,9 @@ describe('EditMenu', () => {
     await click(getCheckbox('banUser'));
 
     const banDurationInput = container.querySelector<HTMLInputElement>('[data-testid="ban-duration-input"]');
-    const reasonInput = container.querySelector<HTMLInputElement>('input[type="text"]');
     expect(banDurationInput).not.toBeNull();
-    expect(reasonInput).not.toBeNull();
 
     await dispatchInput(banDurationInput as HTMLInputElement, '7');
-    await dispatchInput(reasonInput as HTMLInputElement, 'rule violation');
     await clickButton('save');
 
     expect(confirmSpy).toHaveBeenCalledWith('purge_confirm');
@@ -363,7 +355,6 @@ describe('EditMenu', () => {
       communityAddress: 'music-posting.eth',
     });
     expect(testState.modOptions?.commentModeration).toMatchObject({
-      reason: 'rule violation',
       archived: true,
       locked: true,
       pinned: true,

src/components/edit-menu/edit-menu.module.css

@@ -74,6 +74,7 @@
 .bottom button {
   text-transform: capitalize;
   margin-left: 2px;
+  margin-top: 10px;
   margin-bottom: 2px;
 }
 
@@ -90,7 +91,8 @@
 @media (min-width: 640px) {
   .bottom button {
     cursor: pointer;
-    padding: 2px 6px 3px; 
+    margin-top: 10px;
+    padding: 2px 6px 3px;
   }
 }
 

src/components/edit-menu/edit-menu.tsx

@@ -36,7 +36,7 @@ const EditMenu = ({ post }: { post: Comment }) => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
   const resolvedPost = withResolvedCommentCommunityAddress(post);
-  const { author, cid, content, deleted, locked, parentCid, pinned, postCid, reason, removed, spoiler } = resolvedPost || {};
+  const { author, cid, content, deleted, locked, parentCid, pinned, postCid, removed, spoiler } = resolvedPost || {};
   const communityAddress = getCommentCommunityAddress(resolvedPost);
   const archived = isCommentArchived(resolvedPost);
   const authorDisplayName = resolvedPost?.author?.displayName;
@@ -80,7 +80,6 @@ const EditMenu = ({ post }: { post: Comment }) => {
             removed: removed ?? false,
             purged: purged ?? false,
             spoiler: spoiler ?? false,
-            reason,
             author: modBanExpiresAt ? { banExpiresAt: modBanExpiresAt } : undefined,
           }
         : undefined,
@@ -101,7 +100,6 @@ const EditMenu = ({ post }: { post: Comment }) => {
     deleted,
     locked,
     pinned,
-    reason,
     removed,
     purged,
     spoiler,
@@ -118,7 +116,6 @@ const EditMenu = ({ post }: { post: Comment }) => {
       communityAddress,
       content: publishCommentEditOptions.content,
       deleted: publishCommentEditOptions.deleted,
-      reason: publishCommentEditOptions.reason,
       spoiler: publishCommentEditOptions.spoiler,
       onChallenge,
       onChallengeVerification: alertChallengeVerificationFailed,
@@ -150,7 +147,6 @@ const EditMenu = ({ post }: { post: Comment }) => {
         removed: publishCommentEditOptions.commentModeration?.removed,
         purged: publishCommentEditOptions.commentModeration?.purged,
         spoiler: publishCommentEditOptions.commentModeration?.spoiler,
-        reason: publishCommentEditOptions.reason,
         author: publishCommentEditOptions.commentModeration?.author,
       },
       author: account?.author,
@@ -436,18 +432,6 @@ const EditMenu = ({ post }: { post: Comment }) => {
                     )}
                   </>
                 )}
-                <div className={`${styles.menuItem} ${styles.menuReason}`}>
-                  {capitalize(t('reason'))}? ({t('optional')})
-                  <input
-                    type='text'
-                    value={publishCommentEditOptions.reason || ''}
-                    onChange={(e) => {
-                      const newReason = e.target.value;
-                      setPublishCommentEditOptions((state) => ({ ...state, reason: newReason }));
-                    }}
-                    size={14}
-                  />
-                </div>
                 <div className={styles.bottom}>
                   <button className={isMobile ? 'button' : ''} onClick={_publishCommentEdit} disabled={!canSave}>
                     {t('save')}