feat: create sync page

packages/app/src/EditorLayout/EditorLayout.tsx

@@ -3,7 +3,7 @@ import { isMobile } from 'react-device-detect'
 import { Box } from '@fower/react'
 import { useAtomValue } from 'jotai'
 import { EditorProvider } from '@penx/editor'
-import { useDoc, useQuerySpaces, useSpaces, useWorkers } from '@penx/hooks'
+import { useQuerySpaces, useSpaces, useWorkers } from '@penx/hooks'
 import { routerAtom } from '@penx/store'
 import { DocContent } from '../doc/DocContent'
 import { CommandPanel } from '../Palette'
@@ -13,6 +13,7 @@ import { AllDocsBox } from './AllDocsBox/AllDocsBox'
 import { MobileNav } from './DocNav/MobileNav'
 import { PCNav } from './DocNav/PCNav'
 import { QueryDocs } from './QueryDocs'
+import { SyncBox } from './SyncBox/SyncBox'
 import { TrashBox } from './TrashBox/TrashBox'
 
 export const EditorLayout: FC<PropsWithChildren> = ({ children }) => {
@@ -33,7 +34,8 @@ export const EditorLayout: FC<PropsWithChildren> = ({ children }) => {
         </Box>
         <Box flex-1 h-100vh relative>
           <MobileNav />
-          <PCNav />
+
+          {name === 'DOC' && <PCNav />}
 
           <Box
             overflowYAuto
@@ -44,6 +46,7 @@ export const EditorLayout: FC<PropsWithChildren> = ({ children }) => {
             {name === 'TRASH' && <TrashBox />}
             {name === 'ALL_DOCS' && <AllDocsBox />}
             {name === 'DOC' && <DocContent />}
+            {name === 'SYNC' && <SyncBox />}
           </Box>
 
           <StatusBar></StatusBar>

packages/app/src/EditorLayout/SyncBox/SyncBox.tsx

@@ -0,0 +1,17 @@
+import { Box } from '@fower/react'
+import { useDocs } from '@penx/hooks'
+
+export const SyncBox = () => {
+  return (
+    <Box px10 py10 bgWhite rounded2XL>
+      <Box toCenterY toBetween gap2 mb8>
+        <Box fontBold text3XL>
+          Sync
+        </Box>
+      </Box>
+      <Box>
+        <Box>gogo</Box>
+      </Box>
+    </Box>
+  )
+}

packages/app/src/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@fower/react'
 import { useAtom } from 'jotai'
-import { Folder, Trash2 } from 'lucide-react'
+import { Cloud, Folder, Trash2 } from 'lucide-react'
 import { useAccount } from 'wagmi'
 import { useDocs } from '@penx/hooks'
 import { extensionStoreAtom, store } from '@penx/store'
@@ -8,6 +8,7 @@ import { ExtensionStore } from '@penx/types'
 import { FavoriteBox } from './FavoriteBox/FavoriteBox'
 import { RecentlyEdited } from './RecentlyEdited'
 import { RecentlyOpened } from './RecentlyOpened'
+import { SidebarItem } from './SidebarItem'
 import { SpacePopover } from './SpacePopover'
 import { UserAvatarModal } from './UserAvatarModal/UserAvatarModal'
 import { WalletConnectButton } from './WalletConnectButton'
@@ -46,32 +47,22 @@ export const Sidebar = () => {
     >
       <SpacePopover />
       <Box column gap3 flex-1 pb10>
-        <Box
-          toCenterY
-          toBetween
-          gap2
-          bgWhite
-          rounded2XL
-          px2
-          py3
-          cursorPointer
+        <SidebarItem
+          icon={<Folder size={20} />}
+          label="All Docs"
+          count={docList.normalDocs.length}
           onClick={() => {
             store.routeTo('ALL_DOCS')
           }}
-        >
-          <Box toCenterY gap2>
-            <Box inlineFlex gray500>
-              <Folder size={20} />
-            </Box>
-            <Box fontSemibold textLG>
-              All Docs
-            </Box>
-          </Box>
-          <Box gray500 roundedFull textXS>
-            {docList.normalDocs.length}
-          </Box>
-          B
-        </Box>
+        />
+
+        <SidebarItem
+          icon={<Cloud size={20} />}
+          label="Sync"
+          onClick={() => {
+            store.routeTo('SYNC')
+          }}
+        />
 
         {components.map((C, i) => (
           <C key={i} />
@@ -81,34 +72,15 @@ export const Sidebar = () => {
         <RecentlyOpened />
         <RecentlyEdited />
 
-        <Box
-          toCenterY
-          toBetween
-          gap2
-          bgWhite
-          rounded2XL
-          pl2
-          pr3
-          py3
-          cursorPointer
+        <SidebarItem
+          icon={<Trash2 size={20} />}
+          label="Trash"
+          count={docList.normalDocs.length}
           onClick={() => {
             store.routeTo('TRASH')
           }}
-        >
-          <Box toCenterY gap2>
-            <Box inlineFlex gray500>
-              <Trash2 size={20} />
-            </Box>
-            <Box fontSemibold textLG>
-              Trash
-            </Box>
-          </Box>
-          <Box gray500 roundedFull textXS>
-            {docList.trashedDocs.length}
-          </Box>
-        </Box>
+        />
       </Box>
-
       <Box>
         {!isConnected && <WalletConnectButton size="lg" w-100p />}
         {isConnected && <UserAvatarModal />}

packages/app/src/Sidebar/SidebarItem.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react'
+import { Box } from '@fower/react'
+
+interface SidebarItemProps {
+  label: ReactNode
+  icon: ReactNode
+  count?: ReactNode
+  onClick: () => void
+}
+
+export const SidebarItem = ({
+  icon,
+  count,
+  label,
+  onClick,
+}: SidebarItemProps) => {
+  return (
+    <Box
+      toCenterY
+      toBetween
+      gap2
+      bgWhite
+      rounded2XL
+      px2
+      py3
+      cursorPointer
+      onClick={onClick}
+    >
+      <Box toCenterY gap2>
+        <Box inlineFlex gray500>
+          {icon}
+        </Box>
+        <Box fontSemibold textLG>
+          {label}
+        </Box>
+      </Box>
+      <Box gray500 roundedFull textXS>
+        {count}
+      </Box>
+    </Box>
+  )
+}

packages/app/src/Sidebar/UserAvatarModal/UserAvatarModal.tsx

@@ -70,7 +70,14 @@ export const UserAvatarModal: FC<Props> = () => {
                 {nickname}
               </Box>
             </Box>
-            <Button isSquare variant="ghost" colorScheme="gray600">
+            <Button
+              isSquare
+              variant="ghost"
+              colorScheme="gray600"
+              onClick={() => {
+                disconnect()
+              }}
+            >
               <IconDisconnect />
             </Button>
           </Box>

packages/types/src/index.ts

@@ -8,7 +8,7 @@ export * from './interfaces'
 
 type pluginId = string
 
-export type RouteName = 'DOC' | 'TRASH' | 'ALL_DOCS'
+export type RouteName = 'DOC' | 'TRASH' | 'ALL_DOCS' | 'SYNC'
 
 export type RouterStore = {
   name: RouteName