refactor(core): doc property (#8465)

doc property upgraded to use orm.

The visibility of the property are simplified to three types: `always show`, `always hide`, `hide when empty`, and the default is `always show`.

![CleanShot 2024-10-14 at 15 34 52](https://github.com/user-attachments/assets/748b8b80-061f-4d6a-8579-52e59df717c2)

Added a sidebar view to manage properties
![CleanShot 2024-10-14 at 15 35 58](https://github.com/user-attachments/assets/bffa9b1a-a1a5-4708-b2e8-4963120f3af9)

new property ui in workspace settings
![CleanShot 2024-10-14 at 15 36 44](https://github.com/user-attachments/assets/572d8dcc-9b3d-462a-9bcc-5f5fa8e622da)

Property lists can be collapsed
![CleanShot 2024-10-14 at 15 37 59](https://github.com/user-attachments/assets/2b20be1a-8141-478a-8fe7-405aff6d04fd)

packages/frontend/component/src/ui/dnd/draggable.ts

@@ -182,6 +182,11 @@ export const useDraggable = <D extends DNDData = DNDData>(
         let previewPosition: DraggableDragPreviewPosition =
           options.dragPreviewPosition ?? 'native';
 
+        source.element.dataset['dragPreview'] = 'true';
+        requestAnimationFrame(() => {
+          delete source.element.dataset['dragPreview'];
+        });
+
         if (enableCustomDragPreview.current) {
           setCustomNativeDragPreview({
             getOffset: (...args) => {

packages/frontend/component/src/ui/dnd/drop-indicator.css.ts

@@ -49,6 +49,12 @@ export const treeLine = style({
     height: 2,
     right: 0,
   },
+
+  selectors: {
+    ['&[data-no-terminal="true"]::before']: {
+      display: 'none',
+    },
+  },
 });
 
 export const lineAboveStyles = style({
@@ -143,7 +149,7 @@ export const left = style({
 
 export const edgeLine = style({
   vars: {
-    [terminalSize]: '8px',
+    [terminalSize]: '6px',
   },
   display: 'block',
   position: 'absolute',
@@ -156,11 +162,17 @@ export const edgeLine = style({
   // Terminal
   '::before': {
     content: '""',
-    width: terminalSize,
-    height: terminalSize,
+    width: 0,
+    height: 0,
     boxSizing: 'border-box',
     position: 'absolute',
     border: `${terminalSize} solid ${cssVar('--affine-primary-color')}`,
     borderRadius: '50%',
   },
+
+  selectors: {
+    ['&[data-no-terminal="true"]::before']: {
+      display: 'none',
+    },
+  },
 });

packages/frontend/component/src/ui/dnd/drop-indicator.tsx

@@ -10,14 +10,17 @@ import * as styles from './drop-indicator.css';
 export type DropIndicatorProps = {
   instruction?: Instruction | null;
   edge?: Edge | null;
+  noTerminal?: boolean;
 };
 
 function getTreeElement({
   instruction,
   isBlocked,
+  noTerminal,
 }: {
   instruction: Exclude<Instruction, { type: 'instruction-blocked' }>;
   isBlocked: boolean;
+  noTerminal?: boolean;
 }): ReactElement | null {
   const style = {
     [styles.horizontalIndent]: `${instruction.currentLevel * instruction.indentPerLevel}px`,
@@ -31,6 +34,7 @@ function getTreeElement({
       <div
         className={clsx(styles.treeLine, styles.lineAboveStyles)}
         style={assignInlineVars(style)}
+        data-no-terminal={noTerminal}
       />
     );
   }
@@ -39,6 +43,7 @@ function getTreeElement({
       <div
         className={clsx(styles.treeLine, styles.lineBelowStyles)}
         style={assignInlineVars(style)}
+        data-no-terminal={noTerminal}
       />
     );
   }
@@ -48,6 +53,7 @@ function getTreeElement({
       <div
         className={clsx(styles.outlineStyles)}
         style={assignInlineVars(style)}
+        data-no-terminal={noTerminal}
       />
     );
   }
@@ -61,6 +67,7 @@ function getTreeElement({
       <div
         className={clsx(styles.treeLine, styles.lineBelowStyles)}
         style={assignInlineVars(style)}
+        data-no-terminal={noTerminal}
       />
     );
   }
@@ -88,13 +95,14 @@ const edgeStyles: Record<Edge, string> = {
   right: styles.right,
 };
 
-function getEdgeElement(edge: Edge, gap: number = 0) {
+function getEdgeElement(edge: Edge, gap: number = 0, noTerminal?: boolean) {
   const lineOffset = `calc(-0.5 * (${gap}px + 2px))`;
 
   const orientation = edgeToOrientationMap[edge];
 
   return (
     <div
+      data-no-terminal={noTerminal}
       className={clsx([
         styles.edgeLine,
         orientationStyles[orientation],
@@ -105,9 +113,13 @@ function getEdgeElement(edge: Edge, gap: number = 0) {
   );
 }
 
-export function DropIndicator({ instruction, edge }: DropIndicatorProps) {
+export function DropIndicator({
+  instruction,
+  edge,
+  noTerminal,
+}: DropIndicatorProps) {
   if (edge) {
-    return getEdgeElement(edge, 0);
+    return getEdgeElement(edge, 0, noTerminal);
   }
   if (instruction) {
     if (instruction.type === 'instruction-blocked') {