chore: update tag section

web/src/components/HomeSidebar/TagsSection.tsx

@@ -1,5 +1,4 @@
-import { Dropdown, Menu, MenuButton, MenuItem, Tooltip } from "@mui/joy";
+import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
-import clsx from "clsx";
 import toast from "react-hot-toast";
 import { useLocation } from "react-router-dom";
 import useDebounce from "react-use/lib/useDebounce";
@@ -42,36 +41,11 @@ const TagsSection = (props: Props) => {
     await tagStore.fetchTags(filters.join(" && "));
   };
 
-  const handleRebuildMemoTags = () => {
-    showCommonDialog({
-      title: "Rebuild tags",
-      content: "It will rebuild tags for all memos, are you sure?",
-      style: "warning",
-      dialogName: "rebuild-memo-tags-dialog",
-      onConfirm: async () => {
-        await memoServiceClient.rebuildMemoProperty({
-          name: "memos/-",
-        });
-        await fetchTags();
-        toast.success("Rebuild tags successfully");
-      },
-    });
-  };
-
   return (
     <div className="flex flex-col justify-start items-start w-full mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
-      <div className="group flex flex-row justify-start items-center w-full gap-1 mb-1">
+      <div className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 select-none">
-        <span className="text-sm leading-6 font-mono text-gray-400 select-none">{t("common.tags")}</span>
+        <span>{t("common.tags")}</span>
-        {!props.readonly && (
+        {tagAmounts.length > 0 && <span className="shrink-0">({tagAmounts.length})</span>}
-          <div className={clsx("group-hover:block", tagAmounts.length > 0 ? "hidden" : "")}>
-            <Tooltip title={"Rebuild"} placement="top">
-              <Icon.RefreshCcw
-                className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
-                onClick={handleRebuildMemoTags}
-              />
-            </Tooltip>
-          </div>
-        )}
       </div>
       {tagAmounts.length > 0 ? (
         <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">

web/src/components/UserStatisticsView.tsx

@@ -1,10 +1,12 @@
-import { Divider } from "@mui/joy";
+import { Divider, Tooltip } from "@mui/joy";
 import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
 import { memoServiceClient } from "@/grpcweb";
 import { useFilterStore } from "@/store/module";
 import { useMemoStore } from "@/store/v1";
 import { User } from "@/types/proto/api/v1/user_service";
 import { useTranslate } from "@/utils/i18n";
+import { showCommonDialog } from "./Dialog/CommonDialog";
 import Icon from "./Icon";
 
 interface Props {
@@ -52,10 +54,34 @@ const UserStatisticsView = (props: Props) => {
     })();
   }, [memos.length, user.name]);
 
+  const handleRebuildMemoTags = () => {
+    showCommonDialog({
+      title: "Refresh",
+      content: "It will refersh memo properties, are you sure?",
+      style: "warning",
+      dialogName: "refersh-memo-property-dialog",
+      onConfirm: async () => {
+        await memoServiceClient.rebuildMemoProperty({
+          name: "memos/-",
+        });
+        toast.success("Refresh successfully");
+        window.location.reload();
+      },
+    });
+  };
+
   return (
     <div className="w-full border mt-2 py-2 px-3 rounded-lg space-y-0.5 text-gray-500 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
-      <div className="w-full flex flex-row justify-between items-center">
+      <div className="group w-full flex flex-row justify-between items-center">
         <p className="text-sm font-medium leading-6 dark:text-gray-500">{t("common.statistics")}</p>
+        <div className="hidden group-hover:block">
+          <Tooltip title={"Refresh"} placement="top">
+            <Icon.RefreshCcw
+              className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
+              onClick={handleRebuildMemoTags}
+            />
+          </Tooltip>
+        </div>
       </div>
       <div className="w-full grid grid-cols-1 gap-x-4">
         <div className="w-full flex justify-between items-center">