insforge 0.3.1

package/frontend/src/components/datagrid/DefaultCellRenderer.tsx

@@ -0,0 +1,114 @@
+import { ColumnType } from '@insforge/shared-schemas';
+import type { ConvertedValue, DataGridRowType } from './datagridTypes';
+import { RenderCellProps } from 'react-data-grid';
+import { cn, formatValueForDisplay } from '@/lib/utils/utils';
+import { Badge } from '@/components/radix/Badge';
+import IdCell from './IdCell';
+
+// Generic cell renderer factory
+function createDefaultCellRenderer<TRow extends DataGridRowType>() {
+  return {
+    text: ({ row, column }: RenderCellProps<TRow>) => {
+      const value = row[column.key] as ConvertedValue;
+      const displayValue = formatValueForDisplay(value, ColumnType.STRING);
+      return (
+        <div className="w-full h-full flex items-center">
+          <span className="truncate dark:text-zinc-300" title={displayValue}>
+            {displayValue}
+          </span>
+        </div>
+      );
+    },
+
+    boolean: ({ row, column }: RenderCellProps<TRow>) => {
+      const value = row[column.key] as ConvertedValue;
+      const displayValue = formatValueForDisplay(value, ColumnType.BOOLEAN);
+      return (
+        <div className="w-full h-full flex items-center justify-start">
+          <Badge
+            variant={value ? 'default' : 'secondary'}
+            className="py-0.5 px-1.5 border border-transparent"
+          >
+            {displayValue}
+          </Badge>
+        </div>
+      );
+    },
+
+    datetime: ({ row, column }: RenderCellProps<TRow>) => {
+      const value = row[column.key] as ConvertedValue;
+      const displayValue = formatValueForDisplay(value, ColumnType.DATETIME);
+      const isError = displayValue === 'Invalid date time';
+
+      return (
+        <div className="w-full h-full flex items-center">
+          <span
+            className={cn('truncate', isError ? 'text-red-500' : 'text-black dark:text-zinc-300')}
+            title={displayValue}
+          >
+            {displayValue}
+          </span>
+        </div>
+      );
+    },
+
+    date: ({ row, column }: RenderCellProps<TRow>) => {
+      const value = row[column.key] as ConvertedValue;
+      const displayValue = formatValueForDisplay(value, ColumnType.DATE);
+      const isError = displayValue === 'Invalid date';
+
+      return (
+        <div className="w-full h-full flex items-center">
+          <span
+            className={cn('truncate', isError ? 'text-red-500' : 'text-black dark:text-zinc-300')}
+            title={displayValue}
+          >
+            {displayValue}
+          </span>
+        </div>
+      );
+    },
+
+    json: ({ row, column }: RenderCellProps<TRow>) => {
+      const value = row[column.key] as ConvertedValue;
+      const displayText = formatValueForDisplay(value, ColumnType.JSON);
+      const isError = displayText === 'Invalid JSON';
+
+      return (
+        <div className="w-full h-full flex items-center">
+          <span
+            className={cn(
+              'truncate text-sm text-black dark:text-zinc-300 max-w-full overflow-hidden whitespace-nowrap',
+              isError ? 'text-red-500' : ''
+            )}
+            title={displayText}
+          >
+            {displayText}
+          </span>
+        </div>
+      );
+    },
+
+    id: ({ row, column }: RenderCellProps<TRow>) => {
+      const value = row[column.key];
+
+      return <IdCell value={String(value)} />;
+    },
+
+    email: ({ row, column }: RenderCellProps<TRow>) => {
+      const value = row[column.key] as ConvertedValue;
+      const displayValue = formatValueForDisplay(value, ColumnType.STRING);
+      return (
+        <span
+          className="text-sm text-gray-800 font-medium truncate dark:text-zinc-300"
+          title={displayValue}
+        >
+          {displayValue}
+        </span>
+      );
+    },
+  };
+}
+
+// Export the factory function for custom types
+export { createDefaultCellRenderer };

package/frontend/src/components/datagrid/IdCell.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Button } from '@/components/radix/Button';
+import { Check, Copy } from 'lucide-react';
+
+function IdCell({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(String(value));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Copy failed silently
+    }
+  };
+
+  return (
+    <div className="w-full h-full flex items-center justify-between group">
+      <span className="text-sm truncate" title={String(value)}>
+        {value}
+      </span>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 w-7 p-1 bg-white dark:bg-neutral-700 opacity-0 group-hover:opacity-100 transition-opacity"
+        onClick={(e) => {
+          handleCopy(e).catch(() => {
+            // Handle copy error silently
+          });
+        }}
+      >
+        {copied ? (
+          <Check className="h-5 w-5 text-green-600 dark:text-green-400" />
+        ) : (
+          <Copy className="h-5 w-5 text-black dark:text-white" />
+        )}
+      </Button>
+    </div>
+  );
+}
+
+export default IdCell;

package/frontend/src/components/datagrid/SortableHeader.tsx

@@ -0,0 +1,74 @@
+import type { DataGridColumn, DataGridRowType } from './datagridTypes';
+import { TypeBadge } from '@/components/TypeBadge';
+import { ArrowDownWideNarrow, ArrowUpNarrowWide } from 'lucide-react';
+
+function SortableHeaderRenderer<TRow extends DataGridRowType>({
+  column,
+  sortDirection,
+  columnType,
+  showTypeBadge,
+  mutedHeader,
+}: {
+  column: DataGridColumn<TRow>;
+  sortDirection?: 'ASC' | 'DESC';
+  columnType?: string;
+  showTypeBadge?: boolean;
+  mutedHeader?: boolean;
+}) {
+  // Determine which arrow to show on hover based on current sort state
+  const getNextSortDirection = () => {
+    if (!sortDirection) {
+      return 'DESC'; // Default to DESC for first sort
+    } else if (sortDirection === 'ASC') {
+      return null;
+    } else {
+      return 'ASC';
+    }
+  };
+
+  const nextDirection = getNextSortDirection();
+
+  return (
+    <div className="group w-full h-full flex items-center cursor-pointer">
+      <div className="flex flex-row gap-1 items-center">
+        <span
+          className={`truncate text-sm font-medium ${mutedHeader ? 'text-zinc-500 dark:text-neutral-400' : 'text-zinc-950 dark:text-zinc-300'} max-w-[120px]`}
+          title={typeof column.name === 'string' ? column.name : ''}
+        >
+          {column.name}
+        </span>
+
+        {columnType && showTypeBadge && (
+          <TypeBadge type={columnType} className="dark:bg-neutral-800" />
+        )}
+
+        {/* Show sort arrow with hover effect */}
+        {column.sortable && (
+          <div className="relative ml-0.5 w-5 h-5">
+            {sortDirection && (
+              <div className="bg-transparent p-0.5 rounded">
+                {sortDirection === 'DESC' ? (
+                  <ArrowDownWideNarrow className="h-4 w-4 text-zinc-500 dark:text-neutral-400 transition-opacity group-hover:opacity-0" />
+                ) : (
+                  <ArrowUpNarrowWide className="h-4 w-4 text-zinc-500 dark:text-neutral-400 transition-opacity group-hover:opacity-0" />
+                )}
+              </div>
+            )}
+
+            {nextDirection && (
+              <div className="absolute inset-0 invisible group-hover:visible transition-opacity bg-slate-200 border border-slate-200 dark:bg-neutral-800 dark:border-neutral-800 p-0.5 rounded w-5 h-5">
+                {nextDirection === 'DESC' ? (
+                  <ArrowDownWideNarrow className="h-4 w-4 text-zinc-500 dark:text-neutral-400" />
+                ) : (
+                  <ArrowUpNarrowWide className="h-4 w-4 text-zinc-500 dark:text-neutral-400" />
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default SortableHeaderRenderer;

package/frontend/src/components/datagrid/cell-editors/BooleanCellEditor.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/radix/Select';
+import type { BooleanCellEditorProps } from './types';
+import { cn } from '@/lib/utils/utils';
+
+export function BooleanCellEditor({
+  value,
+  nullable,
+  onValueChange,
+  onCancel,
+  className,
+}: BooleanCellEditorProps) {
+  const [open, setOpen] = useState(true);
+
+  // Convert boolean to string for Select component
+  const stringValue = value === null ? 'null' : String(value);
+
+  useEffect(() => {
+    // Auto-open the select when component mounts
+    setOpen(true);
+  }, []);
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      onCancel();
+    }
+    setOpen(isOpen);
+  };
+
+  return (
+    <Select
+      value={stringValue}
+      onValueChange={onValueChange}
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
+      <SelectTrigger
+        className={cn(
+          'w-full h-full border-0 focus:ring-0 focus:ring-offset-0 p-0 text-black dark:text-white dark:placeholder:text-neutral-400 dark:border-neutral-700',
+          className
+        )}
+      >
+        <span>
+          {stringValue === 'true' ? 'True' : stringValue === 'false' ? 'False' : stringValue}
+        </span>
+      </SelectTrigger>
+      <SelectContent align="start" className="min-w-25">
+        <SelectItem value="true">True</SelectItem>
+        <SelectItem value="false">False</SelectItem>
+        {nullable && <SelectItem value="null">null</SelectItem>}
+      </SelectContent>
+    </Select>
+  );
+}