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 -->

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}>
+    <ContextMenu
-      <DragHandle id={docId} className={styles.cardDragHandle} />
+      asChild
-      <header className={styles.cardViewHeader}>
+      disabled={!showMoreOperation}
-        <DocIcon id={docId} className={styles.cardViewIcon} />
+      items={<MoreMenuContent docId={docId} />}
-        <DocTitle
+    >
-          id={docId}
+      <li className={styles.cardViewRoot}>
-          className={styles.cardViewTitle}
+        <DragHandle id={docId} className={styles.cardDragHandle} />
-          data-testid="doc-list-item-title"
+        <header className={styles.cardViewHeader}>
-        />
+          <DocIcon id={docId} className={styles.cardViewIcon} />
-        {quickActions.map(action => {
+          <DocTitle
-          return (
+            id={docId}
-            <Tooltip key={action.key} content={t.t(action.name)}>
+            className={styles.cardViewTitle}
-              <action.Component size="16" doc={doc} />
+            data-testid="doc-list-item-title"
-            </Tooltip>
-          );
-        })}
-        {selectMode ? (
-          <Select id={docId} className={styles.cardViewCheckbox} />
-        ) : (
-          <MoreMenuButton
-            docId={docId}
-            contentOptions={cardMoreMenuContentOptions}
-            iconProps={{ size: '16' }}
           />
-        )}
+          {quickActions.map(action => {
-      </header>
+            return (
-      <DocPreview id={docId} className={styles.cardPreviewContainer} />
+              <Tooltip key={action.key} content={t.t(action.name)}>
-      <CardViewProperties docId={docId} />
+                <action.Component size="16" doc={doc} />
-    </li>
+              </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>
   );
 };