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/property/property.css.ts

@@ -0,0 +1,163 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const propertyRoot = style({
+  display: 'flex',
+  minHeight: 32,
+  position: 'relative',
+  padding: '2px 0px 2px 2px',
+  selectors: {
+    '&[draggable="true"]': {
+      cursor: 'grab',
+    },
+    '&[draggable="true"][data-dragging="true"]': {
+      visibility: 'hidden',
+    },
+    '&[draggable="true"]:before': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      cursor: 'grab',
+      top: '50%',
+      left: 0,
+      borderRadius: '2px',
+      backgroundColor: cssVarV2('text/placeholder'),
+      transform: 'translate(-6px, -50%)',
+      transition: 'height 0.2s 0.1s, opacity 0.2s 0.1s',
+      opacity: 0,
+      height: '4px',
+      width: '4px',
+      willChange: 'height, opacity',
+    },
+    '&[draggable="true"]:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      cursor: 'grab',
+      top: '50%',
+      left: 0,
+      borderRadius: '2px',
+      backgroundColor: 'transparent',
+      transform: 'translate(-8px, -50%)',
+      height: '100%',
+      width: '8px',
+      willChange: 'height, opacity',
+    },
+    '&[draggable="true"]:hover:before': {
+      height: 12,
+      opacity: 1,
+    },
+  },
+});
+
+export const hide = style({
+  // Visually hide the property while maintaining its position in the layout.
+  // This ensures that any open menu remains in the same position when the property is hidden.
+  overflow: 'hidden',
+  height: '0px',
+  minHeight: '0px',
+  padding: '0px',
+  visibility: 'hidden',
+  pointerEvents: 'none',
+});
+
+export const propertyNameContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+  borderRadius: 4,
+  fontSize: cssVar('fontSm'),
+  padding: `6px 6px 6px 4px`,
+  flexShrink: 0,
+  lineHeight: '22px',
+  userSelect: 'none',
+  color: cssVarV2('text/secondary'),
+  width: '160px',
+  selectors: {
+    '&[data-has-menu="true"]': {
+      cursor: 'pointer',
+    },
+    '&[data-has-menu="true"]:hover': {
+      backgroundColor: cssVarV2('layer/background/hoverOverlay'),
+    },
+  },
+});
+globalStyle(`[data-drag-preview] ${propertyNameContainer}:hover`, {
+  backgroundColor: 'transparent',
+});
+
+export const propertyNameInnerContainer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 6,
+});
+
+export const propertyIconContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '2px',
+  fontSize: 16,
+  color: cssVarV2('icon/secondary'),
+});
+
+export const propertyNameContent = style({
+  flexGrow: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontSize: cssVar('fontSm'),
+});
+
+export const propertyValueContainer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  position: 'relative',
+  borderRadius: 4,
+  fontSize: cssVar('fontSm'),
+  lineHeight: '22px',
+  padding: `6px`,
+  flex: 1,
+  ':focus-visible': {
+    outline: 'none',
+  },
+  '::placeholder': {
+    color: cssVarV2('text/placeholder'),
+  },
+  selectors: {
+    '&[data-readonly="false"]': {
+      cursor: 'pointer',
+    },
+    '&[data-readonly="false"]:hover': {
+      backgroundColor: cssVarV2('layer/background/hoverOverlay'),
+    },
+    '&[data-readonly="false"]:focus-within': {
+      backgroundColor: cssVarV2('layer/background/hoverOverlay'),
+    },
+  },
+});
+
+export const tableButton = style({
+  alignSelf: 'flex-start',
+  fontSize: cssVar('fontSm'),
+  color: `${cssVarV2('text/secondary')}`,
+  padding: '0 6px',
+  height: 36,
+  fontWeight: 400,
+  gap: 6,
+  '@media': {
+    print: {
+      display: 'none',
+    },
+  },
+});
+globalStyle(`${tableButton} svg`, {
+  fontSize: 16,
+  color: cssVarV2('icon/secondary'),
+});
+globalStyle(`${tableButton}:hover svg`, {
+  color: cssVarV2('icon/primary'),
+});