@agent-native/core 0.77.3 → 0.77.6

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

@@ -1,5 +1,9 @@
-import { useDroppable } from "@dnd-kit/core";
-import { useSortable } from "@dnd-kit/sortable";
+import { useT } from "@agent-native/core/client";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import type { DocumentTreeNode } from "@shared/api";
 import {
@@ -38,11 +42,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
-import {
-  documentSection,
-  type SidebarDocumentSection,
-} from "./document-sidebar-dnd";
-
 interface DocumentTreeItemProps {
   node: DocumentTreeNode;
   depth: number;
@@ -51,12 +50,9 @@ interface DocumentTreeItemProps {
   expandedIds: Set<string>;
   onToggleExpanded: (id: string) => void;
   onSelect: (id: string) => void;
-  onCreateChildPage: (parentId: string) => void;
-  onCreateChildDatabase: (parentId: string) => void;
+  onCreateChild: (parentId: string) => void;
   onDelete: (id: string) => void;
   onToggleFavorite: (id: string, isFavorite: boolean) => void;
-  activeDropTargetId: string | null;
-  activeDragSection: SidebarDocumentSection | null;
 }
 
 export function getDocumentSidebarIconKind(
@@ -98,13 +94,11 @@ export function DocumentTreeItem({
   expandedIds,
   onToggleExpanded,
   onSelect,
-  onCreateChildPage,
-  onCreateChildDatabase,
+  onCreateChild,
   onDelete,
   onToggleFavorite,
-  activeDropTargetId,
-  activeDragSection,
 }: DocumentTreeItemProps) {
+  const t = useT();
   const expanded = expandedIds.has(node.id);
   const hasChildren = node.children.length > 0;
   const isActive = node.id === activeId;
@@ -117,10 +111,6 @@ export function DocumentTreeItem({
     node.accessRole === "admin";
   const hasMenuActions = canEdit || canManage;
   const canCreateChild = canEdit && !isLocalFileNode;
-  const canDropOnNode =
-    canEdit &&
-    !isLocalFileNode &&
-    (!activeDragSection || activeDragSection === documentSection(node));
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const indent = depth * 12 + 12;
   const rowWidth =
@@ -138,24 +128,6 @@ export function DocumentTreeItem({
     id: node.id,
     disabled: !canEdit || isLocalFileNode,
   });
-  const beforeDropId = `before:${node.id}`;
-  const insideDropId = `inside:${node.id}`;
-  const afterDropId = `after:${node.id}`;
-  const { setNodeRef: setBeforeDropRef } = useDroppable({
-    id: beforeDropId,
-    disabled: !canDropOnNode,
-  });
-  const { setNodeRef: setInsideDropRef } = useDroppable({
-    id: insideDropId,
-    disabled: !canDropOnNode,
-  });
-  const { setNodeRef: setAfterDropRef } = useDroppable({
-    id: afterDropId,
-    disabled: !canDropOnNode,
-  });
-  const isBeforeDropTarget = activeDropTargetId === beforeDropId;
-  const isInsideDropTarget = activeDropTargetId === insideDropId;
-  const isAfterDropTarget = activeDropTargetId === afterDropId;
 
   return (
     <div
@@ -174,8 +146,6 @@ export function DocumentTreeItem({
           "group relative flex min-w-56 items-center gap-1.5 rounded-md py-[5px] pe-2 text-sm cursor-pointer select-none",
           canEdit && !isLocalFileNode && "cursor-grab active:cursor-grabbing",
           isDragging && "bg-accent/70 text-accent-foreground shadow-sm",
-          isInsideDropTarget &&
-            "bg-primary/20 text-foreground ring-2 ring-inset ring-primary/45",
           isActive
             ? "bg-accent text-accent-foreground"
             : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -193,33 +163,6 @@ export function DocumentTreeItem({
         }}
         aria-expanded={hasChildren ? expanded : undefined}
       >
-        <span
-          ref={setBeforeDropRef}
-          aria-hidden="true"
-          className="pointer-events-none absolute inset-x-0 top-0 h-1/3"
-        />
-        <span
-          ref={setInsideDropRef}
-          aria-hidden="true"
-          className="pointer-events-none absolute inset-x-0 top-1/3 h-1/3"
-        />
-        <span
-          ref={setAfterDropRef}
-          aria-hidden="true"
-          className="pointer-events-none absolute inset-x-0 bottom-0 h-1/3"
-        />
-        {isBeforeDropTarget && (
-          <span
-            aria-hidden="true"
-            className="pointer-events-none absolute left-2 right-2 top-0 h-0.5 rounded-full bg-primary"
-          />
-        )}
-        {isAfterDropTarget && (
-          <span
-            aria-hidden="true"
-            className="pointer-events-none absolute bottom-0 left-2 right-2 h-0.5 rounded-full bg-primary"
-          />
-        )}
         <span className="relative flex-shrink-0 w-5 h-5">
           <span
             className={cn(
@@ -305,7 +248,7 @@ export function DocumentTreeItem({
                     }}
                   >
                     <IconTrash size={14} className="me-2" />
-                    Delete
+                    {t("database.delete")}
                   </DropdownMenuItem>
                 )}
               </DropdownMenuContent>
@@ -313,48 +256,29 @@ export function DocumentTreeItem({
           )}
 
           {canCreateChild && (
-            <DropdownMenu>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <DropdownMenuTrigger asChild>
-                    <button
-                      type="button"
-                      className="w-7 h-7 flex items-center justify-center rounded hover:bg-accent"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <IconPlus size={14} />
-                    </button>
-                  </DropdownMenuTrigger>
-                </TooltipTrigger>
-                <TooltipContent>Add child</TooltipContent>
-              </Tooltip>
-              <DropdownMenuContent align="start" className="w-44">
-                <DropdownMenuItem
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onCreateChildPage(node.id);
-                  }}
-                >
-                  <IconFileText className="mr-2 size-4" />
-                  Page
-                </DropdownMenuItem>
-                <DropdownMenuItem
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  className="w-7 h-7 flex items-center justify-center rounded hover:bg-accent"
                   onClick={(e) => {
                     e.stopPropagation();
-                    onCreateChildDatabase(node.id);
+                    onCreateChild(node.id);
                   }}
                 >
-                  <IconDatabase className="mr-2 size-4" />
-                  Database
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+                  <IconPlus size={14} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>{t("sidebar.addSubPage")}</TooltipContent>
+            </Tooltip>
           )}
         </div>
       </div>
 
       {hasChildren && expanded && (
-        <>
+        <SortableContext
+          items={node.children.map((child) => child.id)}
+          strategy={verticalListSortingStrategy}
+        >
           {node.children.map((child) => (
             <DocumentTreeItem
               key={child.id}
@@ -365,33 +289,33 @@ export function DocumentTreeItem({
               expandedIds={expandedIds}
               onToggleExpanded={onToggleExpanded}
               onSelect={onSelect}
-              onCreateChildPage={onCreateChildPage}
-              onCreateChildDatabase={onCreateChildDatabase}
+              onCreateChild={onCreateChild}
               onDelete={onDelete}
               onToggleFavorite={onToggleFavorite}
-              activeDropTargetId={activeDropTargetId}
-              activeDragSection={activeDragSection}
             />
           ))}
-        </>
+        </SortableContext>
       )}
 
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete page?</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("sidebar.deletePageQuestion")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              &ldquo;{node.title || "Untitled"}&rdquo; and all its sub-pages
-              will be permanently deleted. This cannot be undone.
+              {t("sidebar.deletePageDescription", {
+                title: node.title || t("sidebar.untitled"),
+              })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("comments.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
               onClick={() => onDelete(node.id)}
             >
-              Delete
+              {t("database.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

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

@@ -1,4 +1,4 @@
-import { agentNativePath, appApiPath } from "@agent-native/core/client";
+import { agentNativePath, appApiPath, useT } from "@agent-native/core/client";
 import {
   IconExternalLink,
   IconCheck,
@@ -48,28 +48,24 @@ function NotionIcon({ className }: { className?: string }) {
 
 const OAUTH_STEPS = [
   {
-    title: "Create a Notion integration",
-    description:
-      'Go to Notion\'s developer portal, click "New integration", name it (e.g. "My Docs Sync"), and select your workspace.',
+    titleKey: "sidebar.notionCreateIntegration",
+    descriptionKey: "sidebar.notionCreateIntegrationDescription",
     url: "https://www.notion.so/profile/integrations",
-    linkText: "Open Notion Integrations",
+    linkTextKey: "sidebar.notionOpenIntegrations",
   },
   {
-    title: "Configure as public integration",
-    description:
-      'Under "Distribution", toggle the integration to "Public". Then under "OAuth Domain & URIs", add this redirect URI:',
+    titleKey: "sidebar.notionConfigurePublicIntegration",
+    descriptionKey: "sidebar.notionConfigurePublicIntegrationDescription",
     showRedirectUri: true,
   },
   {
-    title: "Copy OAuth credentials",
-    description:
-      'Under "OAuth Domain & URIs", copy the OAuth client ID and client secret. Then upload the JSON file or paste them below.',
+    titleKey: "sidebar.notionCopyOAuthCredentials",
+    descriptionKey: "sidebar.notionCopyOAuthCredentialsDescription",
     showUpload: true,
   },
   {
-    title: "Connect your workspace",
-    description:
-      "Click the button below to authorize access to your Notion workspace. You'll be redirected to Notion to grant permission.",
+    titleKey: "sidebar.notionConnectWorkspace",
+    descriptionKey: "sidebar.notionConnectWorkspaceDescription",
     showConnect: true,
   },
 ];
@@ -84,6 +80,7 @@ interface EnvKeyStatus {
 // ─── Component ──────────────────────────────────────────────────────────────
 
 export function NotionButton() {
+  const t = useT();
   const { data: connection, refetch } = useNotionConnection();
   const disconnectNotion = useDisconnectNotion();
   const [open, setOpen] = useState(false);
@@ -134,7 +131,7 @@ export function NotionButton() {
         setShowWizard(true);
         return;
       }
-      toast.error("Notion OAuth is not configured.");
+      toast.error(t("sidebar.notionOAuthNotConfigured"));
       return;
     }
     window.open(connection.authUrl, "_blank");
@@ -170,9 +167,13 @@ export function NotionButton() {
   async function handleDisconnect() {
     try {
       await disconnectNotion.mutateAsync();
-      toast.success("Disconnected Notion workspace.");
+      toast.success(t("sidebar.notionDisconnectedWorkspace"));
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Failed to disconnect.");
+      toast.error(
+        err instanceof Error
+          ? err.message
+          : t("sidebar.notionDisconnectFailed"),
+      );
     }
   }
 
@@ -184,7 +185,7 @@ export function NotionButton() {
       const clientId = json.client_id || json.oauth_client_id;
       const clientSecret = json.client_secret || json.oauth_client_secret;
       if (!clientId || !clientSecret) {
-        throw new Error("Could not find client_id and client_secret in JSON");
+        throw new Error(t("sidebar.notionCredentialsNotFound"));
       }
       const res = await fetch(agentNativePath("/_agent-native/env-vars"), {
         method: "POST",
@@ -198,13 +199,15 @@ export function NotionButton() {
       });
       if (!res.ok) {
         const data = await res.json().catch(() => ({}));
-        throw new Error(data.error || "Failed to save credentials");
+        throw new Error(data.error || t("sidebar.notionCredentialsSaveFailed"));
       }
       await fetchEnvStatus();
-      toast.success("Credentials saved. Reloading...");
+      toast.success(t("sidebar.notionCredentialsSavedReloading"));
       setTimeout(() => window.location.reload(), 1500);
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Failed to parse JSON");
+      toast.error(
+        err instanceof Error ? err.message : t("sidebar.notionParseJsonFailed"),
+      );
     } finally {
       setSaving(false);
     }
@@ -226,7 +229,7 @@ export function NotionButton() {
               </button>
             </PopoverTrigger>
           </TooltipTrigger>
-          <TooltipContent>Connect Notion</TooltipContent>
+          <TooltipContent>{t("sidebar.notionConnect")}</TooltipContent>
         </Tooltip>
         <PopoverContent
           side="right"
@@ -238,7 +241,9 @@ export function NotionButton() {
           <div className="p-4 border-b border-border">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <h3 className="text-sm font-semibold">Connect Notion</h3>
+                <h3 className="text-sm font-semibold">
+                  {t("sidebar.notionConnect")}
+                </h3>
               </div>
               <button
                 className="text-xs text-muted-foreground hover:text-foreground"
@@ -247,11 +252,11 @@ export function NotionButton() {
                   setOpen(false);
                 }}
               >
-                Cancel
+                {t("comments.cancel")}
               </button>
             </div>
             <p className="mt-1 text-xs text-muted-foreground">
-              Configure OAuth, then authorize your workspace.
+              {t("sidebar.notionConfigureOAuthAuthorize")}
             </p>
           </div>
 
@@ -299,14 +304,14 @@ export function NotionButton() {
                             : "text-muted-foreground",
                       )}
                     >
-                      {step.title}
+                      {t(step.titleKey)}
                     </span>
                   </button>
 
                   {active && (
                     <div className="mt-2 ms-5 space-y-2">
                       <p className="text-xs text-muted-foreground leading-relaxed">
-                        {step.description}
+                        {t(step.descriptionKey)}
                       </p>
 
                       {step.url && (
@@ -317,7 +322,7 @@ export function NotionButton() {
                           className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
                         >
                           <IconExternalLink size={11} />
-                          {step.linkText}
+                          {step.linkTextKey ? t(step.linkTextKey) : null}
                         </a>
                       )}
 
@@ -330,10 +335,10 @@ export function NotionButton() {
                             className="shrink-0 rounded px-1.5 py-1 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent"
                             onClick={() => {
                               navigator.clipboard.writeText(redirectUri);
-                              toast.success("Copied!");
+                              toast.success(t("sidebar.copied"));
                             }}
                           >
-                            Copy
+                            {t("sidebar.copy")}
                           </button>
                         </div>
                       )}
@@ -342,7 +347,9 @@ export function NotionButton() {
                         <div className="space-y-2">
                           <label className="flex items-center gap-2 cursor-pointer rounded-md border border-dashed border-border px-3 py-2 text-xs text-muted-foreground hover:border-foreground/30 hover:text-foreground">
                             <IconUpload size={14} />
-                            {saving ? "Saving..." : "Upload credentials JSON"}
+                            {saving
+                              ? t("sidebar.saving")
+                              : t("sidebar.notionUploadCredentialsJson")}
                             <input
                               type="file"
                               accept=".json"
@@ -387,14 +394,14 @@ export function NotionButton() {
                           className="w-full"
                         >
                           {oauthConfigured ? (
-                            "Connect Notion Workspace"
+                            t("sidebar.notionConnectWorkspace")
                           ) : (
                             <>
                               <IconLoader2
                                 size={12}
                                 className="me-1 animate-spin"
                               />
-                              Complete steps above first
+                              {t("sidebar.completeStepsAboveFirst")}
                             </>
                           )}
                         </Button>
@@ -407,7 +414,7 @@ export function NotionButton() {
                           className="text-xs"
                           onClick={() => setCurrentStep(i + 1)}
                         >
-                          Next step
+                          {t("sidebar.nextStep")}
                         </Button>
                       )}
                     </div>
@@ -442,8 +449,10 @@ export function NotionButton() {
         </TooltipTrigger>
         <TooltipContent>
           {isConnected
-            ? `Notion: ${connection?.workspaceName ?? "Connected"}`
-            : "Connect Notion"}
+            ? t("sidebar.notionConnectedTooltip", {
+                name: connection?.workspaceName ?? t("sidebar.connected"),
+              })
+            : t("sidebar.notionConnect")}
         </TooltipContent>
       </Tooltip>
       <PopoverContent
@@ -463,7 +472,7 @@ export function NotionButton() {
                     {connection?.workspaceName ?? "Notion"}
                   </p>
                   <p className="text-[10px] text-muted-foreground">
-                    Connected via OAuth
+                    {t("sidebar.connectedViaOAuth")}
                   </p>
                 </div>
               </div>
@@ -472,12 +481,12 @@ export function NotionButton() {
               <button
                 onClick={() => {
                   refetch();
-                  toast.success("Synced");
+                  toast.success(t("sidebar.synced"));
                 }}
                 className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent rounded-md"
               >
                 <IconRefresh size={12} />
-                Refresh connection
+                {t("sidebar.refreshConnection")}
               </button>
               <button
                 onClick={() => {
@@ -487,7 +496,7 @@ export function NotionButton() {
                 className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-destructive hover:bg-destructive/10 rounded-md"
               >
                 <IconPlugOff size={12} />
-                Disconnect workspace
+                {t("sidebar.disconnectWorkspace")}
               </button>
             </div>
           </>
@@ -495,10 +504,12 @@ export function NotionButton() {
           <div className="p-4">
             <div className="flex items-center gap-2 mb-2">
               <NotionIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
-              <p className="text-sm font-medium">Connect Notion</p>
+              <p className="text-sm font-medium">
+                {t("sidebar.notionConnect")}
+              </p>
             </div>
             <p className="text-xs text-muted-foreground mb-3">
-              Sync documents with your Notion workspace.
+              {t("sidebar.notionSyncDocumentsDescription")}
             </p>
             <Button
               size="sm"
@@ -511,7 +522,9 @@ export function NotionButton() {
                 }
               }}
             >
-              {needsCredentials ? "Set up Notion" : "Connect Workspace"}
+              {needsCredentials
+                ? t("editor.toolbar.setUpNotion")
+                : t("sidebar.connectWorkspace")}
             </Button>
           </div>
         )}