feat: implement SurveyResultCount component to display survey response counts and update survey list rendering

Author: moonrailgun

src/client/routes/survey.tsx

@@ -9,6 +9,7 @@ import { Layout } from '@/components/layout';
 import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
+import { formatNumber } from '@/utils/common';
 import { useTranslation } from '@i18next-toolkit/react';
 import {
   createFileRoute,
@@ -28,9 +29,6 @@ function PageComponent() {
   const { data = [], isLoading } = trpc.survey.all.useQuery({
     workspaceId,
   });
-  const { data: allResultCount = {} } = trpc.survey.allResultCount.useQuery({
-    workspaceId,
-  });
   const navigate = useNavigate();
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
@@ -40,7 +38,7 @@ function PageComponent() {
   const items = data.map((item) => ({
     id: item.id,
     title: item.name,
-    number: allResultCount[item.id] ?? 0,
+    content: <SurveyResultCount surveyId={item.id} />,
     href: `/survey/${item.id}`,
   }));
 
@@ -91,6 +89,7 @@ function PageComponent() {
           <CommonList
             hasSearch={true}
             items={items}
+            direction="horizontal"
             isLoading={isLoading}
             emptyDescription={t(
               'Not have any survey yet, create a survey to collect user feedback about your user service.'
@@ -101,3 +100,28 @@ function PageComponent() {
     />
   );
 }
+
+function SurveyResultCount({ surveyId }: { surveyId: string }) {
+  const workspaceId = useCurrentWorkspaceId();
+  const { data: count } = trpc.survey.count.useQuery(
+    {
+      workspaceId,
+      surveyId,
+    },
+    {
+      trpc: {
+        context: {
+          skipBatch: true,
+        },
+      },
+    }
+  );
+
+  if (!count || count <= 0) return null;
+
+  return (
+    <span className="opacity-60" title={String(count)}>
+      {formatNumber(count)}
+    </span>
+  );
+}