Add Favorite Button to Traces #173

frontend/components/ui/datatable.tsx

@@ -27,6 +27,7 @@ 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;
 
@@ -101,6 +102,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',
@@ -115,7 +124,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());
@@ -139,7 +148,36 @@ export function DataTable<TData>({
             row.toggleSelected(!row.getIsSelected());
           }}
         />
-      )
+      ),
+    });
+    columns.splice(1, 0, {
+      id: '__favorite',
+      enableResizing: false,
+      header: ({ table }) => (
+          <Favorite
+            isSelected={allRowsAcrossAllPagesSelected}
+            onToggle={() => {
+              table.getRowModel().rows.forEach((row) => {
+                row.toggleSelected();
+              });
+              addFavorite();
+            }}
+          />
+      ),
+      size: 40,
+      cell: ({ row }) => (
+          <Favorite
+            isSelected={row.getIsSelected()}
+            onToggle={() => {
+              row.toggleSelected();
+              if (!row.getIsSelected()) {
+                addFavorite();
+              } else {
+                removeFavorite();
+              }
+            }}
+          />
+      ),
     });
   }
 

frontend/components/ui/favorite.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import * as React from 'react';
+import { Star } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface FavoriteProps {
+  isSelected: boolean;
+  onToggle: () => void;
+  className?: string;
+}
+
+const Favorite = React.forwardRef<
+  React.ElementRef<'div'>,
+  FavoriteProps
+>(({ isSelected, onToggle, className, ...props }, ref) => {
+  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();
+        onToggle();
+      }}
+      {...props}
+    >
+      <Star
+        size={18}
+        strokeWidth={1.5}
+        fill={isSelected ? '#FACC15' : 'none'}
+        stroke={isSelected ? '#FACC15' : 'currentColor'}
+        className={isSelected ? 'text-secondary' : 'text-gray-400'}
+      />
+    </div>
+  );
+});
+
+Favorite.displayName = 'Favorite';
+
+export { Favorite };
+
+
+
+
+
+