WIP: When there's no matching question, create a new contract

web/components/editor/mention-list.tsx

@@ -1,13 +1,19 @@
 import { SuggestionProps } from '@tiptap/suggestion'
 import clsx from 'clsx'
 import { Contract } from 'common/contract'
+import { FIXED_ANTE } from 'common/economy'
+import { formatMoney } from 'common/util/format'
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import { useUser } from 'web/hooks/use-user'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { Avatar } from '../avatar'
+import { Col } from '../layout/col'
+import { Row } from '../layout/row'
 
 // copied from https://tiptap.dev/api/nodes/mention#usage
 const M = forwardRef((props: SuggestionProps<Contract>, ref) => {
-  const { items: contracts, command } = props
+  const { items: contracts, command, query } = props
+  const user = useUser()
 
   const [selectedIndex, setSelectedIndex] = useState(0)
   useEffect(() => setSelectedIndex(0), [contracts])
@@ -18,9 +24,24 @@ const M = forwardRef((props: SuggestionProps<Contract>, ref) => {
       command({ id: contract.id, label: contractPath(contract) } as any)
   }
 
+  const createOptions = [
+    {
+      text: `Create yes/no`,
+      // TODO: Get these commmands to work
+      onClick: () => command({ id: 'new', label: 'new' } as any),
+    },
+    {
+      text: `Create free response`,
+      onClick: () => command({ id: 'new', label: 'new' } as any),
+    },
+  ]
+
+  const choiceLength =
+    contracts.length > 0 ? contracts.length : createOptions.length
+
   const onUp = () =>
-    setSelectedIndex((i) => (i + contracts.length - 1) % contracts.length)
+    setSelectedIndex((i) => (i + choiceLength - 1) % choiceLength)
-  const onDown = () => setSelectedIndex((i) => (i + 1) % contracts.length)
+  const onDown = () => setSelectedIndex((i) => (i + 1) % choiceLength)
   const onEnter = () => submitUser(selectedIndex)
 
   useImperativeHandle(ref, () => ({
@@ -44,7 +65,29 @@ const M = forwardRef((props: SuggestionProps<Contract>, ref) => {
   return (
     <div className="w-42 absolute z-10 overflow-x-hidden rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
       {!contracts.length ? (
-        <span className="m-1 whitespace-nowrap">No results...</span>
+        <Col>
+          <Row className="mx-2 my-1 gap-2 text-gray-500">
+            <Avatar avatarUrl={user?.avatarUrl} size="xs" /> <div>{query}</div>
+          </Row>
+
+          {createOptions.map((option, i) => (
+            <button
+              className={clsx(
+                'flex h-8 w-full cursor-pointer select-none items-center gap-2 truncate px-4 hover:bg-indigo-200',
+                selectedIndex == i
+                  ? 'bg-indigo-500 text-white'
+                  : 'text-gray-900'
+              )}
+              onClick={option.onClick}
+              key={option.text}
+            >
+              {option.text}
+              <span className="inline-flex items-center rounded bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800">
+                {formatMoney(FIXED_ANTE)}
+              </span>
+            </button>
+          ))}
+        </Col>
       ) : (
         contracts.map((contract, i) => (
           <button