Initialize folds with one primary tag

web/lib/util/format.ts

@@ -16,3 +16,14 @@ export function formatWithCommas(amount: number) {
 export function formatPercent(zeroToOne: number) {
   return Math.round(zeroToOne * 100) + '%'
 }
+
+export function toCamelCase(words: string) {
+  return words
+    .split(' ')
+    .map((word) => word.trim())
+    .filter((word) => word)
+    .map((word, index) =>
+      index === 0 ? word : word[0].toLocaleUpperCase() + word.substring(1)
+    )
+    .join('')
+}

web/pages/fold/[foldSlug]/edit.tsx

@@ -15,6 +15,7 @@ import {
 } from '../../../lib/firebase/folds'
 import Custom404 from '../../404'
 import { SiteLink } from '../../../components/site-link'
+import { toCamelCase } from '../../../lib/util/format'
 
 export async function getStaticProps(props: { params: { foldSlug: string } }) {
   const { foldSlug } = props.params
@@ -36,20 +37,27 @@ export default function EditFoldPage(props: { fold: Fold | null }) {
   const { fold } = props
 
   const [name, setName] = useState(fold?.name ?? '')
-  const [tags, setTags] = useState(fold?.tags.join(', ') ?? '')
+
+  const initialOtherTags =
+    fold?.tags.filter((tag) => tag !== toCamelCase(name)).join(', ') ?? ''
+
+  const [otherTags, setOtherTags] = useState(initialOtherTags)
   const [isSubmitting, setIsSubmitting] = useState(false)
 
   if (!fold) return <Custom404 />
 
+  const tags = parseWordsAsTags(toCamelCase(name) + ' ' + otherTags)
+
   const saveDisabled =
-    !name ||
+    !name || (name === fold.name && _.isEqual(tags, fold.tags))
-    !tags ||
-    (name === fold.name && _.isEqual(parseWordsAsTags(tags), fold.tags))
 
   const onSubmit = async () => {
     setIsSubmitting(true)
 
-    await updateFold(fold, { name, tags: parseWordsAsTags(tags) })
+    await updateFold(fold, {
+      name,
+      tags,
+    })
 
     setIsSubmitting(false)
   }
@@ -90,16 +98,13 @@ export default function EditFoldPage(props: { fold: Fold | null }) {
               placeholder="Politics, Economics, Rationality"
               className="input input-bordered resize-none"
               disabled={isSubmitting}
-              value={tags}
+              value={otherTags}
-              onChange={(e) => setTags(e.target.value || '')}
+              onChange={(e) => setOtherTags(e.target.value || '')}
             />
           </div>
 
           <Spacer h={4} />
-          <TagsList
+          <TagsList tags={tags.map((tag) => `#${tag}`)} noLink />
-            tags={parseWordsAsTags(tags).map((tag) => `#${tag}`)}
-            noLink
-          />
           <Spacer h={4} />
 
           <button

web/pages/folds.tsx

@@ -17,6 +17,7 @@ import { useUser } from '../hooks/use-user'
 import { createFold } from '../lib/firebase/api-call'
 import { foldPath, listAllFolds } from '../lib/firebase/folds'
 import { getUser, User } from '../lib/firebase/users'
+import { toCamelCase } from '../lib/util/format'
 
 export async function getStaticProps() {
   const folds = await listAllFolds().catch((_) => [])
@@ -80,6 +81,11 @@ function CreateFoldButton() {
 
   const router = useRouter()
 
+  const updateName = (newName: string) => {
+    setName(newName)
+    setTags(toCamelCase(newName))
+  }
+
   const onSubmit = async () => {
     setIsSubmitting(true)
 
@@ -113,8 +119,8 @@ function CreateFoldButton() {
       <Title className="!mt-0" text="Create a fold" />
 
       <Col className="text-gray-500 gap-1">
-        <div>A fold is a view of markets that match selected tags.</div>
+        <div>A fold is a view of markets that match one or more tags.</div>
-        <div>You can further include or exclude individual markets.</div>
+        <div>You can further exclude individual markets.</div>
       </Col>
 
       <Spacer h={4} />
@@ -130,13 +136,13 @@ function CreateFoldButton() {
             className="input input-bordered resize-none"
             disabled={isSubmitting}
             value={name}
-            onChange={(e) => setName(e.target.value || '')}
+            onChange={(e) => updateName(e.target.value || '')}
           />
         </div>
 
         <Spacer h={4} />
 
-        <div className="form-control w-full">
+        {/* <div className="form-control w-full">
           <label className="label">
             <span className="mb-1">Tags</span>
           </label>
@@ -148,13 +154,19 @@ function CreateFoldButton() {
             value={tags}
             onChange={(e) => setTags(e.target.value || '')}
           />
-        </div>
+        </div> */}
 
-        <Spacer h={4} />
+        {tags && (
-        <TagsList
+          <>
-          tags={parseWordsAsTags(tags).map((tag) => `#${tag}`)}
+            <label className="label">
-          noLink
+              <span className="mb-1">Primary tag</span>
-        />
+            </label>
+            <TagsList
+              tags={parseWordsAsTags(tags).map((tag) => `#${tag}`)}
+              noLink
+            />
+          </>
+        )}
       </form>
     </ConfirmationButton>
   )