From cbde4804651b49930981f641724683c6a353d5df Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Tue, 10 Oct 2023 03:35:15 +0530
Subject: [PATCH 1/6] base

---
 .../Notifications/SomeoneFollowedYou.tsx      | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx b/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx
index 786c921e70..800cd9145d 100644
--- a/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx
+++ b/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx
@@ -117,25 +117,34 @@ export function SomeoneFollowedYou({ notificationRef, queryRef }: SomeoneFollowe
       notificationRef={notification}
     >
       <View className="flex flex-row w-full justify-between items-center">
-        <Text className={shouldShowFollowBackButton ? 'max-w-70' : ''}>
-          <Typography
-            font={{
-              family: 'ABCDiatype',
-              weight: 'Bold',
-            }}
-            className="text-sm"
-          >
-            {count > 1 ? (
-              `${count} collectors`
-            ) : (
-              <>{lastFollower ? lastFollower.username : 'Someone'}</>
-            )}
-          </Typography>{' '}
-          <Typography className="text-sm" font={{ family: 'ABCDiatype', weight: 'Regular' }}>
-            followed you
-          </Typography>
-        </Text>
-        {shouldShowFollowBackButton && <FollowButton queryRef={query} userRef={lastFollower} />}
+        <View className="max-w-[180px]">
+          <Text>
+            <Typography
+              font={{
+                family: 'ABCDiatype',
+                weight: 'Bold',
+              }}
+              className="text-sm"
+            >
+              {count > 1 ? (
+                `${count} collectors`
+              ) : (
+                <>{lastFollower ? lastFollower.username : 'Someone'}</>
+              )}
+            </Typography>{' '}
+            <Typography className="text-sm" font={{ family: 'ABCDiatype', weight: 'Regular' }}>
+              followed
+            </Typography>{' '}
+            <Typography className="text-sm" font={{ family: 'ABCDiatype', weight: 'Regular' }}>
+              you
+            </Typography>
+          </Text>
+        </View>
+        {shouldShowFollowBackButton && (
+          <View className="pl-1">
+            <FollowButton queryRef={query} userRef={lastFollower} />
+          </View>
+        )}
       </View>
       <NotificationBottomSheetUserList
         ref={bottomSheetRef}

From 141b2d13cc465480406410c13098e6979155efdc Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Sat, 14 Oct 2023 00:39:23 +0530
Subject: [PATCH 2/6] minor

---
 .../Notification/Notifications/SomeoneFollowedYou.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx b/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx
index 800cd9145d..784af73766 100644
--- a/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx
+++ b/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx
@@ -141,7 +141,7 @@ export function SomeoneFollowedYou({ notificationRef, queryRef }: SomeoneFollowe
           </Text>
         </View>
         {shouldShowFollowBackButton && (
-          <View className="pl-1">
+          <View className="ml-5">
             <FollowButton queryRef={query} userRef={lastFollower} />
           </View>
         )}

From cc8126bb2aaa5e1b4e38e3d241210141b647d20b Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Sat, 14 Oct 2023 06:40:05 +0530
Subject: [PATCH 3/6] move to notif skeleton

---
 .../Notification/NotificationSkeleton.tsx     | 26 ++++++++++++++++---
 .../Notifications/SomeoneFollowedYou.tsx      |  9 +------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/apps/mobile/src/components/Notification/NotificationSkeleton.tsx b/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
index c499bb151d..0fc7223c30 100644
--- a/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
+++ b/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
@@ -7,6 +7,7 @@ import {
   GalleryBottomSheetModal,
   GalleryBottomSheetModalType,
 } from '~/components/GalleryBottomSheet/GalleryBottomSheetModal';
+import { FollowButton } from '~/components/FollowButton';
 import { ProfilePictureBubblesWithCount } from '~/components/ProfileView/ProfileViewSharedInfo/ProfileViewSharedFollowers';
 import { Typography } from '~/components/Typography';
 import { UserFollowList } from '~/components/UserFollowList/UserFollowList';
@@ -24,6 +25,7 @@ type Props = PropsWithChildren<{
   queryRef: NotificationSkeletonQueryFragment$key;
   notificationRef: NotificationSkeletonFragment$key;
   responsibleUserRefs: NotificationSkeletonResponsibleUsersFragment$key;
+  shouldShowFollowBackButton?: boolean;
 }>;
 
 export function NotificationSkeleton({
@@ -31,12 +33,14 @@ export function NotificationSkeleton({
   children,
   queryRef,
   notificationRef,
+  shouldShowFollowBackButton = false,
   responsibleUserRefs = [],
 }: Props) {
   const query = useFragment(
     graphql`
       fragment NotificationSkeletonQueryFragment on Query {
         ...UserFollowListQueryFragment
+        ...FollowButtonQueryFragment
       }
     `,
     queryRef
@@ -73,6 +77,15 @@ export function NotificationSkeleton({
             }
           }
         }
+        ... on SomeoneFollowedYouNotification {
+          followers(last: 1) {
+            edges {
+              node {
+                ...FollowButtonUserFragment
+              }
+            }
+          }
+        }
       }
     `,
     notificationRef
@@ -115,6 +128,8 @@ export function NotificationSkeleton({
     return null;
   }, [notification]);
 
+  const lastFollower = useMemo(() => notification.followers?.edges?.[0]?.node, [notification]);
+
   return (
     <GalleryTouchableOpacity
       onPress={onPress}
@@ -122,7 +137,7 @@ export function NotificationSkeleton({
       eventElementId="Notification Row"
       eventName="Notification Row Clicked"
     >
-      <View className="flex-1 flex-row space-x-2 items-center">
+      <View className="flex-1 flex-row space-x-1 items-center">
         <ProfilePictureBubblesWithCount
           eventElementId="Notification Row PFP Bubbles"
           eventName="Notification Row PFP Bubbles Pressed"
@@ -142,10 +157,15 @@ export function NotificationSkeleton({
         ) : (
           <View />
         )}
+        {shouldShowFollowBackButton && lastFollower && (
+          <View>
+            <FollowButton queryRef={query} userRef={lastFollower} />
+          </View>
+        )}
 
         <View
-          className={`w-[35px] flex-row space-x-2 items-center ${
-            !notification.seen ? 'justify-between' : 'justify-end'
+          className={`w-[35px] flex-row items-center ${
+            !notification.seen ? 'justify-between' : 'space-x-2 justify-end'
           }`}
         >
           <Typography
diff --git a/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx b/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx
index 784af73766..0ec3e376aa 100644
--- a/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx
+++ b/apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx
@@ -4,7 +4,6 @@ import { Text, View } from 'react-native';
 import { useFragment } from 'react-relay';
 import { graphql } from 'relay-runtime';
 
-import { FollowButton } from '~/components/FollowButton';
 import { GalleryBottomSheetModalType } from '~/components/GalleryBottomSheet/GalleryBottomSheetModal';
 import { NotificationBottomSheetUserList } from '~/components/Notification/NotificationBottomSheetUserList';
 import { NotificationSkeleton } from '~/components/Notification/NotificationSkeleton';
@@ -23,7 +22,6 @@ export function SomeoneFollowedYou({ notificationRef, queryRef }: SomeoneFollowe
   const query = useFragment(
     graphql`
       fragment SomeoneFollowedYouQueryFragment on Query {
-        ...FollowButtonQueryFragment
         viewer {
           ... on Viewer {
             user {
@@ -51,7 +49,6 @@ export function SomeoneFollowedYou({ notificationRef, queryRef }: SomeoneFollowe
             node {
               username
 
-              ...FollowButtonUserFragment
               ...NotificationSkeletonResponsibleUsersFragment
               ... on GalleryUser {
                 dbid
@@ -113,6 +110,7 @@ export function SomeoneFollowedYou({ notificationRef, queryRef }: SomeoneFollowe
     <NotificationSkeleton
       queryRef={query}
       onPress={handlePress}
+      shouldShowFollowBackButton={shouldShowFollowBackButton ?? false}
       responsibleUserRefs={followers}
       notificationRef={notification}
     >
@@ -140,11 +138,6 @@ export function SomeoneFollowedYou({ notificationRef, queryRef }: SomeoneFollowe
             </Typography>
           </Text>
         </View>
-        {shouldShowFollowBackButton && (
-          <View className="ml-5">
-            <FollowButton queryRef={query} userRef={lastFollower} />
-          </View>
-        )}
       </View>
       <NotificationBottomSheetUserList
         ref={bottomSheetRef}

From 0176be3e70ab3ac75c75b040e8e842e3b9fb3a20 Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Sat, 14 Oct 2023 06:52:45 +0530
Subject: [PATCH 4/6] right aligned button

---
 .../Notification/NotificationSkeleton.tsx     | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/mobile/src/components/Notification/NotificationSkeleton.tsx b/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
index 0fc7223c30..afccb77c38 100644
--- a/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
+++ b/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
@@ -138,18 +138,24 @@ export function NotificationSkeleton({
       eventName="Notification Row Clicked"
     >
       <View className="flex-1 flex-row space-x-1 items-center">
-        <ProfilePictureBubblesWithCount
-          eventElementId="Notification Row PFP Bubbles"
-          eventName="Notification Row PFP Bubbles Pressed"
-          onPress={handleBubblesPress}
-          userRefs={responsibleUsers}
-          totalCount={responsibleUserRefs.length}
-          size="md"
-        />
-
+        <View className="mr-1">
+          <ProfilePictureBubblesWithCount
+            eventElementId="Notification Row PFP Bubbles"
+            eventName="Notification Row PFP Bubbles Pressed"
+            onPress={handleBubblesPress}
+            userRefs={responsibleUsers}
+            totalCount={responsibleUserRefs.length}
+            size="md"
+          />
+        </View>
         <Text className="dark:text-white mt-[1] pr-1 flex-1">{children}</Text>
       </View>
-      <View className="flex flex-row items-center justify-between space-x-2">
+      {shouldShowFollowBackButton && lastFollower && (
+        <View className="flex justify-center">
+          <FollowButton queryRef={query} userRef={lastFollower} />
+        </View>
+      )}
+      <View className="flex flex-row items-center justify-between ${postToken ? 'space-x-2' : ''}">
         {postToken ? (
           <View className="w-[56px] h-[56px]">
             <NotificationPostPreviewWithBoundary tokenRef={postToken} />
@@ -157,15 +163,9 @@ export function NotificationSkeleton({
         ) : (
           <View />
         )}
-        {shouldShowFollowBackButton && lastFollower && (
-          <View>
-            <FollowButton queryRef={query} userRef={lastFollower} />
-          </View>
-        )}
-
         <View
-          className={`w-[35px] flex-row items-center ${
-            !notification.seen ? 'justify-between' : 'space-x-2 justify-end'
+          className={`w-[35px] flex-row space-x-2 items-center ${
+            !notification.seen ? 'justify-between' : 'justify-end'
           }`}
         >
           <Typography

From c1fa7b4e187bd595110b2414d13a0c69c54926ef Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Sat, 14 Oct 2023 06:57:17 +0530
Subject: [PATCH 5/6] improvement

---
 .../src/components/Notification/NotificationSkeleton.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/mobile/src/components/Notification/NotificationSkeleton.tsx b/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
index afccb77c38..0744c5b70a 100644
--- a/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
+++ b/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
@@ -137,8 +137,8 @@ export function NotificationSkeleton({
       eventElementId="Notification Row"
       eventName="Notification Row Clicked"
     >
-      <View className="flex-1 flex-row space-x-1 items-center">
-        <View className="mr-1">
+      <View className="flex-1 flex-row items-center">
+        <View className="mr-2">
           <ProfilePictureBubblesWithCount
             eventElementId="Notification Row PFP Bubbles"
             eventName="Notification Row PFP Bubbles Pressed"
@@ -150,11 +150,13 @@ export function NotificationSkeleton({
         </View>
         <Text className="dark:text-white mt-[1] pr-1 flex-1">{children}</Text>
       </View>
+
       {shouldShowFollowBackButton && lastFollower && (
         <View className="flex justify-center">
           <FollowButton queryRef={query} userRef={lastFollower} />
         </View>
       )}
+
       <View className="flex flex-row items-center justify-between ${postToken ? 'space-x-2' : ''}">
         {postToken ? (
           <View className="w-[56px] h-[56px]">

From d738237e23295d81ec128091623f13133033498f Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Sun, 15 Oct 2023 07:02:44 +0530
Subject: [PATCH 6/6] lint

---
 .../mobile/src/components/Notification/NotificationSkeleton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/mobile/src/components/Notification/NotificationSkeleton.tsx b/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
index 0744c5b70a..81fd43990b 100644
--- a/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
+++ b/apps/mobile/src/components/Notification/NotificationSkeleton.tsx
@@ -3,11 +3,11 @@ import { PropsWithChildren, useCallback, useMemo, useRef } from 'react';
 import { Text, View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 
+import { FollowButton } from '~/components/FollowButton';
 import {
   GalleryBottomSheetModal,
   GalleryBottomSheetModalType,
 } from '~/components/GalleryBottomSheet/GalleryBottomSheetModal';
-import { FollowButton } from '~/components/FollowButton';
 import { ProfilePictureBubblesWithCount } from '~/components/ProfileView/ProfileViewSharedInfo/ProfileViewSharedFollowers';
 import { Typography } from '~/components/Typography';
 import { UserFollowList } from '~/components/UserFollowList/UserFollowList';