From 4d6b9fff9f92bfbd97b0834f25ec3d0dc7bfc3e2 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:22:26 +0800
Subject: [PATCH] feat: add BoostingContributors components to enhance boost
 functionality

---
 .../modules/boost/boosting-contributors.tsx   | 46 +++++++++++++++++++
 apps/renderer/src/modules/boost/modal.tsx     |  2 +
 2 files changed, 48 insertions(+)
 create mode 100644 apps/renderer/src/modules/boost/boosting-contributors.tsx

diff --git a/apps/renderer/src/modules/boost/boosting-contributors.tsx b/apps/renderer/src/modules/boost/boosting-contributors.tsx
new file mode 100644
index 000000000..b3ad370c1
--- /dev/null
+++ b/apps/renderer/src/modules/boost/boosting-contributors.tsx
@@ -0,0 +1,46 @@
+import { m } from "framer-motion"
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"
+import { softSpringPreset } from "~/components/ui/constants/spring"
+import { useAuthQuery } from "~/hooks/common"
+import { replaceImgUrlIfNeed } from "~/lib/img-proxy"
+import { boosts } from "~/queries/boosts"
+
+import { usePresentUserProfileModal } from "../profile/hooks"
+
+export const BoostingContributors = ({ feedId }: { feedId: string }) => {
+  const { data: boosters, isLoading } = useAuthQuery(boosts.getBoosters({ feedId }))
+  const presentUserProfile = usePresentUserProfileModal("drawer")
+  if (isLoading || !boosters || boosters.length === 0) return
+
+  return (
+    <m.div
+      className="overflow-hidden p-4"
+      initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 1, height: "auto" }}
+      exit={{ opacity: 0, height: 0 }}
+      transition={softSpringPreset}
+    >
+      <h2 className="mb-4 text-2xl font-bold">Boosting Contributors</h2>
+      <ul className="space-y-4">
+        {boosters.map((user) => (
+          <li
+            key={user.id}
+            role="button"
+            className="flex items-center space-x-4"
+            onClick={() => presentUserProfile(user.id)}
+          >
+            <Avatar className="block aspect-square size-10 overflow-hidden rounded-full border border-border ring-1 ring-background">
+              <AvatarImage src={replaceImgUrlIfNeed(user?.image || undefined)} />
+              <AvatarFallback>{user.name?.slice(0, 2)}</AvatarFallback>
+            </Avatar>
+            <div>
+              <div className="font-semibold">{user.name || user.handle}</div>
+              {user.handle && <div className="text-xs text-gray-500">@{user.handle}</div>}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </m.div>
+  )
+}
diff --git a/apps/renderer/src/modules/boost/modal.tsx b/apps/renderer/src/modules/boost/modal.tsx
index 9aef35e33..69f79a2f4 100644
--- a/apps/renderer/src/modules/boost/modal.tsx
+++ b/apps/renderer/src/modules/boost/modal.tsx
@@ -11,6 +11,7 @@ import { boosts, useBoostFeedMutation } from "~/queries/boosts"
 import { useWallet } from "~/queries/wallet"
 
 import { BoostProgress } from "./boost-progress"
+import { BoostingContributors } from "./boosting-contributors"
 import { LevelBenefits } from "./level-benefits"
 import { RadioCards } from "./radio-cards"
 
@@ -87,6 +88,7 @@ export const BoostModalContent = ({ feedId }: { feedId: string }) => {
         </Button>
       )}
 
+      <BoostingContributors feedId={feedId} />
       <LevelBenefits />
     </div>
   )