@agent-native/core 0.133.1 → 0.133.3

package/corpus/templates/content/app/components/editor/database/sidebar.tsx

@@ -21,16 +21,6 @@ import {
 import { useEffect, useState, type MouseEvent, type ReactNode } from "react";
 import { Link } from "react-router";
 
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import {
   Collapsible,
@@ -727,7 +717,6 @@ function DatabaseSidebarRow({
   };
 }) {
   const t = useT();
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const canEdit = item.document.canEdit !== false;
   const canManage =
     item.document.canManage === true ||
@@ -858,7 +847,7 @@ function DatabaseSidebarRow({
                   {canManage && onDeleteItem ? (
                     <DropdownMenuItem
                       className="text-destructive focus:text-destructive"
-                      onSelect={() => setDeleteDialogOpen(true)}
+                      onSelect={() => onDeleteItem(item)}
                     >
                       <IconTrash className="me-2 size-4" />
                       {t("database.delete")}
@@ -903,28 +892,6 @@ function DatabaseSidebarRow({
           </div>
         )}
       </div>
-
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {t("sidebar.deletePageQuestion")}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {t("sidebar.deletePageDescription", { title })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t("comments.cancel")}</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              onClick={() => onDeleteItem?.(item)}
-            >
-              {t("database.delete")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </>
   );
 }

package/corpus/templates/content/app/components/sidebar/DocumentSidebar.tsx

@@ -222,6 +222,18 @@ const SIDEBAR_SECTION_COLLAPSE_STORAGE_KEY =
 const TRASH_COLLAPSED_DEFAULT_MIGRATION_KEY =
   "content-sidebar-trash-collapsed-default-v2";
 const CONTENT_SIDEBAR_STATE_VERSION = 1 as const;
+
+function afterBodyPointerUnlock(callback: () => void) {
+  const run = () => {
+    if (document.body.style.pointerEvents === "none") {
+      window.requestAnimationFrame(run);
+      return;
+    }
+    callback();
+  };
+  window.requestAnimationFrame(run);
+}
+
 interface ContentSidebarStateSnapshot {
   version: typeof CONTENT_SIDEBAR_STATE_VERSION;
   expandedWorkspaceIds: string[];
@@ -309,10 +321,80 @@ function withPersonalSidebarOrder(
   };
 }
 
+const INITIAL_EXPANDED_WORKSPACE_READ_DELAY_MS = 250;
+const DATABASE_PAGE_READY_FALLBACK_MS = 15_000;
+const DATABASE_ROWS_VISIBLE_EVENT = "content-database-rows-visible";
+
+function useDeferredFilesDatabaseId(
+  databaseId: string,
+  expanded: boolean,
+  deferUntilDocumentId: string | null,
+) {
+  const previouslyExpanded = useRef(expanded);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const wasExpanded = previouslyExpanded.current;
+    previouslyExpanded.current = expanded;
+    if (!expanded) {
+      setReady(false);
+      return;
+    }
+    if (!wasExpanded) {
+      setReady(true);
+      return;
+    }
+
+    if (deferUntilDocumentId) {
+      if (
+        window.document.documentElement.dataset
+          .contentDatabaseRowsVisibleDocumentId === deferUntilDocumentId
+      ) {
+        setReady(true);
+        return;
+      }
+      setReady(false);
+      const handleRowsVisible = (event: Event) => {
+        if (
+          (event as CustomEvent<{ documentId?: string }>).detail?.documentId ===
+          deferUntilDocumentId
+        ) {
+          setReady(true);
+        }
+      };
+      window.addEventListener(DATABASE_ROWS_VISIBLE_EVENT, handleRowsVisible);
+      const fallback = window.setTimeout(
+        () => setReady(true),
+        DATABASE_PAGE_READY_FALLBACK_MS,
+      );
+      return () => {
+        window.removeEventListener(
+          DATABASE_ROWS_VISIBLE_EVENT,
+          handleRowsVisible,
+        );
+        window.clearTimeout(fallback);
+      };
+    }
+
+    // An already-expanded workspace can contain thousands of files. Give the
+    // selected page's critical read one turn before starting that inventory;
+    // direct expansion remains immediate.
+    setReady(false);
+    const timeout = window.setTimeout(
+      () => setReady(true),
+      INITIAL_EXPANDED_WORKSPACE_READ_DELAY_MS,
+    );
+    return () => window.clearTimeout(timeout);
+  }, [databaseId, deferUntilDocumentId, expanded]);
+
+  return expanded && ready ? databaseId : null;
+}
+
 function WorkspaceSidebarItem({
   space,
   selected,
   expanded,
+  deferInitialReadUntilDocumentId,
   reorder,
   createDocumentPending,
   activeDocumentId,
@@ -329,6 +411,7 @@ function WorkspaceSidebarItem({
   space: ContentSpaceSummary;
   selected: boolean;
   expanded: boolean;
+  deferInitialReadUntilDocumentId: string | null;
   reorder?: ContentFilesSidebarRenderReorder;
   createDocumentPending: boolean;
   activeDocumentId: string | null;
@@ -349,7 +432,11 @@ function WorkspaceSidebarItem({
   onToggleFavorite: (item: ContentDatabaseItem) => void;
 }) {
   const t = useT();
-  const activeFilesDatabaseId = expanded ? space.filesDatabaseId : null;
+  const activeFilesDatabaseId = useDeferredFilesDatabaseId(
+    space.filesDatabaseId,
+    expanded,
+    deferInitialReadUntilDocumentId,
+  );
   const filesDatabase = useContentDatabaseById(activeFilesDatabaseId);
   const filesDatabaseData = isContentDatabaseUnavailable(filesDatabase.data)
     ? undefined
@@ -906,6 +993,11 @@ export function DocumentSidebar({
   }, [setStoredCollapsedSections]);
   const [removeLocalFilesDialogOpen, setRemoveLocalFilesDialogOpen] =
     useState(false);
+  const [pendingDelete, setPendingDelete] = useState<{
+    id: string;
+    title: string;
+  } | null>(null);
+  const confirmedDeleteIdRef = useRef<string | null>(null);
   const settingsActive = location.pathname.startsWith("/settings");
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -1258,6 +1350,12 @@ export function DocumentSidebar({
     ],
   );
 
+  const requestDelete = useCallback((id: string, title: string) => {
+    afterBodyPointerUnlock(() => {
+      setPendingDelete({ id, title });
+    });
+  }, []);
+
   const handleReorderPage = useCallback(
     async (id: string, overId: string) => {
       if (id === overId) return;
@@ -1520,7 +1618,7 @@ export function DocumentSidebar({
           }}
           onCreateChildPage={(parentId) => handleCreatePage(parentId)}
           onCreateChildDatabase={(parentId) => handleCreateDatabase(parentId)}
-          onDelete={handleDelete}
+          onDelete={requestDelete}
           onToggleFavorite={handleToggleFavorite}
         />
       ))}
@@ -1805,6 +1903,12 @@ export function DocumentSidebar({
       space={space}
       selected={selectedSpace?.id === space.id}
       expanded={expandedWorkspaceIds.includes(space.id)}
+      deferInitialReadUntilDocumentId={
+        activeDocumentId &&
+        databaseDocuments.some((document) => document.id === activeDocumentId)
+          ? activeDocumentId
+          : null
+      }
       reorder={reorder}
       createDocumentPending={createDocument.isPending}
       activeDocumentId={activeDocumentId}
@@ -1832,7 +1936,12 @@ export function DocumentSidebar({
       onCreateChildDatabase={(nextSpace, item) =>
         void handleCreateDatabase(item.document.id, nextSpace.id)
       }
-      onDeleteItem={(item) => void handleDelete(item.document.id)}
+      onDeleteItem={(item) =>
+        requestDelete(
+          item.document.id,
+          item.document.title || t("sidebar.untitled"),
+        )
+      }
       onToggleFavorite={(item) =>
         handleToggleFavorite(item.document.id, !item.document.isFavorite)
       }
@@ -2348,7 +2457,10 @@ export function DocumentSidebar({
                           void handleCreateDatabase(item.document.id)
                         }
                         onDeleteItem={(item) =>
-                          void handleDelete(item.document.id)
+                          requestDelete(
+                            item.document.id,
+                            item.document.title || t("sidebar.untitled"),
+                          )
                         }
                         onToggleFavorite={(item) =>
                           handleToggleFavorite(item.document.id, false)
@@ -2416,6 +2528,49 @@ export function DocumentSidebar({
           onMouseDown={handleMouseDown}
         />
       )}
+      <AlertDialog
+        open={pendingDelete !== null}
+        onOpenChange={(open) => {
+          if (open) return;
+          setPendingDelete(null);
+          const confirmedDeleteId = confirmedDeleteIdRef.current;
+          confirmedDeleteIdRef.current = null;
+          if (confirmedDeleteId) {
+            afterBodyPointerUnlock(() => {
+              void handleDelete(confirmedDeleteId);
+            });
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("sidebar.deletePageQuestion")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {pendingDelete
+                ? t("sidebar.deletePageDescription", {
+                    title: pendingDelete.title,
+                  })
+                : null}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("comments.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={
+                deleteDocument.isPending || deleteContentDatabase.isPending
+              }
+              onClick={() => {
+                confirmedDeleteIdRef.current = pendingDelete?.id ?? null;
+              }}
+            >
+              {t("database.delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
       <AlertDialog
         open={removeLocalFilesDialogOpen}
         onOpenChange={setRemoveLocalFilesDialogOpen}

package/corpus/templates/content/app/components/sidebar/DocumentTreeItem.tsx

@@ -6,7 +6,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import type { Document, DocumentTreeNode } from "@shared/api";
+import type { DocumentTreeNode } from "@shared/api";
 import {
   IconChevronRight,
   IconDatabase,
@@ -19,16 +19,6 @@ import {
 } from "@tabler/icons-react";
 import { useState } from "react";
 
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -53,7 +43,7 @@ interface DocumentTreeItemProps {
   onSelect: (id: string) => void;
   onCreateChildPage: (parentId: string) => void;
   onCreateChildDatabase: (parentId: string) => void;
-  onDelete: (id: string) => void;
+  onDelete: (id: string, title: string) => void;
   onToggleFavorite: (id: string, isFavorite: boolean) => void;
 }
 
@@ -88,178 +78,6 @@ export function DocumentSidebarIcon({
   return <IconFileText size={14} className="text-muted-foreground" />;
 }
 
-export function FavoriteDocumentItem({
-  document,
-  active,
-  sidebarWidth,
-  onSelect,
-  onCreateChildPage,
-  onCreateChildDatabase,
-  onRemoveFavorite,
-  onDelete,
-}: {
-  document: Document;
-  active: boolean;
-  sidebarWidth?: number;
-  onSelect: () => void;
-  onCreateChildPage: () => void;
-  onCreateChildDatabase: () => void;
-  onRemoveFavorite: () => void;
-  onDelete: () => void;
-}) {
-  const t = useT();
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const canEdit = document.canEdit !== false;
-  const canManage =
-    document.canManage === true ||
-    document.accessRole === "owner" ||
-    document.accessRole === "admin";
-  const canCreateChild = canEdit && document.source?.mode !== "local-files";
-  const title = document.title || t("sidebar.untitled");
-
-  return (
-    <div
-      className={cn(
-        "group relative flex min-w-0 cursor-pointer items-center gap-1.5 rounded-md py-[5px] pe-2 text-sm",
-        active
-          ? "font-semibold text-foreground"
-          : "text-muted-foreground hover:bg-accent hover:text-foreground",
-      )}
-      style={{
-        paddingInlineStart: "26px",
-        width:
-          sidebarWidth === undefined
-            ? undefined
-            : `${Math.max(0, sidebarWidth)}px`,
-      }}
-      aria-label={title}
-    >
-      <button
-        type="button"
-        className="absolute inset-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        aria-label={`Open ${title}`}
-        onClick={onSelect}
-      />
-      <span className="pointer-events-none relative flex h-5 w-5 shrink-0 items-center justify-center text-center">
-        <DocumentSidebarIcon document={document} />
-      </span>
-      <span className="pointer-events-none relative min-w-0 flex-1 truncate pe-12">
-        {title}
-      </span>
-      <div
-        className={cn(
-          "pointer-events-none absolute right-1 top-1/2 z-10 flex -translate-y-1/2 items-center gap-0.5 rounded-md bg-accent px-0.5 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100",
-          active && "text-accent-foreground",
-        )}
-        onPointerDown={(event) => event.stopPropagation()}
-        onClick={(event) => event.stopPropagation()}
-      >
-        {(canEdit || canManage) && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button
-                type="button"
-                className="flex h-6 w-6 items-center justify-center rounded hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                aria-label={`More actions for ${title}`}
-                onClick={(event) => event.stopPropagation()}
-              >
-                <IconDots size={14} />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="w-48">
-              {canEdit && (
-                <DropdownMenuItem
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    onRemoveFavorite();
-                  }}
-                >
-                  <IconStar size={14} className="me-2 fill-current" />
-                  {t("sidebar.unpinFromSidebar")}
-                </DropdownMenuItem>
-              )}
-              {canEdit && canManage && <DropdownMenuSeparator />}
-              {canManage && (
-                <DropdownMenuItem
-                  className="text-destructive"
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    setDeleteDialogOpen(true);
-                  }}
-                >
-                  <IconTrash size={14} className="me-2" />
-                  {t("database.delete")}
-                </DropdownMenuItem>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-        {canCreateChild && (
-          <DropdownMenu>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <DropdownMenuTrigger asChild>
-                  <button
-                    type="button"
-                    className="flex h-7 w-7 items-center justify-center rounded hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    aria-label={t("sidebar.addChildTo", { title })}
-                    onClick={(event) => event.stopPropagation()}
-                  >
-                    <IconPlus size={14} />
-                  </button>
-                </DropdownMenuTrigger>
-              </TooltipTrigger>
-              <TooltipContent>{t("sidebar.addChild")}</TooltipContent>
-            </Tooltip>
-            <DropdownMenuContent align="start" className="w-44">
-              <DropdownMenuItem
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onCreateChildPage();
-                }}
-              >
-                <IconFileText className="me-2 size-4" />
-                {t("sidebar.page")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onCreateChildDatabase();
-                }}
-              >
-                <IconDatabase className="me-2 size-4" />
-                {t("sidebar.database")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-      </div>
-
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {t("sidebar.deletePageQuestion")}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {t("sidebar.deletePageDescription", { title })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t("comments.cancel")}</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              onClick={onDelete}
-            >
-              {t("database.delete")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-}
-
 export function DocumentTreeItem({
   node,
   depth,
@@ -286,7 +104,6 @@ export function DocumentTreeItem({
     node.accessRole === "admin";
   const hasMenuActions = canEdit || canManage;
   const canCreateChild = canEdit && !isLocalFileNode;
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [contextSheetOpen, setContextSheetOpen] = useState(false);
   const indent = depth * 12 + 12;
   const rowWidth =
@@ -439,9 +256,9 @@ export function DocumentTreeItem({
                 {canManage && (
                   <DropdownMenuItem
                     className="text-destructive"
-                    onClick={(e) => {
+                    onSelect={(e) => {
                       e.stopPropagation();
-                      setDeleteDialogOpen(true);
+                      onDelete(node.id, node.title || t("sidebar.untitled"));
                     }}
                   >
                     <IconTrash size={14} className="me-2" />
@@ -534,30 +351,6 @@ export function DocumentTreeItem({
           ))}
         </SortableContext>
       )}
-
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {t("sidebar.deletePageQuestion")}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {t("sidebar.deletePageDescription", {
-                title: node.title || t("sidebar.untitled"),
-              })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t("comments.cancel")}</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              onClick={() => onDelete(node.id)}
-            >
-              {t("database.delete")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </div>
   );
 }