feat(desktop): improve ux in trending (#3555)

apps/desktop/src/renderer/src/modules/trending/index.tsx

@@ -264,7 +264,10 @@ const TrendingFeeds = ({ data }: { data: FeedModel[] }) => {
               </a>
 
               <div className="pr-2">
-                <UserCount className="-mr-2" count={(feed as any).subscriberCount} />
+                <UserCount
+                  className="-mr-2 group-hover:opacity-0"
+                  count={(feed as any).subscriberCount}
+                />
 
                 <Button
                   type="button"
@@ -293,31 +296,35 @@ const TrendingEntries = ({ data }: { data: Models.TrendingEntry[] }) => {
     <section className="mt-8 w-full text-left">
       <h2 className="my-2 text-xl font-bold">{t("trending.entry")}</h2>
 
-      <ul className="mt-2 list-inside list-disc space-y-1">
-        {filteredData.map((entry) => {
-          return (
-            <li
-              key={entry.id}
-              className="marker:text-accent relative grid w-full grid-cols-[1fr_auto] gap-2 whitespace-nowrap py-0.5"
-            >
-              <div className="m-0 min-w-0 truncate p-0">
-                <a
-                  href={entry.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="follow-link--underline truncate text-sm"
-                >
-                  {entry.title}
-                </a>
-              </div>
-              <span className="flex items-center gap-0.5 text-xs tabular-nums opacity-60">
-                <i className="i-mingcute-book-2-line" />
-                <span>{entry.readCount}</span>
-              </span>
-            </li>
-          )
-        })}
-      </ul>
+      {filteredData.length > 0 ? (
+        <ul className="mt-2 list-inside list-disc space-y-1">
+          {filteredData.map((entry) => {
+            return (
+              <li
+                key={entry.id}
+                className="marker:text-accent relative grid w-full grid-cols-[1fr_auto] gap-2 whitespace-nowrap py-0.5"
+              >
+                <div className="m-0 min-w-0 truncate p-0">
+                  <a
+                    href={entry.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="follow-link--underline truncate text-sm"
+                  >
+                    {entry.title}
+                  </a>
+                </div>
+                <span className="flex items-center gap-0.5 text-xs tabular-nums opacity-60">
+                  <i className="i-mingcute-book-2-line" />
+                  <span>{entry.readCount}</span>
+                </span>
+              </li>
+            )
+          })}
+        </ul>
+      ) : (
+        <div className="mt-2 text-center text-sm opacity-80">{t("trending.entry_no_results")}</div>
+      )}
     </section>
   )
 }

locales/app/en.json

@@ -373,6 +373,7 @@
   "tip_modal.tip_title": "Tip Power",
   "tip_modal.unclaimed_feed": "No one has claimed this feed yet. The received Power will be securely held in the blockchain contract until it is claimed.",
   "trending.entry": "Trending Entries",
+  "trending.entry_no_results": "No trending entries found",
   "trending.feed": "Trending Feeds",
   "trending.list": "Trending Lists",
   "trending.user": "Trending Users",

locales/app/zh-CN.json

@@ -372,6 +372,7 @@
   "tip_modal.tip_title": "打赏 Power",
   "tip_modal.unclaimed_feed": "这个订阅源还没有被认证，收到的 Power 将存放在区块链直到源所有者完成认证。",
   "trending.entry": "热门条目",
+  "trending.entry_no_results": "没有找到热门条目",
   "trending.feed": "热门订阅源",
   "trending.list": "热门列表",
   "trending.user": "热门用户",