From 882408bc0e04a0ba1a59f06ba738f0c6263e318f Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 12 Sep 2023 22:09:38 -0400
Subject: [PATCH] Add actions to create document from template in command bar

---
 app/components/CommandBar.tsx              | 23 ++------
 app/components/Sidebar/App.tsx             |  3 --
 app/hooks/useTemplateActions.tsx           | 63 ++++++++++++++++++++++
 shared/i18n/locales/en_US/translation.json |  1 +
 4 files changed, 69 insertions(+), 21 deletions(-)
 create mode 100644 app/hooks/useTemplateActions.tsx

diff --git a/app/components/CommandBar.tsx b/app/components/CommandBar.tsx
index df3deb3fb..e87134edd 100644
--- a/app/components/CommandBar.tsx
+++ b/app/components/CommandBar.tsx
@@ -11,39 +11,26 @@ import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
 import useSettingsActions from "~/hooks/useSettingsActions";
-import { CommandBarAction } from "~/types";
+import useTemplateActions from "~/hooks/useTemplateActions";
 
 function CommandBar() {
   const { t } = useTranslation();
   const settingsActions = useSettingsActions();
+  const templateActions = useTemplateActions();
   const commandBarActions = React.useMemo(
-    () => [...rootActions, settingsActions],
-    [settingsActions]
+    () => [...rootActions, templateActions, settingsActions],
+    [settingsActions, templateActions]
   );
 
   useCommandBarActions(commandBarActions);
 
-  const { rootAction } = useKBar((state) => ({
-    rootAction: state.currentRootActionId
-      ? (state.actions[
-          state.currentRootActionId
-        ] as unknown as CommandBarAction)
-      : undefined,
-  }));
-
   return (
     <>
       <KBarPortal>
         <Positioner>
           <Animator>
             <SearchActions />
-            <SearchInput
-              placeholder={`${
-                rootAction?.placeholder ||
-                rootAction?.name ||
-                t("Type a command or search")
-              }…`}
-            />
+            <SearchInput defaultPlaceholder={t("Type a command or search")} />
             <CommandBarResults />
           </Animator>
         </Positioner>
diff --git a/app/components/Sidebar/App.tsx b/app/components/Sidebar/App.tsx
index 6feb4fef8..00c8949d4 100644
--- a/app/components/Sidebar/App.tsx
+++ b/app/components/Sidebar/App.tsx
@@ -41,9 +41,6 @@ function AppSidebar() {
   React.useEffect(() => {
     if (!user.isViewer) {
       void documents.fetchDrafts();
-
-      // TODO: Move this out of sidebar
-      void documents.fetchTemplates();
     }
   }, [documents, user.isViewer]);
 
diff --git a/app/hooks/useTemplateActions.tsx b/app/hooks/useTemplateActions.tsx
new file mode 100644
index 000000000..0ee7e7fed
--- /dev/null
+++ b/app/hooks/useTemplateActions.tsx
@@ -0,0 +1,63 @@
+import { NewDocumentIcon, ShapesIcon } from "outline-icons";
+import * as React from "react";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
+import { createAction } from "~/actions";
+import { DocumentSection } from "~/actions/sections";
+import history from "~/utils/history";
+import { newDocumentPath } from "~/utils/routeHelpers";
+import useStores from "./useStores";
+
+const useTemplatesActions = () => {
+  const { documents } = useStores();
+
+  React.useEffect(() => {
+    void documents.fetchTemplates();
+  }, [documents]);
+
+  const actions = React.useMemo(
+    () =>
+      documents.templatesAlphabetical.map((item) =>
+        createAction({
+          name: item.titleWithDefault,
+          analyticsName: "New document",
+          section: DocumentSection,
+          icon: item.emoji ? (
+            <EmojiIcon emoji={item.emoji} />
+          ) : (
+            <NewDocumentIcon />
+          ),
+          keywords: "create",
+          perform: ({ activeCollectionId, inStarredSection }) =>
+            history.push(
+              newDocumentPath(item.collectionId ?? activeCollectionId, {
+                templateId: item.id,
+              }),
+              {
+                starred: inStarredSection,
+              }
+            ),
+        })
+      ),
+    [documents.templatesAlphabetical]
+  );
+
+  const newFromTemplate = React.useMemo(
+    () =>
+      createAction({
+        id: "templates",
+        name: ({ t }) => t("New from template"),
+        placeholder: ({ t }) => t("Choose a template"),
+        section: DocumentSection,
+        icon: <ShapesIcon />,
+        visible: ({ currentTeamId, stores }) =>
+          !!currentTeamId &&
+          stores.policies.abilities(currentTeamId).createDocument,
+        children: () => actions,
+      }),
+    [actions]
+  );
+
+  return newFromTemplate;
+};
+
+export default useTemplatesActions;
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 4dfb2432b..4a1ce9700 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -359,6 +359,7 @@
   "Self Hosted": "Self Hosted",
   "Integrations": "Integrations",
   "Google Analytics": "Google Analytics",
+  "Choose a template": "Choose a template",
   "Revoke token": "Revoke token",
   "Revoke": "Revoke",
   "Show path to document": "Show path to document",