feat(core): allow database properties to be expanded via peek view

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

@@ -21,6 +21,7 @@ import {
   useRef,
 } from 'react';
 
+import type { DefaultOpenProperty } from '../../doc-properties';
 import { BlocksuiteDocEditor, BlocksuiteEdgelessEditor } from './lit-adaper';
 import * as styles from './styles.css';
 
@@ -29,6 +30,7 @@ interface BlocksuiteEditorContainerProps {
   mode: DocMode;
   shared?: boolean;
   className?: string;
+  defaultOpenProperty?: DefaultOpenProperty;
   style?: React.CSSProperties;
 }
 
@@ -43,7 +45,7 @@ export const BlocksuiteEditorContainer = forwardRef<
   AffineEditorContainer,
   BlocksuiteEditorContainerProps
 >(function AffineEditorContainer(
-  { page, mode, className, style, shared },
+  { page, mode, className, style, shared, defaultOpenProperty },
   ref
 ) {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -171,6 +173,7 @@ export const BlocksuiteEditorContainer = forwardRef<
           ref={docRef}
           titleRef={docTitleRef}
           onClickBlank={handleClickPageModeBlank}
+          defaultOpenProperty={defaultOpenProperty}
         />
       ) : (
         <BlocksuiteEdgelessEditor

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

@@ -16,13 +16,15 @@ import { use } from 'foxact/use';
 import type { CSSProperties } from 'react';
 import { Suspense, useEffect } from 'react';
 
+import type { DefaultOpenProperty } from '../../doc-properties';
 import { BlocksuiteEditorContainer } from './blocksuite-editor-container';
 import { NoPageRootError } from './no-page-error';
 
 export type EditorProps = {
   page: Doc;
   mode: DocMode;
   shared?: boolean;
+  defaultOpenProperty?: DefaultOpenProperty;
   // on Editor ready
   onEditorReady?: (editor: AffineEditorContainer) => (() => void) | void;
   style?: CSSProperties;
@@ -58,6 +60,7 @@ const BlockSuiteEditorImpl = ({
   shared,
   style,
   onEditorReady,
+  defaultOpenProperty,
 }: EditorProps) => {
   usePageRoot(page);
 
@@ -134,6 +137,7 @@ const BlockSuiteEditorImpl = ({
       mode={mode}
       page={page}
       shared={shared}
+      defaultOpenProperty={defaultOpenProperty}
       ref={editorRef}
       className={className}
       style={style}

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

@@ -39,7 +39,10 @@ import {
   AffinePageReference,
   AffineSharedPageReference,
 } from '../../affine/reference-link';
-import { DocPropertiesTable } from '../../doc-properties';
+import {
+  type DefaultOpenProperty,
+  DocPropertiesTable,
+} from '../../doc-properties';
 import { BiDirectionalLinkPanel } from './bi-directional-link-panel';
 import { BlocksuiteEditorJournalDocTitle } from './journal-doc-title';
 import {
@@ -76,6 +79,7 @@ const adapted = {
 interface BlocksuiteEditorProps {
   page: Doc;
   shared?: boolean;
+  defaultOpenProperty?: DefaultOpenProperty;
 }
 
 const usePatchSpecs = (shared: boolean, mode: DocMode) => {
@@ -191,7 +195,13 @@ export const BlocksuiteDocEditor = forwardRef<
     titleRef?: React.Ref<DocTitle>;
   }
 >(function BlocksuiteDocEditor(
-  { page, shared, onClickBlank, titleRef: externalTitleRef },
+  {
+    page,
+    shared,
+    onClickBlank,
+    titleRef: externalTitleRef,
+    defaultOpenProperty,
+  },
   ref
 ) {
   const titleRef = useRef<DocTitle | null>(null);
@@ -245,7 +255,9 @@ export const BlocksuiteDocEditor = forwardRef<
         ) : (
           <BlocksuiteEditorJournalDocTitle page={page} />
         )}
-        {!shared ? <DocPropertiesTable /> : null}
+        {!shared ? (
+          <DocPropertiesTable defaultOpenProperty={defaultOpenProperty} />
+        ) : null}
         <adapted.DocEditor
           className={styles.docContainer}
           ref={onDocRef}

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx

@@ -255,10 +255,11 @@ export function patchPeekViewService(service: PeekViewService) {
     ) => {
       logger.debug('center peek', element);
       const { template, target, ...props } = element;
+
       return service.peekView.open(
         {
           element: target,
-          ...props,
+          docRef: props,
         },
         template,
         options?.abortSignal

packages/frontend/core/src/components/doc-properties/table.tsx

@@ -41,6 +41,20 @@ type DocBacklinksPopupProps = PropsWithChildren<{
   backlinks: { docId: string; blockId: string; title: string }[];
 }>;
 
+export type DefaultOpenProperty =
+  | {
+      type: 'workspace';
+    }
+  | {
+      type: 'database';
+      databaseId: string;
+      databaseRowId: string;
+    };
+
+export interface DocPropertiesTableProps {
+  defaultOpenProperty?: DefaultOpenProperty;
+}
+
 export const DocBacklinksPopup = ({
   backlinks,
   children,
@@ -231,18 +245,19 @@ export const DocPropertyRow = ({
   );
 };
 
-interface DocPropertiesTableBodyProps {
+interface DocWorkspacePropertiesTableBodyProps {
   className?: string;
   style?: React.CSSProperties;
+  defaultOpen?: boolean;
 }
 
 // 🏷️ Tags     (⋅ xxx) (⋅ yyy)
 // #️⃣ Number   123456
 // +  Add a property
-export const DocPropertiesTableBody = forwardRef<
+const DocWorkspacePropertiesTableBody = forwardRef<
   HTMLDivElement,
-  DocPropertiesTableBodyProps & HTMLProps<HTMLDivElement>
->(({ className, style, ...props }, ref) => {
+  DocWorkspacePropertiesTableBodyProps & HTMLProps<HTMLDivElement>
+>(({ className, style, defaultOpen, ...props }, ref) => {
   const t = useI18n();
   const docsService = useService(DocsService);
   const workbenchService = useService(WorkbenchService);
@@ -258,6 +273,7 @@ export const DocPropertiesTableBody = forwardRef<
       className={clsx(styles.tableBodyRoot, className)}
       style={style}
       title={t.t('com.affine.workspace.properties')}
+      defaultCollapsed={!defaultOpen}
       {...props}
     >
       <PropertyCollapsibleContent
@@ -334,10 +350,12 @@ export const DocPropertiesTableBody = forwardRef<
     </PropertyCollapsibleSection>
   );
 });
-DocPropertiesTableBody.displayName = 'PagePropertiesTableBody';
+DocWorkspacePropertiesTableBody.displayName = 'PagePropertiesTableBody';
 
-const DocPropertiesTableInner = () => {
-  const [expanded, setExpanded] = useState(false);
+const DocPropertiesTableInner = ({
+  defaultOpenProperty,
+}: DocPropertiesTableProps) => {
+  const [expanded, setExpanded] = useState(!!defaultOpenProperty);
   return (
     <div className={styles.root}>
       <Collapsible.Root
@@ -347,9 +365,24 @@ const DocPropertiesTableInner = () => {
       >
         <DocPropertiesTableHeader open={expanded} onOpenChange={setExpanded} />
         <Collapsible.Content>
-          <DocPropertiesTableBody />
+          <DocWorkspacePropertiesTableBody
+            defaultOpen={
+              !defaultOpenProperty || defaultOpenProperty.type === 'workspace'
+            }
+          />
           <div className={styles.tableHeaderDivider} />
-          <DocDatabaseBacklinkInfo />
+          <DocDatabaseBacklinkInfo
+            defaultOpen={
+              defaultOpenProperty?.type === 'database'
+                ? [
+                    {
+                      databaseId: defaultOpenProperty.databaseId,
+                      rowId: defaultOpenProperty.databaseRowId,
+                    },
+                  ]
+                : []
+            }
+          />
         </Collapsible.Content>
       </Collapsible.Root>
     </div>
@@ -358,6 +391,8 @@ const DocPropertiesTableInner = () => {
 
 // this is the main component that renders the page properties table at the top of the page below
 // the page title
-export const DocPropertiesTable = () => {
-  return <DocPropertiesTableInner />;
+export const DocPropertiesTable = ({
+  defaultOpenProperty,
+}: DocPropertiesTableProps) => {
+  return <DocPropertiesTableInner defaultOpenProperty={defaultOpenProperty} />;
 };

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -31,6 +31,7 @@ export interface PageDetailEditorProps {
 export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
   const editor = useService(EditorService).editor;
   const mode = useLiveData(editor.mode$);
+  const defaultOpenProperty = useLiveData(editor.defaultOpenProperty$);
 
   const isSharedMode = editor.isSharedMode;
   const editorSetting = useService(EditorSettingService).editorSetting;
@@ -68,6 +69,7 @@ export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
         } as CSSProperties
       }
       mode={mode}
+      defaultOpenProperty={defaultOpenProperty}
       page={editor.doc.blockSuiteDoc}
       shared={isSharedMode}
       onEditorReady={onLoad}

packages/frontend/core/src/mobile/pages/workspace/detail/sheets/doc-info.tsx

@@ -1,5 +1,8 @@
 import { Divider, Scrollable } from '@affine/component';
-import { DocPropertiesTable } from '@affine/core/components/doc-properties';
+import {
+  type DefaultOpenProperty,
+  DocPropertiesTable,
+} from '@affine/core/components/doc-properties';
 import { LinksRow } from '@affine/core/components/doc-properties/info-modal/links-row';
 import { TimeRow } from '@affine/core/components/doc-properties/info-modal/time-row';
 import { DocsSearchService } from '@affine/core/modules/docs-search';
@@ -9,7 +12,13 @@ import { Suspense, useMemo } from 'react';
 
 import * as styles from './doc-info.css';
 
-export const DocInfoSheet = ({ docId }: { docId: string }) => {
+export const DocInfoSheet = ({
+  docId,
+  defaultOpenProperty,
+}: {
+  docId: string;
+  defaultOpenProperty?: DefaultOpenProperty;
+}) => {
   const docsSearchService = useService(DocsSearchService);
   const t = useI18n();
 
@@ -52,7 +61,7 @@ export const DocInfoSheet = ({ docId }: { docId: string }) => {
               <Divider size="thinner" />
             </>
           ) : null}
-          <DocPropertiesTable />
+          <DocPropertiesTable defaultOpenProperty={defaultOpenProperty} />
         </Suspense>
       </Scrollable.Viewport>
       <Scrollable.Scrollbar className={styles.scrollBar} />

packages/frontend/core/src/modules/doc-info/views/database-properties/doc-database-backlink-info.tsx

@@ -95,6 +95,14 @@ const DatabaseBacklinkRow = ({
   }, [row?.cells]);
   const t = useI18n();
 
+  const pageRefParams = useMemo(() => {
+    const params = new URLSearchParams();
+    if (row?.id) {
+      params.set('blockIds', row.databaseId);
+    }
+    return params;
+  }, [row]);
+
   if (!row || !sortedCells) {
     return null;
   }
@@ -105,7 +113,11 @@ const DatabaseBacklinkRow = ({
       defaultCollapsed={!defaultOpen}
       icon={<DatabaseTableViewIcon />}
       suffix={
-        <AffinePageReference className={styles.docRefLink} pageId={row.docId} />
+        <AffinePageReference
+          className={styles.docRefLink}
+          pageId={row.docId}
+          params={pageRefParams}
+        />
       }
     >
       <PropertyCollapsibleContent
@@ -131,8 +143,8 @@ export const DocDatabaseBacklinkInfo = ({
   defaultOpen = [],
 }: {
   defaultOpen?: {
-    docId: string;
-    blockId: string;
+    databaseId: string;
+    rowId: string;
   }[];
 }) => {
   const doc = useService(DocService).doc;
@@ -151,11 +163,13 @@ export const DocDatabaseBacklinkInfo = ({
 
   return (
     <div className={styles.root}>
-      {rows.map(({ docId, rowId, row$ }) => (
+      {rows.map(({ docId, databaseBlockId, rowId, row$ }) => (
         <Fragment key={`${docId}-${rowId}`}>
           <DatabaseBacklinkRow
             defaultOpen={defaultOpen?.some(
-              backlink => backlink.docId === docId && backlink.blockId === rowId
+              backlink =>
+                backlink.databaseId === databaseBlockId &&
+                backlink.rowId === rowId
             )}
             row$={row$}
           />

packages/frontend/core/src/modules/editor/entities/editor.ts

@@ -1,3 +1,4 @@
+import type { DefaultOpenProperty } from '@affine/core/components/doc-properties';
 import type {
   DocMode,
   EdgelessRootService,
@@ -30,6 +31,9 @@ export class Editor extends Entity {
     this.workspaceService.workspace.openOptions.isSharedMode;
 
   readonly editorContainer$ = new LiveData<AffineEditorContainer | null>(null);
+  readonly defaultOpenProperty$ = new LiveData<DefaultOpenProperty | undefined>(
+    undefined
+  );
 
   isPresenting$ = new LiveData<boolean>(false);
 
@@ -61,6 +65,10 @@ export class Editor extends Entity {
     this.editorContainer$.next(editorContainer);
   }
 
+  setDefaultOpenProperty(defaultOpenProperty: DefaultOpenProperty | undefined) {
+    this.defaultOpenProperty$.next(defaultOpenProperty);
+  }
+
   /**
    * sync editor params with view query string
    */
@@ -103,6 +111,17 @@ export class Editor extends Entity {
         if (!isEqual(selector, omit(editorParams, ['mode']))) {
           this.setSelector(selector);
         }
+
+        if (params.databaseId && params.databaseRowId) {
+          const defaultOpenProperty: DefaultOpenProperty = {
+            type: 'database',
+            databaseId: params.databaseId,
+            databaseRowId: params.databaseRowId,
+          };
+          if (!isEqual(defaultOpenProperty, this.defaultOpenProperty$.value)) {
+            this.setDefaultOpenProperty(defaultOpenProperty);
+          }
+        }
       } finally {
         updating = false;
       }