Page with list of folds

web/components/nav-bar.tsx

@@ -57,6 +57,17 @@ function NavOptions(props: { user: User | null; themeClasses: string }) {
         </Link>
       )}
 
+      <Link href="/folds">
+        <a
+          className={clsx(
+            'text-base hidden md:block whitespace-nowrap',
+            themeClasses
+          )}
+        >
+          Folds
+        </a>
+      </Link>
+
       <Link href="/markets">
         <a
           className={clsx(
@@ -82,17 +93,6 @@ function NavOptions(props: { user: User | null; themeClasses: string }) {
         </>
       ) : (
         <>
-          <Link href="/create">
-            <a
-              className={clsx(
-                'text-base hidden md:block whitespace-nowrap',
-                themeClasses
-              )}
-            >
-              Create a market
-            </a>
-          </Link>
-
           <ProfileMenu user={user} />
         </>
       )}

web/lib/firebase/contracts.ts

@@ -24,7 +24,6 @@ import { createRNG, shuffle } from '../../../common/util/random'
 export type { Contract }
 
 export function contractPath(contract: Contract) {
-  // For now, derive username from creatorName
   return `/${contract.creatorUsername}/${contract.slug}`
 }
 

web/lib/firebase/folds.ts

@@ -6,6 +6,14 @@ import { getValues } from './utils'
 
 const foldCollection = collection(db, 'folds')
 
+export function foldPath(fold: Fold, subpath?: 'edit' | 'leaderboards') {
+  return `/fold/${fold.slug}${subpath ? `/${subpath}` : ''}`
+}
+
+export async function listAllFolds() {
+  return getValues<Fold>(foldCollection)
+}
+
 export async function getFoldBySlug(slug: string) {
   const q = query(foldCollection, where('slug', '==', slug))
   const folds = await getValues<Fold>(q)

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

@@ -85,7 +85,7 @@ export default function FoldPage(props: {
         <Col className="max-w-3xl w-full">
           <Title text={fold.name} />
 
-          <Row className="items-center mb-2">
+          <Row className="items-center mb-2 flex-wrap">
             {isCurator && (
               <>
                 <SiteLink className="text-sm " href={`/fold/${fold.slug}/edit`}>
@@ -107,9 +107,8 @@ export default function FoldPage(props: {
               name={curator.name}
               username={curator.username}
             />
-            <div className="ml-2 mr-2">•</div>
-            <TagsList tags={tags.map((tag) => `#${tag}`)} />
           </Row>
+          <TagsList tags={tags.map((tag) => `#${tag}`)} />
 
           <Spacer h={4} />
 

web/pages/folds.tsx

@@ -0,0 +1,51 @@
+import _ from 'lodash'
+import { Fold } from '../../common/fold'
+import { Col } from '../components/layout/col'
+import { Row } from '../components/layout/row'
+import { Page } from '../components/page'
+import { SiteLink } from '../components/site-link'
+import { Title } from '../components/title'
+import { UserLink } from '../components/user-page'
+import { foldPath, listAllFolds } from '../lib/firebase/folds'
+import { getUser, User } from '../lib/firebase/users'
+
+export async function getStaticProps() {
+  const folds = await listAllFolds().catch((_) => [])
+
+  const curators = await Promise.all(
+    folds.map((fold) => getUser(fold.curatorId))
+  )
+
+  return {
+    props: {
+      folds,
+      curators,
+    },
+
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+export default function Folds(props: { folds: Fold[]; curators: User[] }) {
+  const { folds, curators } = props
+
+  return (
+    <Page>
+      <Title text="Folds" />
+
+      <Col className="gap-4">
+        {folds.map((fold, index) => (
+          <Row className="items-center">
+            <SiteLink href={foldPath(fold)}>{fold.name}</SiteLink>
+            <div className="text-sm text-gray-500 ml-4 mr-1">Curated by</div>
+            <UserLink
+              className="text-sm text-neutral"
+              name={curators[index].name}
+              username={curators[index].username}
+            />
+          </Row>
+        ))}
+      </Col>
+    </Page>
+  )
+}