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/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') {