Merge branch 'symmetric-bans' into beta

src/components/dialog/ban-dialog.jsx

@@ -19,13 +19,10 @@ export function useShowBanDialog(user) {
           <div style={{ maxWith: '600px' }}>
             <p>You are going to block {uname}. What does this mean?</p>
             <ul>
-              <li>
-                <p>You and {uname} will not see each other&#x2019;s posts.</p>
-              </li>
               <li>
                 <p>
-                  You will not see the {uname}&#x2019;s comments and likes, while {uname} will be
-                  able to see your comments in other people&#x2019;s posts.
+                  You and {uname} will not see each other&#x2019;s content (posts, comments and
+                  likes).
                 </p>
               </li>
               <li>
@@ -38,11 +35,12 @@ export function useShowBanDialog(user) {
               <strong>Blocks in groups</strong>
             </p>
             <p>
-              You can disable blocking in selected groups, in those groups you will see all posts
-              and comments of those you have blocked.
+              You can decide to see the blocked content in selected groups, in those groups you will
+              see all the content of those you have blocked.
             </p>
             <p>
-              If {uname} is an admin of some group, he will be able to see your posts in that group.
+              If {uname} is an admin of some group, he will be able to see your content in that
+              group.
             </p>
           </div>
         ),

src/components/dialog/disable-bans-dialog.jsx

@@ -19,19 +19,17 @@ export function useShowDisableBansDialog(group, isAdmin) {
           <>
             <p>You are going to show blocked content in {uname}. What does this mean?</p>
             <ul>
-              <li>
-                <p>You will see all the posts of your blocked users in {uname}.</p>
-              </li>
               <li>
                 <p>
-                  You will see comments and likes from your blocked users under posts in {uname}.
+                  You will see all the content (posts, comments and likes) of your blocked users in{' '}
+                  {uname}.
                 </p>
               </li>
               {isAdmin && (
                 <li>
                   <p>
-                    <strong>As an administrator</strong>, you will also see all the posts in {uname}{' '}
-                    of the users who have blocked you.
+                    <strong>As an administrator</strong>, you will also see all all the content in{' '}
+                    {uname} of the users who have blocked you.
                   </p>
                 </li>
               )}

src/components/post/post-comment-more-menu.jsx

@@ -69,7 +69,7 @@ export const PostCommentMoreMenu = forwardRef(function PostCommentMore(
           </ButtonLink>
         </div>
       ),
-      likersText && (
+      !isHidden && likersText && (
         <div key="likes" className={styles.item}>
           <ButtonLink className={styles.link} onClick={doShowLikes}>
             <Iconic icon={faUserFriends}>{likersText}</Iconic>

src/components/post/post-comment-preview.jsx

@@ -7,7 +7,7 @@ import { getCommentByNumber } from '../../redux/action-creators';
 import { initialAsyncState } from '../../redux/async-helpers';
 import { intentToScroll } from '../../services/unscroll';
 import {
-  COMMENT_HIDDEN_BANNED,
+  HIDDEN_AUTHOR_BANNED,
   READMORE_STYLE_COMPACT,
 } from '../../utils/frontend-preferences-options';
 
@@ -74,7 +74,7 @@ export function PostCommentPreview({
   );
 
   const commentBody = useMemo(() => {
-    if (comment?.hideType === COMMENT_HIDDEN_BANNED) {
+    if (comment?.hideType === HIDDEN_AUTHOR_BANNED) {
       return 'Comment from blocked user';
     }
     return comment?.body;
@@ -153,7 +153,7 @@ export function PostCommentPreview({
     >
       {comment ? (
         <CommentProvider id={comment.id}>
-          {comment.hideType ? (
+          {comment.hideType || comment._hideType ? (
             <span className={styles['hidden-text']}>{commentBody}</span>
           ) : (
             <Expandable

src/components/post/post-comment.jsx

@@ -7,7 +7,8 @@ import { connect } from 'react-redux';
 import { preventDefault, confirmFirst } from '../../utils';
 import {
   READMORE_STYLE_COMPACT,
-  COMMENT_HIDDEN_BANNED,
+  HIDDEN_AUTHOR_BANNED,
+  HIDDEN_VIEWER_BANNED,
 } from '../../utils/frontend-preferences-options';
 import { commentReadmoreConfig } from '../../utils/readmore-config';
 import { defaultCommentState } from '../../redux/reducers/comment-edit';
@@ -95,13 +96,16 @@ class PostComment extends Component {
   };
 
   isHidden() {
-    return !!this.props.hideType || this.props.isReplyToBanned;
+    return !!this.props.hideType || !!this.props._hideType || this.props.isReplyToBanned;
   }
 
   hiddenBody() {
-    if (this.props.hideType === COMMENT_HIDDEN_BANNED) {
+    if (this.props.hideType === HIDDEN_AUTHOR_BANNED) {
       return 'Comment from blocked user';
     }
+    if (this.props._hideType === HIDDEN_VIEWER_BANNED) {
+      return 'Comment from user who blocked you';
+    }
     if (this.props.isReplyToBanned) {
       return 'Comment with reply to blocked user';
     }

src/components/settings/forms/appearance.jsx

@@ -3,7 +3,7 @@ import { useMemo, useEffect } from 'react';
 import { Link } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
 import { useForm, useField } from 'react-final-form-hooks';
-import { without, uniq, uniqWith } from 'lodash-es';
+import { without, uniqWith } from 'lodash-es';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { hashtags as findHashTags } from 'social-text-tokenizer';
 import ISO6391 from 'iso-639-1';
@@ -13,7 +13,8 @@ import {
   DISPLAYNAMES_USERNAME,
   READMORE_STYLE_COMPACT,
   READMORE_STYLE_COMFORT,
-  COMMENT_HIDDEN_BANNED,
+  HIDDEN_AUTHOR_BANNED,
+  HIDDEN_VIEWER_BANNED,
 } from '../../../utils/frontend-preferences-options';
 import {
   HOMEFEED_MODE_FRIENDS_ONLY,
@@ -104,6 +105,7 @@ export default function AppearanceForm() {
   const omitBubbles = useField('omitBubbles', form.form);
   const highlightComments = useField('highlightComments', form.form);
   const hideBannedComments = useField('hideBannedComments', form.form);
+  const hideCommentsBansYou = useField('hideCommentsBansYou', form.form);
   const hideRepliesToBanned = useField('hideRepliesToBanned', form.form);
   const allowLinksPreview = useField('allowLinksPreview', form.form);
   const hideNSFWContent = useField('hideNSFWContent', form.form);
@@ -386,19 +388,28 @@ export default function AppearanceForm() {
             </label>
           </div>
         </div>
-        <h5>Comments from blocked users:</h5>
+        <h5>Completely hide (don&#x2019;t even show the placeholder):</h5>
         <div className="form-group">
           <div className="checkbox">
             <label>
               <CheckboxInput field={hideBannedComments} />
-              Hide comments from blocked users (don&#x2019;t even show placeholder)
+              Comments from users you have blocked
             </label>
           </div>
+          <div className="checkbox">
+            <label>
+              <CheckboxInput field={hideCommentsBansYou} />
+              Comments from users who have blocked you
+            </label>
+          </div>
+        </div>
 
+        <h5>Show placeholders instead of:</h5>
+        <div className="form-group">
           <div className="checkbox">
             <label>
               <CheckboxInput field={hideRepliesToBanned} />
-              Hide text of replies to blocked users (show placeholders instead)
+              Text of replies to blocked users
             </label>
           </div>
         </div>
@@ -560,7 +571,8 @@ function initialValues({
     readMoreStyle: frontend.readMoreStyle,
     omitBubbles: frontend.comments.omitRepeatedBubbles,
     highlightComments: frontend.comments.highlightComments,
-    hideBannedComments: backend?.hideCommentsOfTypes.includes(COMMENT_HIDDEN_BANNED),
+    hideBannedComments: backend?.hideCommentsOfTypes.includes(HIDDEN_AUTHOR_BANNED),
+    hideCommentsBansYou: backend?.hideCommentsOfTypes.includes(HIDDEN_VIEWER_BANNED),
     hideRepliesToBanned: frontend.comments.hideRepliesToBanned,
     allowLinksPreview: frontend.allowLinksPreview,
     hideNSFWContent: !isNSFWVisible,
@@ -635,11 +647,14 @@ function prefUpdaters(values) {
     },
 
     updateBackendPrefs({ hideCommentsOfTypes }) {
-      return {
-        hideCommentsOfTypes: values.hideBannedComments
-          ? uniq([...hideCommentsOfTypes, COMMENT_HIDDEN_BANNED])
-          : without(hideCommentsOfTypes, COMMENT_HIDDEN_BANNED),
-      };
+      hideCommentsOfTypes = without(
+        hideCommentsOfTypes,
+        HIDDEN_AUTHOR_BANNED,
+        HIDDEN_VIEWER_BANNED,
+      );
+      values.hideBannedComments && hideCommentsOfTypes.push(HIDDEN_AUTHOR_BANNED);
+      values.hideCommentsBansYou && hideCommentsOfTypes.push(HIDDEN_VIEWER_BANNED);
+      return { hideCommentsOfTypes };
     },
   };
 }

src/utils/frontend-preferences-options.js

@@ -7,5 +7,6 @@ export const READMORE_STYLE_COMFORT = 'modern';
 // Comment hide types
 export const COMMENT_VISIBLE = 0;
 export const COMMENT_DELETED = 1;
-export const COMMENT_HIDDEN_BANNED = 2;
+export const HIDDEN_AUTHOR_BANNED = 2;
+export const HIDDEN_VIEWER_BANNED = 4;
 export const COMMENT_HIDDEN_ARCHIVED = 3;