From 60a6e91aefe29c7e14573eaf1304e13425320d03 Mon Sep 17 00:00:00 2001
From: Emiel Kremers <emiel@kremers.us>
Date: Mon, 9 Mar 2026 15:22:51 +0100
Subject: [PATCH 1/2] feat(data-table): add customizable pagination labels for
 improved user experience

- Introduced `paginationPageInfoLabel` and `paginationTotalRecordsLabel` props to the DataTable component for dynamic pagination information.
- Updated the ModManagementPage to utilize these new props with translations for better localization.
- Added corresponding entries in the admin JSON locale file for pagination text.
---
 .../src/components/layout/ui/data-table.tsx   | 17 +++++++++++++---
 studio/src/i18n/locales/en/admin.json         | 12 +++++++++++
 .../mod-management/ConfigFieldRenderer.tsx    | 20 +++++++++++++++----
 .../mod-management/ModManagementPage.tsx      | 11 ++++++++++
 4 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/studio/src/components/layout/ui/data-table.tsx b/studio/src/components/layout/ui/data-table.tsx
index c0378db90..60a12fb3f 100644
--- a/studio/src/components/layout/ui/data-table.tsx
+++ b/studio/src/components/layout/ui/data-table.tsx
@@ -50,6 +50,8 @@ export interface DataTableProps<TData, TValue> {
   toolbar?: React.ReactNode
   className?: string
   onRowClick?: (row: TData) => void
+  paginationPageInfoLabel?: (currentPage: number, totalPages: number) => string
+  paginationTotalRecordsLabel?: (totalRecords: number) => string
 }
 
 export function DataTable<TData, TValue>({
@@ -67,6 +69,9 @@ export function DataTable<TData, TValue>({
   toolbar,
   className,
   onRowClick,
+  paginationPageInfoLabel = (currentPage, totalPages) =>
+    `Page ${currentPage} of ${totalPages}`,
+  paginationTotalRecordsLabel = (totalRecords) => `${totalRecords} records`,
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -237,11 +242,17 @@ export function DataTable<TData, TValue>({
           <div className="flex items-center justify-between px-4 py-3 border-t">
             <div className="flex items-center gap-2 text-sm text-muted-foreground">
               <span>
-                第 {table.getState().pagination.pageIndex + 1} 页，共{" "}
-                {table.getPageCount()} 页
+                {paginationPageInfoLabel(
+                  table.getState().pagination.pageIndex + 1,
+                  table.getPageCount()
+                )}
               </span>
               <span>•</span>
-              <span>共 {table.getFilteredRowModel().rows.length} 条记录</span>
+              <span>
+                {paginationTotalRecordsLabel(
+                  table.getFilteredRowModel().rows.length
+                )}
+              </span>
             </div>
             <div className="flex items-center gap-2">
               <Button
diff --git a/studio/src/i18n/locales/en/admin.json b/studio/src/i18n/locales/en/admin.json
index 065fafc5c..7dec7ce1e 100644
--- a/studio/src/i18n/locales/en/admin.json
+++ b/studio/src/i18n/locales/en/admin.json
@@ -435,6 +435,14 @@
       "static": "Static",
       "dynamic": "Dynamic"
     },
+    "table": {
+      "status": "Status",
+      "name": "Module Name",
+      "description": "Description",
+      "actions": "Actions",
+      "pageInfo": "Page {{current}} of {{total}}",
+      "totalRecords": "{{count}} records"
+    },
     "actions": {
       "enable": "Enable",
       "disable": "Disable",
@@ -465,6 +473,10 @@
       "maxPagesPerAgent": "Max Pages Per Agent",
       "maxPageContentLength": "Max Page Content Length",
       "configJson": "Config (JSON)",
+      "selectPlaceholder": "Please select...",
+      "addOptionPlaceholder": "Add option...",
+      "addItem": "Add item",
+      "unsupportedFieldType": "Unsupported field type",
       "noSchema": {
         "title": "No Configuration Schema",
         "description": "This mod has not defined a configuration schema. The schema will be defined in the mod's manifest.json file."
diff --git a/studio/src/pages/mod-management/ConfigFieldRenderer.tsx b/studio/src/pages/mod-management/ConfigFieldRenderer.tsx
index 31257813c..3f75a277b 100644
--- a/studio/src/pages/mod-management/ConfigFieldRenderer.tsx
+++ b/studio/src/pages/mod-management/ConfigFieldRenderer.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { ConfigField } from '@/types/modConfig';
 import { Input } from '@/components/layout/ui/input';
 import { Label } from '@/components/layout/ui/label';
@@ -29,6 +30,7 @@ const ConfigFieldRenderer: React.FC<ConfigFieldRendererProps> = ({
   errors = {},
   path = '',
 }) => {
+  const { t } = useTranslation('admin');
   const fieldPath = path ? `${path}.${field.key}` : field.key;
   const error = errors[fieldPath];
   const displayValue = value !== undefined && value !== null ? value : field.default;
@@ -100,7 +102,12 @@ const ConfigFieldRenderer: React.FC<ConfigFieldRendererProps> = ({
             }}
           >
             <SelectTrigger size="lg" className={error ? 'border-red-500' : ''}>
-              <SelectValue placeholder={field.placeholder || '请选择...'} />
+              <SelectValue
+                placeholder={
+                  field.placeholder ||
+                  t('modManagement.settings.selectPlaceholder', '请选择...')
+                }
+              />
             </SelectTrigger>
             <SelectContent>
               {field.options?.map((option) => (
@@ -126,7 +133,12 @@ const ConfigFieldRenderer: React.FC<ConfigFieldRendererProps> = ({
               }}
             >
               <SelectTrigger size="lg" className={error ? 'border-red-500' : ''}>
-                <SelectValue placeholder={field.placeholder || '添加选项...'} />
+                <SelectValue
+                  placeholder={
+                    field.placeholder ||
+                    t('modManagement.settings.addOptionPlaceholder', '添加选项...')
+                  }
+                />
               </SelectTrigger>
               <SelectContent>
                 {field.options?.map((option) => (
@@ -248,7 +260,7 @@ const ConfigFieldRenderer: React.FC<ConfigFieldRendererProps> = ({
               className="text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-800 hover:bg-blue-50 dark:hover:bg-blue-900/20"
             >
               <Plus className="w-4 h-4 mr-2" />
-              添加项
+              {t('modManagement.settings.addItem', '添加项')}
             </Button>
           </div>
         );
@@ -277,7 +289,7 @@ const ConfigFieldRenderer: React.FC<ConfigFieldRendererProps> = ({
       default:
         return (
           <div className="text-sm text-gray-500 dark:text-gray-400">
-            不支持的字段类型: {field.type}
+            {t('modManagement.settings.unsupportedFieldType', '不支持的字段类型')}: {field.type}
           </div>
         );
     }
diff --git a/studio/src/pages/mod-management/ModManagementPage.tsx b/studio/src/pages/mod-management/ModManagementPage.tsx
index cdf3592a5..5d47f8f09 100644
--- a/studio/src/pages/mod-management/ModManagementPage.tsx
+++ b/studio/src/pages/mod-management/ModManagementPage.tsx
@@ -411,6 +411,17 @@ const ModManagementPage: React.FC = () => {
           searchColumn={["id", "name", "displayName", "description"]}
           pagination={true}
           pageSize={10}
+          paginationPageInfoLabel={(currentPage, totalPages) =>
+            t("modManagement.table.pageInfo", "第 {{current}} 页，共 {{total}} 页", {
+              current: currentPage,
+              total: totalPages,
+            })
+          }
+          paginationTotalRecordsLabel={(totalRecords) =>
+            t("modManagement.table.totalRecords", "共 {{count}} 条记录", {
+              count: totalRecords,
+            })
+          }
           emptyMessage={t(
             "modManagement.enabledMods.empty",
             "No mods configured"

From d4fd6582db05e63a10f0c6705d322580804f8864 Mon Sep 17 00:00:00 2001
From: Emiel Kremers <emiel@kremers.us>
Date: Mon, 9 Mar 2026 15:32:59 +0100
Subject: [PATCH 2/2] feat(i18n): add search placeholder for agents in network
 localization

- Introduced a new translation key `searchPlaceholder` in the network JSON locale file to enhance user experience by providing a prompt for searching agents.
---
 studio/src/i18n/locales/en/network.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/studio/src/i18n/locales/en/network.json b/studio/src/i18n/locales/en/network.json
index 558fed526..f7a08eeec 100644
--- a/studio/src/i18n/locales/en/network.json
+++ b/studio/src/i18n/locales/en/network.json
@@ -75,6 +75,7 @@
         "refresh": "Refresh",
         "total": "Total Agents",
         "online": "Online Agents",
+        "searchPlaceholder": "Search agents...",
         "empty": "No agents connected",
         "you": "(You)",
         "kick": "Kick",