feat: create AllDocsBox

packages/app/src/EditorLayout/AllDocsBox/AllDocsBox.tsx

@@ -0,0 +1,20 @@
+import { Box } from '@fower/react'
+import { useDocs } from '@penx/hooks'
+import { AllDocsTable } from './AllDocsTable'
+
+export const AllDocsBox = () => {
+  const { docList } = useDocs()
+
+  return (
+    <Box px10 py10 bgWhite rounded2XL>
+      <Box toCenterY toBetween gap2 mb8>
+        <Box fontBold text3XL>
+          All Docs
+        </Box>
+      </Box>
+      <Box column gray700>
+        <AllDocsTable docs={docList.docs} />
+      </Box>
+    </Box>
+  )
+}

packages/app/src/EditorLayout/AllDocsBox/AllDocsTable.tsx

@@ -0,0 +1,96 @@
+import { Box } from '@fower/react'
+import { RotateCcw, Trash2 } from 'lucide-react'
+import {
+  Button,
+  ColumnsType,
+  Table,
+  toast,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from 'uikit'
+import { Doc, DocService } from '@penx/domain'
+import { store } from '@penx/store'
+
+interface Props {
+  docs: Doc[]
+}
+
+export const AllDocsTable = ({ docs }: Props) => {
+  const columns: ColumnsType<Doc> = [
+    {
+      title: 'Name',
+      dataIndex: 'title',
+      key: 'title',
+      width: '50%',
+      render(value) {
+        return <Box fontBold>{value}</Box>
+      },
+    },
+    {
+      title: 'Created time',
+      dataIndex: 'createdAtFormatted',
+      key: 'createdAtFormatted',
+      render: (value) => <Box textXS>{value}</Box>,
+    },
+    {
+      title: 'Updated time',
+      dataIndex: 'updatedAtFormatted',
+      key: 'updatedAtFormatted',
+      render: (value) => <Box textXS>{value}</Box>,
+    },
+    {
+      title: '',
+      dataIndex: 'op',
+      key: 'op',
+      render(_, item) {
+        return (
+          <Box toCenterY gap1>
+            <Button size={28} variant="ghost" colorScheme="gray500" isSquare>
+              <Trash2 />
+            </Button>
+          </Box>
+        )
+      },
+    },
+  ]
+
+  return (
+    <Table
+      columns={columns}
+      data={docs}
+      rowKey="id"
+      bordered={false}
+      components={{
+        body: {
+          row: (props: any) => (
+            <Box
+              as="tr"
+              {...props}
+              rounded2XL
+              bgGray100--hover
+              cursorPointer
+              transitionColors
+              onClick={async () => {
+                const doc = docs.find((doc) => doc.id === props['data-row-key'])
+                await new DocService(doc?.raw!).selectDoc()
+              }}
+            />
+          ),
+          cell: (props: any) => {
+            return (
+              <Box
+                as="td"
+                px3
+                py2
+                textLeft
+                {...props}
+                contentEditable={false}
+              />
+            )
+          },
+        },
+      }}
+    />
+  )
+}

packages/app/src/EditorLayout/EditorLayout.tsx

@@ -4,7 +4,7 @@ import { useAtomValue } from 'jotai'
 import { EditorProvider } from '@penx/editor'
 import {
   useDoc,
-  useInitDoc,
+  useQueryDoc,
   useQuerySpaces,
   useSpaces,
   useWorkers,
@@ -14,17 +14,17 @@ import { DocContent } from '../doc/DocContent'
 import { CommandPanel } from '../Palette'
 import { Sidebar } from '../Sidebar/Sidebar'
 import { StatusBar } from '../StatusBar/StatusBar'
+import { AllDocsBox } from './AllDocsBox/AllDocsBox'
 import { MobileNav } from './DocNav/MobileNav'
 import { PCNav } from './DocNav/PCNav'
 import { QueryDocs } from './QueryDocs'
 import { TrashBox } from './TrashBox/TrashBox'
 
 function WithDoc({ docId, children }: PropsWithChildren<{ docId: string }>) {
-  const doc = useDoc()
-  useInitDoc(docId)
+  const { inited } = useQueryDoc(docId)
   useWorkers()
 
-  if (!doc.inited) return null
+  if (!inited) return null
 
   return <>{children}</>
 }
@@ -58,6 +58,7 @@ export const EditorLayout: FC<PropsWithChildren> = ({ children }) => {
             py0
           >
             {name === 'TRASH' && <TrashBox />}
+            {name === 'ALL_DOCS' && <AllDocsBox />}
             {name === 'DOC' && (
               <WithDoc docId={activeSpace.activeDocId!}>
                 <DocContent />

packages/app/src/EditorLayout/TrashBox/TrashTable.tsx

@@ -31,11 +31,13 @@ export const TrashTable = ({ docs }: Props) => {
       title: 'Created time',
       dataIndex: 'createdAtFormatted',
       key: 'createdAtFormatted',
+      render: (value) => <Box textXS>{value}</Box>,
     },
     {
       title: 'Updated time',
       dataIndex: 'updatedAtFormatted',
       key: 'updatedAtFormatted',
+      render: (value) => <Box textXS>{value}</Box>,
     },
     {
       title: '',
@@ -71,5 +73,5 @@ export const TrashTable = ({ docs }: Props) => {
     },
   ]
 
-  return <Table columns={columns} data={docs} rowKey="id" />
+  return <Table columns={columns} data={docs} rowKey="id" bordered={false} />
 }

packages/app/src/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@fower/react'
 import { useAtom } from 'jotai'
-import { Trash, Trash2 } from 'lucide-react'
+import { Database, Folder, Trash, Trash2 } from 'lucide-react'
 import { ExtensionStore, extensionStoreAtom, store } from '@penx/store'
 import { RecentlyEdited } from './RecentlyEdited'
 import { RecentlyOpened } from './RecentlyOpened'
@@ -36,6 +36,26 @@ export const Sidebar = () => {
     >
       <SpacePopover />
 
+      <Box
+        toCenterY
+        gap2
+        bgWhite
+        rounded2XL
+        px2
+        py3
+        cursorPointer
+        onClick={() => {
+          store.routeTo('ALL_DOCS')
+        }}
+      >
+        <Box inlineFlex gray500>
+          <Folder size={20} />
+        </Box>
+        <Box fontSemibold textLG>
+          All Docs
+        </Box>
+      </Box>
+
       {components.map((C, i) => (
         <C key={i} />
       ))}

packages/hooks/package.json

@@ -21,10 +21,11 @@
     "@penx/catalogue": "workspace:*",
     "@penx/constants": "workspace:*",
     "@penx/domain": "workspace:*",
+    "@penx/extension-typings": "*",
     "@penx/local-db": "workspace:*",
     "@penx/shared": "workspace:*",
     "@penx/store": "workspace:*",
-    "@penx/extension-typings": "*",
+    "@tanstack/react-query": "^4.35.7",
     "jotai": "^2.4.2",
     "ky": "^1.0.1",
     "react-hook-form": "^7.44.3",

packages/hooks/src/useDoc.ts

@@ -1,18 +1,21 @@
-import { useEffect } from 'react'
-import { useAtom } from 'jotai'
+import { useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useAtom, useSetAtom } from 'jotai'
 import { DocService } from '@penx/domain'
 import { db } from '@penx/local-db'
 import { docAtom } from '@penx/store'
 
-export function useInitDoc(docId: string) {
-  const [_, setDoc] = useAtom(docAtom)
+export function useQueryDoc(docId: string) {
+  const setDoc = useSetAtom(docAtom)
+  const [inited, setInited] = useState(false)
 
+  const { isLoading, data: doc } = useQuery(['doc'], () => db.getDoc(docId))
   useEffect(() => {
-    db.getDoc(docId).then((doc) => {
-      if (doc) setDoc(doc)
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    if (!doc) return
+    setDoc(doc)
+    setInited(true)
+  }, [doc, setDoc])
+  return { isLoading, doc, inited }
 }
 
 export function useDoc() {

packages/store/src/store.ts

@@ -12,6 +12,7 @@ import { db, IDoc, ISpace } from '@penx/local-db'
 type pluginId = string
 
 type RouteName = 'DOC' | 'TRASH' | 'ALL_DOCS'
+
 export type RouterStore = {
   name: RouteName
   params: Record<string, any>

packages/uikit/src/table/index.tsx

@@ -1,12 +1,14 @@
 import { ReactNode } from 'react'
 import { Box } from '@fower/react'
 import RcTable from 'rc-table'
-import { GetRowKey } from 'rc-table/lib/interface'
+import { GetRowKey, TableComponents } from 'rc-table/lib/interface'
 
-interface Props {
+interface Props<RecordType = any> {
   rowKey?: string | GetRowKey<any>
   columns: any[]
   data: any
+  components?: TableComponents<RecordType>
+  bordered?: boolean
 }
 
 interface ColumnType<RecordType = any> {
@@ -20,7 +22,13 @@ interface ColumnType<RecordType = any> {
 
 export type ColumnsType<RecordType = any> = ColumnType<RecordType>[]
 
-export const Table = ({ columns, data, rowKey }: Props) => {
+export const Table = ({
+  columns,
+  data,
+  rowKey,
+  components,
+  bordered = true,
+}: Props) => {
   return (
     <RcTable
       columns={columns}
@@ -37,19 +45,28 @@ export const Table = ({ columns, data, rowKey }: Props) => {
             }}
           />
         ),
+
         header: {
           cell: (props: any) => (
             <Box as="th" px3 py2 textLeft fontSemibold gray400 {...props} />
           ),
         },
         body: {
-          row: (props: any) => <Box as="tr" {...props} />,
+          row: (props: any) => (
+            <Box
+              as="tr"
+              {...props}
+              onClick={() => {
+                console.log(props)
+              }}
+            />
+          ),
           cell: (props: any) => (
             <Box
               as="td"
-              borderBottom
-              borderBottomGray200
-              borderGray800--dark
+              borderBottom={bordered}
+              borderBottomGray200={bordered}
+              borderGray800--dark={bordered}
               px3
               py2
               textLeft
@@ -58,6 +75,7 @@ export const Table = ({ columns, data, rowKey }: Props) => {
             />
           ),
         },
+        ...components,
       }}
     />
   )

pnpm-lock.yaml

@@ -3412,6 +3412,9 @@ importers:
       '@penx/store':
         specifier: workspace:*
         version: link:../store
+      '@tanstack/react-query':
+        specifier: ^4.35.7
+        version: 4.35.7(react-dom@18.2.0)(react@18.2.0)
       jotai:
         specifier: ^2.4.2
         version: 2.4.2(@types/react@18.2.22)(react@18.2.0)