From 9bd27d9708f01c1b4f54922a229eca5fe2915c2a Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Tue, 21 Nov 2023 21:47:28 +0100
Subject: [PATCH 01/14] feat(wip): new channel message layout

---
 .../components/audio-player/audio-player.tsx  |   2 +-
 .../components/message-item.tsx               | 518 ++++++++++--------
 .../components/creator-channels/messages.tsx  |  31 +-
 .../app/components/creator-channels/types.ts  |   1 +
 .../components/reaction/message-reactions.tsx |  13 +-
 5 files changed, 321 insertions(+), 244 deletions(-)

diff --git a/packages/app/components/audio-player/audio-player.tsx b/packages/app/components/audio-player/audio-player.tsx
index 355322de14..c173fc6acc 100644
--- a/packages/app/components/audio-player/audio-player.tsx
+++ b/packages/app/components/audio-player/audio-player.tsx
@@ -123,7 +123,7 @@ export const AudioPlayer = memo(
     }, [id, prepare, url]);
 
     return (
-      <LeanView tw="web:max-w-sm web:p-2 overflow-hidden rounded-full bg-black p-4 dark:bg-white">
+      <LeanView tw="web:max-w-sm web:p-2 min-w-[320px] overflow-hidden rounded-full bg-black p-4 dark:bg-white">
         <LeanView tw="flex-row items-center">
           <LeanView tw="mr-4 items-center justify-center">
             <LeanView tw="h-12 w-12 items-center justify-center rounded-full bg-white dark:bg-black">
diff --git a/packages/app/components/creator-channels/components/message-item.tsx b/packages/app/components/creator-channels/components/message-item.tsx
index 7b87b66aee..aaa29252e1 100644
--- a/packages/app/components/creator-channels/components/message-item.tsx
+++ b/packages/app/components/creator-channels/components/message-item.tsx
@@ -91,6 +91,9 @@ export const MessageItem = memo(
     const animatedViewRef = useAnimatedRef<any>();
     const router = useRouter();
 
+    const isByCreator =
+      channel_message?.sent_by?.profile.profile_id === channelOwnerProfileId;
+
     const linkifiedMessage = useMemo(
       () =>
         channel_message.body
@@ -99,10 +102,12 @@ export const MessageItem = memo(
                 cleanUserTextInput(removeTags(channel_message.body)),
                 10
               ),
-              "!text-indigo-600 dark:!text-blue-400"
+              isByCreator
+                ? "text-base underline text-white"
+                : "text-underline text-base"
             )
           : "",
-      [channel_message.body]
+      [channel_message.body, isByCreator]
     );
 
     const style = useAnimatedStyle(() => {
@@ -146,9 +151,6 @@ export const MessageItem = memo(
       return false;
     }, [channel_message.created_at]);
 
-    const isByCreator =
-      channel_message?.sent_by?.profile.profile_id === channelOwnerProfileId;
-
     const loremText = useMemo(
       () =>
         item.channel_message.body_text_length > 0
@@ -165,223 +167,68 @@ export const MessageItem = memo(
       return null;
 
     return (
-      <AnimatedView tw="my-2 px-3" style={style} ref={animatedViewRef}>
-        <LeanView tw="flex-row" style={{ columnGap: 8 }}>
-          <Link
-            href={`/@${
-              item.channel_message?.sent_by?.profile.username ??
-              item.channel_message?.sent_by?.profile.wallet_addresses ??
-              "deleted-user"
-            }`}
-          >
-            <LeanView tw="h-6 w-6">
-              <Avatar
-                size={24}
-                url={channel_message?.sent_by?.profile.img_url}
-              />
-              <View tw="absolute h-full w-full rounded-full border-[1.4px] border-white/60 dark:border-black/60" />
-            </LeanView>
-          </Link>
-          <LeanView tw="flex-1" style={{ rowGap: 8 }}>
-            <LeanView tw="flex-row items-center" style={{ columnGap: 8 }}>
-              <Link
-                href={`/@${
-                  item.channel_message?.sent_by?.profile.username ??
-                  item.channel_message?.sent_by?.profile.wallet_addresses ??
-                  "deleted-user"
-                }`}
-              >
-                <LeanText
-                  tw={"text-sm font-bold text-gray-900 dark:text-gray-100"}
-                >
-                  {channel_message?.sent_by?.profile.name ?? "Deleted User"}
-                </LeanText>
-              </Link>
-
-              <LeanView tw="flex-row items-center">
-                <LeanText tw={"text-xs text-gray-700 dark:text-gray-200"}>
-                  {formatDateRelativeWithIntl(channel_message.created_at)}
-                </LeanText>
-                {isByCreator ? (
-                  <View tw="ml-2">
-                    <CreatorBadge />
-                  </View>
-                ) : null}
-              </LeanView>
-
-              <LeanView
-                tw="mr-2 flex-1 flex-row items-center justify-end"
-                style={{
-                  gap: 12,
-                  display:
-                    isByCreator && !permissions?.can_view_creator_messages
-                      ? "none"
-                      : undefined,
-                }}
-              >
-                <Reaction
-                  reactions={reactions}
-                  reactionGroup={item.reaction_group}
-                  onPress={(id) => {
-                    enableLayoutAnimations(true);
-                    requestAnimationFrame(async () => {
-                      await reactOnMessage.trigger({
-                        messageId: item.channel_message.id,
-                        reactionId: id,
-                      });
-                      requestAnimationFrame(() => {
-                        enableLayoutAnimations(false);
-                      });
-                    });
-                  }}
+      <AnimatedView
+        style={[
+          {
+            marginBottom: item.reaction_group.length > 0 ? 20 : 0,
+          },
+          style,
+        ]}
+        tw="mt-1 px-3"
+        ref={animatedViewRef}
+      >
+        <LeanView
+          tw="mb-1 mt-6 flex-row items-center"
+          style={{ display: item.isSameSenderAsNext ? "none" : "flex" }}
+        >
+          <LeanView>
+            <Link
+              href={`/@${
+                item?.channel_message?.sent_by?.profile?.username ??
+                item?.channel_message?.sent_by?.profile?.wallet_addresses ??
+                "deleted-user"
+              }`}
+            >
+              <LeanView tw="h-8 w-8">
+                <Avatar
+                  size={32}
+                  url={item?.channel_message?.sent_by?.profile?.img_url}
                 />
-                <DropdownMenuRoot>
-                  <DropdownMenuTrigger
-                    // @ts-expect-error - RNW
-                    style={Platform.select({
-                      web: {
-                        cursor: "pointer",
-                      },
-                    })}
-                  >
-                    <MoreHorizontal
-                      color={isDark ? colors.gray[400] : colors.gray[700]}
-                      width={20}
-                      height={20}
-                    />
-                  </DropdownMenuTrigger>
-
-                  <DropdownMenuContent loop sideOffset={8}>
-                    {item.channel_message?.sent_by?.profile.profile_id ===
-                      user?.user?.data.profile.profile_id || isUserAdmin ? (
-                      <DropdownMenuItem
-                        onSelect={() => {
-                          Alert.alert(
-                            "Are you sure you want to delete this message?",
-                            "",
-                            [
-                              {
-                                text: "Cancel",
-                              },
-                              {
-                                text: "Delete",
-                                style: "destructive",
-                                onPress: () => {
-                                  enableLayoutAnimations(true);
-                                  requestAnimationFrame(async () => {
-                                    listRef.current?.prepareForLayoutAnimationRender();
-                                    await deleteMessage.trigger({
-                                      messageId: item.channel_message.id,
-                                    });
-                                    requestAnimationFrame(() => {
-                                      enableLayoutAnimations(false);
-                                    });
-                                  });
-                                },
-                              },
-                            ]
-                          );
-                        }}
-                        key="delete"
-                      >
-                        <MenuItemIcon
-                          Icon={Trash}
-                          ios={{
-                            paletteColors: ["red"],
-                            name: "trash",
-                          }}
-                        />
-                        <DropdownMenuItemTitle tw="font-semibold text-red-500">
-                          Delete
-                        </DropdownMenuItemTitle>
-                      </DropdownMenuItem>
-                    ) : null}
-
-                    {
-                      // edit message only if message is not older than 2 hours and it belongs to the user
-                      item.channel_message?.sent_by?.profile.profile_id ===
-                        user?.user?.data.profile.profile_id &&
-                      allowMessageEditing ? (
-                        <DropdownMenuItem
-                          onSelect={() => {
-                            runOnUI(() => {
-                              "worklet";
-                              const values = measure(animatedViewRef);
-                              if (values) {
-                                editMessageItemDimension.value = {
-                                  height: values.height,
-                                  pageY: values.pageY,
-                                };
-                              }
-                              runOnJS(setEditMessage)({
-                                text: item.channel_message.body,
-                                id: item.channel_message.id,
-                              });
-                            })();
-                          }}
-                          key="edit"
-                        >
-                          <MenuItemIcon
-                            Icon={Edit}
-                            ios={{
-                              name: "pencil",
-                            }}
-                          />
-                          <DropdownMenuItemTitle tw="font-semibold text-gray-700 dark:text-gray-400">
-                            Edit
-                          </DropdownMenuItemTitle>
-                        </DropdownMenuItem>
-                      ) : null
-                    }
-                    {item.channel_message?.sent_by?.profile.profile_id !==
-                    user?.user?.data.profile.profile_id ? (
-                      <DropdownMenuItem
-                        onSelect={() => {
-                          router.push(
-                            {
-                              pathname:
-                                Platform.OS === "web"
-                                  ? router.pathname
-                                  : "/report",
-                              query: {
-                                ...router.query,
-                                reportModal: true,
-                                channelMessageId: item.channel_message.id,
-                              },
-                            },
-                            Platform.OS === "web" ? router.asPath : undefined
-                          );
-                        }}
-                        key="report"
-                      >
-                        <MenuItemIcon
-                          Icon={Flag}
-                          ios={{
-                            name: "flag",
-                          }}
-                        />
-                        <DropdownMenuItemTitle tw="font-semibold text-gray-700 dark:text-gray-400">
-                          Report
-                        </DropdownMenuItemTitle>
-                      </DropdownMenuItem>
-                    ) : null}
-                  </DropdownMenuContent>
-                </DropdownMenuRoot>
+                <View tw="absolute h-full w-full rounded-full" />
               </LeanView>
-            </LeanView>
+            </Link>
+          </LeanView>
+          <LeanView tw="ml-2">
+            <Link
+              href={`/@${
+                item?.channel_message?.sent_by?.profile?.username ??
+                item?.channel_message?.sent_by?.profile?.wallet_addresses ??
+                "deleted-user"
+              }`}
+            >
+              <LeanText
+                tw={"text-base font-bold text-gray-900 dark:text-gray-100"}
+              >
+                {item?.channel_message?.sent_by?.profile.name ?? "Deleted User"}
+              </LeanText>
+            </Link>
+          </LeanView>
+        </LeanView>
 
+        <LeanView tw="ml-9 flex-row">
+          <LeanView tw="flex-1 flex-row items-center gap-4">
             {isByCreator && !permissions?.can_view_creator_messages ? (
               <LeanView tw="-mb-0.5 -ml-2 -mt-0.5 select-none overflow-hidden px-2 py-0.5">
                 {Platform.OS === "web" ? (
                   // INFO: I had to do it like that because blur-sm would crash for no reason even with web prefix
                   <LeanView tw="blur-sm">
-                    <LeanText tw="text-sm text-gray-900 dark:text-gray-100">
+                    <LeanText tw="text-base text-gray-900 dark:text-gray-100">
                       {loremText}
                     </LeanText>
                   </LeanView>
                 ) : item.channel_message.body_text_length > 0 ? (
                   <>
-                    <LeanText tw="py-1.5 text-sm  text-gray-900 dark:text-gray-100">
+                    <LeanText tw="py-1.5 text-base  text-gray-900 dark:text-gray-100">
                       {loremText}
                     </LeanText>
                     <BlurView
@@ -399,24 +246,59 @@ export const MessageItem = memo(
             ) : (
               <>
                 {item.channel_message.body_text_length > 0 ? (
-                  <LeanText
-                    tw={"text-sm text-gray-900 dark:text-gray-100"}
-                    style={
-                      Platform.OS === "web"
-                        ? {
-                            // @ts-ignore
-                            wordBreak: "break-word",
-                          }
-                        : {}
-                    }
+                  <LeanView
+                    tw="w-fit max-w-[50%] rounded-xl px-3 py-3 "
+                    style={{
+                      minWidth:
+                        item.reaction_group.length > 0
+                          ? 45 * item.reaction_group.length
+                          : undefined,
+                      backgroundColor: isByCreator
+                        ? "#0074FE"
+                        : isDark
+                        ? "#1F1F1F"
+                        : "#ECECEC",
+                    }}
                   >
-                    {linkifiedMessage}
-                    {messageWasEdited && (
-                      <LeanText tw="text-xs text-gray-500 dark:text-gray-200">
-                        {` • edited`}
-                      </LeanText>
-                    )}
-                  </LeanText>
+                    <LeanText
+                      tw={"text-base"}
+                      style={
+                        Platform.OS === "web"
+                          ? {
+                              // @ts-ignore
+                              wordBreak: "break-word",
+                              color: isByCreator
+                                ? "#FFF"
+                                : isDark
+                                ? "#FFF"
+                                : "#000",
+                            }
+                          : {
+                              color: isByCreator
+                                ? "#FFF"
+                                : isDark
+                                ? "#FFF"
+                                : "#000",
+                            }
+                      }
+                    >
+                      {linkifiedMessage}
+                      {messageWasEdited && (
+                        <LeanText
+                          tw="text-[10px]"
+                          style={{
+                            color: isByCreator
+                              ? "#FFF"
+                              : isDark
+                              ? "#FFF"
+                              : "#000",
+                          }}
+                        >
+                          {` • edited`}
+                        </LeanText>
+                      )}
+                    </LeanText>
+                  </LeanView>
                 ) : null}
               </>
             )}
@@ -466,16 +348,182 @@ export const MessageItem = memo(
                 isViewable={permissions?.can_view_creator_messages}
               />
             ) : null}
+
+            <LeanView
+              tw="flex-row"
+              style={{
+                gap: 12,
+                display:
+                  isByCreator && !permissions?.can_view_creator_messages
+                    ? "none"
+                    : undefined,
+              }}
+            >
+              <Reaction
+                reactions={reactions}
+                reactionGroup={item.reaction_group}
+                onPress={(id) => {
+                  enableLayoutAnimations(true);
+                  requestAnimationFrame(async () => {
+                    await reactOnMessage.trigger({
+                      messageId: item.channel_message.id,
+                      reactionId: id,
+                    });
+                    requestAnimationFrame(() => {
+                      enableLayoutAnimations(false);
+                    });
+                  });
+                }}
+              />
+              <DropdownMenuRoot>
+                <DropdownMenuTrigger
+                  // @ts-expect-error - RNW
+                  style={Platform.select({
+                    web: {
+                      cursor: "pointer",
+                    },
+                  })}
+                >
+                  <MoreHorizontal
+                    color={isDark ? colors.gray[400] : colors.gray[700]}
+                    width={20}
+                    height={20}
+                  />
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent loop sideOffset={8}>
+                  {item.channel_message?.sent_by?.profile.profile_id ===
+                    user?.user?.data.profile.profile_id || isUserAdmin ? (
+                    <DropdownMenuItem
+                      onSelect={() => {
+                        Alert.alert(
+                          "Are you sure you want to delete this message?",
+                          "",
+                          [
+                            {
+                              text: "Cancel",
+                            },
+                            {
+                              text: "Delete",
+                              style: "destructive",
+                              onPress: () => {
+                                enableLayoutAnimations(true);
+                                requestAnimationFrame(async () => {
+                                  listRef.current?.prepareForLayoutAnimationRender();
+                                  await deleteMessage.trigger({
+                                    messageId: item.channel_message.id,
+                                  });
+                                  requestAnimationFrame(() => {
+                                    enableLayoutAnimations(false);
+                                  });
+                                });
+                              },
+                            },
+                          ]
+                        );
+                      }}
+                      key="delete"
+                    >
+                      <MenuItemIcon
+                        Icon={Trash}
+                        ios={{
+                          paletteColors: ["red"],
+                          name: "trash",
+                        }}
+                      />
+                      <DropdownMenuItemTitle tw="font-semibold text-red-500">
+                        Delete
+                      </DropdownMenuItemTitle>
+                    </DropdownMenuItem>
+                  ) : null}
+
+                  {
+                    // edit message only if message is not older than 2 hours and it belongs to the user
+                    item.channel_message?.sent_by?.profile.profile_id ===
+                      user?.user?.data.profile.profile_id &&
+                    allowMessageEditing ? (
+                      <DropdownMenuItem
+                        onSelect={() => {
+                          runOnUI(() => {
+                            "worklet";
+                            const values = measure(animatedViewRef);
+                            if (values) {
+                              editMessageItemDimension.value = {
+                                height: values.height,
+                                pageY: values.pageY,
+                              };
+                            }
+                            runOnJS(setEditMessage)({
+                              text: item.channel_message.body,
+                              id: item.channel_message.id,
+                            });
+                          })();
+                        }}
+                        key="edit"
+                      >
+                        <MenuItemIcon
+                          Icon={Edit}
+                          ios={{
+                            name: "pencil",
+                          }}
+                        />
+                        <DropdownMenuItemTitle tw="font-semibold text-gray-700 dark:text-gray-400">
+                          Edit
+                        </DropdownMenuItemTitle>
+                      </DropdownMenuItem>
+                    ) : null
+                  }
+                  {item.channel_message?.sent_by?.profile.profile_id !==
+                  user?.user?.data.profile.profile_id ? (
+                    <DropdownMenuItem
+                      onSelect={() => {
+                        router.push(
+                          {
+                            pathname:
+                              Platform.OS === "web"
+                                ? router.pathname
+                                : "/report",
+                            query: {
+                              ...router.query,
+                              reportModal: true,
+                              channelMessageId: item.channel_message.id,
+                            },
+                          },
+                          Platform.OS === "web" ? router.asPath : undefined
+                        );
+                      }}
+                      key="report"
+                    >
+                      <MenuItemIcon
+                        Icon={Flag}
+                        ios={{
+                          name: "flag",
+                        }}
+                      />
+                      <DropdownMenuItemTitle tw="font-semibold text-gray-700 dark:text-gray-400">
+                        Report
+                      </DropdownMenuItemTitle>
+                    </DropdownMenuItem>
+                  ) : null}
+                </DropdownMenuContent>
+              </DropdownMenuRoot>
+            </LeanView>
+
             {item.reaction_group.length > 0 ? (
-              <AnimatedView layout={Layout}>
-                <MessageReactions
-                  key={channel_message.id}
-                  reactionGroup={item.reaction_group}
-                  channelId={channelId}
-                  channelReactions={reactions}
-                  messageId={channel_message.id}
-                />
-              </AnimatedView>
+              <>
+                <AnimatedView
+                  layout={Layout}
+                  tw="absolute -bottom-4 left-2 justify-center rounded-full bg-gray-200 dark:bg-gray-900"
+                >
+                  <MessageReactions
+                    key={channel_message.id}
+                    reactionGroup={item.reaction_group}
+                    channelId={channelId}
+                    channelReactions={reactions}
+                    messageId={channel_message.id}
+                  />
+                </AnimatedView>
+              </>
             ) : null}
           </LeanView>
         </LeanView>
diff --git a/packages/app/components/creator-channels/messages.tsx b/packages/app/components/creator-channels/messages.tsx
index 770ad2436a..489b674749 100644
--- a/packages/app/components/creator-channels/messages.tsx
+++ b/packages/app/components/creator-channels/messages.tsx
@@ -323,6 +323,35 @@ export const Messages = memo(() => {
     }
   }, [channelDetail.data?.owner, error, router, fresh]);
 
+  const transformedData = useMemo(() => {
+    return data.map((item, index, array) => {
+      let isSameSenderAsNext = false;
+
+      if (index < array.length - 1) {
+        const currentSenderId = item.channel_message.sent_by.profile.profile_id;
+        const nextSenderId =
+          array[index + 1].channel_message.sent_by.profile.profile_id;
+
+        const currentDate = new Date(item.channel_message.created_at).getTime();
+        const nextDate = new Date(
+          array[index + 1].channel_message.created_at
+        ).getTime();
+        const dayDifference =
+          Math.abs(currentDate - nextDate) / (1000 * 60 * 60 * 24);
+
+        // Check for same sender as next and less than a day's difference
+        isSameSenderAsNext =
+          currentSenderId === nextSenderId && dayDifference < 1;
+        console.log(
+          `Item at index ${index}: Current Sender ID = ${currentSenderId}, Next Sender ID = ${nextSenderId}, isSameSenderAsNext = ${isSameSenderAsNext}`
+        );
+      }
+
+      // For the last item in the data (visually the first in the list), it's not same as the next
+      return { ...item, isSameSenderAsNext };
+    });
+  }, [data]);
+
   const renderItem: ListRenderItem<ChannelMessageItem> = useCallback(
     ({ item, extraData }) => {
       return (
@@ -562,7 +591,7 @@ export const Messages = memo(() => {
               <AnimatedInfiniteScrollListWithRef
                 ref={listRef}
                 keyExtractor={keyExtractor}
-                data={data}
+                data={transformedData}
                 onEndReached={onLoadMore}
                 inverted
                 getItemType={getItemType}
diff --git a/packages/app/components/creator-channels/types.ts b/packages/app/components/creator-channels/types.ts
index c7c040cb02..fc1d624c9f 100644
--- a/packages/app/components/creator-channels/types.ts
+++ b/packages/app/components/creator-channels/types.ts
@@ -62,6 +62,7 @@ export type ReactionGroup = {
 export type ChannelMessageItem = {
   channel_message: ChannelMessage;
   reaction_group: ReactionGroup[];
+  isSameSenderAsNext?: boolean;
 };
 
 export type ChannelMessageResponse = Array<ChannelMessageItem>;
diff --git a/packages/app/components/reaction/message-reactions.tsx b/packages/app/components/reaction/message-reactions.tsx
index f74a12db38..64fef729a9 100644
--- a/packages/app/components/reaction/message-reactions.tsx
+++ b/packages/app/components/reaction/message-reactions.tsx
@@ -57,7 +57,7 @@ export const MessageReactions = ({
   );
 
   return (
-    <View tw="-ml-0.5 w-full flex-1 flex-row items-center">
+    <View tw="w-full flex-1 flex-row items-center gap-1">
       {channelReactions
         ? channelReactions.map((item, index) => {
             const userReaction = reactionGroup.find(
@@ -67,7 +67,6 @@ export const MessageReactions = ({
               return (
                 <AnimatedView
                   key={index}
-                  tw="mr-1"
                   layout={Layout.springify().damping(500).stiffness(100)}
                   entering={FadeIn}
                   exiting={FadeOut}
@@ -75,20 +74,20 @@ export const MessageReactions = ({
                   <Pressable
                     onPress={() => handleReactionPress(item.id)}
                     tw={[
-                      "min-h-[25px] items-center justify-center px-2",
+                      "min-h-[20px] items-center justify-center px-2",
                       userReaction.self_reacted
-                        ? "rounded-lg bg-gray-100 dark:bg-gray-900"
+                        ? "rounded-lg bg-gray-100 dark:bg-gray-700"
                         : "",
                     ]}
                   >
                     <Text
                       tw="text-gray-700 dark:text-gray-200"
                       style={{
-                        fontSize: 12,
+                        fontSize: 10,
                         lineHeight: Platform.select({
-                          web: 12,
+                          web: 10,
                           ios: undefined,
-                          android: 14,
+                          android: 12,
                         }),
                       }}
                     >

From d9686726b617877048303402908cc9a05289ea03 Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Tue, 21 Nov 2023 23:41:56 +0100
Subject: [PATCH 02/14] Update AudioPlayer component styling

---
 packages/app/components/audio-player/audio-player.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/components/audio-player/audio-player.tsx b/packages/app/components/audio-player/audio-player.tsx
index c173fc6acc..bd28aa474b 100644
--- a/packages/app/components/audio-player/audio-player.tsx
+++ b/packages/app/components/audio-player/audio-player.tsx
@@ -123,7 +123,7 @@ export const AudioPlayer = memo(
     }, [id, prepare, url]);
 
     return (
-      <LeanView tw="web:max-w-sm web:p-2 min-w-[320px] overflow-hidden rounded-full bg-black p-4 dark:bg-white">
+      <LeanView tw="web:max-w-sm web:p-2 web:min-w-[320px] min-w-[80%] overflow-hidden rounded-full bg-black p-4 dark:bg-white">
         <LeanView tw="flex-row items-center">
           <LeanView tw="mr-4 items-center justify-center">
             <LeanView tw="h-12 w-12 items-center justify-center rounded-full bg-white dark:bg-black">

From 2deb66447d5e715600df87fafc816e4449bf8eaf Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Tue, 21 Nov 2023 23:42:03 +0100
Subject: [PATCH 03/14] Fix consecutive message count bug in Messages component

---
 .../components/creator-channels/messages.tsx  | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/app/components/creator-channels/messages.tsx b/packages/app/components/creator-channels/messages.tsx
index 489b674749..27c1a52c44 100644
--- a/packages/app/components/creator-channels/messages.tsx
+++ b/packages/app/components/creator-channels/messages.tsx
@@ -324,6 +324,8 @@ export const Messages = memo(() => {
   }, [channelDetail.data?.owner, error, router, fresh]);
 
   const transformedData = useMemo(() => {
+    let consecutiveCount = 0; // Initialize the consecutive message count
+
     return data.map((item, index, array) => {
       let isSameSenderAsNext = false;
 
@@ -339,24 +341,33 @@ export const Messages = memo(() => {
         const dayDifference =
           Math.abs(currentDate - nextDate) / (1000 * 60 * 60 * 24);
 
-        // Check for same sender as next and less than a day's difference
+        // Increment count or reset if sender changes
+        if (currentSenderId === nextSenderId) {
+          consecutiveCount++;
+        } else {
+          consecutiveCount = 0; // Reset count if sender changes
+        }
+
+        // Check for same sender as next, less than a day's difference, and not the 5th message in a row
         isSameSenderAsNext =
-          currentSenderId === nextSenderId && dayDifference < 1;
-        console.log(
-          `Item at index ${index}: Current Sender ID = ${currentSenderId}, Next Sender ID = ${nextSenderId}, isSameSenderAsNext = ${isSameSenderAsNext}`
-        );
+          currentSenderId === nextSenderId &&
+          dayDifference < 1 &&
+          consecutiveCount % 10 !== 0;
+      } else {
+        // For the last item in the list, always show the sender
+        isSameSenderAsNext = false;
       }
 
-      // For the last item in the data (visually the first in the list), it's not same as the next
       return { ...item, isSameSenderAsNext };
     });
   }, [data]);
 
   const renderItem: ListRenderItem<ChannelMessageItem> = useCallback(
-    ({ item, extraData }) => {
+    ({ item, index, extraData }) => {
       return (
         <MessageItem
           item={item}
+          index={index}
           reactions={extraData.reactions}
           channelId={extraData.channelId}
           listRef={listRef}

From 26122575f16a8975a78721484e74d5ca3a0a818c Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Tue, 21 Nov 2023 23:42:07 +0100
Subject: [PATCH 04/14] Add animation to image preview component

---
 .../creator-channels/components/image-preview.web.tsx           | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/app/components/creator-channels/components/image-preview.web.tsx b/packages/app/components/creator-channels/components/image-preview.web.tsx
index 21696ec29b..e0d1cedb3c 100644
--- a/packages/app/components/creator-channels/components/image-preview.web.tsx
+++ b/packages/app/components/creator-channels/components/image-preview.web.tsx
@@ -65,6 +65,8 @@ export const ImagePreview = ({
           }}
           transition={{ type: "timing" }}
           draggable={false}
+          animate={{ transform: "translate3d(0,0,0) scale(1)" }}
+          initial={{ transform: "translate3d(0,0,0) scale(1)" }}
         />
 
         <Modal

From 919a7249fd2a523eb535ceee6df2e9cca4020aa3 Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Tue, 21 Nov 2023 23:42:12 +0100
Subject: [PATCH 05/14] Fix styling issues in MessageItem component

---
 .../components/message-item.tsx               | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/app/components/creator-channels/components/message-item.tsx b/packages/app/components/creator-channels/components/message-item.tsx
index aaa29252e1..2d02e3a1ae 100644
--- a/packages/app/components/creator-channels/components/message-item.tsx
+++ b/packages/app/components/creator-channels/components/message-item.tsx
@@ -61,6 +61,7 @@ const AnimatedView = Animated.createAnimatedComponent(View);
 export const MessageItem = memo(
   ({
     item,
+    index,
     reactions,
     channelId,
     listRef,
@@ -71,6 +72,7 @@ export const MessageItem = memo(
     isUserAdmin,
     channelOwnerProfileId,
   }: MessageItemProps & {
+    index: number;
     edition?: CreatorEditionResponse;
     isUserAdmin?: boolean;
     permissions?: ChannelById["permissions"];
@@ -103,8 +105,8 @@ export const MessageItem = memo(
                 10
               ),
               isByCreator
-                ? "text-base underline text-white"
-                : "text-underline text-base"
+                ? "text-base underline text-white font-medium"
+                : "text-underline text-base font-medium"
             )
           : "",
       [channel_message.body, isByCreator]
@@ -170,16 +172,18 @@ export const MessageItem = memo(
       <AnimatedView
         style={[
           {
-            marginBottom: item.reaction_group.length > 0 ? 20 : 0,
+            backgroundColor: "red",
           },
           style,
         ]}
-        tw="mt-1 px-3"
+        tw="group mb-1 flex-1 px-3"
         ref={animatedViewRef}
       >
         <LeanView
           tw="mb-1 mt-6 flex-row items-center"
-          style={{ display: item.isSameSenderAsNext ? "none" : "flex" }}
+          style={{
+            display: item.isSameSenderAsNext ? "none" : "flex",
+          }}
         >
           <LeanView>
             <Link
@@ -215,8 +219,13 @@ export const MessageItem = memo(
           </LeanView>
         </LeanView>
 
-        <LeanView tw="ml-9 flex-row">
-          <LeanView tw="flex-1 flex-row items-center gap-4">
+        <LeanView
+          tw="web:ml-9 flex-1 flex-row items-center"
+          style={{
+            marginBottom: item.reaction_group.length > 0 ? 25 : 0,
+          }}
+        >
+          <LeanView tw="md:web:justify-start flex-1 flex-row items-center justify-between">
             {isByCreator && !permissions?.can_view_creator_messages ? (
               <LeanView tw="-mb-0.5 -ml-2 -mt-0.5 select-none overflow-hidden px-2 py-0.5">
                 {Platform.OS === "web" ? (
@@ -247,11 +256,11 @@ export const MessageItem = memo(
               <>
                 {item.channel_message.body_text_length > 0 ? (
                   <LeanView
-                    tw="w-fit max-w-[50%] rounded-xl px-3 py-3 "
+                    tw="xl:web:max-w-[60%] w-fit max-w-[80%] rounded-xl px-3 py-3 "
                     style={{
                       minWidth:
                         item.reaction_group.length > 0
-                          ? 45 * item.reaction_group.length
+                          ? 48 * item.reaction_group.length
                           : undefined,
                       backgroundColor: isByCreator
                         ? "#0074FE"
@@ -321,6 +330,7 @@ export const MessageItem = memo(
               Platform.OS === "web" ? (
                 <>
                   <ImagePreview
+                    key={`img-${channel_message.id}`}
                     attachment={channel_message}
                     isViewable={permissions?.can_view_creator_messages}
                   />
@@ -329,6 +339,7 @@ export const MessageItem = memo(
                 <SharedElement tag={channel_message?.id.toString()}>
                   {({ animatedRef, animatedStyles }) => (
                     <ImagePreview
+                      key={`img-${channel_message.id}`}
                       style={animatedStyles}
                       animatedRef={animatedRef}
                       attachment={channel_message}
@@ -350,7 +361,7 @@ export const MessageItem = memo(
             ) : null}
 
             <LeanView
-              tw="flex-row"
+              tw="md:web:opacity-0 ml-4 w-12 cursor-pointer flex-row group-hover:opacity-100"
               style={{
                 gap: 12,
                 display:
@@ -386,8 +397,8 @@ export const MessageItem = memo(
                 >
                   <MoreHorizontal
                     color={isDark ? colors.gray[400] : colors.gray[700]}
-                    width={20}
-                    height={20}
+                    width={18}
+                    height={18}
                   />
                 </DropdownMenuTrigger>
 
@@ -512,11 +523,11 @@ export const MessageItem = memo(
             {item.reaction_group.length > 0 ? (
               <>
                 <AnimatedView
+                  key={channel_message.id}
                   layout={Layout}
-                  tw="absolute -bottom-4 left-2 justify-center rounded-full bg-gray-200 dark:bg-gray-900"
+                  tw="absolute -bottom-5 left-2 z-50"
                 >
                   <MessageReactions
-                    key={channel_message.id}
                     reactionGroup={item.reaction_group}
                     channelId={channelId}
                     channelReactions={reactions}

From e274cf1e2d3622dc7948750359e3e459bb11e7d9 Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Tue, 21 Nov 2023 23:42:17 +0100
Subject: [PATCH 06/14] Update emoji button dimensions

---
 packages/app/components/reaction/constants.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/reaction/constants.ts b/packages/app/components/reaction/constants.ts
index 7b622045b1..9605b4988a 100644
--- a/packages/app/components/reaction/constants.ts
+++ b/packages/app/components/reaction/constants.ts
@@ -1,5 +1,5 @@
-export const emojiButtonWidth = 54;
-export const emojiButtonHeight = 37;
+export const emojiButtonWidth = 50;
+export const emojiButtonHeight = 36;
 
 export const reactionButtonSize = 18;
 export const reactionEmojis = ["😍", "🔥", "🤣", "🤯", "🙏"];

From 9ae640372d6434ed464262dfadd1b48c4a5e6a71 Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Tue, 21 Nov 2023 23:42:23 +0100
Subject: [PATCH 07/14] Refactor message reactions component styles

---
 packages/app/components/reaction/message-reactions.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/app/components/reaction/message-reactions.tsx b/packages/app/components/reaction/message-reactions.tsx
index 64fef729a9..b5224d6933 100644
--- a/packages/app/components/reaction/message-reactions.tsx
+++ b/packages/app/components/reaction/message-reactions.tsx
@@ -57,7 +57,7 @@ export const MessageReactions = ({
   );
 
   return (
-    <View tw="w-full flex-1 flex-row items-center gap-1">
+    <View tw="w-full flex-1 flex-row items-center" style={{ columnGap: 2 }}>
       {channelReactions
         ? channelReactions.map((item, index) => {
             const userReaction = reactionGroup.find(
@@ -74,10 +74,10 @@ export const MessageReactions = ({
                   <Pressable
                     onPress={() => handleReactionPress(item.id)}
                     tw={[
-                      "min-h-[20px] items-center justify-center px-2",
+                      "min-h-[25px] items-center justify-center rounded-lg border-2 border-white px-1.5 dark:border-black",
                       userReaction.self_reacted
-                        ? "rounded-lg bg-gray-100 dark:bg-gray-700"
-                        : "",
+                        ? "bg-[#C4DFFF] dark:bg-[#102743]"
+                        : "bg-[#F1F1F1] dark:bg-[#1C1C1C]",
                     ]}
                   >
                     <Text

From 466d2cea302e69f1809354c57091cc970848c5ba Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Tue, 21 Nov 2023 23:42:28 +0100
Subject: [PATCH 08/14] Add useWindowDimensions hook to ReactionProvider

---
 .../components/reaction/reaction-provider.tsx    | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/app/components/reaction/reaction-provider.tsx b/packages/app/components/reaction/reaction-provider.tsx
index c1e5070286..f9e5149b10 100644
--- a/packages/app/components/reaction/reaction-provider.tsx
+++ b/packages/app/components/reaction/reaction-provider.tsx
@@ -1,4 +1,5 @@
 import { useState, useMemo, useCallback } from "react";
+import { useWindowDimensions } from "react-native";
 
 import Animated, {
   useSharedValue,
@@ -19,6 +20,7 @@ export const ReactionProvider = ({ children }: any) => {
   const [position, setPosition] = useState({ top: 0, left: 0 });
   const [reactions, setReactions] = useState<any>(null);
   const animatedV = useSharedValue(0);
+  const { width } = useWindowDimensions();
   const close = () => {
     setVisible(false);
   };
@@ -52,27 +54,21 @@ export const ReactionProvider = ({ children }: any) => {
       willChange: "transform", // make it hardware accelerated on web
       transform: [
         {
-          translateX: totalRectButtonWidth / 2 - 5,
+          translateX: width < 768 ? -18 : totalRectButtonWidth - 30,
         },
         {
-          translateY: -emojiButtonWidth / 2,
+          translateY: -emojiButtonWidth / 2 + 10,
         },
         { scale: animatedV.value },
-        {
-          translateX: -totalRectButtonWidth / 2 - 5,
-        },
-        {
-          translateY: emojiButtonWidth / 2,
-        },
       ],
     };
-  }, [animatedV]);
+  }, [animatedV, width]);
 
   return (
     <ReactionContext.Provider value={memoizedValue}>
       {children}
       {visible && (
-        <View tw="absolute h-full w-full">
+        <View tw="absolute h-full w-full bg-black/60">
           <Pressable tw="absolute h-full w-full" onPress={handleClose} />
           <View tw="absolute" style={position}>
             <Animated.View style={animatedStyle}>{reactions}</Animated.View>

From 335b02b3465e2ba7767136f2bd45e25a66cf31b8 Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Tue, 21 Nov 2023 23:50:21 +0100
Subject: [PATCH 09/14] Fix key prop in MessageItem component

---
 .../app/components/creator-channels/components/message-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/components/creator-channels/components/message-item.tsx b/packages/app/components/creator-channels/components/message-item.tsx
index 2d02e3a1ae..e0a5e6f61e 100644
--- a/packages/app/components/creator-channels/components/message-item.tsx
+++ b/packages/app/components/creator-channels/components/message-item.tsx
@@ -523,7 +523,7 @@ export const MessageItem = memo(
             {item.reaction_group.length > 0 ? (
               <>
                 <AnimatedView
-                  key={channel_message.id}
+                  key={`${channel_message.id}-${item.reaction_group.length}`}
                   layout={Layout}
                   tw="absolute -bottom-5 left-2 z-50"
                 >

From dd49c438979158f1c803d673ee7b87470e810d51 Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Tue, 21 Nov 2023 23:54:19 +0100
Subject: [PATCH 10/14] Fix translation bug in ReactionProvider component

---
 packages/app/components/reaction/reaction-provider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/components/reaction/reaction-provider.tsx b/packages/app/components/reaction/reaction-provider.tsx
index f9e5149b10..2da45f9c22 100644
--- a/packages/app/components/reaction/reaction-provider.tsx
+++ b/packages/app/components/reaction/reaction-provider.tsx
@@ -54,7 +54,7 @@ export const ReactionProvider = ({ children }: any) => {
       willChange: "transform", // make it hardware accelerated on web
       transform: [
         {
-          translateX: width < 768 ? -18 : totalRectButtonWidth - 30,
+          translateX: width < 768 ? -18 : -totalRectButtonWidth / 2 + 60,
         },
         {
           translateY: -emojiButtonWidth / 2 + 10,

From 66edaee403dac743e5999cfd12dd28e5ac916b6d Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Wed, 22 Nov 2023 00:19:47 +0100
Subject: [PATCH 11/14] Adjust styling and layout in MessageItem component

---
 .../components/message-item.tsx               | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/app/components/creator-channels/components/message-item.tsx b/packages/app/components/creator-channels/components/message-item.tsx
index e0a5e6f61e..4db0c5a2e7 100644
--- a/packages/app/components/creator-channels/components/message-item.tsx
+++ b/packages/app/components/creator-channels/components/message-item.tsx
@@ -180,7 +180,7 @@ export const MessageItem = memo(
         ref={animatedViewRef}
       >
         <LeanView
-          tw="mb-1 mt-6 flex-row items-center"
+          tw="web:mb-1 mb-3 mt-6 flex-row items-center"
           style={{
             display: item.isSameSenderAsNext ? "none" : "flex",
           }}
@@ -227,29 +227,39 @@ export const MessageItem = memo(
         >
           <LeanView tw="md:web:justify-start flex-1 flex-row items-center justify-between">
             {isByCreator && !permissions?.can_view_creator_messages ? (
-              <LeanView tw="-mb-0.5 -ml-2 -mt-0.5 select-none overflow-hidden px-2 py-0.5">
+              <LeanView
+                tw="xl:web:max-w-[60%] w-fit max-w-[80%] rounded-xl px-3 py-3 "
+                style={{
+                  minWidth:
+                    item.reaction_group.length > 0
+                      ? 48 * item.reaction_group.length
+                      : undefined,
+                  backgroundColor: "#0074FE",
+                }}
+              >
                 {Platform.OS === "web" ? (
                   // INFO: I had to do it like that because blur-sm would crash for no reason even with web prefix
                   <LeanView tw="blur-sm">
-                    <LeanText tw="text-base text-gray-900 dark:text-gray-100">
-                      {loremText}
-                    </LeanText>
+                    <LeanText tw="text-base text-white">{loremText}</LeanText>
                   </LeanView>
                 ) : item.channel_message.body_text_length > 0 ? (
-                  <>
-                    <LeanText tw="py-1.5 text-base  text-gray-900 dark:text-gray-100">
+                  <LeanView tw="overflow-hidden">
+                    <LeanText tw="text-base text-gray-900 dark:text-gray-100">
                       {loremText}
                     </LeanText>
                     <BlurView
                       intensity={10}
+                      tint="default"
                       style={{
-                        left: 0,
-                        height: "200%",
-                        width: "200%",
+                        left: -20,
+                        top: -20,
+                        right: -20,
+                        bottom: -20,
                         position: "absolute",
+                        borderRadius: 9999,
                       }}
                     />
-                  </>
+                  </LeanView>
                 ) : null}
               </LeanView>
             ) : (

From c00e8d619aaef834330a800c11a60256e584bd2e Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Wed, 22 Nov 2023 00:19:53 +0100
Subject: [PATCH 12/14] Fix null reference in Messages component

---
 packages/app/components/creator-channels/messages.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/app/components/creator-channels/messages.tsx b/packages/app/components/creator-channels/messages.tsx
index 27c1a52c44..723f1a1249 100644
--- a/packages/app/components/creator-channels/messages.tsx
+++ b/packages/app/components/creator-channels/messages.tsx
@@ -330,13 +330,16 @@ export const Messages = memo(() => {
       let isSameSenderAsNext = false;
 
       if (index < array.length - 1) {
-        const currentSenderId = item.channel_message.sent_by.profile.profile_id;
+        const currentSenderId =
+          item?.channel_message?.sent_by?.profile?.profile_id;
         const nextSenderId =
-          array[index + 1].channel_message.sent_by.profile.profile_id;
+          array[index + 1]?.channel_message?.sent_by?.profile?.profile_id;
 
-        const currentDate = new Date(item.channel_message.created_at).getTime();
+        const currentDate = new Date(
+          item.channel_message?.created_at
+        ).getTime();
         const nextDate = new Date(
-          array[index + 1].channel_message.created_at
+          array[index + 1].channel_message?.created_at
         ).getTime();
         const dayDifference =
           Math.abs(currentDate - nextDate) / (1000 * 60 * 60 * 24);

From a8d50b7a467c9954a7a01669f6ccf59e6cd9d9ad Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Wed, 22 Nov 2023 00:21:34 +0100
Subject: [PATCH 13/14] Add date display to message item

---
 .../components/creator-channels/components/message-item.tsx  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/app/components/creator-channels/components/message-item.tsx b/packages/app/components/creator-channels/components/message-item.tsx
index 4db0c5a2e7..274bd5eeaa 100644
--- a/packages/app/components/creator-channels/components/message-item.tsx
+++ b/packages/app/components/creator-channels/components/message-item.tsx
@@ -217,6 +217,11 @@ export const MessageItem = memo(
               </LeanText>
             </Link>
           </LeanView>
+          <LeanView tw="ml-2">
+            <LeanText tw={"text-xs text-gray-700 dark:text-gray-200"}>
+              {formatDateRelativeWithIntl(channel_message.created_at)}
+            </LeanText>
+          </LeanView>
         </LeanView>
 
         <LeanView

From c37d6dd13c263f3a4ae4ae78a89780ed48368919 Mon Sep 17 00:00:00 2001
From: Hirbod Mirjavadi <hm@nightstomp.com>
Date: Wed, 22 Nov 2023 00:28:42 +0100
Subject: [PATCH 14/14] Fix display issue in MessageItem component

---
 .../app/components/creator-channels/components/message-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/components/creator-channels/components/message-item.tsx b/packages/app/components/creator-channels/components/message-item.tsx
index 274bd5eeaa..e40f3bf8e6 100644
--- a/packages/app/components/creator-channels/components/message-item.tsx
+++ b/packages/app/components/creator-channels/components/message-item.tsx
@@ -182,7 +182,7 @@ export const MessageItem = memo(
         <LeanView
           tw="web:mb-1 mb-3 mt-6 flex-row items-center"
           style={{
-            display: item.isSameSenderAsNext ? "none" : "flex",
+            display: item.isSameSenderAsNext ? "none" : undefined,
           }}
         >
           <LeanView>