feat: Command Bar (#2669)

app/components/ContextMenu/Template.js

@@ -2,7 +2,7 @@
 import { ExpandedIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import {
   useMenuState,
   MenuButton,
@@ -15,10 +15,20 @@ import Header from "./Header";
 import MenuItem, { MenuAnchor } from "./MenuItem";
 import Separator from "./Separator";
 import ContextMenu from ".";
-import { type MenuItem as TMenuItem } from "types";
+import { actionToMenuItem } from "actions";
+import useStores from "hooks/useStores";
+import type {
+  MenuItem as TMenuItem,
+  Action,
+  ActionContext,
+  MenuSeparator,
+  MenuHeading,
+} from "types";
 
 type Props = {|
   items: TMenuItem[],
+  actions: (Action | MenuSeparator | MenuHeading)[],
+  context?: $Shape<ActionContext>,
 |};
 
 const Disclosure = styled(ExpandedIcon)`
@@ -68,8 +78,30 @@ export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
   return filtered;
 }
 
-function Template({ items, ...menu }: Props): React.Node {
-  const filteredTemplates = filterTemplateItems(items);
+function Template({ items, actions, context, ...menu }: Props): React.Node {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const stores = useStores();
+  const { ui } = stores;
+
+  const ctx = {
+    t,
+    isCommandBar: false,
+    isContextMenu: true,
+    activeCollectionId: ui.activeCollectionId,
+    activeDocumentId: ui.activeDocumentId,
+    location,
+    stores,
+    ...context,
+  };
+
+  const filteredTemplates = filterTemplateItems(
+    actions
+      ? actions.map((action) =>
+          action.type ? action : actionToMenuItem(action, ctx)
+        )
+      : items
+  );
   const iconIsPresentInAnyMenuItem = filteredTemplates.find(
     (item) => !item.type && !!item.icon
   );

app/components/ContextMenu/index.js

@@ -123,6 +123,7 @@ export const Background = styled.div`
   border-radius: 6px;
   padding: 6px 0;
   min-width: 180px;
+  min-height: 44px;
   overflow: hidden;
   overflow-y: auto;
   max-height: 75vh;