refactor(core): use new backlink indexer

packages/common/infra/src/modules/doc/entities/record-list.ts

@@ -29,6 +29,23 @@ export class DocRecordList extends Entity {
     []
   );
 
+  public readonly trashDocs$ = LiveData.from<DocRecord[]>(
+    this.store.watchTrashDocIds().pipe(
+      map(ids =>
+        ids.map(id => {
+          const exists = this.pool.get(id);
+          if (exists) {
+            return exists;
+          }
+          const record = this.framework.createEntity(DocRecord, { id });
+          this.pool.set(id, record);
+          return record;
+        })
+      )
+    ),
+    []
+  );
+
   public readonly isReady$ = LiveData.from(
     this.store.watchDocListReady(),
     false

packages/common/infra/src/modules/doc/entities/record.ts

@@ -58,5 +58,6 @@ export class DocRecord extends Entity<{ id: string }> {
   }
 
   title$ = this.meta$.map(meta => meta.title ?? '');
+
   trash$ = this.meta$.map(meta => meta.trash ?? false);
 }

packages/common/infra/src/modules/doc/stores/docs.ts

@@ -41,7 +41,29 @@ export class DocsStore extends Store {
       return () => {
         dispose();
       };
-    }).pipe(distinctUntilChanged((p, c) => isEqual(p, c)));
+    });
+  }
+
+  watchTrashDocIds() {
+    return new Observable<string[]>(subscriber => {
+      const emit = () => {
+        subscriber.next(
+          this.workspaceService.workspace.docCollection.meta.docMetas
+            .map(v => (v.trash ? v.id : null))
+            .filter(Boolean) as string[]
+        );
+      };
+
+      emit();
+
+      const dispose =
+        this.workspaceService.workspace.docCollection.meta.docMetaUpdated.on(
+          emit
+        ).dispose;
+      return () => {
+        dispose();
+      };
+    });
   }
 
   watchDocMeta(id: string) {

packages/common/infra/src/sync/job/impl/indexeddb/index.ts

@@ -233,7 +233,6 @@ export class IndexedDBJobQueue<J> implements JobQueue<J> {
         fromPromise(async () => {
           const trx = this.database.transaction(['jobs'], 'readonly');
           const remaining = await trx.objectStore('jobs').count();
-          console.log(remaining);
           return { remaining };
         })
       )

packages/frontend/core/src/components/affine/page-properties/table.tsx

@@ -8,7 +8,7 @@ import {
   Tooltip,
 } from '@affine/component';
 import { useCurrentWorkspacePropertiesAdapter } from '@affine/core/hooks/use-affine-adapter';
-import { useBlockSuitePageBacklinks } from '@affine/core/hooks/use-block-suite-page-backlinks';
+import { DocLinksService } from '@affine/core/modules/doc-link';
 import type {
   PageInfoCustomProperty,
   PageInfoCustomPropertyMeta,
@@ -380,7 +380,7 @@ export const PagePropertiesSettingsPopup = ({
 };
 
 type PageBacklinksPopupProps = PropsWithChildren<{
-  backlinks: string[];
+  backlinks: { docId: string; blockId: string; title: string }[];
 }>;
 
 export const PageBacklinksPopup = ({
@@ -398,11 +398,11 @@ export const PageBacklinksPopup = ({
       }}
       items={
         <div className={styles.backlinksList}>
-          {backlinks.map(pageId => (
+          {backlinks.map(link => (
             <AffinePageReference
-              key={pageId}
+              key={link.docId + ':' + link.blockId}
               wrapper={MenuItem}
-              pageId={pageId}
+              pageId={link.docId}
               docCollection={manager.workspace.docCollection}
             />
           ))}
@@ -597,10 +597,11 @@ export const PagePropertiesTableHeader = ({
   const manager = useContext(managerContext);
 
   const t = useI18n();
-  const backlinks = useBlockSuitePageBacklinks(
-    manager.workspace.docCollection,
-    manager.pageId
-  );
+  const { docLinksServices } = useServices({
+    DocLinksServices: DocLinksService,
+  });
+  const docBacklinks = docLinksServices.backlinks;
+  const backlinks = useLiveData(docBacklinks.backlinks$);
 
   const { docService, workspaceService } = useServices({
     DocService,

packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.css.ts

@@ -0,0 +1,72 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  width: '100%',
+  maxWidth: cssVar('--affine-editor-width'),
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  paddingLeft: cssVar('--affine-editor-side-padding', '24'),
+  paddingRight: cssVar('--affine-editor-side-padding', '24'),
+  fontSize: cssVar('--affine-font-base'),
+});
+
+export const dividerContainer = style({
+  height: '16px',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const divider = style({
+  background: cssVar('--affine-border-color'),
+  height: '0.5px',
+  width: '100%',
+});
+
+export const titleLine = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const title = style({
+  fontWeight: 500,
+  fontSize: '15px',
+  lineHeight: '24px',
+  color: cssVar('--affine-text-primary-color'),
+});
+
+export const showButton = style({
+  width: '56px',
+  height: '28px',
+  borderRadius: '8px',
+  border: '1px solid ' + cssVar('--affine-border-color'),
+  backgroundColor: cssVar('--affine-white'),
+  textAlign: 'center',
+  fontSize: '12px',
+  lineHeight: '28px',
+  fontWeight: '500',
+  color: cssVar('--affine-text-primary-color'),
+  cursor: 'pointer',
+});
+
+export const linksContainer = style({
+  marginBottom: '16px',
+});
+
+export const linksTitles = style({
+  color: cssVar('--affine-text-secondary-color'),
+  height: '32px',
+  lineHeight: '32px',
+});
+
+export const link = style({
+  width: '100%',
+  height: '32px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  whiteSpace: 'nowrap',
+});

packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx

@@ -0,0 +1,77 @@
+import { DocLinksService } from '@affine/core/modules/doc-link';
+import {
+  useLiveData,
+  useServices,
+  WorkspaceService,
+} from '@toeverything/infra';
+import { useCallback, useState } from 'react';
+
+import { AffinePageReference } from '../../affine/reference-link';
+import * as styles from './bi-directional-link-panel.css';
+
+export const BiDirectionalLinkPanel = () => {
+  const [show, setShow] = useState(false);
+  const { docLinksService, workspaceService } = useServices({
+    DocLinksService,
+    WorkspaceService,
+  });
+
+  const links = useLiveData(docLinksService.links.links$);
+  const backlinks = useLiveData(docLinksService.backlinks.backlinks$);
+
+  const handleClickShow = useCallback(() => {
+    setShow(!show);
+  }, [show]);
+
+  return (
+    <div className={styles.container}>
+      {!show && (
+        <div className={styles.dividerContainer}>
+          <div className={styles.divider}></div>
+        </div>
+      )}
+
+      <div className={styles.titleLine}>
+        <div className={styles.title}>Bi-Directional Links</div>
+        <div className={styles.showButton} onClick={handleClickShow}>
+          {show ? 'Hide' : 'Show'}
+        </div>
+      </div>
+
+      {show && (
+        <>
+          <div className={styles.dividerContainer}>
+            <div className={styles.divider}></div>
+          </div>
+          <div className={styles.linksContainer}>
+            <div className={styles.linksTitles}>
+              Backlinks · {backlinks.length}
+            </div>
+            {backlinks.map(link => (
+              <div key={link.docId} className={styles.link}>
+                <AffinePageReference
+                  key={link.docId}
+                  pageId={link.docId}
+                  docCollection={workspaceService.workspace.docCollection}
+                />
+              </div>
+            ))}
+          </div>
+          <div className={styles.linksContainer}>
+            <div className={styles.linksTitles}>
+              Outgoing links · {links.length}
+            </div>
+            {links.map(link => (
+              <div key={link.docId} className={styles.link}>
+                <AffinePageReference
+                  pageId={link.docId}
+                  docCollection={workspaceService.workspace.docCollection}
+                />
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -7,7 +7,6 @@ import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
 import { PeekViewService } from '@affine/core/modules/peek-view';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import {
-  BiDirectionalLinkPanel,
   DocMetaTags,
   DocTitle,
   EdgelessEditor,
@@ -34,6 +33,7 @@ import React, {
 
 import { PagePropertiesTable } from '../../affine/page-properties';
 import { AffinePageReference } from '../../affine/reference-link';
+import { BiDirectionalLinkPanel } from './bi-directional-link-panel';
 import { BlocksuiteEditorJournalDocTitle } from './journal-doc-title';
 import {
   patchDocModeService,
@@ -65,10 +65,6 @@ const adapted = {
     react: React,
     elementClass: EdgelessEditor,
   }),
-  BiDirectionalLinkPanel: createReactComponentFromLit({
-    react: React,
-    elementClass: BiDirectionalLinkPanel,
-  }),
 };
 
 interface BlocksuiteEditorProps {
@@ -211,9 +207,7 @@ export const BlocksuiteDocEditor = forwardRef<
             }}
           ></div>
         ) : null}
-        {docPage && !page.readonly ? (
-          <adapted.BiDirectionalLinkPanel doc={page} pageRoot={docPage} />
-        ) : null}
+        {!page.readonly ? <BiDirectionalLinkPanel /> : null}
       </div>
       {portals}
     </>

packages/frontend/core/src/components/page-list/page-group.tsx

@@ -183,7 +183,10 @@ export const ItemGroup = <T extends ListItem>({
           ) : null}
         </div>
       ) : null}
-      <Collapsible.Content className={styles.collapsibleContent}>
+      <Collapsible.Content
+        className={styles.collapsibleContent}
+        data-state={!collapsed ? 'open' : 'closed'}
+      >
         <div className={styles.collapsibleContentInner}>
           {items.map(item => (
             <PageListItemRenderer key={item.id} {...item} />

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -231,10 +231,6 @@ export const CollectionSidebarNavItemContent = ({
     () => new Set(collection.allowList),
     [collection.allowList]
   );
-  const allPagesMeta = useMemo(
-    () => Object.fromEntries(pages.map(v => [v.id, v])),
-    [pages]
-  );
   const removeFromAllowList = useCallback(
     (id: string) => {
       collectionService.deletePageFromCollection(collection.id, id);
@@ -259,18 +255,16 @@ export const CollectionSidebarNavItemContent = ({
         filtered.map(page => {
           return (
             <Doc
+              docId={page.id}
               parentId={dndId}
               inAllowList={allowList.has(page.id)}
               removeFromAllowList={removeFromAllowList}
-              allPageMeta={allPagesMeta}
-              doc={page}
               key={page.id}
-              docCollection={docCollection}
             />
           );
         })
       ) : (
-        <div className={styles.emptyCollection}>
+        <div className={styles.noReferences}>
           {t['com.affine.collection.emptyCollection']()}
         </div>
       )}