fix(web): refine mobile user cards

2281c9e3 · CaIon · 4a64b870 · 2281c9e3 · 2281c9e3 · 2281c9e3
Commit 2281c9e3 authored Jul 05, 2026 by CaIon
8 changed files
--- a/web/default/src/components/data-table/layout/card-row-content.tsx
+++ b/web/default/src/components/data-table/layout/card-row-content.tsx
@@ -16,13 +16,27 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
-import type { Row } from '@tanstack/react-table'
+import type { Cell, Row } from '@tanstack/react-table'
 import * as React from 'react'
 import { StatusBadgeTypeContext } from '@/components/status-badge'
 import { getCellLabel, renderCellContent } from './card-cell-utils'
+function orderCardCells<TData>(
+  cells: Cell<TData, unknown>[]
+): Cell<TData, unknown>[] {
+  return [...cells].sort((a, b) => {
+    const aOrder = a.column.columnDef.meta?.mobileOrder
+    const bOrder = b.column.columnDef.meta?.mobileOrder
+    if (aOrder == null && bOrder == null) return 0
+    if (aOrder == null) return 1
+    if (bOrder == null) return -1
+    return aOrder - bOrder
+  })
+}
 /**
 * Shared, column-meta-driven card content rendering for TanStack rows.
 *
@@ -62,13 +76,15 @@ function CompactContent<TData>({ row }: { row: Row<TData> }) {
  const titleCell = allCells.find((_, i) => cellMetas[i]?.mobileTitle)
  const badgeCell = allCells.find((_, i) => cellMetas[i]?.mobileBadge)
  const actionsCell = allCells.find((c) => c.column.id === 'actions')
-  const fieldCells = allCells.filter(
+  const fieldCells = orderCardCells(
+    allCells.filter(
      (c, i) =>
        c !== titleCell &&
        c !== badgeCell &&
        c !== actionsCell &&
        !cellMetas[i]?.mobileHidden
    )
+  )
  return (
    <>
@@ -135,9 +151,11 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
  )
  const actionsCell = allCells.find((c) => c.column.id === 'actions')
-  const contentCells = allCells.filter(
+  const contentCells = orderCardCells(
+    allCells.filter(
      (c, i) => c.column.id !== 'actions' && !cellMetas[i]?.mobileHidden
    )
+  )
  return (
    <>

--- a/web/default/src/features/users/components/users-columns.tsx
+++ b/web/default/src/features/users/components/users-columns.tsx
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
-import { type ColumnDef } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 import { BadgeCell } from '@/components/data-table'
@@ -40,7 +40,7 @@ import {
  USER_ROLES,
  isUserDeleted,
 } from '../constants'
-import { type User } from '../types'
+import type { User } from '../types'
 import { DataTableRowActions } from './data-table-row-actions'
 function getQuotaProgressColor(percentage: number): string {
@@ -80,11 +80,14 @@ export function useUsersColumns(): ColumnDef<User>[] {
      header: t('ID'),
      cell: ({ row }) => {
        return (
-          <TableId value={row.getValue('id') as number} className='w-[60px]' />
+          <TableId
+            value={row.getValue('id') as number}
+            className='w-[60px] text-sm'
+          />
        )
      },
      size: 80,
-      meta: { mobileHidden: true },
+      meta: { mobileOrder: 10 },
    },
    {
      accessorKey: 'username',
@@ -224,6 +227,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
        )
      },
      size: 170,
+      meta: { mobileOrder: 40 },
    },
    {
      accessorKey: 'group',
@@ -242,6 +246,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
        return group.includes(searchValue)
      },
      size: 140,
+      meta: { mobileOrder: 30 },
    },
    {
      accessorKey: 'role',
@@ -268,6 +273,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
      },
      enableSorting: false,
      size: 120,
+      meta: { mobileOrder: 20 },
    },
    {
      id: 'invite_info',

--- a/web/default/src/i18n/locales/fr.json
+++ b/web/default/src/i18n/locales/fr.json
@@ -3718,7 +3718,7 @@
    "Right to Left": "De droite à gauche",
    "Role": "Rôle",
    "Roleplay": "Roleplay",
-    "Root": "Racine",
+    "Root": "Root",
    "Rose Garden": "Jardin de roses",
    "Route": "Route",
    "Route active": "Route active",

--- a/web/default/src/i18n/locales/ja.json
+++ b/web/default/src/i18n/locales/ja.json
@@ -3718,7 +3718,7 @@
    "Right to Left": "右から左",
    "Role": "ロール",
    "Roleplay": "ロールプレイ",
-    "Root": "ルート",
+    "Root": "Root",
    "Rose Garden": "ローズガーデン",
    "Route": "ルート",
    "Route active": "ルート有効",

--- a/web/default/src/i18n/locales/ru.json
+++ b/web/default/src/i18n/locales/ru.json
@@ -3718,7 +3718,7 @@
    "Right to Left": "Справа налево",
    "Role": "Роль",
    "Roleplay": "Ролевые игры",
-    "Root": "Корень",
+    "Root": "Root",
    "Rose Garden": "Розовый сад",
    "Route": "Маршрут",
    "Route active": "Маршрут активен",

--- a/web/default/src/i18n/locales/vi.json
+++ b/web/default/src/i18n/locales/vi.json
@@ -3718,7 +3718,7 @@
    "Right to Left": "Phải sang trái",
    "Role": "Vai trò",
    "Roleplay": "Nhập vai",
-    "Root": "Gốc",
+    "Root": "Root",
    "Rose Garden": "Vườn hoa hồng",
    "Route": "Tuyến đường",
    "Route active": "Tuyến đang hoạt động",

--- a/web/default/src/i18n/locales/zh.json
+++ b/web/default/src/i18n/locales/zh.json
@@ -3718,7 +3718,7 @@
    "Right to Left": "从右到左",
    "Role": "角色",
    "Roleplay": "角色扮演",
-    "Root": "根",
+    "Root": "Root",
    "Rose Garden": "玫瑰花园",
    "Route": "路由",
    "Route active": "路由已启用",

--- a/web/default/src/tanstack-table.d.ts
+++ b/web/default/src/tanstack-table.d.ts
@@ -28,5 +28,6 @@ declare module '@tanstack/react-table' {
    mobileTitle?: boolean // card title area (left, larger text)
    mobileBadge?: boolean // status badge alongside title (right)
    mobileHidden?: boolean // hide this column on mobile entirely
+    mobileOrder?: number // lower values appear first in card field area
  }
 }