From aebd54f13db242bfd200de705c43a6c561e05713 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sun, 24 May 2026 15:59:53 +0100
Subject: [PATCH] refactor(bases): guard kanban column drag from menu clicks;
 polish hidden chips strip

---
 .../base/components/views/kanban/base-kanban.tsx      | 10 ++++++----
 .../components/views/kanban/kanban-column-header.tsx  |  2 +-
 .../features/base/hooks/use-kanban-column-reorder.ts  | 10 ++++++++++
 .../client/src/features/base/styles/kanban.module.css | 11 +++++++++++
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/features/base/components/views/kanban/base-kanban.tsx b/apps/client/src/features/base/components/views/kanban/base-kanban.tsx
index 66de3ec5e..2fa0fcb94 100644
--- a/apps/client/src/features/base/components/views/kanban/base-kanban.tsx
+++ b/apps/client/src/features/base/components/views/kanban/base-kanban.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from "react";
 import { Badge } from "@mantine/core";
 import { IconPlus } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
 import {
   IBase,
   IBaseRow,
@@ -36,6 +37,7 @@ export function BaseKanban({
   effectiveView,
   onCardClick,
 }: BaseKanbanProps) {
+  const { t } = useTranslation();
   const groupByPropertyId = effectiveView?.config?.groupByPropertyId;
   const property = useMemo(
     () =>
@@ -211,13 +213,13 @@ export function BaseKanban({
     return hiddenIds
       .map((id) =>
         id === NO_VALUE_CHOICE_ID
-          ? { id, name: "No value", color: null as string | null }
+          ? { id, name: t("No value"), color: null as string | null }
           : byId.get(id)
             ? { id, name: byId.get(id)!.name, color: byId.get(id)!.color as string | null }
             : null,
       )
       .filter((c): c is { id: string; name: string; color: string | null } => c !== null);
-  }, [hiddenIds, isGroupable, property]);
+  }, [hiddenIds, isGroupable, property, t]);
 
   if (!isGroupable) {
     return <KanbanEmptyState base={base} onPick={handlePickProperty} />;
@@ -226,13 +228,13 @@ export function BaseKanban({
   return (
     <>
       {hiddenChoices.length > 0 && (
-        <div style={{ padding: "6px 12px", display: "flex", gap: 6, flexWrap: "wrap" }}>
+        <div className={classes.hiddenStrip}>
           {hiddenChoices.map((c) => (
             <Badge
               key={c.id}
               color={c.color ?? "gray"}
               variant="outline"
-              style={{ cursor: "pointer" }}
+              className={classes.hiddenChip}
               onClick={() => handleShowColumn(c.id)}
               rightSection={<IconPlus size={12} />}
             >
diff --git a/apps/client/src/features/base/components/views/kanban/kanban-column-header.tsx b/apps/client/src/features/base/components/views/kanban/kanban-column-header.tsx
index a44708bb7..bd6607728 100644
--- a/apps/client/src/features/base/components/views/kanban/kanban-column-header.tsx
+++ b/apps/client/src/features/base/components/views/kanban/kanban-column-header.tsx
@@ -50,7 +50,7 @@ export function KanbanColumnHeader({
       </div>
       <Menu shadow="md" width={160} position="bottom-end">
         <Menu.Target>
-          <ActionIcon variant="subtle" size="sm" color="gray">
+          <ActionIcon variant="subtle" size="sm" color="gray" data-no-drag>
             <IconDots size={14} />
           </ActionIcon>
         </Menu.Target>
diff --git a/apps/client/src/features/base/hooks/use-kanban-column-reorder.ts b/apps/client/src/features/base/hooks/use-kanban-column-reorder.ts
index 16e4cd667..7d100fe2f 100644
--- a/apps/client/src/features/base/hooks/use-kanban-column-reorder.ts
+++ b/apps/client/src/features/base/hooks/use-kanban-column-reorder.ts
@@ -36,6 +36,16 @@ export function useKanbanColumnReorder({
     return combine(
       draggable({
         element: el,
+        canDrag: ({ input }) => {
+          // Don't start a drag when the user is interacting with a marked
+          // "no-drag" subtree (e.g. the column header's menu trigger).
+          const target = document.elementFromPoint(
+            input.clientX,
+            input.clientY,
+          ) as HTMLElement | null;
+          if (target?.closest("[data-no-drag]")) return false;
+          return true;
+        },
         getInitialData: () => ({ type: "base-kanban-column", columnKey }),
         onDragStart: () => setIsDragging(true),
         onDrop: () => setIsDragging(false),
diff --git a/apps/client/src/features/base/styles/kanban.module.css b/apps/client/src/features/base/styles/kanban.module.css
index 9832303f6..3bd9a5b0f 100644
--- a/apps/client/src/features/base/styles/kanban.module.css
+++ b/apps/client/src/features/base/styles/kanban.module.css
@@ -91,3 +91,14 @@
   font-size: var(--mantine-font-size-xs);
   color: var(--mantine-color-dimmed);
 }
+
+.hiddenStrip {
+  padding: 6px 12px;
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.hiddenChip {
+  cursor: pointer;
+}