@btst/stack 2.12.2 → 3.0.0-rc.1

package/dist/packages/stack/src/plugins/kanban/client/components/pages/board-page.internal.cjs

@@ -4,7 +4,6 @@
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const LucideIcons = require('lucide-react');
-const sonner = require('sonner');
 const button = require('../../../../../../../ui/src/components/button.cjs');
 const dropdownMenu = require('../../../../../../../ui/src/components/dropdown-menu.cjs');
 const dialog = require('../../../../../../../ui/src/components/dialog.cjs');
@@ -19,22 +18,50 @@ const pageWrapper = require('../shared/page-wrapper.cjs');
 const emptyState = require('../shared/empty-state.cjs');
 
 function BoardPage({ boardId }) {
+  const t = context.useTranslate();
+  const notify = context.useNotify();
   const { data: board, error, refetch, isFetching } = kanbanHooks.useSuspenseBoard(boardId);
   if (error && !isFetching) {
     throw error;
   }
-  const {
-    Link: OverrideLink,
-    navigate: overrideNavigate,
-    taskDetailBottomSlot
-  } = context.usePluginOverrides("kanban");
-  const navigate = overrideNavigate || ((path) => {
+  const { taskDetailBottomSlot, localization } = context.usePluginOverrides("kanban");
+  const { router } = context.useStack();
+  const navigate = router?.navigate || ((path) => {
     window.location.href = path;
   });
-  const Link = OverrideLink || "a";
+  const Link = router?.Link ?? "a";
   const { deleteBoard, isDeleting } = kanbanHooks.useBoardMutations();
   const { deleteColumn, reorderColumns } = kanbanHooks.useColumnMutations();
   const { deleteTask, moveTask, reorderTasks } = kanbanHooks.useTaskMutations();
+  const { can: canMoveColumns, isPending: isCheckingColumnMove } = context.useCan({
+    resource: "kanban:column",
+    action: "update",
+    params: { boardId }
+  });
+  const { can: canMoveTasks, isPending: isCheckingTaskMove } = context.useCan({
+    resource: "kanban:task",
+    action: "update",
+    params: { boardId }
+  });
+  const { can: canCreateColumn, isPending: isCheckingCreateColumn } = context.useCan({
+    resource: "kanban:column",
+    action: "create",
+    params: { boardId }
+  });
+  const { can: canUpdateBoard, isPending: isCheckingUpdateBoard } = context.useCan({
+    resource: "kanban:board",
+    action: "update",
+    params: { id: boardId }
+  });
+  const { can: canDeleteBoard, isPending: isCheckingDeleteBoard } = context.useCan({
+    resource: "kanban:board",
+    action: "delete",
+    params: { id: boardId }
+  });
+  const showCreateColumn = !isCheckingCreateColumn && canCreateColumn;
+  const showUpdateBoard = !isCheckingUpdateBoard && canUpdateBoard;
+  const showDeleteBoard = !isCheckingDeleteBoard && canDeleteBoard;
+  const hasBoardActions = showCreateColumn || showUpdateBoard || showDeleteBoard;
   const [modalState, setModalState] = React.useState({ type: "none" });
   const computeKanbanData = React.useCallback(
     (columns) => {
@@ -73,10 +100,18 @@ function BoardPage({ boardId }) {
         }, 100);
       }
     } catch (error2) {
-      const message = error2 instanceof Error ? error2.message : "Failed to delete board";
-      sonner.toast.error(message);
+      const message = error2 instanceof Error ? error2.message : localization?.deleteBoardError ?? t("kanban.common.deleteBoardError", "Failed to delete board");
+      notify.error(message);
     }
-  }, [deleteBoard, boardId, navigate, closeModal]);
+  }, [
+    deleteBoard,
+    boardId,
+    navigate,
+    closeModal,
+    localization?.deleteBoardError,
+    notify,
+    t
+  ]);
   const handleKanbanChange = React.useCallback(
     async (newData) => {
       if (!board) return;
@@ -112,12 +147,12 @@ function BoardPage({ boardId }) {
                 hasOrderChanges = true;
               }
             }
-            const newTaskIds = new Set(tasks.map((t) => t.id));
-            const tasksRemoved = oldTasks.some((t) => !newTaskIds.has(t.id));
+            const newTaskIds = new Set(tasks.map((t2) => t2.id));
+            const tasksRemoved = oldTasks.some((t2) => !newTaskIds.has(t2.id));
             if (hasOrderChanges && !targetColumnsOfCrossMove.has(columnId) && !tasksRemoved) {
               columnsToReorder.set(
                 columnId,
-                tasks.map((t) => t.id)
+                tasks.map((t2) => t2.id)
               );
             }
           }
@@ -132,7 +167,7 @@ function BoardPage({ boardId }) {
             if (tasks) {
               await reorderTasks(
                 targetColumnId,
-                tasks.map((t) => t.id)
+                tasks.map((t2) => t2.id)
               );
             }
           }
@@ -163,11 +198,14 @@ function BoardPage({ boardId }) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       emptyState.EmptyState,
       {
-        title: "Board not found",
-        description: "The board you're looking for doesn't exist or you don't have access to it.",
+        title: localization?.boardNotFound ?? t("kanban.list.boardNotFound", "Board not found"),
+        description: localization?.boardNotFoundDescription ?? t(
+          "kanban.list.boardNotFoundDescription",
+          "The board you're looking for doesn't exist or you don't have access to it."
+        ),
         action: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: () => navigate("/pages/kanban"), children: [
           /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "mr-2 h-4 w-4" }),
-          "Back to Boards"
+          localization?.backToBoards ?? t("kanban.common.backToBoards", "Back to Boards")
         ] })
       }
     );
@@ -193,41 +231,41 @@ function BoardPage({ boardId }) {
               board.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1", children: board.description })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+          hasBoardActions && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { variant: "outline", children: [
               /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Settings, { className: "mr-2 h-4 w-4" }),
-              "Actions"
+              localization?.actions ?? t("kanban.common.actions", "Actions")
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
+              showCreateColumn && /* @__PURE__ */ jsxRuntime.jsxs(
                 dropdownMenu.DropdownMenuItem,
                 {
                   onClick: () => setModalState({ type: "addColumn" }),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "mr-2 h-4 w-4" }),
-                    "Add Column"
+                    localization?.addColumn ?? t("kanban.list.addColumn", "Add Column")
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
+              showUpdateBoard && /* @__PURE__ */ jsxRuntime.jsxs(
                 dropdownMenu.DropdownMenuItem,
                 {
                   onClick: () => setModalState({ type: "editBoard" }),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "mr-2 h-4 w-4" }),
-                    "Edit Board"
+                    localization?.editBoard ?? t("kanban.list.editBoard", "Edit Board")
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxRuntime.jsxs(
+              showDeleteBoard && (showCreateColumn || showUpdateBoard) && /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}),
+              showDeleteBoard && /* @__PURE__ */ jsxRuntime.jsxs(
                 dropdownMenu.DropdownMenuItem,
                 {
                   onClick: () => setModalState({ type: "deleteBoard" }),
                   className: "text-red-600 focus:text-red-600",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "mr-2 h-4 w-4" }),
-                    "Delete Board"
+                    localization?.deleteBoard ?? t("kanban.forms.deleteBoard", "Delete Board")
                   ]
                 }
               )
@@ -237,8 +275,11 @@ function BoardPage({ boardId }) {
         orderedColumns.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
           kanbanBoard.KanbanBoard,
           {
+            boardId,
             columns: orderedColumns,
             kanbanState,
+            canMoveColumns: !isCheckingColumnMove && canMoveColumns,
+            canMoveTasks: !isCheckingTaskMove && canMoveTasks,
             onKanbanChange: handleKanbanChange,
             onAddTask: (columnId) => setModalState({ type: "addTask", columnId }),
             onEditTask: (columnId, taskId) => setModalState({ type: "editTask", columnId, taskId }),
@@ -248,12 +289,23 @@ function BoardPage({ boardId }) {
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           emptyState.EmptyState,
           {
-            title: "No columns yet",
-            description: "Create your first column to start organizing tasks.",
-            action: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: () => setModalState({ type: "addColumn" }), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "mr-2 h-4 w-4" }),
-              "Add Column"
-            ] })
+            title: localization?.noColumns ?? t("kanban.common.noColumns", "No columns yet"),
+            description: localization?.noColumnsDescription ?? t(
+              "kanban.list.noColumnsDescription",
+              "Create your first column to start organizing tasks."
+            ),
+            action: /* @__PURE__ */ jsxRuntime.jsx(
+              context.CanAccess,
+              {
+                resource: "kanban:column",
+                action: "create",
+                params: { boardId },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: () => setModalState({ type: "addColumn" }), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "mr-2 h-4 w-4" }),
+                  localization?.addColumn ?? t("kanban.list.addColumn", "Add Column")
+                ] })
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -263,18 +315,18 @@ function BoardPage({ boardId }) {
             onOpenChange: (open) => !open && closeModal(),
             children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Add Column" }),
-                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Add a new column to this board." })
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: localization?.addColumn ?? t("kanban.list.addColumn", "Add Column") }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: localization?.addColumnDescription ?? t(
+                  "kanban.list.addColumnDescription",
+                  "Add a new column to this board."
+                ) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 columnForm.ColumnForm,
                 {
                   boardId,
                   onClose: closeModal,
-                  onSuccess: () => {
-                    closeModal();
-                    refetch();
-                  }
+                  onSuccess: closeModal
                 }
               )
             ] })
@@ -287,8 +339,11 @@ function BoardPage({ boardId }) {
             onOpenChange: (open) => !open && closeModal(),
             children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Edit Column" }),
-                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Update the column details." })
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: localization?.editColumn ?? t("kanban.list.editColumn", "Edit Column") }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: localization?.editColumnDescription ?? t(
+                  "kanban.list.editColumnDescription",
+                  "Update the column details."
+                ) })
               ] }),
               modalState.type === "editColumn" && /* @__PURE__ */ jsxRuntime.jsx(
                 columnForm.ColumnForm,
@@ -297,10 +352,7 @@ function BoardPage({ boardId }) {
                   columnId: modalState.columnId,
                   column: board.columns?.find((c) => c.id === modalState.columnId),
                   onClose: closeModal,
-                  onSuccess: () => {
-                    closeModal();
-                    refetch();
-                  }
+                  onSuccess: closeModal
                 }
               )
             ] })
@@ -313,11 +365,14 @@ function BoardPage({ boardId }) {
             onOpenChange: (open) => !open && closeModal(),
             children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: "Delete Column" }),
-                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: "Are you sure you want to delete this column? All tasks in this column will be permanently removed." })
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: localization?.deleteColumn ?? t("kanban.forms.deleteColumn", "Delete Column") }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: localization?.deleteColumnConfirm ?? t(
+                  "kanban.forms.deleteColumnConfirm",
+                  "Are you sure you want to delete this column? All tasks in this column will be permanently removed."
+                ) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: "Cancel" }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: localization?.cancel ?? t("kanban.common.cancel", "Cancel") }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   alertDialog.AlertDialogAction,
                   {
@@ -326,15 +381,17 @@ function BoardPage({ boardId }) {
                         try {
                           await deleteColumn(modalState.columnId);
                           closeModal();
-                          refetch();
                         } catch (error2) {
-                          const message = error2 instanceof Error ? error2.message : "Failed to delete column";
-                          sonner.toast.error(message);
+                          const message = error2 instanceof Error ? error2.message : localization?.deleteColumnError ?? t(
+                            "kanban.common.deleteColumnError",
+                            "Failed to delete column"
+                          );
+                          notify.error(message);
                         }
                       }
                     },
                     className: "bg-red-600 hover:bg-red-700",
-                    children: "Delete"
+                    children: localization?.delete ?? t("kanban.common.delete", "Delete")
                   }
                 )
               ] })
@@ -348,18 +405,15 @@ function BoardPage({ boardId }) {
             onOpenChange: (open) => !open && closeModal(),
             children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Edit Board" }),
-                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Update board details." })
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: localization?.editBoard ?? t("kanban.list.editBoard", "Edit Board") }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: localization?.editBoardDescription ?? t("kanban.list.editBoardDescription", "Update board details.") })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 boardForm.BoardForm,
                 {
                   board,
                   onClose: closeModal,
-                  onSuccess: () => {
-                    closeModal();
-                    refetch();
-                  }
+                  onSuccess: closeModal
                 }
               )
             ] })
@@ -372,18 +426,21 @@ function BoardPage({ boardId }) {
             onOpenChange: (open) => !open && closeModal(),
             children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: "Delete Board" }),
-                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: "Are you sure you want to delete this board? This action cannot be undone. All columns and tasks will be permanently removed." })
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: localization?.deleteBoard ?? t("kanban.forms.deleteBoard", "Delete Board") }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: localization?.deleteBoardConfirm ?? t(
+                  "kanban.forms.deleteBoardConfirm",
+                  "Are you sure you want to delete this board? This action cannot be undone. All columns and tasks will be permanently removed."
+                ) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: "Cancel" }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: localization?.cancel ?? t("kanban.common.cancel", "Cancel") }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   button.Button,
                   {
                     onClick: handleDeleteBoard,
                     disabled: isDeleting,
                     className: "bg-red-600 hover:bg-red-700",
-                    children: isDeleting ? "Deleting..." : "Delete"
+                    children: isDeleting ? localization?.deleting ?? t("kanban.common.deleting", "Deleting...") : localization?.delete ?? t("kanban.common.delete", "Delete")
                   }
                 )
               ] })
@@ -397,8 +454,8 @@ function BoardPage({ boardId }) {
             onOpenChange: (open) => !open && closeModal(),
             children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-w-3xl! max-h-screen overflow-y-auto", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Add Task" }),
-                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Create a new task." })
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: localization?.addTask ?? t("kanban.list.addTask", "Add Task") }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: localization?.addTaskDescription ?? t("kanban.list.addTaskDescription", "Create a new task.") })
               ] }),
               modalState.type === "addTask" && /* @__PURE__ */ jsxRuntime.jsx(
                 taskForm.TaskForm,
@@ -407,10 +464,7 @@ function BoardPage({ boardId }) {
                   boardId,
                   columns: board.columns || [],
                   onClose: closeModal,
-                  onSuccess: () => {
-                    closeModal();
-                    refetch();
-                  }
+                  onSuccess: closeModal
                 }
               )
             ] })
@@ -423,8 +477,8 @@ function BoardPage({ boardId }) {
             onOpenChange: (open) => !open && closeModal(),
             children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-w-3xl! max-h-screen overflow-y-auto", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Edit Task" }),
-                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Update task details." })
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: localization?.editTask ?? t("kanban.list.editTask", "Edit Task") }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: localization?.editTaskDescription ?? t("kanban.list.editTaskDescription", "Update task details.") })
               ] }),
               modalState.type === "editTask" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -433,27 +487,26 @@ function BoardPage({ boardId }) {
                     columnId: modalState.columnId,
                     boardId,
                     taskId: modalState.taskId,
-                    task: board.columns?.find((c) => c.id === modalState.columnId)?.tasks?.find((t) => t.id === modalState.taskId),
+                    task: board.columns?.find((c) => c.id === modalState.columnId)?.tasks?.find((t2) => t2.id === modalState.taskId),
                     columns: board.columns || [],
                     onClose: closeModal,
-                    onSuccess: () => {
-                      closeModal();
-                      refetch();
-                    },
+                    onSuccess: closeModal,
                     onDelete: async () => {
                       try {
                         await deleteTask(modalState.taskId);
                         closeModal();
-                        refetch();
                       } catch (error2) {
-                        const message = error2 instanceof Error ? error2.message : "Failed to delete task";
-                        sonner.toast.error(message);
+                        const message = error2 instanceof Error ? error2.message : localization?.deleteTaskError ?? t(
+                          "kanban.common.deleteTaskError",
+                          "Failed to delete task"
+                        );
+                        notify.error(message);
                       }
                     }
                   }
                 ),
                 taskDetailBottomSlot && (() => {
-                  const task = board.columns?.find((c) => c.id === modalState.columnId)?.tasks?.find((t) => t.id === modalState.taskId);
+                  const task = board.columns?.find((c) => c.id === modalState.columnId)?.tasks?.find((t2) => t2.id === modalState.taskId);
                   return task ? /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {