feat: rename kanban group by clicking column name

apps/client/src/ee/base/components/kanban/base-kanban.tsx

@@ -30,7 +30,7 @@ type BaseKanbanProps = {
 
 export function BaseKanban({ base, view, pageId, embedded, editable, viewFilter }: BaseKanbanProps) {
   const { t } = useTranslation();
-  const { groupByPropertyId, columns, hasValidGroupBy } = useKanbanColumns(base, view);
+  const { groupByPropertyId, groupByProperty, columns, hasValidGroupBy } = useKanbanColumns(base, view);
   const updateView = useUpdateViewMutation();
   const moveCard = useKanbanMoveCardMutation();
   const { openRow } = useRowDetailModal(pageId);
@@ -201,6 +201,7 @@ export function BaseKanban({ base, view, pageId, embedded, editable, viewFilter
           column={column}
           viewFilter={viewFilter}
           groupByPropertyId={groupByPropertyId!}
+          groupByProperty={groupByProperty}
           canEdit={editable}
           onOpenRow={handleOpenRow}
           onHide={hideColumn}

apps/client/src/ee/base/components/kanban/kanban-column-header.tsx

@@ -3,22 +3,24 @@ import { useTranslation } from "react-i18next";
 import { ActionIcon, Menu, Text } from "@mantine/core";
 import { IconDots, IconPlus, IconGripVertical } from "@tabler/icons-react";
 import clsx from "clsx";
-import { KanbanColumn } from "@/ee/base/types/base.types";
+import { IBaseProperty, KanbanColumn } from "@/ee/base/types/base.types";
 import { choiceColor } from "@/ee/base/components/cells/choice-color";
 import { useKanbanColumnDnd } from "@/ee/base/hooks/use-kanban-column-dnd";
 import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
+import { KanbanColumnTitle } from "@/ee/base/components/kanban/kanban-column-title";
 import classes from "@/ee/base/styles/kanban.module.css";
 
 type KanbanColumnHeaderProps = {
   column: KanbanColumn;
   pageId: string;
+  property: IBaseProperty | undefined;
   count?: string;
   canEdit: boolean;
   onHide: () => void;
   onAddCard: () => void;
 };
 
-export function KanbanColumnHeader({ column, pageId, count, canEdit, onHide, onAddCard }: KanbanColumnHeaderProps) {
+export function KanbanColumnHeader({ column, pageId, property, count, canEdit, onHide, onAddCard }: KanbanColumnHeaderProps) {
   const { t } = useTranslation();
   const dotColor = column.color
     ? choiceColor(column.color).color as string
@@ -49,9 +51,7 @@ export function KanbanColumnHeader({ column, pageId, count, canEdit, onHide, onA
           background: dotColor,
         }}
       />
-      <Text fw={600} size="sm" flex={1} truncate>
+      <KanbanColumnTitle column={column} property={property} pageId={pageId} canEdit={canEdit} />
-        {column.isNoValue ? t("No value") : column.name}
-      </Text>
       {count !== undefined && <Text className={classes.count}>{count}</Text>}
       {canEdit && (
         <>

apps/client/src/ee/base/components/kanban/kanban-column-title.tsx

@@ -0,0 +1,113 @@
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Group, Popover, Text, TextInput, UnstyledButton } from "@mantine/core";
+import { IBaseProperty, KanbanColumn, SelectTypeOptions } from "@/ee/base/types/base.types";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import classes from "@/ee/base/styles/kanban.module.css";
+
+type KanbanColumnTitleProps = {
+  column: KanbanColumn;
+  property: IBaseProperty | undefined;
+  pageId: string;
+  canEdit: boolean;
+};
+
+export function KanbanColumnTitle({ column, property, pageId, canEdit }: KanbanColumnTitleProps) {
+  const { t } = useTranslation();
+  const [opened, setOpened] = useState(false);
+  const [draft, setDraft] = useState("");
+  const updateProperty = useUpdatePropertyMutation();
+
+  const commit = useCallback(() => {
+    setOpened(false);
+    const name = draft.trim();
+    const options = property?.typeOptions as SelectTypeOptions | undefined;
+    if (!property || !options || !name || name === column.name) return;
+    if (!options.choices.some((c) => c.id === column.key)) return;
+    updateProperty.mutate({
+      propertyId: property.id,
+      pageId,
+      typeOptions: {
+        ...options,
+        choices: options.choices.map((c) =>
+          c.id === column.key ? { ...c, name } : c,
+        ),
+      },
+    });
+  }, [draft, property, column.name, column.key, pageId, updateProperty]);
+
+  const toggle = useCallback(() => {
+    if (opened) {
+      commit();
+    } else {
+      setDraft(column.name);
+      setOpened(true);
+    }
+  }, [opened, commit, column.name]);
+
+  const cancel = useCallback(() => setOpened(false), []);
+
+  if (!canEdit || column.isNoValue || !property) {
+    return (
+      <Text fw={600} size="sm" flex={1} truncate>
+        {column.isNoValue ? t("No value") : column.name}
+      </Text>
+    );
+  }
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={(next) => {
+        if (!next) commit();
+      }}
+      position="bottom-start"
+      shadow="md"
+      width={240}
+      withinPortal
+      trapFocus
+      returnFocus
+      closeOnClickOutside
+      closeOnEscape={false}
+    >
+      <Popover.Target>
+        <UnstyledButton className={classes.columnTitleButton} onClick={toggle}>
+          <Text fw={600} size="sm" truncate flex={1} ta="left">
+            {column.name}
+          </Text>
+        </UnstyledButton>
+      </Popover.Target>
+      <Popover.Dropdown
+        p="xs"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            cancel();
+          }
+        }}
+      >
+        <Group gap="xs" wrap="nowrap">
+          <TextInput
+            size="xs"
+            flex={1}
+            value={draft}
+            data-autofocus
+            onFocus={(e) => e.currentTarget.select()}
+            onChange={(e) => setDraft(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commit();
+              }
+            }}
+          />
+          <Button size="xs" onClick={commit}>
+            {t("Done")}
+          </Button>
+        </Group>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

apps/client/src/ee/base/components/kanban/kanban-column.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { type IBase, type IBaseRow, type IBaseView, type FilterGroup, type KanbanColumn as KanbanColumnType, KANBAN_CARD_DRAG_TYPE } from "@/ee/base/types/base.types";
+import { type IBase, type IBaseProperty, type IBaseRow, type IBaseView, type FilterGroup, type KanbanColumn as KanbanColumnType, KANBAN_CARD_DRAG_TYPE } from "@/ee/base/types/base.types";
 import { buildColumnFilter } from "@/ee/base/services/kanban-column-filter";
 import { formatKanbanCount } from "@/ee/base/services/format-kanban-count";
 import { useKanbanColumnAutoScroll } from "@/ee/base/hooks/use-kanban-autoscroll";
@@ -19,6 +19,7 @@ type KanbanColumnProps = {
   column: KanbanColumnType;
   viewFilter: FilterGroup | undefined;
   groupByPropertyId: string;
+  groupByProperty: IBaseProperty | undefined;
   canEdit: boolean;
   onOpenRow: (rowId: string) => void;
   onHide: (columnKey: string) => void;
@@ -33,6 +34,7 @@ export function KanbanColumn({
   column,
   viewFilter,
   groupByPropertyId,
+  groupByProperty,
   canEdit,
   onOpenRow,
   onHide,
@@ -139,6 +141,7 @@ export function KanbanColumn({
       <KanbanColumnHeader
         column={column}
         pageId={pageId}
+        property={groupByProperty}
         count={count}
         canEdit={canEdit}
         onHide={() => onHide(column.key)}

apps/client/src/ee/base/styles/kanban.module.css

@@ -76,6 +76,21 @@
   cursor: grabbing;
 }
 
+.columnTitleButton {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  margin: -2px -6px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.columnTitleButton:hover {
+  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+}
+
 .cardList {
   display: flex;
   flex-direction: column;