Show edit following button on home

web/components/contract-search.tsx

@@ -25,6 +25,7 @@ import { useFollows } from 'web/hooks/use-follows'
 import { EditCategoriesButton } from './feed/category-selector'
 import { CATEGORIES } from 'common/categories'
 import { Tabs } from './layout/tabs'
+import { EditFollowingButton } from './following-button'
 
 const searchClient = algoliasearch(
   'GJQPAYENIF',
@@ -249,10 +250,6 @@ function CategoryFollowSelector(props: {
 
   const user = useUser()
 
-  const categoriesLabel = `Categories ${
-    followedCategories.length ? followedCategories.length : '(All)'
-  }`
-
   let categoriesDescription = `Showing all categories`
 
   if (followedCategories.length) {
@@ -267,14 +264,12 @@ function CategoryFollowSelector(props: {
     categoriesDescription = `Showing ${categoriesLabel}${andMoreLabel}`
   }
 
-  const followingLabel = `Following ${follows.length}`
-
   return (
     <Tabs
       defaultIndex={mode === 'categories' ? 0 : 1}
       tabs={[
         {
-          title: categoriesLabel,
+          title: 'Categories',
           content: user && (
             <Row className="items-center gap-1 text-gray-500">
               <div>{categoriesDescription}</div>
@@ -285,11 +280,11 @@ function CategoryFollowSelector(props: {
         ...(user
           ? [
               {
-                title: followingLabel,
+                title: 'Following',
-
                 content: (
-                  <Row className="h-8 items-center gap-2 text-gray-500">
+                  <Row className="items-center gap-2 text-gray-500">
                     <div>Showing markets by users you are following.</div>
+                    <EditFollowingButton className="self-start" user={user} />
                   </Row>
                 ),
               },

web/components/feed/category-selector.tsx

@@ -91,11 +91,12 @@ export function EditCategoriesButton(props: {
     <div
       className={clsx(
         className,
-        'btn btn-sm btn-ghost cursor-pointer gap-2 whitespace-nowrap text-sm text-gray-700'
+        'btn btn-sm btn-ghost cursor-pointer gap-2 whitespace-nowrap text-sm text-gray-700 normal-case'
       )}
       onClick={() => setIsOpen(true)}
     >
       <PencilIcon className="inline h-4 w-4" />
+      Categories
       <CategorySelectorModal
         user={user}
         isOpen={isOpen}

web/components/following-button.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx'
+import { PencilIcon } from '@heroicons/react/outline'
 import { User } from 'common/user'
 import { useEffect, useState } from 'react'
 import { useFollowers, useFollows } from 'web/hooks/use-follows'
@@ -36,6 +38,38 @@ export function FollowingButton(props: { user: User }) {
   )
 }
 
+export function EditFollowingButton(props: { user: User; className?: string }) {
+  const { user, className } = props
+  const [open, setOpen] = useState(false)
+  const followingIds = useFollows(user.id)
+  const followerIds = useFollowers(user.id)
+
+  return (
+    <div
+      className={clsx(
+        className,
+        'btn btn-sm btn-ghost cursor-pointer gap-2 whitespace-nowrap text-sm normal-case text-gray-700'
+      )}
+      onClick={() => setOpen(true)}
+    >
+      <PencilIcon className="inline h-4 w-4" />
+      <div>
+        <span className="font-semibold">{followingIds?.length ?? ''}</span>{' '}
+        Following
+      </div>
+
+      <FollowingFollowersDialog
+        user={user}
+        defaultTab="following"
+        followingIds={followingIds ?? []}
+        followerIds={followerIds ?? []}
+        isOpen={open}
+        setIsOpen={setOpen}
+      />
+    </div>
+  )
+}
+
 export function FollowersButton(props: { user: User }) {
   const { user } = props
   const [isOpen, setIsOpen] = useState(false)