From 7409940cc69b2f84bd6186a7174ae87676b9c515 Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Fri, 25 Jul 2025 18:07:17 +0800
Subject: [PATCH] feat(core): add context menu to card view (#13258)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added a context menu to document cards, allowing additional actions
when enabled.

* **Improvements**
* The context menu is now conditionally enabled based on live data,
ensuring it only appears when relevant.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../explorer/docs-view/doc-list-item.tsx      | 63 ++++++++++---------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx b/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx
index 335399f417..641787b329 100644
--- a/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx
+++ b/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx
@@ -371,40 +371,47 @@ export const CardViewDoc = ({ docId }: DocListItemProps) => {
   const selectMode = useLiveData(contextValue.selectMode$);
   const docsService = useService(DocsService);
   const doc = useLiveData(docsService.list.doc$(docId));
+  const showMoreOperation = useLiveData(contextValue.showMoreOperation$);
 
   if (!doc) {
     return null;
   }
 
   return (
-    <li className={styles.cardViewRoot}>
-      <DragHandle id={docId} className={styles.cardDragHandle} />
-      <header className={styles.cardViewHeader}>
-        <DocIcon id={docId} className={styles.cardViewIcon} />
-        <DocTitle
-          id={docId}
-          className={styles.cardViewTitle}
-          data-testid="doc-list-item-title"
-        />
-        {quickActions.map(action => {
-          return (
-            <Tooltip key={action.key} content={t.t(action.name)}>
-              <action.Component size="16" doc={doc} />
-            </Tooltip>
-          );
-        })}
-        {selectMode ? (
-          <Select id={docId} className={styles.cardViewCheckbox} />
-        ) : (
-          <MoreMenuButton
-            docId={docId}
-            contentOptions={cardMoreMenuContentOptions}
-            iconProps={{ size: '16' }}
+    <ContextMenu
+      asChild
+      disabled={!showMoreOperation}
+      items={<MoreMenuContent docId={docId} />}
+    >
+      <li className={styles.cardViewRoot}>
+        <DragHandle id={docId} className={styles.cardDragHandle} />
+        <header className={styles.cardViewHeader}>
+          <DocIcon id={docId} className={styles.cardViewIcon} />
+          <DocTitle
+            id={docId}
+            className={styles.cardViewTitle}
+            data-testid="doc-list-item-title"
           />
-        )}
-      </header>
-      <DocPreview id={docId} className={styles.cardPreviewContainer} />
-      <CardViewProperties docId={docId} />
-    </li>
+          {quickActions.map(action => {
+            return (
+              <Tooltip key={action.key} content={t.t(action.name)}>
+                <action.Component size="16" doc={doc} />
+              </Tooltip>
+            );
+          })}
+          {selectMode ? (
+            <Select id={docId} className={styles.cardViewCheckbox} />
+          ) : (
+            <MoreMenuButton
+              docId={docId}
+              contentOptions={cardMoreMenuContentOptions}
+              iconProps={{ size: '16' }}
+            />
+          )}
+        </header>
+        <DocPreview id={docId} className={styles.cardPreviewContainer} />
+        <CardViewProperties docId={docId} />
+      </li>
+    </ContextMenu>
   );
 };