From 65a87196d596756f6719a466bb42fc4bbe573a6b Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 28 Aug 2024 02:35:29 +0000
Subject: [PATCH] feat(core): impl the Doc Info and Bi-Directional Links
 display settings (#7991)

https://github.com/user-attachments/assets/a469254c-a2ea-4cf4-837e-f9a8bbe5b378
---
 .../affine/page-properties/table.tsx          | 66 +++++++++++--------
 .../bi-directional-link-panel.tsx             |  1 -
 .../block-suite-editor/lit-adaper.tsx         |  9 ++-
 3 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/page-properties/table.tsx b/packages/frontend/core/src/components/affine/page-properties/table.tsx
index 5c3d6b5419..c094266ba2 100644
--- a/packages/frontend/core/src/components/affine/page-properties/table.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/table.tsx
@@ -3,6 +3,7 @@ import { Button, IconButton, Menu, MenuItem, Tooltip } from '@affine/component';
 import { useCurrentWorkspacePropertiesAdapter } from '@affine/core/hooks/use-affine-adapter';
 import { track } from '@affine/core/mixpanel';
 import { DocLinksService } from '@affine/core/modules/doc-link';
+import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import type {
   PageInfoCustomProperty,
   PageInfoCustomPropertyMeta,
@@ -588,16 +589,21 @@ export const PagePropertiesTableHeader = ({
   const manager = useContext(managerContext);
 
   const t = useI18n();
-  const { docLinksServices } = useServices({
+  const {
+    docLinksServices,
+    docService,
+    workspaceService,
+    editorSettingService,
+  } = useServices({
     DocLinksServices: DocLinksService,
+    DocService,
+    WorkspaceService,
+    EditorSettingService,
   });
   const docBacklinks = docLinksServices.backlinks;
   const backlinks = useLiveData(docBacklinks.backlinks$);
 
-  const { docService, workspaceService } = useServices({
-    DocService,
-    WorkspaceService,
-  });
+  const settings = useLiveData(editorSettingService.editorSetting.settings$);
 
   const { syncing, retrying, serverClock } = useLiveData(
     workspaceService.workspace.engine.doc.docState$(docService.doc.id)
@@ -690,31 +696,33 @@ export const PagePropertiesTableHeader = ({
         {dTimestampElement}
       </div>
       <Divider />
-      <div className={styles.tableHeaderSecondaryRow}>
-        <div className={clsx(!open ? styles.pageInfoDimmed : null)}>
-          {t['com.affine.page-properties.page-info']()}
-        </div>
-        {properties.length === 0 || manager.readonly ? null : (
-          <PagePropertiesSettingsPopup>
-            <IconButton data-testid="page-info-show-more" size="20">
-              <MoreHorizontalIcon />
-            </IconButton>
-          </PagePropertiesSettingsPopup>
-        )}
-        <Collapsible.Trigger asChild role="button" onClick={handleCollapse}>
-          <div
-            className={styles.tableHeaderCollapseButtonWrapper}
-            data-testid="page-info-collapse"
-          >
-            <IconButton size="20">
-              <ToggleExpandIcon
-                className={styles.collapsedIcon}
-                data-collapsed={!open}
-              />
-            </IconButton>
+      {settings.displayDocInfo ? (
+        <div className={styles.tableHeaderSecondaryRow}>
+          <div className={clsx(!open ? styles.pageInfoDimmed : null)}>
+            {t['com.affine.page-properties.page-info']()}
           </div>
-        </Collapsible.Trigger>
-      </div>
+          {properties.length === 0 || manager.readonly ? null : (
+            <PagePropertiesSettingsPopup>
+              <IconButton data-testid="page-info-show-more" size="20">
+                <MoreHorizontalIcon />
+              </IconButton>
+            </PagePropertiesSettingsPopup>
+          )}
+          <Collapsible.Trigger asChild role="button" onClick={handleCollapse}>
+            <div
+              className={styles.tableHeaderCollapseButtonWrapper}
+              data-testid="page-info-collapse"
+            >
+              <IconButton size="20">
+                <ToggleExpandIcon
+                  className={styles.collapsedIcon}
+                  data-collapsed={!open}
+                />
+              </IconButton>
+            </div>
+          </Collapsible.Trigger>
+        </div>
+      ) : null}
     </div>
   );
 };
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx
index b6c4d36d64..d0ea533c37 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx
@@ -18,7 +18,6 @@ export const BiDirectionalLinkPanel = () => {
 
   const links = useLiveData(docLinksService.links.links$);
   const backlinks = useLiveData(docLinksService.backlinks.backlinks$);
-
   const handleClickShow = useCallback(() => {
     setShow(!show);
   }, [show]);
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
index a809a17c36..aa55a0a545 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
@@ -4,6 +4,7 @@ import {
   useLitPortalFactory,
 } from '@affine/component';
 import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
+import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { PeekViewService } from '@affine/core/modules/peek-view';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import type { DocMode } from '@blocksuite/blocks';
@@ -145,6 +146,8 @@ export const BlocksuiteDocEditor = forwardRef<
   const activeView = useLiveData(workbench.activeView$);
   const hash = useLiveData(activeView.location$).hash;
 
+  const editorSettingService = useService(EditorSettingService);
+
   const onDocRef = useCallback(
     (el: PageEditor) => {
       docRef.current = el;
@@ -178,6 +181,8 @@ export const BlocksuiteDocEditor = forwardRef<
 
   const [specs, portals] = usePatchSpecs(page, !!shared, 'page');
 
+  const settings = useLiveData(editorSettingService.editorSetting.settings$);
+
   return (
     <>
       <div className={styles.affineDocViewport} style={{ height: '100%' }}>
@@ -202,7 +207,9 @@ export const BlocksuiteDocEditor = forwardRef<
             }}
           ></div>
         ) : null}
-        {!page.readonly ? <BiDirectionalLinkPanel /> : null}
+        {!page.readonly && settings.displayBiDirectionalLink ? (
+          <BiDirectionalLinkPanel />
+        ) : null}
       </div>
       {portals}
     </>