Add Favorite Button to Traces #173

frontend/components/ui/datatable.tsx

@@ -28,6 +28,8 @@ 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> {
@@ -113,6 +115,14 @@ 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',
@@ -127,7 +137,7 @@ export function DataTable<TData>({
               onSelectAllAcrossPages?.(false);
             }
           }}
-          onChange={table.getToggleAllRowsSelectedHandler()} // TODO: Think about row selection per page
+          onChange={table.getToggleAllRowsSelectedHandler()}
           onClick={(e) => {
             e.stopPropagation();
             table.toggleAllRowsSelected(!table.getIsAllRowsSelected());
@@ -151,7 +161,31 @@ export function DataTable<TData>({
             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();
+            }
+          }}
+        />
+      ),
     });
   }
 

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 };
+
+