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/core/src/mobile/pages/workspace/detail/sheets/doc-info.css.ts

@@ -1,26 +1,5 @@
-import { rowHPadding } from '@affine/core/components/affine/page-properties/styles.css';
 import { style } from '@vanilla-extract/css';
 
-export const viewport = style({
-  vars: {
-    [rowHPadding]: '0px',
-  },
-});
-
-export const item = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  gap: 4,
-  height: 34,
-  padding: '0 20px',
-
-  fontSize: 17,
-  lineHeight: '22px',
-  fontWeight: 400,
-  letterSpacing: -0.43,
-});
-
 export const linksRow = style({
   padding: '0 16px',
 });
@@ -28,24 +7,7 @@ export const linksRow = style({
 export const timeRow = style({
   padding: '0 16px',
 });
-
-export const tagsRow = style({
-  padding: '0 16px',
-});
-
-export const properties = style({
-  padding: '0 16px',
-});
-
 export const scrollBar = style({
   width: 6,
   transform: 'translateX(-4px)',
 });
-
-export const rowNameContainer = style({
-  display: 'flex',
-  flexDirection: 'row',
-  gap: 6,
-  padding: 6,
-  width: '160px',
-});

packages/frontend/core/src/mobile/pages/workspace/detail/sheets/doc-info.tsx

@@ -1,12 +1,6 @@
 import { Divider, Scrollable } from '@affine/component';
-import {
-  PagePropertyRow,
-  SortableProperties,
-  usePagePropertiesManager,
-} from '@affine/core/components/affine/page-properties';
-import { managerContext } from '@affine/core/components/affine/page-properties/common';
+import { DocPropertiesTable } from '@affine/core/components/affine/page-properties';
 import { LinksRow } from '@affine/core/components/affine/page-properties/info-modal/links-row';
-import { TagsRow } from '@affine/core/components/affine/page-properties/info-modal/tags-row';
 import { TimeRow } from '@affine/core/components/affine/page-properties/info-modal/time-row';
 import { DocsSearchService } from '@affine/core/modules/docs-search';
 import { useI18n } from '@affine/i18n';
@@ -16,7 +10,6 @@ import { Suspense, useMemo } from 'react';
 import * as styles from './doc-info.css';
 
 export const DocInfoSheet = ({ docId }: { docId: string }) => {
-  const manager = usePagePropertiesManager(docId);
   const docsSearchService = useService(DocsSearchService);
   const t = useI18n();
 
@@ -35,64 +28,32 @@ export const DocInfoSheet = ({ docId }: { docId: string }) => {
 
   return (
     <Scrollable.Root>
-      <Scrollable.Viewport
-        className={styles.viewport}
-        data-testid="doc-info-menu"
-      >
-        <managerContext.Provider value={manager}>
-          <Suspense>
-            <TimeRow docId={docId} className={styles.timeRow} />
-            <Divider size="thinner" />
-            {backlinks && backlinks.length > 0 ? (
-              <>
-                <LinksRow
-                  className={styles.linksRow}
-                  references={backlinks}
-                  label={t['com.affine.page-properties.backlinks']()}
-                />
-                <Divider size="thinner" />
-              </>
-            ) : null}
-            {links && links.length > 0 ? (
-              <>
-                <LinksRow
-                  className={styles.linksRow}
-                  references={links}
-                  label={t['com.affine.page-properties.outgoing-links']()}
-                />
-                <Divider size="thinner" />
-              </>
-            ) : null}
-            <div className={styles.properties}>
-              <TagsRow docId={docId} readonly={manager.readonly} />
-              <SortableProperties>
-                {properties =>
-                  properties.length ? (
-                    <>
-                      {properties
-                        .filter(
-                          property =>
-                            manager.isPropertyRequired(property.id) ||
-                            (property.visibility !== 'hide' &&
-                              !(
-                                property.visibility === 'hide-if-empty' &&
-                                !property.value
-                              ))
-                        )
-                        .map(property => (
-                          <PagePropertyRow
-                            key={property.id}
-                            property={property}
-                            rowNameClassName={styles.rowNameContainer}
-                          />
-                        ))}
-                    </>
-                  ) : null
-                }
-              </SortableProperties>
-            </div>
-          </Suspense>
-        </managerContext.Provider>
+      <Scrollable.Viewport data-testid="doc-info-menu">
+        <Suspense>
+          <TimeRow docId={docId} className={styles.timeRow} />
+          <Divider size="thinner" />
+          {backlinks && backlinks.length > 0 ? (
+            <>
+              <LinksRow
+                className={styles.linksRow}
+                references={backlinks}
+                label={t['com.affine.page-properties.backlinks']()}
+              />
+              <Divider size="thinner" />
+            </>
+          ) : null}
+          {links && links.length > 0 ? (
+            <>
+              <LinksRow
+                className={styles.linksRow}
+                references={links}
+                label={t['com.affine.page-properties.outgoing-links']()}
+              />
+              <Divider size="thinner" />
+            </>
+          ) : null}
+          <DocPropertiesTable />
+        </Suspense>
       </Scrollable.Viewport>
       <Scrollable.Scrollbar className={styles.scrollBar} />
     </Scrollable.Root>