Enable url linking to comments and a copy to clipboard function [wip] (#239)

* Link to comments & highlight comment

* Copy link, show toast and fade bg

* Remove unused imports

* Standardize link copied toast

* Add linking to answer comment threads

* Refactor open answers component, use indigo highlight

* Distinguish chosen answer a bit more

web/components/answers/answer-item.tsx

@@ -46,7 +46,7 @@ export function AnswerItem(props: {
         wasResolvedTo
           ? resolution === 'MKT'
             ? 'mb-2 bg-blue-50'
-            : 'mb-8 bg-green-50'
+            : 'mb-10 bg-green-50'
           : chosenProb === undefined
           ? 'bg-gray-50'
           : showChoice === 'radio'

web/components/answers/answers-panel.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { useLayoutEffect, useState } from 'react'
+import React, { useLayoutEffect, useState } from 'react'
 
 import { DPM, FreeResponse, FullContract } from 'common/contract'
 import { Col } from '../layout/col'
@@ -11,11 +11,19 @@ import { AnswerItem } from './answer-item'
 import { CreateAnswerPanel } from './create-answer-panel'
 import { AnswerResolvePanel } from './answer-resolve-panel'
 import { Spacer } from '../layout/spacer'
-import { FeedItems } from '../feed/feed-items'
 import { ActivityItem } from '../feed/activity-items'
 import { User } from 'common/user'
 import { getOutcomeProbability } from 'common/calculate'
 import { Answer } from 'common/answer'
+import clsx from 'clsx'
+import { formatPercent } from 'common/util/format'
+import { Modal } from 'web/components/layout/modal'
+import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel'
+import { Row } from 'web/components/layout/row'
+import { Avatar } from 'web/components/avatar'
+import { UserLink } from 'web/components/user-page'
+import { Linkify } from 'web/components/linkify'
+import { BuyButton } from 'web/components/yes-no-selector'
 
 export function AnswersPanel(props: {
   contract: FullContract<DPM, FreeResponse>
@@ -108,12 +116,17 @@ export function AnswersPanel(props: {
         ))}
 
       {!resolveOption && (
-        <FeedItems
+        <div className={clsx('flow-root pr-2 md:pr-0')}>
-          contract={contract}
+          <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
-          items={answerItems}
+            {answerItems.map((item, activityItemIdx) => (
-          className={'pr-2 md:pr-0'}
+              <div key={item.id} className={'relative pb-2'}>
-          betRowClassName={''}
+                <div className="relative flex items-start space-x-3">
-        />
+                  <OpenAnswer {...item} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
       )}
 
       {answers.length <= 1 && (
@@ -167,3 +180,72 @@ function getAnswerItems(
     })
     .filter((group) => group.answer)
 }
+
+function OpenAnswer(props: {
+  contract: FullContract<any, FreeResponse>
+  answer: Answer
+  items: ActivityItem[]
+  type: string
+}) {
+  const { answer, contract } = props
+  const { username, avatarUrl, name, text } = answer
+  const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
+  const probPercent = formatPercent(prob)
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Col className={'border-base-200 bg-base-200 flex-1 rounded-md px-2'}>
+      <Modal open={open} setOpen={setOpen}>
+        <AnswerBetPanel
+          answer={answer}
+          contract={contract}
+          closePanel={() => setOpen(false)}
+          className="sm:max-w-84 !rounded-md bg-white !px-8 !py-6"
+          isModal={true}
+        />
+      </Modal>
+
+      <div
+        className="pointer-events-none absolute -mx-2 h-full rounded-tl-md bg-green-600 bg-opacity-10"
+        style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
+      />
+
+      <Row className="my-4 gap-3">
+        <div className="px-1">
+          <Avatar username={username} avatarUrl={avatarUrl} />
+        </div>
+        <Col className="min-w-0 flex-1 lg:gap-1">
+          <div className="text-sm text-gray-500">
+            <UserLink username={username} name={name} /> answered
+          </div>
+
+          <Col className="align-items justify-between gap-4 sm:flex-row">
+            <span className="whitespace-pre-line text-lg">
+              <Linkify text={text} />
+            </span>
+
+            <Row className="items-center justify-center gap-4">
+              <div className={'align-items flex w-full justify-end gap-4 '}>
+                <span
+                  className={clsx(
+                    'text-2xl',
+                    tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
+                  )}
+                >
+                  {probPercent}
+                </span>
+                <BuyButton
+                  className={clsx(
+                    'btn-sm flex-initial !px-6 sm:flex',
+                    tradingAllowed(contract) ? '' : '!hidden'
+                  )}
+                  onClick={() => setOpen(true)}
+                />
+              </div>
+            </Row>
+          </Col>
+        </Col>
+      </Row>
+    </Col>
+  )
+}

web/components/contract/contract-info-dialog.tsx

@@ -49,12 +49,15 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
           <div>Share</div>
 
           <Row className="justify-start gap-4">
-            <CopyLinkButton contract={contract} />
+            <CopyLinkButton
+              contract={contract}
+              toastClassName={'sm:-left-10 -left-4 min-w-[250%]'}
+            />
             <TweetButton
               className="self-start"
               tweetText={getTweetText(contract, false)}
             />
-            <ShareEmbedButton contract={contract} />
+            <ShareEmbedButton contract={contract} toastClassName={'-left-20'} />
           </Row>
           <div />
 

web/components/copy-link-button.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import React, { Fragment } from 'react'
 import { LinkIcon } from '@heroicons/react/outline'
 import { Menu, Transition } from '@headlessui/react'
 import clsx from 'clsx'
@@ -6,6 +6,7 @@ import { Contract } from 'common/contract'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { ENV_CONFIG } from 'common/envs/constants'
+import { ToastClipboard } from 'web/components/toast-clipboard'
 
 function copyContractUrl(contract: Contract) {
   copyToClipboard(`https://${ENV_CONFIG.domain}${contractPath(contract)}`)
@@ -14,8 +15,9 @@ function copyContractUrl(contract: Contract) {
 export function CopyLinkButton(props: {
   contract: Contract
   buttonClassName?: string
+  toastClassName?: string
 }) {
-  const { contract, buttonClassName } = props
+  const { contract, buttonClassName, toastClassName } = props
 
   return (
     <Menu
@@ -42,9 +44,9 @@ export function CopyLinkButton(props: {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="origin-top-center absolute left-0 mt-2 w-40 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items>
           <Menu.Item>
-            <div className="px-2 py-1">Link copied!</div>
+            <ToastClipboard className={toastClassName} />
           </Menu.Item>
         </Menu.Items>
       </Transition>

web/components/feed/activity-items.ts

@@ -72,7 +72,7 @@ export type BetGroupItem = BaseActivityItem & {
 }
 
 export type AnswerGroupItem = BaseActivityItem & {
-  type: 'answergroup' | 'answer'
+  type: 'answergroup'
   answer: Answer
   items: ActivityItem[]
   betsByCurrentUser?: Bet[]

web/components/feed/copy-link-date-time.tsx

@@ -0,0 +1,61 @@
+import { Contract } from 'common/contract'
+import React, { useState } from 'react'
+import { ENV_CONFIG } from 'common/envs/constants'
+import { contractPath } from 'web/lib/firebase/contracts'
+import { copyToClipboard } from 'web/lib/util/copy'
+import { DateTimeTooltip } from 'web/components/datetime-tooltip'
+import Link from 'next/link'
+import { fromNow } from 'web/lib/util/time'
+import { ToastClipboard } from 'web/components/toast-clipboard'
+import { LinkIcon } from '@heroicons/react/outline'
+
+export function CopyLinkDateTimeComponent(props: {
+  contract: Contract
+  createdTime: number
+  elementId: string
+}) {
+  const { contract, elementId, createdTime } = props
+  const [showToast, setShowToast] = useState(false)
+
+  function copyLinkToComment(
+    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  ) {
+    event.preventDefault()
+
+    let currentLocation = window.location.href.includes('/home?u=')
+      ? `https://${ENV_CONFIG.domain}${contractPath(contract)}#${elementId}`
+      : window.location.href
+    if (currentLocation.includes('#')) {
+      currentLocation = currentLocation.split('#')[0]
+    }
+    copyToClipboard(`${currentLocation}#${elementId}`)
+    setShowToast(true)
+    setTimeout(() => setShowToast(false), 2000)
+  }
+  return (
+    <>
+      <DateTimeTooltip time={createdTime}>
+        <Link
+          href={`/${contract.creatorUsername}/${contract.slug}#${elementId}`}
+          passHref={true}
+        >
+          <a
+            onClick={(event) => copyLinkToComment(event)}
+            className={'mx-1 cursor-pointer'}
+          >
+            <span className="whitespace-nowrap rounded-sm px-1 text-gray-400 hover:bg-gray-100 ">
+              {fromNow(createdTime)}
+              {showToast && (
+                <ToastClipboard className={'left-24 sm:-left-16'} />
+              )}
+              <LinkIcon
+                className="ml-1 mb-0.5 inline-block text-gray-400"
+                height={13}
+              />
+            </span>
+          </a>
+        </Link>
+      </DateTimeTooltip>
+    </>
+  )
+}

web/components/feed/feed-answer-comment-group.tsx

@@ -0,0 +1,186 @@
+import { FreeResponse, FullContract } from 'common/contract'
+import { Answer } from 'common/answer'
+import { ActivityItem } from 'web/components/feed/activity-items'
+import { Bet } from 'common/bet'
+import { Comment } from 'common/comment'
+import { useUser } from 'web/hooks/use-user'
+import { getDpmOutcomeProbability } from 'common/calculate-dpm'
+import { formatPercent } from 'common/util/format'
+import React, { useEffect, useState } from 'react'
+import { Col } from 'web/components/layout/col'
+import { Modal } from 'web/components/layout/modal'
+import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel'
+import { Row } from 'web/components/layout/row'
+import { Avatar } from 'web/components/avatar'
+import { UserLink } from 'web/components/user-page'
+import { Linkify } from 'web/components/linkify'
+import clsx from 'clsx'
+import { tradingAllowed } from 'web/lib/firebase/contracts'
+import { BuyButton } from 'web/components/yes-no-selector'
+import { CommentInput, FeedItem } from 'web/components/feed/feed-items'
+import { getMostRecentCommentableBet } from 'web/components/feed/feed-comments'
+import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
+import { useRouter } from 'next/router'
+
+export function FeedAnswerCommentGroup(props: {
+  contract: FullContract<any, FreeResponse>
+  answer: Answer
+  items: ActivityItem[]
+  type: string
+  betsByCurrentUser?: Bet[]
+  comments?: Comment[]
+}) {
+  const { answer, items, contract, betsByCurrentUser, comments } = props
+  const { username, avatarUrl, name, text } = answer
+  const answerElementId = `answer-${answer.id}`
+  const user = useUser()
+  const mostRecentCommentableBet = getMostRecentCommentableBet(
+    betsByCurrentUser ?? [],
+    comments ?? [],
+    user,
+    answer.number + ''
+  )
+  const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
+  const probPercent = formatPercent(prob)
+  const [open, setOpen] = useState(false)
+  const [showReply, setShowReply] = useState(false)
+  const isFreeResponseContractPage = comments
+  if (mostRecentCommentableBet && !showReply) setShowReplyAndFocus(true)
+  const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
+
+  // If they've already opened the input box, focus it once again
+  function setShowReplyAndFocus(show: boolean) {
+    setShowReply(show)
+    inputRef?.focus()
+  }
+
+  useEffect(() => {
+    if (showReply && inputRef) inputRef.focus()
+  }, [inputRef, showReply])
+
+  const [highlighted, setHighlighted] = useState(false)
+  const router = useRouter()
+  useEffect(() => {
+    if (router.asPath.includes(`#${answerElementId}`)) {
+      setHighlighted(true)
+    }
+  }, [router.asPath])
+
+  return (
+    <Col className={'flex-1 gap-2'}>
+      <Modal open={open} setOpen={setOpen}>
+        <AnswerBetPanel
+          answer={answer}
+          contract={contract}
+          closePanel={() => setOpen(false)}
+          className="sm:max-w-84 !rounded-md bg-white !px-8 !py-6"
+          isModal={true}
+        />
+      </Modal>
+
+      <Row
+        className={clsx(
+          'my-4 flex gap-3 space-x-3 transition-all duration-1000',
+          highlighted ? `-m-2 my-3 rounded bg-indigo-500/[0.2] p-2` : ''
+        )}
+        id={answerElementId}
+      >
+        <div className="px-1">
+          <Avatar username={username} avatarUrl={avatarUrl} />
+        </div>
+        <Col className="min-w-0 flex-1 lg:gap-1">
+          <div className="text-sm text-gray-500">
+            <UserLink username={username} name={name} /> answered
+            <CopyLinkDateTimeComponent
+              contract={contract}
+              createdTime={answer.createdTime}
+              elementId={answerElementId}
+            />
+          </div>
+
+          <Col className="align-items justify-between gap-4 sm:flex-row">
+            <span className="whitespace-pre-line text-lg">
+              <Linkify text={text} />
+            </span>
+
+            <Row className="items-center justify-center gap-4">
+              {isFreeResponseContractPage && (
+                <div className={'sm:hidden'}>
+                  <button
+                    className={
+                      'text-xs font-bold text-gray-500 hover:underline'
+                    }
+                    onClick={() => setShowReplyAndFocus(true)}
+                  >
+                    Reply
+                  </button>
+                </div>
+              )}
+
+              <div className={'align-items flex w-full justify-end gap-4 '}>
+                <span
+                  className={clsx(
+                    'text-2xl',
+                    tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
+                  )}
+                >
+                  {probPercent}
+                </span>
+                <BuyButton
+                  className={clsx(
+                    'btn-sm flex-initial !px-6 sm:flex',
+                    tradingAllowed(contract) ? '' : '!hidden'
+                  )}
+                  onClick={() => setOpen(true)}
+                />
+              </div>
+            </Row>
+          </Col>
+          {isFreeResponseContractPage && (
+            <div className={'justify-initial hidden sm:block'}>
+              <button
+                className={'text-xs font-bold text-gray-500 hover:underline'}
+                onClick={() => setShowReplyAndFocus(true)}
+              >
+                Reply
+              </button>
+            </div>
+          )}
+        </Col>
+      </Row>
+
+      {items.map((item, index) => (
+        <div
+          key={item.id}
+          className={clsx(
+            'relative ml-8',
+            index !== items.length - 1 && 'pb-4'
+          )}
+        >
+          {index !== items.length - 1 ? (
+            <span
+              className="absolute top-5 left-5 -ml-px h-[calc(100%-1rem)] w-0.5 bg-gray-200"
+              aria-hidden="true"
+            />
+          ) : null}
+          <div className="relative flex items-start space-x-3">
+            <FeedItem item={item} />
+          </div>
+        </div>
+      ))}
+
+      {showReply && (
+        <div className={'ml-8 pt-4'}>
+          <CommentInput
+            contract={contract}
+            betsByCurrentUser={betsByCurrentUser ?? []}
+            comments={comments ?? []}
+            answerOutcome={answer.number + ''}
+            replyToUsername={answer.username}
+            setRef={setInputRef}
+          />
+        </div>
+      )}
+    </Col>
+  )
+}

web/components/feed/feed-comments.tsx

@@ -0,0 +1,38 @@
+import { Bet } from 'common/bet'
+import { Comment } from 'common/comment'
+import { User } from 'common/user'
+import { GENERAL_COMMENTS_OUTCOME_ID } from 'web/components/feed/activity-items'
+
+// TODO: move feed commment and comment thread in here when sinclair confirms they're not working on them rn
+export function getMostRecentCommentableBet(
+  betsByCurrentUser: Bet[],
+  comments: Comment[],
+  user?: User | null,
+  answerOutcome?: string
+) {
+  return betsByCurrentUser
+    .filter((bet) => {
+      if (
+        canCommentOnBet(bet, user) &&
+        // The bet doesn't already have a comment
+        !comments.some((comment) => comment.betId == bet.id)
+      ) {
+        if (!answerOutcome) return true
+        // If we're in free response, don't allow commenting on ante bet
+        return (
+          bet.outcome !== GENERAL_COMMENTS_OUTCOME_ID &&
+          answerOutcome === bet.outcome
+        )
+      }
+      return false
+    })
+    .sort((b1, b2) => b1.createdTime - b2.createdTime)
+    .pop()
+}
+
+function canCommentOnBet(bet: Bet, user?: User | null) {
+  const { userId, createdTime, isRedemption } = bet
+  const isSelf = user?.id === userId
+  // You can comment if your bet was posted in the last hour
+  return !isRedemption && isSelf && Date.now() - createdTime < 60 * 60 * 1000
+}

web/components/feed/feed-items.tsx

@@ -25,7 +25,7 @@ import { useUser } from 'web/hooks/use-user'
 import { Linkify } from '../linkify'
 import { Row } from '../layout/row'
 import { createComment, MAX_COMMENT_LENGTH } from 'web/lib/firebase/comments'
-import { formatMoney, formatPercent } from 'common/util/format'
+import { formatMoney } from 'common/util/format'
 import { Comment } from 'common/comment'
 import { BinaryResolutionOrChance } from '../contract/contract-card'
 import { SiteLink } from '../site-link'
@@ -35,21 +35,20 @@ import { Bet } from 'web/lib/firebase/bets'
 import { JoinSpans } from '../join-spans'
 import BetRow from '../bet-row'
 import { Avatar } from '../avatar'
-import { Answer } from 'common/answer'
+import { ActivityItem } from './activity-items'
-import { ActivityItem, GENERAL_COMMENTS_OUTCOME_ID } from './activity-items'
+import { Binary, CPMM, FullContract } from 'common/contract'
-import { Binary, CPMM, FreeResponse, FullContract } from 'common/contract'
-import { BuyButton } from '../yes-no-selector'
-import { getDpmOutcomeProbability } from 'common/calculate-dpm'
-import { AnswerBetPanel } from '../answers/answer-bet-panel'
 import { useSaveSeenContract } from 'web/hooks/use-seen-contracts'
 import { User } from 'common/user'
-import { Modal } from '../layout/modal'
 import { trackClick } from 'web/lib/firebase/tracking'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { DAY_MS } from 'common/util/time'
 import NewContractBadge from '../new-contract-badge'
 import { RelativeTimestamp } from '../relative-timestamp'
 import { calculateCpmmSale } from 'common/calculate-cpmm'
+import { useRouter } from 'next/router'
+import { FeedAnswerCommentGroup } from 'web/components/feed/feed-answer-comment-group'
+import { getMostRecentCommentableBet } from 'web/components/feed/feed-comments'
+import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 
 export function FeedItems(props: {
   contract: Contract
@@ -67,12 +66,7 @@ export function FeedItems(props: {
     <div className={clsx('flow-root', className)} ref={ref}>
       <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
         {items.map((item, activityItemIdx) => (
-          <div
+          <div key={item.id} className={'relative pb-6'}>
-            key={item.id}
-            className={
-              item.type === 'answer' ? 'relative pb-2' : 'relative pb-6'
-            }
-          >
             {activityItemIdx !== items.length - 1 ||
             item.type === 'answergroup' ? (
               <span
@@ -93,7 +87,7 @@ export function FeedItems(props: {
   )
 }
 
-function FeedItem(props: { item: ActivityItem }) {
+export function FeedItem(props: { item: ActivityItem }) {
   const { item } = props
 
   switch (item.type) {
@@ -108,9 +102,7 @@ function FeedItem(props: { item: ActivityItem }) {
     case 'betgroup':
       return <FeedBetGroup {...item} />
     case 'answergroup':
-      return <FeedAnswerGroup {...item} />
+      return <FeedAnswerCommentGroup {...item} />
-    case 'answer':
-      return <FeedAnswerGroup {...item} />
     case 'close':
       return <FeedClose {...item} />
     case 'resolve':
@@ -160,10 +152,7 @@ export function FeedCommentThread(props: {
         <div
           key={comment.id}
           id={comment.id}
-          className={clsx(
+          className={commentIdx === 0 ? '' : 'mt-4 ml-8'}
-            'flex space-x-3',
-            commentIdx === 0 ? '' : 'mt-4 ml-8'
-          )}
         >
           <FeedComment
             contract={contract}
@@ -221,6 +210,14 @@ export function FeedComment(props: {
     money = formatMoney(Math.abs(matchedBet.amount))
   }
 
+  const [highlighted, setHighlighted] = useState(false)
+  const router = useRouter()
+  useEffect(() => {
+    if (router.asPath.includes(`#${comment.id}`)) {
+      setHighlighted(true)
+    }
+  }, [router.asPath])
+
   // Only calculated if they don't have a matching bet
   const { userPosition, userPositionMoney, yesFloorShares, noFloorShares } =
     getBettorsPosition(
@@ -230,7 +227,12 @@ export function FeedComment(props: {
     )
 
   return (
-    <>
+    <Row
+      className={clsx(
+        'flex space-x-3 transition-all duration-1000',
+        highlighted ? `-m-2 rounded bg-indigo-500/[0.2] p-2` : ''
+      )}
+    >
       <Avatar
         className={clsx(smallAvatar && 'ml-1')}
         size={smallAvatar ? 'sm' : undefined}
@@ -271,7 +273,11 @@ export function FeedComment(props: {
               </>
             )}
           </>
-          <RelativeTimestamp time={createdTime} />
+          <CopyLinkDateTimeComponent
+            contract={contract}
+            createdTime={createdTime}
+            elementId={comment.id}
+          />
         </p>
         <TruncatedComment
           comment={text}
@@ -287,7 +293,7 @@ export function FeedComment(props: {
           </button>
         )}
       </div>
-    </>
+    </Row>
   )
 }
 
@@ -687,39 +693,6 @@ export function FeedQuestion(props: {
   )
 }
 
-function getMostRecentCommentableBet(
-  betsByCurrentUser: Bet[],
-  comments: Comment[],
-  user?: User | null,
-  answerOutcome?: string
-) {
-  return betsByCurrentUser
-    .filter((bet) => {
-      if (
-        canCommentOnBet(bet, user) &&
-        // The bet doesn't already have a comment
-        !comments.some((comment) => comment.betId == bet.id)
-      ) {
-        if (!answerOutcome) return true
-        // If we're in free response, don't allow commenting on ante bet
-        return (
-          bet.outcome !== GENERAL_COMMENTS_OUTCOME_ID &&
-          answerOutcome === bet.outcome
-        )
-      }
-      return false
-    })
-    .sort((b1, b2) => b1.createdTime - b2.createdTime)
-    .pop()
-}
-
-function canCommentOnBet(bet: Bet, user?: User | null) {
-  const { userId, createdTime, isRedemption } = bet
-  const isSelf = user?.id === userId
-  // You can comment if your bet was posted in the last hour
-  return !isRedemption && isSelf && Date.now() - createdTime < 60 * 60 * 1000
-}
-
 function FeedDescription(props: { contract: Contract }) {
   const { contract } = props
   const { creatorName, creatorUsername } = contract
@@ -895,161 +868,6 @@ function FeedBetGroup(props: {
   )
 }
 
-function FeedAnswerGroup(props: {
-  contract: FullContract<any, FreeResponse>
-  answer: Answer
-  items: ActivityItem[]
-  type: string
-  betsByCurrentUser?: Bet[]
-  comments?: Comment[]
-}) {
-  const { answer, items, contract, type, betsByCurrentUser, comments } = props
-  const { username, avatarUrl, name, text } = answer
-  const user = useUser()
-  const mostRecentCommentableBet = getMostRecentCommentableBet(
-    betsByCurrentUser ?? [],
-    comments ?? [],
-    user,
-    answer.number + ''
-  )
-  const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
-  const probPercent = formatPercent(prob)
-  const [open, setOpen] = useState(false)
-  const [showReply, setShowReply] = useState(false)
-  const isFreeResponseContractPage = type === 'answergroup' && comments
-  if (mostRecentCommentableBet && !showReply) setShowReplyAndFocus(true)
-  const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
-
-  // If they've already opened the input box, focus it once again
-  function setShowReplyAndFocus(show: boolean) {
-    setShowReply(show)
-    inputRef?.focus()
-  }
-
-  useEffect(() => {
-    if (showReply && inputRef) inputRef.focus()
-  }, [inputRef, showReply])
-
-  return (
-    <Col
-      className={
-        type === 'answer'
-          ? 'border-base-200 bg-base-200 flex-1 rounded-md px-2'
-          : 'flex-1 gap-2'
-      }
-    >
-      <Modal open={open} setOpen={setOpen}>
-        <AnswerBetPanel
-          answer={answer}
-          contract={contract}
-          closePanel={() => setOpen(false)}
-          className="sm:max-w-84 !rounded-md bg-white !px-8 !py-6"
-          isModal={true}
-        />
-      </Modal>
-
-      {type == 'answer' && (
-        <div
-          className="pointer-events-none absolute -mx-2 h-full rounded-tl-md bg-green-600 bg-opacity-10"
-          style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
-        ></div>
-      )}
-      <Row className="my-4 gap-3">
-        <div className="px-1">
-          <Avatar username={username} avatarUrl={avatarUrl} />
-        </div>
-        <Col className="min-w-0 flex-1 lg:gap-1">
-          <div className="text-sm text-gray-500">
-            <UserLink username={username} name={name} /> answered
-          </div>
-
-          <Col className="align-items justify-between gap-4 sm:flex-row">
-            <span className="whitespace-pre-line text-lg">
-              <Linkify text={text} />
-            </span>
-
-            <Row className="items-center justify-center gap-4">
-              {isFreeResponseContractPage && (
-                <div className={'sm:hidden'}>
-                  <button
-                    className={
-                      'text-xs font-bold text-gray-500 hover:underline'
-                    }
-                    onClick={() => setShowReplyAndFocus(true)}
-                  >
-                    Reply
-                  </button>
-                </div>
-              )}
-
-              <div className={'align-items flex w-full justify-end gap-4 '}>
-                <span
-                  className={clsx(
-                    'text-2xl',
-                    tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
-                  )}
-                >
-                  {probPercent}
-                </span>
-                <BuyButton
-                  className={clsx(
-                    'btn-sm flex-initial !px-6 sm:flex',
-                    tradingAllowed(contract) ? '' : '!hidden'
-                  )}
-                  onClick={() => setOpen(true)}
-                />
-              </div>
-            </Row>
-          </Col>
-          {isFreeResponseContractPage && (
-            <div className={'justify-initial hidden sm:block'}>
-              <button
-                className={'text-xs font-bold text-gray-500 hover:underline'}
-                onClick={() => setShowReplyAndFocus(true)}
-              >
-                Reply
-              </button>
-            </div>
-          )}
-        </Col>
-      </Row>
-
-      {items.map((item, index) => (
-        <div
-          key={item.id}
-          className={clsx(
-            'relative ml-8',
-            index !== items.length - 1 && 'pb-4'
-          )}
-        >
-          {index !== items.length - 1 ? (
-            <span
-              className="absolute top-5 left-5 -ml-px h-[calc(100%-1rem)] w-0.5 bg-gray-200"
-              aria-hidden="true"
-            />
-          ) : null}
-          <div className="relative flex items-start space-x-3">
-            <FeedItem item={item} />
-          </div>
-        </div>
-      ))}
-
-      {showReply && (
-        <div className={'ml-8 pt-4'}>
-          <CommentInput
-            contract={contract}
-            betsByCurrentUser={betsByCurrentUser ?? []}
-            comments={comments ?? []}
-            answerOutcome={answer.number + ''}
-            replyToUsername={answer.username}
-            setRef={setInputRef}
-          />
-        </div>
-      )}
-    </Col>
-  )
-}
-
 // TODO: Should highlight the entire Feed segment
 function FeedExpand(props: { setExpanded: (expanded: boolean) => void }) {
   const { setExpanded } = props

web/components/layout/row.tsx

@@ -1,7 +1,15 @@
 import clsx from 'clsx'
 
-export function Row(props: { children?: any; className?: string }) {
+export function Row(props: {
-  const { children, className } = props
+  children?: any
+  className?: string
+  id?: string
+}) {
+  const { children, className, id } = props
 
-  return <div className={clsx(className, 'flex flex-row')}>{children}</div>
+  return (
+    <div className={clsx(className, 'flex flex-row')} id={id}>
+      {children}
+    </div>
+  )
 }

web/components/share-embed-button.tsx

@@ -1,10 +1,11 @@
-import { Fragment } from 'react'
+import React, { Fragment } from 'react'
 import { CodeIcon } from '@heroicons/react/outline'
 import { Menu, Transition } from '@headlessui/react'
 import { Contract } from 'common/contract'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { DOMAIN } from 'common/envs/constants'
 import { copyToClipboard } from 'web/lib/util/copy'
+import { ToastClipboard } from 'web/components/toast-clipboard'
 
 function copyEmbedCode(contract: Contract) {
   const title = contract.question
@@ -15,8 +16,11 @@ function copyEmbedCode(contract: Contract) {
   copyToClipboard(embedCode)
 }
 
-export function ShareEmbedButton(props: { contract: Contract }) {
+export function ShareEmbedButton(props: {
-  const { contract } = props
+  contract: Contract
+  toastClassName?: string
+}) {
+  const { contract, toastClassName } = props
 
   return (
     <Menu
@@ -45,9 +49,9 @@ export function ShareEmbedButton(props: { contract: Contract }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="origin-top-center absolute left-0 mt-2 w-40 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items>
           <Menu.Item>
-            <div className="px-2 py-1">Embed code copied!</div>
+            <ToastClipboard className={toastClassName} />
           </Menu.Item>
         </Menu.Items>
       </Transition>

web/components/share-market.tsx

@@ -20,6 +20,7 @@ export function ShareMarket(props: { contract: Contract; className?: string }) {
         <CopyLinkButton
           contract={contract}
           buttonClassName="btn-md rounded-l-none"
+          toastClassName={'-left-28 mt-1'}
         />
       </Row>
     </Col>

web/components/toast-clipboard.tsx

@@ -0,0 +1,21 @@
+import { ClipboardCopyIcon } from '@heroicons/react/outline'
+import React from 'react'
+import clsx from 'clsx'
+import { Row } from 'web/components/layout/row'
+
+export function ToastClipboard(props: { className?: string }) {
+  const { className } = props
+  return (
+    <Row
+      className={clsx(
+        'border-base-300 absolute items-center' +
+          'gap-2 divide-x divide-gray-200 rounded-md border-2 bg-white ' +
+          'h-15 w-[15rem] p-2 pr-3 text-gray-500',
+        className
+      )}
+    >
+      <ClipboardCopyIcon height={20} className={'mr-2 self-center'} />
+      <div className="pl-4 text-sm font-normal">Link copied to clipboard!</div>
+    </Row>
+  )
+}