snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/labels/label-block/label-item-block.tsx

@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { useRef, useState } from "react";
+import type { LucideIcon } from "lucide-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+// types
+import type { IIssueLabel } from "@plane/types";
+// ui
+import { CustomMenu, DragHandle } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// components
+import { LabelName } from "./label-name";
+
+export interface ICustomMenuItem {
+  CustomIcon: LucideIcon | React.FC<ISvgIcons>;
+  onClick: (label: IIssueLabel) => void;
+  isVisible: boolean;
+  text: string;
+  key: string;
+}
+
+interface ILabelItemBlock {
+  label: IIssueLabel;
+  isDragging: boolean;
+  customMenuItems: ICustomMenuItem[];
+  handleLabelDelete: (label: IIssueLabel) => void;
+  isLabelGroup?: boolean;
+  dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
+  disabled?: boolean;
+  draggable?: boolean;
+}
+
+export function LabelItemBlock(props: ILabelItemBlock) {
+  const {
+    label,
+    isDragging,
+    customMenuItems,
+    handleLabelDelete,
+    isLabelGroup,
+    dragHandleRef,
+    disabled = false,
+    draggable = true,
+  } = props;
+  // states
+  const [isMenuActive, setIsMenuActive] = useState(true);
+  // refs
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
+  return (
+    <div className="group flex items-center">
+      <div className="flex items-center">
+        {!disabled && draggable && (
+          <DragHandle
+            className={cn("opacity-0 group-hover:opacity-100", {
+              "opacity-100": isDragging,
+            })}
+            ref={dragHandleRef}
+          />
+        )}
+        <LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
+      </div>
+
+      {!disabled && (
+        <div
+          ref={actionSectionRef}
+          className={`absolute right-2.5 flex items-center gap-2 px-4 ${
+            isMenuActive || isLabelGroup
+              ? "opacity-100"
+              : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
+          } ${isLabelGroup && "-top-0.5"}`}
+        >
+          <CustomMenu ellipsis menuButtonOnClick={() => setIsMenuActive(!isMenuActive)} useCaptureForOutsideClick>
+            {customMenuItems.map(
+              ({ isVisible, onClick, CustomIcon, text, key }) =>
+                isVisible && (
+                  <CustomMenu.MenuItem key={key} onClick={() => onClick(label)}>
+                    <span className="flex items-center justify-start gap-2">
+                      <CustomIcon className="size-4" />
+                      <span>{text}</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                )
+            )}
+          </CustomMenu>
+          {!isLabelGroup && (
+            <div className="py-0.5">
+              <button
+                className="flex size-5 items-center justify-center rounded-sm hover:bg-layer-1"
+                onClick={() => {
+                  handleLabelDelete(label);
+                }}
+              >
+                <CloseOutline className="size-3.5 flex-shrink-0 text-tertiary" />
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/core/components/labels/label-block/label-name.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { GroupOutline } from "@makeplane/propel/icons";
+
+interface ILabelName {
+  name: string;
+  color: string;
+  isGroup: boolean;
+}
+
+export function LabelName(props: ILabelName) {
+  const { name, color, isGroup } = props;
+
+  return (
+    <div className="flex items-center gap-3 pr-20">
+      {isGroup ? (
+        <GroupOutline className="h-3.5 w-3.5" color={color} />
+      ) : (
+        <span
+          className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: color && color !== "" ? color : "#000",
+          }}
+        />
+      )}
+      <h6 className="text-13">{name}</h6>
+    </div>
+  );
+}