feat(data-table): add reusable card/table view toggle

Add an opt-in card view to the shared data-table stack (DataTablePage), toggled via a segmented control in the toolbar with per-table localStorage persistence. Cards render generically from column meta by default, with an optional renderCard slot. Defaults to table-only so existing pages are unchanged. Wire it into the channels page with a bespoke ChannelCard that reuses every column's cell renderer, preserving all table information and interactions (selection, inline priority/weight, balance refresh, status, actions, tag expand).
2026-06-19 17:43:11 +08:00
parent 3fcd741c6e
commit 68585568d6
11 changed files with 908 additions and 188 deletions
@@ -0,0 +1,104 @@
+/*
+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 { Grid2X2, Table2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import {
+  DATA_TABLE_VIEW_MODES,
+  type DataTableViewMode,
+} from '../hooks/use-data-table-view-mode'
+
+export type DataTableViewModeToggleProps = {
+  value: DataTableViewMode
+  onChange: (mode: DataTableViewMode) => void
+  className?: string
+}
+
+type Segment = {
+  value: DataTableViewMode
+  icon: React.ComponentType<{ className?: string }>
+  tooltip: string
+}
+
+/**
+ * Reusable icon segmented control for switching a data table between table and
+ * card views. Shared, accessible version of the local control used by the
+ * model square (`pricing-toolbar.tsx`).
+ */
+export function DataTableViewModeToggle(props: DataTableViewModeToggleProps) {
+  const { t } = useTranslation()
+
+  const segments: Segment[] = [
+    {
+      value: DATA_TABLE_VIEW_MODES.TABLE,
+      icon: Table2,
+      tooltip: t('Table view'),
+    },
+    {
+      value: DATA_TABLE_VIEW_MODES.CARD,
+      icon: Grid2X2,
+      tooltip: t('Card view'),
+    },
+  ]
+
+  return (
+    <div
+      role='group'
+      aria-label={t('View mode')}
+      className={cn(
+        'bg-muted/60 inline-flex h-8 items-center rounded-lg border p-0.5',
+        props.className
+      )}
+    >
+      {segments.map((segment) => {
+        const Icon = segment.icon
+        const isActive = segment.value === props.value
+        return (
+          <Tooltip key={segment.value}>
+            <TooltipTrigger
+              render={
+                <button
+                  type='button'
+                  onClick={() => props.onChange(segment.value)}
+                  aria-pressed={isActive}
+                  className={cn(
+                    'inline-flex h-full w-7 items-center justify-center rounded-md text-xs font-medium transition-all',
+                    isActive
+                      ? 'bg-primary text-primary-foreground shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground'
+                  )}
+                >
+                  <Icon className='size-3.5' />
+                </button>
+              }
+            />
+            <TooltipContent side='bottom' className='text-xs'>
+              {segment.tooltip}
+            </TooltipContent>
+          </Tooltip>
+        )
+      })}
+    </div>
+  )
+}