chore: Combine 'pin' menu items into submenu

fix: Submenu should not appear when all items are not visible

app/actions/definitions/documents.tsx

@@ -150,10 +150,11 @@ export const duplicateDocument = createAction({
  * Pin a document to a collection. Pinned documents will be displayed at the top
  * of the collection for all collection members to see.
  */
-export const pinDocument = createAction({
+export const pinDocumentToCollection = createAction({
   name: ({ t }) => t("Pin to collection"),
   section: DocumentSection,
   icon: <PinIcon />,
+  iconInContextMenu: false,
   visible: ({ activeCollectionId, activeDocumentId, stores }) => {
     if (!activeDocumentId || !activeCollectionId) {
       return false;
@@ -188,6 +189,7 @@ export const pinDocumentToHome = createAction({
   name: ({ t }) => t("Pin to home"),
   section: DocumentSection,
   icon: <PinIcon />,
+  iconInContextMenu: false,
   visible: ({ activeDocumentId, currentTeamId, stores }) => {
     if (!currentTeamId || !activeDocumentId) {
       return false;
@@ -214,6 +216,13 @@ export const pinDocumentToHome = createAction({
   },
 });
 
+export const pinDocument = createAction({
+  name: ({ t }) => t("Pin"),
+  section: DocumentSection,
+  icon: <PinIcon />,
+  children: [pinDocumentToCollection, pinDocumentToHome],
+});
+
 export const printDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Print") : t("Print document"),
@@ -319,6 +328,6 @@ export const rootDocumentActions = [
   unstarDocument,
   duplicateDocument,
   printDocument,
-  pinDocument,
+  pinDocumentToCollection,
   pinDocumentToHome,
 ];

app/actions/index.ts

@@ -41,14 +41,17 @@ export function actionToMenuItem(
       : undefined;
 
   if (resolvedChildren) {
+    const items = resolvedChildren
+      .map((a) => actionToMenuItem(a, context))
+      .filter(Boolean)
+      .filter((a) => a.visible);
+
     return {
       type: "submenu",
       title,
       icon,
-      items: resolvedChildren
-        .map((a) => actionToMenuItem(a, context))
-        .filter((a) => !!a),
-      visible,
+      items,
+      visible: visible && items.length > 0,
     };
   }
 

app/menus/DocumentMenu.tsx

@@ -40,10 +40,7 @@ import Flex from "~/components/Flex";
 import Modal from "~/components/Modal";
 import Switch from "~/components/Switch";
 import { actionToMenuItem } from "~/actions";
-import {
-  pinDocument,
-  pinDocumentToHome,
-} from "~/actions/definitions/documents";
+import { pinDocument } from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
@@ -329,7 +326,6 @@ function DocumentMenu({
               visible: !document.isStarred && !!can.star,
               icon: <StarredIcon />,
             },
-            actionToMenuItem(pinDocumentToHome, context),
             actionToMenuItem(pinDocument, context),
             {
               type: "separator",