Show tags in contract details.

web/components/contract-card.tsx

@@ -6,10 +6,11 @@ import { UserLink } from './user-page'
 import { Linkify } from './linkify'
 import { Contract, compute, path } from '../lib/firebase/contracts'
 import { Col } from './layout/col'
+import { parseTags } from '../lib/util/parse'
 
 export function ContractCard(props: { contract: Contract }) {
   const { contract } = props
-  const { resolution } = contract
+  const { question, resolution } = contract
   const { probPercent } = compute(contract)
 
   return (
@@ -19,9 +20,7 @@ export function ContractCard(props: { contract: Contract }) {
           <div className="card">
             <div className="card-body p-6">
               <Row className="justify-between gap-4 mb-2">
-                <p className="font-medium text-indigo-700">
+                <p className="font-medium text-indigo-700">{question}</p>
-                  <Linkify text={contract.question} />
-                </p>
                 <ResolutionOrChance
                   className="items-center"
                   resolution={resolution}
@@ -86,21 +85,44 @@ export function ResolutionOrChance(props: {
   )
 }
 
-export function ContractDetails(props: { contract: Contract }) {
+export function ContractDetails(props: {
-  const { contract } = props
+  contract: Contract
+  inlineTags?: boolean
+}) {
+  const { contract, inlineTags } = props
+  const { question, description } = contract
   const { truePool, createdDate, resolvedDate } = compute(contract)
 
+  const tags = parseTags(`${question} ${description}`).map((tag) => `#${tag}`)
+
   return (
-    <Row className="flex-wrap text-sm text-gray-500">
+    <Col
-      <div className="whitespace-nowrap">
+      className={clsx(
-        <UserLink username={contract.creatorUsername} />
+        'text-sm text-gray-500 gap-2',
-      </div>
+        inlineTags && 'sm:flex-row sm:flex-wrap'
-      <div className="mx-2">•</div>
+      )}
-      <div className="whitespace-nowrap">
+    >
-        {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
+      <Row className="gap-2 flex-wrap">
-      </div>
+        <div className="whitespace-nowrap">
-      <div className="mx-2">•</div>
+          <UserLink username={contract.creatorUsername} />
-      <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
+        </div>
-    </Row>
+        <div className="">•</div>
+        <div className="whitespace-nowrap">
+          {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
+        </div>
+        <div className="">•</div>
+        <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
+      </Row>
+
+      {inlineTags && <div className="hidden sm:block">•</div>}
+
+      <Row className="gap-2 flex-wrap">
+        {tags.map((tag) => (
+          <div className="bg-gray-100 px-1">
+            <Linkify text={tag} gray />
+          </div>
+        ))}
+      </Row>
+    </Col>
   )
 }

web/components/contract-overview.tsx

@@ -67,7 +67,7 @@ export const ContractOverview = (props: {
             large
           />
 
-          <ContractDetails contract={contract} />
+          <ContractDetails contract={contract} inlineTags />
         </Col>
 
         <ResolutionOrChance

web/components/linkify.tsx

@@ -2,8 +2,8 @@ import { Fragment } from 'react'
 import { SiteLink } from './site-link'
 
 // Return a JSX span, linkifying @username, #hashtags, and https://...
-export function Linkify(props: { text: string }) {
+export function Linkify(props: { text: string; gray?: boolean }) {
-  const { text } = props
+  const { text, gray } = props
   const regex = /(?:^|\s)(?:[@#][a-z0-9_]+|https?:\/\/\S+)/gi
   const matches = text.match(regex) || []
   const links = matches.map((match) => {
@@ -20,7 +20,10 @@ export function Linkify(props: { text: string }) {
     return (
       <>
         {whitespace}
-        <SiteLink className="text-indigo-700" href={href}>
+        <SiteLink
+          className={gray ? 'text-gray-500' : 'text-indigo-700'}
+          href={href}
+        >
           {symbol}
           {tag}
         </SiteLink>

web/components/tweet-button.tsx

@@ -4,7 +4,7 @@ export function TweetButton(props: { tweetText?: string }) {
   return (
     <a
       className="twitter-share-button"
-      href={`https://twitter.com/intent/tweet?text=${encodeURI(
+      href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
         tweetText ?? ''
       )}`}
       data-size="large"