simplify table rendering (no more pinned rows nonsense) to fix #2513 (#2561)

Author: sawka

frontend/app/view/preview/preview-directory.tsx

@@ -25,7 +25,7 @@ import {
 import clsx from "clsx";
 import { PrimitiveAtom, atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { quote as shellQuote } from "shell-quote";
 import { debounce } from "throttle-debounce";
@@ -225,10 +225,6 @@ function DirectoryTable({
             columnVisibility: {
                 path: false,
             },
-            rowPinning: {
-                top: [],
-                bottom: [],
-            },
         },
         enableMultiSort: false,
         enableSortingRemoval: false,
@@ -240,29 +236,10 @@ function DirectoryTable({
     });
 
     useEffect(() => {
-        const topRows = table.getTopRows() || [];
-        const centerRows = table.getCenterRows() || [];
-        const allRows = [...topRows, ...centerRows];
+        const allRows = table.getRowModel()?.flatRows || [];
         setSelectedPath((allRows[focusIndex]?.getValue("path") as string) ?? null);
     }, [table, focusIndex, data]);
 
-    useLayoutEffect(() => {
-        const rows = table.getRowModel()?.flatRows;
-        let foundParentDir = false;
-
-        for (const row of rows) {
-            if (row.getValue("name") == "..") {
-                row.pin("top");
-                foundParentDir = true;
-                break;
-            }
-        }
-
-        // If we didn't find the ".." row, reset the pinning to avoid stale references
-        if (!foundParentDir) {
-            table.resetRowPinning();
-        }
-    }, [table, data]);
     const columnSizeVars = useMemo(() => {
         const headers = table.getFlatHeaders();
         const colSizes: { [key: string]: number } = {};
@@ -447,6 +424,10 @@ function TableBody({
         [setRefreshVersion, conn]
     );
 
+    const allRows = table.getRowModel().flatRows;
+    const dotdotRow = allRows.find((row) => row.getValue("name") === "..");
+    const otherRows = allRows.filter((row) => row.getValue("name") !== "..");
+
     return (
         <div className="dir-table-body" ref={bodyRef}>
             {(searchActive || search !== "") && (
@@ -473,28 +454,28 @@ function TableBody({
                 <div className="dummy dir-table-body-row" ref={dummyLineRef}>
                     <div className="dir-table-body-cell">dummy-data</div>
                 </div>
-                {table.getTopRows().map((row, idx) => (
+                {dotdotRow && (
                     <TableRow
                         model={model}
-                        row={row}
+                        row={dotdotRow}
                         focusIndex={focusIndex}
                         setFocusIndex={setFocusIndex}
                         setSearch={setSearch}
-                        idx={idx}
+                        idx={0}
                         handleFileContextMenu={handleFileContextMenu}
-                        key={"top-" + idx}
+                        key="dotdot"
                     />
-                ))}
-                {table.getCenterRows().map((row, idx) => (
+                )}
+                {otherRows.map((row, idx) => (
                     <TableRow
                         model={model}
                         row={row}
                         focusIndex={focusIndex}
                         setFocusIndex={setFocusIndex}
                         setSearch={setSearch}
-                        idx={idx + table.getTopRows().length}
+                        idx={dotdotRow ? idx + 1 : idx}
                         handleFileContextMenu={handleFileContextMenu}
-                        key={"center" + idx}
+                        key={idx}
                     />
                 ))}
             </div>

go.mod

@@ -80,6 +80,7 @@ require (
 	github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 // indirect
 	github.com/mailru/easyjson v0.7.7 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/outrigdev/goid v0.3.0 // indirect
 	github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 // indirect
 	github.com/rivo/uniseg v0.4.7 // indirect
 	github.com/sirupsen/logrus v1.9.3 // indirect

go.sum

@@ -144,6 +144,8 @@ github.com/mattn/go-sqlite3 v1.14.32 h1:JD12Ag3oLy1zQA+BNn74xRgaBbdhbNIDYvQUEuuE
 github.com/mattn/go-sqlite3 v1.14.32/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
 github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
+github.com/outrigdev/goid v0.3.0 h1:t/otQD3EXc45cLtQVPUnNgEyRaTQA4cPeu3qVcrsIws=
+github.com/outrigdev/goid v0.3.0/go.mod h1:hEH7f27ypN/GHWt/7gvkRoFYR0LZizfUBIAbak4neVE=
 github.com/photostorm/pty v1.1.19-0.20230903182454-31354506054b h1:cLGKfKb1uk0hxI0Q8L83UAJPpeJ+gSpn3cCU/tjd3eg=
 github.com/photostorm/pty v1.1.19-0.20230903182454-31354506054b/go.mod h1:KO+FcPtyLAiRC0hJwreJVvfwc7vnNz77UxBTIGHdPVk=
 github.com/planetscale/vtprotobuf v0.6.1-0.20240319094008-0393e58bdf10 h1:GFCKgmp0tecUJ0sJuv4pzYCqS9+RGSn52M3FUwPs+uo=