fix: increase the number of lists with text descriptions

i18n/en_US.yaml

@@ -994,7 +994,11 @@ ui:
     db_failed: Database connection failed
     db_failed_desc: >-
       This either means that the database information in your <1>config.yaml</1> file is incorrect or that contact with the database server could not be established. This could mean your host’s database server is down.
-
+  counts:
+    views: views
+    votes: votes
+    answers: answers
+    accepted: Accepted
   page_404:
     desc: "Unfortunately, this page doesn't exist."
     back_home: Back to homepage

ui/src/components/Counts/index.tsx

@@ -0,0 +1,77 @@
+import { FC, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import classname from 'classnames';
+
+import { Icon } from '@/components';
+
+interface Props {
+  data: {
+    votes: number;
+    answers: number;
+    views: number;
+  };
+  showVotes?: boolean;
+  showAnswers?: boolean;
+  showViews?: boolean;
+  showAccepted?: boolean;
+  isAccepted?: boolean;
+  className?: string;
+}
+const Index: FC<Props> = ({
+  data,
+  showVotes = true,
+  showAnswers = true,
+  showViews = true,
+  isAccepted = false,
+  showAccepted = false,
+  className = '',
+}) => {
+  const { t } = useTranslation('translation', { keyPrefix: 'counts' });
+
+  return (
+    <div className={classname('d-flex align-items-center', className)}>
+      {showVotes && (
+        <div className="d-flex align-items-center">
+          <Icon name="hand-thumbs-up-fill me-1" />
+          <span>
+            {data.votes} {t('votes')}
+          </span>
+        </div>
+      )}
+
+      {showAccepted && (
+        <div className="d-flex align-items-center ms-3 text-success">
+          <Icon name="check-circle-fill me-1" />
+          <span>{t('accepted')}</span>
+        </div>
+      )}
+
+      {showAnswers && (
+        <div
+          className={`d-flex align-items-center ms-3 ${
+            isAccepted ? 'text-success' : ''
+          }`}>
+          {isAccepted ? (
+            <Icon name="check-circle-fill me-1" />
+          ) : (
+            <Icon name="chat-square-text-fill me-1" />
+          )}
+          <span>
+            {data.answers} {t('answers')}
+          </span>
+        </div>
+      )}
+      {showViews && (
+        <span className="summary-stat ms-3">
+          <Icon name="eye-fill" />
+          <em className="fst-normal ms-1">
+            {data.views} {t('views')}
+          </em>
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default memo(Index);

ui/src/components/QuestionList/index.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 import { pathFactory } from '@/router/pathFactory';
 import type * as Type from '@/common/interface';
 import {
-  Icon,
   Tag,
   Pagination,
   FormatTime,
@@ -14,6 +13,7 @@ import {
   BaseUserCard,
   QueryGroup,
   QuestionListLoader,
+  Counts,
 } from '@/components';
 import { useQuestionList } from '@/services';
 
@@ -95,29 +95,15 @@ const QuestionList: FC<Props> = ({ source }) => {
                       preFix={t(li.operation_type)}
                     />
                   </div>
-                  <div className="ms-0 ms-md-3 mt-2 mt-md-0">
+                  <Counts
-                    <span>
+                    data={{
-                      <Icon name="hand-thumbs-up-fill" />
+                      votes: li.vote_count,
-                      <em className="fst-normal ms-1">{li.vote_count}</em>
+                      answers: li.answer_count,
-                    </span>
+                      views: li.view_count,
-                    <span
+                    }}
-                      className={`ms-3 ${
+                    isAccepted={li.accepted_answer_id >= 1}
-                        li.accepted_answer_id >= 1 ? 'text-success' : ''
+                    className="ms-0 ms-md-3 mt-2 mt-md-0"
-                      }`}>
+                  />
-                      <Icon
-                        name={
-                          li.accepted_answer_id >= 1
-                            ? 'check-circle-fill'
-                            : 'chat-square-text-fill'
-                        }
-                      />
-                      <em className="fst-normal ms-1">{li.answer_count}</em>
-                    </span>
-                    <span className="summary-stat ms-3">
-                      <Icon name="eye-fill" />
-                      <em className="fst-normal ms-1">{li.view_count}</em>
-                    </span>
-                  </div>
                 </div>
                 <div className="question-tags m-n1">
                   {Array.isArray(li.tags)

ui/src/components/index.ts

@@ -32,6 +32,7 @@ import CustomizeTheme from './CustomizeTheme';
 import PageTags from './PageTags';
 import QuestionListLoader from './QuestionListLoader';
 import TagsLoader from './TagsLoader';
+import Counts from './Counts';
 
 export {
   Avatar,
@@ -70,5 +71,6 @@ export {
   PageTags,
   QuestionListLoader,
   TagsLoader,
+  Counts,
 };
 export type { EditorRef, JSONSchema, UISchema };

ui/src/pages/Search/components/SearchItem/index.tsx

@@ -3,7 +3,7 @@ import { ListGroupItem } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import { pathFactory } from '@/router/pathFactory';
-import { Icon, Tag, FormatTime, BaseUserCard } from '@/components';
+import { Tag, FormatTime, BaseUserCard, Counts } from '@/components';
 import type { SearchResItem } from '@/common/interface';
 import { escapeRemove } from '@/utils';
 
@@ -51,23 +51,17 @@ const Index: FC<Props> = ({ data }) => {
           className="me-3"
           preFix={data.object_type === 'question' ? 'asked' : 'answered'}
         />
-        <div className="d-flex align-items-center my-2 my-sm-0">
+
-          <div className="d-flex align-items-center me-3">
+        <Counts
-            <Icon name="hand-thumbs-up-fill me-1" />
+          className="my-2 my-sm-0"
-            <span> {data.object?.vote_count}</span>
+          showViews={false}
-          </div>
+          isAccepted={data.object?.accepted}
-          <div
+          data={{
-            className={`d-flex align-items-center ${
+            votes: data.object?.vote_count,
-              data.object?.accepted ? 'text-success' : ''
+            answers: data.object?.answer_count,
-            }`}>
+            views: 0,
-            {data.object?.accepted ? (
+          }}
-              <Icon name="check-circle-fill me-1" />
+        />
-            ) : (
-              <Icon name="chat-square-text-fill me-1" />
-            )}
-            <span>{data.object?.answer_count}</span>
-          </div>
-        </div>
       </div>
 
       {data.object?.excerpt && (

ui/src/pages/Users/Personal/components/Answers/index.tsx

@@ -2,7 +2,7 @@ import { FC, memo } from 'react';
 import { ListGroup, ListGroupItem } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-import { Icon, FormatTime, Tag } from '@/components';
+import { FormatTime, Tag, Counts } from '@/components';
 import { pathFactory } from '@/router/pathFactory';
 
 interface Props {
@@ -35,21 +35,16 @@ const Index: FC<Props> = ({ visible, data }) => {
             <div className="d-flex align-items-center fs-14 text-secondary mb-2">
               <FormatTime
                 time={item.create_time}
-                className="me-4"
+                className="me-3"
                 preFix={t('answered')}
               />
 
-              <div className="d-flex align-items-center me-3">
+              <Counts
-                <Icon name="hand-thumbs-up-fill me-1" />
+                data={{ votes: item?.vote_count, views: 0, answers: 0 }}
-                <span>{item?.vote_count}</span>
+                showAnswers={false}
-              </div>
+                showViews={false}
-
+                showAccepted={item.accepted === 2}
-              {item.accepted === 2 && (
+              />
-                <div className="d-flex align-items-center me-3 text-success">
-                  <Icon name="check-circle-fill me-1" />
-                  <span>{t('accepted')}</span>
-                </div>
-              )}
             </div>
             <div>
               {item.question_info?.tags?.map((tag) => {

ui/src/pages/Users/Personal/components/DefaultList/index.tsx

@@ -2,7 +2,7 @@ import { FC, memo } from 'react';
 import { ListGroup, ListGroupItem } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-import { Icon, FormatTime, Tag, BaseUserCard } from '@/components';
+import { FormatTime, Tag, BaseUserCard, Counts } from '@/components';
 import { pathFactory } from '@/router/pathFactory';
 
 interface Props {
@@ -44,35 +44,23 @@ const Index: FC<Props> = ({ visible, tabName, data }) => {
                   <span className="split-dot" />
                 </>
               )}
+
               <FormatTime
-                time={item.create_time}
+                time={
+                  tabName === 'bookmarks' ? item.create_time : item.created_at
+                }
                 className="me-3"
                 preFix={t('asked')}
               />
 
-              <div className="d-flex align-items-center me-3">
+              <Counts
-                <Icon name="hand-thumbs-up-fill me-1" />
+                isAccepted={Number(item.accepted_answer_id) > 0}
-                <span>{item.vote_count}</span>
+                data={{
-              </div>
+                  votes: item.vote_count,
-
+                  answers: item.answer_count,
-              {tabName !== 'answers' && (
+                  views: item.view_count,
-                <div
+                }}
-                  className={`d-flex align-items-center me-3 ${
+              />
-                    Number(item.accepted_answer_id) > 0 ? 'text-success' : ''
-                  }`}>
-                  {Number(item.accepted_answer_id) > 0 ? (
-                    <Icon name="check-circle-fill me-1" />
-                  ) : (
-                    <Icon name="chat-square-text-fill me-1" />
-                  )}
-                  <span>{item.answer_count}</span>
-                </div>
-              )}
-
-              <div className="d-flex align-items-center me-3">
-                <Icon name="eye-fill me-1" />
-                <span>{item.view_count}</span>
-              </div>
             </div>
             <div>
               {item.tags?.map((tag) => {

ui/src/pages/Users/Personal/components/TopList/index.tsx

@@ -32,9 +32,12 @@ const Index: FC<Props> = ({ data, type }) => {
               }>
               {type === 'answer' ? item.question_info.title : item.title}
             </a>
+
             <div className="d-inline-block text-secondary ms-3 fs-14">
-              <Icon name="hand-thumbs-up-fill" />
+              <Icon name="hand-thumbs-up-fill me-1" />
-              <span> {item.vote_count}</span>
+              <span>
+                {item.vote_count} {t('votes', { keyPrefix: 'counts' })}
+              </span>
             </div>
             {type === 'question' && (
               <div
@@ -47,7 +50,10 @@ const Index: FC<Props> = ({ data, type }) => {
                   <Icon name="chat-square-text-fill" />
                 )}
 
-                <span> {item.answer_count}</span>
+                <span>
+                  {' '}
+                  {item.answer_count} {t('answers', { keyPrefix: 'counts' })}
+                </span>
               </div>
             )}