add grip element to draggable post item

front/src/components/DraggablePostsList.module.scss

@@ -7,6 +7,12 @@
     span {
         display: flex;
         align-items: center;
+        svg {
+            height: 100%;
+            width: 1rem;
+            padding-right: 1rem;
+            cursor: grab;
+        }
     }
 
     .posts {

front/src/components/DraggablePostsList.tsx

@@ -3,6 +3,7 @@ import { DataRow } from '../api/DataRow';
 import { Post } from './display/Post';
 
 import style from './DraggablePostsList.module.scss';
+import { GripVertical } from './display/GripVertical';
 
 type SetRowsFunction = (data: DataRow[]) => void;
 
@@ -10,7 +11,7 @@ function PostDraggableListItem({ item, dragHandleProps, rows, setRows }: { item:
 
     function onChange() {
         rows.splice(rows.indexOf(item), 1);
-        setRows(rows);
+        setRows([ ...rows ]);
     }
 
     return (
@@ -18,8 +19,9 @@ function PostDraggableListItem({ item, dragHandleProps, rows, setRows }: { item:
             <span>
                 <label for={`row-list-${item.id}`} style={{ display: 'none' }}>Select</label>
                 <input type='checkbox' id={`row-list-${item.id}`} onChange={onChange}/>
+                <GripVertical {...dragHandleProps} />
             </span>
-            <Post className={style.posts} row={item} {...dragHandleProps} />
+            <Post className={style.posts} row={item} />
         </div>
     )
 }
@@ -36,7 +38,6 @@ export function DraggablePostsList(props: DraggablePostsList) {
             template={p => PostDraggableListItem({ ...p, setRows: props.setRows, rows: props.rows })}
             list={props.rows}
             onMoveEnd={rows => props.setRows([ ...rows ])}
-
         />
     );
 }

front/src/components/display/GripVertical.tsx

@@ -0,0 +1,9 @@
+import type React from "preact/compat";
+
+export function GripVertical(props: React.JSX.SVGAttributes<SVGSVGElement>) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16" {...props}>
+            <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+        </svg>
+    )
+}