perf(web): streamline table actions and destructive dialogs (#5645)

* perf(data-table): autosize action columns - exclude actions columns from shared table width calculations so action cells size to their content. - remove fixed size and w-* width overrides from feature action columns to preserve content-based layout. * perf(data-table): streamline row action controls - expose common edit and status actions directly while moving secondary actions into overflow menus. - add shared row action menu helpers so static and table rows use consistent action controls. - let action columns size to their content instead of relying on fixed widths. * fix(web): localize destructive dialog copy - route delete, reset, and batch update confirmation text through i18n. - add locale entries for affected channel, model, system settings, and user dialogs. * perf(web): unify destructive dialog actions - align delete and cleanup confirmation buttons with the shared destructive variant. - replace custom destructive color overrides with semantic button variants. - clean up lint errors in touched dialog files before committing. * fix(web): add user action success translations - add localized success messages for user delete, status, and role changes. - keep user management toast copy available across all frontend locales. * fix(data-table): prevent mobile badge clipping - expose badge cell slots so mobile card styles can target nested badge wrappers. - reset badge margins in card rows to keep provider icons fully visible on small screens.
2026-06-25 13:13:41 +08:00
parent b191f47375
commit 9ba251ce5f
61 changed files with 1340 additions and 1131 deletions
@@ -24,6 +24,7 @@ type BadgeCellProps = React.HTMLAttributes<HTMLDivElement>
 export function BadgeCell({ className, ...props }: BadgeCellProps) {
  return (
    <div
+      data-slot='badge-cell'
      className={cn(
        '-ml-1.5 flex max-w-full min-w-0 items-center gap-1 overflow-hidden [&_[data-slot=status-badge]]:max-w-full [&_[data-slot=status-badge]]:min-w-0',
        className
@@ -0,0 +1,21 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+export function isContentSizedColumn(columnId: string): boolean {
+  return columnId === 'actions'
+}
@@ -18,27 +18,36 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import type { Table as TanstackTable } from '@tanstack/react-table'

+import { isContentSizedColumn } from './content-sized-columns'
+
 export function DataTableColgroup<TData>({
  table,
 }: {
  table: TanstackTable<TData>
 }) {
  const columns = table.getVisibleLeafColumns()
-  const totalSize = columns.reduce((sum, col) => sum + col.getSize(), 0)
+  const sizedColumns = columns.filter(
+    (column) => !isContentSizedColumn(column.id)
+  )
+  const totalSize = sizedColumns.reduce((sum, col) => sum + col.getSize(), 0)

  return (
    <colgroup>
-      {columns.map((column) => (
-        <col
-          key={column.id}
-          style={{
-            width:
-              totalSize > 0
-                ? `${(column.getSize() / totalSize) * 100}%`
-                : undefined,
-          }}
-        />
-      ))}
+      {columns.map((column) => {
+        const width = isContentSizedColumn(column.id)
+          ? undefined
+          : getColumnWidth(column.getSize(), totalSize)
+
+        return <col key={column.id} style={{ width }} />
+      })}
    </colgroup>
  )
 }
+
+function getColumnWidth(columnSize: number, totalSize: number) {
+  if (totalSize <= 0) {
+    return undefined
+  }
+
+  return `${(columnSize / totalSize) * 100}%`
+}
@@ -23,6 +23,7 @@ import {
 } from '@tanstack/react-table'
 import { TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { DataTableColumnHeader } from './column-header'
+import { isContentSizedColumn } from './content-sized-columns'
 import type { DataTableColumnClassName } from './types'

 type DataTableHeaderProps<TData> = {
@@ -49,7 +50,7 @@ export function DataTableHeader<TData>({
              key={header.id}
              colSpan={header.colSpan}
              className={getColumnClassName?.(header.column.id, 'header')}
-              style={applyHeaderSize ? { width: header.getSize() } : undefined}
+              style={getHeaderSizeStyle(header, applyHeaderSize)}
            >
              {renderHeaderContent(header)}
            </TableHead>
@@ -60,6 +61,17 @@ export function DataTableHeader<TData>({
  )
 }

+function getHeaderSizeStyle<TData>(
+  header: Header<TData, unknown>,
+  applyHeaderSize: boolean | undefined
+) {
+  if (!applyHeaderSize || isContentSizedColumn(header.column.id)) {
+    return undefined
+  }
+
+  return { width: header.getSize() }
+}
+
 function renderHeaderContent<TData>(header: Header<TData, unknown>) {
  if (header.isPlaceholder) return null
  const { header: headerDef, meta } = header.column.columnDef
@@ -1,4 +1,3 @@
-import type { Row, Table as TanstackTable } from '@tanstack/react-table'
 /*
 Copyright (C) 2023-2026 QuantumNous

@@ -18,6 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import * as React from 'react'
+import type { Row, Table as TanstackTable } from '@tanstack/react-table'

 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
 import { cn } from '@/lib/utils'
@@ -45,6 +45,7 @@ export type {
  DataTableViewProps,
 } from './types'
 export { DataTableRow } from './data-table-row'
+export { DataTableRowActionMenu } from './row-action-menu'

 export function DataTableView<TData>(props: DataTableViewProps<TData>) {
  const rows = props.rows ?? props.table.getRowModel().rows
@@ -0,0 +1,60 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import * as React from 'react'
+import { MoreHorizontal } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
+
+type DataTableRowActionMenuProps = {
+  children: React.ReactNode
+  ariaLabel: string
+  contentClassName?: string
+  modal?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function DataTableRowActionMenu(props: DataTableRowActionMenuProps) {
+  return (
+    <DropdownMenu modal={props.modal} onOpenChange={props.onOpenChange}>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='ghost'
+            size='icon'
+            className='data-popup-open:bg-muted'
+            aria-label={props.ariaLabel}
+          />
+        }
+      >
+        <MoreHorizontal aria-hidden='true' />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align='end'
+        className={cn('w-48', props.contentClassName)}
+      >
+        {props.children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
@@ -19,11 +19,14 @@ For commercial licensing, please contact support@quantumnous.com
 import type * as React from 'react'
 import type { Table as TanstackTable } from '@tanstack/react-table'

+import { isContentSizedColumn } from './content-sized-columns'
+
 export function getTableSizeStyle<TData>(
  table: TanstackTable<TData>
 ): React.CSSProperties {
  const width = table
    .getVisibleLeafColumns()
+    .filter((column) => !isContentSizedColumn(column.id))
    .reduce((total, column) => total + column.getSize(), 0)

  return {
@@ -28,9 +28,11 @@ export {
  StaticDataTable,
  type StaticDataTableColumn,
 } from './static/static-data-table'
+export { StaticRowActions } from './static/static-row-actions'
 export { staticDataTableClassNames } from './static/static-data-table-classnames'
 export {
  DataTableRow,
+  DataTableRowActionMenu,
  DataTableView,
  type DataTableColumnClassName,
  type DataTablePinnedColumn,
@@ -96,7 +96,7 @@ function CompactContent<TData>({ row }: { row: Row<TData> }) {
                    {label}
                  </div>
                )}
-                <div className='min-w-0 overflow-hidden text-xs [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'>
+                <div className='min-w-0 overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
                  <StatusBadgeTypeContext.Provider value='text'>
                    {renderCellContent(cell) ?? '-'}
                  </StatusBadgeTypeContext.Provider>
@@ -146,7 +146,7 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
          return (
            <div
              key={cell.id}
-              className='flex justify-end overflow-hidden [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'
+              className='flex justify-end overflow-hidden [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'
            >
              <StatusBadgeTypeContext.Provider value='text'>
                {renderCellContent(cell)}
@@ -163,7 +163,7 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
            <span className='text-muted-foreground shrink-0 text-[10px] font-medium select-none'>
              {label}
            </span>
-            <div className='flex min-w-0 flex-1 items-center justify-end overflow-hidden text-xs [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'>
+            <div className='flex min-w-0 flex-1 items-center justify-end overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
              <StatusBadgeTypeContext.Provider value='text'>
                {renderCellContent(cell) ?? '-'}
              </StatusBadgeTypeContext.Provider>
@@ -23,7 +23,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import * as React from 'react'

-import { PageFooterPortal } from '@/components/layout'
+import { PageFooterPortal } from '@/components/layout/components/page-footer'
 import { useMediaQuery } from '@/hooks'
 import { cn } from '@/lib/utils'

@@ -42,6 +42,6 @@ export const staticDataTableClassNames = {
  mutedCodeCell: 'text-muted-foreground font-mono text-sm',
  topNumericCell: 'py-2 text-right font-mono',
  mediumCell: 'font-medium',
-  actionHeaderCell: 'text-right',
-  actionCell: 'text-right',
+  actionHeaderCell: 'w-auto max-w-none text-right',
+  actionCell: 'w-auto max-w-none text-right',
 } as const
@@ -0,0 +1,63 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { Pencil, Trash2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenuItem,
+  DropdownMenuShortcut,
+} from '@/components/ui/dropdown-menu'
+import { DataTableRowActionMenu } from '../core/row-action-menu'
+
+type StaticRowActionsProps = {
+  editLabel: string
+  deleteLabel: string
+  menuLabel: string
+  onEdit: () => void
+  onDelete: () => void
+  editDisabled?: boolean
+  deleteDisabled?: boolean
+}
+
+export function StaticRowActions(props: StaticRowActionsProps) {
+  return (
+    <div className='flex justify-end gap-1'>
+      <Button
+        variant='ghost'
+        size='icon-sm'
+        onClick={props.onEdit}
+        disabled={props.editDisabled}
+        aria-label={props.editLabel}
+      >
+        <Pencil />
+      </Button>
+      <DataTableRowActionMenu ariaLabel={props.menuLabel}>
+        <DropdownMenuItem
+          onClick={props.onDelete}
+          disabled={props.deleteDisabled}
+          className='text-destructive focus:text-destructive'
+        >
+          {props.deleteLabel}
+          <DropdownMenuShortcut>
+            <Trash2 size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DataTableRowActionMenu>
+    </div>
+  )
+}
@@ -1,5 +1,5 @@
 import { cn } from '@/lib/utils'
-import { TruncatedCell } from '@/components/data-table'
+import { TruncatedCell } from '@/components/data-table/core/truncated-cell'

 interface TruncatedTextProps {
  text: string