add style for comments with is_pinned=true

flow-typed/Comment.js

@@ -11,6 +11,7 @@ declare type Comment = {
   signing_ts?: string, // timestamp used when signing this comment
   is_channel_signature_valid?: boolean, // whether or not the signature could be validated
   parent_id?: number, // comment_id of comment this is in reply to
+  is_pinned: boolean,
 };
 
 // todo: relate individual comments to their commentId

ui/component/comment/view.jsx

@@ -4,6 +4,7 @@ import * as PAGES from 'constants/pages';
 import { FF_MAX_CHARS_IN_COMMENT } from 'constants/form-field';
 import { SITE_NAME, SIMPLE_SITE, ENABLE_COMMENT_REACTIONS } from 'config';
 import React, { useEffect, useState } from 'react';
+import { parseURI } from 'lbry-redux';
 import { isEmpty } from 'util/object';
 import DateTime from 'component/dateTime';
 import Button from 'component/button';
@@ -43,6 +44,7 @@ type Props = {
   doToast: ({ message: string }) => void,
   isTopLevel?: boolean,
   threadDepth: number,
+  isPinned: boolean,
 };
 
 const LENGTH_TO_COLLAPSE = 300;
@@ -71,10 +73,12 @@ function Comment(props: Props) {
     doToast,
     isTopLevel,
     threadDepth,
+    isPinned,
   } = props;
   const {
     push,
-    location: { pathname },
+    replace,
+    location: { pathname, search },
   } = useHistory();
   const [isReplying, setReplying] = React.useState(false);
   const [isEditing, setEditing] = useState(false);
@@ -84,11 +88,17 @@ function Comment(props: Props) {
   const [mouseIsHovering, setMouseHover] = useState(false);
   const [advancedEditor] = usePersistedState('comment-editor-mode', false);
   const hasChannels = myChannels && myChannels.length > 0;
-
   // to debounce subsequent requests
   const shouldFetch =
     channel === undefined ||
     (channel !== null && channel.value_type === 'channel' && isEmpty(channel.meta) && !pending);
+  let channelOwnerOfContent;
+  try {
+    const { channelName } = parseURI(uri);
+    if (channelName) {
+      channelOwnerOfContent = channelName;
+    }
+  } catch (e) {}
 
   useEffect(() => {
     // If author was extracted from the URI, then it must be valid.
@@ -133,18 +143,28 @@ function Comment(props: Props) {
     }
   }
 
+  function handleTimeClick() {
+    const urlParams = new URLSearchParams(search);
+    urlParams.delete('lc');
+    urlParams.append('lc', commentId);
+    replace(`${pathname}?${urlParams.toString()}`);
+  }
+
   return (
     <li
       className={classnames('comment', {
         'comment--top-level': isTopLevel,
         'comment--reply': !isTopLevel,
-        'comment--highlighted': linkedComment && linkedComment.comment_id === commentId,
       })}
       id={commentId}
       onMouseOver={() => setMouseHover(true)}
       onMouseOut={() => setMouseHover(false)}
     >
-      <div className="comment__content">
+      <div
+        className={classnames('comment__content', {
+          'comment--highlighted': linkedComment && linkedComment.comment_id === commentId,
+        })}
+      >
         <div className="comment__author-thumbnail">
           {authorUri ? (
             <ChannelThumbnail uri={authorUri} obscure={channelIsBlocked} small />
@@ -167,9 +187,18 @@ function Comment(props: Props) {
               )}
               <Button
                 className="comment__time"
-                navigate={`${uri}?lc=${commentId}`}
+                onClick={handleTimeClick}
                 label={<DateTime date={timePosted} timeAgo />}
               />
+
+              {isPinned && (
+                <span className="comment__pin">
+                  <Icon icon={ICONS.PIN} />
+                  {channelOwnerOfContent
+                    ? __('Pinned by @%channel%', { channel: channelOwnerOfContent })
+                    : __('Pinned by creator')}
+                </span>
+              )}
             </div>
             <div className="comment__menu">
               <Menu>

ui/component/commentsList/view.jsx

@@ -216,6 +216,7 @@ function CommentList(props: Props) {
                     claimIsMine={claimIsMine}
                     commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                     linkedComment={linkedComment}
+                    isPinned={comment.is_pinned}
                   />
                 );
               })}

ui/component/common/icon-custom.jsx

@@ -892,4 +892,22 @@ export const icons = {
       </g>
     </svg>
   ),
+  [ICONS.PIN]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-6 -5 26 24"
+      width={props.size || '18'}
+      height={props.size || '18'}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M11.3333333,6 C11.3333333,8.94666667 8.94666667,11.3333333 6,11.3333333 C3.056,11.3333333 0.666666667,8.94666667 0.666666667,6 C0.666666667,3.05466667 3.056,0.666666667 6,0.666666667 C8.94666667,0.666666667 11.3333333,3.05466667 11.3333333,6 L11.3333333,6 Z" />
+      <line x1="6" y1="11.3333333" x2="6" y2="23.3333333" />
+      <path d="M6,3.33333333 C7.47333333,3.33333333 8.66666667,4.528 8.66666667,6" />
+    </svg>
+  ),
 };

ui/constants/icons.js

@@ -124,3 +124,4 @@ export const FIRE_ACTIVE = 'FireActive';
 export const SLIME_ACTIVE = 'SlimeActive';
 export const FIRE = 'Fire';
 export const SLIME = 'Slime';
+export const PIN = 'Pin';

ui/scss/component/_comments.scss

@@ -127,7 +127,7 @@ $thumbnailWidthSmall: 0rem;
 
 .comment--highlighted {
   background: var(--color-comment-highlighted);
-  box-shadow: 0 0 0 var(--spacing-xs) var(--color-comment-highlighted);
+  box-shadow: 0 0 0 5px var(--color-comment-highlighted);
   border-radius: 4px;
 }
 
@@ -151,6 +151,10 @@ $thumbnailWidthSmall: 0rem;
   height: 100%;
 }
 
+.comment__pin {
+  margin-left: var(--spacing-s);
+}
+
 .comment__message {
   word-break: break-word;
   max-width: 35rem;

ui/util/comments.js

@@ -20,6 +20,12 @@ export function sortComments(sortProps: SortProps): Array<Comment> {
   }
 
   return comments.slice().sort((a: Comment, b: Comment) => {
+    if (a.is_pinned) {
+      return -1;
+    } else if (b.is_pinned) {
+      return 1;
+    }
+
     if (sort === SORT_COMMENTS_NEW) {
       return 0;
     }