perf(data-table): improve data table layout and badge display (#5460)

* perf(table): use percentage-based column widths

- compute each column's width as a percentage of total column size instead of a fixed pixel value, letting the colgroup scale fluidly with the table container.

* perf(data-table): reduce unnecessary re-renders across table components

- stabilize commitSearchValue in toolbar by reading table/searchKey via refs, eliminating recreation on every parent render
- store onColumnFiltersChange in a ref so debounce effect is not reset when the caller passes a new function reference each render
- wrap DataTableRow in React.memo with a custom comparator that ignores getColumnClassName reference churn
- memoize selectedValues Set in DataTableFacetedFilter and wrap with React.memo to prevent rerenders on unrelated state changes
- cache cell meta reads in CompactRow and FallbackRow to a single pass per row; memoize hasCompactMeta in MobileCardList
- memoize hideable columns list in DataTableViewOptions and colSpan in DataTableView
- remove tableClassName and colgroup from scroll-sync effect deps; cache toolbar button NodeList via useLayoutEffect to avoid per-keydown DOM queries

* perf(data-table): replace scroll-sync split header with CSS sticky

- remove JS scroll-sync effect and event listener between split header and body containers.
- merge separate header/body tables into a single scrollable table element, reducing DOM complexity.
- apply CSS sticky positioning to the header for a simpler, hardware-accelerated freeze effect.

* fix(data-table): replace opacity muted colors with color-mix

- switch from bg-muted/50 and bg-muted/30 to color-mix(in oklch) to produce opaque blended backgrounds that prevent scroll content from showing through pinned cells.
- expose --table-header-bg CSS variable so pinned header cells inherit the exact same computed color as the thead background.
- add group class to TableRow to enable group-hover selectors on pinned cell styles.

* feat(data-table): support column pinning via meta.pinned

- add pinned?: 'left' | 'right' to ColumnMeta so pinning is declared once in the column definition and applies to both header and body automatically
- DataTableView derives pinnedColumns from meta.pinned at runtime, merged with any explicit pinnedColumns prop; explicit entries take precedence
- add header and meta.pinned: 'right' to all actions columns across channels, users, api-keys, redemption-codes, models, deployments, and subscriptions tables

* style(row-actions): align action buttons to leading edge of column

* refactor(data-table): extract BadgeListCell and centralize badge alignment

- add BadgeListCell component to data-table for badge lists with overflow tooltip, replacing duplicated renderLimitedItems helpers in channels, models, and pricing columns
- move StatusBadge -ml-1.5 alignment into the component itself via a table-cell context selector, so callers no longer need manual offset wrappers
- remove the table-cell-level -ml-1.5 selector from TableCell now that alignment is handled by StatusBadge directly

* style(row-actions): offset action buttons to align with column header text

* refactor(data-table): consolidate mobile meta into ColumnMeta declaration

- move mobileTitle, mobileBadge, mobileHidden into the global ColumnMeta augmentation so the type is shared across the project
- remove the local MobileColumnMeta interface and getCellMeta helper from mobile-card-list.tsx
- direct col.columnDef.meta access is now type-safe without explicit casting

* refactor(data-table): simplify column header and meta config

- auto-render string `header` values via DataTableColumnHeader so sortable/non-sortable columns work without boilerplate function wrappers
- promote mobile layout hints (mobileTitle, mobileBadge, mobileHidden) into the global ColumnMeta type, removing the local MobileColumnMeta cast in mobile-card-list
- migrate all column files from `meta: { label }` to top-level `header: t('...')`, cutting ~180 lines of repetitive template code
- ViewOptions and MobileCardList label resolution now reads string header first, then meta.label as fallback

* feat(status-badge): add text and underline display types

- introduce StatusBadgeType ('badge' | 'text' | 'underline') and StatusBadgeTypeContext so ancestors can override rendering without touching call sites
- mobile card field rows now use the text type via context, showing badges as plain colored text instead of pills
- ProviderBadge gains data-slot='provider-badge' to enable targeted CSS resets in compact layouts
- replace the implicit [[data-slot=table-cell]>&]:-ml-1.5 rule with explicit -ml-1.5 at each column call site

* refactor(data-table): simplify table filtering internals

- derive toolbar search state from the active table filter to avoid render-time ref writes.
- extract faceted filter selection updates into a pure helper for clearer single and multi-select behavior.
- split pinned column resolution into focused helpers so explicit and meta pins merge predictably.

Co-authored-by: t0ng7u <dev@aiass.cc>

web/default/src/components/data-table/toolbar/toolbar.tsx

@@ -19,9 +19,9 @@ For commercial licensing, please contact support@quantumnous.com
 import * as React from 'react'
 import { useState, type ReactNode } from 'react'
 import { type Table } from '@tanstack/react-table'
+import { useDebounce } from '@/hooks'
 import { ChevronDown, Loader2, X as Cross2Icon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { useDebounce } from '@/hooks'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -41,6 +41,11 @@ type FilterDef = {
   singleSelect?: boolean
 }
 
+type SearchDraft = {
+  baseValue: string
+  value: string
+}
+
 export type DataTableToolbarProps<TData> = {
   table: Table<TData>
   /**
@@ -141,8 +146,7 @@ export type DataTableToolbarProps<TData> = {
 export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
   const { t } = useTranslation()
   const [expanded, setExpanded] = useState(false)
-  const isSearchComposingRef = React.useRef(false)
-  const lastCommittedSearchValueRef = React.useRef('')
+  const [isSearchComposing, setIsSearchComposing] = useState(false)
 
   const filters = props.filters ?? []
   const hasExpandable = props.expandable != null
@@ -159,31 +163,22 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
       '')
     : ((props.table.getState().globalFilter as string | undefined) ?? '')
 
-  const [searchValue, setSearchValue] = useState(currentSearchValue)
-  const [pendingSearchValue, setPendingSearchValue] =
-    useState(currentSearchValue)
+  const [searchDraft, setSearchDraft] = useState<SearchDraft | null>(null)
+  const activeSearchDraft =
+    searchDraft &&
+    (isSearchComposing || searchDraft.baseValue === currentSearchValue)
+      ? searchDraft
+      : null
+  const searchValue = activeSearchDraft?.value ?? currentSearchValue
   const searchDebounceMs = Math.max(0, props.searchDebounceMs ?? 0)
-  const debouncedSearchValue = useDebounce(
-    pendingSearchValue,
-    searchDebounceMs
-  )
-
-  React.useEffect(() => {
-    lastCommittedSearchValueRef.current = currentSearchValue
-    if (!isSearchComposingRef.current) {
-      setSearchValue(currentSearchValue)
-    }
-    setPendingSearchValue(currentSearchValue)
-  }, [currentSearchValue])
+  const debouncedSearchValue = useDebounce(searchValue, searchDebounceMs)
 
   const commitSearchValue = React.useCallback(
     (value: string) => {
-      if (value === lastCommittedSearchValueRef.current) {
+      if (value === currentSearchValue) {
         return
       }
 
-      lastCommittedSearchValueRef.current = value
-
       if (props.searchKey) {
         props.table.getColumn(props.searchKey)?.setFilterValue(value)
         return
@@ -191,14 +186,14 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
 
       props.table.setGlobalFilter(value)
     },
-    [props.searchKey, props.table]
+    [currentSearchValue, props.searchKey, props.table]
   )
 
   React.useEffect(() => {
     if (
       searchDebounceMs <= 0 ||
-      isSearchComposingRef.current ||
-      debouncedSearchValue !== pendingSearchValue
+      isSearchComposing ||
+      debouncedSearchValue !== searchValue
     ) {
       return
     }
@@ -207,13 +202,12 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
   }, [
     commitSearchValue,
     debouncedSearchValue,
-    pendingSearchValue,
+    isSearchComposing,
     searchDebounceMs,
+    searchValue,
   ])
 
   const queueSearchValue = (value: string) => {
-    setPendingSearchValue(value)
-
     if (searchDebounceMs <= 0) {
       commitSearchValue(value)
     }
@@ -221,36 +215,27 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value
-    setSearchValue(value)
+    setSearchDraft({ baseValue: currentSearchValue, value })
 
-    if (!isSearchComposingRef.current) {
+    if (!isSearchComposing) {
       queueSearchValue(value)
     }
   }
 
   const handleSearchCompositionStart = () => {
-    isSearchComposingRef.current = true
+    setIsSearchComposing(true)
   }
 
   const handleSearchCompositionEnd = (
     event: React.CompositionEvent<HTMLInputElement>
   ) => {
-    isSearchComposingRef.current = false
+    setIsSearchComposing(false)
     const value = event.currentTarget.value
-    setSearchValue(value)
+    setSearchDraft({ baseValue: currentSearchValue, value })
     queueSearchValue(value)
   }
 
-  const searchInput = props.searchKey ? (
-    <Input
-      placeholder={placeholder}
-      value={searchValue}
-      onChange={handleSearchChange}
-      onCompositionStart={handleSearchCompositionStart}
-      onCompositionEnd={handleSearchCompositionEnd}
-      className='w-full sm:w-[200px] lg:w-[240px]'
-    />
-  ) : (
+  const searchInput = (
     <Input
       placeholder={placeholder}
       value={searchValue}
@@ -261,25 +246,28 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
     />
   )
 
-  const filterChips = filters.map((filter) => {
-    const column = props.table.getColumn(filter.columnId)
-    if (!column) return null
-    return (
-      <DataTableFacetedFilter
-        key={filter.columnId}
-        column={column}
-        title={filter.title}
-        options={filter.options}
-        singleSelect={filter.singleSelect}
-      />
-    )
-  })
+  const filterChips = React.useMemo(
+    () =>
+      filters.map((filter) => {
+        const column = props.table.getColumn(filter.columnId)
+        if (!column) return null
+        return (
+          <DataTableFacetedFilter
+            key={filter.columnId}
+            column={column}
+            title={filter.title}
+            options={filter.options}
+            singleSelect={filter.singleSelect}
+          />
+        )
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.filters, props.table]
+  )
 
   const handleReset = () => {
-    isSearchComposingRef.current = false
-    setSearchValue('')
-    setPendingSearchValue('')
-    lastCommittedSearchValueRef.current = ''
+    setIsSearchComposing(false)
+    setSearchDraft(null)
     props.table.resetColumnFilters()
     props.table.setGlobalFilter('')
     props.onReset?.()