fix: mutual follows modal

apps/web/package.json

@@ -32,6 +32,7 @@
     "framer-motion": "^10.16.4",
     "graphql": "^16.8.1",
     "interweave": "^13.1.0",
+    "keen-slider": "^6.8.6",
     "make-plural": "^7.3.0",
     "next": "14.0.1",
     "next-themes": "^0.2.1",

apps/web/src/components/Common/FollowActions.tsx

@@ -1,7 +1,7 @@
 import Follow from '@components/Profile/BasicInfo/Follow'
 import SuperFollow from '@components/Profile/BasicInfo/SuperFollow'
 import UnFollow from '@components/Profile/BasicInfo/UnFollow'
-import type { Profile } from '@tape.xyz/lens'
+import { FollowModuleType, type Profile } from '@tape.xyz/lens'
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 
@@ -11,33 +11,33 @@ type Props = {
 }
 
 const FollowActions: FC<Props> = ({ profile, size = '2' }) => {
-  const isSubscriber = profile?.operations.isFollowedByMe.value
-  const [subscriber, setSubscriber] = useState(isSubscriber)
-  const subscribeType = profile?.followModule?.__typename
+  const isFollowedByMe = profile?.operations.isFollowedByMe.value
+  const [subscriber, setSubscriber] = useState(isFollowedByMe)
+  const followModule = profile?.followModule?.type
 
   useEffect(() => {
-    setSubscriber(isSubscriber)
-  }, [isSubscriber])
+    setSubscriber(isFollowedByMe)
+  }, [isFollowedByMe])
 
   return subscriber ? (
     <UnFollow
       size={size}
       profile={profile}
       onUnSubscribe={() => setSubscriber(false)}
     />
-  ) : subscribeType === 'FeeFollowModuleSettings' ? (
+  ) : followModule === FollowModuleType.FeeFollowModule ? (
     <SuperFollow
       size={size}
       profile={profile}
       onJoin={() => setSubscriber(true)}
     />
-  ) : (
+  ) : !followModule ? (
     <Follow
       size={size}
       profile={profile}
       onSubscribe={() => setSubscriber(true)}
     />
-  )
+  ) : null
 }
 
 export default FollowActions

apps/web/src/components/Common/UserProfile.tsx

@@ -0,0 +1,37 @@
+import { Avatar } from '@radix-ui/themes'
+import { getProfile, getProfilePicture } from '@tape.xyz/generic'
+import type { Profile } from '@tape.xyz/lens'
+import Link from 'next/link'
+import React from 'react'
+
+import HoverableProfile from './HoverableProfile'
+
+const UserProfile = ({ profile }: { profile: Profile }) => {
+  if (!profile) {
+    return null
+  }
+
+  return (
+    <div>
+      <Link
+        href={getProfile(profile).link}
+        className="flex items-center space-x-2"
+      >
+        <Avatar
+          radius="full"
+          src={getProfilePicture(profile, 'AVATAR')}
+          fallback={getProfile(profile).displayName[0]}
+          alt={getProfile(profile).displayName}
+        />
+        <div className="flex flex-col">
+          <h2 className="line-clamp-1 font-semibold">
+            {getProfile(profile).displayName}
+          </h2>
+          <HoverableProfile profile={profile} />
+        </div>
+      </Link>
+    </div>
+  )
+}
+
+export default UserProfile

apps/web/src/components/Home/Feed.tsx

@@ -25,7 +25,7 @@ import { Loader } from '@tape.xyz/ui'
 import React from 'react'
 import { useInView } from 'react-cool-inview'
 
-const Feed = () => {
+const Feed = ({ showFilter = true }) => {
   const activeTagFilter = useAppStore((state) => state.activeTagFilter)
 
   const request: ExplorePublicationRequest = {
@@ -66,9 +66,13 @@ const Feed = () => {
   })
 
   return (
-    <div className="laptop:pt-6 pt-4">
-      <CategoryFilters />
-      <div className="laptop:pt-4 pt-4">
+    <div className="laptop:pt-6 space-y-4 pt-4">
+      {showFilter && (
+        <div>
+          <CategoryFilters />
+        </div>
+      )}
+      <div>
         {loading && <TimelineShimmer />}
         {!error && !loading && videos.length > 0 && (
           <>

apps/web/src/components/Home/LatestBytes.tsx

@@ -80,23 +80,25 @@ const LatestBytes = () => {
                 </h1>
               </div>
             </Link>
-            <Link
-              href={`/u/${getProfile(byte.by)?.slug}`}
-              className="flex items-center space-x-1 px-3 py-1"
-            >
-              <img
-                className="h-4 w-4 rounded-full bg-gray-200 dark:bg-gray-800"
-                src={getProfilePicture(byte.by, 'AVATAR')}
-                height={50}
-                width={50}
-                alt={`${getProfile(byte.by)?.slug}'s PFP`}
-                draggable={false}
-              />
-              <span className="flex items-center space-x-1 font-medium">
-                <span>{getProfile(byte.by)?.slug}</span>
-                <Badge id={byte.by.id} size="xs" />
-              </span>
-            </Link>
+            <span>
+              <Link
+                href={getProfile(byte.by)?.link}
+                className="inline-flex items-center space-x-1 px-3 py-1"
+              >
+                <img
+                  className="h-4 w-4 rounded-full bg-gray-200 dark:bg-gray-800"
+                  src={getProfilePicture(byte.by, 'AVATAR')}
+                  height={50}
+                  width={50}
+                  alt={`${getProfile(byte.by)?.slug}'s PFP`}
+                  draggable={false}
+                />
+                <span className="flex items-center space-x-1 font-medium">
+                  <span>{getProfile(byte.by)?.slug}</span>
+                  <Badge id={byte.by.id} size="xs" />
+                </span>
+              </Link>
+            </span>
           </div>
         )
       })}