fix(web): harden breadcrumb reveal state

t3-code[bot] committed 3 months ago

Commit bfdf3c61 parent d2e209d3 files · +58 −37Browse files

Unified · Split

3 files

.macroscope/check-run-agents/ui-consistency.md +1 −0
apps/web/src/components/files/FileBrowserPanel.tsx +49 −35
apps/web/src/components/files/FilePreviewPanel.tsx +8 −2

.macroscope/check-run-agents/ui-consistency.md+1−0

@@ -59,6 +59,7 @@ The goal is not to minimize CSS or class counts at any cost. The goal is to put · 58 unmodified lines
59	- Preserve runtime top and bottom overflow state. Do not replace dynamic fades with an always-on static mask.	59	- Preserve runtime top and bottom overflow state. Do not replace dynamic fades with an always-on static mask.
60	- Preserve fade geometry and keep the native scrollbar lane opaque so the track and thumb stay visible and usable. A visually similar mask that fades the scrollbar is a regression.	60	- Preserve fade geometry and keep the native scrollbar lane opaque so the track and thumb stay visible and usable. A visually similar mask that fades the scrollbar is a regression.
61	- For path-driven tree actions with flattened directory rows, do not assume that every registered item path is currently visible. Resolve the target through the tree's visible projection before selecting, focusing, or scrolling, and verify intermediate directory actions against a real flattened chain.	61	- For path-driven tree actions with flattened directory rows, do not assume that every registered item path is currently visible. Resolve the target through the tree's visible projection before selecting, focusing, or scrolling, and verify intermediate directory actions against a real flattened chain.
		62	- Treat external tree-reveal requests as one-shot events: resolve and validate the visible target without mutating search, focus, or selection, then acknowledge or clear the request after success so component remounts cannot replay stale navigation.
62	- Verify actual scroll behavior when changing virtualizers, masks, overflow ownership, or scrollbar selectors. Source-level class comparison is not enough.	63	- Verify actual scroll behavior when changing virtualizers, masks, overflow ownership, or scrollbar selectors. Source-level class comparison is not enough.
63		64
64	## Visual and layout preservation	65	## Visual and layout preservation

apps/web/src/components/files/FileBrowserPanel.tsx+49−35

   /** Breadcrumb target to reveal in the tree. An empty path reveals the project root. */
   breadcrumbRevealPath: string | null;
   breadcrumbRevealId: number;
+  onBreadcrumbRevealHandled: (revealId: number) => void;
   onOpenFile: (relativePath: string) => void;
 }
   return entry.kind === "directory" ? `${entry.path}/` : entry.path;
 }
+function visibleDirectoryTreePath(entries: readonly ProjectEntry[], directoryPath: string): string {
+  // Pierre flattens a directory row only while its sole direct child is another directory.
+  let currentPath = directoryPath;
+  while (true) {
+    const prefix = `${currentPath}/`;
+    const directChildren = entries.filter((entry) => {
+      if (!entry.path.startsWith(prefix)) return false;
+      return !entry.path.slice(prefix.length).includes("/");
+    });
+    if (directChildren.length !== 1 || directChildren[0]?.kind !== "directory") {
+      return `${currentPath}/`;
+    }
+    currentPath = directChildren[0].path;
+  }
+}
 function RefreshFilesButton(props: { isPending: boolean; onRefresh: () => void }) {
   return (
     <Tooltip>
   selectedPathRevealId,
   breadcrumbRevealPath,
   breadcrumbRevealId,
+  onBreadcrumbRevealHandled,
   onOpenFile,
 }: FileBrowserPanelProps) {
   const { resolvedTheme } = useTheme();
         ? `${breadcrumbRevealPath}/`
         : breadcrumbRevealPath;
     const item = itemPath ? (model.getItem(itemPath) ?? model.getItem(breadcrumbRevealPath)) : null;
-    if ((breadcrumbRevealPath && !item) || (!breadcrumbRevealPath && !treePaths[0])) return;
+    const firstEntry = entries[0];
+    const rootItemPath = firstEntry
+      ? firstEntry.kind === "directory"
+        ? visibleDirectoryTreePath(entries, firstEntry.path)
+        : firstEntry.path
+      : null;
+    if ((breadcrumbRevealPath && !item) || (!breadcrumbRevealPath && !rootItemPath)) return;
+    const visibleItemPath = itemPath
+      ? entryKind === "directory"
+        ? visibleDirectoryTreePath(entries, breadcrumbRevealPath)
+        : itemPath
+      : null;
+    if (visibleItemPath && !model.getItem(visibleItemPath)) return;
+    handledBreadcrumbRevealRef.current = revealRequest;
+    syncingSelectionRef.current = true;
     model.closeSearch();
+    for (const path of model.getSelectedPaths()) {
+      model.getItem(path)?.deselect();
+    }
     const segments = breadcrumbRevealPath.split("/").filter(Boolean);
     let ancestorPath = "";
       if (ancestor && "expand" in ancestor) ancestor.expand();
     }
-    let visibleItemPath: string | null = null;
-    if (itemPath) {
-      // Hidden segments in a flattened chain resolve to their visible ancestor,
-      // so probe descendants until the projected row belongs to the clicked directory.
-      const candidates = [
-        itemPath,
-        ...(entryKind === "directory"
-          ? treePaths.filter(
-              (path) => path !== itemPath && path.startsWith(itemPath) && path.endsWith("/"),
-            )
-          : []),
-      ];
-      for (const candidate of candidates) {
-        const projectedPath = model.focusNearestPath(candidate);
-        const matchesTarget =
-          projectedPath === itemPath ||
-          (entryKind === "directory" && projectedPath?.startsWith(itemPath));
-        if (projectedPath && matchesTarget) {
-          visibleItemPath = projectedPath;
-          break;
-        }
-      }
-      if (!visibleItemPath) return;
-    }
-    handledBreadcrumbRevealRef.current = revealRequest;
-    syncingSelectionRef.current = true;
-    for (const path of model.getSelectedPaths()) {
-      model.getItem(path)?.deselect();
-    }
     if (visibleItemPath) {
       model.getItem(visibleItemPath)?.select();
       model.scrollToPath(visibleItemPath, { focus: true, offset: "center" });
-    } else if (treePaths[0]) {
+    } else if (rootItemPath) {
-      model.scrollToPath(treePaths[0], { focus: true, offset: "top" });
+      model.scrollToPath(rootItemPath, { focus: true, offset: "top" });
     }
+    onBreadcrumbRevealHandled(breadcrumbRevealId);
     queueMicrotask(() => {
       syncingSelectionRef.current = false;
     });
-  }, [breadcrumbRevealId, breadcrumbRevealPath, entryKinds, model, treePaths]);
+  }, [
+    breadcrumbRevealId,
+    breadcrumbRevealPath,
+    entries,
+    entryKinds,
+    model,
+    onBreadcrumbRevealHandled,
+    treePaths,
+  ]);
   // Tag tree drags with the composer mention payload. The row is read from
   // the composed event path (the tree's shadow root is open), so this does

apps/web/src/components/files/FilePreviewPanel.tsx+8−2

   const [breadcrumbReveal, setBreadcrumbReveal] = useState<{ path: string; id: number } | null>(
     null,
   );
+  const breadcrumbRevealIdRef = useRef(0);
   // Reading markdown rendered is a preference, not a property of one file. Keeping
   // it on the panel meant a thread switch dropped it and forced source back.
   const [renderMarkdownPreferred, setRenderMarkdownPreferred] = useLocalStorage(
     } catch (error) {
       console.error(error);
     }
-    setBreadcrumbReveal((current) => ({ path, id: (current?.id ?? 0) + 1 }));
+    breadcrumbRevealIdRef.current += 1;
+    setBreadcrumbReveal({ path, id: breadcrumbRevealIdRef.current });
   };
+  const handleBreadcrumbRevealHandled = useCallback((revealId: number) => {
+    setBreadcrumbReveal((current) => (current?.id === revealId ? null : current));
+  }, []);
   const handleOpenInBrowser = useCallback(() => {
     if (!absolutePath || !environmentHttpBaseUrl) return;
                   <button
                     type="button"
                     className={cn(
-                      "max-w-40 cursor-pointer truncate rounded-sm px-0.5 hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      "max-w-40 cursor-pointer truncate rounded-sm px-0.5 text-left hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                       crumb.kind === "file"
                         ? "font-medium text-foreground"
                         : "text-muted-foreground",
               selectedPathRevealId={revealRequestId}
               breadcrumbRevealPath={breadcrumbReveal?.path ?? null}
               breadcrumbRevealId={breadcrumbReveal?.id ?? 0}
+              onBreadcrumbRevealHandled={handleBreadcrumbRevealHandled}
               onOpenFile={onOpenFile}
             />
           </aside>

fix(web): harden breadcrumb reveal state

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code