diff --git a/functions/src/create-fold.ts b/functions/src/create-fold.ts index a653fa93..368a6b03 100644 --- a/functions/src/create-fold.ts +++ b/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' } diff --git a/web/components/create-fold-button.tsx b/web/components/create-fold-button.tsx index 52e773d6..ac9913c5 100644 --- a/web/components/create-fold-button.tsx +++ b/web/components/create-fold-button.tsx @@ -64,7 +64,7 @@ export function CreateFoldButton() { <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> diff --git a/web/components/site-link.tsx b/web/components/site-link.tsx index a3a5a01b..95b2758c 100644 --- a/web/components/site-link.tsx +++ b/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()} diff --git a/web/pages/folds.tsx b/web/pages/folds.tsx index 3a1316ac..f0706b38 100644 --- a/web/pages/folds.tsx +++ b/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>