Cardify folds in fold list

functions/src/create-fold.ts

@@ -23,11 +23,16 @@ export const createFold = functions.runWith({ minInstances: 1 }).https.onCall(
     const creator = await getUser(userId)
     if (!creator) return { status: 'error', message: 'User not found' }
 
-    const { name, about, tags } = data
+    let { name, about, tags } = data
 
     if (!name || typeof name !== 'string')
       return { status: 'error', message: 'Name must be a non-empty string' }
 
+    if (!about || typeof about !== 'string')
+      return { status: 'error', message: 'About must be a non-empty string' }
+
+    about = about.slice(0, 140)
+
     if (!_.isArray(tags))
       return { status: 'error', message: 'Tags must be an array of strings' }
 

web/components/create-fold-button.tsx

@@ -64,7 +64,7 @@ export function CreateFoldButton() {
       <Title className="!mt-0" text="Create a fold" />
 
       <Col className="text-gray-500 gap-1">
-        <div>A fold is a sub-community of markets organized on a topic.</div>
+        <div>A fold is a Manifold community with selected markets.</div>
         <div>Markets are included if they match one or more tags.</div>
       </Col>
 

web/components/site-link.tsx

@@ -12,7 +12,7 @@ export const SiteLink = (props: {
     <a
       href={href}
       className={clsx(
-        'hover:underline hover:decoration-indigo-400 hover:decoration-2',
+        'hover:underline hover:decoration-indigo-400 hover:decoration-2 z-10',
         className
       )}
       onClick={(e) => e.stopPropagation()}
@@ -23,7 +23,7 @@ export const SiteLink = (props: {
     <Link href={href}>
       <a
         className={clsx(
-          'hover:underline hover:decoration-indigo-400 hover:decoration-2',
+          'hover:underline hover:decoration-indigo-400 hover:decoration-2 z-10',
           className
         )}
         onClick={(e) => e.stopPropagation()}

web/pages/folds.tsx

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { Fold } from '../../common/fold'
 import { CreateFoldButton } from '../components/create-fold-button'
@@ -60,35 +61,44 @@ export default function Folds(props: {
   return (
     <Page>
       <Col className="items-center">
-        <Col className="max-w-2xl w-full px-2 sm:px-0">
+        <Col className="max-w-lg w-full px-2 sm:px-0">
           <Row className="justify-between items-center">
-            <Title text="Manifold communities: Folds" />
+            <Title text="Folds" />
             {user && <CreateFoldButton />}
           </Row>
 
           <div className="text-gray-500 mb-6">
-            Browse folds on topics that interest you.
+            Browse Manifold communities, called folds.
           </div>
 
-          <Col className="gap-4">
+          <Col className="gap-2">
             {folds.map((fold) => (
-              <Col key={fold.id} className="gap-2">
-                <Row className="items-center flex-wrap gap-2">
+              <Col
+                key={fold.id}
+                className="bg-white p-4 rounded-xl gap-1 relative"
+              >
+                <Link href={foldPath(fold)}>
+                  <a className="absolute left-0 right-0 top-0 bottom-0" />
+                </Link>
+                <Row className="justify-between items-center gap-2">
                   <SiteLink href={foldPath(fold)}>{fold.name}</SiteLink>
-                  <div />
-                  <div className="text-sm text-gray-500">12 followers</div>
-                  <div className="text-gray-500">•</div>
+                  <button className="btn btn-secondary btn-sm z-10 mb-1">
+                    Follow
+                  </button>
+                </Row>
+                <Row className="items-center gap-2 text-gray-500 text-sm">
+                  <div>12 followers</div>
+                  <div>•</div>
                   <Row>
-                    <div className="text-sm text-gray-500 mr-1">Curated by</div>
+                    <div className="mr-1">Curated by</div>
                     <UserLink
-                      className="text-sm text-neutral"
+                      className="text-neutral"
                       name={curatorsDict[fold.curatorId]?.name ?? ''}
                       username={curatorsDict[fold.curatorId]?.username ?? ''}
                     />
                   </Row>
                 </Row>
                 <div className="text-gray-500 text-sm">{fold.about}</div>
-                <div />
               </Col>
             ))}
           </Col>