Append tags from market page

firestore.rules

@@ -21,7 +21,7 @@ service cloud.firestore {
 
     match /contracts/{contractId} {
       allow read;
-      allow update: if resource.data.creatorId == request.auth.uid && request.resource.data.diff(resource.data).affectedKeys()
+      allow update: if request.resource.data.diff(resource.data).affectedKeys()
         .hasOnly(['description', 'tags', 'lowercaseTags']);
       allow delete: if resource.data.creatorId == request.auth.uid;
     }

web/components/contract-card.tsx

@@ -194,13 +194,6 @@ export function ContractDetails(props: { contract: Contract }) {
         <div className="">•</div>
         <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
       </Row>
-
-      {tags.length > 0 && (
-        <>
-          <div className="hidden sm:block">•</div>
-          <CompactTagsList tags={tags} />
-        </>
-      )}
     </Col>
   )
 }

web/components/contract-overview.tsx

@@ -17,6 +17,7 @@ import { ContractFeed } from './contract-feed'
 import { TweetButton } from './tweet-button'
 import { Bet } from '../../common/bet'
 import { Comment } from '../../common/comment'
+import { TagsInput } from './tags-input'
 
 export const ContractOverview = (props: {
   contract: Contract
@@ -58,7 +59,6 @@ export const ContractOverview = (props: {
           />
 
           <ContractDetails contract={contract} />
-          <TweetButton className="self-end md:hidden" tweetText={tweetText} />
         </Col>
 
         <Col className="hidden md:flex justify-between items-end">
@@ -68,7 +68,6 @@ export const ContractOverview = (props: {
             probPercent={probPercent}
             large
           />
-          <TweetButton className="mt-6" tweetText={tweetText} />
         </Col>
       </Row>
 
@@ -76,6 +75,11 @@ export const ContractOverview = (props: {
 
       <ContractProbGraph contract={contract} />
 
+      <Row className="justify-between mt-6 ml-4 gap-4">
+        <TagsInput contract={contract} />
+        <TweetButton tweetText={tweetText} />
+      </Row>
+
       <Spacer h={12} />
 
       {/* Show a delete button for contracts without any trading */}

web/components/tags-input.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+import { parseWordsAsTags } from '../../common/util/parse'
+import { Contract, updateContract } from '../lib/firebase/contracts'
+import { Row } from './layout/row'
+import { TagsList } from './tags-list'
+
+export function TagsInput(props: { contract: Contract }) {
+  const { contract } = props
+  const { tags } = contract
+
+  const [tagText, setTagText] = useState('')
+  const newTags = parseWordsAsTags(`${tags.join(' ')} ${tagText}`)
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const updateTags = () => {
+    setIsSubmitting(true)
+    updateContract(contract.id, {
+      tags: newTags,
+      lowercaseTags: newTags.map((tag) => tag.toLowerCase()),
+    })
+    setIsSubmitting(false)
+    setTagText('')
+  }
+
+  return (
+    <Row className="flex-wrap gap-4">
+      <TagsList tags={newTags.map((tag) => `#${tag}`)} />
+
+      <Row className="items-center gap-4">
+        <input
+          style={{ maxWidth: 150 }}
+          placeholder="Type a tag..."
+          className="input input-sm input-bordered resize-none"
+          disabled={isSubmitting}
+          value={tagText}
+          onChange={(e) => setTagText(e.target.value || '')}
+        />
+        <button className="btn btn-xs btn-outline" onClick={updateTags}>
+          Save tags
+        </button>
+      </Row>
+    </Row>
+  )
+}