From 3454a1316374e1545c751a6169c2ac25f60da81e Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Wed, 2 Sep 2026 19:25:39 +0530
Subject: [PATCH 1/8] refactor: update collapsible components to use
 @makeplane/propel

- Migrate collapsible components in issue detail widgets (attachments, links, relations, sub-issues) from @plane/ui to @makeplane/propel.
- Adjust props and structure for consistency with new collapsible implementation.
- Enhance title components to integrate action buttons and improve accessibility.
- Refactor related components to streamline imports and improve code clarity.
---
 .../issue-detail-widgets/attachments/root.tsx | 28 ++++---
 .../attachments/title.tsx                     | 41 ++--------
 .../issue-detail-widgets/links/root.tsx       | 20 +++--
 .../issue-detail-widgets/links/title.tsx      | 31 ++-----
 .../relations/content.tsx                     | 11 +--
 .../issue-detail-widgets/relations/root.tsx   | 20 +++--
 .../issue-detail-widgets/relations/title.tsx  | 31 ++-----
 .../sub-issues/issues-list/list-group.tsx     | 81 +++++++++----------
 .../issue-detail-widgets/sub-issues/root.tsx  | 26 +++---
 .../issue-detail-widgets/sub-issues/title.tsx | 45 ++++-------
 .../workspace/settings/members-list.tsx       | 37 +++------
 11 files changed, 135 insertions(+), 236 deletions(-)

diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
index e1a94c7d79e..4a78463bbfa 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { IssueAttachmentsCollapsibleContent } from "./content";
 import { IssueAttachmentsCollapsibleTitle } from "./title";
+import { IssueAttachmentActionButton } from "./quick-action-button";
 
 type Props = {
   workspaceSlug: string;
@@ -33,19 +34,20 @@ export const AttachmentsCollapsible = observer(function AttachmentsCollapsible(p
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("attachments")}
-      title={
-        <IssueAttachmentsCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("attachments")}
+      trigger={<IssueAttachmentsCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <IssueAttachmentActionButton
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            issueId={issueId}
+            disabled={disabled}
+            issueServiceType={issueServiceType}
+          />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <IssueAttachmentsCollapsibleContent
         workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
index 28ce79670b7..4434bfed6b3 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
@@ -4,28 +4,21 @@
  * See the LICENSE file for details.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-// local imports
-import { IssueAttachmentActionButton } from "./quick-action-button";
 
 type Props = {
-  isOpen: boolean;
-  workspaceSlug: string;
-  projectId: string;
   issueId: string;
-  disabled: boolean;
   issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmentsCollapsibleTitle(props: Props) {
-  const { isOpen, workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { issueId, issueServiceType = EIssueServiceType.ISSUES } = props;
   const { t } = useTranslation();
   // store hooks
   const {
@@ -36,32 +29,12 @@ export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmen
   const issue = getIssueById(issueId);
   const attachmentCount = issue?.attachment_count ?? 0;
 
-  // indicator element
-  const indicatorElement = useMemo(
-    () => (
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.attachments")}
       <span className="flex items-center justify-center">
-        <p className="text-14 !leading-3 text-tertiary">{attachmentCount}</p>
+        <p className="text-14 leading-3! text-tertiary">{attachmentCount}</p>
       </span>
-    ),
-    [attachmentCount]
-  );
-
-  return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={t("common.attachments")}
-      indicatorElement={indicatorElement}
-      actionItemElement={
-        !disabled && (
-          <IssueAttachmentActionButton
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            issueId={issueId}
-            disabled={disabled}
-            issueServiceType={issueServiceType}
-          />
-        )
-      }
-    />
+    </span>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
index bd963868a2e..0f30f4e5287 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { IssueLinksCollapsibleContent } from "./content";
 import { IssueLinksCollapsibleTitle } from "./title";
+import { IssueLinksActionButton } from "./quick-action-button";
 
 type Props = {
   workspaceSlug: string;
@@ -32,17 +33,14 @@ export const LinksCollapsible = observer(function LinksCollapsible(props: Props)
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("links")}
-      title={
-        <IssueLinksCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          issueId={issueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("links")}
+      trigger={<IssueLinksCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <IssueLinksActionButton issueServiceType={issueServiceType} disabled={disabled} />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <IssueLinksCollapsibleContent
         workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
index b9d1fa76360..5c499d50c88 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
@@ -4,26 +4,21 @@
  * See the LICENSE file for details.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-// local imports
-import { IssueLinksActionButton } from "./quick-action-button";
 
 type Props = {
-  isOpen: boolean;
   issueId: string;
-  disabled: boolean;
   issueServiceType: TIssueServiceType;
 };
 
 export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibleTitle(props: Props) {
-  const { isOpen, issueId, disabled, issueServiceType } = props;
+  const { issueId, issueServiceType } = props;
   // translation
   const { t } = useTranslation();
   // store hooks
@@ -36,24 +31,12 @@ export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibl
 
   const linksCount = issue?.link_count ?? 0;
 
-  // indicator element
-  const indicatorElement = useMemo(
-    () => (
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.links")}
       <span className="flex items-center justify-center">
-        <p className="text-14 !leading-3 text-tertiary">{linksCount}</p>
+        <p className="text-14 leading-3! text-tertiary">{linksCount}</p>
       </span>
-    ),
-    [linksCount]
-  );
-
-  return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={t("common.links")}
-      indicatorElement={indicatorElement}
-      actionItemElement={
-        !disabled && <IssueLinksActionButton issueServiceType={issueServiceType} disabled={disabled} />
-      }
-    />
+    </span>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
index b552380d184..e141be534bc 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
@@ -7,10 +7,10 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import { useTranslation } from "@plane/i18n";
 import type { TIssue, TIssueServiceType, TIssueRelationTypes } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // components
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
 import { useTimeLineRelationOptions } from "@/components/relations";
@@ -137,14 +137,9 @@ export const RelationsCollapsibleContent = observer(function RelationsCollapsibl
         {filteredRelationsArray.map((relation) => (
           <div key={relation.relationKey}>
             <Collapsible
-              buttonClassName="w-full"
-              title={
-                <div className={`flex h-9 w-full items-center gap-1 px-2.5 py-1 ${relation.className}`}>
-                  <span>{relation.icon ? relation.icon(14) : null}</span>
-                  <span className="text-13 leading-5 font-medium">{relation.label}</span>
-                </div>
-              }
               defaultOpen
+              icon={relation.icon ? relation.icon(14) : undefined}
+              trigger={<span className="text-13 leading-5 font-medium">{relation.label}</span>}
             >
               <RelationIssueList
                 workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
index d1b5d80880d..b18d72c1aa0 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { RelationsCollapsibleContent } from "./content";
 import { RelationsCollapsibleTitle } from "./title";
+import { RelationActionButton } from "./quick-action-button";
 
 type Props = {
   workspaceSlug: string;
@@ -31,17 +32,14 @@ export const RelationsCollapsible = observer(function RelationsCollapsible(props
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("relations")}
-      title={
-        <RelationsCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          issueId={issueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("relations")}
+      trigger={<RelationsCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <RelationActionButton issueId={issueId} disabled={disabled} issueServiceType={issueServiceType} />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <RelationsCollapsibleContent
         workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
index 75e8084958f..cfb94686ad1 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
@@ -4,28 +4,23 @@
  * See the LICENSE file for details.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
 import { useTimeLineRelationOptions } from "@/components/relations";
-// local imports
-import { RelationActionButton } from "./quick-action-button";
 
 type Props = {
-  isOpen: boolean;
   issueId: string;
-  disabled: boolean;
   issueServiceType?: TIssueServiceType;
 };
 
 export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleTitle(props: Props) {
-  const { isOpen, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { issueId, issueServiceType = EIssueServiceType.ISSUES } = props;
   const { t } = useTranslation();
   // store hook
   const {
@@ -36,24 +31,12 @@ export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleT
   // derived values
   const relationsCount = getRelationCountByIssueId(issueId, ISSUE_RELATION_OPTIONS);
 
-  // indicator element
-  const indicatorElement = useMemo(
-    () => (
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.relations")}
       <span className="flex items-center justify-center">
-        <p className="text-14 !leading-3 text-tertiary">{relationsCount}</p>
+        <p className="text-14 leading-3! text-tertiary">{relationsCount}</p>
       </span>
-    ),
-    [relationsCount]
-  );
-
-  return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={t("common.relations")}
-      indicatorElement={indicatorElement}
-      actionItemElement={
-        !disabled && <RelationActionButton issueId={issueId} disabled={disabled} issueServiceType={issueServiceType} />
-      }
-    />
+    </span>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
index b76d7241002..f63f4a41c7b 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
@@ -7,12 +7,10 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { CircleDashed } from "lucide-react";
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import { ALL_ISSUES } from "@plane/constants";
-import { ChevronRightIcon } from "@plane/propel/icons";
 import type { IGroupByColumn, TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
-import { cn } from "@plane/utils";
 import { SubIssuesListItem } from "./list-item";
 
 interface TSubIssuesListGroupProps {
@@ -57,47 +55,42 @@ export const SubIssuesListGroup = observer(function SubIssuesListGroup(props: TS
 
   if (!workItemIds.length) return null;
 
+  const items = workItemIds?.map((workItemId) => (
+    <SubIssuesListItem
+      key={workItemId}
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+      parentIssueId={parentIssueId}
+      rootIssueId={rootIssueId}
+      issueId={workItemId}
+      canEdit={canEdit}
+      handleIssueCrudState={handleIssueCrudState}
+      subIssueOperations={subIssueOperations}
+      issueServiceType={serviceType}
+      spacingLeft={spacingLeft}
+      storeType={storeType}
+    />
+  ));
+
+  if (isAllIssues) return <>{items}</>;
+
   return (
-    <>
-      <Collapsible
-        isOpen={isCollapsibleOpen}
-        onToggle={() => setIsCollapsibleOpen(!isCollapsibleOpen)}
-        title={
-          !isAllIssues && (
-            <div className="flex items-center gap-2 p-3">
-              <ChevronRightIcon
-                className={cn("size-3.5 text-placeholder transition-all", {
-                  "rotate-90": isCollapsibleOpen,
-                })}
-                strokeWidth={2.5}
-              />
-              <div className="grid flex-shrink-0 place-items-center overflow-hidden">
-                {group.icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
-              </div>
-              <span className="text-13 font-medium text-primary">{group.name}</span>
-              <span className="text-13 text-placeholder">{workItemIds.length}</span>
-            </div>
-          )
-        }
-        buttonClassName={cn("hidden", !isAllIssues && "block")}
-      >
-        {workItemIds?.map((workItemId) => (
-          <SubIssuesListItem
-            key={workItemId}
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            parentIssueId={parentIssueId}
-            rootIssueId={rootIssueId}
-            issueId={workItemId}
-            canEdit={canEdit}
-            handleIssueCrudState={handleIssueCrudState}
-            subIssueOperations={subIssueOperations}
-            issueServiceType={serviceType}
-            spacingLeft={spacingLeft}
-            storeType={storeType}
-          />
-        ))}
-      </Collapsible>
-    </>
+    <Collapsible
+      open={isCollapsibleOpen}
+      onOpenChange={() => setIsCollapsibleOpen(!isCollapsibleOpen)}
+      icon={
+        <div className="grid shrink-0 place-items-center overflow-hidden">
+          {group.icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
+        </div>
+      }
+      trigger={
+        <>
+          <span className="text-13 font-medium text-primary">{group.name}</span>
+          <span className="text-13 text-placeholder">{workItemIds.length}</span>
+        </>
+      }
+    >
+      {items}
+    </Collapsible>
   );
 });
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
index 4bc8c79690c..eac612e8d87 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
@@ -7,13 +7,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import type { TIssueServiceType } from "@plane/types";
-import { Collapsible } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // local imports
 import { SubIssuesCollapsibleContent } from "./content";
 import { SubIssuesCollapsibleTitle } from "./title";
+import { SubWorkItemTitleActions } from "./title-actions";
 
 type Props = {
   workspaceSlug: string;
@@ -32,18 +33,19 @@ export const SubIssuesCollapsible = observer(function SubIssuesCollapsible(props
 
   return (
     <Collapsible
-      isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("sub-work-items")}
-      title={
-        <SubIssuesCollapsibleTitle
-          isOpen={isCollapsibleOpen}
-          parentIssueId={issueId}
-          disabled={disabled}
-          projectId={projectId}
-          workspaceSlug={workspaceSlug}
-        />
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("sub-work-items")}
+      trigger={<SubIssuesCollapsibleTitle parentIssueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen ? (
+          <SubWorkItemTitleActions
+            projectId={projectId}
+            parentId={issueId}
+            disabled={disabled}
+            issueServiceType={issueServiceType}
+          />
+        ) : undefined
       }
-      buttonClassName="w-full"
     >
       <SubIssuesCollapsibleContent
         workspaceSlug={workspaceSlug}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
index 8fd205b5f9d..a81a3b41183 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
@@ -10,22 +10,16 @@ import { CircularProgress } from "@makeplane/propel/components/circular-progress
 import { useTranslation } from "@plane/i18n";
 import type { TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { CollapsibleButton } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-import { SubWorkItemTitleActions } from "./title-actions";
 
 type Props = {
-  isOpen: boolean;
   parentIssueId: string;
-  disabled: boolean;
   issueServiceType?: TIssueServiceType;
-  projectId: string;
-  workspaceSlug: string;
 };
 
 export const SubIssuesCollapsibleTitle = observer(function SubIssuesCollapsibleTitle(props: Props) {
-  const { isOpen, parentIssueId, disabled, issueServiceType = EIssueServiceType.ISSUES, projectId } = props;
+  const { parentIssueId, issueServiceType = EIssueServiceType.ISSUES } = props;
   // translation
   const { t } = useTranslation();
   // store hooks
@@ -44,30 +38,19 @@ export const SubIssuesCollapsibleTitle = observer(function SubIssuesCollapsibleT
   const percentage = completedCount && totalCount ? (completedCount / totalCount) * 100 : 0;
 
   return (
-    <CollapsibleButton
-      isOpen={isOpen}
-      title={`${issueServiceType === EIssueServiceType.EPICS ? t("issue.label", { count: 1 }) : t("common.sub_work_items")}`}
-      indicatorElement={
-        <div className="flex items-center gap-1.5 text-13 text-tertiary">
-          <CircularProgress
-            value={percentage}
-            size="md"
-            variant={percentage === 100 ? "success" : "brand"}
-            aria-label="Sub-work-item progress"
-          />
-          <span>
-            {completedCount}/{totalCount} {t("common.done")}
-          </span>
-        </div>
-      }
-      actionItemElement={
-        <SubWorkItemTitleActions
-          projectId={projectId}
-          parentId={parentIssueId}
-          disabled={disabled}
-          issueServiceType={issueServiceType}
+    <span className="inline-flex items-center gap-2">
+      {issueServiceType === EIssueServiceType.EPICS ? t("issue.label", { count: 1 }) : t("common.sub_work_items")}
+      <span className="flex items-center gap-1.5 text-13 text-tertiary">
+        <CircularProgress
+          value={percentage}
+          size="md"
+          variant={percentage === 100 ? "success" : "brand"}
+          aria-label="Sub-work-item progress"
         />
-      }
-    />
+        <span>
+          {completedCount}/{totalCount} {t("common.done")}
+        </span>
+      </span>
+    </span>
   );
 });
diff --git a/apps/web/core/components/workspace/settings/members-list.tsx b/apps/web/core/components/workspace/settings/members-list.tsx
index 41b4bed3fb7..4de2bf41264 100644
--- a/apps/web/core/components/workspace/settings/members-list.tsx
+++ b/apps/web/core/components/workspace/settings/members-list.tsx
@@ -8,11 +8,9 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-import { Disclosure } from "@headlessui/react";
 // plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
 import { useTranslation } from "@plane/i18n";
-import { ChevronDownIcon } from "@plane/propel/icons";
-import { Collapsible } from "@plane/ui";
 // components
 import { CountChip } from "@/components/common/count-chip";
 import { MembersSettingsLoader } from "@/components/ui/loader/settings/members";
@@ -80,29 +78,20 @@ export const WorkspaceMembersList = observer(function WorkspaceMembersList(props
       </div>
       {isAdmin && searchedInvitationsIds && searchedInvitationsIds.length > 0 && (
         <Collapsible
-          isOpen={showPendingInvites}
-          onToggle={() => setShowPendingInvites((prev) => !prev)}
-          buttonClassName="w-full"
-          className=""
-          title={
-            <div className="flex w-full items-center justify-between pt-4">
-              <div className="flex">
-                <h4 className="pt-2 pb-2 text-h5-medium">{t("workspace_settings.settings.members.pending_invites")}</h4>
-                {searchedInvitationsIds && (
-                  <CountChip count={searchedInvitationsIds.length} className="m-auto ml-2 h-5" />
-                )}
-              </div>{" "}
-              <ChevronDownIcon className={`h-5 w-5 transition-all ${showPendingInvites ? "rotate-180" : ""}`} />
-            </div>
+          open={showPendingInvites}
+          onOpenChange={() => setShowPendingInvites((prev) => !prev)}
+          trigger={
+            <span className="inline-flex items-center gap-2 py-2">
+              <span className="text-h5-medium">{t("workspace_settings.settings.members.pending_invites")}</span>
+              {searchedInvitationsIds && <CountChip count={searchedInvitationsIds.length} className="h-5" />}
+            </span>
           }
         >
-          <Disclosure.Panel>
-            <div className="ml-auto items-center gap-1.5 rounded-md bg-surface-1 py-1.5">
-              {searchedInvitationsIds?.map((invitationId) => (
-                <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
-              ))}
-            </div>
-          </Disclosure.Panel>
+          <div className="ml-auto items-center gap-1.5 rounded-md bg-surface-1 py-1.5">
+            {searchedInvitationsIds?.map((invitationId) => (
+              <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
+            ))}
+          </div>
         </Collapsible>
       )}
     </>

From 42843c4fd26aa1d70ade9f92a388182a45be47ec Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Wed, 2 Sep 2026 19:41:31 +0530
Subject: [PATCH 2/8] refactor: enhance icon rendering in relations component

- Update the icon rendering logic in the RelationsCollapsibleContent component to apply additional styling using the cn utility.
- Ensure that icons are wrapped in a styled span for consistent presentation and alignment.
---
 .../issues/issue-detail-widgets/relations/content.tsx    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
index e141be534bc..2508df9bff9 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
@@ -11,6 +11,7 @@ import { Collapsible } from "@makeplane/propel/components/collapsible";
 import { useTranslation } from "@plane/i18n";
 import type { TIssue, TIssueServiceType, TIssueRelationTypes } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
+import { cn } from "@plane/utils";
 // components
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
 import { useTimeLineRelationOptions } from "@/components/relations";
@@ -138,7 +139,13 @@ export const RelationsCollapsibleContent = observer(function RelationsCollapsibl
           <div key={relation.relationKey}>
             <Collapsible
               defaultOpen
-              icon={relation.icon ? relation.icon(14) : undefined}
+              icon={
+                relation.icon ? (
+                  <span className={cn("flex items-center justify-center rounded p-0.5", relation.className)}>
+                    {relation.icon(14)}
+                  </span>
+                ) : undefined
+              }
               trigger={<span className="text-13 leading-5 font-medium">{relation.label}</span>}
             >
               <RelationIssueList

From 1ab84f6d09c56f907dac578f8944028b98b2dc32 Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Wed, 2 Sep 2026 19:45:52 +0530
Subject: [PATCH 3/8] refactor: adjust layout of RelationIssueList in
 RelationsCollapsibleContent

- Wrap RelationIssueList in a div to cancel the nested Collapsible's panel inset, ensuring proper alignment under the outer Relations collapsible.
- Improve visual consistency by preventing stacking of insets in the UI.
---
 .../relations/content.tsx                     | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
index 2508df9bff9..043750fd305 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
@@ -148,15 +148,19 @@ export const RelationsCollapsibleContent = observer(function RelationsCollapsibl
               }
               trigger={<span className="text-13 leading-5 font-medium">{relation.label}</span>}
             >
-              <RelationIssueList
-                workspaceSlug={workspaceSlug}
-                issueId={issueId}
-                relationKey={relation.relationKey}
-                issueIds={relation.issueIds}
-                disabled={disabled}
-                handleIssueCrudState={handleIssueCrudState}
-                issueServiceType={issueServiceType}
-              />
+              {/* Cancels this nested Collapsible's own panel inset so rows realign under
+                  the outer Relations collapsible's single inset instead of stacking two. */}
+              <div className="-mx-3">
+                <RelationIssueList
+                  workspaceSlug={workspaceSlug}
+                  issueId={issueId}
+                  relationKey={relation.relationKey}
+                  issueIds={relation.issueIds}
+                  disabled={disabled}
+                  handleIssueCrudState={handleIssueCrudState}
+                  issueServiceType={issueServiceType}
+                />
+              </div>
             </Collapsible>
           </div>
         ))}

From e54f3b516e41ae75ea6ac94f59404ca748e3441f Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Wed, 2 Sep 2026 19:48:05 +0530
Subject: [PATCH 4/8] refactor: improve layout of pending invitations in
 WorkspaceMembersList

- Wrap the Collapsible component for pending invitations in a div to enhance layout and spacing.
- Ensure consistent visual presentation by adjusting the structure of the component.
---
 .../workspace/settings/members-list.tsx       | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/apps/web/core/components/workspace/settings/members-list.tsx b/apps/web/core/components/workspace/settings/members-list.tsx
index 4de2bf41264..d41c9d9bf9f 100644
--- a/apps/web/core/components/workspace/settings/members-list.tsx
+++ b/apps/web/core/components/workspace/settings/members-list.tsx
@@ -77,22 +77,24 @@ export const WorkspaceMembersList = observer(function WorkspaceMembersList(props
         )}
       </div>
       {isAdmin && searchedInvitationsIds && searchedInvitationsIds.length > 0 && (
-        <Collapsible
-          open={showPendingInvites}
-          onOpenChange={() => setShowPendingInvites((prev) => !prev)}
-          trigger={
-            <span className="inline-flex items-center gap-2 py-2">
-              <span className="text-h5-medium">{t("workspace_settings.settings.members.pending_invites")}</span>
-              {searchedInvitationsIds && <CountChip count={searchedInvitationsIds.length} className="h-5" />}
-            </span>
-          }
-        >
-          <div className="ml-auto items-center gap-1.5 rounded-md bg-surface-1 py-1.5">
-            {searchedInvitationsIds?.map((invitationId) => (
-              <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
-            ))}
-          </div>
-        </Collapsible>
+        <div className="pt-4">
+          <Collapsible
+            open={showPendingInvites}
+            onOpenChange={() => setShowPendingInvites((prev) => !prev)}
+            trigger={
+              <span className="inline-flex items-center gap-2 py-2">
+                <span className="text-h5-medium">{t("workspace_settings.settings.members.pending_invites")}</span>
+                {searchedInvitationsIds && <CountChip count={searchedInvitationsIds.length} className="h-5" />}
+              </span>
+            }
+          >
+            <div className="ml-auto items-center gap-1.5 rounded-md bg-surface-1 py-1.5">
+              {searchedInvitationsIds?.map((invitationId) => (
+                <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
+              ))}
+            </div>
+          </Collapsible>
+        </div>
       )}
     </>
   );

From 341427afac6a586ceede093fa624c885c3a46f6d Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Wed, 2 Sep 2026 19:52:57 +0530
Subject: [PATCH 5/8] refactor: simplify onOpenChange handlers in collapsible
 components

- Update the onOpenChange prop in SubIssuesListGroup and WorkspaceMembersList to directly use the state setter function, improving code clarity and reducing unnecessary function wrapping.
---
 .../issue-detail-widgets/sub-issues/issues-list/list-group.tsx  | 2 +-
 apps/web/core/components/workspace/settings/members-list.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
index f63f4a41c7b..b8bd2c5424a 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
@@ -77,7 +77,7 @@ export const SubIssuesListGroup = observer(function SubIssuesListGroup(props: TS
   return (
     <Collapsible
       open={isCollapsibleOpen}
-      onOpenChange={() => setIsCollapsibleOpen(!isCollapsibleOpen)}
+      onOpenChange={setIsCollapsibleOpen}
       icon={
         <div className="grid shrink-0 place-items-center overflow-hidden">
           {group.icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
diff --git a/apps/web/core/components/workspace/settings/members-list.tsx b/apps/web/core/components/workspace/settings/members-list.tsx
index d41c9d9bf9f..99c75a9ce98 100644
--- a/apps/web/core/components/workspace/settings/members-list.tsx
+++ b/apps/web/core/components/workspace/settings/members-list.tsx
@@ -80,7 +80,7 @@ export const WorkspaceMembersList = observer(function WorkspaceMembersList(props
         <div className="pt-4">
           <Collapsible
             open={showPendingInvites}
-            onOpenChange={() => setShowPendingInvites((prev) => !prev)}
+            onOpenChange={setShowPendingInvites}
             trigger={
               <span className="inline-flex items-center gap-2 py-2">
                 <span className="text-h5-medium">{t("workspace_settings.settings.members.pending_invites")}</span>

From 71591a446c43f2d0f91885e30da6391fdb43911f Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Wed, 2 Sep 2026 19:54:13 +0530
Subject: [PATCH 6/8] refactor: simplify mapping of work item IDs in
 SubIssuesListGroup

- Remove optional chaining from the mapping of workItemIds to enhance code clarity and ensure consistent handling of the array.
---
 .../issue-detail-widgets/sub-issues/issues-list/list-group.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
index b8bd2c5424a..3b90c173ce6 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
@@ -55,7 +55,7 @@ export const SubIssuesListGroup = observer(function SubIssuesListGroup(props: TS
 
   if (!workItemIds.length) return null;
 
-  const items = workItemIds?.map((workItemId) => (
+  const items = workItemIds.map((workItemId) => (
     <SubIssuesListItem
       key={workItemId}
       workspaceSlug={workspaceSlug}

From 1071d53cc5fd9fa8b21c119d84806471057ec9ec Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 12:04:34 +0530
Subject: [PATCH 7/8] refactor: adjust padding in attachment list item and link
 list components

- Update padding in the attachment list item for improved spacing and alignment.
- Remove unnecessary padding from the link list component to streamline layout.
---
 .../components/issues/attachment/attachment-list-item.tsx     | 4 ++--
 .../core/components/issues/issue-detail/links/link-list.tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/core/components/issues/attachment/attachment-list-item.tsx b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
index ed7319a6b8b..6f518fd81c1 100644
--- a/apps/web/core/components/issues/attachment/attachment-list-item.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -60,14 +60,14 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
           window.open(fileURL, "_blank");
         }}
       >
-        <div className="group flex h-11 items-center justify-between gap-3 pr-2 pl-9 hover:bg-surface-2">
+        <div className="group flex h-11 items-center justify-between gap-3 px-3 hover:bg-surface-2">
           <div className="flex items-center gap-3 truncate text-13">
             <div className="flex items-center gap-3">{fileIcon}</div>
             <Tooltip label={`${fileName}.${fileExtension}`} layout="stacked" disabled={isMobile}>
               <p className="truncate font-medium text-secondary">{`${fileName}.${fileExtension}`}</p>
             </Tooltip>
             <span className="flex size-1.5 rounded-full bg-layer-1" />
-            <span className="flex-shrink-0 text-placeholder">{convertBytesToSize(attachment.attributes.size)}</span>
+            <span className="shrink-0 text-placeholder">{convertBytesToSize(attachment.attributes.size)}</span>
           </div>
 
           <div className="flex items-center gap-3">
diff --git a/apps/web/core/components/issues/issue-detail/links/link-list.tsx b/apps/web/core/components/issues/issue-detail/links/link-list.tsx
index e691ecba381..937f7e3bd5f 100644
--- a/apps/web/core/components/issues/issue-detail/links/link-list.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/link-list.tsx
@@ -35,7 +35,7 @@ export const LinkList = observer(function LinkList(props: TLinkList) {
   if (!issueLinks) return null;
 
   return (
-    <div className="flex flex-col gap-2 pt-4">
+    <div className="flex flex-col gap-2">
       {issueLinks.map((linkId) => (
         <IssueLinkItem
           key={linkId}

From 0373267dc6a79b219621096278a33ab9737773ad Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 12:20:11 +0530
Subject: [PATCH 8/8] chore: update @makeplane/propel version in lockfile to
 0.3.0

Align the pnpm-lock.yaml file to reflect the updated version of @makeplane/propel from 0.2.0 to 0.3.0 for consistency across importers.
---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7e8251a913..c1091fa51f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -876,7 +876,7 @@ importers:
         version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@makeplane/propel':
         specifier: 'catalog:'
-        version: 0.2.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
       '@plane/constants':
         specifier: workspace:*
         version: link:../../packages/constants