Make %mentions actually look like mentions (#993)

* Make contract mentions inline text

* Add tooltip for author, close time, volume

* Make pill wider

web/components/contract/contract-mention.tsx

@@ -0,0 +1,54 @@
+import clsx from 'clsx'
+import { Contract } from 'common/contract'
+import { formatMoney } from 'common/util/format'
+import Link from 'next/link'
+import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
+import { fromNow } from 'web/lib/util/time'
+import { BinaryContractOutcomeLabel } from '../outcome-label'
+import { getColor } from './quick-bet'
+
+export function ContractMention(props: { contract: Contract }) {
+  const { contract } = props
+  const { outcomeType, resolution } = contract
+  const probTextColor = `text-${getColor(contract)}`
+
+  return (
+    <Link href={contractPath(contract)}>
+      <a
+        className="group inline whitespace-nowrap rounded-sm hover:bg-indigo-50 focus:bg-indigo-50"
+        title={tooltipLabel(contract)}
+      >
+        <span className="break-anywhere mr-0.5 whitespace-normal font-normal text-indigo-700">
+          {contract.question}
+        </span>
+        {outcomeType === 'BINARY' && (
+          <span
+            className={clsx(
+              probTextColor,
+              'rounded-full px-2 font-semibold ring-1 ring-inset ring-indigo-100 group-hover:ring-indigo-200'
+            )}
+          >
+            {resolution ? (
+              <BinaryContractOutcomeLabel
+                contract={contract}
+                resolution={resolution}
+              />
+            ) : (
+              getBinaryProbPercent(contract)
+            )}
+          </span>
+        )}
+        {/* TODO: numeric? */}
+      </a>
+    </Link>
+  )
+}
+
+function tooltipLabel(contract: Contract) {
+  const { resolutionTime, creatorName, volume, closeTime = 0 } = contract
+  const dateFormat = resolutionTime
+    ? `Resolved ${fromNow(resolutionTime)}`
+    : `${closeTime < Date.now() ? 'Closed' : 'Closes'} ${fromNow(closeTime)}`
+
+  return `By ${creatorName}. ${formatMoney(volume)} bet. ${dateFormat}`
+}

web/components/editor/contract-mention.tsx

@@ -6,7 +6,7 @@ import {
 } from '@tiptap/react'
 import clsx from 'clsx'
 import { useContract } from 'web/hooks/use-contract'
-import { ContractCard } from '../contract/contract-card'
+import { ContractMention } from '../contract/contract-mention'
 
 const name = 'contract-mention-component'
 
@@ -14,13 +14,8 @@ const ContractMentionComponent = (props: any) => {
   const contract = useContract(props.node.attrs.id)
 
   return (
-    <NodeViewWrapper className={clsx(name, 'not-prose')}>
-      {contract && (
-        <ContractCard
-          contract={contract}
-          className="my-2 w-full border border-gray-100"
-        />
-      )}
+    <NodeViewWrapper className={clsx(name, 'not-prose inline')}>
+      {contract && <ContractMention contract={contract} />}
     </NodeViewWrapper>
   )
 }
@@ -37,6 +32,5 @@ export const DisplayContractMention = Mention.extend({
   addNodeView: () =>
     ReactNodeViewRenderer(ContractMentionComponent, {
       // On desktop, render cards below half-width so you can stack two
-      className: 'inline-block sm:w-[calc(50%-1rem)] sm:mr-1',
     }),
 })