feat: show number within subgroups

app/(main)/ClientComponents/ServerListClient.tsx

@@ -82,12 +82,20 @@ export default function ServerListClient() {
       ? sortedServers
       : sortedServers.filter((server) => server.tag === tag);
 
+  const tagCountMap: Record<string, number> = {};
+  sortedServers.forEach((server) => {
+    if (server.tag) {
+      tagCountMap[server.tag] = (tagCountMap[server.tag] || 0) + 1;
+    }
+  });
+
   return (
     <>
       {getEnv("NEXT_PUBLIC_ShowTag") === "true" && uniqueTags.length > 1 && (
         <Switch
           allTag={uniqueTags}
           nowTag={tag}
+          tagCountMap={tagCountMap}
           onTagChange={handleTagChange}
         />
       )}

components/Switch.tsx

@@ -8,10 +8,12 @@ import React, { createRef, useEffect, useRef } from "react";
 export default function Switch({
   allTag,
   nowTag,
+  tagCountMap,
   onTagChange,
 }: {
   allTag: string[];
   nowTag: string;
+  tagCountMap: Record<string, number>;
   onTagChange: (tag: string) => void;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -84,9 +86,14 @@ export default function Switch({
               />
             )}
             <div className="relative z-20 flex items-center gap-1">
-              <p className="whitespace-nowrap">
-                {tag === "defaultTag" ? t("defaultTag") : tag}
-              </p>
+              <div className="whitespace-nowrap flex items-center gap-2">
+                {tag === "defaultTag" ? t("defaultTag") : tag}{" "}
+                {tag !== "defaultTag" && (
+                  <div className="w-fit px-1.5 rounded-full bg-muted">
+                    {tagCountMap[tag]}
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         ))}