diff --git a/web/components/fast-fold-following.tsx b/web/components/fast-fold-following.tsx
new file mode 100644
index 00000000..d4d350ee
--- /dev/null
+++ b/web/components/fast-fold-following.tsx
@@ -0,0 +1,107 @@
+import clsx from 'clsx'
+import { useState } from 'react'
+import { SearchIcon } from '@heroicons/react/outline'
+
+import { User } from '../../common/user'
+import { followFoldFromSlug, unfollowFoldFromSlug } from '../lib/firebase/folds'
+import { Row } from './layout/row'
+import { Spacer } from './layout/spacer'
+
+function FollowFoldButton(props: {
+ fold: { slug: string; name: string }
+ user: User | null | undefined
+ isFollowed?: boolean
+}) {
+ const { fold, user, isFollowed } = props
+ const { slug, name } = fold
+
+ const [followed, setFollowed] = useState(isFollowed)
+
+ const onClick = async () => {
+ if (followed) {
+ if (user) await unfollowFoldFromSlug(slug, user.id)
+ setFollowed(false)
+ } else {
+ if (user) await followFoldFromSlug(slug, user.id)
+ setFollowed(true)
+ }
+ }
+
+ return (
+
+ {name}
+
+ )
+}
+
+function FollowFolds(props: {
+ folds: { slug: string; name: string }[]
+ followedFoldSlugs: string[]
+ noLabel?: boolean
+ className?: string
+ user: User | null | undefined
+}) {
+ const { folds, noLabel, className, user, followedFoldSlugs } = props
+
+ return (
+
+ {folds.length > 0 && (
+ <>
+ {!noLabel && Communities
}
+ {folds.map((fold) => (
+
+ ))}
+ >
+ )}
+
+ )
+}
+
+export const FastFoldFollowing = (props: {
+ followedFoldSlugs: string[]
+ user: User | null | undefined
+}) => {
+ const { followedFoldSlugs, user } = props
+
+ return (
+ <>
+
+
+ Personalize your feed — click on a community to follow
+
+
+
+
+
+ >
+ )
+}
diff --git a/web/components/follow-fold-button.tsx b/web/components/follow-fold-button.tsx
index 106b2489..f394aae9 100644
--- a/web/components/follow-fold-button.tsx
+++ b/web/components/follow-fold-button.tsx
@@ -11,7 +11,7 @@ export function FollowFoldButton(props: { fold: Fold; className?: string }) {
const following = useFollowingFold(fold, user)
const onFollow = () => {
- if (user) followFold(fold, user)
+ if (user) followFold(fold.id, user.id)
}
const onUnfollow = () => {
diff --git a/web/components/tags-list.tsx b/web/components/tags-list.tsx
index e307c577..7e02d5f9 100644
--- a/web/components/tags-list.tsx
+++ b/web/components/tags-list.tsx
@@ -1,4 +1,5 @@
import clsx from 'clsx'
+
import { Row } from './layout/row'
import { SiteLink } from './site-link'
@@ -47,6 +48,7 @@ export function TagsList(props: {
export function FoldTag(props: { fold: { slug: string; name: string } }) {
const { fold } = props
const { slug, name } = fold
+
return (
Communities on Manifold are centered around a collection of
- markets.
+ markets. Follow a community to personalize your feed and receive
+ relevant updates.
diff --git a/web/pages/home.tsx b/web/pages/home.tsx
index 6ddba66c..f834e18f 100644
--- a/web/pages/home.tsx
+++ b/web/pages/home.tsx
@@ -17,12 +17,10 @@ import { Fold } from '../../common/fold'
import { filterDefined } from '../../common/util/array'
import { useUserBetContracts } from '../hooks/use-user-bets'
import { LoadingIndicator } from '../components/loading-indicator'
-import { FoldTagList } from '../components/tags-list'
-import { SearchIcon } from '@heroicons/react/outline'
import { Row } from '../components/layout/row'
import { SparklesIcon } from '@heroicons/react/solid'
import { useFollowedFolds } from '../hooks/use-fold'
-import { SiteLink } from '../components/site-link'
+import { FastFoldFollowing } from '../components/fast-fold-following'
export async function getStaticProps() {
let [contracts, folds] = await Promise.all([
@@ -116,39 +114,19 @@ const Home = (props: {
-
-
- Explore our communities
-
-
-
+
+ {followedFolds.length === 0 && (
+ f.slug)}
+ />
+ )}
+
Recent activity
- —
-
-
- Follow a community
- {' '}
- to personalize
-
{activeContracts ? (