feat(core): preview template & snapshot import (#8193)

packages/frontend/core/src/components/cloud/share-header-right-item/import-template.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@affine/component';
+import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
+import { useI18n } from '@affine/i18n';
+
+export const ImportTemplateButton = ({
+  workspaceId,
+  docId,
+  name,
+}: {
+  workspaceId: string;
+  docId: string;
+  name: string;
+}) => {
+  const t = useI18n();
+  const { jumpToImportTemplate } = useNavigateHelper();
+  return (
+    <Button
+      variant="primary"
+      onClick={() => jumpToImportTemplate(workspaceId, docId, name)}
+    >
+      {t['com.affine.share-page.header.import-template']()}
+    </Button>
+  );
+};

packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx

@@ -2,6 +2,7 @@ import { AuthService } from '@affine/core/modules/cloud';
 import type { DocMode } from '@blocksuite/blocks';
 import { useLiveData, useService } from '@toeverything/infra';
 
+import { ImportTemplateButton } from './import-template';
 import { PresentButton } from './present';
 import { SignIn } from './sign-in';
 import * as styles from './styles.css';
@@ -9,28 +10,45 @@ import { PublishPageUserAvatar } from './user-avatar';
 
 export type ShareHeaderRightItemProps = {
   workspaceId: string;
-  pageId: string;
+  docId: string;
   publishMode: DocMode;
+  isTemplate?: boolean;
+  templateName?: string;
 };
 
-const ShareHeaderRightItem = ({ ...props }: ShareHeaderRightItemProps) => {
+const ShareHeaderRightItem = ({
+  publishMode,
+  isTemplate,
+  templateName,
+  workspaceId,
+  docId,
+}: ShareHeaderRightItemProps) => {
   const loginStatus = useLiveData(useService(AuthService).session.status$);
-  const { publishMode } = props;
   const authenticated = loginStatus === 'authenticated';
   return (
     <div className={styles.rightItemContainer}>
-      {authenticated ? null : <SignIn />}
-      {publishMode === 'edgeless' ? <PresentButton /> : null}
-      {authenticated ? (
+      {isTemplate ? (
+        <ImportTemplateButton
+          docId={docId}
+          workspaceId={workspaceId}
+          name={templateName ?? ''}
+        />
+      ) : (
         <>
-          <div
-            className={styles.headerDivider}
-            data-authenticated={true}
-            data-is-edgeless={publishMode === 'edgeless'}
-          />
-          <PublishPageUserAvatar />
+          {authenticated ? null : <SignIn />}
+          {publishMode === 'edgeless' ? <PresentButton /> : null}
+          {authenticated ? (
+            <>
+              <div
+                className={styles.headerDivider}
+                data-authenticated={true}
+                data-is-edgeless={publishMode === 'edgeless'}
+              />
+              <PublishPageUserAvatar />
+            </>
+          ) : null}
         </>
-      ) : null}
+      )}
     </div>
   );
 };