feat(core): info modal should render backlinks with preview (#9387)

fix AF-2033

packages/frontend/core/src/desktop/dialogs/doc-info/info-modal.tsx

@@ -5,6 +5,7 @@ import {
   PropertyCollapsibleContent,
   PropertyCollapsibleSection,
 } from '@affine/component';
+import { BacklinkGroups } from '@affine/core/components/blocksuite/block-suite-editor/bi-directional-link-panel';
 import { CreatePropertyMenuItems } from '@affine/core/components/doc-properties/menu/create-doc-property';
 import { DocPropertyRow } from '@affine/core/components/doc-properties/table';
 import type { DocCustomPropertyInfo } from '@affine/core/modules/db';
@@ -162,7 +163,8 @@ export const InfoTable = ({
       {backlinks && backlinks.length > 0 ? (
         <>
           <LinksRow
-            references={backlinks}
+            count={backlinks.length}
+            references={<BacklinkGroups />}
             onClick={onClose}
             label={t['com.affine.page-properties.backlinks']()}
           />
@@ -172,6 +174,7 @@ export const InfoTable = ({
       {links && links.length > 0 ? (
         <>
           <LinksRow
+            count={links.length}
             references={links}
             onClick={onClose}
             label={t['com.affine.page-properties.outgoing-links']()}

packages/frontend/core/src/desktop/dialogs/doc-info/links-row.css.ts

@@ -5,7 +5,7 @@ import { globalStyle, style } from '@vanilla-extract/css';
 export const wrapper = style({
   width: '100%',
   borderRadius: 4,
-  color: cssVar('textPrimaryColor'),
+  color: cssVarV2('text/primary'),
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
@@ -16,10 +16,15 @@ export const wrapper = style({
 });
 
 globalStyle(`${wrapper} svg`, {
-  color: cssVar('iconSecondary'),
+  color: cssVarV2('icon/secondary'),
   fontSize: 16,
   transform: 'none',
 });
+
+globalStyle(`${wrapper}:hover svg`, {
+  color: cssVarV2('icon/primary'),
+});
+
 globalStyle(`${wrapper} span`, {
   fontSize: cssVar('fontSm'),
   whiteSpace: 'nowrap',

packages/frontend/core/src/desktop/dialogs/doc-info/links-row.tsx

@@ -1,35 +1,39 @@
 import { PropertyCollapsibleSection } from '@affine/component';
 import { AffinePageReference } from '@affine/core/components/affine/reference-link';
 import type { Backlink, Link } from '@affine/core/modules/doc-link';
-import type { MouseEvent } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 
 import * as styles from './links-row.css';
 
 export const LinksRow = ({
   references,
+  count,
   label,
   className,
   onClick,
 }: {
-  references: Backlink[] | Link[];
+  references: Backlink[] | Link[] | ReactNode;
+  count: number;
   label: string;
   className?: string;
   onClick?: (e: MouseEvent) => void;
 }) => {
   return (
     <PropertyCollapsibleSection
-      title={`${label} · ${references.length}`}
+      title={`${label} · ${count}`}
       className={className}
     >
-      {references.map(link => (
-        <AffinePageReference
-          key={link.docId}
-          pageId={link.docId}
-          params={'params' in link ? link.params : undefined}
-          className={styles.wrapper}
-          onClick={onClick}
-        />
-      ))}
+      {Array.isArray(references)
+        ? references.map(link => (
+            <AffinePageReference
+              key={link.docId}
+              pageId={link.docId}
+              params={'params' in link ? link.params : undefined}
+              className={styles.wrapper}
+              onClick={onClick}
+            />
+          ))
+        : references}
     </PropertyCollapsibleSection>
   );
 };