@agent-native/core 0.102.2 → 0.103.0

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

@@ -2,6 +2,7 @@ import {
   DevDatabaseLink,
   FeedbackButton,
   appPath,
+  setClientAppState,
   useActionMutation,
   useCodeMode,
   useT,
@@ -10,7 +11,11 @@ import {
   ExtensionSlot,
   ExtensionsSidebarSection,
 } from "@agent-native/core/client/extensions";
-import { OrgSwitcher } from "@agent-native/core/client/org";
+import {
+  OrgSwitcher,
+  useOrg,
+  useSwitchOrg,
+} from "@agent-native/core/client/org";
 import {
   closestCenter,
   DndContext,
@@ -45,10 +50,18 @@ import {
   IconTrash,
 } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
-import { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
+import { ContentFilesSidebarView } from "@/components/editor/database/sidebar";
 import { QueryErrorState } from "@/components/QueryErrorState";
 import { ThemeToggle } from "@/components/ThemeToggle";
 import {
@@ -76,11 +89,18 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import {
+  useContentDatabaseById,
+  useContentDatabasePersonalView,
+  useUpdateContentDatabasePersonalView,
   useCreateContentDatabase,
   useDeleteContentDatabase,
   useRestoreContentDatabase,
   useTrashedContentDatabases,
 } from "@/hooks/use-content-database";
+import {
+  useContentSpaces,
+  useEnsureContentSpaces,
+} from "@/hooks/use-content-spaces";
 import {
   useDocuments,
   useCreateDocument,
@@ -99,6 +119,10 @@ import {
 } from "./document-sidebar-sections";
 import { DocumentSidebarIcon, DocumentTreeItem } from "./DocumentTreeItem";
 import { NotionButton } from "./NotionButton";
+import {
+  contentSpaceForActiveOrg,
+  selectContentSpace,
+} from "./select-content-space";
 
 function nanoid(size = 12): string {
   const chars =
@@ -163,6 +187,7 @@ type CollapsedSectionsState = Record<SidebarSectionId, boolean>;
 
 const SIDEBAR_SECTION_COLLAPSE_STORAGE_KEY =
   "content-sidebar-collapsed-sections";
+const SELECTED_CONTENT_SPACE_STORAGE_KEY = "content-selected-space";
 
 const DEFAULT_COLLAPSED_SECTIONS: CollapsedSectionsState = {
   "local-files": false,
@@ -212,6 +237,79 @@ export function DocumentSidebar({
   const { data: trashedDatabases } = useTrashedContentDatabases();
   const { isCodeMode } = useCodeMode();
   const updateDocument = useUpdateDocument();
+  const contentSpacesQuery = useContentSpaces();
+  const ensureContentSpaces = useEnsureContentSpaces();
+  const { data: activeOrg } = useOrg();
+  const switchOrg = useSwitchOrg();
+  const contentSpaces = contentSpacesQuery.data?.spaces ?? [];
+  const spaceProvisionAttemptedRef = useRef(false);
+  useEffect(() => {
+    if (
+      contentSpacesQuery.isSuccess &&
+      !spaceProvisionAttemptedRef.current &&
+      !ensureContentSpaces.isPending
+    ) {
+      spaceProvisionAttemptedRef.current = true;
+      ensureContentSpaces.mutate({});
+    }
+  }, [
+    contentSpacesQuery.isSuccess,
+    ensureContentSpaces,
+    ensureContentSpaces.isPending,
+  ]);
+  const [storedSpaceId, setStoredSpaceId] = useLocalStorage<string | null>(
+    SELECTED_CONTENT_SPACE_STORAGE_KEY,
+    null,
+  );
+  const selectedSpace = contentSpaceForActiveOrg({
+    spaces: contentSpaces,
+    storedSpaceId,
+    activeOrgId: activeOrg?.orgId,
+  });
+  useEffect(() => {
+    if (selectedSpace && selectedSpace.id !== storedSpaceId) {
+      setStoredSpaceId(selectedSpace.id);
+    }
+  }, [selectedSpace, setStoredSpaceId, storedSpaceId]);
+  const handleSelectContentSpace = useCallback(
+    async (space: (typeof contentSpaces)[number]) => {
+      try {
+        await selectContentSpace({
+          space,
+          activeOrgId: activeOrg?.orgId,
+          switchOrg: (orgId) => switchOrg.mutateAsync(orgId),
+          persistSelection: setStoredSpaceId,
+        });
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : String(error));
+      }
+    },
+    [activeOrg?.orgId, setStoredSpaceId, switchOrg, t],
+  );
+  useEffect(() => {
+    if (!selectedSpace) return;
+    void setClientAppState(
+      "content-space",
+      {
+        spaceId: selectedSpace.id,
+        name: selectedSpace.name,
+        kind: selectedSpace.kind,
+        filesDatabaseId: selectedSpace.filesDatabaseId,
+      },
+      { requestSource: "content-sidebar" },
+    ).catch(() => {
+      // Space selection remains usable when best-effort agent context sync fails.
+    });
+  }, [selectedSpace]);
+  const filesDatabase = useContentDatabaseById(
+    selectedSpace?.filesDatabaseId ?? null,
+  );
+  const filesPersonalView = useContentDatabasePersonalView(
+    selectedSpace?.filesDatabaseId ?? null,
+  );
+  const updateFilesPersonalView = useUpdateContentDatabasePersonalView(
+    selectedSpace?.filesDatabaseId ?? null,
+  );
   const removeLocalFileSource = useActionMutation<
     RemoveLocalFileSourceResult,
     { sourceRootPath?: string | null }
@@ -283,10 +381,6 @@ export function DocumentSidebar({
   } = getDocumentSidebarSections(documents, treeDocuments);
   const localFileTree = buildDocumentTree(localSourceDocuments);
   const databaseTree = buildDocumentTree(databaseDocuments);
-  const privateTree = databaseTree.filter((node) => node.visibility !== "org");
-  const organizationTree = databaseTree.filter(
-    (node) => node.visibility === "org",
-  );
   const importedLocalFileCount = localFileMode
     ? 0
     : localSourceDocuments.filter(
@@ -348,6 +442,7 @@ export function DocumentSidebar({
           const created = await createDocument.mutateAsync({
             title: "",
             parentId: parentId ?? undefined,
+            spaceId: selectedSpace?.id,
           });
           queryClient.setQueryData(
             ["action", "get-document", { id: created.id }],
@@ -402,6 +497,7 @@ export function DocumentSidebar({
           id,
           title: "",
           parentId: parentId ?? undefined,
+          spaceId: selectedSpace?.id,
         });
         const nextId = created?.id || id;
         if (nextId !== id) {
@@ -444,6 +540,7 @@ export function DocumentSidebar({
       navigateToDocument,
       onNavigate,
       queryClient,
+      selectedSpace?.id,
     ],
   );
 
@@ -452,6 +549,7 @@ export function DocumentSidebar({
       try {
         const result = await createDatabase.mutateAsync({
           parentId: parentId ?? null,
+          spaceId: parentId ? undefined : selectedSpace?.id,
           title: t("editor.untitledDatabase"),
         });
         navigateToDocument(result.database.documentId);
@@ -463,7 +561,7 @@ export function DocumentSidebar({
         });
       }
     },
-    [createDatabase, navigateToDocument, onNavigate, t],
+    [createDatabase, navigateToDocument, onNavigate, selectedSpace?.id, t],
   );
 
   const handleDelete = useCallback(
@@ -723,71 +821,51 @@ export function DocumentSidebar({
     </SortableContext>
   );
 
-  const renderNewButton = () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+  const renderNewButton = () =>
+    selectedSpace ? (
+      <div className="flex items-center gap-1">
         <button
           type="button"
-          className="flex w-full items-center gap-2 rounded-md px-3 py-[5px] text-sm text-muted-foreground hover:bg-accent/50 hover:text-foreground"
-          disabled={createDocument.isPending || createDatabase.isPending}
-        >
-          <IconPlus size={14} className="shrink-0" />
-          <span>{t("sidebar.new")}</span>
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-44">
-        <DropdownMenuItem
+          className="flex min-w-0 flex-1 items-center gap-2 rounded-md px-3 py-[5px] text-sm text-muted-foreground hover:bg-accent/50 hover:text-foreground"
           disabled={createDocument.isPending}
           onClick={() => void handleCreatePage()}
         >
-          <IconFileText className="me-2 size-4" />
-          {t("sidebar.page")}
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          disabled={createDatabase.isPending}
-          onClick={() => void handleCreateDatabase(null)}
-        >
-          <IconDatabase className="me-2 size-4" />
-          {t("sidebar.database")}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-
-  const renderCollapsedNewButton = () => (
-    <DropdownMenu>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DropdownMenuTrigger asChild>
+          <IconPlus size={14} className="shrink-0" />
+          <span>{t("sidebar.newPage")}</span>
+        </button>
+        <Tooltip>
+          <TooltipTrigger asChild>
             <button
               type="button"
-              className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-accent text-muted-foreground hover:text-foreground"
-              disabled={createDocument.isPending || createDatabase.isPending}
+              className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+              disabled={createDatabase.isPending}
+              aria-label={t("sidebar.newDatabase")}
+              onClick={() => void handleCreateDatabase()}
             >
-              <IconPlus size={16} />
+              <IconDatabase size={14} />
             </button>
-          </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>{t("sidebar.newDatabase")}</TooltipContent>
+        </Tooltip>
+      </div>
+    ) : null;
+
+  const renderCollapsedNewButton = () =>
+    selectedSpace ? (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-accent text-muted-foreground hover:text-foreground"
+            disabled={createDocument.isPending}
+            onClick={() => void handleCreatePage()}
+          >
+            <IconPlus size={16} />
+          </button>
         </TooltipTrigger>
-        <TooltipContent>{t("sidebar.new")}</TooltipContent>
+        <TooltipContent>{t("sidebar.newPage")}</TooltipContent>
       </Tooltip>
-      <DropdownMenuContent align="start" className="w-44">
-        <DropdownMenuItem
-          disabled={createDocument.isPending}
-          onClick={() => void handleCreatePage()}
-        >
-          <IconFileText className="me-2 size-4" />
-          {t("sidebar.page")}
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          disabled={createDatabase.isPending}
-          onClick={() => void handleCreateDatabase(null)}
-        >
-          <IconDatabase className="me-2 size-4" />
-          {t("sidebar.database")}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
+    ) : null;
 
   const renderLocalFilesNavButton = () => (
     <Link
@@ -987,6 +1065,73 @@ export function DocumentSidebar({
     );
   };
 
+  const renderWorkspaceNavigation = () => (
+    <div className="mb-2 space-y-1 px-2">
+      <div className="px-1 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+        {t("sidebar.workspaces")}
+      </div>
+      {contentSpaces.map((space) => (
+        <button
+          key={space.id}
+          type="button"
+          className={cn(
+            "flex h-8 w-full min-w-0 items-center rounded-md px-2 text-sm",
+            selectedSpace?.id === space.id
+              ? "bg-accent text-accent-foreground"
+              : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+          )}
+          onClick={() => void handleSelectContentSpace(space)}
+          disabled={switchOrg.isPending}
+        >
+          <span className="min-w-0 flex-1 truncate text-start">
+            {space.name}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+
+  const renderFilesDatabase = () => (
+    <div className="min-w-0">
+      <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+        {t("sidebar.files")}
+      </div>
+      {selectedSpace ? (
+        <>
+          <ContentFilesSidebarView
+            data={filesDatabase.data}
+            overrides={filesPersonalView.data?.overrides}
+            isLoading={filesDatabase.isLoading || filesPersonalView.isLoading}
+            onSelectView={(viewId) => {
+              if (!selectedSpace) return;
+              const current = filesPersonalView.data?.overrides;
+              updateFilesPersonalView.mutate({
+                databaseId: selectedSpace.filesDatabaseId,
+                overrides: {
+                  version: current?.version ?? 1,
+                  activeViewId: viewId,
+                  views: current?.views ?? [],
+                },
+              });
+            }}
+            labels={{
+              loadingLabel: t("sidebar.loadingFiles"),
+              noMatchesLabel: t("database.noRowsMatchThisView"),
+              clearLabel: t("database.clearSearchAndFilters"),
+              navigationLabel: t("sidebar.files"),
+              untitledLabel: t("sidebar.untitled"),
+            }}
+          />
+          {renderNewButton()}
+        </>
+      ) : (
+        <div className="px-3 py-4 text-center text-sm text-muted-foreground">
+          {t("sidebar.noWorkspaces")}
+        </div>
+      )}
+    </div>
+  );
+
   const renderTrashSection = () => {
     if (trashItems.length === 0) return null;
     const collapsed = collapsedSections.trash;
@@ -1309,58 +1454,9 @@ export function DocumentSidebar({
                 </div>
               )}
 
-              {localFileMode ? (
-                <>
-                  {renderTreeSection({
-                    id: "local-files",
-                    label: t("sidebar.localFiles"),
-                    nodes: localFileTree,
-                    emptyLabel: t("sidebar.noFilesYet"),
-                    headerActions: renderLocalFilesSectionActions(),
-                    footer: renderNewButton(),
-                  })}
-                  {databaseTree.length > 0
-                    ? renderTreeSection({
-                        id: "shared-copies",
-                        label: t("sidebar.sharedCopies"),
-                        nodes: databaseTree,
-                        emptyLabel: t("sidebar.noSharedCopiesYet"),
-                        className: "mt-3",
-                      })
-                    : null}
-                  {renderTrashSection()}
-                </>
-              ) : (
-                <>
-                  {localFileTree.length > 0 &&
-                    renderTreeSection({
-                      id: "local-files",
-                      label: t("sidebar.localFiles"),
-                      nodes: localFileTree,
-                      emptyLabel: t("sidebar.noLocalFilesYet"),
-                      className: "mb-2",
-                      headerActions: renderLocalFilesSectionActions(),
-                    })}
-
-                  {renderTreeSection({
-                    id: "private",
-                    label: t("sidebar.private"),
-                    nodes: privateTree,
-                    emptyLabel: t("sidebar.noPrivatePagesYet"),
-                    footer: renderNewButton(),
-                  })}
-
-                  {!isLoading &&
-                    renderTreeSection({
-                      id: "organization",
-                      label: t("sidebar.organization"),
-                      nodes: organizationTree,
-                      emptyLabel: t("sidebar.noOrganizationPagesYet"),
-                      className: "mt-3",
-                    })}
-                  {renderTrashSection()}
-                </>
-              )}
+              {renderWorkspaceNavigation()}
+              {renderFilesDatabase()}
+              {renderTrashSection()}
             </>
           )}
         </div>

package/corpus/templates/content/app/components/sidebar/select-content-space.ts

@@ -0,0 +1,31 @@
+import type { ContentSpaceSummary } from "@/hooks/use-content-spaces";
+
+export function contentSpaceForActiveOrg(args: {
+  spaces: ContentSpaceSummary[];
+  storedSpaceId: string | null;
+  activeOrgId: string | null | undefined;
+}) {
+  if (args.activeOrgId === undefined) return null;
+  const stored = args.spaces.find((space) => space.id === args.storedSpaceId);
+  if (stored?.orgId === args.activeOrgId) return stored;
+  const matching = args.spaces.filter(
+    (space) => space.orgId === args.activeOrgId,
+  );
+  return args.activeOrgId === null
+    ? (matching.find((space) => space.kind === "personal") ??
+        matching[0] ??
+        null)
+    : (matching[0] ?? null);
+}
+
+export async function selectContentSpace(args: {
+  space: ContentSpaceSummary;
+  activeOrgId: string | null | undefined;
+  switchOrg: (orgId: string | null) => Promise<unknown>;
+  persistSelection: (spaceId: string) => void;
+}) {
+  if (args.activeOrgId !== args.space.orgId) {
+    await args.switchOrg(args.space.orgId);
+  }
+  args.persistSelection(args.space.id);
+}

package/corpus/templates/content/app/hooks/use-content-database.ts

@@ -52,6 +52,10 @@ export function contentDatabaseQueryKey(documentId: string) {
   return ["action", "get-content-database", { documentId }] as const;
 }
 
+export function contentDatabaseByIdQueryKey(databaseId: string) {
+  return ["action", "get-content-database", { databaseId }] as const;
+}
+
 function isContentDatabaseQueryForDocument(
   queryKey: readonly unknown[],
   documentId: string,
@@ -454,6 +458,18 @@ export function useContentDatabase(documentId: string | null, limit?: number) {
   );
 }
 
+export function useContentDatabaseById(databaseId: string | null) {
+  return useActionQuery<ContentDatabaseResponse>(
+    "get-content-database",
+    databaseId ? { databaseId } : undefined,
+    {
+      enabled: !!databaseId,
+      retry: false,
+      placeholderData: (previous) => previous,
+    },
+  );
+}
+
 export function useCreateContentDatabase(documentId: string | null) {
   const queryClient = useQueryClient();
   return useActionMutation<ContentDatabaseResponse, CreateDatabaseRequest>(

package/corpus/templates/content/app/hooks/use-content-spaces.ts

@@ -0,0 +1,39 @@
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import { useQueryClient } from "@tanstack/react-query";
+
+export type ContentSpaceSummary = {
+  id: string;
+  name: string;
+  kind: string;
+  filesDatabaseId: string;
+  orgId: string | null;
+  role: "owner" | "editor" | "viewer";
+  catalogItemId: string;
+  catalogDocumentId: string;
+};
+
+export type ListContentSpacesResponse = {
+  catalogDatabaseId: string;
+  spaces: ContentSpaceSummary[];
+};
+
+export function useContentSpaces() {
+  return useActionQuery<ListContentSpacesResponse>(
+    "list-content-spaces",
+    undefined,
+    {
+      placeholderData: (previous) => previous,
+    },
+  );
+}
+
+export function useEnsureContentSpaces() {
+  const queryClient = useQueryClient();
+  return useActionMutation("ensure-content-spaces", {
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["action", "list-content-spaces"],
+      });
+    },
+  });
+}

package/corpus/templates/content/app/i18n/zh-TW.ts

@@ -85,6 +85,8 @@ const messages = {
     heading2: "標題 2",
     heading3: "標題 3",
     heading4: "標題 4",
+    heading5: "標題 5",
+    heading6: "標題 6",
     link: "連結",
     comment: "評論",
     pasteLink: "貼上連結...",
@@ -414,6 +416,8 @@ const messages = {
       heading2Description: "中標題",
       heading3Description: "小標題",
       heading4Description: "副標題",
+      heading5Description: "較小標題",
+      heading6Description: "最小標題",
       image: "圖片",
       imageDescription: "上傳或嵌入圖片",
       inlineEquation: "行內公式",
@@ -1008,6 +1012,8 @@ const messages = {
     summaryUnchanged: "{{count}} 個未更改",
     summarySkipped: "已跳過 {{count}} 個",
     summaryErrors: "{{count}} 個錯誤",
+    summaryConflicts: "{{count}} 個衝突",
+    conflictNeedsReview: "Content 和資料夾都已變更；需要進行審查。",
     pageTitle: "本機檔案",
     foldersRemembered: "已記住的資料夾",
     linkedCount: "已連結 {{count}} 個",
@@ -1110,7 +1116,10 @@ const messages = {
       "「{{title}}」及其所有子頁面將被永久刪除。此操作無法復原。",
     deletePageQuestion: "刪除頁面？",
     localFiles: "本機檔案",
+    files: "檔案",
+    loadingFiles: "正在載入檔案…",
     new: "新增",
+    newDatabase: "新增資料庫",
     newPage: "新頁面",
     nextStep: "下一步",
     notionConfigureOAuthAuthorize: "設定 OAuth，然後授權你的工作區。",
@@ -1139,6 +1148,7 @@ const messages = {
     notionSyncDocumentsDescription: "與 Notion 工作區同步檔案。",
     notionUploadCredentialsJson: "上傳憑證 JSON",
     noFilesYet: "還沒有檔案",
+    noWorkspaces: "還沒有工作區",
     noLocalFilesYet: "還沒有本機檔案",
     noOrganizationPagesYet: "還沒有組織頁面",
     noPagesFound: "未找到頁面",
@@ -1160,6 +1170,7 @@ const messages = {
     trash: "垃圾桶",
     favorites: "釘選",
     untitled: "無標題",
+    workspaces: "工作區",
   },
 };