end fase 2

frontend/src/components/IdeasTable/IdeasTable.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, Fragment } from 'react';
 import {
   useReactTable,
   getCoreRowModel,
@@ -33,6 +33,7 @@ import {
   Box,
   Typography,
   TablePagination,
+  Collapse,
 } from '@mui/material';
 import { Inbox } from '@mui/icons-material';
 import {
@@ -43,8 +44,9 @@ import {
 import { useIdeasStore } from '../../store/ideas';
 import { createColumns } from './columns';
 import { DraggableRow } from './DraggableRow';
+import { CommentsPanel } from '../CommentsPanel';
 
-const SKELETON_COLUMNS_COUNT = 8;
+const SKELETON_COLUMNS_COUNT = 9;
 
 export function IdeasTable() {
   const { data, isLoading, isError } = useIdeasQuery();
@@ -55,10 +57,21 @@ export function IdeasTable() {
 
   // ID активно перетаскиваемого элемента
   const [activeId, setActiveId] = useState<string | null>(null);
+  // ID идеи с раскрытыми комментариями
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  const handleToggleComments = (id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id));
+  };
 
   const columns = useMemo(
-    () => createColumns((id) => deleteIdea.mutate(id)),
-    [deleteIdea],
+    () =>
+      createColumns({
+        onDelete: (id) => deleteIdea.mutate(id),
+        onToggleComments: handleToggleComments,
+        expandedId,
+      }),
+    [deleteIdea, expandedId],
   );
 
   // eslint-disable-next-line react-hooks/incompatible-library
@@ -140,7 +153,7 @@ export function IdeasTable() {
     : null;
 
   return (
-    <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+    <Paper sx={{ width: '100%', overflow: 'hidden' }} data-testid="ideas-table-container">
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
@@ -149,7 +162,7 @@ export function IdeasTable() {
         onDragEnd={handleDragEnd}
       >
         <TableContainer>
-          <Table stickyHeader size="small">
+          <Table stickyHeader size="small" data-testid="ideas-table">
             <TableHead>
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id}>
@@ -214,6 +227,7 @@ export function IdeasTable() {
                         alignItems: 'center',
                         color: 'text.secondary',
                       }}
+                      data-testid="ideas-empty-state"
                     >
                       <Inbox sx={{ fontSize: 48, mb: 2, opacity: 0.5 }} />
                       <Typography variant="h6">Идей пока нет</Typography>
@@ -229,7 +243,19 @@ export function IdeasTable() {
                   strategy={verticalListSortingStrategy}
                 >
                   {rows.map((row) => (
-                    <DraggableRow key={row.id} row={row} />
+                    <Fragment key={row.id}>
+                      <DraggableRow row={row} />
+                      <TableRow>
+                        <TableCell
+                          colSpan={SKELETON_COLUMNS_COUNT}
+                          sx={{ p: 0, borderBottom: expandedId === row.original.id ? 1 : 0, borderColor: 'divider' }}
+                        >
+                          <Collapse in={expandedId === row.original.id} unmountOnExit>
+                            <CommentsPanel ideaId={row.original.id} />
+                          </Collapse>
+                        </TableCell>
+                      </TableRow>
+                    </Fragment>
                   ))}
                 </SortableContext>
               )}