Ingawei/cleanup repost (#2711)

* reformatting reposts
manifoldmarkets · Jul 10, 2024 · b076a66 · b076a66
1 parent 51ef740
commit b076a66
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 90 deletions.
diff --git a/web/components/feed/card-reason.tsx b/web/components/feed/card-reason.tsx
@@ -16,28 +16,33 @@ export function CardReason(props: {
   repost?: Repost
   probChange?: number
   since?: number
+  className?: string
 }) {
-  const { reason, repost, probChange, since } = props
+  const { reason, repost, probChange, since, className } = props
 
   if (probChange) {
     return <ProbabilityChange probChange={probChange} since={since} />
   } else if (reason === 'freshness') {
     return (
-      <Row className={'text-ink-400 items-center gap-1 text-sm'}>
+      <Row
+        className={clsx('text-ink-400 items-center gap-1 text-sm', className)}
+      >
         <HiSparkles className={'h-4 w-4 text-yellow-400'} />
         trending
       </Row>
     )
   } else if (reason === 'conversion') {
     return (
-      <Row className={'text-ink-400 items-center gap-1.5 text-sm'}>
+      <Row
+        className={clsx('text-ink-400 items-center gap-1.5 text-sm', className)}
+      >
         <FaGem className="h-3 w-3 text-blue-400" />
         interesting
       </Row>
     )
   } else if (reason === 'importance') {
     return (
-      <span className="text-ink-400 text-sm">
+      <span className={clsx('text-ink-400 text-sm', className)}>
         <Row className={'items-center gap-1'}>
           <FireIcon className="text-ink-400 h-4 w-4" />
           popular
@@ -46,7 +51,7 @@ export function CardReason(props: {
     )
   } else if (reason === 'followed') {
     return (
-      <span className="text-ink-400 text-sm">
+      <span className={clsx('text-ink-400 text-sm', className)}>
         <Row className={'items-center gap-1'}>
           <UserIcon className="text-ink-400 h-4 w-4" />
           following
@@ -56,7 +61,7 @@ export function CardReason(props: {
   } else if (reason === 'reposted' && repost) {
     return (
       <Tooltip text={'Reposted by ' + repost.user_name}>
-        <Row className={'text-ink-400 gap-1 text-sm'}>
+        <Row className={clsx('text-ink-400 gap-1 text-sm', className)}>
           <BiRepost className={'text-ink-400 h-5 w-5'} />
           <UserHovercard userId={repost.user_id}>
             <UserLink

diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx
@@ -314,7 +314,6 @@ export const FeedComment = memo(function FeedComment(props: {
               username={userUsername}
               size={isParent ? 'sm' : '2xs'}
               avatarUrl={userAvatarUrl}
-              className={clsx(marketCreator && 'shadow shadow-amber-300')}
             />
           </UserHovercard>
 
@@ -952,8 +951,10 @@ export function FeedCommentHeader(props: {
   inTimeline?: boolean
   isParent?: boolean
   isPinned?: boolean
+  className?: string
 }) {
-  const { comment, updateComment, contract, inTimeline, isPinned } = props
+  const { comment, updateComment, contract, inTimeline, isPinned, className } =
+    props
   const {
     userUsername,
     userName,
@@ -978,7 +979,7 @@ export function FeedCommentHeader(props: {
   const commenterIsBettor = commenterAndBettorMatch(comment)
   const isLimitBet = betOrderAmount !== undefined && betLimitProb !== undefined
   return (
-    <Col className={clsx('text-ink-600 text-sm')}>
+    <Col className={clsx('text-ink-600 text-sm', className)}>
       <Row className="justify-between">
         <Row className="gap-1">
           <UserHovercard userId={userId}>

diff --git a/web/components/feed/good-comment.tsx b/web/components/feed/good-comment.tsx
@@ -76,7 +76,6 @@ export const GoodComment = memo(function (props: {
                     username={userUsername}
                     size={'sm'}
                     avatarUrl={userAvatarUrl}
-                    className={clsx(marketCreator && 'shadow shadow-amber-300')}
                   />
                 </UserHovercard>
                 <Col>

diff --git a/web/components/feed/scored-feed-repost-item.tsx b/web/components/feed/scored-feed-repost-item.tsx
@@ -46,7 +46,7 @@ export const ScoredFeedRepost = memo(function (props: {
   const commenterIsBettor = bet?.userId === comment.userId
   const creatorRepostedTheirComment = repost.user_id === comment.userId
   const showTopLevelRow =
-    (!commenterIsBettor && bet) || !creatorRepostedTheirComment
+    (!commenterIsBettor && !!bet) || !creatorRepostedTheirComment
   const trackClick = () =>
     track(
       'click market card feed',
@@ -61,7 +61,7 @@ export const ScoredFeedRepost = memo(function (props: {
   return (
     <Col
       className={clsx(
-        'bg-canvas-0 ring- ring-primary-200 group rounded-lg py-2',
+        'bg-canvas-0 ring- ring-primary-200 group rounded-lg p-4',
         hoveringChildContract ? '' : 'hover:ring-1'
       )}
     >
@@ -71,73 +71,35 @@ export const ScoredFeedRepost = memo(function (props: {
           router.push(`${contractPath(contract)}#${comment.id}`)
         }}
       >
-        {showTopLevelRow && creatorRepostedTheirComment ? (
-          <Row className="justify-between pr-2">
-            {bet && (
-              <CommentReplyHeaderWithBet
-                comment={comment}
-                contract={contract}
-                bet={bet}
-              />
-            )}
-            <FeedDropdown
-              contract={contract}
-              itemCreatorId={repost.user_id}
-              interesting={true}
-              toggleInteresting={hide}
-              importanceScore={props.contract.importanceScore}
-            />
-          </Row>
-        ) : (
-          showTopLevelRow &&
-          !creatorRepostedTheirComment && (
-            <Col>
-              <Row className={'mb-1 justify-end gap-1 pr-2'}>
-                <CardReason repost={repost} reason={'reposted'} />
-                <FeedDropdown
-                  contract={contract}
-                  itemCreatorId={repost.user_id}
-                  interesting={true}
-                  toggleInteresting={hide}
-                  importanceScore={props.contract.importanceScore}
-                />
-              </Row>
-              {!commenterIsBettor && bet && (
-                <CommentReplyHeaderWithBet
-                  comment={comment}
-                  contract={contract}
-                  bet={bet}
-                />
-              )}
-            </Col>
-          )
-        )}
-        <Row className={'w-full gap-2'}>
+        <RepostLabel
+          showTopLevelRow={showTopLevelRow}
+          creatorRepostedTheirComment={creatorRepostedTheirComment}
+          bet={bet}
+          comment={comment}
+          contract={contract}
+          hide={hide}
+          commenterIsBettor={commenterIsBettor}
+          repost={repost}
+        />
+        <Col className={'w-full gap-2'}>
           <Col className={'w-full pl-1 pr-2  transition-colors'}>
-            <Row className="justify-between gap-2">
-              <Row className="gap-2">
+            <Row className="w-full items-center justify-between">
+              <Row className="min-w-0 flex-shrink items-center gap-1 overflow-hidden">
                 <UserHovercard userId={userId}>
                   <Avatar
                     username={userUsername}
-                    size={'sm'}
+                    size={'xs'}
                     avatarUrl={userAvatarUrl}
-                    className={clsx(marketCreator && 'shadow shadow-amber-300')}
                   />
                 </UserHovercard>
-                <Col>
+                <div className="min-w-0 flex-1 overflow-hidden">
                   <FeedCommentHeader
                     comment={comment}
                     contract={contract}
                     inTimeline={true}
+                    className="truncate"
                   />
-                  <CollapsibleContent
-                    mediaSize={'md'}
-                    content={comment.content}
-                    defaultCollapse={true}
-                    stateKey={'collapse-repost-' + repost.id + contract.id}
-                    showMorePlacement={'bottom'}
-                  />
-                </Col>
+                </div>
               </Row>
               {(commenterIsBettor || !bet) && !showTopLevelRow && (
                 <Row className={' justify-end gap-2'}>
@@ -151,35 +113,109 @@ export const ScoredFeedRepost = memo(function (props: {
                 </Row>
               )}
             </Row>
-            <Col
-              className={'ml-6 mt-2'}
-              onMouseEnter={() => setHoveringChildContract(true)}
-              onMouseLeave={() => setHoveringChildContract(false)}
-            >
-              <FeedContractCard
-                contract={contract}
-                trackingPostfix="feed"
-                className="ring-ink-100 dark:ring-ink-300 hover:ring-primary-200 dark:hover:ring-primary-200 max-w-full pb-2 ring-1 "
-                hideBottomRow={true}
-                size={'xs'}
-              />
-            </Col>
-            <Col>
-              <BottomActionRow
-                className={'ml-4'}
-                contract={contract}
-                user={user}
-                comment={comment}
-                privateUser={privateUser}
-              />
-            </Col>
+            <CollapsibleContent
+              mediaSize={'md'}
+              content={comment.content}
+              defaultCollapse={true}
+              stateKey={'collapse-repost-' + repost.id + contract.id}
+              showMorePlacement={'bottom'}
+            />
           </Col>
-        </Row>
+          <Col
+            onMouseEnter={() => setHoveringChildContract(true)}
+            onMouseLeave={() => setHoveringChildContract(false)}
+          >
+            <FeedContractCard
+              contract={contract}
+              trackingPostfix="feed"
+              className="ring-ink-100 dark:ring-ink-300 hover:ring-primary-200 dark:hover:ring-primary-200 max-w-full pb-2 ring-1 "
+              hideBottomRow={true}
+              size={'xs'}
+            />
+          </Col>
+          <BottomActionRow
+            className={'ml-4'}
+            contract={contract}
+            user={user}
+            comment={comment}
+            privateUser={privateUser}
+          />
+        </Col>
       </ClickFrame>
     </Col>
   )
 })
 
+function RepostLabel(props: {
+  showTopLevelRow: boolean
+  creatorRepostedTheirComment: boolean
+  bet?: Bet
+  comment: ContractComment
+  contract: Contract
+  hide: () => void
+  commenterIsBettor: boolean
+  repost: Repost
+}) {
+  const {
+    showTopLevelRow,
+    creatorRepostedTheirComment,
+    bet,
+    comment,
+    contract,
+    hide,
+    commenterIsBettor,
+    repost,
+  } = props
+  if (showTopLevelRow && creatorRepostedTheirComment)
+    return (
+      <Row className="grow-x bg-canvas-100/50 -mx-4 -mt-4 mb-3 rounded-t-lg px-4 pb-1 pt-2">
+        {bet && (
+          <CommentReplyHeaderWithBet
+            comment={comment}
+            contract={contract}
+            bet={bet}
+          />
+        )}
+        <FeedDropdown
+          contract={contract}
+          itemCreatorId={repost.user_id}
+          interesting={true}
+          toggleInteresting={hide}
+          importanceScore={props.contract.importanceScore}
+        />
+      </Row>
+    )
+
+  if (showTopLevelRow && !creatorRepostedTheirComment) {
+    return (
+      <Col className="grow-x bg-canvas-100/50 -mx-4 -mt-4 mb-3 rounded-t-lg px-4 pb-1 pt-2">
+        <Row className={'mb-1 w-full justify-between gap-1'}>
+          <CardReason
+            repost={repost}
+            reason={'reposted'}
+            className="text-ink-600"
+          />
+          <FeedDropdown
+            contract={contract}
+            itemCreatorId={repost.user_id}
+            interesting={true}
+            toggleInteresting={hide}
+            importanceScore={props.contract.importanceScore}
+          />
+        </Row>
+        {!commenterIsBettor && bet && (
+          <CommentReplyHeaderWithBet
+            comment={comment}
+            contract={contract}
+            bet={bet}
+          />
+        )}
+      </Col>
+    )
+  }
+  return <></>
+}
+
 export const BottomActionRow = (props: {
   contract: Contract
   comment: ContractComment