refactor: update styling and improve code readability across multiple components

2026-06-19 19:29:00 +08:00
parent a0de4b560e
commit 50b8f2a272
19 changed files with 646 additions and 364 deletions
@@ -17,6 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { cn } from '@/lib/utils'
+
 import type { DataTableColumnClassName, DataTablePinnedColumn } from './types'

 export function getResolvedColumnClassName(
@@ -37,14 +38,18 @@ export function getResolvedColumnClassNameFromMap(
    const customClassName = getColumnClassName?.(columnId, kind)
    const pinnedColumn = pinnedColumnById?.get(columnId)

-    if (!pinnedColumn) return customClassName
+    if (!pinnedColumn) {
+      return customClassName
+    }

    return cn(customClassName, getPinnedColumnClassName(pinnedColumn, kind))
  }
 }

 export function getPinnedColumnMap(pinnedColumns?: DataTablePinnedColumn[]) {
-  if (!pinnedColumns?.length) return undefined
+  if (!pinnedColumns?.length) {
+    return undefined
+  }

  return new Map(pinnedColumns.map((column) => [column.columnId, column]))
 }
@@ -63,7 +68,7 @@ function getPinnedColumnClassName(
    pinnedColumn.side === 'left' ? 'left-0' : 'right-0',
    edgeClassName,
    kind === 'header'
-      ? '[background-color:var(--table-header-bg,var(--background))] group-hover:[background-color:color-mix(in_oklch,var(--muted)_50%,var(--background))] z-30'
+      ? '[background-color:var(--table-header-bg,var(--table-header))] group-hover:[background-color:var(--table-header-hover)] z-30'
      : 'bg-background z-10 group-hover:[background-color:color-mix(in_oklch,var(--muted)_50%,var(--background))] group-data-[state=selected]:bg-muted',
    pinnedColumn.className,
    kind === 'header'
@@ -1,3 +1,4 @@
+import type { Row, Table as TanstackTable } from '@tanstack/react-table'
 /*
 Copyright (C) 2023-2026 QuantumNous

@@ -17,9 +18,10 @@ 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, type Table as TanstackTable } from '@tanstack/react-table'
-import { cn } from '@/lib/utils'
+
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
+import { cn } from '@/lib/utils'
+
 import {
  getPinnedColumnMap,
  getResolvedColumnClassNameFromMap,
@@ -136,7 +138,7 @@ function SplitHeaderTableView<TData>({
      <div
        className={cn(
          'min-h-0 flex-1 overflow-auto',
-          '**:data-[slot=table-header]:[--table-header-bg:color-mix(in_oklch,var(--muted)_30%,var(--background))]',
+          '**:data-[slot=table-header]:[--table-header-bg:var(--table-header)]',
          '**:data-[slot=table-header]:bg-(--table-header-bg)',
          props.splitHeaderScrollClassName,
          props.bodyContainerClassName
@@ -192,7 +194,9 @@ function getMetaPinnedColumns<TData>(
 ): DataTablePinnedColumn[] {
  return table.getAllColumns().flatMap((column) => {
    const side = column.columnDef.meta?.pinned
-    if (!side) return []
+    if (!side) {
+      return []
+    }

    return [{ columnId: column.id, side }]
  })
@@ -61,7 +61,7 @@ export {
 export { useDebouncedColumnFilter } from './hooks/use-debounced-column-filter'

 export const DISABLED_ROW_DESKTOP =
-  'bg-muted/85 hover:bg-muted [&>td:first-child]:border-l-muted-foreground/35 [&>td:first-child]:border-l-4 [&>td:first-child]:pl-1'
+  '[--data-table-card-bg:var(--table-disabled)] hover:[--data-table-card-bg:var(--table-disabled-hover)] [background-color:var(--table-disabled)] hover:[background-color:var(--table-disabled-hover)] [&>td:first-child]:[border-left-color:var(--table-disabled-border)] [&>td:first-child]:border-l-4 [&>td:first-child]:pl-1'

 export const DISABLED_ROW_MOBILE =
-  'border-l-4 border-l-muted-foreground/35 bg-muted/85'
+  '[--data-table-card-bg:var(--table-disabled)] [background-color:var(--table-disabled)] border-l-4 [border-left-color:var(--table-disabled-border)]'
@@ -1,3 +1,5 @@
+import type { Row, Table } from '@tanstack/react-table'
+import { Database } from 'lucide-react'
 /*
 Copyright (C) 2023-2026 QuantumNous

@@ -17,10 +19,8 @@ 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 } from '@tanstack/react-table'
-import { Database } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
+
 import {
  Empty,
  EmptyDescription,
@@ -29,6 +29,8 @@ import {
  EmptyTitle,
 } from '@/components/ui/empty'
 import { Skeleton } from '@/components/ui/skeleton'
+import { cn } from '@/lib/utils'
+
 import { tableHasCompactMeta } from './card-cell-utils'
 import { CardRowContent } from './card-row-content'

@@ -78,7 +80,7 @@ function CardGridSkeleton(props: {
      {[1, 2, 3, 4, 5, 6].map((i) => (
        <div
          key={`${prefix}-${i}`}
-          className='bg-card space-y-3 rounded-lg border p-3'
+          className='space-y-3 rounded-lg border [background-color:var(--table-row)] p-3'
        >
          <div className='flex items-center justify-between gap-2'>
            <Skeleton className='h-4 w-32' />
@@ -157,8 +159,9 @@ export function DataTableCardGrid<TData>(props: DataTableCardGridProps<TData>) {
        return (
          <div
            key={key}
+            data-slot='data-table-card'
            className={cn(
-              'bg-card rounded-lg border px-3 py-2.5',
+              'rounded-lg border [background-color:var(--data-table-card-bg,var(--table-row))] px-3 py-2.5',
              props.getRowClassName?.(row)
            )}
          >
@@ -1,3 +1,8 @@
+import type {
+  ColumnDef,
+  Row,
+  Table as TanstackTable,
+} from '@tanstack/react-table'
 /*
 Copyright (C) 2023-2026 QuantumNous

@@ -17,14 +22,11 @@ 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 ColumnDef,
-  type Row,
-  type Table as TanstackTable,
-} from '@tanstack/react-table'
+
+import { PageFooterPortal } from '@/components/layout'
 import { useMediaQuery } from '@/hooks'
 import { cn } from '@/lib/utils'
-import { PageFooterPortal } from '@/components/layout'
+
 import {
  DataTableView,
  type DataTableColumnClassName,
@@ -32,15 +34,15 @@ import {
  type DataTableRenderRowHelpers,
 } from '../core/data-table-view'
 import { DataTablePagination } from '../core/pagination'
-import { DataTableToolbar } from '../toolbar/toolbar'
-import { DataTableViewModeToggle } from '../toolbar/view-mode-toggle'
 import {
  DATA_TABLE_VIEW_MODES,
  useDataTableViewMode,
  type DataTableViewMode,
 } from '../hooks/use-data-table-view-mode'
-import { MobileCardList } from './mobile-card-list'
+import { DataTableToolbar } from '../toolbar/toolbar'
+import { DataTableViewModeToggle } from '../toolbar/view-mode-toggle'
 import { DataTableCardGrid } from './card-grid'
+import { MobileCardList } from './mobile-card-list'

 /**
 * Pass-through configuration for the default {@link DataTableToolbar}.
@@ -376,7 +378,9 @@ function renderToolbar<TData>(
 function renderPagination<TData>(
  props: DataTablePageProps<TData>
 ): React.ReactNode {
-  if (props.showPagination === false) return null
+  if (props.showPagination === false) {
+    return null
+  }

  const pagination = <DataTablePagination table={props.table} />

@@ -391,7 +395,9 @@ function renderMobile<TData>(
  props: DataTablePageProps<TData>,
  showMobile: boolean
 ): React.ReactNode {
-  if (!showMobile) return null
+  if (!showMobile) {
+    return null
+  }

  const ownGetRowClassName = props.getRowClassName
  const mobileGetRowClassName =
@@ -436,7 +442,9 @@ function renderDesktop<TData>(
  cardViewActive: boolean,
  viewMode: DataTableViewMode
 ): React.ReactNode {
-  if (showMobile) return null
+  if (showMobile) {
+    return null
+  }

  const isFetchingOnly = props.isFetching && !props.isLoading
  const fixedHeight = props.fixedHeight !== false
@@ -481,8 +489,7 @@ function renderDesktop<TData>(
      splitHeader={fixedHeight}
      tableContainerClassName={fixedHeight ? 'h-full min-h-0' : undefined}
      tableHeaderClassName={cn(
-        fixedHeight &&
-          '[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))]',
+        fixedHeight && '[background-color:var(--table-header)]',
        props.tableHeaderClassName
      )}
      getColumnClassName={props.getColumnClassName}
@@ -1,3 +1,5 @@
+import type { Row, Table } from '@tanstack/react-table'
+import { Database } from 'lucide-react'
 /*
 Copyright (C) 2023-2026 QuantumNous

@@ -17,10 +19,8 @@ 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 } from '@tanstack/react-table'
-import { Database } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
+
 import {
  Empty,
  EmptyDescription,
@@ -29,6 +29,8 @@ import {
  EmptyTitle,
 } from '@/components/ui/empty'
 import { Skeleton } from '@/components/ui/skeleton'
+import { cn } from '@/lib/utils'
+
 import { tableHasCompactMeta } from './card-cell-utils'
 import { CardRowContent } from './card-row-content'

@@ -143,7 +145,10 @@ export function MobileCardList<TData>(props: MobileCardListProps<TData>) {
        return (
          <div
            key={key}
-            className={cn('bg-card px-3 py-2.5', getRowClassName?.(row))}
+            className={cn(
+              '[background-color:var(--data-table-card-bg,var(--table-row))] px-3 py-2.5',
+              getRowClassName?.(row)
+            )}
          >
            <CardRowContent row={row} compact={hasCompactMeta} />
          </div>
@@ -23,7 +23,7 @@ export const staticDataTableClassNames = {
  compactTable: 'text-sm',
  compactHeaderRow: 'hover:bg-transparent',
  mutedHeaderRow:
-    '[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))] hover:[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))]',
+    '[background-color:var(--table-header)] hover:[background-color:var(--table-header-hover)]',
  compactHeaderCell:
    'text-muted-foreground py-2 text-[10px] font-medium tracking-wider uppercase',
  compactHeaderCellRight:
@@ -1,3 +1,4 @@
+import type { LucideIcon } from 'lucide-react'
 /*
 Copyright (C) 2023-2026 QuantumNous

@@ -18,10 +19,10 @@ For commercial licensing, please contact support@quantumnous.com
 */
 /* eslint-disable react-refresh/only-export-components */
 import * as React from 'react'
-import { type LucideIcon } from 'lucide-react'
+
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { stringToColor } from '@/lib/colors'
 import { cn } from '@/lib/utils'
-import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'

 export const dotColorMap = {
  success: 'bg-success',
@@ -37,7 +38,7 @@ export const dotColorMap = {
  grey: 'bg-neutral',
  indigo: 'bg-chart-1',
  'light-blue': 'bg-info',
-  'light-green': 'bg-success',
+  'light-green': 'bg-emerald-400',
  lime: 'bg-chart-3',
  orange: 'bg-warning',
  pink: 'bg-chart-5',
@@ -61,7 +62,7 @@ export const textColorMap = {
  grey: 'text-muted-foreground',
  indigo: 'text-chart-1',
  'light-blue': 'text-info',
-  'light-green': 'text-success',
+  'light-green': 'text-emerald-500 dark:text-emerald-300',
  lime: 'text-chart-3',
  orange: 'text-warning',
  pink: 'text-chart-5',