@btst/stack 3.0.0-rc.1 → 3.0.0-rc.3

package/src/plugins/kanban/client/components/pages/boards-list-page.internal.tsx

@@ -11,15 +11,17 @@ import {
 } from "@workspace/ui/components/card";
 import { useSuspenseBoards } from "../../hooks/kanban-hooks";
 import {
-	CanAccess,
+	PermissionAccess,
 	usePluginOverrides,
-	useStack,
+	usePluginSiteNavigation,
 	useTranslate,
 } from "@btst/stack/context";
 import type { KanbanPluginOverrides } from "../../overrides";
 import { EmptyState } from "../shared/empty-state";
 import { PageWrapper } from "../shared/page-wrapper";
 import { format } from "date-fns";
+import { kanbanPermissions } from "../../../permissions";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 export function BoardsListPage() {
 	const t = useTranslate();
@@ -29,17 +31,12 @@ export function BoardsListPage() {
 	if (error && !isFetching) {
 		throw error;
 	}
-	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
-	const { router } = useStack();
-	const Link = router?.Link ?? "a";
-	const navigate =
-		router?.navigate ||
-		((path: string) => {
-			window.location.href = path;
-		});
+	const { localization } =
+		usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
+	const { Link, navigate, resolve } = usePluginSiteNavigation(KANBAN_PLUGIN_ID);
 
 	const handleNewBoard = () => {
-		navigate("/pages/kanban/new");
+		void navigate("kanban", "new");
 	};
 
 	return (
@@ -55,49 +52,61 @@ export function BoardsListPage() {
 							t("kanban.list.manageProjects", "Manage your projects and tasks")}
 					</p>
 				</div>
-				<CanAccess resource="kanban:board" action="create">
+				<PermissionAccess permission={kanbanPermissions.board.create()}>
 					<Button onClick={handleNewBoard}>
 						<Plus className="mr-2 h-4 w-4" />
 						{localization?.newBoard ?? t("kanban.list.newBoard", "New Board")}
 					</Button>
-				</CanAccess>
+				</PermissionAccess>
 			</div>
 
 			{boards.length > 0 ? (
 				<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
 					{boards.map((board) => (
-						<Link
+						<PermissionAccess
 							key={board.id}
-							href={`/pages/kanban/${board.id}`}
-							className="block group"
+							permission={kanbanPermissions.board.read({
+								scope: "record",
+								boardId: board.id,
+								...(board.ownerId ? { ownerId: board.ownerId } : {}),
+								...(board.organizationId
+									? { organizationId: board.organizationId }
+									: {}),
+								exists: true,
+							})}
 						>
-							<Card className="h-full transition-shadow hover:shadow-md cursor-pointer">
-								<CardHeader>
-									<CardTitle className="group-hover:text-primary transition-colors">
-										{board.name}
-									</CardTitle>
-									{board.description && (
-										<CardDescription className="line-clamp-2">
-											{board.description}
-										</CardDescription>
-									)}
-								</CardHeader>
-								<CardContent>
-									<div className="flex items-center justify-between text-sm text-muted-foreground">
-										<span>
-											{localization?.columnsCount
-												? `${board.columns?.length || 0} ${localization.columnsCount}`
-												: t("kanban.list.columnsCount", "{{count}} columns", {
-														count: board.columns?.length || 0,
-													})}
-										</span>
-										<span>
-											{format(new Date(board.createdAt), "MMM d, yyyy")}
-										</span>
-									</div>
-								</CardContent>
-							</Card>
-						</Link>
+							<Link
+								href={resolve("kanban", board.id).href}
+								className="block group"
+							>
+								<Card className="h-full transition-shadow hover:shadow-md cursor-pointer">
+									<CardHeader>
+										<CardTitle className="group-hover:text-primary transition-colors">
+											{board.name}
+										</CardTitle>
+										{board.description && (
+											<CardDescription className="line-clamp-2">
+												{board.description}
+											</CardDescription>
+										)}
+									</CardHeader>
+									<CardContent>
+										<div className="flex items-center justify-between text-sm text-muted-foreground">
+											<span>
+												{localization?.columnsCount
+													? `${board.columns?.length || 0} ${localization.columnsCount}`
+													: t("kanban.list.columnsCount", "{{count}} columns", {
+															count: board.columns?.length || 0,
+														})}
+											</span>
+											<span>
+												{format(new Date(board.createdAt), "MMM d, yyyy")}
+											</span>
+										</div>
+									</CardContent>
+								</Card>
+							</Link>
+						</PermissionAccess>
 					))}
 				</div>
 			) : (
@@ -114,13 +123,13 @@ export function BoardsListPage() {
 						)
 					}
 					action={
-						<CanAccess resource="kanban:board" action="create">
+						<PermissionAccess permission={kanbanPermissions.board.create()}>
 							<Button onClick={handleNewBoard}>
 								<Plus className="mr-2 h-4 w-4" />
 								{localization?.createBoard ??
 									t("kanban.forms.createBoard", "Create Board")}
 							</Button>
-						</CanAccess>
+						</PermissionAccess>
 					}
 				/>
 			)}

package/src/plugins/kanban/client/components/pages/boards-list-page.tsx

@@ -5,6 +5,7 @@ import { ComposedRoute } from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { BoardsListSkeleton } from "../loading/boards-list-skeleton";
 import { NotFoundPage } from "./404-page";
+import { kanbanPermissions } from "../../../permissions";
 
 const BoardsListPage = lazy(() =>
 	import("./boards-list-page.internal").then((m) => ({
@@ -16,7 +17,7 @@ export function BoardsListPageComponent() {
 	return (
 		<ComposedRoute
 			path="/kanban"
-			permission={{ resource: "kanban:board", action: "read" }}
+			permission={kanbanPermissions.board.read({ scope: "collection" })}
 			PageComponent={BoardsListPage}
 			ErrorComponent={DefaultError}
 			LoadingComponent={BoardsListSkeleton}

package/src/plugins/kanban/client/components/pages/new-board-page.internal.tsx

@@ -10,33 +10,29 @@ import {
 } from "@workspace/ui/components/card";
 import {
 	usePluginOverrides,
-	useStack,
+	usePluginSiteNavigation,
 	useTranslate,
 } from "@btst/stack/context";
 import type { KanbanPluginOverrides } from "../../overrides";
 import { BoardForm } from "../forms/board-form";
 import { PageWrapper } from "../shared/page-wrapper";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 export function NewBoardPage() {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
-	const { router } = useStack();
-	const navigate =
-		router?.navigate ||
-		((path: string) => {
-			window.location.href = path;
-		});
-	const Link = router?.Link ?? "a";
+	const { localization } =
+		usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
+	const { Link, navigate, resolve } = usePluginSiteNavigation(KANBAN_PLUGIN_ID);
 
 	const handleSuccess = (boardId: string) => {
-		navigate(`/pages/kanban/${boardId}`);
+		void navigate("kanban", boardId);
 	};
 
 	return (
 		<PageWrapper data-testid="new-board-page">
 			<div className="flex items-center gap-4 mb-8">
 				<Link
-					href="/pages/kanban"
+					href={resolve("kanban").href}
 					className="text-muted-foreground hover:text-foreground"
 				>
 					<ArrowLeft className="h-5 w-5" />
@@ -72,7 +68,7 @@ export function NewBoardPage() {
 				</CardHeader>
 				<CardContent>
 					<BoardForm
-						onClose={() => navigate("/pages/kanban")}
+						onClose={() => navigate("kanban")}
 						onSuccess={handleSuccess}
 					/>
 				</CardContent>

package/src/plugins/kanban/client/components/pages/new-board-page.tsx

@@ -5,6 +5,7 @@ import { ComposedRoute } from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { BoardsListSkeleton } from "../loading/boards-list-skeleton";
 import { NotFoundPage } from "./404-page";
+import { kanbanPermissions } from "../../../permissions";
 
 const NewBoardPage = lazy(() =>
 	import("./new-board-page.internal").then((m) => ({
@@ -16,7 +17,7 @@ export function NewBoardPageComponent() {
 	return (
 		<ComposedRoute
 			path="/kanban/new"
-			permission={{ resource: "kanban:board", action: "create" }}
+			permission={kanbanPermissions.board.create()}
 			PageComponent={NewBoardPage}
 			ErrorComponent={DefaultError}
 			LoadingComponent={BoardsListSkeleton}

package/src/plugins/kanban/client/components/shared/column-content.tsx

@@ -6,8 +6,7 @@ import { Button } from "@workspace/ui/components/button";
 import { Badge } from "@workspace/ui/components/badge";
 import * as Kanban from "@workspace/ui/components/kanban";
 import {
-	CanAccess,
-	useCan,
+	PermissionAccess,
 	usePluginOverrides,
 	useTranslate,
 } from "@btst/stack/context";
@@ -21,12 +20,15 @@ import {
 } from "@workspace/ui/components/dropdown-menu";
 import { TaskCard } from "./task-card";
 import type { SerializedColumn, SerializedTask } from "../../../types";
+import { kanbanPermissions } from "../../../permissions";
+import { PermissionAccessAny } from "./permission-access-any";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 interface ColumnContentProps {
 	boardId: string;
+	ownerId?: string;
+	organizationId?: string;
 	column: SerializedColumn & { tasks: SerializedTask[] };
-	canMoveColumn: boolean;
-	canMoveTasks: boolean;
 	onAddTask: () => void;
 	onEditTask: (taskId: string) => void;
 	onEditColumn: () => void;
@@ -35,46 +37,54 @@ interface ColumnContentProps {
 
 function ColumnContentComponent({
 	boardId,
+	ownerId,
+	organizationId,
 	column,
-	canMoveColumn,
-	canMoveTasks,
 	onAddTask,
 	onEditTask,
 	onEditColumn,
 	onDeleteColumn,
 }: ColumnContentProps) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
+	const { localization } =
+		usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
 	const hasTasks = column.tasks && column.tasks.length > 0;
-	const { can: canUpdateColumn, isPending: isCheckingUpdateColumn } = useCan({
-		resource: "kanban:column",
-		action: "update",
-		params: { id: column.id, boardId },
-	});
-	const { can: canCreateTask, isPending: isCheckingCreateTask } = useCan({
-		resource: "kanban:task",
-		action: "create",
-		params: { boardId, columnId: column.id },
-	});
-	const { can: canDeleteColumn, isPending: isCheckingDeleteColumn } = useCan({
-		resource: "kanban:column",
-		action: "delete",
-		params: { id: column.id, boardId },
-	});
-	const showUpdateColumn = !isCheckingUpdateColumn && canUpdateColumn;
-	const showCreateTask = !isCheckingCreateTask && canCreateTask;
-	const showDeleteColumn = !isCheckingDeleteColumn && canDeleteColumn;
-	const hasColumnActions =
-		showUpdateColumn || showCreateTask || showDeleteColumn;
+	const boardFacts = {
+		boardId,
+		...(ownerId ? { ownerId } : {}),
+		...(organizationId ? { organizationId } : {}),
+	};
+	const columnFacts = { ...boardFacts, columnId: column.id };
+	const legacyBoardFacts = {
+		boardId,
+		...(ownerId ? { ownerId } : {}),
+		...(organizationId ? { organizationId } : {}),
+	};
+	const legacyColumnFacts = { ...legacyBoardFacts, id: column.id };
+	const columnActionChecks = [
+		{
+			permission: kanbanPermissions.column.update(columnFacts),
+		},
+		{
+			permission: kanbanPermissions.task.create(columnFacts),
+		},
+		{
+			permission: kanbanPermissions.column.delete(columnFacts),
+		},
+	] as const;
 
 	return (
 		<Kanban.Column key={column.id} value={column.id}>
 			<div className="flex items-center">
-				<Kanban.ColumnHandle asChild disabled={!canMoveColumn}>
-					<Button variant="ghost" size="icon">
-						<GripVertical className="h-4 w-4" />
-					</Button>
-				</Kanban.ColumnHandle>
+				<PermissionAccess
+					permission={kanbanPermissions.column.reorder(boardFacts)}
+				>
+					<Kanban.ColumnHandle asChild>
+						<Button variant="ghost" size="icon">
+							<GripVertical className="h-4 w-4" />
+						</Button>
+					</Kanban.ColumnHandle>
+				</PermissionAccess>
 				<div className="flex items-center gap-2 flex-1">
 					<span className="font-bold text-lg line-clamp-1 flex-1 text-left">
 						{column.title}
@@ -83,7 +93,7 @@ function ColumnContentComponent({
 						{column.tasks?.length || 0}
 					</Badge>
 				</div>
-				{hasColumnActions && (
+				<PermissionAccessAny checks={columnActionChecks}>
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
 							<Button variant="ghost" size="icon">
@@ -91,24 +101,28 @@ function ColumnContentComponent({
 							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent align="end">
-							{showUpdateColumn && (
+							<PermissionAccess
+								permission={kanbanPermissions.column.update(columnFacts)}
+							>
 								<DropdownMenuItem onClick={onEditColumn}>
 									<Pencil className="mr-2 h-4 w-4" />
 									{localization?.editColumn ??
 										t("kanban.list.editColumn", "Edit Column")}
 								</DropdownMenuItem>
-							)}
-							{showCreateTask && (
+							</PermissionAccess>
+							<PermissionAccess
+								permission={kanbanPermissions.task.create(columnFacts)}
+							>
 								<DropdownMenuItem onClick={onAddTask}>
 									<Plus className="mr-2 h-4 w-4" />
 									{localization?.addTask ??
 										t("kanban.list.addTask", "Add Task")}
 								</DropdownMenuItem>
-							)}
-							{showDeleteColumn && (showUpdateColumn || showCreateTask) && (
+							</PermissionAccess>
+							<PermissionAccess
+								permission={kanbanPermissions.column.delete(columnFacts)}
+							>
 								<DropdownMenuSeparator />
-							)}
-							{showDeleteColumn && (
 								<DropdownMenuItem
 									onClick={onDeleteColumn}
 									className="text-red-600 focus:text-red-600"
@@ -117,10 +131,10 @@ function ColumnContentComponent({
 									{localization?.deleteColumn ??
 										t("kanban.forms.deleteColumn", "Delete Column")}
 								</DropdownMenuItem>
-							)}
+							</PermissionAccess>
 						</DropdownMenuContent>
 					</DropdownMenu>
-				)}
+				</PermissionAccessAny>
 			</div>
 			<div className="p-0.5 space-y-2">
 				{hasTasks ? (
@@ -128,9 +142,10 @@ function ColumnContentComponent({
 						<TaskCard
 							key={task.id}
 							boardId={boardId}
+							ownerId={ownerId}
+							organizationId={organizationId}
 							columnId={column.id}
 							task={task}
-							canMove={canMoveTasks}
 							onClick={() => onEditTask(task.id)}
 						/>
 					))
@@ -152,16 +167,14 @@ function ColumnContentComponent({
 									)}
 							</p>
 						</div>
-						<CanAccess
-							resource="kanban:task"
-							action="create"
-							params={{ boardId, columnId: column.id }}
+						<PermissionAccess
+							permission={kanbanPermissions.task.create(columnFacts)}
 						>
 							<Button onClick={onAddTask} size="sm">
 								<Plus className="mr-2 h-4 w-4" />
 								{localization?.addTask ?? t("kanban.list.addTask", "Add Task")}
 							</Button>
-						</CanAccess>
+						</PermissionAccess>
 					</div>
 				)}
 			</div>

package/src/plugins/kanban/client/components/shared/default-error.tsx

@@ -4,6 +4,7 @@ import { AlertCircle, RefreshCw } from "lucide-react";
 import { Button } from "@workspace/ui/components/button";
 import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import type { KanbanPluginOverrides } from "../../overrides";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 interface DefaultErrorProps {
 	error?: unknown;
@@ -12,7 +13,8 @@ interface DefaultErrorProps {
 
 export function DefaultError({ error, reset }: DefaultErrorProps) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
+	const { localization } =
+		usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
 	return (
 		<div
 			className="flex flex-col items-center justify-center py-12 text-center"

package/src/plugins/kanban/client/components/shared/kanban-board.tsx

@@ -8,10 +8,10 @@ import type { SerializedColumn, SerializedTask } from "../../../types";
 
 interface KanbanBoardProps {
 	boardId: string;
+	ownerId?: string;
+	organizationId?: string;
 	columns: (SerializedColumn & { tasks: SerializedTask[] })[];
 	kanbanState: Record<string, SerializedTask[]>;
-	canMoveColumns: boolean;
-	canMoveTasks: boolean;
 	onKanbanChange: (newData: Record<string, SerializedTask[]>) => void;
 	onAddTask: (columnId: string) => void;
 	onEditTask: (columnId: string, taskId: string) => void;
@@ -21,10 +21,10 @@ interface KanbanBoardProps {
 
 function KanbanBoardComponent({
 	boardId,
+	ownerId,
+	organizationId,
 	columns,
 	kanbanState,
-	canMoveColumns,
-	canMoveTasks,
 	onKanbanChange,
 	onAddTask,
 	onEditTask,
@@ -76,9 +76,9 @@ function KanbanBoardComponent({
 					<ColumnContent
 						key={column.id}
 						boardId={boardId}
+						ownerId={ownerId}
+						organizationId={organizationId}
 						column={column}
-						canMoveColumn={canMoveColumns}
-						canMoveTasks={canMoveTasks}
 						onAddTask={() => onAddTask(column.id)}
 						onEditTask={(taskId) => onEditTask(column.id, taskId)}
 						onEditColumn={() => onEditColumn(column.id)}

package/src/plugins/kanban/client/components/shared/permission-access-any.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+import { PermissionAccess } from "@btst/stack/context";
+
+type PermissionCheck = Pick<
+	ComponentProps<typeof PermissionAccess>,
+	"permission"
+>;
+
+/** Render children when at least one exact permission is allowed. */
+export function PermissionAccessAny({
+	checks,
+	children,
+}: {
+	checks: readonly PermissionCheck[];
+	children: ReactNode;
+}) {
+	const [check, ...rest] = checks;
+	if (!check) return null;
+
+	return (
+		<PermissionAccess
+			permission={check.permission}
+			fallback={
+				<PermissionAccessAny checks={rest}>{children}</PermissionAccessAny>
+			}
+		>
+			{children}
+		</PermissionAccess>
+	);
+}

package/src/plugins/kanban/client/components/shared/task-card.tsx

@@ -10,31 +10,35 @@ import type { SerializedTask } from "../../../types";
 import { getPriorityConfig } from "../../../utils";
 import { useResolveUser } from "../../hooks/kanban-hooks";
 import { UserAvatar } from "./user-avatar";
-import { useCan, usePluginOverrides, useTranslate } from "@btst/stack/context";
+import {
+	PermissionAccess,
+	usePluginOverrides,
+	useTranslate,
+} from "@btst/stack/context";
 import type { KanbanPluginOverrides } from "../../overrides";
+import { kanbanPermissions } from "../../../permissions";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 interface TaskCardProps {
 	boardId: string;
+	ownerId?: string;
+	organizationId?: string;
 	columnId: string;
 	task: SerializedTask;
-	canMove: boolean;
 	onClick: () => void;
 }
 
 function TaskCardComponent({
 	boardId,
+	ownerId,
+	organizationId,
 	columnId,
 	task,
-	canMove,
 	onClick,
 }: TaskCardProps) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
-	const { can: canEdit, isPending: isCheckingEdit } = useCan({
-		resource: "kanban:task",
-		action: "update",
-		params: { id: task.id, boardId, columnId },
-	});
+	const { localization } =
+		usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
 	const priorityConfig = getPriorityConfig(task.priority);
 	const { data: assignee } = useResolveUser(task.assigneeId);
 	const priorityLabels = {
@@ -47,9 +51,29 @@ function TaskCardComponent({
 			localization?.priorityUrgent ??
 			t("kanban.common.priorityUrgent", "Urgent"),
 	};
-	const editable = !isCheckingEdit && canEdit;
+	const boardFacts = {
+		boardId,
+		...(ownerId ? { ownerId } : {}),
+		...(organizationId ? { organizationId } : {}),
+	};
+	const taskFacts = {
+		...boardFacts,
+		columnId,
+		taskId: task.id,
+		...(task.assigneeId ? { assigneeId: task.assigneeId } : {}),
+		isArchived: task.isArchived,
+	};
+	const legacyTaskFacts = {
+		id: task.id,
+		boardId,
+		columnId,
+		...(ownerId ? { ownerId } : {}),
+		...(organizationId ? { organizationId } : {}),
+		...(task.assigneeId ? { assigneeId: task.assigneeId } : {}),
+		isArchived: task.isArchived,
+	};
 
-	return (
+	const card = (editable: boolean) => (
 		<Kanban.Item value={task.id} asChild>
 			<div
 				className={`rounded-md border bg-card p-3 shadow-xs transition-shadow ${editable ? "cursor-pointer hover:shadow-md" : "cursor-default"}`}
@@ -57,16 +81,27 @@ function TaskCardComponent({
 			>
 				<div className="flex flex-col gap-2">
 					<div className="flex items-center gap-2">
-						<Kanban.ItemHandle asChild disabled={!canMove}>
-							<Button
-								variant="ghost"
-								size="icon"
-								className="h-6 w-6"
-								onClick={(e: React.MouseEvent) => e.stopPropagation()}
+						<PermissionAccess
+							permission={kanbanPermissions.task.move(taskFacts)}
+						>
+							<PermissionAccess
+								permission={kanbanPermissions.task.reorder({
+									...boardFacts,
+									columnId,
+								})}
 							>
-								<GripVertical className="h-3 w-3" />
-							</Button>
-						</Kanban.ItemHandle>
+								<Kanban.ItemHandle asChild>
+									<Button
+										variant="ghost"
+										size="icon"
+										className="h-6 w-6"
+										onClick={(e: React.MouseEvent) => e.stopPropagation()}
+									>
+										<GripVertical className="h-3 w-3" />
+									</Button>
+								</Kanban.ItemHandle>
+							</PermissionAccess>
+						</PermissionAccess>
 						<span
 							className={`line-clamp-1 font-medium text-base flex-1 text-left ${editable ? "cursor-pointer hover:text-primary" : "cursor-default"}`}
 							title={task.title}
@@ -108,6 +143,15 @@ function TaskCardComponent({
 			</div>
 		</Kanban.Item>
 	);
+
+	return (
+		<PermissionAccess
+			permission={kanbanPermissions.task.update(taskFacts)}
+			fallback={card(false)}
+		>
+			{card(true)}
+		</PermissionAccess>
+	);
 }
 
 export const TaskCard = memo(TaskCardComponent);

package/src/plugins/kanban/client/components/shared/user-avatar.tsx

@@ -9,6 +9,7 @@ import {
 } from "@workspace/ui/components/avatar";
 import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import type { KanbanPluginOverrides, KanbanUser } from "../../overrides";
+import { KANBAN_PLUGIN_ID } from "../../constants";
 
 interface UserAvatarProps {
 	user: KanbanUser | null;
@@ -39,7 +40,8 @@ function UserAvatarComponent({
 	className,
 }: UserAvatarProps) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
+	const { localization } =
+		usePluginOverrides<KanbanPluginOverrides>(KANBAN_PLUGIN_ID);
 	// No user - show placeholder icon
 	if (!user) {
 		return (