feat: Allow templates from any collection to be used

fix: Hover state of context menu items with icons

app/components/ContextMenu/MenuItem.js

@@ -101,7 +101,8 @@ export const MenuAnchor = styled.a`
       ? "pointer-events: none;"
       : `
 
-  &:hover,
+  &:hover,  
+  &:focus,
   &.focus-visible {
     color: ${props.theme.white};
     background: ${props.theme.primary};
@@ -112,11 +113,6 @@ export const MenuAnchor = styled.a`
       fill: ${props.theme.white};
     }
   }
-
-  &:focus {
-    color: ${props.theme.white};
-    background: ${props.theme.primary};
-  }
   `};
 
   ${breakpoint("tablet")`

app/menus/TemplatesMenu.js

@@ -9,6 +9,7 @@ import Document from "models/Document";
 import Button from "components/Button";
 import ContextMenu from "components/ContextMenu";
 import MenuItem from "components/ContextMenu/MenuItem";
+import Separator from "components/ContextMenu/Separator";
 import useStores from "hooks/useStores";
 
 type Props = {|
@@ -19,12 +20,36 @@ function TemplatesMenu({ document }: Props) {
   const menu = useMenuState({ modal: true });
   const { documents } = useStores();
   const { t } = useTranslation();
-  const templates = documents.templatesInCollection(document.collectionId);
+  const templates = documents.templates;
 
   if (!templates.length) {
     return null;
   }
 
+  const templatesInCollection = templates.filter(
+    (t) => t.collectionId === document.collectionId
+  );
+  const otherTemplates = templates.filter(
+    (t) => t.collectionId !== document.collectionId
+  );
+
+  const renderTemplate = (template) => (
+    <MenuItem
+      key={template.id}
+      onClick={() => document.updateFromTemplate(template)}
+      {...menu}
+    >
+      <DocumentIcon />
+      <div>
+        <strong>{template.titleWithDefault}</strong>
+        <br />
+        <Author>
+          {t("By {{ author }}", { author: template.createdBy.name })}
+        </Author>
+      </div>
+    </MenuItem>
+  );
+
   return (
     <>
       <MenuButton {...menu}>
@@ -35,21 +60,11 @@ function TemplatesMenu({ document }: Props) {
         )}
       </MenuButton>
       <ContextMenu {...menu} aria-label={t("Templates")}>
-        {templates.map((template) => (
-          <MenuItem
-            key={template.id}
-            onClick={() => document.updateFromTemplate(template)}
-          >
-            <DocumentIcon />
-            <div>
-              <strong>{template.titleWithDefault}</strong>
-              <br />
-              <Author>
-                {t("By {{ author }}", { author: template.createdBy.name })}
-              </Author>
-            </div>
-          </MenuItem>
-        ))}
+        {templatesInCollection.map(renderTemplate)}
+        {otherTemplates.length && templatesInCollection.length ? (
+          <Separator />
+        ) : undefined}
+        {otherTemplates.map(renderTemplate)}
       </ContextMenu>
     </>
   );