feat(core): support create new template in starter-bar (#10570)

packages/frontend/core/src/blocksuite/block-suite-editor/starter-bar.tsx

@@ -1,3 +1,4 @@
+import { MenuSeparator } from '@affine/component';
 import {
   handleInlineAskAIAction,
   pageAIGroups,
@@ -6,7 +7,10 @@ import { DocsService } from '@affine/core/modules/doc';
 import { EditorService } from '@affine/core/modules/editor';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { TemplateDocService } from '@affine/core/modules/template-doc';
-import { TemplateListMenu } from '@affine/core/modules/template-doc/view/template-list-menu';
+import {
+  TemplateListMenu,
+  TemplateListMenuAdd,
+} from '@affine/core/modules/template-doc/view/template-list-menu';
 import { useI18n } from '@affine/i18n';
 import track from '@affine/track';
 import { PageRootBlockComponent } from '@blocksuite/affine/blocks';
@@ -134,6 +138,12 @@ const StarterBarNotEmpty = ({ doc }: { doc: Store }) => {
               open: templateMenuOpen,
               onOpenChange: onTemplateMenuOpenChange,
             }}
+            suffixItems={
+              <>
+                <MenuSeparator />
+                <TemplateListMenuAdd />
+              </>
+            }
           >
             <Badge
               data-testid="template-docs-badge"

packages/frontend/core/src/components/root-app-sidebar/template-doc-entrance.tsx

@@ -1,13 +1,12 @@
-import { Menu, MenuItem, MenuSeparator } from '@affine/component';
+import { Menu, MenuSeparator } from '@affine/component';
 import { MenuItem as SidebarMenuItem } from '@affine/core/modules/app-sidebar/views';
-import { DocsService } from '@affine/core/modules/doc';
-import { TemplateListMenuContentScrollable } from '@affine/core/modules/template-doc/view/template-list-menu';
-import { WorkbenchService } from '@affine/core/modules/workbench';
-import { inferOpenMode } from '@affine/core/utils';
+import {
+  TemplateListMenuAdd,
+  TemplateListMenuContentScrollable,
+} from '@affine/core/modules/template-doc/view/template-list-menu';
 import { useI18n } from '@affine/i18n';
 import track from '@affine/track';
 import { TemplateIcon } from '@blocksuite/icons/rc';
-import { useService } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
 
 export const TemplateDocEntrance = () => {
@@ -44,7 +43,7 @@ export const TemplateDocEntrance = () => {
             suffixItems={
               <>
                 <MenuSeparator />
-                <CreateNewTemplateMenuItem />
+                <TemplateListMenuAdd />
               </>
             }
           />
@@ -55,28 +54,3 @@ export const TemplateDocEntrance = () => {
     </SidebarMenuItem>
   );
 };
-
-const CreateNewTemplateMenuItem = () => {
-  const t = useI18n();
-  const docsService = useService(DocsService);
-  const workbench = useService(WorkbenchService).workbench;
-
-  const createNewTemplate = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      const record = docsService.createDoc({ isTemplate: true });
-      workbench.openDoc(record.id, { at: inferOpenMode(e) });
-    },
-    [docsService, workbench]
-  );
-
-  return (
-    <MenuItem
-      data-testid="template-doc-item-create"
-      prefixIcon={<TemplateIcon />}
-      onClick={createNewTemplate}
-      onAuxClick={createNewTemplate}
-    >
-      {t['com.affine.template-list.create-new']()}
-    </MenuItem>
-  );
-};

packages/frontend/core/src/modules/template-doc/view/template-list-menu.tsx

@@ -6,14 +6,19 @@ import {
   Scrollable,
 } from '@affine/component';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
+import { inferOpenMode } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
-import { DualLinkIcon, InformationIcon } from '@blocksuite/icons/rc';
+import {
+  DualLinkIcon,
+  InformationIcon,
+  TemplateIcon,
+} from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
-import { type DocRecord } from '../../doc';
+import { type DocRecord, DocsService } from '../../doc';
 import { DocDisplayMetaService } from '../../doc-display-meta';
-import { WorkbenchLink } from '../../workbench';
+import { WorkbenchLink, WorkbenchService } from '../../workbench';
 import { TemplateDocService } from '../services/template-doc';
 import * as styles from './styles.css';
 interface CommonProps {
@@ -143,3 +148,28 @@ export const TemplateListMenu = ({
     </Menu>
   );
 };
+
+export const TemplateListMenuAdd = () => {
+  const t = useI18n();
+  const docsService = useService(DocsService);
+  const workbench = useService(WorkbenchService).workbench;
+
+  const createNewTemplate = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const record = docsService.createDoc({ isTemplate: true });
+      workbench.openDoc(record.id, { at: inferOpenMode(e) });
+    },
+    [docsService, workbench]
+  );
+
+  return (
+    <MenuItem
+      data-testid="template-doc-item-create"
+      prefixIcon={<TemplateIcon />}
+      onClick={createNewTemplate}
+      onAuxClick={createNewTemplate}
+    >
+      {t['com.affine.template-list.create-new']()}
+    </MenuItem>
+  );
+};