From 228cc6105dc8d8531e1963a0c15cead17423ca8c Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 14 Oct 2025 23:15:16 +0800
Subject: [PATCH] chore: update StatCard component for improved icon and count
 rendering in StatisticsView

---
 .../components/StatisticsView/StatCard.tsx    | 64 ++++++++++++-------
 .../StatisticsView/StatisticsView.tsx         | 16 ++---
 2 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/web/src/components/StatisticsView/StatCard.tsx b/web/src/components/StatisticsView/StatCard.tsx
index e33a58160..48673a579 100644
--- a/web/src/components/StatisticsView/StatCard.tsx
+++ b/web/src/components/StatisticsView/StatCard.tsx
@@ -1,37 +1,55 @@
+import { cloneElement, isValidElement } from "react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import type { StatCardProps } from "@/types/statistics";
 
 export const StatCard = ({ icon, label, count, onClick, tooltip, className }: StatCardProps) => {
-  const content = (
-    <div
+  const iconNode = isValidElement(icon)
+    ? cloneElement(icon, {
+        className: cn("h-3.5 w-3.5", icon.props.className),
+      })
+    : icon;
+
+  const countNode = (() => {
+    if (typeof count === "number" || typeof count === "string") {
+      return <span className="text-foreground/80">{count}</span>;
+    }
+    if (isValidElement(count)) {
+      return cloneElement(count, {
+        className: cn("text-foreground/80", count.props.className),
+      });
+    }
+    return <span className="text-foreground/80">{count}</span>;
+  })();
+
+  const button = (
+    <button
+      type="button"
+      onClick={onClick}
       className={cn(
-        "w-auto border pl-1.5 pr-2 py-0.5 rounded-md flex justify-between items-center",
-        "cursor-pointer hover:bg-muted transition-colors",
+        "inline-flex items-center gap-1 rounded-md border border-border/40 bg-background/80 px-1 pr-2 py-0.5 text-sm leading-none text-muted-foreground transition-colors",
+        "hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/70 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
         className,
       )}
-      onClick={onClick}
     >
-      <div className="w-auto flex justify-start items-center mr-1">
-        {icon}
-        <span className="block text-sm opacity-80">{label}</span>
-      </div>
-      <span className="text-sm truncate opacity-80">{count}</span>
-    </div>
+      <span className="flex h-5 w-5 items-center justify-center text-muted-foreground/80">{iconNode}</span>
+      <span className="truncate text-sm text-foreground/70">{label}</span>
+      <span className="ml-1 flex items-center text-sm">{countNode}</span>
+    </button>
   );
 
-  if (tooltip) {
-    return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>{content}</TooltipTrigger>
-          <TooltipContent>
-            <p>{tooltip}</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
+  if (!tooltip) {
+    return button;
   }
 
-  return content;
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>
+          <p>{tooltip}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
 };
diff --git a/web/src/components/StatisticsView/StatisticsView.tsx b/web/src/components/StatisticsView/StatisticsView.tsx
index feed59ba5..387a97a7c 100644
--- a/web/src/components/StatisticsView/StatisticsView.tsx
+++ b/web/src/components/StatisticsView/StatisticsView.tsx
@@ -46,10 +46,10 @@ const StatisticsView = observer(() => {
         />
       </div>
 
-      <div className="pt-1 w-full flex flex-row justify-start items-center gap-1 flex-wrap">
+      <div className="pt-2 w-full flex flex-wrap items-center gap-2">
         {isRootPath && hasPinnedMemos && (
           <StatCard
-            icon={<BookmarkIcon className="w-4 h-auto mr-1 opacity-70" />}
+            icon={<BookmarkIcon className="opacity-70" />}
             label={t("common.pinned")}
             count={userStore.state.currentUserStats!.pinnedMemos.length}
             onClick={() => handleFilterClick("pinned")}
@@ -57,20 +57,14 @@ const StatisticsView = observer(() => {
         )}
 
         <StatCard
-          icon={<LinkIcon className="w-4 h-auto mr-1 opacity-70" />}
+          icon={<LinkIcon className="opacity-70" />}
           label={t("memo.links")}
           count={memoTypeStats.linkCount}
           onClick={() => handleFilterClick("property.hasLink")}
         />
 
         <StatCard
-          icon={
-            memoTypeStats.undoCount > 0 ? (
-              <ListTodoIcon className="w-4 h-auto mr-1 opacity-70" />
-            ) : (
-              <CheckCircleIcon className="w-4 h-auto mr-1 opacity-70" />
-            )
-          }
+          icon={memoTypeStats.undoCount > 0 ? <ListTodoIcon className="opacity-70" /> : <CheckCircleIcon className="opacity-70" />}
           label={t("memo.to-do")}
           count={
             memoTypeStats.undoCount > 0 ? (
@@ -88,7 +82,7 @@ const StatisticsView = observer(() => {
         />
 
         <StatCard
-          icon={<Code2Icon className="w-4 h-auto mr-1 opacity-70" />}
+          icon={<Code2Icon className="opacity-70" />}
           label={t("memo.code")}
           count={memoTypeStats.codeCount}
           onClick={() => handleFilterClick("property.hasCode")}