feat: improve database ui

extensions/database/src/ui/Database.tsx

@@ -11,7 +11,7 @@ export const Database = ({
   const { databaseId } = element
 
   return (
-    <Box flex-1 {...attributes}>
+    <Box flex-1 {...attributes} contentEditable={false}>
       {children}
       <TableView databaseId={databaseId}>{children}</TableView>
     </Box>

extensions/database/src/ui/TableView.tsx

@@ -16,7 +16,7 @@ export const TableView = ({
   return (
     <DatabaseProvider databaseId={databaseId}>
       <Box>
-        <DatabaseHeader />
+        {/* <DatabaseHeader /> */}
         <TableHeader />
         <TableBody />
         {children}

extensions/list/src/types.ts

@@ -13,6 +13,7 @@ export interface TitleElement extends BaseElement {
   nodeType?: string
   props?: {
     date: string
+    color: string
   }
 }
 

extensions/list/src/ui/Title.tsx

@@ -31,6 +31,7 @@ export const Title = ({
   ].includes(element.nodeType as any)
 
   const isDaily = element.nodeType === NodeType.DAILY
+  const isDatabase = element.nodeType === NodeType.DATABASE
 
   // useFocusTitle(element)
 
@@ -43,6 +44,7 @@ export const Title = ({
       relative
       cursorNotAllowed={disabled}
       mb4
+      toCenterY
       {...attributes}
       // {...nodeProps}
       css={{
@@ -59,6 +61,17 @@ export const Title = ({
         },
       }}
     >
+      {isDatabase && (
+        <Box
+          contentEditable={false}
+          color={element.props?.color || 'black'}
+          mr-4
+          // mb--2
+          scale={90}
+        >
+          #
+        </Box>
+      )}
       {!isDaily && children}
       {isDaily && (
         <Box toCenterY gap2>

extensions/tag/src/ui/Tag.tsx

@@ -16,7 +16,7 @@ export const Tag = ({
   const node = nodeList.nodeMap.get(element.databaseId)!
 
   async function clickTag() {
-    const database = await db.getDatabaseByName(element.name)
+    const database = await db.getNode(element.databaseId)
     if (database) {
       console.log('=====database:', database)
 
@@ -49,7 +49,7 @@ export const Tag = ({
         color--D4--hover={node?.tagColor}
         onClick={clickTag}
       >
-        # {element.name || node?.tagName}
+        # {node.tagName}
       </Box>
     </Box>
   )

packages/model/src/Node.ts

@@ -46,7 +46,13 @@ export class Node {
     this.raw.element = JSON.parse(JSON.stringify(this.raw.element))
 
     // override the title
-    if (this.isDaily || this.isDailyRoot || this.isInbox || this.isTrash) {
+    if (
+      this.isDaily ||
+      this.isDailyRoot ||
+      this.isInbox ||
+      this.isTrash ||
+      this.isDatabase
+    ) {
       this.raw.element[0].children[0].text = this.title
     }
 
@@ -66,6 +72,7 @@ export class Node {
     if (this.isTrash) return 'Trash'
     if (this.isDatabaseRoot) return 'Tags'
     if (this.isDailyRoot) return 'Daily Notes'
+    if (this.isDatabase) return this.props.name
 
     return this.element[0]?.children?.[0]?.text || this.props.name || ''
   }

packages/serializer/src/nodeToSlate.ts

@@ -14,8 +14,6 @@ import { INode } from '@penx/model-types'
  * @returns
  */
 export function nodeToSlate(node: INode, allNodes: INode[]) {
-  // console.log('node........:', node)
-
   const serializer = new NodeToSlateSerializer(
     new Node(node),
     allNodes.map((n) => new Node(n)),
@@ -147,7 +145,16 @@ export class NodeToSlateSerializer {
 }
 
 function getDatabaseNodeEditorValue(node: Node) {
+  // console.log('node-------:', node)
+
   const value = [
+    {
+      id: node.id,
+      type: ELEMENT_TITLE,
+      props: node.props,
+      nodeType: node.type,
+      children: node.element,
+    },
     {
       type: ELEMENT_UL,
       children: [
@@ -174,7 +181,6 @@ function getDatabaseNodeEditorValue(node: Node) {
     },
   ]
 
-  console.log('======value:', value)
   return value
 }
 

packages/service/src/NodeService.ts

@@ -105,9 +105,15 @@ export class NodeService {
     isInReference = false,
   ) => {
     if (title) {
-      node = await db.updateNode(node.id, {
-        element: title.children,
-      })
+      if (this.node.isDatabase) {
+        node = await db.updateNode(node.id, {
+          props: { ...node.props, name: SlateNode.string(title) },
+        })
+      } else {
+        node = await db.updateNode(node.id, {
+          element: title.children,
+        })
+      }
 
       // update space name
       if (this.node.isRootNode) {
@@ -117,7 +123,7 @@ export class NodeService {
       }
     }
 
-    if (ul) {
+    if (ul && !this.node.isDatabase) {
       await this.saveNodes(node.id, ul)
     }
 

packages/store/src/stores/NodeStore.ts

@@ -68,7 +68,7 @@ export class NodeStore {
     const activeNodes = this.getActiveNodes()
 
     if (index === 0 && isEqual(activeNodes[0], node)) {
-      // console.log('is equal node')
+      console.log('is equal node')
       return
     }