fix(web): respect granular task permissions

apps/web/src/components/bulk-selection/backlog-bulk-toolbar.tsx

@@ -104,9 +104,12 @@ function BacklogBulkToolbar() {
   const { data: workspaceLabels = [] } = useGetLabelsByWorkspace(
     workspace?.id ?? "",
   );
-  const { canManageTasks, canAssignTasks } = useWorkspacePermission();
-  const canEdit = canManageTasks();
+  const { canUpdateTasks, canDeleteTasks, canAssignTasks, canUpdateLabels } =
+    useWorkspacePermission();
+  const canEdit = canUpdateTasks();
+  const canDelete = canDeleteTasks();
   const canAssign = canAssignTasks();
+  const canEditLabels = canUpdateLabels();
   const [isActionsOpen, setIsActionsOpen] = useState(false);
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
 
@@ -261,27 +264,35 @@ function BacklogBulkToolbar() {
 
   const groupedItems = useMemo<BacklogActionGroup[]>(() => {
     const groups: BacklogActionGroup[] = [];
-    if (canEdit) {
+    if (canEdit || canDelete) {
       groups.push({
         value: "actions",
         label: t("tasks:bulk.actions"),
         items: [
-          {
-            value: "bulk-delete",
-            label: t("tasks:bulk.delete"),
-            icon: <Trash2 className="h-4 w-4 text-muted-foreground" />,
-            onRun: () => {
-              void handleBulkDelete();
-            },
-          },
-          {
-            value: "bulk-archive",
-            label: t("tasks:bulk.archive"),
-            icon: <Archive className="h-4 w-4 text-muted-foreground" />,
-            onRun: () => {
-              void handleBulkArchive();
-            },
-          },
+          ...(canDelete
+            ? [
+                {
+                  value: "bulk-delete",
+                  label: t("tasks:bulk.delete"),
+                  icon: <Trash2 className="h-4 w-4 text-muted-foreground" />,
+                  onRun: () => {
+                    void handleBulkDelete();
+                  },
+                },
+              ]
+            : []),
+          ...(canEdit
+            ? [
+                {
+                  value: "bulk-archive",
+                  label: t("tasks:bulk.archive"),
+                  icon: <Archive className="h-4 w-4 text-muted-foreground" />,
+                  onRun: () => {
+                    void handleBulkArchive();
+                  },
+                },
+              ]
+            : []),
         ],
       });
     }
@@ -322,6 +333,8 @@ function BacklogBulkToolbar() {
           },
         })),
       });
+    }
+    if (canEditLabels) {
       groups.push({
         value: "label",
         label: t("tasks:bulk.addLabel"),
@@ -347,7 +360,9 @@ function BacklogBulkToolbar() {
     return groups;
   }, [
     canEdit,
+    canDelete,
     canAssign,
+    canEditLabels,
     workspaceUsers?.members,
     uniqueLabels,
     handleBulkDelete,
@@ -360,7 +375,7 @@ function BacklogBulkToolbar() {
   ]);
 
   if (selectedCount === 0) return null;
-  if (!canEdit && !canAssign) return null;
+  if (!canEdit && !canDelete && !canAssign && !canEditLabels) return null;
 
   return (
     <div className="-translate-x-1/2 fixed bottom-6 left-1/2 z-50 transition-[translate,opacity] duration-200 ease-out starting:translate-y-3 starting:opacity-0 motion-reduce:starting:translate-y-0">

apps/web/src/components/bulk-selection/bulk-toolbar.tsx

@@ -98,9 +98,12 @@ function BulkToolbar() {
   const { data: workspaceLabels = [] } = useGetLabelsByWorkspace(
     workspace?.id ?? "",
   );
-  const { canManageTasks, canAssignTasks } = useWorkspacePermission();
-  const canEdit = canManageTasks();
+  const { canUpdateTasks, canDeleteTasks, canAssignTasks, canUpdateLabels } =
+    useWorkspacePermission();
+  const canEdit = canUpdateTasks();
+  const canDelete = canDeleteTasks();
   const canAssign = canAssignTasks();
+  const canEditLabels = canUpdateLabels();
   const [isActionsOpen, setIsActionsOpen] = useState(false);
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
 
@@ -266,29 +269,39 @@ function BulkToolbar() {
 
   const groupedItems = useMemo<BulkActionGroup[]>(() => {
     const groups: BulkActionGroup[] = [];
-    if (canEdit) {
+    if (canEdit || canDelete) {
       groups.push({
         value: "actions",
         label: t("tasks:bulk.actions"),
         items: [
-          {
-            value: "bulk-delete",
-            label: t("tasks:bulk.delete"),
-            icon: <Trash2 className="h-4 w-4 text-muted-foreground" />,
-            onRun: () => {
-              void handleBulkDelete();
-            },
-          },
-          {
-            value: "bulk-archive",
-            label: t("tasks:bulk.archive"),
-            icon: <Archive className="h-4 w-4 text-muted-foreground" />,
-            onRun: () => {
-              void handleBulkArchive();
-            },
-          },
+          ...(canDelete
+            ? [
+                {
+                  value: "bulk-delete",
+                  label: t("tasks:bulk.delete"),
+                  icon: <Trash2 className="h-4 w-4 text-muted-foreground" />,
+                  onRun: () => {
+                    void handleBulkDelete();
+                  },
+                },
+              ]
+            : []),
+          ...(canEdit
+            ? [
+                {
+                  value: "bulk-archive",
+                  label: t("tasks:bulk.archive"),
+                  icon: <Archive className="h-4 w-4 text-muted-foreground" />,
+                  onRun: () => {
+                    void handleBulkArchive();
+                  },
+                },
+              ]
+            : []),
         ],
       });
+    }
+    if (canEdit) {
       groups.push({
         value: "status",
         label: t("tasks:bulk.changeStatus"),
@@ -339,6 +352,8 @@ function BulkToolbar() {
           },
         })),
       });
+    }
+    if (canEditLabels) {
       groups.push({
         value: "label",
         label: t("tasks:bulk.addLabel"),
@@ -364,7 +379,9 @@ function BulkToolbar() {
     return groups;
   }, [
     canEdit,
+    canDelete,
     canAssign,
+    canEditLabels,
     project?.columns,
     workspaceUsers?.members,
     uniqueLabels,
@@ -380,7 +397,7 @@ function BulkToolbar() {
 
   if (selectedCount === 0) return null;
   // Nothing the user can do in bulk → no toolbar.
-  if (!canEdit && !canAssign) return null;
+  if (!canEdit && !canDelete && !canAssign && !canEditLabels) return null;
 
   return (
     <div className="-translate-x-1/2 fixed bottom-6 left-1/2 z-50 transition-[translate,opacity] duration-200 ease-out starting:translate-y-3 starting:opacity-0 motion-reduce:starting:translate-y-0">

apps/web/src/components/kanban-board/column/column-header.tsx

@@ -19,8 +19,8 @@ export function ColumnHeader({ column }: ColumnHeaderProps) {
   const { t } = useTranslation();
   const { project, setProject } = useProjectStore();
   const { mutate: updateTask } = useUpdateTask();
-  const { canManageTasks, canCreateTasks } = useWorkspacePermission();
-  const canTask = canManageTasks();
+  const { canUpdateTasks, canCreateTasks } = useWorkspacePermission();
+  const canTask = canUpdateTasks();
   const canCreate = canCreateTasks();
 
   const [isArchiveModalOpen, setIsArchiveModalOpen] = useState(false);

apps/web/src/components/kanban-board/task-card-context-menu/task-card-context-menu-content.tsx

@@ -74,8 +74,10 @@ export default function TaskCardContextMenuContent({
   const { mutateAsync: updateTaskTitle } = useUpdateTaskTitle();
   const { mutateAsync: updateTaskDescription } = useUpdateTaskDescription();
   const { mutateAsync: updateTaskDueDate } = useUpdateTaskDueDate();
-  const { canManageTasks, canAssignTasks } = useWorkspacePermission();
-  const canEdit = canManageTasks();
+  const { canUpdateTasks, canDeleteTasks, canAssignTasks } =
+    useWorkspacePermission();
+  const canEdit = canUpdateTasks();
+  const canDelete = canDeleteTasks();
   const canAssign = canAssignTasks();
 
   const usersOptions = useMemo(() => {
@@ -293,31 +295,43 @@ export default function TaskCardContextMenuContent({
         </ContextMenuSub>
       )}
 
-      {canEdit && (
+      {(canEdit || canDelete) && (
         <>
-          <ContextMenuSeparator />
+          {canEdit && (
+            <>
+              <ContextMenuSeparator />
 
-          <ContextMenuItem onClick={() => handleChange("status", "archived")}>
-            <span>{t("tasks:actions.archive")}</span>
-          </ContextMenuItem>
+              <ContextMenuItem
+                onClick={() => handleChange("status", "archived")}
+              >
+                <span>{t("tasks:actions.archive")}</span>
+              </ContextMenuItem>
 
-          <ContextMenuItem onClick={() => handleChange("status", "planned")}>
-            <span>{t("tasks:actions.markAsPlanned")}</span>
-          </ContextMenuItem>
+              <ContextMenuItem
+                onClick={() => handleChange("status", "planned")}
+              >
+                <span>{t("tasks:actions.markAsPlanned")}</span>
+              </ContextMenuItem>
+            </>
+          )}
 
-          <ContextMenuSeparator />
+          {canDelete && (
+            <>
+              <ContextMenuSeparator />
 
-          <ContextMenuItem
-            className="text-destructive"
-            onClick={(e) => {
-              e.preventDefault();
-              setTimeout(() => {
-                onDeleteClick();
-              }, 0);
-            }}
-          >
-            <span>{t("tasks:actions.delete")}</span>
-          </ContextMenuItem>
+              <ContextMenuItem
+                className="text-destructive"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setTimeout(() => {
+                    onDeleteClick();
+                  }, 0);
+                }}
+              >
+                <span>{t("tasks:actions.delete")}</span>
+              </ContextMenuItem>
+            </>
+          )}
         </>
       )}
     </ContextMenuContent>

apps/web/src/components/shared/modals/create-task-modal.test.tsx

@@ -59,7 +59,7 @@ vi.mock(
 vi.mock("@/hooks/use-workspace-permission", () => ({
   useWorkspacePermission: () => ({
     canCreateTasks: () => true,
-    canManageLabels: () => true,
+    canCreateLabels: () => true,
   }),
 }));
 

apps/web/src/components/shared/modals/create-task-modal.tsx

@@ -178,9 +178,9 @@ function CreateTaskModal({
   const { data: workspaceLabels = [] } = useGetLabelsByWorkspace(
     workspace?.id || "",
   );
-  const { canCreateTasks, canManageLabels } = useWorkspacePermission();
+  const { canCreateTasks, canCreateLabels } = useWorkspacePermission();
   const canCreateTaskCapability = canCreateTasks();
-  const canCreateLabelCapability = canManageLabels();
+  const canCreateLabelCapability = canCreateLabels();
 
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");

apps/web/src/components/task/subtask-status-popover.tsx

@@ -38,8 +38,8 @@ export default function SubtaskStatusPopover({
     isFinal: col.isFinal,
   }));
   const { mutateAsync: updateTaskStatus } = useUpdateTaskStatus();
-  const { canManageTasks } = useWorkspacePermission();
-  const canEdit = canManageTasks();
+  const { canUpdateTasks } = useWorkspacePermission();
+  const canEdit = canUpdateTasks();
 
   const allSameStatus =
     tasks.length > 0 && tasks.every((t) => t.status === tasks[0].status);