feat: simplify multiple posts from the same blogger in activities

src/components/home/HomeFeed.tsx

@@ -19,6 +19,7 @@ import { useDate } from "~/hooks/useDate"
 import { useTranslation } from "~/lib/i18n/client"
 import { getStorage, setStorage } from "~/lib/storage"
 import { ExpandedNote } from "~/lib/types"
+import { cn } from "~/lib/utils"
 import type { FeedType, SearchType } from "~/models/home.model"
 import { useGetFeed } from "~/queries/home"
 
@@ -26,10 +27,12 @@ import { EmptyState } from "../ui/EmptyState"
 
 const Post = ({
   post,
+  previousPost,
   filtering,
   keyword,
 }: {
   post: ExpandedNote
+  previousPost?: ExpandedNote
   filtering: number
   keyword?: string
 }) => {
@@ -45,50 +48,54 @@ const Post = ({
     return <div className="h-[1px]"></div>
   }
 
+  let simple = post.characterId === previousPost?.characterId
+
   return (
-    <div>
-      <div className="flex items-center space-x-2">
-        <CharacterFloatCard siteId={post.character?.handle}>
-          <Link
-            target="_blank"
-            href={`/api/redirection?characterId=${post.characterId}`}
-            className="flex items-center space-x-4 cursor-pointer"
-            prefetch={false}
+    <div className={cn(simple ? "!mt-4" : "")}>
+      {!simple && (
+        <div className="flex items-center space-x-2">
+          <CharacterFloatCard siteId={post.character?.handle}>
+            <Link
+              target="_blank"
+              href={`/api/redirection?characterId=${post.characterId}`}
+              className="flex items-center space-x-4 cursor-pointer"
+              prefetch={false}
+            >
+              <span className="w-10 h-10 inline-block">
+                <Image
+                  className="rounded-full"
+                  src={
+                    post.character?.metadata?.content?.avatars?.[0] ||
+                    "ipfs://bafkreiabgixxp63pg64moxnsydz7hewmpdkxxi3kdsa4oqv4pb6qvwnmxa"
+                  }
+                  alt={post.character?.handle || ""}
+                  width="40"
+                  height="40"
+                ></Image>
+              </span>
+              <span className="font-medium">
+                {post.character?.metadata?.content?.name ||
+                  post.character?.handle}
+              </span>
+            </Link>
+          </CharacterFloatCard>
+          <Titles characterId={post.characterId} />
+          <span className="text-zinc-400">·</span>
+          <time
+            dateTime={date.formatToISO(post.createdAt)}
+            className="xlog-post-date whitespace-nowrap text-zinc-400 text-sm"
           >
-            <span className="w-10 h-10 inline-block">
-              <Image
-                className="rounded-full"
-                src={
-                  post.character?.metadata?.content?.avatars?.[0] ||
-                  "ipfs://bafkreiabgixxp63pg64moxnsydz7hewmpdkxxi3kdsa4oqv4pb6qvwnmxa"
-                }
-                alt={post.character?.handle || ""}
-                width="40"
-                height="40"
-              ></Image>
-            </span>
-            <span className="font-medium">
-              {post.character?.metadata?.content?.name ||
-                post.character?.handle}
-            </span>
-          </Link>
-        </CharacterFloatCard>
-        <Titles characterId={post.characterId} />
-        <span className="text-zinc-400">·</span>
-        <time
-          dateTime={date.formatToISO(post.createdAt)}
-          className="xlog-post-date whitespace-nowrap text-zinc-400 text-sm"
-        >
-          {t("ago", {
-            time: date.dayjs
-              .duration(
-                date.dayjs(post?.createdAt).diff(date.dayjs(), "minute"),
-                "minute",
-              )
-              .humanize(),
-          })}
-        </time>
-      </div>
+            {t("ago", {
+              time: date.dayjs
+                .duration(
+                  date.dayjs(post?.createdAt).diff(date.dayjs(), "minute"),
+                  "minute",
+                )
+                .humanize(),
+            })}
+          </time>
+        </div>
+      )}
       <Link
         target="_blank"
         href={`/api/redirection?characterId=${post.characterId}&noteId=${post.noteId}`}
@@ -96,39 +103,49 @@ const Post = ({
         prefetch={false}
       >
         <div className="flex-1 flex justify-center flex-col w-full min-w-0">
-          <h3 className="xlog-post-title text-2xl font-bold text-zinc-700">
+          <h3
+            className={cn(
+              "xlog-post-title font-bold text-zinc-700",
+              simple ? "text-xl" : "text-2xl",
+            )}
+          >
             {post.metadata?.content?.title}
           </h3>
-          <div className="xlog-post-meta text-sm text-zinc-400 mt-1 space-x-4 flex items-center mr-8">
-            {!!post.metadata?.content?.tags?.filter(
-              (tag) => tag !== "post" && tag !== "page",
-            ).length && (
-              <span className="xlog-post-tags space-x-1 truncate min-w-0">
-                {post.metadata?.content?.tags
-                  ?.filter((tag) => tag !== "post" && tag !== "page")
-                  .map((tag, index) => (
-                    <span
-                      className="hover:text-zinc-600"
-                      key={tag + index}
-                      onClick={(e) => {
-                        e.preventDefault()
-                        router.push(`/tag/${tag}`)
-                      }}
-                    >
-                      #{tag}
-                    </span>
-                  ))}
-              </span>
-            )}
-            {post.stat?.viewDetailCount && (
-              <span className="xlog-post-views inline-flex items-center">
-                <i className="icon-[mingcute--eye-line] mr-[2px]" />
-                <span>{post.stat?.viewDetailCount}</span>
-              </span>
-            )}
-          </div>
+          {!simple && (
+            <div className="xlog-post-meta text-sm text-zinc-400 mt-1 space-x-4 flex items-center mr-8">
+              {!!post.metadata?.content?.tags?.filter(
+                (tag) => tag !== "post" && tag !== "page",
+              ).length && (
+                <span className="xlog-post-tags space-x-1 truncate min-w-0">
+                  {post.metadata?.content?.tags
+                    ?.filter((tag) => tag !== "post" && tag !== "page")
+                    .map((tag, index) => (
+                      <span
+                        className="hover:text-zinc-600"
+                        key={tag + index}
+                        onClick={(e) => {
+                          e.preventDefault()
+                          router.push(`/tag/${tag}`)
+                        }}
+                      >
+                        #{tag}
+                      </span>
+                    ))}
+                </span>
+              )}
+              {post.stat?.viewDetailCount && (
+                <span className="xlog-post-views inline-flex items-center">
+                  <i className="icon-[mingcute--eye-line] mr-[2px]" />
+                  <span>{post.stat?.viewDetailCount}</span>
+                </span>
+              )}
+            </div>
+          )}
           <div
-            className="xlog-post-excerpt mt-3 text-zinc-500 line-clamp-2"
+            className={cn(
+              "xlog-post-excerpt mt-3 text-zinc-500",
+              simple ? "line-clamp-1" : "line-clamp-2",
+            )}
             style={{
               wordBreak: "break-word",
             }}
@@ -147,7 +164,7 @@ const Post = ({
             {post.metadata?.content?.summary && "..."}
           </div>
         </div>
-        <PostCover cover={post.metadata?.content.cover} />
+        {!simple && <PostCover cover={post.metadata?.content.cover} />}
       </Link>
     </div>
   )
@@ -314,11 +331,16 @@ export const HomeFeed: React.FC<{
                 if (!posts?.list.length) return <div className="h-[1px]"></div>
                 return (
                   <div className="space-y-8 mb-8">
-                    {posts?.list.map((post) => {
+                    {posts?.list.map((post, index, array) => {
                       return (
                         <MemoedPost
                           key={`${post.characterId}-${post.noteId}`}
                           post={post}
+                          previousPost={
+                            feedType === "latest" && index >= 1
+                              ? array[index - 1]
+                              : undefined
+                          }
                           filtering={aiFiltering ? 60 : 0}
                           keyword={searchParams?.get("q") || undefined}
                         />