From bdc8806cbdeec4c3491bdf3688389137b2f146f0 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Fri, 20 Dec 2024 17:04:07 +0800
Subject: [PATCH] chore(core): events for backlinks

---
 .../bi-directional-link-panel.tsx             | 26 +++++++++++++++++--
 packages/frontend/track/src/events.ts         |  5 ++++
 2 files changed, 29 insertions(+), 2 deletions(-)

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 f38a17eef4de1..21df2041567df 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
@@ -12,6 +12,7 @@ import {
 import { toURLSearchParams } from '@affine/core/modules/navigation';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
 import { useI18n } from '@affine/i18n';
+import track from '@affine/track';
 import type { JobMiddleware } from '@blocksuite/affine/store';
 import { ToggleExpandIcon } from '@blocksuite/icons/rc';
 import * as Collapsible from '@radix-ui/react-collapsible';
@@ -93,8 +94,16 @@ const CollapsibleSection = ({
     docId,
     linkDocId
   );
+
+  const handleToggle = useCallback(() => {
+    setOpen(!open);
+    track.doc.biDirectionalLinksPanel.$.toggle({
+      type: open ? 'collapse' : 'expand',
+    });
+  }, [open, setOpen]);
+
   return (
-    <Collapsible.Root open={open} onOpenChange={setOpen}>
+    <Collapsible.Root open={open} onOpenChange={handleToggle}>
       <Collapsible.Trigger className={styles.link}>
         {title}
         {length ? (
@@ -197,6 +206,9 @@ export const BiDirectionalLinkPanel = () => {
 
   const handleClickShow = useCallback(() => {
     setShow(!show);
+    track.doc.biDirectionalLinksPanel.$.toggle({
+      type: show ? 'collapse' : 'expand',
+    });
   }, [show, setShow]);
 
   const textRendererOptions = useMemo(() => {
@@ -243,7 +255,14 @@ export const BiDirectionalLinkPanel = () => {
             {backlinkGroups.map(linkGroup => (
               <CollapsibleSection
                 key={linkGroup.docId}
-                title={<AffinePageReference pageId={linkGroup.docId} />}
+                title={
+                  <AffinePageReference
+                    pageId={linkGroup.docId}
+                    onClick={() => {
+                      track.doc.biDirectionalLinksPanel.backlinkTitle.navigate();
+                    }}
+                  />
+                }
                 length={linkGroup.links.length}
                 docId={docService.doc.id}
                 linkDocId={linkGroup.docId}
@@ -289,6 +308,9 @@ export const BiDirectionalLinkPanel = () => {
                         to={to}
                         key={link.blockId}
                         className={styles.linkPreview}
+                        onClick={() => {
+                          track.doc.biDirectionalLinksPanel.backlinkPreview.navigate();
+                        }}
                       >
                         {edgelessLink ? (
                           <>
diff --git a/packages/frontend/track/src/events.ts b/packages/frontend/track/src/events.ts
index 8d2554622aaab..9e2da883d175e 100644
--- a/packages/frontend/track/src/events.ts
+++ b/packages/frontend/track/src/events.ts
@@ -322,6 +322,11 @@ const PageEvents = {
     sidepanel: {
       property: ['addProperty'],
     },
+    biDirectionalLinksPanel: {
+      $: ['toggle'],
+      backlinkTitle: ['toggle', 'navigate'],
+      backlinkPreview: ['navigate'],
+    },
   },
   edgeless: {},
   workspace: {