feat(web/default): unified UI overhaul — Base UI migration, theme presets, rankings dashboard, and table toolbar refactor (#4633)

* 🎨 feat(web/default): add shadcn-style theme presets, radius prefs, and fix selection badges Integrate the qn-platform–style OKLCH color system into the default frontend while keeping the existing blue-tinted dark tokens for the default theme. Add [data-theme-preset] palettes for seven named presets plus the default zinc-like scale, define [data-theme-radius] overrides so user radius beats preset --radius, and align the Tailwind @custom-variant dark helper with .dark usage. Introduce ThemeCustomizationProvider to own preset and radius state, persist choices in cookies (theme-preset, theme-radius), and sync data-theme-preset / data-theme-radius on <html>. Wrap the tree in main.tsx. Extend ConfigDrawer with theme preset swatches (scoped data-theme-preset) and radius previews wired to context; refactor swatch/card markup so selected CircleCheck badges sit outside clipped rows (remove outer overflow-hidden that hid the centered checkmark). Add i18n keys for preset names, radius, and accessibility labels across en, zh, fr, ja, ru, vi. * 🎨 fix(web): align segmented controls with theme radius tokens - Replace hard-coded inner pill radii (rounded-[5px]) on dashboard chart toolbars with radius-md so the active state follows --radius when users change Radius in Theme Settings. - Use nested radii consistent with TabsList/TabsTrigger: outer rounded-lg (var(--radius)) and inner rounded-md (calc(var(--radius) - 2px)) so the track and active thumb stay concentric at small scales (e.g. 0.3rem) instead of a squared “focus” block inside a rounded shell. - Apply the same pattern to pricing SegmentedControl and the segmented groups in consumption-distribution-chart, model-charts, and user-charts. Verified: bun run typecheck (web/default) * ✨ feat(pricing): enrich model details with uptime sparkline and API documentation Add a compact 30-day uptime sparkline (OpenRouter-style bars + aggregate %) with per-day tooltips, surface it in a status row under quick stats and in the per-group performance table, and extend mock data so uptime series are stable and optionally scoped by group. Introduce an API tab with Shiki-highlighted code samples (cURL, Python, TypeScript, JavaScript), endpoint-type switching, authentication guidance, a supported-parameters table, and mock per-group RPM/TPM/RPD limits. Infer vendor, tokenizer, license, and data-retention hints for a provider & data privacy card on the Overview tab (capabilities/modalities stay with model identity; rate limits stay with the API tab). Update i18n for all new user-facing strings across en, zh, fr, ja, ru, and vi. * 🏆 feat(rankings): add comprehensive rankings dashboard Add a mock-data powered rankings experience with period tabs, model, app, and vendor leaderboards, market share and history charts, movers, new releases, and per-category sections while backend analytics are pending. Link ranked models to pricing details and ranked vendors to filtered pricing results, and include localized copy for all supported frontend locales. * fix(theme): correct theme preset selection state - update Base UI Radio selectors to use data-checked/data-unchecked states. - fix unchecked theme options still showing selected indicators. - isolate the default theme preview tokens to prevent preset changes from leaking into it. * fix(setup): correct usage mode radio state - use Base UI data-checked/data-unchecked states for RadioGroup styling. - hide radio indicators when options are unchecked to avoid setup page display issues. - drive usage mode card and icon selection styles from Base UI state. * fix(auth): submit sign-in and sign-up forms * 🎨 refactor: Align default theme with shadcn Base Nova and prune legacy customization Migrate shadcn UI to Base UI primitives via CLI (`base-nova` / `components.json`) and reinstall full component registry with `--overwrite`, including Hugeicons-backed widgets and newly added registry components. - Remove custom multi-preset/theme-radius system (`ThemeCustomizationProvider`, cookies, preset UI from config drawer); rely on official semantic CSS tokens + light/dark only. - Replace `theme.css` with shadcn’s documented neutral `:root`/`.dark` palette and `@theme inline` mappings (plus skeleton token vars for existing shimmer usage). - Update global styles for Base UI: collapsible animation uses `--collapsible-panel-height`; clarify scroll-lock override comment. Application compatibility: - Keep minimal shims where app code diverged from official APIs (popover collision props, combobox legacy `options` callers, Spinner prop typing). - Switch interactive styling from Radix-era `data-state` / `--radix-*` selectors to Base UI semantics (`data-open`, `data-popup-open`, `data-panel-open`, `--anchor-width`, etc.) Tooling / docs / build: - Rename Rsbuild vendor chunk grouping to `@base-ui` + transitive `@radix-ui`. - Refresh AGENTS.md / CLAUDE.md / classic→default sync skill for Base UI stack. - Bump `package.json` / lockfile for shadcn-postinstall deps (Hugeicons, chart stack, themes, etc.) Verified: `bun run typecheck` passes. Note: `bun run lint` still reports pre-existing hooks rule violations elsewhere; not addressed in this change. * 🎨 chore(web/default): unify table toolbar, relocate usage stats, refine filters - Refactor DataTableToolbar to a single wrapping flex row with a right-aligned action cluster (Reset / Search / View / Expand) for a cleaner Ant Design Pro–style filter bar; remove the dedicated stats row and the toolbar `stats` prop. - Move Common Logs summary badges (Usage / RPM / TPM) and the sensitive- data visibility toggle into the page header via CommonLogsHeaderActions and SectionPageLayout.Actions so the toolbar stays focused on filters. - Slim CommonLogsFilterBar props (no stats / preActions eye control). - Improve CompactDateTimeRangePicker: show minute-precision labels on the trigger (seconds omitted; aligns with datetime-local inputs); widen the trigger on sm+ breakpoints so the full range is visible without truncation; apply the same width in task logs filters. - Simplify DataTableViewOptions: text-only “View” trigger, no sliders icon. - Earlier layout tweak: extra top padding on SectionPageLayout scroll content so control focus rings are not clipped by overflow. * feat(web/default): Base UI migration and component foundation Migrate from Radix UI to Base UI, rewrite core UI primitives, update dependencies (recharts, date-fns, next-themes), add shadcn agent skill documentation, and refresh AI element components. This is the foundational work from the v2/localmain lineage that was not covered by the individual feature commits above. --------- Co-authored-by: t0ng7u <dev@aiass.cc> Co-authored-by: QuentinHsu <xuquentinyang@gmail.com>
2026-05-06 12:39:36 +08:00
parent dac55f0fde
commit 8b2b03d276
317 changed files with 19928 additions and 7065 deletions
@@ -84,18 +84,20 @@ export function DataTableBulkActions<TData>({
    <>
      <BulkActionsToolbar table={table} entityName='model'>
        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='outline'
-              size='icon'
-              onClick={handleEnableAll}
-              className='size-8'
-              aria-label={t('Enable selected models')}
-              title={t('Enable selected models')}
-            >
-              <Power />
-              <span className='sr-only'>{t('Enable selected models')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='outline'
+                size='icon'
+                onClick={handleEnableAll}
+                className='size-8'
+                aria-label={t('Enable selected models')}
+                title={t('Enable selected models')}
+              />
+            }
+          >
+            <Power />
+            <span className='sr-only'>{t('Enable selected models')}</span>
          </TooltipTrigger>
          <TooltipContent>
            <p>{t('Enable selected models')}</p>
@@ -103,18 +105,20 @@ export function DataTableBulkActions<TData>({
        </Tooltip>

        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='outline'
-              size='icon'
-              onClick={handleDisableAll}
-              className='size-8'
-              aria-label={t('Disable selected models')}
-              title={t('Disable selected models')}
-            >
-              <PowerOff />
-              <span className='sr-only'>{t('Disable selected models')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='outline'
+                size='icon'
+                onClick={handleDisableAll}
+                className='size-8'
+                aria-label={t('Disable selected models')}
+                title={t('Disable selected models')}
+              />
+            }
+          >
+            <PowerOff />
+            <span className='sr-only'>{t('Disable selected models')}</span>
          </TooltipTrigger>
          <TooltipContent>
            <p>{t('Disable selected models')}</p>
@@ -122,18 +126,20 @@ export function DataTableBulkActions<TData>({
        </Tooltip>

        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='outline'
-              size='icon'
-              onClick={handleCopyNames}
-              className='size-8'
-              aria-label={t('Copy model names')}
-              title={t('Copy model names')}
-            >
-              <Copy />
-              <span className='sr-only'>{t('Copy model names')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='outline'
+                size='icon'
+                onClick={handleCopyNames}
+                className='size-8'
+                aria-label={t('Copy model names')}
+                title={t('Copy model names')}
+              />
+            }
+          >
+            <Copy />
+            <span className='sr-only'>{t('Copy model names')}</span>
          </TooltipTrigger>
          <TooltipContent>
            <p>{t('Copy model names')}</p>
@@ -141,18 +147,20 @@ export function DataTableBulkActions<TData>({
        </Tooltip>

        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='destructive'
-              size='icon'
-              onClick={() => setShowDeleteConfirm(true)}
-              className='size-8'
-              aria-label={t('Delete selected models')}
-              title={t('Delete selected models')}
-            >
-              <Trash2 />
-              <span className='sr-only'>{t('Delete selected models')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='destructive'
+                size='icon'
+                onClick={() => setShowDeleteConfirm(true)}
+                className='size-8'
+                aria-label={t('Delete selected models')}
+                title={t('Delete selected models')}
+              />
+            }
+          >
+            <Trash2 />
+            <span className='sr-only'>{t('Delete selected models')}</span>
          </TooltipTrigger>
          <TooltipContent>
            <p>{t('Delete selected models')}</p>
@@ -45,14 +45,16 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {

  return (
    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant='ghost'
-          className='data-[state=open]:bg-muted flex h-8 w-8 p-0'
-        >
-          <MoreHorizontal className='h-4 w-4' />
-          <span className='sr-only'>{t('Open menu')}</span>
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='ghost'
+            className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+          />
+        }
+      >
+        <MoreHorizontal className='h-4 w-4' />
+        <span className='sr-only'>{t('Open menu')}</span>
      </DropdownMenuTrigger>
      <DropdownMenuContent align='end' className='w-48'>
        {/* Edit */}
@@ -2,7 +2,6 @@ import { useEffect, useMemo, useState } from 'react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { getRouteApi } from '@tanstack/react-router'
 import {
-  flexRender,
  getCoreRowModel,
  useReactTable,
  type VisibilityState,
@@ -10,7 +9,6 @@ import {
 import { useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
-import { cn } from '@/lib/utils'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
 import {
  AlertDialog,
@@ -22,22 +20,7 @@ import {
  AlertDialogHeader,
  AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import {
-  DataTableToolbar,
-  MobileCardList,
-  TableEmpty,
-  TableSkeleton,
-} from '@/components/data-table'
-import { DataTablePagination } from '@/components/data-table/pagination'
-import { PageFooterPortal } from '@/components/layout'
+import { DataTablePage } from '@/components/data-table'
 import { deleteDeployment, listDeployments, searchDeployments } from '../api'
 import { getDeploymentStatusOptions } from '../constants'
 import { deploymentsQueryKeys } from '../lib'
@@ -229,95 +212,29 @@ export function DeploymentsTable() {

  return (
    <>
-      <div className='space-y-3 sm:space-y-4'>
-        <DataTableToolbar
-          table={table}
-          searchPlaceholder={t('Search deployments...')}
-          filters={[
+      <DataTablePage
+        table={table}
+        columns={columns}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        emptyTitle={t('No Deployments Found')}
+        emptyDescription={t(
+          'No deployments available. Create one to get started.'
+        )}
+        skeletonKeyPrefix='deployment-skeleton'
+        applyHeaderSize
+        toolbarProps={{
+          searchPlaceholder: t('Search deployments...'),
+          filters: [
            {
              columnId: 'status',
              title: t('Status'),
              options: statusFilterOptions,
              singleSelect: true,
            },
-          ]}
-        />
-
-        {isMobile ? (
-          <MobileCardList
-            table={table}
-            isLoading={isLoading}
-            emptyTitle={t('No Deployments Found')}
-            emptyDescription={t(
-              'No deployments available. Create one to get started.'
-            )}
-          />
-        ) : (
-          <div
-            className={cn(
-              'overflow-hidden rounded-md border transition-opacity duration-150',
-              isFetching && !isLoading && 'pointer-events-none opacity-50'
-            )}
-          >
-            <Table>
-              <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHead
-                        key={header.id}
-                        style={{ width: header.getSize() }}
-                      >
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </TableHead>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {isLoading ? (
-                  <TableSkeleton
-                    table={table}
-                    keyPrefix='deployment-skeleton'
-                  />
-                ) : table.getRowModel().rows.length === 0 ? (
-                  <TableEmpty
-                    colSpan={table.getVisibleLeafColumns().length}
-                    title={t('No Deployments Found')}
-                    description={t(
-                      'No deployments available. Create one to get started.'
-                    )}
-                  />
-                ) : (
-                  table.getRowModel().rows.map((row) => (
-                    <TableRow key={row.id}>
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        )}
-      </div>
-
-      <PageFooterPortal>
-        <DataTablePagination
-          table={table as ReturnType<typeof useReactTable>}
-        />
-      </PageFooterPortal>
+          ],
+        }}
+      />

      <ViewLogsDialog
        open={logsOpen}
@@ -730,8 +730,8 @@ export function CreateDeploymentDrawer({
        </Form>

        <SheetFooter className='gap-2'>
-          <SheetClose asChild>
-            <Button variant='outline'>{t('Cancel')}</Button>
+          <SheetClose render={<Button variant='outline' />}>
+            {t('Cancel')}
          </SheetClose>
          <Button
            form='deployment-form'
@@ -100,11 +100,7 @@ export function MissingModelsDialog({
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className='flex max-h-[85vh] max-w-2xl flex-col gap-3 p-4'
-        onOpenAutoFocus={(event) => {
-          if (isMobile) {
-            event.preventDefault()
-          }
-        }}
+        initialFocus={!isMobile}
      >
        <DialogHeader className='flex-shrink-0 text-start'>
          <DialogTitle>{t('Missing Models')}</DialogTitle>
@@ -183,15 +183,17 @@ export function PrefillGroupManagementDialog({
                </DialogDescription>
              </DialogHeader>

-              <DialogClose asChild>
-                <Button
-                  variant='ghost'
-                  size='icon'
-                  className='text-muted-foreground hover:text-foreground absolute top-4 right-4 rounded-full border border-transparent sm:top-5 sm:right-6'
-                >
-                  <span className='sr-only'>{t('Close dialog')}</span>
-                  <X className='h-4 w-4' />
-                </Button>
+              <DialogClose
+                render={
+                  <Button
+                    variant='ghost'
+                    size='icon'
+                    className='text-muted-foreground hover:text-foreground absolute top-4 right-4 rounded-full border border-transparent sm:top-5 sm:right-6'
+                  />
+                }
+              >
+                <span className='sr-only'>{t('Close dialog')}</span>
+                <X className='h-4 w-4' />
              </DialogClose>
            </div>

@@ -110,11 +110,7 @@ export function SyncWizardDialog({
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className='flex max-h-[90vh] w-full flex-col gap-4 p-4 sm:max-w-2xl sm:p-6'
-        onOpenAutoFocus={(event) => {
-          if (isMobile) {
-            event.preventDefault()
-          }
-        }}
+        initialFocus={!isMobile}
      >
        <DialogHeader className='flex-shrink-0 text-start'>
          <DialogTitle>{t('Sync Upstream Models')}</DialogTitle>
@@ -230,15 +230,17 @@ export function UpstreamConflictDialog({
      enableHiding: false,
      cell: ({ row }) => (
        <Popover>
-          <PopoverTrigger asChild>
-            <Button
-              variant='ghost'
-              size='sm'
-              className={isMobile ? 'h-7 w-7 p-0' : 'h-7 gap-2 px-2 text-xs'}
-            >
-              <MousePointerClick className='h-3.5 w-3.5' />
-              {!isMobile && 'View diff'}
-            </Button>
+          <PopoverTrigger
+            render={
+              <Button
+                variant='ghost'
+                size='sm'
+                className={isMobile ? 'h-7 w-7 p-0' : 'h-7 gap-2 px-2 text-xs'}
+              />
+            }
+          >
+            <MousePointerClick className='h-3.5 w-3.5' />
+            {!isMobile && 'View diff'}
          </PopoverTrigger>
          <PopoverContent className='w-[min(90vw,24rem)] space-y-4 text-sm'>
            <div>
@@ -279,10 +281,8 @@ export function UpstreamConflictDialog({
      id: 'select',
      header: ({ table }) => (
        <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && 'indeterminate')
-          }
+          checked={table.getIsAllPageRowsSelected()}
+          indeterminate={table.getIsSomePageRowsSelected()}
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label='Select all'
        />
@@ -437,11 +437,7 @@ export function UpstreamConflictDialog({
    >
      <DialogContent
        className='flex max-h-[90vh] w-full flex-col gap-4 p-4 sm:max-w-5xl sm:p-6'
-        onOpenAutoFocus={(event) => {
-          if (isMobile) {
-            event.preventDefault()
-          }
-        }}
+        initialFocus={!isMobile}
      >
        <div className='flex min-h-0 flex-1 flex-col gap-4 overflow-hidden'>
          <DialogHeader className='flex-shrink-0 text-start'>
@@ -105,7 +105,7 @@ export function ViewDetailsDialog({
        </DialogHeader>

        <div className='max-h-[calc(100dvh-8.5rem)] space-y-3 overflow-y-auto py-2 pr-1 sm:max-h-[72vh] sm:space-y-4'>
-            <div className='flex flex-wrap items-center justify-between gap-2'>
+          <div className='flex flex-wrap items-center justify-between gap-2'>
            <div className='text-muted-foreground text-sm'>
              {t('Deployment ID')}:{' '}
              <span className='font-mono'>{deploymentId}</span>
@@ -252,7 +252,11 @@ export function ViewDetailsDialog({
        </div>

        <DialogFooter>
-          <Button variant='outline' onClick={() => onOpenChange(false)} className='w-full sm:w-auto'>
+          <Button
+            variant='outline'
+            onClick={() => onOpenChange(false)}
+            className='w-full sm:w-auto'
+          >
            {t('Close')}
          </Button>
        </DialogFooter>
@@ -176,7 +176,7 @@ export function ViewLogsDialog({
            </div>
            <Select
              value={containerId}
-              onValueChange={(v) => setContainerId(v)}
+              onValueChange={(v) => v !== null && setContainerId(v)}
              disabled={isLoadingContainers || containers.length === 0}
            >
              <SelectTrigger>
@@ -793,7 +793,11 @@ export function ModelMutateDrawer({
            <div className='space-y-4'>
              <div className='flex items-center justify-between'>
                <h3 className='text-sm font-semibold'>{t('Endpoints')}</h3>
-                <Select onValueChange={handleFillEndpointTemplate}>
+                <Select<string>
+                  onValueChange={(v) =>
+                    v !== null && handleFillEndpointTemplate(v)
+                  }
+                >
                  <SelectTrigger size='sm' className='w-[200px]'>
                    <SelectValue placeholder={t('Load template...')} />
                  </SelectTrigger>
@@ -1049,19 +1053,21 @@ export function ModelMutateDrawer({
                    open={advancedOpen}
                    onOpenChange={setAdvancedOpen}
                  >
-                    <CollapsibleTrigger asChild>
-                      <Button
-                        type='button'
-                        variant='outline'
-                        className='flex w-full items-center justify-between'
-                      >
-                        {t('Advanced options')}
-                        <ChevronDown
-                          className={`h-4 w-4 transition-transform duration-200 ${
-                            advancedOpen ? 'rotate-180' : ''
-                          }`}
+                    <CollapsibleTrigger
+                      render={
+                        <Button
+                          type='button'
+                          variant='outline'
+                          className='flex w-full items-center justify-between'
                        />
-                      </Button>
+                      }
+                    >
+                      {t('Advanced options')}
+                      <ChevronDown
+                        className={`h-4 w-4 transition-transform duration-200 ${
+                          advancedOpen ? 'rotate-180' : ''
+                        }`}
+                      />
                    </CollapsibleTrigger>
                    <CollapsibleContent className='space-y-6 pt-6'>
                      <FormField
@@ -1233,10 +1239,10 @@ export function ModelMutateDrawer({
        </Form>

        <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
-          <SheetClose asChild>
-            <Button variant='outline' disabled={isSubmitting}>
-              {t('Cancel')}
-            </Button>
+          <SheetClose
+            render={<Button variant='outline' disabled={isSubmitting} />}
+          >
+            {t('Cancel')}
          </SheetClose>
          <Button form='model-form' type='submit' disabled={isSubmitting}>
            {isSubmitting && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
@@ -253,8 +253,9 @@ export function PrefillGroupFormDrawer({
                    <FormLabel>Group Type</FormLabel>
                    <Select
                      value={field.value}
-                      onValueChange={(value: PrefillGroupType) =>
-                        field.onChange(value)
+                      onValueChange={(value) =>
+                        value !== null &&
+                        field.onChange(value as PrefillGroupType)
                      }
                    >
                      <FormControl>
@@ -344,10 +345,12 @@ export function PrefillGroupFormDrawer({
        </Form>

        <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
-          <SheetClose asChild>
-            <Button type='button' variant='outline' disabled={isSaving}>
-              {t('Cancel')}
-            </Button>
+          <SheetClose
+            render={
+              <Button type='button' variant='outline' disabled={isSaving} />
+            }
+          >
+            {t('Cancel')}
          </SheetClose>
          <Button type='submit' form='prefill-group-form' disabled={isSaving}>
            {isSaving && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
@@ -73,10 +73,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
      id: 'select',
      header: ({ table }) => (
        <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && 'indeterminate')
-          }
+          checked={table.getIsAllPageRowsSelected()}
+          indeterminate={table.getIsSomePageRowsSelected()}
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label='Select all'
        />
@@ -202,9 +200,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
          return (
            <TooltipProvider>
              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div>{badge}</div>
-                </TooltipTrigger>
+                <TooltipTrigger render={<div />}>{badge}</TooltipTrigger>
                <TooltipContent
                  side='top'
                  className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
@@ -324,8 +320,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
        return (
          <TooltipProvider>
            <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(tagBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(tagBadges, 2)}
              </TooltipTrigger>
              {tagArray.length > 2 && (
                <TooltipContent
@@ -363,8 +359,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
        return (
          <TooltipProvider>
            <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(endpointBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(endpointBadges, 2)}
              </TooltipTrigger>
              {endpointArray.length > 2 && (
                <TooltipContent
@@ -411,8 +407,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
        return (
          <TooltipProvider>
            <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(channelBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(channelBadges, 2)}
              </TooltipTrigger>
              {channels.length > 2 && (
                <TooltipContent
@@ -451,8 +447,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
        return (
          <TooltipProvider>
            <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(groupBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(groupBadges, 2)}
              </TooltipTrigger>
              {groups.length > 2 && (
                <TooltipContent
@@ -504,8 +500,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
        return (
          <TooltipProvider>
            <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(quotaBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(quotaBadges, 2)}
              </TooltipTrigger>
              {quotaTypes.length > 2 && (
                <TooltipContent
@@ -53,10 +53,8 @@ export function ModelsPrimaryButtons() {

      {/* More Actions */}
      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant='outline' size='sm'>
-            <MoreHorizontal className='h-4 w-4' />
-          </Button>
+        <DropdownMenuTrigger render={<Button variant='outline' size='sm' />}>
+          <MoreHorizontal className='h-4 w-4' />
        </DropdownMenuTrigger>
        <DropdownMenuContent align='end' className='w-56'>
          <DropdownMenuItem onClick={handleMissingModels}>
@@ -2,7 +2,6 @@ import { useState, useMemo, useEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { getRouteApi } from '@tanstack/react-router'
 import {
-  flexRender,
  getCoreRowModel,
  useReactTable,
  type SortingState,
@@ -10,24 +9,8 @@ import {
 } from '@tanstack/react-table'
 import { useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import {
-  DataTableToolbar,
-  TableSkeleton,
-  TableEmpty,
-  MobileCardList,
-} from '@/components/data-table'
-import { DataTablePagination } from '@/components/data-table/pagination'
-import { PageFooterPortal } from '@/components/layout'
+import { DataTablePage } from '@/components/data-table'
 import { getModels, searchModels, getVendors } from '../api'
 import {
  DEFAULT_PAGE_SIZE,
@@ -219,111 +202,41 @@ export function ModelsTable() {
  ]

  return (
-    <>
-      <div className='space-y-3 sm:space-y-4'>
-        <DataTableToolbar
-          table={table}
-          searchPlaceholder={t('Filter by model name...')}
-          filters={[
-            {
-              columnId: 'status',
-              title: t('Status'),
-              options: [...getModelStatusOptions(t)],
-              singleSelect: true,
-            },
-            {
-              columnId: 'vendor_id',
-              title: t('Vendor'),
-              options: vendorFilterOptions,
-              singleSelect: true,
-            },
-            {
-              columnId: 'sync_official',
-              title: t('Official Sync'),
-              options: [...getSyncStatusOptions(t)],
-              singleSelect: true,
-            },
-          ]}
-        />
-
-        {isMobile ? (
-          <MobileCardList
-            table={table}
-            isLoading={isLoading}
-            emptyTitle={t('No Models Found')}
-            emptyDescription={t(
-              'No models available. Create your first model to get started.'
-            )}
-          />
-        ) : (
-          <>
-            <div
-              className={cn(
-                'overflow-hidden rounded-md border transition-opacity duration-150',
-                isFetching && !isLoading && 'pointer-events-none opacity-50'
-              )}
-            >
-              <Table>
-                <TableHeader>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => (
-                        <TableHead
-                          key={header.id}
-                          style={{ width: header.getSize() }}
-                        >
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {isLoading ? (
-                    <TableSkeleton table={table} keyPrefix='model-skeleton' />
-                  ) : table.getRowModel().rows.length === 0 ? (
-                    <TableEmpty
-                      colSpan={columns.length}
-                      title={t('No Models Found')}
-                      description={t(
-                        'No models available. Create your first model to get started.'
-                      )}
-                    />
-                  ) : (
-                    table.getRowModel().rows.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        data-state={row.getIsSelected() && 'selected'}
-                      >
-                        {row.getVisibleCells().map((cell) => (
-                          <TableCell key={cell.id}>
-                            {flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext()
-                            )}
-                          </TableCell>
-                        ))}
-                      </TableRow>
-                    ))
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-
-            <DataTableBulkActions table={table} />
-          </>
-        )}
-      </div>
-      <PageFooterPortal>
-        <DataTablePagination
-          table={table as ReturnType<typeof useReactTable>}
-        />
-      </PageFooterPortal>
-    </>
+    <DataTablePage
+      table={table}
+      columns={columns}
+      isLoading={isLoading}
+      isFetching={isFetching}
+      emptyTitle={t('No Models Found')}
+      emptyDescription={t(
+        'No models available. Create your first model to get started.'
+      )}
+      skeletonKeyPrefix='model-skeleton'
+      applyHeaderSize
+      toolbarProps={{
+        searchPlaceholder: t('Filter by model name...'),
+        filters: [
+          {
+            columnId: 'status',
+            title: t('Status'),
+            options: [...getModelStatusOptions(t)],
+            singleSelect: true,
+          },
+          {
+            columnId: 'vendor_id',
+            title: t('Vendor'),
+            options: vendorFilterOptions,
+            singleSelect: true,
+          },
+          {
+            columnId: 'sync_official',
+            title: t('Official Sync'),
+            options: [...getSyncStatusOptions(t)],
+            singleSelect: true,
+          },
+        ],
+      }}
+      bulkActions={<DataTableBulkActions table={table} />}
+    />
  )
 }