feat(core): add deleted state for sidebar journal template (#9980)

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',
+});

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 = () => {
       >
         <Button
           variant="plain"
-          prefix={<TemplateIcon />}
+          prefix={
+            <TemplateIcon
+              className={clsx({ [styles.deletedIcon]: isDeleted })}
+            />
+          }
           className={styles.trigger}
         >
-          {title}
+          {isDeleted ? (
+            <del className={styles.deletedText}>{title}</del>
+          ) : (
+            title
+          )}
         </Button>
       </Menu>
+      {isDeleted && <div className={styles.deletedTag}>{t['Deleted']()}</div>}
     </div>
   );
 };

packages/frontend/i18n/src/resources/en.json

@@ -26,6 +26,7 @@
   "DB_FILE_PATH_INVALID": "Database file path invalid",
   "Date": "Date",
   "Delete": "Delete",
+  "Deleted": "Deleted",
   "Disable": "Disable",
   "Disable Public Sharing": "Disable public sharing",
   "Disable Snapshot": "Disable snapshot",