From bbf796faafc63092a0db65827d6db694e4591baf Mon Sep 17 00:00:00 2001
From: akumatus <12724894+akumatus@users.noreply.github.com>
Date: Wed, 19 Jun 2024 06:28:50 +0000
Subject: [PATCH] fix: icon of page reference node (#7255)

- Use `EdgelessIcon` if linked document mode is edgeless
- Update reference icon when document mode changes

https://github.com/toeverything/AFFiNE/assets/12724894/40db8930-dd7f-4154-ad0a-b1eea97d23db
---
 .../affine/reference-link/index.tsx           | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/reference-link/index.tsx b/packages/frontend/core/src/components/affine/reference-link/index.tsx
index ed6d203b5f..21b7033df5 100644
--- a/packages/frontend/core/src/components/affine/reference-link/index.tsx
+++ b/packages/frontend/core/src/components/affine/reference-link/index.tsx
@@ -6,14 +6,25 @@ import {
 } from '@affine/core/modules/peek-view';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { LinkedPageIcon, TodayIcon } from '@blocksuite/icons/rc';
+import {
+  LinkedEdgelessIcon,
+  LinkedPageIcon,
+  TodayIcon,
+} from '@blocksuite/icons/rc';
 import type { DocCollection } from '@blocksuite/store';
-import { useService } from '@toeverything/infra';
+import {
+  type DocMode,
+  DocsService,
+  LiveData,
+  useLiveData,
+  useService,
+} from '@toeverything/infra';
 import { type PropsWithChildren, useCallback, useRef } from 'react';
 
 import * as styles from './styles.css';
 
 export interface PageReferenceRendererOptions {
+  docMode: DocMode | null;
   pageId: string;
   docCollection: DocCollection;
   pageMetaHelper: ReturnType<typeof useDocMetaHelper>;
@@ -22,6 +33,7 @@ export interface PageReferenceRendererOptions {
 }
 // use a function to be rendered in the lit renderer
 export function pageReferenceRenderer({
+  docMode,
   pageId,
   pageMetaHelper,
   journalHelper,
@@ -31,7 +43,12 @@ export function pageReferenceRenderer({
   const referencedPage = pageMetaHelper.getDocMeta(pageId);
   let title =
     referencedPage?.title ?? t['com.affine.editor.reference-not-found']();
-  let icon = <LinkedPageIcon className={styles.pageReferenceIcon} />;
+  let icon =
+    docMode === 'page' ? (
+      <LinkedPageIcon className={styles.pageReferenceIcon} />
+    ) : (
+      <LinkedEdgelessIcon className={styles.pageReferenceIcon} />
+    );
   const isJournal = isPageJournal(pageId);
   const localizedJournalDate = getLocalizedJournalDateString(pageId);
   if (isJournal && localizedJournalDate) {
@@ -61,7 +78,12 @@ export function AffinePageReference({
   const pageMetaHelper = useDocMetaHelper(docCollection);
   const journalHelper = useJournalHelper(docCollection);
   const t = useAFFiNEI18N();
+
+  const docsService = useService(DocsService);
+  const mode$ = LiveData.from(docsService.list.observeMode(pageId), null);
+  const docMode = useLiveData(mode$);
   const el = pageReferenceRenderer({
+    docMode,
     pageId,
     pageMetaHelper,
     journalHelper,