Add Favorite Button to Traces #173

frontend/components/ui/datatable.tsx

@@ -16,11 +16,13 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 
-import { Button } from "./button";
-import { DataTablePagination } from "./datatable-pagination";
-import { Label } from "./label";
-import { ScrollArea, ScrollBar } from "./scroll-area";
-import { Skeleton } from "./skeleton";
+import { Button } from './button';
+import { DataTablePagination } from './datatable-pagination';
+import { Label } from './label';
+import { ScrollArea, ScrollBar } from './scroll-area';
+import { Skeleton } from './skeleton';
+import { Favorite } from '@/components/ui/favorite';
+
 const DEFAULT_PAGE_SIZE = 50;
 
 interface DataTableProps<TData> {
@@ -150,10 +152,86 @@ export function DataTable<TData>({
     setRowSelection({});
   }, [data]);
 
+
+  const addFavorite = () => {
+    console.log('Added favorite - placeholder');
+  };
+
+  const removeFavorite = () => {
+    console.log('Removed favorite - placeholder');
+  };
+
+  if (enableRowSelection) {
+    columns.unshift({
+      id: '__row_selection',
+      enableResizing: false,
+      header: ({ table }) => (
+        <Checkbox
+          className="border border-secondary"
+          checked={table.getIsAllRowsSelected()}
+          onCheckedChange={(checked) => {
+            if (!checked) {
+              setAllRowsAcrossAllPagesSelected(false);
+              onSelectAllAcrossPages?.(false);
+            }
+          }}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+          onClick={(e) => {
+            e.stopPropagation();
+            table.toggleAllRowsSelected(!table.getIsAllRowsSelected());
+          }}
+        />
+      ),
+      size: 24,
+      cell: ({ row }) => (
+        <Checkbox
+          className={cn('border border-secondary mt-1')}
+          checked={row.getIsSelected()}
+          onCheckedChange={(checked) => {
+            if (!checked) {
+              setAllRowsAcrossAllPagesSelected(false);
+              onSelectAllAcrossPages?.(false);
+            }
+          }}
+          onChange={row.getToggleSelectedHandler()}
+          onClick={(e) => {
+            e.stopPropagation();
+            row.toggleSelected(!row.getIsSelected());
+          }}
+        />
+      ),
+    });
+    columns.splice(1, 0, {
+      id: '__favorite',
+      enableResizing: false,
+      header: ({ table }) => (
+        <Favorite
+          isSelected={allRowsAcrossAllPagesSelected}
+          isHeader={true}
+          onToggleFavorite={() => {}}
+        />
+      ),
+      size: 40,
+      cell: ({ row }) => (
+        <Favorite
+          isSelected={row.getIsSelected()}
+          onToggleFavorite={() => {
+            if (!row.getIsSelected()) {
+              addFavorite();
+            } else {
+              removeFavorite();
+            }
+          }}
+        />
+      ),
+    });
+  }
+
   const selectionColumns = enableRowSelection
     ? [checkboxColumn<TData>(setAllRowsAcrossAllPagesSelected, onSelectAllAcrossPages)]
     : [];
 
+
   const table = useReactTable<TData>({
     data: data ?? [],
     columns: [...selectionColumns, ...columns],

frontend/components/ui/favorite.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from 'react';
+import { Star } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface FavoriteProps {
+  isSelected: boolean;
+  isHeader?: boolean;
+  onToggleFavorite: () => void;
+  className?: string;
+}
+
+const Favorite = React.forwardRef<
+  React.ElementRef<'div'>,
+  FavoriteProps
+>(({ isSelected, onToggleFavorite, className, isHeader, ...props }, ref) => {
+  const [isFavorite, setIsFavorite] = React.useState(false);
+
+  const handleToggle = () => {
+    if (!isHeader) {
+      setIsFavorite((prev) => !prev);
+      onToggleFavorite();
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'h-4 w-4 bg-secondary/30 flex items-center justify-center cursor-pointer',
+        className
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        handleToggle();
+      }}
+      {...props}
+    >
+      <Star
+        size={18}
+        strokeWidth={1.5}
+        fill={isFavorite ? '#FACC15' : 'none'}
+        stroke={isFavorite ? '#FACC15' : 'currentColor'}
+        className={isFavorite ? 'text-secondary' : 'text-gray-400'}
+      />
+    </div>
+  );
+});
+
+Favorite.displayName = 'Favorite';
+
+export { Favorite };
+
+