this._setNoteHidden(note, !note.hidden)}
class="note-status-button"
diff --git a/packages/blocks/src/page-block/edgeless/components/notes-status.ts b/packages/blocks/src/page-block/edgeless/components/notes-status.ts
new file mode 100644
index 000000000000..1ea58913d877
--- /dev/null
+++ b/packages/blocks/src/page-block/edgeless/components/notes-status.ts
@@ -0,0 +1,96 @@
+import { HiddenIcon } from '@blocksuite/global/config';
+import { assertExists } from '@blocksuite/store';
+import { computePosition, flip, offset } from '@floating-ui/dom';
+import { html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { getBlockElementById } from '../../../__internal__/utils/query.js';
+import type { NoteBlockModel } from '../../../note-block/note-model.js';
+import type { EdgelessPageBlockComponent } from '../edgeless-page-block.js';
+
+export function EdgelessNotesStatus(
+ edgeless: EdgelessPageBlockComponent,
+ notes: NoteBlockModel[]
+) {
+ const state = edgeless.selection.state;
+ const isSelectOne = state.selected.length === 1;
+ const singleSelected = state.selected[0];
+
+ if (!isSelectOne) return nothing;
+
+ const notesWithoutSelected = notes.filter(
+ note => note.id !== singleSelected.id
+ );
+ const visibleNotes = notes.filter(note => !note.hidden);
+
+ requestAnimationFrame(() => {
+ for (const note of notesWithoutSelected) {
+ const noteStatusElement = edgeless.querySelector(
+ `[data-note-id="${note.id}"]`
+ );
+ if (noteStatusElement instanceof HTMLElement) {
+ const noteElement = getBlockElementById(note.id);
+ assertExists(noteElement);
+ computePosition(noteElement, noteStatusElement, {
+ placement: 'top-start',
+ middleware: [
+ flip(),
+ offset({
+ // 24 is `EDGELESS_BLOCK_CHILD_PADDING`
+ mainAxis: (8 + 24) * edgeless.surface.viewport.zoom,
+ crossAxis: (4 - 24) * edgeless.surface.viewport.zoom,
+ }),
+ ],
+ }).then(({ x, y }) => {
+ noteStatusElement.style.top = y + 'px';
+ noteStatusElement.style.left = x + 'px';
+ });
+ }
+ }
+ });
+
+ return html`
+ ${notesWithoutSelected.map(note => {
+ const index = visibleNotes.indexOf(note);
+
+ return html`
+ ${!note.hidden
+ ? html`${index + 1}`
+ : html`${HiddenIcon}`}
+
`;
+ })}
+
`;
+}
diff --git a/packages/blocks/src/page-block/edgeless/edgeless-page-block.ts b/packages/blocks/src/page-block/edgeless/edgeless-page-block.ts
index f9c14e0a9923..b2069e348d8f 100644
--- a/packages/blocks/src/page-block/edgeless/edgeless-page-block.ts
+++ b/packages/blocks/src/page-block/edgeless/edgeless-page-block.ts
@@ -66,6 +66,7 @@ import { PageBlockService } from '../../index.js';
import { tryUpdateNoteSize } from '../utils/index.js';
import { createDragHandle } from './components/create-drag-handle.js';
import { EdgelessNotesContainer } from './components/edgeless-notes-container.js';
+import { EdgelessNotesStatus } from './components/notes-status.js';
import { EdgelessDraggingAreaRect } from './components/rects/dragging-area-rect.js';
import { EdgelessHoverRect } from './components/rects/hover-rect.js';
import {
@@ -1036,6 +1037,7 @@ export class EdgelessPageBlockComponent
>
`
: nothing}
+ ${EdgelessNotesStatus(this, this.sortedNotes)}