Lock explorer scroll during selection

server/public/app.js

@@ -152,6 +152,11 @@ function renderWindow(win) {
   if (win.kind === 'properties') renderProperties(body);
   if (win.kind === 'queue') renderQueue(body);
   body.addEventListener('scroll', () => {
+    if (win.data.lockScroll) {
+      body.scrollTop = win.data.lockScrollTop || 0;
+      body.scrollLeft = win.data.lockScrollLeft || 0;
+      return;
+    }
     win.data.scrollTop = body.scrollTop;
     win.data.scrollLeft = body.scrollLeft;
   });
@@ -214,7 +219,8 @@ function renderExplorer(body, win) {
 
   for (const row of body.querySelectorAll('.file-row')) {
     const entry = data.entries.find((item) => item.path === row.dataset.path);
-    row.addEventListener('click', () => selectEntry(win, entry));
+    row.addEventListener('pointerdown', () => lockExplorerScroll(win, body));
+    row.addEventListener('click', () => selectEntry(win, entry, body));
     row.addEventListener('dblclick', () => {
       if (entry.type === 'directory') {
         loadExplorer(win, entry.path);
@@ -460,12 +466,13 @@ async function pollJob(id) {
   }
 }
 
-function selectEntry(win, entry) {
+function selectEntry(win, entry, scrollBody = null) {
   win.data.selectedPath = entry.path;
   state.selectedEntry = entry;
   focusWindow(win);
   updateSelectedRows();
   updatePropertiesWindows();
+  restoreExplorerScroll(win, scrollBody);
 }
 
 function focusWindow(win) {
@@ -495,6 +502,36 @@ function updatePropertiesWindows() {
   }
 }
 
+function lockExplorerScroll(win, body) {
+  win.data.lockScroll = true;
+  win.data.lockScrollTop = body.scrollTop;
+  win.data.lockScrollLeft = body.scrollLeft;
+}
+
+function restoreExplorerScroll(win, body) {
+  if (!body) {
+    body = workspace.querySelector(`.window[data-window-id="${win.id}"] .window-body`);
+  }
+  if (!body) return;
+
+  const top = win.data.lockScrollTop ?? win.data.scrollTop ?? 0;
+  const left = win.data.lockScrollLeft ?? win.data.scrollLeft ?? 0;
+  const restore = () => {
+    body.scrollTop = top;
+    body.scrollLeft = left;
+  };
+
+  restore();
+  requestAnimationFrame(restore);
+  setTimeout(restore, 0);
+  setTimeout(() => {
+    restore();
+    win.data.lockScroll = false;
+    win.data.scrollTop = body.scrollTop;
+    win.data.scrollLeft = body.scrollLeft;
+  }, 120);
+}
+
 function startDragWindow(event, win) {
   if (event.target.closest('button') || win.maximized) return;
   event.preventDefault();