feat: center peek view

packages/common/infra/src/livedata/livedata.ts

@@ -337,7 +337,7 @@ export class LiveData<T = unknown>
   distinctUntilChanged(comparator?: (previous: T, current: T) => boolean) {
     return LiveData.from(
       this.pipe(distinctUntilChanged(comparator)),
-      null as any
+      null as T
     );
   }
 

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 { PeekViewService } from '@affine/core/modules/peek-view';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import type { BlockSpec } from '@blocksuite/block-std';
 import {
@@ -30,6 +31,7 @@ import { AffinePageReference } from '../../affine/reference-link';
 import { BlocksuiteEditorJournalDocTitle } from './journal-doc-title';
 import {
   patchNotificationService,
+  patchPeekViewService,
   patchReferenceRenderer,
   type ReferenceReactRenderer,
 } from './specs/custom/spec-patchers';
@@ -66,6 +68,7 @@ interface BlocksuiteEditorProps {
 
 const usePatchSpecs = (page: Doc, specs: BlockSpec[]) => {
   const [reactToLit, portals] = useLitPortalFactory();
+  const peekViewService = useService(PeekViewService);
   const referenceRenderer: ReferenceReactRenderer = useMemo(() => {
     return function customReference(reference) {
       const pageId = reference.delta.attributes?.reference?.pageId;
@@ -83,8 +86,9 @@ const usePatchSpecs = (page: Doc, specs: BlockSpec[]) => {
       patchReferenceRenderer(patched, reactToLit, referenceRenderer),
       confirmModal
     );
+    patched = patchPeekViewService(patched, peekViewService);
     return patched;
-  }, [confirmModal, reactToLit, referenceRenderer, specs]);
+  }, [confirmModal, peekViewService, reactToLit, referenceRenderer, specs]);
 
   return [
     patchedSpecs,

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

@@ -6,6 +6,9 @@ import {
   type ToastOptions,
   type useConfirmModal,
 } from '@affine/component';
+import type { PeekViewService } from '@affine/core/modules/peek-view';
+import type { ActivePeekView } from '@affine/core/modules/peek-view/entities/peek-view';
+import { DebugLogger } from '@affine/debug';
 import type { BlockSpec } from '@blocksuite/block-std';
 import type {
   AffineReference,
@@ -15,6 +18,8 @@ import type {
 import { LitElement, type TemplateResult } from 'lit';
 import React, { createElement, type ReactNode } from 'react';
 
+const logger = new DebugLogger('affine::spec-patchers');
+
 export type ReferenceReactRenderer = (
   reference: AffineReference
 ) => React.ReactElement;
@@ -190,3 +195,27 @@ export function patchNotificationService(
   });
   return specs;
 }
+
+export function patchPeekViewService(
+  specs: BlockSpec[],
+  service: PeekViewService
+) {
+  const rootSpec = specs.find(
+    spec => spec.schema.model.flavour === 'affine:page'
+  ) as BlockSpec<string, RootService>;
+
+  if (!rootSpec) {
+    return specs;
+  }
+
+  patchSpecService(rootSpec, pageService => {
+    pageService.peekViewService = {
+      peek: (target: ActivePeekView['target']) => {
+        logger.debug('center peek', target);
+        service.peekView.open(target);
+      },
+    };
+  });
+
+  return specs;
+}

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

@@ -231,7 +231,7 @@ export const CollectionSidebarNavItem = ({
         <span>{collection.name}</span>
       </SidebarMenuLinkItem>
       <Collapsible.Content className={styles.collapsibleContent}>
-        <div style={{ marginLeft: 20, marginTop: -4 }}>
+        <div className={styles.docsListContainer}>
           {pagesToRender.map(page => {
             return (
               <Doc

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

@@ -1,19 +1,21 @@
 import { useBlockSuitePageReferences } from '@affine/core/hooks/use-block-suite-page-references';
-import { WorkbenchService } from '@affine/core/modules/workbench';
+import {
+  WorkbenchLink,
+  WorkbenchService,
+} from '@affine/core/modules/workbench';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import type { DocCollection, DocMeta } from '@blocksuite/store';
 import { useDraggable } from '@dnd-kit/core';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { DocsService, useLiveData, useService } from '@toeverything/infra';
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import {
   type DNDIdentifier,
   getDNDId,
 } from '../../../../hooks/affine/use-global-dnd-helper';
-import { useNavigateHelper } from '../../../../hooks/use-navigate-helper';
-import { MenuItem as CollectionItem } from '../../../app-sidebar';
+import { MenuLinkItem } from '../../../app-sidebar';
 import { DragMenuItemOverlay } from '../components/drag-menu-item-overlay';
 import { PostfixItem } from '../components/postfix-item';
 import { ReferencePage } from '../components/reference-page';
@@ -50,11 +52,6 @@ export const Doc = ({
     return docMode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
   }, [docMode]);
 
-  const { jumpToPage } = useNavigateHelper();
-  const clickDoc = useCallback(() => {
-    jumpToPage(docCollection.id, doc.id);
-  }, [jumpToPage, doc.id, docCollection.id]);
-
   const references = useBlockSuitePageReferences(docCollection, docId);
   const referencesToRender = references.filter(
     id => allPageMeta[id] && !allPageMeta[id]?.trash
@@ -78,11 +75,12 @@ export const Doc = ({
       data-draggable={true}
       data-dragging={isDragging}
     >
-      <CollectionItem
+      <MenuLinkItem
         data-testid="collection-page"
         data-type="collection-list-item"
         icon={icon}
-        onClick={clickDoc}
+        to={`/${docId}`}
+        linkComponent={WorkbenchLink}
         className={styles.title}
         active={active}
         collapsed={referencesToRender.length > 0 ? collapsed : undefined}
@@ -101,7 +99,7 @@ export const Doc = ({
         {...listeners}
       >
         {doc.title || t['Untitled']()}
-      </CollectionItem>
+      </MenuLinkItem>
       <Collapsible.Content className={styles.collapsibleContent}>
         {referencesToRender.map(id => {
           return (

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts

@@ -150,3 +150,9 @@ export const emptyCollectionNewButton = style({
   height: '28px',
   fontSize: cssVar('fontXs'),
 });
+export const docsListContainer = style({
+  marginLeft: 20,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+});

packages/frontend/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx

@@ -1,5 +1,8 @@
 import { useBlockSuitePageReferences } from '@affine/core/hooks/use-block-suite-page-references';
-import { WorkbenchService } from '@affine/core/modules/workbench';
+import {
+  WorkbenchLink,
+  WorkbenchService,
+} from '@affine/core/modules/workbench';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import type { DocCollection, DocMeta } from '@blocksuite/store';
@@ -60,10 +63,11 @@ export const ReferencePage = ({
         data-type="reference-page"
         data-testid={`reference-page-${pageId}`}
         active={active}
-        to={`/workspace/${docCollection.id}/${pageId}`}
+        to={`/${pageId}`}
         icon={icon}
         collapsed={collapsible ? collapsed : undefined}
         onCollapsedChange={setCollapsed}
+        linkComponent={WorkbenchLink}
         postfix={
           <PostfixItem
             docCollection={docCollection}

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favourite-nav-item.tsx

@@ -3,7 +3,7 @@ import {
   parseDNDId,
 } from '@affine/core/hooks/affine/use-global-dnd-helper';
 import { useBlockSuitePageReferences } from '@affine/core/hooks/use-block-suite-page-references';
-import { WorkbenchService } from '@affine/core/modules/workbench';
+import { WorkbenchLink, WorkbenchService } from '@affine/core/modules/workbench';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';
@@ -102,7 +102,8 @@ export const FavouriteDocSidebarNavItem = ({
         data-dragging={isDragging}
         className={draggableMenuItemStyles.draggableMenuItem}
         active={linkActive}
-        to={`/workspace/${workspace.id}/${pageId}`}
+        to={`/${pageId}`}
+        linkComponent={WorkbenchLink}
         collapsed={collapsible ? collapsed : undefined}
         onCollapsedChange={setCollapsed}
         postfix={

packages/frontend/core/src/modules/index.ts

@@ -5,6 +5,7 @@ import { configureCloudModule } from './cloud';
 import { configureCollectionModule } from './collection';
 import { configureFindInPageModule } from './find-in-page';
 import { configureNavigationModule } from './navigation';
+import { configurePeekViewModule } from './peek-view';
 import { configurePermissionsModule } from './permissions';
 import { configureWorkspacePropertiesModule } from './properties';
 import { configureRightSidebarModule } from './right-sidebar';
@@ -28,6 +29,7 @@ export function configureCommonModules(framework: Framework) {
   configureShareDocsModule(framework);
   configureTelemetryModule(framework);
   configureFindInPageModule(framework);
+  configurePeekViewModule(framework);
 }
 
 export function configureImpls(framework: Framework) {

packages/frontend/core/src/modules/peek-view/entities/peek-view.ts

@@ -0,0 +1,34 @@
+import type { BlockElement } from '@blocksuite/block-std';
+import type { AffineReference } from '@blocksuite/blocks';
+import { Entity, LiveData } from '@toeverything/infra';
+
+export type ActivePeekView = {
+  target:
+    | BlockElement
+    | AffineReference
+    | HTMLAnchorElement
+    | { docId: string; blockId?: string };
+};
+
+export class PeekViewEntity extends Entity {
+  constructor() {
+    super();
+  }
+
+  private readonly _active$ = new LiveData<ActivePeekView | null>(null);
+  private readonly _show$ = new LiveData<boolean>(false);
+
+  active$ = this._active$.distinctUntilChanged();
+  show$ = this._show$
+    .map(show => show && this._active$.value !== null)
+    .distinctUntilChanged();
+
+  open = (target: ActivePeekView['target']) => {
+    this._active$.next({ target });
+    this._show$.next(true);
+  };
+
+  close = () => {
+    this._show$.next(false);
+  };
+}

packages/frontend/core/src/modules/peek-view/index.ts

@@ -0,0 +1,11 @@
+import type { Framework } from '@toeverything/infra';
+
+import { PeekViewEntity } from './entities/peek-view';
+import { PeekViewService } from './services/peek-view';
+
+export function configurePeekViewModule(framework: Framework) {
+  framework.service(PeekViewService).entity(PeekViewEntity);
+}
+
+export { PeekViewEntity, PeekViewService };
+export { useInsidePeekView } from './view';

packages/frontend/core/src/modules/peek-view/services/peek-view.ts

@@ -0,0 +1,9 @@
+import { OnEvent, Service } from '@toeverything/infra';
+
+import { WorkbenchLocationChanged } from '../../workbench/services/workbench';
+import { PeekViewEntity } from '../entities/peek-view';
+
+@OnEvent(WorkbenchLocationChanged, e => e.peekView.close)
+export class PeekViewService extends Service {
+  public readonly peekView = this.framework.createEntity(PeekViewEntity);
+}

packages/frontend/core/src/modules/peek-view/view/doc-peek-controls.css.ts

@@ -0,0 +1,20 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  gap: 8,
+});
+
+export const button = style({
+  color: cssVar('iconColor'),
+  boxShadow: cssVar('shadow2'),
+  borderRadius: 8,
+  fontSize: '20px !important',
+  ':hover': {
+    background: cssVar('hoverColorFilled'),
+  },
+  pointerEvents: 'auto',
+});