feat(core): page info ui (#5729)

this PR includes the main table view in the page detail page

packages/frontend/core/src/modules/workspace/properties/adapter.ts

@@ -25,10 +25,10 @@ const AFFINE_PROPERTIES_ID = 'affine:workspace-properties';
  */
 export class WorkspacePropertiesAdapter {
   // provides a easy-to-use interface for workspace properties
-  private readonly proxy: WorkspaceAffineProperties;
+  public readonly proxy: WorkspaceAffineProperties;
   public readonly properties: Y.Map<any>;
 
-  constructor(private readonly workspace: Workspace) {
+  constructor(public readonly workspace: Workspace) {
     // check if properties exists, if not, create one
     const rootDoc = workspace.blockSuiteWorkspace.doc;
     this.properties = rootDoc.getMap(AFFINE_PROPERTIES_ID);
@@ -69,7 +69,7 @@ export class WorkspacePropertiesAdapter {
     });
   }
 
-  private ensurePageProperties(pageId: string) {
+  ensurePageProperties(pageId: string) {
     // fixme: may not to be called every time
     defaultsDeep(this.proxy.pageProperties, {
       [pageId]: {
@@ -88,6 +88,11 @@ export class WorkspacePropertiesAdapter {
     });
   }
 
+  // leak some yjs abstraction to modify multiple properties at once
+  transact = this.workspace.blockSuiteWorkspace.doc.transact.bind(
+    this.workspace.blockSuiteWorkspace.doc
+  );
+
   get schema() {
     return this.proxy.schema;
   }
@@ -103,6 +108,7 @@ export class WorkspacePropertiesAdapter {
   // ====== utilities ======
 
   getPageProperties(pageId: string) {
+    this.ensurePageProperties(pageId);
     return this.pageProperties[pageId];
   }
 
@@ -140,6 +146,14 @@ export class WorkspacePropertiesAdapter {
     if (tags.some(t => t.id === tagId)) {
       return;
     }
+    // add tag option if not exist
+    if (!this.tagOptions.some(t => t.id === tagId)) {
+      if (typeof tag === 'string') {
+        throw new Error(`Tag ${tag} does not exist`);
+      } else {
+        this.tagOptions.push(tag);
+      }
+    }
     const pageProperties = this.pageProperties[pageId];
     pageProperties.system[PageSystemPropertyId.Tags].value.push(tagId);
   }

packages/frontend/core/src/modules/workspace/properties/schema.ts

@@ -15,10 +15,11 @@ export enum PageSystemPropertyId {
 }
 
 export enum PagePropertyType {
-  String = 'string',
+  Text = 'text',
   Number = 'number',
-  Boolean = 'boolean',
   Date = 'date',
+  Progress = 'progress',
+  Checkbox = 'checkbox',
   Tags = 'tags',
 }
 
@@ -26,7 +27,9 @@ export const PagePropertyMetaBaseSchema = z.object({
   id: z.string(),
   name: z.string(),
   source: z.string(),
-  type: z.string(),
+  type: z.nativeEnum(PagePropertyType),
+  icon: z.string(),
+  required: z.boolean().optional(),
 });
 
 export const PageSystemPropertyMetaBaseSchema =
@@ -36,13 +39,13 @@ export const PageSystemPropertyMetaBaseSchema =
 
 export const PageCustomPropertyMetaSchema = PagePropertyMetaBaseSchema.extend({
   source: z.literal('custom'),
-  type: z.nativeEnum(PagePropertyType),
+  order: z.number(),
 });
 
 // ====== page info schema ======
 export const PageInfoItemSchema = z.object({
   id: z.string(), // property id. Maps to PagePropertyMetaSchema.id
-  hidden: z.boolean().optional(),
+  visibility: z.enum(['visible', 'hide', 'hide-if-empty']),
   value: z.any(), // corresponds to PagePropertyMetaSchema.type
 });
 
@@ -56,6 +59,8 @@ export const PageInfoTagsItemSchema = PageInfoItemSchema.extend({
   value: z.array(z.string()),
 });
 
+export type PageInfoTagsItem = z.infer<typeof PageInfoTagsItemSchema>;
+
 // ====== workspace properties schema ======
 export const WorkspaceFavoriteItemSchema = z.object({
   id: z.string(),
@@ -82,8 +87,12 @@ const WorkspaceAffinePropertiesSchemaSchema = z.object({
   }),
 });
 
+const PageInfoCustomPropertyItemSchema = PageInfoItemSchema.extend({
+  order: z.number(),
+});
+
 const WorkspacePagePropertiesSchema = z.object({
-  custom: z.record(PageInfoItemSchema.extend({ order: z.number() })),
+  custom: z.record(PageInfoCustomPropertyItemSchema),
   system: z.object({
     [PageSystemPropertyId.Journal]: PageInfoJournalItemSchema,
     [PageSystemPropertyId.Tags]: PageInfoTagsItemSchema,
@@ -96,6 +105,18 @@ export const WorkspaceAffinePropertiesSchema = z.object({
   pageProperties: z.record(WorkspacePagePropertiesSchema),
 });
 
+export type PageInfoCustomPropertyMeta = z.infer<
+  typeof PageCustomPropertyMetaSchema
+>;
+
 export type WorkspaceAffineProperties = z.infer<
   typeof WorkspaceAffinePropertiesSchema
 >;
+
+export type PageInfoCustomProperty = z.infer<
+  typeof PageInfoCustomPropertyItemSchema
+>;
+
+export type WorkspaceAffinePageProperties = z.infer<
+  typeof WorkspacePagePropertiesSchema
+>;