@agent-native/core 0.128.0 → 0.128.2

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

@@ -28,7 +28,9 @@ import {
 } from "@dnd-kit/sortable";
 import type {
   ContentDatabaseItem,
+  ContentDatabasePersonalViewOverrides,
   ContentDatabaseResponse,
+  ContentSidebarViewOrder,
   Document,
   DocumentTreeNode,
 } from "@shared/api";
@@ -36,6 +38,7 @@ import { CONTENT_DATABASE_PERSONAL_VIEW_OVERRIDES_VERSION } from "@shared/api";
 import {
   IconFolder,
   IconFolderOpen,
+  IconArrowsSort,
   IconPlus,
   IconRestore,
   IconSearch,
@@ -61,7 +64,10 @@ import {
 import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
-import { ContentFilesSidebarView } from "@/components/editor/database/sidebar";
+import {
+  ContentFilesSidebarView,
+  type ContentFilesSidebarRenderReorder,
+} from "@/components/editor/database/sidebar";
 import { QueryErrorState } from "@/components/QueryErrorState";
 import {
   AlertDialog,
@@ -78,6 +84,8 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
@@ -94,6 +102,7 @@ import {
   removeOptimisticItemFromContentDatabase,
   useContentDatabaseById,
   useContentDatabasePersonalView,
+  useMoveDatabaseItem,
   useUpdateContentDatabasePersonalView,
   useCreateContentDatabase,
   useDeleteContentDatabase,
@@ -128,11 +137,7 @@ import {
   getDocumentSidebarSections,
   isDirectLocalDocument,
 } from "./document-sidebar-sections";
-import {
-  DocumentSidebarIcon,
-  DocumentTreeItem,
-  FavoriteDocumentItem,
-} from "./DocumentTreeItem";
+import { DocumentSidebarIcon, DocumentTreeItem } from "./DocumentTreeItem";
 import {
   contentSpaceAvailability,
   contentSpaceForStoredSelection,
@@ -143,6 +148,7 @@ import {
   selectContentSpace,
   toggleExpandedWorkspaceIds,
 } from "./select-content-space";
+import { type SidebarReorderLabels } from "./sidebar-reorder";
 import {
   WorkspaceSourceMenu,
   type CreatedWorkspace,
@@ -247,13 +253,73 @@ interface RemoveLocalFileSourceResult {
   deleted: number;
 }
 
-function WorkspaceFilesSection({
+function personalSidebarOrderForDatabase(
+  data: ContentDatabaseResponse | undefined,
+  overrides: ContentDatabasePersonalViewOverrides | null | undefined,
+) {
+  const savedActiveViewId =
+    data?.database.viewConfig.activeViewId ??
+    data?.database.viewConfig.views[0]?.id ??
+    "default";
+  const activeViewId =
+    overrides?.activeViewId &&
+    data?.database.viewConfig.views.some(
+      (view) => view.id === overrides.activeViewId,
+    )
+      ? overrides.activeViewId
+      : savedActiveViewId;
+  const saved = overrides?.views.find((view) => view.id === activeViewId);
+  return {
+    activeViewId,
+    order: saved?.sidebarOrder ?? {
+      mode: "custom" as const,
+      itemIds: data?.items.map((item) => item.id) ?? [],
+    },
+  };
+}
+
+function withPersonalSidebarOrder(
+  data: ContentDatabaseResponse | undefined,
+  overrides: ContentDatabasePersonalViewOverrides | null | undefined,
+  activeViewId: string,
+  order: ContentSidebarViewOrder,
+): ContentDatabasePersonalViewOverrides {
+  const savedView = data?.database.viewConfig.views.find(
+    (view) => view.id === activeViewId,
+  );
+  const existingView = overrides?.views.find(
+    (view) => view.id === activeViewId,
+  );
+  const nextView = {
+    id: activeViewId,
+    sorts: existingView?.sorts ?? savedView?.sorts ?? [],
+    filters: existingView?.filters ?? savedView?.filters ?? [],
+    filterMode:
+      existingView?.filterMode ?? savedView?.filterMode ?? ("and" as const),
+    sidebarOrder: order,
+  };
+  return {
+    version: CONTENT_DATABASE_PERSONAL_VIEW_OVERRIDES_VERSION,
+    activeViewId,
+    views: [
+      ...(overrides?.views ?? []).filter((view) => view.id !== activeViewId),
+      nextView,
+    ],
+  };
+}
+
+function WorkspaceSidebarItem({
   space,
   selected,
+  expanded,
+  reorder,
+  createDocumentPending,
   activeDocumentId,
   expandedDocumentIds,
   onDocumentExpandedChange,
   onActivate,
+  onToggleExpanded,
+  onCreatePageInSpace,
   onCreateChildPage,
   onCreateChildDatabase,
   onDeleteItem,
@@ -261,10 +327,15 @@ function WorkspaceFilesSection({
 }: {
   space: ContentSpaceSummary;
   selected: boolean;
+  expanded: boolean;
+  reorder?: ContentFilesSidebarRenderReorder;
+  createDocumentPending: boolean;
   activeDocumentId: string | null;
   expandedDocumentIds: ReadonlySet<string>;
   onDocumentExpandedChange: (documentId: string, expanded: boolean) => void;
   onActivate: (space: ContentSpaceSummary, documentId?: string) => void;
+  onToggleExpanded: () => void;
+  onCreatePageInSpace: (space: ContentSpaceSummary) => void;
   onCreateChildPage: (
     space: ContentSpaceSummary,
     item: ContentDatabaseItem,
@@ -277,64 +348,233 @@ function WorkspaceFilesSection({
   onToggleFavorite: (item: ContentDatabaseItem) => void;
 }) {
   const t = useT();
-  const filesDatabase = useContentDatabaseById(space.filesDatabaseId);
+  const activeFilesDatabaseId = expanded ? space.filesDatabaseId : null;
+  const filesDatabase = useContentDatabaseById(activeFilesDatabaseId);
   const filesPersonalView = useContentDatabasePersonalView(
-    space.filesDatabaseId,
+    activeFilesDatabaseId,
   );
   const updateFilesPersonalView = useUpdateContentDatabasePersonalView(
-    space.filesDatabaseId,
+    activeFilesDatabaseId,
   );
   const failed = filesDatabase.isError || filesPersonalView.isError;
+  const { activeViewId, order: sidebarOrder } = personalSidebarOrderForDatabase(
+    filesDatabase.data,
+    filesPersonalView.data?.overrides,
+  );
+  const reorderLabels: SidebarReorderLabels = {
+    drag: (label) => t("sidebar.dragToReorder", { label }),
+    moveUp: t("sidebar.moveUp"),
+    moveDown: t("sidebar.moveDown"),
+    moveTo: t("sidebar.moveToPosition"),
+    moveToPosition: (position) => t("sidebar.positionNumber", { position }),
+  };
+  const sidebarOrderModeLabels = {
+    custom: t("sidebar.orderMode.custom"),
+    last_edited: t("sidebar.orderMode.last_edited"),
+    name: t("sidebar.orderMode.name"),
+    created: t("sidebar.orderMode.created"),
+  };
+
+  function updateSidebarOrder(order: ContentSidebarViewOrder) {
+    updateFilesPersonalView.mutate(
+      {
+        databaseId: space.filesDatabaseId,
+        overrides: withPersonalSidebarOrder(
+          filesDatabase.data,
+          filesPersonalView.data?.overrides,
+          activeViewId,
+          order,
+        ),
+      },
+      {
+        onError: (error) => {
+          toast.error(t("sidebar.failedSaveOrder"), {
+            description:
+              error instanceof Error ? error.message : t("empty.genericError"),
+          });
+        },
+      },
+    );
+  }
 
   return (
-    <div className="ms-3 pb-1 ps-1">
-      {failed ? (
-        <QueryErrorState
-          compact
-          onRetry={() => {
-            void filesDatabase.refetch();
-            void filesPersonalView.refetch();
-          }}
-          retrying={filesDatabase.isFetching || filesPersonalView.isFetching}
-        />
-      ) : (
-        <ContentFilesSidebarView
-          data={filesDatabase.data}
-          overrides={filesPersonalView.data?.overrides}
-          isLoading={filesDatabase.isLoading || filesPersonalView.isLoading}
-          activeDocumentId={activeDocumentId}
-          expandedDocumentIds={expandedDocumentIds}
-          onDocumentExpandedChange={onDocumentExpandedChange}
-          onSelectView={(viewId) => {
-            const current = filesPersonalView.data?.overrides;
-            updateFilesPersonalView.mutate({
-              databaseId: space.filesDatabaseId,
-              overrides: {
-                version:
-                  current?.version ??
-                  CONTENT_DATABASE_PERSONAL_VIEW_OVERRIDES_VERSION,
-                activeViewId: viewId,
-                views: current?.views ?? [],
-              },
-            });
-          }}
-          onOpenItem={(item: ContentDatabaseItem) => {
-            if (selected) return false;
-            onActivate(space, item.document.id);
-            return true;
-          }}
-          onCreateChildPage={(item) => onCreateChildPage(space, item)}
-          onCreateChildDatabase={(item) => onCreateChildDatabase(space, item)}
-          onDeleteItem={onDeleteItem}
-          onToggleFavorite={onToggleFavorite}
-          labels={{
-            noMatchesLabel: t("database.noRowsMatchThisView"),
-            clearLabel: t("database.clearSearchAndFilters"),
-            navigationLabel: `${space.name} ${t("sidebar.files")}`,
-            untitledLabel: t("sidebar.untitled"),
+    <div className="min-w-0">
+      <div
+        className={cn(
+          "group/workspace-header flex h-7 w-full min-w-0 items-center rounded-md",
+          selected
+            ? "text-foreground"
+            : "text-muted-foreground hover:bg-accent/40 hover:text-foreground",
+        )}
+      >
+        <button
+          type="button"
+          aria-expanded={expanded}
+          aria-label={`${expanded ? t("sidebar.collapse") : t("sidebar.expand")} ${space.name}`}
+          className="group/workspace-toggle relative flex size-7 shrink-0 items-center justify-center rounded-md hover:bg-background/60"
+          onClick={onToggleExpanded}
+        >
+          <span className="group-hover/workspace-header:opacity-0 group-focus-within/workspace-header:opacity-0 group-focus-visible/workspace-toggle:opacity-0">
+            {expanded ? <IconFolderOpen size={14} /> : <IconFolder size={14} />}
+          </span>
+          <span className="absolute inset-0 flex items-center justify-center opacity-0 group-hover/workspace-header:opacity-100 group-focus-within/workspace-header:opacity-100 group-focus-visible/workspace-toggle:opacity-100">
+            {expanded ? (
+              <IconChevronDown size={14} />
+            ) : (
+              <IconChevronRight size={14} />
+            )}
+          </span>
+        </button>
+        <Link
+          to={`/page/${space.filesDocumentId}`}
+          {...reorder?.controls.attributes}
+          {...reorder?.controls.listeners}
+          data-sidebar-reorder-item-id={reorder?.controls.itemId}
+          role="link"
+          className={cn(
+            "flex h-7 min-w-0 flex-1 items-center pe-2 text-start text-[10px] font-semibold uppercase leading-none tracking-wider",
+            reorder && "touch-none cursor-pointer select-none",
+            reorder?.controls.isDragging && "cursor-grabbing",
+          )}
+          onClick={(event) => {
+            if (
+              !event.metaKey &&
+              !event.ctrlKey &&
+              !event.shiftKey &&
+              !event.altKey
+            ) {
+              event.preventDefault();
+              onActivate(space);
+            }
           }}
-        />
-      )}
+        >
+          <span className="min-w-0 flex-1 truncate">{space.name}</span>
+        </Link>
+        {expanded ? (
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-background/60 hover:text-foreground disabled:opacity-50"
+                    aria-label={t("sidebar.orderButton", {
+                      order: sidebarOrderModeLabels[sidebarOrder.mode],
+                    })}
+                    disabled={
+                      filesDatabase.isLoading ||
+                      filesPersonalView.isLoading ||
+                      updateFilesPersonalView.isPending
+                    }
+                  >
+                    <IconArrowsSort size={14} />
+                  </button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>
+                {t("sidebar.orderButton", {
+                  order: sidebarOrderModeLabels[sidebarOrder.mode],
+                })}
+              </TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent align="end">
+              <DropdownMenuRadioGroup
+                value={sidebarOrder.mode}
+                onValueChange={(value) =>
+                  updateSidebarOrder({
+                    ...sidebarOrder,
+                    mode: value as ContentSidebarViewOrder["mode"],
+                  })
+                }
+              >
+                {(
+                  Object.keys(
+                    sidebarOrderModeLabels,
+                  ) as ContentSidebarViewOrder["mode"][]
+                ).map((mode) => (
+                  <DropdownMenuRadioItem key={mode} value={mode}>
+                    {sidebarOrderModeLabels[mode]}
+                  </DropdownMenuRadioItem>
+                ))}
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+        <button
+          type="button"
+          className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-background/60 hover:text-foreground disabled:opacity-50"
+          disabled={createDocumentPending}
+          aria-label={`${t("sidebar.newPage")} — ${space.name}`}
+          onClick={() => onCreatePageInSpace(space)}
+        >
+          <IconPlus size={14} />
+        </button>
+      </div>
+      {expanded ? (
+        <div className="min-w-0 pb-1 ps-4">
+          {failed ? (
+            <QueryErrorState
+              compact
+              onRetry={() => {
+                void filesDatabase.refetch();
+                void filesPersonalView.refetch();
+              }}
+              retrying={
+                filesDatabase.isFetching || filesPersonalView.isFetching
+              }
+            />
+          ) : (
+            <ContentFilesSidebarView
+              data={filesDatabase.data}
+              overrides={filesPersonalView.data?.overrides}
+              isLoading={filesDatabase.isLoading || filesPersonalView.isLoading}
+              activeDocumentId={activeDocumentId}
+              expandedDocumentIds={expandedDocumentIds}
+              onDocumentExpandedChange={onDocumentExpandedChange}
+              onSelectView={(viewId) => {
+                const current = filesPersonalView.data?.overrides;
+                updateFilesPersonalView.mutate({
+                  databaseId: space.filesDatabaseId,
+                  overrides: {
+                    version:
+                      current?.version ??
+                      CONTENT_DATABASE_PERSONAL_VIEW_OVERRIDES_VERSION,
+                    activeViewId: viewId,
+                    views: current?.views ?? [],
+                  },
+                });
+              }}
+              sidebarOrder={sidebarOrder}
+              manualReorder={
+                updateFilesPersonalView.isPending
+                  ? undefined
+                  : {
+                      labels: reorderLabels,
+                      onReorder: (itemIds) =>
+                        updateSidebarOrder({ ...sidebarOrder, itemIds }),
+                    }
+              }
+              onOpenItem={(item: ContentDatabaseItem) => {
+                if (selected) return false;
+                onActivate(space, item.document.id);
+                return true;
+              }}
+              onCreateChildPage={(item) => onCreateChildPage(space, item)}
+              onCreateChildDatabase={(item) =>
+                onCreateChildDatabase(space, item)
+              }
+              onDeleteItem={onDeleteItem}
+              onToggleFavorite={onToggleFavorite}
+              labels={{
+                noMatchesLabel: t("database.noRowsMatchThisView"),
+                clearLabel: t("database.clearSearchAndFilters"),
+                navigationLabel: `${space.name} ${t("sidebar.files")}`,
+                untitledLabel: t("sidebar.untitled"),
+              }}
+            />
+          )}
+        </div>
+      ) : null}
     </div>
   );
 }
@@ -351,6 +591,16 @@ export function DocumentSidebar({
   const location = useLocation();
   const queryClient = useQueryClient();
   const t = useT();
+  const sidebarReorderLabels = useMemo<SidebarReorderLabels>(
+    () => ({
+      drag: (label) => t("sidebar.dragToReorder", { label }),
+      moveUp: t("sidebar.moveUp"),
+      moveDown: t("sidebar.moveDown"),
+      moveTo: t("sidebar.moveToPosition"),
+      moveToPosition: (position) => t("sidebar.positionNumber", { position }),
+    }),
+    [t],
+  );
   const documentsQuery = useDocuments();
   const { data: documents = [], isLoading } = documentsQuery;
   const createDocument = useCreateDocument();
@@ -371,8 +621,13 @@ export function DocumentSidebar({
   const contentSpaces = contentSpacesQuery.data?.spaces ?? [];
   const workspaceCatalogDatabaseId =
     contentSpacesQuery.data?.catalogDatabaseId ?? null;
+  const workspaceCatalogDocumentId =
+    contentSpacesQuery.data?.catalogDocumentId ?? null;
+  const favoritesDatabaseId =
+    contentSpacesQuery.data?.favoritesDatabaseId ?? null;
   const favoritesDocumentId =
     contentSpacesQuery.data?.favoritesDocumentId ?? null;
+  const favoritesDatabase = useContentDatabaseById(favoritesDatabaseId);
   const workspaceCatalogDatabase = useContentDatabaseById(
     workspaceCatalogDatabaseId,
   );
@@ -381,6 +636,10 @@ export function DocumentSidebar({
   );
   const updateWorkspaceCatalogPersonalView =
     useUpdateContentDatabasePersonalView(workspaceCatalogDatabaseId);
+  const movePinnedItem = useMoveDatabaseItem(favoritesDocumentId ?? "");
+  const moveWorkspaceItem = useMoveDatabaseItem(
+    workspaceCatalogDocumentId ?? "",
+  );
   const spaceProvisionAttemptedRef = useRef(false);
   useEffect(() => {
     if (
@@ -581,6 +840,7 @@ export function DocumentSidebar({
         role: "owner",
         catalogItemId: created.catalogItemId,
         catalogDocumentId: created.catalogDocumentId,
+        catalogPosition: Number.MAX_SAFE_INTEGER,
       }),
     [handleSelectContentSpace],
   );
@@ -678,7 +938,6 @@ export function DocumentSidebar({
     localFileMode,
     localSourceDocuments,
     databaseDocuments,
-    favorites,
     showFavorites,
   } = getDocumentSidebarSections(documents, treeDocuments);
   const localFileTree = buildDocumentTree(localSourceDocuments);
@@ -689,10 +948,6 @@ export function DocumentSidebar({
         (document) => document.source?.kind !== "folder",
       ).length;
   const canRemoveLocalFiles = localFileMode || importedLocalFileCount > 0;
-  // Match the tree rows' right-side inset so favorite titles clip inside the
-  // visible sidebar instead of widening the scroll surface.
-  const favoriteRowWidth =
-    width === undefined ? undefined : Math.max(208, width - 24);
   const activeDocument = activeDocumentId
     ? documents.find((doc) => doc.id === activeDocumentId)
     : null;
@@ -913,22 +1168,6 @@ export function DocumentSidebar({
     [handleCreatePage, handleSelectContentSpace, selectedSpace?.id],
   );
 
-  const handleOpenFavorite = useCallback(
-    (document: Document) => {
-      const space = contentSpaces.find(
-        (candidate) =>
-          candidate.filesDocumentId ===
-          document.databaseMembership?.databaseDocumentId,
-      );
-      if (space) {
-        void handleSelectContentSpace(space, document.id);
-        return;
-      }
-      navigateToDocument(document.id);
-    },
-    [contentSpaces, handleSelectContentSpace, navigateToDocument],
-  );
-
   const handleDelete = useCallback(
     async (id: string) => {
       const deletedDocument = documents.find((doc) => doc.id === id) ?? null;
@@ -1090,6 +1329,54 @@ export function DocumentSidebar({
     [handleReorderPage, parentByDocumentId],
   );
 
+  const handlePinnedReorder = useCallback(
+    (_itemIds: string[], moved: { itemId: string; position: number }) => {
+      if (!favoritesDatabaseId) return;
+      movePinnedItem.mutate(
+        {
+          databaseId: favoritesDatabaseId,
+          itemId: moved.itemId,
+          position: moved.position,
+        },
+        {
+          onError: (error) => {
+            toast.error(t("sidebar.failedSaveOrder"), {
+              description:
+                error instanceof Error
+                  ? error.message
+                  : t("empty.genericError"),
+            });
+          },
+        },
+      );
+    },
+    [favoritesDatabaseId, movePinnedItem, t],
+  );
+
+  const handleWorkspaceReorder = useCallback(
+    (_itemIds: string[], moved: { itemId: string; position: number }) => {
+      if (!workspaceCatalogDatabaseId) return;
+      moveWorkspaceItem.mutate(
+        {
+          databaseId: workspaceCatalogDatabaseId,
+          itemId: moved.itemId,
+          position: moved.position,
+        },
+        {
+          onError: (error) => {
+            toast.error(t("sidebar.failedSaveOrder"), {
+              description:
+                error instanceof Error
+                  ? error.message
+                  : t("empty.genericError"),
+            });
+          },
+        },
+      );
+    },
+    [moveWorkspaceItem, t, workspaceCatalogDatabaseId],
+  );
+
   const handleToggleFavorite = useCallback(
     (id: string, isFavorite: boolean) => {
       updateDocument.mutate(
@@ -1469,92 +1756,47 @@ export function DocumentSidebar({
     );
   };
 
-  const renderWorkspaceRoot = (space: ContentSpaceSummary) => {
-    const selected = selectedSpace?.id === space.id;
-    const expanded = expandedWorkspaceIds.includes(space.id);
-    return (
-      <div className="min-w-0">
-        <div
-          className={cn(
-            "group/workspace-header flex h-7 w-full min-w-0 items-center rounded-md",
-            selected
-              ? "text-foreground"
-              : "text-muted-foreground hover:bg-accent/40 hover:text-foreground",
-          )}
-        >
-          <button
-            type="button"
-            aria-expanded={expanded}
-            aria-label={`${expanded ? t("sidebar.collapse") : t("sidebar.expand")} ${space.name}`}
-            className="group/workspace-toggle relative flex size-7 shrink-0 items-center justify-center rounded-md hover:bg-background/60"
-            onClick={() =>
-              updateExpandedWorkspaceIds((current) =>
-                toggleExpandedWorkspaceIds(current, space.id),
-              )
-            }
-          >
-            <span className="group-hover/workspace-header:opacity-0 group-focus-visible/workspace-toggle:opacity-0">
-              {expanded ? (
-                <IconFolderOpen size={14} />
-              ) : (
-                <IconFolder size={14} />
-              )}
-            </span>
-            <span className="absolute inset-0 flex items-center justify-center opacity-0 group-hover/workspace-header:opacity-100 group-focus-visible/workspace-toggle:opacity-100">
-              {expanded ? (
-                <IconChevronDown size={14} />
-              ) : (
-                <IconChevronRight size={14} />
-              )}
-            </span>
-          </button>
-          <button
-            type="button"
-            className="h-7 min-w-0 flex-1 truncate pe-2 text-start text-[10px] font-semibold uppercase tracking-wider"
-            onClick={() => void handleSelectContentSpace(space)}
-          >
-            {space.name}
-          </button>
-          <button
-            type="button"
-            className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-background/60 hover:text-foreground disabled:opacity-50"
-            disabled={createDocument.isPending}
-            aria-label={`${t("sidebar.newPage")} — ${space.name}`}
-            onClick={() => void handleCreatePageInSpace(space)}
-          >
-            <IconPlus size={14} />
-          </button>
-        </div>
-        {expanded && (
-          <WorkspaceFilesSection
-            space={space}
-            selected={selected}
-            activeDocumentId={activeDocumentId}
-            expandedDocumentIds={expandedDocumentIdSet}
-            onDocumentExpandedChange={handleDocumentExpandedChange}
-            onActivate={(nextSpace, documentId) =>
-              void handleSelectContentSpace(nextSpace, documentId)
-            }
-            onCreateChildPage={(nextSpace, item) =>
-              void handleCreatePage(
-                item.document.id,
-                nextSpace.id,
-                undefined,
-                nextSpace.filesDatabaseId,
-              )
-            }
-            onCreateChildDatabase={(nextSpace, item) =>
-              void handleCreateDatabase(item.document.id, nextSpace.id)
-            }
-            onDeleteItem={(item) => void handleDelete(item.document.id)}
-            onToggleFavorite={(item) =>
-              handleToggleFavorite(item.document.id, !item.document.isFavorite)
-            }
-          />
-        )}
-      </div>
-    );
-  };
+  const renderWorkspaceRoot = (
+    space: ContentSpaceSummary,
+    reorder?: ContentFilesSidebarRenderReorder,
+  ) => (
+    <WorkspaceSidebarItem
+      space={space}
+      selected={selectedSpace?.id === space.id}
+      expanded={expandedWorkspaceIds.includes(space.id)}
+      reorder={reorder}
+      createDocumentPending={createDocument.isPending}
+      activeDocumentId={activeDocumentId}
+      expandedDocumentIds={expandedDocumentIdSet}
+      onDocumentExpandedChange={handleDocumentExpandedChange}
+      onToggleExpanded={() =>
+        updateExpandedWorkspaceIds((current) =>
+          toggleExpandedWorkspaceIds(current, space.id),
+        )
+      }
+      onActivate={(nextSpace, documentId) =>
+        void handleSelectContentSpace(nextSpace, documentId)
+      }
+      onCreatePageInSpace={(nextSpace) =>
+        void handleCreatePageInSpace(nextSpace)
+      }
+      onCreateChildPage={(nextSpace, item) =>
+        void handleCreatePage(
+          item.document.id,
+          nextSpace.id,
+          undefined,
+          nextSpace.filesDatabaseId,
+        )
+      }
+      onCreateChildDatabase={(nextSpace, item) =>
+        void handleCreateDatabase(item.document.id, nextSpace.id)
+      }
+      onDeleteItem={(item) => void handleDelete(item.document.id)}
+      onToggleFavorite={(item) =>
+        handleToggleFavorite(item.document.id, !item.document.isFavorite)
+      }
+    />
+  );
 
   const renderWorkspaceNavigation = () => (
     <div className="mb-2 min-w-0 overflow-x-hidden px-2">
@@ -1595,16 +1837,27 @@ export function DocumentSidebar({
                   },
                 });
               }}
-              renderItem={(item) => {
+              manualReorder={
+                moveWorkspaceItem.isPending
+                  ? undefined
+                  : {
+                      labels: sidebarReorderLabels,
+                      onReorder: handleWorkspaceReorder,
+                    }
+              }
+              renderItem={(item, reorder) => {
                 const space = contentSpaces.find(
                   (candidate) =>
                     candidate.catalogDocumentId === item.document.id,
                 );
                 return space
-                  ? renderWorkspaceRoot({
-                      ...space,
-                      name: item.document.title || space.name,
-                    })
+                  ? renderWorkspaceRoot(
+                      {
+                        ...space,
+                        name: item.document.title || space.name,
+                      },
+                      reorder,
+                    )
                   : null;
               }}
               scroll={false}
@@ -1978,14 +2231,14 @@ export function DocumentSidebar({
             </>
           ) : (
             <>
-              {/* Favorites */}
+              {/* Pinned */}
               {showFavorites && (
                 <div className="mb-2 min-w-0 px-2">
                   <div className="group/favorites flex h-7 w-full min-w-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent/40 hover:text-foreground">
                     <button
                       type="button"
                       aria-expanded={!collapsedSections.favorites}
-                      aria-label={`${collapsedSections.favorites ? t("sidebar.expand") : t("sidebar.collapse")} ${t("sidebar.favorites")}`}
+                      aria-label={`${collapsedSections.favorites ? t("sidebar.expand") : t("sidebar.collapse")} ${t("sidebar.pinned")}`}
                       className="group/favorites-toggle flex size-7 shrink-0 items-center justify-center rounded-md hover:bg-background/60"
                       onClick={() => toggleSection("favorites")}
                     >
@@ -2016,34 +2269,75 @@ export function DocumentSidebar({
                           "text-foreground",
                       )}
                     >
-                      {t("sidebar.favorites")}
+                      {t("sidebar.pinned")}
                     </Link>
                   </div>
-                  {!collapsedSections.favorites &&
-                    (isLoading
-                      ? renderTreeSkeleton()
-                      : favorites.map((doc) => (
-                          <FavoriteDocumentItem
-                            key={doc.id}
-                            document={doc}
-                            active={doc.id === activeDocumentId}
-                            sidebarWidth={favoriteRowWidth}
-                            onSelect={() => {
-                              handleOpenFavorite(doc);
-                              onNavigate?.();
-                            }}
-                            onCreateChildPage={() =>
-                              void handleCreatePage(doc.id)
-                            }
-                            onCreateChildDatabase={() =>
-                              void handleCreateDatabase(doc.id)
-                            }
-                            onRemoveFavorite={() =>
-                              handleToggleFavorite(doc.id, false)
-                            }
-                            onDelete={() => void handleDelete(doc.id)}
-                          />
-                        )))}
+                  {!collapsedSections.favorites ? (
+                    favoritesDatabase.isError ? (
+                      <QueryErrorState
+                        compact
+                        onRetry={() => void favoritesDatabase.refetch()}
+                        retrying={favoritesDatabase.isFetching}
+                      />
+                    ) : (
+                      <ContentFilesSidebarView
+                        data={favoritesDatabase.data}
+                        overrides={null}
+                        isLoading={favoritesDatabase.isLoading}
+                        activeDocumentId={activeDocumentId}
+                        manualReorder={
+                          movePinnedItem.isPending
+                            ? undefined
+                            : {
+                                labels: sidebarReorderLabels,
+                                onReorder: handlePinnedReorder,
+                              }
+                        }
+                        onOpenItem={(item) => {
+                          const document = documents.find(
+                            (candidate) => candidate.id === item.document.id,
+                          );
+                          const space = document
+                            ? contentSpaces.find(
+                                (candidate) =>
+                                  candidate.filesDocumentId ===
+                                  document.databaseMembership
+                                    ?.databaseDocumentId,
+                              )
+                            : undefined;
+                          if (!space || selectedSpace?.id === space.id) {
+                            onNavigate?.();
+                            return false;
+                          }
+                          void handleSelectContentSpace(
+                            space,
+                            item.document.id,
+                          );
+                          onNavigate?.();
+                          return true;
+                        }}
+                        onCreateChildPage={(item) =>
+                          void handleCreatePage(item.document.id)
+                        }
+                        onCreateChildDatabase={(item) =>
+                          void handleCreateDatabase(item.document.id)
+                        }
+                        onDeleteItem={(item) =>
+                          void handleDelete(item.document.id)
+                        }
+                        onToggleFavorite={(item) =>
+                          handleToggleFavorite(item.document.id, false)
+                        }
+                        scroll={false}
+                        labels={{
+                          noMatchesLabel: t("database.noRowsMatchThisView"),
+                          clearLabel: t("database.clearSearchAndFilters"),
+                          navigationLabel: t("sidebar.pinned"),
+                          untitledLabel: t("sidebar.untitled"),
+                        }}
+                      />
+                    )
+                  ) : null}
                 </div>
               )}