add auth

frontend/src/components/IdeasTable/DraggableRow.tsx

@@ -0,0 +1,91 @@
+import { createContext, useContext } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { TableRow, TableCell, Box } from '@mui/material';
+import { DragIndicator } from '@mui/icons-material';
+import { flexRender } from '@tanstack/react-table';
+import type { Row } from '@tanstack/react-table';
+import type { Idea } from '../../types/idea';
+
+// Контекст для передачи информации о drag handle в ячейку
+interface DragHandleContextValue {
+  attributes: ReturnType<typeof useSortable>['attributes'];
+  listeners: ReturnType<typeof useSortable>['listeners'];
+  isDragging: boolean;
+}
+
+const DragHandleContext = createContext<DragHandleContextValue | null>(null);
+
+// Компонент drag handle для использования в колонке
+export function DragHandle() {
+  const context = useContext(DragHandleContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const { attributes, listeners, isDragging } = context;
+
+  return (
+    <Box
+      {...attributes}
+      {...listeners}
+      sx={{
+        cursor: isDragging ? 'grabbing' : 'grab',
+        display: 'flex',
+        alignItems: 'center',
+        color: 'text.secondary',
+        touchAction: 'none',
+        '&:hover': { color: 'text.primary' },
+      }}
+    >
+      <DragIndicator fontSize="small" />
+    </Box>
+  );
+}
+
+interface DraggableRowProps {
+  row: Row<Idea>;
+}
+
+export function DraggableRow({ row }: DraggableRowProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: row.original.id });
+
+  // Используем CSS.Translate вместо CSS.Transform для лучшей совместимости с таблицами
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    backgroundColor: row.original.color
+      ? `${row.original.color}15`
+      : isDragging
+        ? 'action.hover'
+        : undefined,
+    position: isDragging ? ('relative' as const) : undefined,
+    zIndex: isDragging ? 1000 : undefined,
+    '&:hover': {
+      backgroundColor: row.original.color
+        ? `${row.original.color}25`
+        : undefined,
+    },
+  };
+
+  return (
+    <DragHandleContext.Provider value={{ attributes, listeners, isDragging }}>
+      <TableRow ref={setNodeRef} hover sx={style}>
+        {row.getVisibleCells().map((cell) => (
+          <TableCell key={cell.id}>
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </TableCell>
+        ))}
+      </TableRow>
+    </DragHandleContext.Provider>
+  );
+}