fix scroll-into view when using keyboard to navigate directory

Author: sawka

frontend/app/view/preview/directorypreview.tsx

@@ -386,15 +386,15 @@ function DirectoryTable({
     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();
@@ -520,34 +520,39 @@ function TableBody({
 }: TableBodyProps) {
     const dummyLineRef = useRef<HTMLDivElement>();
     const warningBoxRef = useRef<HTMLDivElement>();
-    const rowRefs = useRef<HTMLDivElement[]>([]);
     const conn = useAtomValue(model.connection);
     const setErrorMsg = useSetAtom(model.errorMsgAtom);
 
     useEffect(() => {
-        if (focusIndex !== null && rowRefs.current[focusIndex] && bodyRef.current && osRef) {
-            const viewport = osRef.osInstance().elements().viewport;
-            const viewportHeight = viewport.offsetHeight;
-            const rowElement = rowRefs.current[focusIndex];
-            const rowRect = rowElement.getBoundingClientRect();
-            const parentRect = viewport.getBoundingClientRect();
-            const viewportScrollTop = viewport.scrollTop;
-            const rowTopRelativeToViewport = rowRect.top - parentRect.top + viewport.scrollTop;
-            const rowBottomRelativeToViewport = rowRect.bottom - parentRect.top + viewport.scrollTop;
-            if (rowTopRelativeToViewport - 30 < viewportScrollTop) {
-                // Row is above the visible area
-                let topVal = rowTopRelativeToViewport - 30;
-                if (topVal < 0) {
-                    topVal = 0;
-                }
-                viewport.scrollTo({ top: topVal });
-            } else if (rowBottomRelativeToViewport + 5 > viewportScrollTop + viewportHeight) {
-                // Row is below the visible area
-                const topVal = rowBottomRelativeToViewport - viewportHeight + 5;
-                viewport.scrollTo({ top: topVal });
+        if (focusIndex === null || !bodyRef.current || !osRef) {
+            return;
+        }
+        
+        const rowElement = bodyRef.current.querySelector(`[data-rowindex="${focusIndex}"]`) as HTMLDivElement;
+        if (!rowElement) {
+            return;
+        }
+        
+        const viewport = osRef.osInstance().elements().viewport;
+        const viewportHeight = viewport.offsetHeight;
+        const rowRect = rowElement.getBoundingClientRect();
+        const parentRect = viewport.getBoundingClientRect();
+        const viewportScrollTop = viewport.scrollTop;
+        const rowTopRelativeToViewport = rowRect.top - parentRect.top + viewport.scrollTop;
+        const rowBottomRelativeToViewport = rowRect.bottom - parentRect.top + viewport.scrollTop;
+        
+        if (rowTopRelativeToViewport - 30 < viewportScrollTop) {
+            // Row is above the visible area
+            let topVal = rowTopRelativeToViewport - 30;
+            if (topVal < 0) {
+                topVal = 0;
             }
+            viewport.scrollTo({ top: topVal });
+        } else if (rowBottomRelativeToViewport + 5 > viewportScrollTop + viewportHeight) {
+            // Row is below the visible area
+            const topVal = rowBottomRelativeToViewport - viewportHeight + 5;
+            viewport.scrollTo({ top: topVal });
         }
-        // setIndexChangedFromClick(false);
     }, [focusIndex]);
 
     const handleFileContextMenu = useCallback(
@@ -730,6 +735,7 @@ const TableRow = React.forwardRef(function ({
     return (
         <div
             className={clsx("dir-table-body-row", { focused: focusIndex === idx })}
+            data-rowindex={idx}
             onDoubleClick={() => {
                 const newFileName = row.getValue("path") as string;
                 model.goHistory(newFileName);