refactor: polish shadcn data table shell

frontend/src/components/app/AppDataTable.tsx

@@ -1,6 +1,7 @@
 import type * as React from 'react'
 
 import { AppEmptyState } from '@/components/app/AppEmptyState'
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { cn } from '@/lib/utils'
 
@@ -35,15 +36,16 @@ export function AppDataTable<Row>({
   onRowClick
 }: AppDataTableProps<Row>) {
   return (
-    <div className="overflow-hidden rounded-lg border border-border bg-card shadow-sm">
+    <Card className="gap-0 py-0">
-      {toolbar ? <div className="border-b border-border bg-muted/20 p-3">{toolbar}</div> : null}
+      {toolbar ? <CardHeader className="border-b border-border bg-muted/20 p-3">{toolbar}</CardHeader> : null}
+      <CardContent className="p-0">
         {rows.length === 0 ? (
-        <div className="p-4">
+          <div className="p-3">
             <AppEmptyState title={emptyTitle} description={emptyDescription} />
           </div>
         ) : (
-        <Table className={tableClassName}>
+          <Table className={cn('min-w-[720px]', tableClassName)}>
-          <TableHeader className="bg-muted/30">
+            <TableHeader className="bg-muted/40">
               <TableRow>
                 {columns.map((column) => (
                   <TableHead key={column.key} className={column.className}>
@@ -56,8 +58,14 @@ export function AppDataTable<Row>({
               {rows.map((row) => (
                 <TableRow
                   key={getRowKey(row)}
-                className={cn(onRowClick ? 'cursor-pointer' : undefined)}
+                  tabIndex={onRowClick ? 0 : undefined}
+                  className={cn(onRowClick ? 'cursor-pointer focus-visible:bg-muted focus-visible:outline-none' : undefined)}
                   onClick={() => onRowClick?.(row)}
+                  onKeyDown={(event) => {
+                    if (event.target !== event.currentTarget || !onRowClick || (event.key !== 'Enter' && event.key !== ' ')) return
+                    event.preventDefault()
+                    onRowClick(row)
+                  }}
                 >
                   {columns.map((column) => (
                     <TableCell key={column.key} className={column.className}>
@@ -69,7 +77,8 @@ export function AppDataTable<Row>({
             </TableBody>
           </Table>
         )}
-      {footer ? <div className="border-t border-border bg-muted/20 px-3 py-2">{footer}</div> : null}
+      </CardContent>
-    </div>
+      {footer ? <CardFooter className="bg-muted/20 px-3 py-2 [&>*]:w-full">{footer}</CardFooter> : null}
+    </Card>
   )
 }