diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/template-setting.css.ts b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/template-setting.css.ts
index 4e3b634f5c..674c2569f6 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/template-setting.css.ts
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/template-setting.css.ts
@@ -5,13 +5,35 @@ export const container = style({
width: '100%',
padding: '8px 16px',
borderTop: `0.5px solid ${cssVarV2.layer.insideBorder.border}`,
+ display: 'flex',
+ alignItems: 'center',
+ gap: 10,
});
export const trigger = style({
padding: '2px 4px',
borderRadius: 4,
+ flexShrink: 1,
+ minWidth: 0,
});
export const menu = style({
width: 280,
});
+
+export const deletedText = style({
+ textDecoration: 'line-through',
+ color: cssVarV2.text.placeholder,
+});
+export const deletedIcon = style({
+ color: cssVarV2.text.placeholder,
+});
+export const deletedTag = style({
+ height: 20,
+ borderRadius: 4,
+ border: `1px solid ${cssVarV2.button.error}`,
+ color: cssVarV2.button.error,
+ fontSize: 12,
+ lineHeight: '20px',
+ padding: '0 8px',
+});
diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/template-setting.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/template-setting.tsx
index aaac9dbc41..7d4024cf72 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/template-setting.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/template-setting.tsx
@@ -1,19 +1,24 @@
import { Button, Menu } from '@affine/component';
+import { DocsService } from '@affine/core/modules/doc';
import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
import { TemplateDocService } from '@affine/core/modules/template-doc';
import { TemplateListMenuContentScrollable } from '@affine/core/modules/template-doc/view/template-list-menu';
+import { useI18n } from '@affine/i18n';
import { TemplateIcon } from '@blocksuite/icons/rc';
import { useLiveData, useService } from '@toeverything/infra';
+import clsx from 'clsx';
import { useCallback, useMemo } from 'react';
import * as styles from './template-setting.css';
export const JournalTemplateSetting = () => {
+ const t = useI18n();
const templateDocService = useService(TemplateDocService);
const docDisplayService = useService(DocDisplayMetaService);
const journalTemplateDocId = useLiveData(
templateDocService.setting.journalTemplateDocId$
);
+ const docsService = useService(DocsService);
const title = useLiveData(
useMemo(() => {
@@ -22,6 +27,10 @@ export const JournalTemplateSetting = () => {
: null;
}, [docDisplayService, journalTemplateDocId])
);
+ const journalTemplateDoc = useLiveData(
+ journalTemplateDocId ? docsService.list.doc$(journalTemplateDocId) : null
+ );
+ const isDeleted = useLiveData(journalTemplateDoc?.trash$);
const updateJournalTemplate = useCallback(
(templateId: string) => {
@@ -40,12 +49,21 @@ export const JournalTemplateSetting = () => {
>
}
+ prefix={
+ {title}
+ ) : (
+ title
+ )}
+ {isDeleted &&