[Project] Comment Redesign

[Cinder]

These are the design notes of sorts for the comment redesign project.
Due to its size and complexity, it will consist of multiple pull requests.

The purpose of this project is as follows:

• Update the comment look to something more modern.
• Redesign the comments index to be more intuitive and easy to use.
• Reduce the amplification of negative opinions among the user base.
  • Only a small number of comments from a longer discussion are to be shown by default, with an extra step to look for more.
  • Nested comments allow the entire discussion to be hidden from public view when the parent comment is hidden.
• Promote better comments through reordering and prioritization
  • Good, highly-upvoted comments are shown at the top, encouraging users to respond to them
  • Downvotes comments are naturally pushed to the bottom, alongside comments that are marked as rule-breaking.

Design

Keeping it as simple as possible for the original redesign.
... it still ballooned into a huge pull request.

Notes:

• Avatars displayed as 100px previews, cropped to a square.
• If the user does not have an avatar, they instead get a blank square with the first letter of their name.
• User level is displayed under the avatar, but only if it's priv+
• Comment body is set to max 850px, so we can have right-aligned buttons without the danger of them disappearing over the horizon.
• "Reply" and "Report" buttons are given icons, and placed on the opposite sides of the comment footer.
• "New comment" form is on the top, to avoid extra scrolling

Nesting

Less complicated project with more complicated consequences.

Notes:

• Creating a new comment works as normal, clicking "Reply" shows a reply form that creates a child comment.
• One-level nesting only. Replying to a child comment just creates another comment under the same parent.
• Comment pagination on the post page, to avoid drawing 900 comments
• Only show a few (3?) child comments by default, "Click to see more" button takes the user to the rest
• Slight indentation to show hierarchy, no need to go all out on this one.
• No more quotes in replies by default. Perhaps, a new DText tag could be made for "{username}":/users/{id}
• Hiding a parent comment also hides all responses to it (those could still be found if directly searched for)

Ordering

(no screenshot yet)

Notes:

• Order comments to show the highly upvoted ones first.
  • Obviously, existing comment discussion would be disrupted by this – perhaps, the default order could be post-specific.
  • Do something to prevent controversial comments from being completely buried
• Comments marked as rule-breaking should be pushed further to the bottom.