From 9d61b41c0538255859d80bd1c6a14f96d0b07aac Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Sat, 18 Jan 2025 17:02:25 +0000
Subject: [PATCH] feat(core): add template mark on detail page header (#9764)

close AF-2136
---
 .../detail-page/detail-page-header.css.ts     | 20 +++++++++++
 .../detail-page/detail-page-header.tsx        | 33 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.css.ts b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.css.ts
index 35f6e76e3e..98eb9ef926 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.css.ts
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.css.ts
@@ -13,6 +13,8 @@ export const header = style({
   width: '100%',
   alignItems: 'center',
   gap: 12,
+  containerName: 'detail-page-header',
+  containerType: 'inline-size',
 });
 export const spacer = style({
   flexGrow: 1,
@@ -56,3 +58,21 @@ export const dragPreview = style({
   backgroundColor: cssVarV2('layer/background/primary'),
   borderRadius: '12px',
 });
+
+export const templateMark = style({
+  backgroundColor: cssVarV2.button.templateLabelBackground,
+  color: cssVarV2.button.primary,
+  borderRadius: 4,
+  padding: '2px 8px',
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: '20px',
+});
+
+export const journalTemplateMark = style({
+  '@container': {
+    '(width <= 400px)': {
+      display: 'none',
+    },
+  },
+});
diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx
index f599dbdfdb..b89b4980d4 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx
@@ -16,9 +16,11 @@ import { BlocksuiteHeaderTitle } from '@affine/core/components/blocksuite/block-
 import { EditorModeSwitch } from '@affine/core/components/blocksuite/block-suite-mode-switch';
 import { useRegisterCopyLinkCommands } from '@affine/core/components/hooks/affine/use-register-copy-link-commands';
 import { HeaderDivider } from '@affine/core/components/pure/header';
+import { DocService } from '@affine/core/modules/doc';
 import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import { EditorService } from '@affine/core/modules/editor';
 import { JournalService } from '@affine/core/modules/journal';
+import { TemplateDocService } from '@affine/core/modules/template-doc';
 import { ViewIcon, ViewTitle } from '@affine/core/modules/workbench';
 import type { Workspace } from '@affine/core/modules/workspace';
 import type { AffineDNDData } from '@affine/core/types/dnd';
@@ -26,7 +28,16 @@ import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import type { Store } from '@blocksuite/affine/store';
 import { useLiveData, useService } from '@toeverything/infra';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import {
+  forwardRef,
+  type HTMLAttributes,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import * as styles from './detail-page-header.css';
 import { useDetailPageHeaderResponsive } from './use-header-responsive';
@@ -48,6 +59,24 @@ const Header = forwardRef<
 
 Header.displayName = 'forwardRef(Header)';
 
+const TemplateMark = memo(function TemplateMark({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  const t = useI18n();
+  const doc = useService(DocService).doc;
+  const templateDocService = useService(TemplateDocService);
+  const isTemplate = useLiveData(templateDocService.list.isTemplate$(doc.id));
+
+  if (!isTemplate) return null;
+
+  return (
+    <div className={clsx(styles.templateMark, className)} {...props}>
+      {t['Template']()}
+    </div>
+  );
+});
+
 interface PageHeaderProps {
   page: Store;
   workspace: Workspace;
@@ -79,6 +108,7 @@ export function JournalPageHeader({ page, workspace }: PageHeaderProps) {
       <div className={styles.journalWeekPicker}>
         <JournalWeekDatePicker page={page} />
       </div>
+      <TemplateMark className={styles.journalTemplateMark} />
       {hideToday ? null : <JournalTodayButton />}
       <HeaderDivider />
       <PageHeaderMenuButton
@@ -132,6 +162,7 @@ export function NormalPageHeader({ page, workspace }: PageHeaderProps) {
         docId={page.id}
         inputHandleRef={titleInputHandleRef}
       />
+      <TemplateMark />
       <div className={styles.iconButtonContainer}>
         {hideCollect ? null : (
           <>