feat: enhance table with new translations and tooltip for descriptions (#2471)

Author: kovsu

apps/renderer/src/pages/(main)/(layer)/(subview)/rsshub/index.tsx

@@ -8,6 +8,7 @@ import {
   TableHeader,
   TableRow,
 } from "@follow/components/ui/table/index.jsx"
+import { EllipsisTextWithTooltip } from "@follow/components/ui/typography/index.js"
 import type { RSSHubModel } from "@follow/models"
 import { useTranslation } from "react-i18next"
 
@@ -68,7 +69,7 @@ function List({ data }: { data?: RSSHubModel[] }) {
     <Table containerClassName="mt-2 overflow-x-auto">
       <TableHeader>
         <TableRow>
-          <TableHead className="w-[50px] font-bold" size="sm" />
+          <TableHead className="font-bold" size="sm" />
           <TableHead className="w-[150px] font-bold" size="sm">
             {t("rsshub.table.owner")}
           </TableHead>
@@ -89,7 +90,7 @@ function List({ data }: { data?: RSSHubModel[] }) {
       </TableHeader>
       <TableBody className="border-t-[12px] border-transparent [&_td]:!px-3">
         <TableRow>
-          <TableCell className="font-bold">Official</TableCell>
+          <TableCell className="text-nowrap font-bold">{t("rsshub.table.official")}</TableCell>
           <TableCell>
             <span className="flex items-center gap-2">
               <Logo className="size-6" />
@@ -120,14 +121,14 @@ function List({ data }: { data?: RSSHubModel[] }) {
         {data?.map((instance) => {
           return (
             <TableRow key={instance.id}>
-              <TableCell>
+              <TableCell className="text-nowrap">
                 {(() => {
                   const flag: string[] = []
                   if (status?.data?.usage?.rsshubId === instance.id) {
-                    flag.push("In use")
+                    flag.push(t("rsshub.table.inuse"))
                   }
                   if (instance.ownerUserId === me?.id) {
-                    flag.push("Yours")
+                    flag.push(t("rsshub.table.yours"))
                   }
                   return flag.join(" / ")
                 })()}
@@ -140,7 +141,9 @@ function List({ data }: { data?: RSSHubModel[] }) {
                 />
               </TableCell>
               <TableCell>
-                <div className="line-clamp-2">{instance.description}</div>
+                <EllipsisTextWithTooltip className="line-clamp-2">
+                  {instance.description}
+                </EllipsisTextWithTooltip>
               </TableCell>
               <TableCell>
                 <span className="flex items-center justify-end gap-1">

locales/settings/en.json

@@ -300,12 +300,14 @@
   "rsshub.table.description": "Description",
   "rsshub.table.edit": "Edit",
   "rsshub.table.inuse": "In Use",
+  "rsshub.table.official": "Official",
   "rsshub.table.owner": "Owner",
   "rsshub.table.price": "Monthly Price",
   "rsshub.table.unlimited": "Unlimited",
   "rsshub.table.use": "Use",
   "rsshub.table.userCount": "User Count",
   "rsshub.table.userLimit": "User Limit",
+  "rsshub.table.yours": "Yours",
   "rsshub.useModal.about": "About this Instance",
   "rsshub.useModal.month": "month",
   "rsshub.useModal.months_label": "The number of months you want to purchase",

locales/settings/zh-CN.json

@@ -300,12 +300,14 @@
   "rsshub.table.description": "描述",
   "rsshub.table.edit": "编辑",
   "rsshub.table.inuse": "使用中",
+  "rsshub.table.official": "官方",
   "rsshub.table.owner": "所有者",
   "rsshub.table.price": "月度价格",
   "rsshub.table.unlimited": "无限制",
   "rsshub.table.use": "使用",
   "rsshub.table.userCount": "用户数量",
   "rsshub.table.userLimit": "用户限制",
+  "rsshub.table.yours": "你的",
   "rsshub.useModal.about": "关于此实例",
   "rsshub.useModal.month": "个月",
   "rsshub.useModal.months_label": "你想购买的月份数量",