Consolidate comment code, add market creator badge

web/components/feed/feed-comments.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef, useState } from 'react'
+import React, { memo, ReactNode, useEffect, useRef, useState } from 'react'
 import { Editor } from '@tiptap/react'
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
@@ -103,54 +103,54 @@ export function FeedCommentThread(props: {
     </Col>
   )
 }
-
-export const ParentFeedComment = memo(function ParentFeedComment(props: {
+export const FeedComment = memo(function FeedComment(props: {
   contract: Contract
   comment: ContractComment
   highlighted?: boolean
   showLike?: boolean
-  seeReplies: boolean
-  numComments: number
   onReplyClick?: (comment: ContractComment) => void
-  onSeeReplyClick: () => void
+  children?: ReactNode
+  className?: string
 }) {
   const {
     contract,
+    className,
     comment,
     highlighted,
     showLike,
     onReplyClick,
-    onSeeReplyClick,
-    seeReplies,
-    numComments,
+    children,
   } = props
   const { userUsername, userAvatarUrl } = comment
   const commentRef = useRef<HTMLDivElement>(null)
+  const marketCreator = contract.creatorId === comment.userId
 
   useEffect(() => {
     if (highlighted && commentRef.current) {
       commentRef.current.scrollIntoView(true)
     }
   }, [highlighted])
 
-  const commentKind =
-    userUsername === 'ManifoldDream' ? 'ub-dream-comment' : null
   return (
     <Row
       ref={commentRef}
       id={comment.id}
-      className={clsx(commentKind, 'gap-2', highlighted ? 'bg-primary-50' : '')}
+      className={clsx(
+        className ? className : 'ml-9 gap-2',
+        highlighted ? 'bg-primary-50' : ''
+      )}
     >
-      <Avatar size="sm" username={userUsername} avatarUrl={userAvatarUrl} />
+      <Avatar
+        size={children ? 'sm' : 'xs'}
+        username={userUsername}
+        avatarUrl={userAvatarUrl}
+        className={marketCreator ? 'shadow shadow-amber-300' : ''}
+      />
       <Col className="w-full">
         <FeedCommentHeader comment={comment} contract={contract} />
         <HideableContent comment={comment} />
-        <Row className="justify-between">
-          <ReplyToggle
-            seeReplies={seeReplies}
-            numComments={numComments}
-            onClick={onSeeReplyClick}
-          />
+        <Row className={children ? 'justify-between' : 'justify-end'}>
+          {children}
           <CommentActions
             onReplyClick={onReplyClick}
             comment={comment}
@@ -163,6 +163,54 @@ export const ParentFeedComment = memo(function ParentFeedComment(props: {
   )
 })
 
+export const ParentFeedComment = memo(function ParentFeedComment(props: {
+  contract: Contract
+  comment: ContractComment
+  highlighted?: boolean
+  showLike?: boolean
+  seeReplies: boolean
+  numComments: number
+  onReplyClick?: (comment: ContractComment) => void
+  onSeeReplyClick: () => void
+}) {
+  const {
+    contract,
+    comment,
+    highlighted,
+    showLike,
+    onReplyClick,
+    onSeeReplyClick,
+    seeReplies,
+    numComments,
+  } = props
+  const { userUsername } = comment
+  const commentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (highlighted && commentRef.current) {
+      commentRef.current.scrollIntoView(true)
+    }
+  }, [highlighted])
+
+  const commentKind = userUsername === 'ManifoldDream' ? 'ub-dream-comment' : ''
+  return (
+    <FeedComment
+      contract={contract}
+      comment={comment}
+      onReplyClick={onReplyClick}
+      highlighted={highlighted}
+      showLike={showLike}
+      className={clsx('gap-2', commentKind)}
+    >
+      <ReplyToggle
+        seeReplies={seeReplies}
+        numComments={numComments}
+        onClick={onSeeReplyClick}
+      />
+    </FeedComment>
+  )
+})
+
 function HideableContent(props: { comment: ContractComment }) {
   const { comment } = props
   const { text, content } = comment
@@ -267,44 +315,6 @@ export function CommentActions(props: {
   )
 }
 
-export const FeedComment = memo(function FeedComment(props: {
-  contract: Contract
-  comment: ContractComment
-  highlighted?: boolean
-  showLike?: boolean
-  onReplyClick?: (comment: ContractComment) => void
-}) {
-  const { contract, comment, highlighted, showLike, onReplyClick } = props
-  const { userUsername, userAvatarUrl } = comment
-  const commentRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (highlighted && commentRef.current) {
-      commentRef.current.scrollIntoView(true)
-    }
-  }, [highlighted])
-
-  return (
-    <Row
-      ref={commentRef}
-      id={comment.id}
-      className={clsx('ml-9 gap-2 ', highlighted ? 'bg-primary-50' : '')}
-    >
-      <Avatar size="xs" username={userUsername} avatarUrl={userAvatarUrl} />
-      <Col className="w-full">
-        <FeedCommentHeader comment={comment} contract={contract} />
-        <HideableContent comment={comment} />
-        <CommentActions
-          onReplyClick={onReplyClick}
-          comment={comment}
-          showLike={showLike}
-          contract={contract}
-        />
-      </Col>
-    </Row>
-  )
-})
-
 function CommentStatus(props: {
   contract: Contract
   comment: ContractComment
@@ -388,6 +398,7 @@ export function FeedCommentHeader(props: {
 }) {
   const { comment, contract } = props
   const { userUsername, userName, createdTime } = comment
+  const marketCreator = contract.creatorId === comment.userId
   const betOutcome = comment.betOutcome
   let bought: string | undefined
   let money: string | undefined
@@ -398,7 +409,11 @@ export function FeedCommentHeader(props: {
   const shouldDisplayOutcome = betOutcome && !comment.answerOutcome
   return (
     <span className="text-ink-600 mt-0.5 text-sm">
-      <UserLink username={userUsername} name={userName} />
+      <UserLink
+        username={userUsername}
+        name={userName}
+        marketCreator={marketCreator}
+      />
       <span className="text-ink-400 ml-1">
         <CommentStatus contract={contract} comment={comment} />
         {bought} {money}

web/components/widgets/user-link.tsx

@@ -11,6 +11,7 @@ import { BadgeCheckIcon } from '@heroicons/react/outline'
 import { Row } from '../layout/row'
 import { Avatar } from './avatar'
 import { DAY_MS } from 'common/util/time'
+import ScalesIcon from 'web/lib/icons/scales-icon'
 
 export const isFresh = (createdTime: number) =>
   createdTime > Date.now() - DAY_MS * 14
@@ -51,11 +52,32 @@ export function UserLink(props: {
   noLink?: boolean
   createdTime?: number
   hideBadge?: boolean
+  marketCreator?: boolean
 }) {
-  const { name, username, className, short, noLink, createdTime, hideBadge } =
-    props
+  const {
+    name,
+    username,
+    className,
+    short,
+    noLink,
+    createdTime,
+    hideBadge,
+    marketCreator,
+  } = props
   const fresh = createdTime ? isFresh(createdTime) : false
   const shortName = short ? shortenName(name) : name
+  const children = (
+    <>
+      <span className="max-w-[200px] truncate">{shortName}</span>
+      {!hideBadge && (
+        <UserBadge
+          username={username}
+          fresh={fresh}
+          marketCreator={marketCreator}
+        />
+      )}
+    </>
+  )
   if (noLink) {
     return (
       <div
@@ -65,8 +87,7 @@ export function UserLink(props: {
           className
         )}
       >
-        <span className="max-w-[200px] truncate">{shortName}</span>
-        {!hideBadge && <UserBadge username={username} fresh={fresh} />}
+        {children}
       </div>
     )
   }
@@ -76,8 +97,7 @@ export function UserLink(props: {
       className={clsx('inline-flex flex-row items-center gap-1', className)}
       followsLinkClass
     >
-      <span className="max-w-[200px] truncate">{shortName}</span>
-      {!hideBadge && <UserBadge username={username} fresh={fresh} />}
+      {children}
     </SiteLink>
   )
 }
@@ -100,8 +120,12 @@ export function PostBanBadge() {
   )
 }
 
-export function UserBadge(props: { username: string; fresh?: boolean }) {
-  const { username, fresh } = props
+export function UserBadge(props: {
+  username: string
+  fresh?: boolean
+  marketCreator?: boolean
+}) {
+  const { username, fresh, marketCreator } = props
   if (BOT_USERNAMES.includes(username)) {
     return <BotBadge />
   }
@@ -114,6 +138,9 @@ export function UserBadge(props: { username: string; fresh?: boolean }) {
   if (fresh) {
     return <FreshBadge />
   }
+  if (marketCreator) {
+    return <MarketCreatorBadge />
+  }
   return null
 }
 
@@ -146,3 +173,11 @@ function FreshBadge() {
     </Tooltip>
   )
 }
+
+function MarketCreatorBadge() {
+  return (
+    <Tooltip text="Market Creator" placement="right">
+      <ScalesIcon className="h-4 w-4 text-amber-400" aria-hidden="true" />
+    </Tooltip>
+  )
+}

web/lib/icons/scales-icon.tsx

@@ -0,0 +1,16 @@
+export default function ScalesIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M12 2.25a.75.75 0 01.75.75v.756a49.106 49.106 0 019.152 1 .75.75 0 01-.152 1.485h-1.918l2.474 10.124a.75.75 0 01-.375.84A6.723 6.723 0 0118.75 18a6.723 6.723 0 01-3.181-.795.75.75 0 01-.375-.84l2.474-10.124H12.75v13.28c1.293.076 2.534.343 3.697.776a.75.75 0 01-.262 1.453h-8.37a.75.75 0 01-.262-1.453c1.162-.433 2.404-.7 3.697-.775V6.24H6.332l2.474 10.124a.75.75 0 01-.375.84A6.723 6.723 0 015.25 18a6.723 6.723 0 01-3.181-.795.75.75 0 01-.375-.84L4.168 6.241H2.25a.75.75 0 01-.152-1.485 49.105 49.105 0 019.152-1V3a.75.75 0 01.75-.75zm4.878 13.543l1.872-7.662 1.872 7.662h-3.744zm-9.756 0L5.25 8.131l-1.872 7.662h3.744z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}