feat: adjust more ui

Signed-off-by: Innei <[email protected]>

apps/renderer/src/modules/boost/atom.ts

@@ -0,0 +1,11 @@
+import { createAtomHooks } from "@follow/utils/jotai"
+import { atom } from "jotai"
+
+export const [, , useFeedBoostMap, , getFeedBoostMap, setFeedBoostMap] = createAtomHooks(
+  atom<Record<string, boolean>>({}),
+)
+
+export const updateFeedBoostStatus = (feedId: string, isBoosted: boolean) => {
+  const prev = getFeedBoostMap()
+  setFeedBoostMap({ ...prev, [feedId]: isBoosted })
+}

apps/renderer/src/modules/boost/boost-progress.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@follow/utils/utils"
+import { useState } from "react"
 
 import { useI18n } from "~/hooks/common"
 
@@ -16,31 +17,33 @@ export const BoostProgress = ({
     expiresAt: string
   } | null
 }) => {
+  const [numberFormater] = useState(() => new Intl.NumberFormat())
   const t = useI18n()
-  const percentage = (boostCount / (boostCount + remainingBoostsToLevelUp)) * 100
-  const nextLevel = level + 1
+  const rawPercentage = (boostCount / (boostCount + remainingBoostsToLevelUp)) * 100
+  const percentage = 2 + (rawPercentage * (98 - 1)) / 100
+  const nextLevel = level + 2
   return (
     <div className="flex w-full flex-col px-2">
-      <div className="relative w-full pt-12">
+      <div className="relative -mx-2 pt-12">
         <span
           className={cn(
-            "absolute -bottom-3 mb-10 flex h-7 w-12 -translate-x-1/2 items-center justify-center whitespace-nowrap rounded-full px-3.5 py-2 text-sm font-bold text-white transition-all duration-500 ease-out after:absolute after:bottom-[-5px] after:left-1/2 after:-z-10 after:flex after:size-3 after:-translate-x-1/2 after:rotate-45 ",
+            "absolute -bottom-3 mb-10 flex h-7 -translate-x-1/2 items-center justify-center whitespace-nowrap rounded-full p-2 text-sm font-bold text-white transition-all duration-500 ease-out after:absolute after:bottom-[-5px] after:left-1/2 after:-z-10 after:flex after:size-3 after:-translate-x-1/2 after:rotate-45 ",
             "bg-orange-500 after:bg-orange-500",
             "motion-preset-shake",
           )}
           style={{ left: `${percentage}%` }}
         >
           <i className="i-mgc-train-cute-fi mr-2 shrink-0" />
-          {boostCount}
+          {numberFormater.format(boostCount)}
         </span>
         <div className="relative flex h-3 w-full overflow-hidden rounded-3xl bg-gray-200 dark:bg-gray-800">
           <div
             role="progressbar"
             aria-valuenow={boostCount}
             aria-valuemin={0}
             aria-valuemax={remainingBoostsToLevelUp}
-            style={{ width: `${percentage}%` }}
-            className="flex h-full items-center justify-center rounded-3xl bg-accent text-white transition-all duration-500 ease-out"
+            style={{ width: `calc(${percentage}% + 0.5rem)` }}
+            className="flex h-full -translate-x-2 items-center justify-center rounded-3xl bg-accent text-white transition-all duration-500 ease-out"
           />
         </div>
       </div>
@@ -50,7 +53,9 @@ export const BoostProgress = ({
         <span className="text-lg font-bold text-accent">Lv. {nextLevel}</span>
       </div>
       <small className="center mt-2 gap-1">
-        {t("boost.remaining_boosts_to_level_up", { remainingBoostsToLevelUp })}
+        {t("boost.remaining_boosts_to_level_up", {
+          remainingBoostsToLevelUp: numberFormater.format(remainingBoostsToLevelUp),
+        })}
       </small>
       {lastValidBoost && (
         <small className="center mt-1 gap-1">

apps/renderer/src/modules/boost/boosting-contributors.tsx

@@ -1,5 +1,5 @@
+import { AutoResizeHeight } from "@follow/components/ui/auto-resize-height/index.js"
 import { Avatar, AvatarFallback, AvatarImage } from "@follow/components/ui/avatar/index.js"
-import { m } from "framer-motion"
 
 import { replaceImgUrlIfNeed } from "~/lib/img-proxy"
 import { useFeedBoostersQuery } from "~/modules/boost/query"
@@ -11,27 +11,28 @@ import type { User } from "../user/utils"
 export const BoostingContributors = ({ feedId }: { feedId: string }) => {
   const { data: boosters, isLoading } = useFeedBoostersQuery(feedId)
   const presentUserProfile = usePresentUserProfileModal("drawer")
-  if (isLoading || !boosters || boosters.length === 0) return
+  const hasData = !(isLoading || !boosters || boosters.length === 0)
 
   return (
-    <m.div
-      className="overflow-hidden p-4"
-      initial={{ opacity: 0, height: 0 }}
-      animate={{ opacity: 1, height: "auto" }}
-      exit={{ opacity: 0, height: 0 }}
-      transition={{ duration: 0.3, ease: "easeInOut" }}
-    >
-      <h2 className="mb-4 text-2xl font-bold">Boosting Contributors</h2>
-      <ul className="space-y-4">
-        {boosters.length < 8 ? (
-          boosters.map((user) => (
-            <UserListItem key={user.id} user={user} onClick={presentUserProfile} />
-          ))
-        ) : (
-          <UserGallery users={boosters} />
-        )}
-      </ul>
-    </m.div>
+    <AutoResizeHeight className="mt-4">
+      {hasData && (
+        <>
+          <h2 className="center mb-4 flex text-xl font-bold">
+            <i className="i-mgc-user-heart-cute-fi mr-1" />
+            Boosting Contributors
+          </h2>
+          <ul className="space-y-4">
+            {boosters.length < 8 ? (
+              boosters.map((user) => (
+                <UserListItem key={user.id} user={user} onClick={presentUserProfile} />
+              ))
+            ) : (
+              <UserGallery users={boosters} />
+            )}
+          </ul>
+        </>
+      )}
+    </AutoResizeHeight>
   )
 }
 

apps/renderer/src/modules/boost/hooks.tsx

@@ -1,10 +1,9 @@
-import { atom } from "jotai"
 import { useCallback } from "react"
 
 import { useAsyncModal } from "~/components/ui/modal/helper/use-async-modal"
 import { useI18n } from "~/hooks/common"
-import { createAtomHooks } from "~/lib/jotai"
 
+import { useFeedBoostMap } from "./atom"
 import { BoostModalContent } from "./modal"
 import { useBoostStatusQuery } from "./query"
 
@@ -19,7 +18,7 @@ export const useBoostModal = () => {
       type ResponseType = Awaited<ReturnType<ReturnType<typeof useDataFetcher>["fn"]>>
 
       present<ResponseType>({
-        id: "boost",
+        id: `boost-${feedId}`,
         title: t("words.boost"),
         content: () => <BoostModalContent feedId={feedId} />,
         overlay: true,
@@ -31,15 +30,6 @@ export const useBoostModal = () => {
   )
 }
 
-const [, , useFeedBoostMap, , getFeedBoostMap, setFeedBoostMap] = createAtomHooks(
-  atom<Record<string, boolean>>({}),
-)
-
-export const updateFeedBoostStatus = (feedId: string, isBoosted: boolean) => {
-  const prev = getFeedBoostMap()
-  setFeedBoostMap({ ...prev, [feedId]: isBoosted })
-}
-
 export const useIsFeedBoosted = (feedId: string) => {
   const map = useFeedBoostMap()
   return map[feedId] ?? false

apps/renderer/src/modules/boost/modal.tsx

@@ -47,12 +47,12 @@ export const BoostModalContent = ({ feedId }: { feedId: string }) => {
   return (
     <div className="flex w-[80vw] max-w-[350px] flex-col gap-3">
       <div className="relative flex w-full grow flex-col items-center gap-3">
-        <div className="mt-4 text-xl font-bold">
+        <div className="center mt-4 flex text-xl font-bold">
           <i className="i-mgc-rocket-cute-fi mr-1.5 text-lg" />
           {t("boost.boost_feed")}
         </div>
 
-        <small className="center mt-1 gap-1 text-theme-vibrancyFg">
+        <small className="center -mt-1 mb-2 gap-1 text-theme-vibrancyFg">
           {t("boost.boost_feed_description")}
         </small>
 

apps/renderer/src/modules/boost/query.tsx

@@ -6,7 +6,7 @@ import { apiClient } from "~/lib/api-fetch"
 import { defineQuery } from "~/lib/defineQuery"
 import { toastFetchError } from "~/lib/error-parser"
 
-import { updateFeedBoostStatus } from "./hooks"
+import { updateFeedBoostStatus } from "./atom"
 
 const query = {
   getStatus: ({ feedId }: { feedId: string }) =>

apps/renderer/src/modules/boost/radio-cards.tsx

@@ -32,7 +32,7 @@ export const RadioCards = ({
   return (
     <RadioGroup value={value.toString()} onValueChange={(value) => onValueChange(+value)}>
       <m.div
-        className="grid w-full grid-cols-2 gap-2 overflow-hidden"
+        className="grid w-full grid-cols-2 gap-2"
         initial={{ height: "auto", opacity: 0 }}
         animate={{ height: "auto", opacity: 1 }}
         exit={{ height: 0, opacity: 0 }}

apps/renderer/src/modules/entry-content/components/SupportCreator.tsx

@@ -60,14 +60,13 @@ export const SupportCreator = ({ entryId }: { entryId: string }) => {
 
         <div className="flex items-center gap-4">
           {!isMyOwnedFeed && (
-            <Button className="text-base" onClick={() => openTipModal()}>
+            <Button onClick={() => openTipModal()}>
               <i className="i-mgc-power-outline mr-1.5 text-lg" />
               {t("entry_content.support_creator")}
             </Button>
           )}
           <Button
             variant={!isMyOwnedFeed ? "outline" : "primary"}
-            className="text-base"
             onClick={() => openBoostModal(feed.id)}
           >
             <i className="i-mgc-rocket-cute-fi mr-1.5 text-lg" />

apps/renderer/src/modules/user/UserAvatar.tsx

@@ -78,8 +78,8 @@ export const UserAvatar = forwardRef<
             src={replaceImgUrlIfNeed(renderUserData?.image || undefined)}
           />
           <AvatarFallback
-            style={{ backgroundColor: getColorScheme(randomColor).light.accent }}
-            className="text-xs"
+            style={{ backgroundColor: getColorScheme(randomColor, true).light.accent }}
+            className="text-xs text-white"
           >
             {renderUserData?.name?.[0]}
           </AvatarFallback>

apps/renderer/src/modules/user/UserGallery.tsx

@@ -12,7 +12,7 @@ export const UserGallery = ({ users, limit = 18 }: UserGalleryProps) => {
   const displayedUsers = users.slice(0, limit)
 
   return (
-    <div className="flex w-fit max-w-80 flex-wrap gap-4">
+    <div className="mx-auto flex w-fit max-w-80 flex-wrap gap-4">
       {displayedUsers.map((user) => (
         <div key={user.id} className="size-8">
           <UserAvatar

apps/renderer/src/store/subscription/store.ts

@@ -14,7 +14,7 @@ import { whoami } from "~/atoms/user"
 import { ROUTE_FEED_IN_LIST } from "~/constants"
 import { runTransactionInScope } from "~/database"
 import { apiClient } from "~/lib/api-fetch"
-import { updateFeedBoostStatus } from "~/modules/boost/hooks"
+import { updateFeedBoostStatus } from "~/modules/boost/atom"
 import { SubscriptionService } from "~/services"
 
 import { entryActions } from "../entry"